From 869f5c3f5953569496cc985666d84832e914be53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Tue, 8 Oct 2024 17:35:43 +0200
Subject: [PATCH 01/40] fix(styles): prevent utility API from creating unwanted
 classes (#3644)

---
 packages/styles/src/functions/_string.scss    |  7 ++++-
 packages/styles/src/utilities/_mixins.scss    | 25 +++++++-----------
 packages/styles/src/utilities/index.scss      | 26 +++++++++++++------
 .../styles/tests/functions/string.test.scss   | 12 +++++++++
 .../styles/tests/utilities/mixins.test.scss   | 25 +++++++++++++++---
 5 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/packages/styles/src/functions/_string.scss b/packages/styles/src/functions/_string.scss
index 1c79f06f99..4572699983 100644
--- a/packages/styles/src/functions/_string.scss
+++ b/packages/styles/src/functions/_string.scss
@@ -1,6 +1,11 @@
 @use 'sass:string';
 
-@function replace($string, $term, $replacement: '') {
+@function contains($string, $term) {
+  $index: string.index($string, $term);
+  @return if($index == null, false, true);
+}
+
+@function replace($string, $term, $replacement) {
   $index: string.index($string, $term);
 
   @if $index {
diff --git a/packages/styles/src/utilities/_mixins.scss b/packages/styles/src/utilities/_mixins.scss
index 01e84ab529..6c98727479 100644
--- a/packages/styles/src/utilities/_mixins.scss
+++ b/packages/styles/src/utilities/_mixins.scss
@@ -1,22 +1,15 @@
+@use '../functions/string';
 @use '../mixins/media';
 @use '../variables/breakpoints';
 
-@mixin generate-utilities($properties, $value, $prefix, $suffix, $infix: '') {
-  .#{$prefix}#{$infix}#{$suffix} {
-    @each $property in $properties {
-      #{$property}: #{$value};
-    }
-  }
-}
-
-@mixin generate-responsive-utilities($properties, $value, $prefix, $suffix) {
-  @each $breakpoint, $min-width in breakpoints.$grid-breakpoints {
-    @if ($min-width == 0) {
-      @include generate-utilities($properties, $value, $prefix, $suffix);
-    } @else {
-      @include media.min($min-width) {
-        $infix: '-#{$breakpoint}';
-        @include generate-utilities($properties, $value, $prefix, $suffix, $infix);
+@mixin generate-utilities($group, $tokens, $properties, $prefix, $infix: '') {
+  @each $key, $value in $tokens {
+    @if (string.contains($key, 'post-utility-#{$group}')) {
+      $suffix: string.replace($key, 'post-utility-#{$group}', '');
+      .#{$prefix}#{$infix}#{$suffix} {
+        @each $property in $properties {
+          #{$property}: #{$value} !important;
+        }
       }
     }
   }
diff --git a/packages/styles/src/utilities/index.scss b/packages/styles/src/utilities/index.scss
index 4faeb72b77..84aeed5e0d 100644
--- a/packages/styles/src/utilities/index.scss
+++ b/packages/styles/src/utilities/index.scss
@@ -1,6 +1,8 @@
 @use 'sass:map';
 
 @use '../functions/string';
+@use '../mixins/media';
+@use '../variables/breakpoints';
 
 @use './mixins' as *;
 @use './variables' as *;
@@ -15,15 +17,23 @@
     $responsive: map.get($classesConfig, responsive);
     $prefixes: map.get($classesConfig, prefixes);
 
-    @each $key, $value in $tokens {
-      $suffix: string.replace($key, 'post-utility-#{$group}');
-
-      @each $prefix, $properties in $prefixes {
-        @if $responsive {
-          @include generate-responsive-utilities($properties, $value, $prefix, $suffix);
-        } @else {
-          @include generate-utilities($properties, $value, $prefix, $suffix);
+    @each $prefix, $properties in $prefixes {
+      @if $responsive {
+        @each $breakpoint, $min-width in breakpoints.$grid-breakpoints {
+          @if ($min-width == 0) {
+            // responsive utilities on smaller breakpoint (no breakpoint infix)
+            @include generate-utilities($group, $tokens, $properties, $prefix);
+          } @else {
+            // responsive utilities on all breakpoints that are not the smallest (with breakpoint infix)
+            @include media.min($min-width) {
+              $infix: '-#{$breakpoint}';
+              @include generate-utilities($group, $tokens, $properties, $prefix, $infix);
+            }
+          }
         }
+      } @else {
+        // non-responsive utilities
+        @include generate-utilities($group, $tokens, $properties, $prefix);
       }
     }
   }
diff --git a/packages/styles/tests/functions/string.test.scss b/packages/styles/tests/functions/string.test.scss
index 2247cf29a6..2eee309474 100644
--- a/packages/styles/tests/functions/string.test.scss
+++ b/packages/styles/tests/functions/string.test.scss
@@ -3,6 +3,18 @@
 
 $paragraph: "I think Ruth's dog is cuter than your dog!";
 
+// it should return true if the term is found
+@include jest.equal(
+    true,
+    string.contains($paragraph, 'dog')
+);
+
+// it should return false if the term is not found
+@include jest.equal(
+    false,
+    string.contains($paragraph, 'cat')
+);
+
 // it should replace a term by another
 @include jest.equal(
     'I think my dog is cuter than your dog!',
diff --git a/packages/styles/tests/utilities/mixins.test.scss b/packages/styles/tests/utilities/mixins.test.scss
index 8792c4c959..230947b399 100644
--- a/packages/styles/tests/utilities/mixins.test.scss
+++ b/packages/styles/tests/utilities/mixins.test.scss
@@ -3,9 +3,26 @@
 @use 'tests/jest';
 @use 'src/utilities/mixins';
 
-
 .test {
-  @include mixins.generate-utilities('font-weight', '400', 'fw', 'normal');
-  @include mixins.generate-utilities('font-size', '1.5rem', 'fs', 'large', 'sm');
-  @include mixins.generate-responsive-utilities('row-gap', '48px', 'rg', '48');
+  @include mixins.generate-utilities(
+    $group: 'font-weight',
+    $tokens: (
+      post-utility-font-weight-normal: 400,
+    ),
+    $properties: font-weight,
+    $prefix: 'fw'
+  );
+
+  @include mixins.generate-utilities(
+    $group: 'gutter',
+    $tokens: (
+      post-utility-gutter-12: 12px,
+    ),
+    $properties: (
+      --gutter-x,
+      --gutter-y,
+    ),
+    $prefix: 'g',
+    $infix: '-lg'
+  );
 }

From 252c76818a569bac5b924e4e45c2ee5cd72c2a90 Mon Sep 17 00:00:00 2001
From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Date: Tue, 8 Oct 2024 18:01:33 +0200
Subject: [PATCH 02/40] =?UTF-8?q?chore(changesets):=20=F0=9F=A6=8B?=
 =?UTF-8?q?=F0=9F=93=A6=20publish=20packages=20(main)=20(next)=20(#3551)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @swisspost/design-system-components@9.0.0-next.1

### Major Changes

- Made the heading-level property required for the accordion and removed
it from the accordion-item docs. (by
[@schaertim](https://github.com/schaertim) with
[#3383](https://github.com/swisspost/design-system/pull/3383))

### Patch Changes

- Fixed a bug in nested accordions where closing a child item
unintentionally closed all parent accordion elements. (by
[@schaertim](https://github.com/schaertim) with
[#3427](https://github.com/swisspost/design-system/pull/3427))

- Fixed an issue related to conflicting pointer and focus events hiding
the tooltip unexpectedly in some situations. The tooltip now behaves as
expected in this situation. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#3592](https://github.com/swisspost/design-system/pull/3592))

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.1

## @swisspost/design-system-styles@9.0.0-next.1

### Major Changes

- Removed the following placeholders: `%list-adjustment`,
`%module-container`, `%default-module-spacer`, `%text-container`. (by
[@leagrdv](https://github.com/leagrdv) with
[#3623](https://github.com/swisspost/design-system/pull/3623))

- Updated the margin, padding, and gap utility classes to use the pixel
values (1, 2, ... , 112) instead of size names (hair, line, ...,
bigger-giant). (by [@alizedebray](https://github.com/alizedebray) with
[#3557](https://github.com/swisspost/design-system/pull/3557))

### Minor Changes

- Added Text Highlighted component. (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3586](https://github.com/swisspost/design-system/pull/3586))

- Added lead text component for introductory paragraphs. (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3575](https://github.com/swisspost/design-system/pull/3575))

### Patch Changes

- styles: Added reset styles (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3545](https://github.com/swisspost/design-system/pull/3545))

- Removed global styles (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3554](https://github.com/swisspost/design-system/pull/3554))

- Updated the style of headings (h1-h6). (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3534](https://github.com/swisspost/design-system/pull/3534))

## @swisspost/design-system-components-angular@9.0.0-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.1

## @swisspost/internet-header@1.14.6-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.1

## @swisspost/design-system-intranet-header@9.0.0-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.1

## @swisspost/design-system-styles-primeng@9.0.0-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.1

## @swisspost/design-system-icons@9.0.0-next.1



## @swisspost/design-system-migrations@9.0.0-next.1



## @swisspost/design-system-documentation@6.0.0-next.1

### Major Changes

- Made the heading-level property required for the accordion and removed
it from the accordion-item docs. (by
[@schaertim](https://github.com/schaertim) with
[#3383](https://github.com/swisspost/design-system/pull/3383))

### Minor Changes

- Added a toolbar for switching the theme, channel, and mode of all
stories. (by [@alizedebray](https://github.com/alizedebray) with
[#3528](https://github.com/swisspost/design-system/pull/3528))

- Added documentation outlining the mission statement of the Design
System. (by [@alionazherdetska](https://github.com/alionazherdetska)
with [#3568](https://github.com/swisspost/design-system/pull/3568))

- Added Text Highlighted component. (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3586](https://github.com/swisspost/design-system/pull/3586))

- Updated the margin, padding, and gap utility classes to use the pixel
values (1, 2, ... , 112) instead of size names (hair, line, ...,
bigger-giant). (by [@alizedebray](https://github.com/alizedebray) with
[#3557](https://github.com/swisspost/design-system/pull/3557))

- Added documentation for design principles. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#3565](https://github.com/swisspost/design-system/pull/3565))

- Added lead text component for introductory paragraphs. (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3575](https://github.com/swisspost/design-system/pull/3575))

### Patch Changes

- Updated the style of headings (h1-h6). (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3534](https://github.com/swisspost/design-system/pull/3534))

- Fixed typos in the Sass and HTML href paths. (by
[@schaertim](https://github.com/schaertim) with
[#3466](https://github.com/swisspost/design-system/pull/3466))

-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.1
    -   @swisspost/design-system-styles@9.0.0-next.1
    -   @swisspost/design-system-components-react@9.0.0-next.1
    -   @swisspost/internet-header@1.14.6-next.1
    -   @swisspost/design-system-icons@9.0.0-next.1

## @swisspost/design-system-components-angular-workspace@1.1.10-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.1
    -   @swisspost/design-system-styles@9.0.0-next.1

## @swisspost/design-system-components-react@9.0.0-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.1

## @swisspost/design-system-intranet-header-workspace@3.0.22-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.1

## @swisspost/design-system-intranet-header-showcase@1.0.10-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-intranet-header@9.0.0-next.1

## @swisspost/design-system-nextjs-integration@0.1.14-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.1
    -   @swisspost/design-system-components-react@9.0.0-next.1
    -   @swisspost/internet-header@1.14.6-next.1

## @swisspost/design-system-styles-primeng-workspace@1.0.6-next.1

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.1

## @swisspost/design-system-tokens@9.0.0-next.1

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json                           |  16 ++-
 packages/components-angular/CHANGELOG.md      |   8 ++
 packages/components-angular/package.json      |   6 +-
 .../projects/components/CHANGELOG.md          |   7 ++
 .../projects/components/package.json          |   4 +-
 packages/components-react/CHANGELOG.md        |   7 ++
 packages/components-react/package.json        |   4 +-
 packages/components/CHANGELOG.md              |  14 +++
 packages/components/package.json              |   4 +-
 packages/documentation/CHANGELOG.md           |  32 +++++
 packages/documentation/package.json           |  16 +--
 packages/documentation/public/_redirects      |   1 +
 .../documentation/public/assets/versions.json |  31 ++++-
 packages/icons/CHANGELOG.md                   |   2 +
 packages/icons/package.json                   |   2 +-
 packages/internet-header/CHANGELOG.md         |   7 ++
 packages/internet-header/package.json         |   4 +-
 .../intranet-header-workspace/CHANGELOG.md    |   7 ++
 .../intranet-header-workspace/package.json    |   4 +-
 .../intranet-header-showcase/CHANGELOG.md     |   7 ++
 .../intranet-header-showcase/package.json     |   4 +-
 .../projects/intranet-header/CHANGELOG.md     |   7 ++
 .../projects/intranet-header/package.json     |   6 +-
 packages/migrations/CHANGELOG.md              |   2 +
 packages/migrations/package.json              |   2 +-
 packages/nextjs-integration/CHANGELOG.md      |   9 ++
 packages/nextjs-integration/package.json      |   8 +-
 .../styles-primeng-workspace/CHANGELOG.md     |   7 ++
 .../styles-primeng-workspace/package.json     |   4 +-
 .../projects/styles-primeng/CHANGELOG.md      |   7 ++
 .../projects/styles-primeng/package.json      |   4 +-
 packages/styles/CHANGELOG.md                  |  22 ++++
 packages/styles/package.json                  |   6 +-
 packages/tokens/CHANGELOG.md                  |   2 +
 packages/tokens/package.json                  |   2 +-
 pnpm-lock.yaml                                | 118 ++++++------------
 36 files changed, 273 insertions(+), 120 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 69e07b8b2c..c665a31949 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -22,19 +22,33 @@
     "@swisspost/design-system-tokens": "8.2.0"
   },
   "changesets": [
+    "big-frogs-admire",
+    "breezy-cups-add",
     "clean-icons-complain",
     "cold-baboons-appear",
     "cold-panthers-vanish",
+    "cuddly-bears-check",
+    "eleven-keys-work",
+    "empty-islands-kneel",
     "fair-actors-scream",
     "friendly-insects-breathe",
     "funny-shrimps-care",
     "gorgeous-flowers-flow",
     "great-humans-talk",
     "heavy-rats-explode",
+    "kind-papayas-provide",
+    "lemon-clocks-clean",
+    "nervous-rocks-shop",
     "ninety-nails-float",
     "pink-weeks-relate",
     "plenty-apricots-raise",
+    "proud-actors-knock",
+    "red-lies-lick",
     "selfish-bats-run",
-    "sharp-crews-watch"
+    "sharp-crews-watch",
+    "six-spiders-smoke",
+    "tame-terms-push",
+    "tidy-dolls-walk",
+    "yellow-yaks-jog"
   ]
 }
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index 983627550c..b58a34c25a 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.1
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 1.1.10-next.0
 
 ### Patch Changes
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index fa919da9af..be51de464b 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.0",
+  "version": "1.1.10-next.1",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.1.3",
     "@angular/platform-browser-dynamic": "18.1.3",
     "@angular/router": "18.1.3",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.0",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
     "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 4f3d1766ae..087ed7e423 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ### Patch Changes
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index b2cb41d845..aa512d26a8 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.0",
+  "version": "9.0.0-next.1",
   "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.0"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.1"
   },
   "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 07725a7934..88e333652a 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ### Patch Changes
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index df5fbef502..9200c39be8 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.0",
+  "version": "9.0.0-next.1",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.0"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.1"
   },
   "devDependencies": {
     "@types/node": "20.14.14",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 0e0a41711c..888081a674 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.1
+
+### Major Changes
+
+- Made the heading-level property required for the accordion and removed it from the accordion-item docs. (by [@schaertim](https://github.com/schaertim) with [#3383](https://github.com/swisspost/design-system/pull/3383))
+
+### Patch Changes
+
+- Fixed a bug in nested accordions where closing a child item unintentionally closed all parent accordion elements. (by [@schaertim](https://github.com/schaertim) with [#3427](https://github.com/swisspost/design-system/pull/3427))
+
+- Fixed an issue related to conflicting pointer and focus events hiding the tooltip unexpectedly in some situations. The tooltip now behaves as expected in this situation. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3592](https://github.com/swisspost/design-system/pull/3592))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ### Patch Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index 507eae4cee..36574a4d22 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.0",
+  "version": "9.0.0-next.1",
   "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.0",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },
diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
index d34b970d18..eb7ee10038 100644
--- a/packages/documentation/CHANGELOG.md
+++ b/packages/documentation/CHANGELOG.md
@@ -1,5 +1,37 @@
 # @swisspost/design-system-documentation
 
+## 6.0.0-next.1
+
+### Major Changes
+
+- Made the heading-level property required for the accordion and removed it from the accordion-item docs. (by [@schaertim](https://github.com/schaertim) with [#3383](https://github.com/swisspost/design-system/pull/3383))
+
+### Minor Changes
+
+- Added a toolbar for switching the theme, channel, and mode of all stories. (by [@alizedebray](https://github.com/alizedebray) with [#3528](https://github.com/swisspost/design-system/pull/3528))
+
+- Added documentation outlining the mission statement of the Design System. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3568](https://github.com/swisspost/design-system/pull/3568))
+
+- Added Text Highlighted component. (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3586](https://github.com/swisspost/design-system/pull/3586))
+
+- Updated the margin, padding, and gap utility classes to use the pixel values (1, 2, ... , 112) instead of size names (hair, line, ..., bigger-giant). (by [@alizedebray](https://github.com/alizedebray) with [#3557](https://github.com/swisspost/design-system/pull/3557))
+
+- Added documentation for design principles. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3565](https://github.com/swisspost/design-system/pull/3565))
+
+- Added lead text component for introductory paragraphs. (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3575](https://github.com/swisspost/design-system/pull/3575))
+
+### Patch Changes
+
+- Updated the style of headings (h1-h6). (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3534](https://github.com/swisspost/design-system/pull/3534))
+
+- Fixed typos in the Sass and HTML href paths. (by [@schaertim](https://github.com/schaertim) with [#3466](https://github.com/swisspost/design-system/pull/3466))
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.1
+  - @swisspost/design-system-styles@9.0.0-next.1
+  - @swisspost/design-system-components-react@9.0.0-next.1
+  - @swisspost/internet-header@1.14.6-next.1
+  - @swisspost/design-system-icons@9.0.0-next.1
+
 ## 6.0.0-next.0
 
 ### Major Changes
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index f9807db9fd..129e5dceff 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.0",
+  "version": "6.0.0-next.1",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -28,11 +28,11 @@
     "lint": "eslint **/*.{js,ts,tsx,mdx}"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.0",
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.0",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.0",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
-    "@swisspost/internet-header": "workspace:1.14.6-next.0",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
+    "@swisspost/internet-header": "workspace:1.14.6-next.1",
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
@@ -53,8 +53,8 @@
     "@storybook/types": "8.2.7",
     "@storybook/web-components": "8.2.7",
     "@storybook/web-components-vite": "8.2.7",
-    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.0",
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.1",
     "@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 a60e07ff31..f1034be048 100644
--- a/packages/documentation/public/_redirects
+++ b/packages/documentation/public/_redirects
@@ -5,3 +5,4 @@
 /v6   https://design-system-version-6.netlify.app
 /v7   https://design-system-version-7.netlify.app
 /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 25da98d29a..0cdd6edddb 100644
--- a/packages/documentation/public/assets/versions.json
+++ b/packages/documentation/public/assets/versions.json
@@ -1,9 +1,37 @@
 [
   {
     "title": "Version 9",
-    "version": "9.0.0-next.0",
+    "version": "9.0.0-next.1",
     "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
     "url": "https://design-system.post.ch",
+    "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.1",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.1",
+      "@swisspost/design-system-components-angular": "9.0.0-next.1",
+      "@swisspost/design-system-components-react": "9.0.0-next.1",
+      "@swisspost/design-system-documentation": "6.0.0-next.1",
+      "@swisspost/design-system-icons": "9.0.0-next.1",
+      "@swisspost/internet-header": "1.14.6-next.1",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.1",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.1",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.1",
+      "@swisspost/design-system-migrations": "9.0.0-next.1",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.1",
+      "@swisspost/design-system-styles": "9.0.0-next.1",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.1",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.1",
+      "@swisspost/design-system-tokens": "9.0.0-next.1"
+    }
+  },
+  {
+    "title": "Version 9",
+    "version": "9.0.0-next.0",
+    "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",
@@ -13,7 +41,6 @@
       "@swisspost/design-system-components-angular-workspace": "1.1.10-next.0",
       "@swisspost/design-system-components-angular": "9.0.0-next.0",
       "@swisspost/design-system-components-react": "9.0.0-next.0",
-      "@swisspost/design-system-demo": "8.0.3-next.0",
       "@swisspost/design-system-documentation": "6.0.0-next.0",
       "@swisspost/design-system-icons": "9.0.0-next.0",
       "@swisspost/internet-header": "1.14.6-next.0",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 45eb6ac9c3..35af5cf54a 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-icons
 
+## 9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ## 8.2.0
diff --git a/packages/icons/package.json b/packages/icons/package.json
index adad8f233b..8ef0f70b9b 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.0",
+  "version": "9.0.0-next.1",
   "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/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md
index e587bc4ef3..c017feb6f3 100644
--- a/packages/internet-header/CHANGELOG.md
+++ b/packages/internet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/internet-header
 
+## 1.14.6-next.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 1.14.6-next.0
 
 ### Patch Changes
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
index fe7f300f93..88c02c0d4a 100644
--- a/packages/internet-header/package.json
+++ b/packages/internet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/internet-header",
-  "version": "1.14.6-next.0",
+  "version": "1.14.6-next.1",
   "description": "The header for client facing applications.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
     "body-scroll-lock": "4.0.0-beta.0",
     "iframe-resizer": "4.4.5",
     "jquery": "3.7.1",
diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md
index 6725dc8c3e..1263aafc62 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 3.0.22-next.0
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
index 53184e7a5e..e243a47461 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.0",
+  "version": "3.0.22-next.1",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -21,7 +21,7 @@
     "@angular/router": "18.1.3",
     "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@popperjs/core": "2.11.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
     "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 e1af2eb676..6dde7874d4 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-intranet-header@9.0.0-next.1
+
 ## 1.0.10-next.0
 
 ### 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 8afdab6fe2..d5a31a03fe 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.0",
+  "version": "1.0.10-next.1",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.0"
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.1"
   }
 }
diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
index 3279867a49..0bd21864af 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ### 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 928e6de85b..c51f39c0df 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.0",
+  "version": "9.0.0-next.1",
   "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.0",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
     "tslib": "2.6.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.0"
+    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.1"
   },
   "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 16d544e747..00931819ad 100644
--- a/packages/migrations/CHANGELOG.md
+++ b/packages/migrations/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-migrations
 
+## 9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ## 8.2.0
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index 2e21a1c694..2aee55a165 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.0",
+  "version": "9.0.0-next.1",
   "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 a1c030912d..619dbc6087 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.1
+  - @swisspost/design-system-components-react@9.0.0-next.1
+  - @swisspost/internet-header@1.14.6-next.1
+
 ## 0.1.14-next.0
 
 ### Patch Changes
diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json
index 083a4afdfa..d19d1bc3ed 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.0",
+  "version": "0.1.14-next.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.0",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
-    "@swisspost/internet-header": "workspace:1.14.6-next.0",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
+    "@swisspost/internet-header": "workspace:1.14.6-next.1",
     "next": "14.2.10",
     "react": "^18",
     "react-dom": "^18"
diff --git a/packages/styles-primeng-workspace/CHANGELOG.md b/packages/styles-primeng-workspace/CHANGELOG.md
index 630f0f2d49..10b0690cb4 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 1.0.6-next.0
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json
index bb648f3a70..be124dee37 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.0",
+  "version": "1.0.6-next.1",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -22,7 +22,7 @@
     "@angular/platform-browser": "18.1.3",
     "@angular/platform-browser-dynamic": "18.1.3",
     "@angular/router": "18.1.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
     "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 139cca7332..022e3e5d4a 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.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ### 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 914b2afc3f..be9b67e10b 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.0",
+  "version": "9.0.0-next.1",
   "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.0",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
     "tslib": "2.6.3"
   },
   "sideEffects": false,
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 101f2af0f6..367208c2cf 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -1,5 +1,27 @@
 # @swisspost/design-system-styles
 
+## 9.0.0-next.1
+
+### Major Changes
+
+- Removed the following placeholders: `%list-adjustment`, `%module-container`, `%default-module-spacer`, `%text-container`. (by [@leagrdv](https://github.com/leagrdv) with [#3623](https://github.com/swisspost/design-system/pull/3623))
+
+- Updated the margin, padding, and gap utility classes to use the pixel values (1, 2, ... , 112) instead of size names (hair, line, ..., bigger-giant). (by [@alizedebray](https://github.com/alizedebray) with [#3557](https://github.com/swisspost/design-system/pull/3557))
+
+### Minor Changes
+
+- Added Text Highlighted component. (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3586](https://github.com/swisspost/design-system/pull/3586))
+
+- Added lead text component for introductory paragraphs. (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3575](https://github.com/swisspost/design-system/pull/3575))
+
+### Patch Changes
+
+- styles: Added reset styles (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3545](https://github.com/swisspost/design-system/pull/3545))
+
+- Removed global styles (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3554](https://github.com/swisspost/design-system/pull/3554))
+
+- Updated the style of headings (h1-h6). (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3534](https://github.com/swisspost/design-system/pull/3534))
+
 ## 9.0.0-next.0
 
 ### Major Changes
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 33692b10af..b2c7e9f007 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.0",
+  "version": "9.0.0-next.1",
   "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.0",
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.1",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
index ebc5ea8f31..cfc4196db4 100644
--- a/packages/tokens/CHANGELOG.md
+++ b/packages/tokens/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-tokens
 
+## 9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ## 8.2.0
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index a36d014d4a..97fb533390 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-tokens",
-  "version": "9.0.0-next.0",
+  "version": "9.0.0-next.1",
   "private": true,
   "description": "Design Tokens for the Swiss Post.",
   "author": "Swiss Post <design-system@post.ch>",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2cc5b6be15..30e469b854 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.0
+        specifier: workspace:9.0.0-next.1
         version: link:../styles/dist
       ally.js:
         specifier: 1.4.1
@@ -150,10 +150,10 @@ importers:
         specifier: 18.1.3
         version: 18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.1.3(@angular/animations@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../components
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -167,7 +167,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.2.0
         version: 18.2.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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.0
+        specifier: workspace:9.0.0-next.1
         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.0
+        specifier: workspace:9.0.0-next.1
         version: link:../components
     devDependencies:
       '@types/node':
@@ -294,19 +294,19 @@ importers:
   packages/documentation:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../components
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../components-react
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../icons
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:1.14.6-next.0
+        specifier: workspace:1.14.6-next.1
         version: link:../internet-header
       bootstrap:
         specifier: 5.3.3
@@ -364,10 +364,10 @@ importers:
         specifier: 8.2.7
         version: 8.2.7(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))
       '@swisspost/design-system-components-angular':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../components-angular/dist/components
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         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.0
+        specifier: workspace:9.0.0-next.1
         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.0
+        specifier: workspace:9.0.0-next.1
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -670,7 +670,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.2.0
         version: 18.2.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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
       rimraf:
         specifier: 6.0.1
         version: 6.0.1
@@ -741,21 +741,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.0
+        specifier: workspace:9.0.0-next.1
         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.0
+        specifier: workspace:3.0.22-next.1
         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.0
+        specifier: workspace:9.0.0-next.1
         version: link:../../dist/intranet-header
 
   packages/migrations:
@@ -801,13 +801,13 @@ importers:
   packages/nextjs-integration:
     dependencies:
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../components-react
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:1.14.6-next.0
+        specifier: workspace:1.14.6-next.1
         version: link:../internet-header
       next:
         specifier: 14.2.10
@@ -869,10 +869,10 @@ importers:
         version: 3.0.0
     devDependencies:
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../icons
       '@swisspost/design-system-tokens':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../tokens/dist
       '@types/node':
         specifier: 20.14.14
@@ -963,7 +963,7 @@ importers:
         specifier: 18.1.3
         version: 18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.1.3(@angular/animations@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.0
+        specifier: workspace:9.0.0-next.1
         version: link:../styles/dist
       primeng:
         specifier: 17.18.7
@@ -980,7 +980,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3
         version: 18.1.3(chokidar@3.6.0)
@@ -1010,7 +1010,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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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: 6.2.2
         version: 6.2.2
@@ -1039,7 +1039,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.0
+        specifier: workspace:9.0.0-next.1
         version: link:../../../styles/dist
       primeng:
         specifier: ^17.18.0
@@ -5893,6 +5893,7 @@ packages:
   eslint@8.57.0:
     resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   esniff@2.0.1:
@@ -11036,13 +11037,13 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@angular-devkit/build-angular@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1801.3(chokidar@3.6.0)
       '@angular-devkit/build-webpack': 0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1(esbuild@0.21.5)))(webpack@5.92.1(esbuild@0.21.5))
       '@angular-devkit/core': 18.1.3(chokidar@3.6.0)
-      '@angular/build': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(terser@5.29.2)(typescript@5.5.4)
+      '@angular/build': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7)(terser@5.29.2)(typescript@5.5.4)
       '@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@babel/core': 7.24.7
       '@babel/generator': 7.24.7
@@ -11109,8 +11110,8 @@ snapshots:
       jest: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
       jest-environment-jsdom: 29.7.0
       karma: 6.4.4
-      ng-packagr: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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))
+      ng-packagr: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.6.2))
     transitivePeerDependencies:
       - '@rspack/core'
       - '@swc/core'
@@ -11241,7 +11242,7 @@ snapshots:
       tslib: 2.6.3
     optional: true
 
-  '@angular/build@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(terser@5.29.2)(typescript@5.5.4)':
+  '@angular/build@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7)(terser@5.29.2)(typescript@5.5.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
@@ -11276,7 +11277,7 @@ snapshots:
       '@angular/localize': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))
       less: 4.2.0
       postcss: 8.4.38
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
+      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2))
     transitivePeerDependencies:
       - '@types/node'
       - chokidar
@@ -20602,7 +20603,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  ng-packagr@18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@rollup/plugin-json': 6.1.0(rollup@4.18.1)
@@ -20631,7 +20632,7 @@ snapshots:
       typescript: 5.5.4
     optionalDependencies:
       rollup: 4.18.1
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
+      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -21341,15 +21342,6 @@ snapshots:
       postcss: 8.4.45
       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@20.14.14)(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@20.14.14)(typescript@5.5.4)
-    optional: true
-
   postcss-load-config@4.0.2(postcss@8.4.40)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2)):
     dependencies:
       lilconfig: 3.1.2
@@ -23031,34 +23023,6 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(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@20.14.14)(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
-
   tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -23128,7 +23092,7 @@ snapshots:
 
   term-size@2.2.1: {}
 
-  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.92.1):
+  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.92.1(esbuild@0.21.5)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -23919,7 +23883,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.92.1)
+      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.92.1(esbuild@0.21.5))
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     transitivePeerDependencies:

From da7b10f728b611baa24686b8212c97a7018133cf Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Tue, 8 Oct 2024 20:31:55 +0200
Subject: [PATCH 03/40] feat(dialog): adding styles for native dialog (#2772)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Styles for the dialog element, replacing ngb-modal.

---------

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/kind-buses-trade.md                |   6 +
 .changeset/popular-games-rush.md              |   5 +
 .../snapshots/components/dialog.snapshot.ts   |   7 +
 packages/documentation/package.json           |   2 +-
 .../stories/components/dialog/dialog.docs.mdx |  35 +++
 .../dialog/dialog.snapshot.stories.ts         |  40 +++
 .../components/dialog/dialog.stories.ts       | 235 ++++++++++++++++++
 .../components/dialog/samples/js-form-data.ts |   5 +
 .../stories/components/modal/modal.docs.mdx   |   4 +
 .../stories/components/modal/modal.stories.ts |   2 +-
 .../notification-overlay.docs.mdx             |   4 +
 .../notification-overlay.stories.ts           |   2 +-
 packages/migrations/package.json              |   2 +-
 packages/styles/src/components/_index.scss    |   1 +
 packages/styles/src/components/dialog.scss    | 233 +++++++++++++++++
 packages/styles/src/variables/_animation.scss |  19 ++
 16 files changed, 598 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/kind-buses-trade.md
 create mode 100644 .changeset/popular-games-rush.md
 create mode 100644 packages/documentation/cypress/snapshots/components/dialog.snapshot.ts
 create mode 100644 packages/documentation/src/stories/components/dialog/dialog.docs.mdx
 create mode 100644 packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/components/dialog/dialog.stories.ts
 create mode 100644 packages/documentation/src/stories/components/dialog/samples/js-form-data.ts
 create mode 100644 packages/styles/src/components/dialog.scss

diff --git a/.changeset/kind-buses-trade.md b/.changeset/kind-buses-trade.md
new file mode 100644
index 0000000000..03a0351ecb
--- /dev/null
+++ b/.changeset/kind-buses-trade.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added styling support and documentation for the `<dialog>` element. The dialog will replace the current modal and notification overlay components coming from ng-bootstrap.
diff --git a/.changeset/popular-games-rush.md b/.changeset/popular-games-rush.md
new file mode 100644
index 0000000000..e0299a924b
--- /dev/null
+++ b/.changeset/popular-games-rush.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Deprecated the ng-bootstrap components Modal and Notification overlay in favor of the new Dialog component. The styles for these ng-bootstrap components will be removed in a future major version.
diff --git a/packages/documentation/cypress/snapshots/components/dialog.snapshot.ts b/packages/documentation/cypress/snapshots/components/dialog.snapshot.ts
new file mode 100644
index 0000000000..7ec2745610
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/dialog.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Dialog', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--dialog');
+    cy.get('dialog[open]', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Dialog', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 129e5dceff..1060baf857 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -25,7 +25,7 @@
     "e2e:watch": "cypress open",
     "doctor": "storybook doctor",
     "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9",
-    "lint": "eslint **/*.{js,ts,tsx,mdx}"
+    "lint": "eslint **/*.{ts,tsx,mdx}"
   },
   "dependencies": {
     "@swisspost/design-system-components": "workspace:9.0.0-next.1",
diff --git a/packages/documentation/src/stories/components/dialog/dialog.docs.mdx b/packages/documentation/src/stories/components/dialog/dialog.docs.mdx
new file mode 100644
index 0000000000..91ab622432
--- /dev/null
+++ b/packages/documentation/src/stories/components/dialog/dialog.docs.mdx
@@ -0,0 +1,35 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import * as DialogStories from './dialog.stories';
+import JSFormData from './samples/js-form-data?raw';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={DialogStories} />
+
+# Dialog
+
+<p className="lead">Communicate crucial information and request user action.</p>
+
+<Canvas sourceState="shown" of={DialogStories.Default} />
+<div className="hide-col-default">
+  <Controls of={DialogStories.Default} />
+</div>
+
+<StylesPackageImport components={['dialog']} />
+
+## Examples
+
+### Form dialog
+<Canvas sourceState="hidden" of={DialogStories.Form} />
+
+#### Using form data
+
+Register a `submit` event listener on the form. In the event handler, you have access to all the form field values inside the dialog. The dialog box closes when the form gets submitted.
+
+<Source
+  code={JSFormData}
+  language="typescript"
+/>
+
+### Custom content dialog
+The dialog can also contain arbitrary content.
+<Canvas sourceState="hidden" of={DialogStories.Custom} />
diff --git a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
new file mode 100644
index 0000000000..9160ab7f2d
--- /dev/null
+++ b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
@@ -0,0 +1,40 @@
+import meta, { Default } from './dialog.stories';
+import { html } from 'lit';
+import { bombArgs } from '@/utils';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Dialog: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`
+      <style>
+        dialog {
+          position: static;
+          margin: 0;
+          transition: none !important;
+        }
+      </style>
+      <div class="d-flex flex-wrap align-items-start gap-regular p-regular">
+        ${bombArgs({
+          backgroundColor: ['bg-white', 'bg-primary'],
+          size: context.argTypes.size.options,
+          icon: ['none', '1034'],
+          closeButton: [true, false],
+          content: [
+            'Content',
+            'Contentus momentus vero siteos et accusam iretea et justo. Contentus momentus vero siteos et accusam iretea et justo.',
+          ],
+          open: [true],
+        }).map((args: Args) => Default.render?.({ ...context.args, ...args }, context))}
+      </div>
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/components/dialog/dialog.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.stories.ts
new file mode 100644
index 0000000000..24569321fe
--- /dev/null
+++ b/packages/documentation/src/stories/components/dialog/dialog.stories.ts
@@ -0,0 +1,235 @@
+import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit-html';
+
+const meta: Meta = {
+  id: '562eac2b-6dc1-4007-ba8e-4e981cef0cbc',
+  title: 'Components/Dialog',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?node-id=20215-22938&m=dev',
+    },
+  },
+  args: {
+    title: 'Dialog',
+    content: 'This is a dialog',
+    size: 'medium',
+    position: 'center',
+    icon: 'none',
+    backgroundColor: 'bg-white',
+    animation: 'pop-in',
+    closeButton: true,
+    open: false,
+  },
+  argTypes: {
+    title: {
+      name: 'Title',
+      description: 'Optional title',
+      control: 'text',
+      table: { category: 'Content' },
+    },
+    content: {
+      name: 'Content',
+      description: 'Dialog text',
+      control: 'text',
+      table: { category: 'Content' },
+    },
+    size: {
+      name: 'Size',
+      description: 'Max width of the dialog.',
+      control: {
+        type: 'radio',
+      },
+      options: ['small', 'medium', 'large'],
+      table: { category: 'Variant' },
+    },
+    position: {
+      name: 'Position',
+      description: 'Position of the dialog on the screen',
+      control: {
+        type: 'radio',
+      },
+      options: ['top', 'center', 'bottom'],
+      table: { category: 'Variant' },
+    },
+    animation: {
+      name: 'Animation',
+      description: 'Choose an animation effect for showing and hidding the dialog.',
+      control: 'radio',
+      options: ['pop-in', 'slide-in', 'none'],
+      table: { category: 'Variant' },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Display an icon in the dialog.',
+      control: {
+        type: 'select',
+        labels: {
+          none: 'None',
+          1034: '1034 (Info)',
+          2104: '2104 (Danger)',
+          2106: '2106 (Warning)',
+          2105: '2105 (Success)',
+        },
+      },
+      options: ['none', '1034', '2105', '2104', '2106'],
+      table: { category: 'Content' },
+    },
+    backgroundColor: {
+      name: 'Background color',
+      description: 'The background color of the dialog field',
+      control: {
+        type: 'select',
+      },
+      options: ['bg-white', 'bg-light', 'bg-primary'],
+      table: { category: 'Variant' },
+    },
+    closeButton: {
+      name: 'Close button',
+      description: 'Show a close button to dismiss the dialog',
+      control: 'boolean',
+      table: { category: 'Content' },
+    },
+    open: {
+      name: 'Default open',
+      description: 'Test property for snapshots',
+      control: 'boolean',
+      table: { disable: true },
+    },
+  },
+  decorators: [
+    story =>
+      html`<div>
+        <button
+          id="show-dialog-button"
+          class="btn btn-secondary"
+          onclick="this.nextElementSibling.showModal()"
+        >
+          Show dialog</button
+        >${story()}
+      </div>`,
+  ],
+};
+
+export default meta;
+
+const getHeader = (text: string) => {
+  return html`<h2>${text}</h2>`;
+};
+
+const getCloseButton = () => {
+  return html`<button class="btn btn-close">
+    <span class="visually-hidden">Close</span>
+  </button>`;
+};
+
+const getControls = () => {
+  return html`<button class="btn btn-primary">OK</button>
+    <button class="btn btn-secondary">Cancel</button>`;
+};
+
+const Template = {
+  render: (args: Args) => {
+    const header = getHeader(args.title);
+    const body = html`${args.content}`;
+    const controls = getControls();
+    const postDialogIcon =
+      args.icon && args.icon !== 'none'
+        ? html`<post-icon name="${args.icon}"></post-icon>`
+        : nothing;
+    const postDialogCloseButton = args.closeButton ? getCloseButton() : nothing;
+
+    // Don't declare default values or show empty containers
+    if (args.backgroundColor === 'bg-white') args.backgroundColor = nothing;
+    if (args.animation === 'pop-in') args.animation = nothing;
+    if (args.position === 'center') args.position = nothing;
+    if (args.size === 'medium') args.size = nothing;
+
+    return html`
+      <dialog
+        class="${args.backgroundColor}"
+        data-size="${args.size}"
+        data-position="${args.position}"
+        data-animation="${args.animation}"
+        open="${args.open || nothing}"
+      >
+        <form method="dialog" class="dialog-grid">
+          ${postDialogIcon}
+          <h3 class="dialog-header">${header}</h3>
+          <div class="dialog-body">${body}</div>
+          <div class="dialog-controls">${controls}</div>
+          ${postDialogCloseButton}
+        </form>
+      </dialog>
+    `;
+  },
+};
+
+const FormTemplate = {
+  ...Template,
+  render: (args: Args) => {
+    return html`
+      <dialog size="${args.size}">
+        <form
+          id="example-dialog-form"
+          method="dialog"
+          class="dialog-grid"
+          onsubmit="console.log(Object.fromEntries(new FormData(event.target)))"
+        >
+          <h3 class="dialog-header">Form example</h3>
+          <div class="dialog-body">
+            <div class="form-floating mt-3">
+              <input
+                id="example-dialog-text-field"
+                class="form-control form-control-lg"
+                type="text"
+                placeholder="Placeholder"
+                name="example-text-field"
+                required
+              />
+              <label class="form-label" for="example-dialog-text-field">Label</label>
+              <div class="form-text">
+                Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie
+                consequat, vel illum dolore eu feugiat nulla facilisis.
+              </div>
+            </div>
+          </div>
+
+          <div class="dialog-controls">
+            <button class="btn btn-primary">Confirm</button>
+            <button class="btn btn-secondary" formnovalidate>Cancel</button>
+          </div>
+        </form>
+      </dialog>
+    `;
+  },
+};
+
+const CustomContentTemplate = {
+  ...Template,
+  render: () => {
+    return html`
+      <dialog>
+        <form method="dialog" onsubmit="console.log(event)" class="p-regular-r">
+          <h2>Custom content</h2>
+          <p>This is some other content, just placed inside the dialog.</p>
+          <button class="btn btn-primary">Ok</button>
+        </form>
+      </dialog>
+    `;
+  },
+};
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  ...Template,
+};
+
+export const Form: Story = {
+  ...FormTemplate,
+};
+
+export const Custom: Story = {
+  ...CustomContentTemplate,
+};
diff --git a/packages/documentation/src/stories/components/dialog/samples/js-form-data.ts b/packages/documentation/src/stories/components/dialog/samples/js-form-data.ts
new file mode 100644
index 0000000000..6cbb0e30e7
--- /dev/null
+++ b/packages/documentation/src/stories/components/dialog/samples/js-form-data.ts
@@ -0,0 +1,5 @@
+document.querySelector('#example-dialog-form')?.addEventListener('submit', event => {
+  if (!event.target) return;
+  const formData = Object.fromEntries(new FormData(event.target as HTMLFormElement)); // Object containing your form data
+  console.log(formData);
+});
diff --git a/packages/documentation/src/stories/components/modal/modal.docs.mdx b/packages/documentation/src/stories/components/modal/modal.docs.mdx
index eb7bb019bf..03a9af9868 100644
--- a/packages/documentation/src/stories/components/modal/modal.docs.mdx
+++ b/packages/documentation/src/stories/components/modal/modal.docs.mdx
@@ -24,6 +24,10 @@ import modalBlocking from './modal-blocking.sample?raw';
 
 <NgbComponentAlert component="modal" />
 
+<div className="alert alert-warning mb-4">
+  This component is deprecated in favor of the <a href="/?path=/docs/562eac2b-6dc1-4007-ba8e-4e981cef0cbc--docs">dialog component</a>.
+</div>
+
 <ul>
   <li>
     <a href="#component-import" target="_self">Component Import</a>
diff --git a/packages/documentation/src/stories/components/modal/modal.stories.ts b/packages/documentation/src/stories/components/modal/modal.stories.ts
index c896426233..d72e396777 100644
--- a/packages/documentation/src/stories/components/modal/modal.stories.ts
+++ b/packages/documentation/src/stories/components/modal/modal.stories.ts
@@ -4,7 +4,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent = {
   id: '9a512414-84c5-473c-a7c8-a434eda9578d',
-  title: 'Components/Modal',
+  title: 'Components/Modal (deprecated)',
   tags: ['package:Angular'],
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx
index db701ae4f6..910ea235e7 100644
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx
+++ b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.docs.mdx
@@ -20,6 +20,10 @@ import basicExampleAngular from './notification-overlay.sample.ts?raw';
 
 <p className="lead">Present the user with important information or a decision before continuing the workflow.</p>
 
+<div className="alert alert-warning mb-4">
+  This component is deprecated and will be removed in a future major version.
+</div>
+
 <ul>
   <li>
     <a href="#component-import" target="_self">Component Import</a>
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts
index 0e68676c5e..f9b275f9d5 100644
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts
+++ b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts
@@ -3,7 +3,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent = {
   id: 'aab3f0df-08ca-4e33-90eb-77ffda6528db',
-  title: 'Components/Notification Overlay',
+  title: 'Components/Notification Overlay (deprecated)',
   tags: ['package:Angular'],
   parameters: {
     badges: [],
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index 2aee55a165..104c9d70e2 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -18,7 +18,7 @@
     "copy-files": "copyfiles -f LICENSE README.md package.json CONTRIBUTING.md CHANGELOG.md src/migrations.json dist",
     "build": "tsc -p tsconfig.json && pnpm copy-files",
     "clean": "rimraf dist",
-    "lint": "eslint **/*.{js,ts}"
+    "lint": "eslint **/*.ts"
   },
   "dependencies": {
     "@angular-devkit/core": "=15.0.4",
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index 46f8dcf59c..0cb16051b7 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -17,6 +17,7 @@
 @use 'form-select';
 @use 'form-textarea';
 @use 'datatable';
+@use 'dialog';
 @use 'form-check';
 @use 'forms';
 @use 'grid';
diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss
new file mode 100644
index 0000000000..f3bf5211df
--- /dev/null
+++ b/packages/styles/src/components/dialog.scss
@@ -0,0 +1,233 @@
+@use '../mixins/elevation';
+@use '../mixins/utilities';
+@use '../variables/spacing';
+@use '../variables/color';
+@use '../variables/animation';
+
+@use './../themes/bootstrap/core' as *;
+
+dialog {
+  @include elevation.elevation('elevation-5');
+
+  padding: 0;
+  min-width: min(389px, 90vw);
+  max-width: 590px;
+  max-height: 90vh;
+  overflow: auto;
+  margin: revert;
+  overscroll-behavior: contain;
+  border: 2px solid var(--post-contrast-color); // Ensures good contrast when bg is dark against dark backdrop
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(0);
+  }
+
+  @include utilities.high-contrast-mode {
+    // Show the border in HCM
+    border-width: 2px;
+
+    // Mark the backdrop as inactive in HCM
+    &::backdrop {
+      background-image: linear-gradient(
+        135deg,
+        CanvasText 4.55%,
+        transparent 4.55%,
+        transparent 50%,
+        CanvasText 50%,
+        CanvasText 54.55%,
+        transparent 54.55%,
+        transparent 100%
+      );
+      background-size: 22px 22px;
+      backdrop-filter: none;
+      background-color: transparent;
+      forced-color-adjust: none;
+    }
+  }
+
+  // Sizes
+  // [small, medium (default), large]
+  &[data-size='small'] {
+    min-width: 296px;
+    max-width: 388px;
+  }
+
+  &[data-size='large'] {
+    min-width: min(600px, 90vw);
+    max-width: 792px;
+  }
+
+  // Positioning
+  // [top, center (default), bottom]
+  &[data-position='top'] {
+    top: 2rem;
+    bottom: auto;
+  }
+
+  &[data-position='bottom'] {
+    top: auto;
+    bottom: 2rem;
+  }
+}
+
+dialog > .dialog-grid {
+  margin: spacing.$size-regular spacing.$size-regular 0 spacing.$size-regular;
+  display: grid;
+  column-gap: spacing.$size-regular;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    'icon header close-button'
+    'icon body close-button'
+    'controls controls controls';
+
+  // Propagate bg color to the controls
+  background-color: inherit;
+}
+
+:where(.dialog-icon, .dialog-header, .dialog-body, .dialog-controls, .dialog-close):empty {
+  display: none;
+}
+
+.dialog-grid > post-icon {
+  grid-area: icon;
+  display: block;
+
+  width: spacing.$size-big;
+  height: spacing.$size-big;
+
+  // Larger icon for bigger notification dialogs
+  dialog:not([size='small']) & {
+    @include media-breakpoint-up(rg) {
+      width: spacing.$size-small-huge;
+      height: spacing.$size-small-huge;
+    }
+  }
+}
+
+.dialog-header {
+  grid-area: header;
+  margin-top: 0;
+}
+
+.dialog-body {
+  grid-area: body;
+  margin-bottom: 0;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.dialog-controls {
+  grid-area: controls;
+  position: sticky;
+  bottom: 0;
+  padding-block: spacing.$size-regular;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+  gap: spacing.$size-regular;
+  background-color: inherit;
+
+  button {
+    @include media-breakpoint-down(sm) {
+      width: 100%;
+    }
+  }
+}
+
+.dialog-grid > .btn-close {
+  position: sticky;
+  top: 0;
+  grid-area: close-button;
+  width: spacing.$size-large;
+  height: spacing.$size-large;
+  min-height: 0;
+}
+
+// Animations
+// [slide-in, pop-in, none]
+// Progressively enhanced with currently experimental @starting-style which allows to animate stuff appearing in the top layer
+// https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
+dialog:not([data-animation='none']) {
+  --_dialog-transition-duration: var(--dialog-transition-duration, 0.5s);
+
+  transform: scale(0.8);
+  opacity: 0;
+  transition-property: transform, opacity, overlay, display;
+  transition-behavior: allow-discrete;
+  transition-duration: var(--_dialog-transition-duration);
+  transition-timing-function: linear(
+    0,
+    0.007,
+    0.029 2.2%,
+    0.118 4.7%,
+    0.625 14.4%,
+    0.826 19%,
+    0.902,
+    0.962,
+    1.008 26.1%,
+    1.041 28.7%,
+    1.064 32.1%,
+    1.07 36%,
+    1.061 40.5%,
+    1.015 53.4%,
+    0.999 61.6%,
+    0.995 71.2%,
+    1
+  );
+
+  &::backdrop {
+    opacity: 0;
+    transition:
+      backdrop-filter var(--_dialog-transition-duration),
+      opacity var(--_dialog-transition-duration),
+      overlay var(--_dialog-transition-duration) allow-discrete,
+      display var(--_dialog-transition-duration) allow-discrete;
+  }
+
+  &[open] {
+    transform: scale(1);
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    &::backdrop {
+      opacity: 1;
+      backdrop-filter: blur(10px);
+
+      @starting-style {
+        opacity: 0;
+        backdrop-filter: blur(0);
+      }
+
+      @media (forced-colors: active) {
+        backdrop-filter: none;
+      }
+    }
+  }
+
+  &[data-animation='slide-in'] {
+    &[data-position='top'] {
+      --_dialog-slide-in-offset: -3rem;
+    }
+
+    &[data-position='bottom'] {
+      --_dialog-slide-in-offset: 3rem;
+    }
+
+    transform: translateY(calc(var(--_dialog-slide-in-offset)));
+
+    &[open] {
+      transform: translateY(0);
+
+      @starting-style {
+        transform: translateY(calc(var(--_dialog-slide-in-offset)));
+      }
+    }
+  }
+}
diff --git a/packages/styles/src/variables/_animation.scss b/packages/styles/src/variables/_animation.scss
index c657c0e69d..48df5ee979 100644
--- a/packages/styles/src/variables/_animation.scss
+++ b/packages/styles/src/variables/_animation.scss
@@ -21,6 +21,25 @@ $transition-time-area-large: 500ms !default;
 $transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1) !default;
 $transition-easing-decelerate: cubic-bezier(0, 0, 0.2, 1) !default;
 $transition-easing-accelerate: cubic-bezier(0.4, 0, 1, 1) !default;
+$transition-easing-bump-in: linear(
+  0,
+  0.007,
+  0.029 2.2%,
+  0.118 4.7%,
+  0.625 14.4%,
+  0.826 19%,
+  0.902,
+  0.962,
+  1.008 26.1%,
+  1.041 28.7%,
+  1.064 32.1%,
+  1.07 36%,
+  1.061 40.5%,
+  1.015 53.4%,
+  0.999 61.6%,
+  0.995 71.2%,
+  1
+);
 
 // Distances
 $transition-distance-xsmall: map.get(spacing.$post-sizes, 'micro') !default;

From c9ad537d7bf3b5f3a88269fe5deeff379c23be9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Wed, 9 Oct 2024 08:32:15 +0200
Subject: [PATCH 04/40] feat(tokens): add new tokens (#3684)

Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com>
---
 .../tokens/tokensstudio-generated/tokens.json | 679 +++++++-----------
 1 file changed, 255 insertions(+), 424 deletions(-)

diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json
index 2ec7cb6721..0549fddcbc 100644
--- a/packages/tokens/tokensstudio-generated/tokens.json
+++ b/packages/tokens/tokensstudio-generated/tokens.json
@@ -263,6 +263,10 @@
             "$type": "dimension",
             "$value": "16"
           },
+          "17": {
+            "$type": "dimension",
+            "$value": "17px"
+          },
           "18": {
             "$type": "dimension",
             "$value": "18"
@@ -343,6 +347,10 @@
             "$type": "dimension",
             "$value": "112"
           },
+          "1280": {
+            "$type": "dimension",
+            "$value": "1280px"
+          },
           "5-5": {
             "$type": "dimension",
             "$value": "5.5"
@@ -659,172 +667,6 @@
             "$value": "none"
           }
         }
-      },
-      "utility": {
-        "spacing": {
-          "dup": {
-            "0": {
-              "$type": "dimension",
-              "$value": "0"
-            },
-            "1": {
-              "$type": "dimension",
-              "$value": "1"
-            },
-            "2": {
-              "$type": "dimension",
-              "$value": "2"
-            },
-            "3": {
-              "$type": "dimension",
-              "$value": "3"
-            },
-            "4": {
-              "$type": "dimension",
-              "$value": "4"
-            },
-            "5": {
-              "$type": "dimension",
-              "$value": "5"
-            },
-            "6": {
-              "$type": "dimension",
-              "$value": "6"
-            },
-            "8": {
-              "$type": "dimension",
-              "$value": "8"
-            },
-            "10": {
-              "$type": "dimension",
-              "$value": "10"
-            },
-            "11": {
-              "$type": "dimension",
-              "$value": "11"
-            },
-            "12": {
-              "$type": "dimension",
-              "$value": "12"
-            },
-            "14": {
-              "$type": "dimension",
-              "$value": "14"
-            },
-            "15": {
-              "$type": "dimension",
-              "$value": "15"
-            },
-            "16": {
-              "$type": "dimension",
-              "$value": "16"
-            },
-            "18": {
-              "$type": "dimension",
-              "$value": "18"
-            },
-            "19": {
-              "$type": "dimension",
-              "$value": "19"
-            },
-            "20": {
-              "$type": "dimension",
-              "$value": "20"
-            },
-            "22": {
-              "$type": "dimension",
-              "$value": "22"
-            },
-            "24": {
-              "$type": "dimension",
-              "$value": "24"
-            },
-            "26": {
-              "$type": "dimension",
-              "$value": "26"
-            },
-            "28": {
-              "$type": "dimension",
-              "$value": "28"
-            },
-            "30": {
-              "$type": "dimension",
-              "$value": "30"
-            },
-            "32": {
-              "$type": "dimension",
-              "$value": "32"
-            },
-            "34": {
-              "$type": "dimension",
-              "$value": "34"
-            },
-            "36": {
-              "$type": "dimension",
-              "$value": "36"
-            },
-            "40": {
-              "$type": "dimension",
-              "$value": "40"
-            },
-            "48": {
-              "$type": "dimension",
-              "$value": "48"
-            },
-            "56": {
-              "$type": "dimension",
-              "$value": "56"
-            },
-            "64": {
-              "$type": "dimension",
-              "$value": "64"
-            },
-            "78": {
-              "$type": "dimension",
-              "$value": "78"
-            },
-            "80": {
-              "$type": "dimension",
-              "$value": "80"
-            },
-            "96": {
-              "$type": "dimension",
-              "$value": "96"
-            },
-            "100": {
-              "$type": "dimension",
-              "$value": "100"
-            },
-            "112": {
-              "$type": "dimension",
-              "$value": "112"
-            },
-            "5-5": {
-              "$type": "dimension",
-              "$value": "5.5"
-            },
-            "6-5": {
-              "$type": "dimension",
-              "$value": "6.5"
-            },
-            "4-5": {
-              "$type": "dimension",
-              "$value": "4.5"
-            },
-            "7-5": {
-              "$type": "dimension",
-              "$value": "7.5"
-            },
-            "1-5": {
-              "$type": "dimension",
-              "$value": "1.5"
-            },
-            "8-5": {
-              "$type": "dimension",
-              "$value": "8.5"
-            }
-          }
-        }
       }
     }
   },
@@ -2315,6 +2157,18 @@
               "21": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.32}"
+              },
+              "22": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.17}"
+              },
+              "23": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.16}"
+              },
+              "24": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.3}"
               }
             }
           },
@@ -2351,6 +2205,10 @@
               "size": {
                 "$type": "sizing",
                 "$value": "{post.core.dimension.24}"
+              },
+              "size2": {
+                "$type": "sizing",
+                "$value": "{post.core.dimension.24}"
               }
             },
             "textfields": {
@@ -2560,6 +2418,28 @@
             "$type": "borderWidth",
             "$value": "{post.core.dimension.1}"
           }
+        },
+        "grid": {
+          "sizing": {
+            "gutter": {
+              "$type": "sizing",
+              "$value": "{post.core.dimension.24}"
+            },
+            "container": {
+              "max-width": {
+                "$type": "sizing",
+                "$value": "{post.core.dimension.1280}"
+              }
+            }
+          },
+          "padding": {
+            "inline": {
+              "container": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.40}"
+              }
+            }
+          }
         }
       }
     }
@@ -2825,6 +2705,18 @@
               "19": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.0}"
+              },
+              "22": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.16}"
+              },
+              "23": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.15}"
+              },
+              "24": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.0}"
               }
             },
             "inline": {
@@ -3040,6 +2932,22 @@
             "$type": "lineHeights",
             "$value": "{post.core.line-height.150}"
           }
+        },
+        "grid": {
+          "sizing": {
+            "gutter": {
+              "$type": "sizing",
+              "$value": "{post.core.dimension.16}"
+            }
+          },
+          "padding": {
+            "inline": {
+              "container": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.24}"
+              }
+            }
+          }
         }
       }
     }
@@ -3327,6 +3235,18 @@
               "21": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.24}"
+              },
+              "22": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.12}"
+              },
+              "23": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.11}"
+              },
+              "24": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.2}"
               }
             }
           },
@@ -3363,6 +3283,10 @@
               "size": {
                 "$type": "sizing",
                 "$value": "{post.core.dimension.20}"
+              },
+              "size2": {
+                "$type": "sizing",
+                "$value": "{post.core.dimension.20}"
               }
             },
             "textfields": {
@@ -3520,6 +3444,16 @@
             "$type": "lineHeights",
             "$value": "{post.core.line-height.150}"
           }
+        },
+        "grid": {
+          "padding": {
+            "inline": {
+              "container": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.16}"
+              }
+            }
+          }
         }
       }
     }
@@ -3935,34 +3869,34 @@
     }
   },
   "Components/App store badge": {
-    "post-app-store": {
-      "google": {
-        "width": {
-          "$type": "sizing",
-          "$value": "{post.device.sizing.interactive.button.appstore.width.google}"
-        }
-      },
-      "apple": {
-        "width": {
-          "$type": "sizing",
-          "$value": "{post.device.sizing.interactive.button.appstore.width.apple}"
-        }
-      },
-      "height": {
-        "$type": "sizing",
-        "$value": "{post.device.sizing.interactive.button.height.5}"
-      }
-    },
     "post": {
       "app-store": {
+        "google": {
+          "width": {
+            "$type": "sizing",
+            "$value": "{post.device.sizing.interactive.button.appstore.width.google}"
+          }
+        },
+        "apple": {
+          "width": {
+            "$type": "sizing",
+            "$value": "{post.device.sizing.interactive.button.appstore.width.apple}"
+          }
+        },
+        "height": {
+          "$type": "sizing",
+          "$value": "{post.device.sizing.interactive.button.height.5}"
+        },
         "focus": {
           "outline": {
             "offset": {
               "$type": "spacing",
               "$value": "{post.device.spacing.padding.2}"
             },
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.focus.stroke}"
+            "color": {
+              "$type": "color",
+              "$value": "{post.mode.color.interactive.focus.stroke}"
+            }
           },
           "outline-width": {
             "$type": "borderWidth",
@@ -4914,6 +4848,10 @@
             "text-start": {
               "$type": "spacing",
               "$value": "{post.device.spacing.gap.inline.12}"
+            },
+            "group": {
+              "$type": "spacing",
+              "$value": "tbd"
             }
           }
         },
@@ -5154,6 +5092,28 @@
       }
     }
   },
+  "Components/Grid": {
+    "post": {
+      "grid": {
+        "gutter": {
+          "$type": "sizing",
+          "$value": "{post.device.grid.sizing.gutter}"
+        },
+        "container": {
+          "max-width": {
+            "$type": "sizing",
+            "$value": "{post.device.grid.sizing.container.max-width}"
+          },
+          "padding": {
+            "inline": {
+              "$type": "spacing",
+              "$value": "{post.device.grid.padding.inline.container}"
+            }
+          }
+        }
+      }
+    }
+  },
   "Components/Icon button": {
     "post": {
       "icon-button": {
@@ -5458,6 +5418,20 @@
       }
     }
   },
+  "Components/Lead": {
+    "post": {
+      "lead": {
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{post.device.font-size.5}"
+        }
+      },
+      "lead-font-weight": {
+        "$type": "fontWeights",
+        "$value": "{post.device.font-weight.bold}"
+      }
+    }
+  },
   "Components/List": {
     "post": {
       "list": {
@@ -5562,11 +5536,11 @@
             "block": {
               "start": {
                 "$type": "spacing",
-                "$value": "tbd"
+                "$value": "{post.device.spacing.padding.block.22}"
               },
               "end": {
                 "$type": "spacing",
-                "$value": "tbd"
+                "$value": "{post.device.spacing.padding.block.23}"
               }
             }
           },
@@ -5578,25 +5552,29 @@
           },
           "enabled-border": {
             "$type": "color",
-            "$value": "tbd"
+            "$value": "{post.mode.color.interactive.primary.enabled.stroke}"
           },
           "hover-border": {
             "$type": "color",
-            "$value": "tbd"
+            "$value": "{post.mode.color.interactive.primary.hover.stroke}"
           },
           "enabled-fg": {
             "$type": "color",
-            "$value": "tbd"
+            "$value": "{post.mode.color.interactive.primary.enabled.fg1}"
           },
           "hover-fg": {
             "$type": "color",
-            "$value": "tbd"
+            "$value": "{post.mode.color.interactive.primary.hover.fg1}"
           },
           "focus": {
             "outline": {
               "offset": {
                 "$type": "spacing",
-                "$value": "tbd"
+                "$value": "{post.device.spacing.padding.2}"
+              },
+              "color": {
+                "$type": "color",
+                "$value": "{post.mode.color.interactive.focus.stroke}"
               }
             },
             "outline-style": {
@@ -5606,6 +5584,10 @@
             "outline-width": {
               "$type": "borderWidth",
               "$value": "{post.device.border-width.focus}"
+            },
+            "outline-radius": {
+              "$type": "borderRadius",
+              "$value": "{post.device.border-radius.focus}"
             }
           },
           "border-width": {
@@ -5622,7 +5604,7 @@
             "padding": {
               "block": {
                 "$type": "spacing",
-                "$value": "tbd"
+                "$value": "{post.device.spacing.padding.block.24}"
               },
               "inline": {
                 "$type": "spacing",
@@ -5632,7 +5614,15 @@
           },
           "size": {
             "$type": "sizing",
-            "$value": "tbd"
+            "$value": "{post.device.sizing.interactive.icon.size2}"
+          }
+        },
+        "switch": {
+          "padding": {
+            "block": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.block.18}"
+            }
           }
         }
       }
@@ -6023,6 +6013,10 @@
             "text-start": {
               "$type": "spacing",
               "$value": "{post.device.spacing.gap.inline.12}"
+            },
+            "group": {
+              "$type": "spacing",
+              "$value": "tbd"
             }
           }
         },
@@ -6367,112 +6361,6 @@
       }
     }
   },
-  "Components/Social media button": {
-    "post": {
-      "social-media-button": {
-        "footer": {
-          "enabled-fg": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.primary.enabled.fg}"
-          },
-          "enabled-bg": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.primary.enabled.bg}"
-          },
-          "enabled-stroke": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.primary.enabled.stroke}"
-          },
-          "hover-fg": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.primary.hover.fg}"
-          },
-          "hover-bg": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.primary.hover.bg}"
-          },
-          "hover-stroke": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.primary.hover.stroke}"
-          },
-          "outer": {
-            "$type": "sizing",
-            "$value": "{post.device.sizing.interactive.button.height.3}"
-          },
-          "icon": {
-            "$type": "sizing",
-            "$value": "{post.device.sizing.interactive.button.icon.2}"
-          },
-          "border-width": {
-            "$type": "borderWidth",
-            "$value": "{post.device.border-width.default}"
-          }
-        },
-        "content": {
-          "enabled-fg": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.secondary.enabled.fg}"
-          },
-          "enabled-bg": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.secondary.enabled.bg}"
-          },
-          "enabled-stroke": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.secondary.enabled.stroke}"
-          },
-          "hover-fg": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.secondary.hover.fg}"
-          },
-          "hover-bg": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.secondary.hover.bg}"
-          },
-          "hover-stroke": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.button.secondary.hover.stroke}"
-          },
-          "outer": {
-            "$type": "sizing",
-            "$value": "{post.device.sizing.interactive.button.height.2}"
-          },
-          "icon": {
-            "$type": "sizing",
-            "$value": "{post.device.sizing.interactive.button.icon.1}"
-          },
-          "border-width": {
-            "$type": "borderWidth",
-            "$value": "{post.device.border-width.default}"
-          }
-        },
-        "focus": {
-          "stroke": {
-            "$type": "color",
-            "$value": "{post.mode.color.interactive.focus.stroke}"
-          },
-          "border-width": {
-            "$type": "borderWidth",
-            "$value": "{post.device.border-width.focus}"
-          },
-          "outline": {
-            "offset": {
-              "$type": "spacing",
-              "$value": "{post.device.spacing.padding.2}"
-            }
-          }
-        },
-        "border-radius": {
-          "$type": "borderRadius",
-          "$value": "{post.device.border-radius.round}"
-        },
-        "elevation": {
-          "$type": "boxShadow",
-          "$value": "{post.device.elevation.100}"
-        }
-      }
-    }
-  },
   "Components/Stepper": {
     "post": {
       "stepper": {
@@ -7269,20 +7157,6 @@
       }
     }
   },
-  "Components/Lead": {
-    "post": {
-      "lead": {
-        "font-size": {
-          "$type": "fontSizes",
-          "$value": "{post.device.font-size.5}"
-        }
-      },
-      "lead-font-weight": {
-        "$type": "fontWeights",
-        "$value": "{post.device.font-weight.bold}"
-      }
-    }
-  },
   "Components/Validation": {
     "post": {
       "validation": {
@@ -8118,8 +7992,7 @@
         "post.core.elevation.5": "S:abb94bfe7966ae2690516196d25db0b65df759e2,"
       },
       "selectedTokenSets": {
-        "core": "enabled",
-        "Components/Form footer": "disabled"
+        "core": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:718:1595",
       "$figmaModeId": "718:0",
@@ -8185,6 +8058,7 @@
         "post.core.dimension.14": "5603311eb30f16a10d759a9a670a69e6b3488e7a",
         "post.core.dimension.15": "c9b690012237e58b74ee627b94e0459b847abaeb",
         "post.core.dimension.16": "a121c9e4f54726c25d9252df9c79935389f83efd",
+        "post.core.dimension.17": "c790b5e37246187bd8939e276522ca4f697d9bf0",
         "post.core.dimension.18": "a8d771a99eb5f445437880a6f1f4176857a99e9f",
         "post.core.dimension.19": "b733f96e2819d633f99f2fec757ee6943d924e62",
         "post.core.dimension.20": "fe5b4a93e0c7b12da9cbc7e49ebb82d9459a1bc3",
@@ -8236,46 +8110,7 @@
         "post.core.font-family.frutiger": "7a8104756190e8b94f97c29243dd5d7d142a7065",
         "post.core.font-family.swiss-post": "5547f71fafbe8166ac0384fd4e8862796da43fea",
         "post.core.font-family.caveat": "15b599e49f27297ab4aced39752df2cf43f2bb20",
-        "post.utility.spacing.dup.0": "52e996045a110cbecb60141125745fc61e305aaf",
-        "post.utility.spacing.dup.1": "5caf57906c734d7a50161d804911c891a9cf9479",
-        "post.utility.spacing.dup.2": "730a1bb47cd8aa5fa3fd65bbe6822e49d7831737",
-        "post.utility.spacing.dup.3": "92418a8c1414f01fde9135db533570f4a56d5bf2",
-        "post.utility.spacing.dup.4": "049bc30cbd6cc4d1597e1944715a48283ae07909",
-        "post.utility.spacing.dup.5": "5dac4ea148ce6b07948ecb6f9bb1bb2f0181a95d",
-        "post.utility.spacing.dup.6": "fdc441fa3b00561385dd9a6230e3fc7084346329",
-        "post.utility.spacing.dup.8": "5dd07038c8e737d7040ec0468eb4bf4414dc81a9",
-        "post.utility.spacing.dup.10": "abced30adcada42355bf66ff3bd3cc9f438f240e",
-        "post.utility.spacing.dup.11": "82369c7a3310d96d1d7da25a5dabc56b0d4e75d5",
-        "post.utility.spacing.dup.12": "98a79282457e9f75f8738bb804f19a36ea024f1c",
-        "post.utility.spacing.dup.14": "8d7b26579fd636cbd2666b14ff9bd6024fbbd3d2",
-        "post.utility.spacing.dup.15": "032682f8602419f1c2d903c425aebe143dd13423",
-        "post.utility.spacing.dup.16": "48744ef9ea5485c438b925b5e50bf388a57947cb",
-        "post.utility.spacing.dup.18": "d8ccd430a4b1a156dbf4762b2548c2fe2ce55db1",
-        "post.utility.spacing.dup.19": "a497fff770eac663acb27bb4d996015697142029",
-        "post.utility.spacing.dup.20": "5672d6eb0a99506507d0bd86fe3f9b2f1e03904e",
-        "post.utility.spacing.dup.22": "84241fbdb7d964613a652a36c33c57627abc3f30",
-        "post.utility.spacing.dup.24": "a4bda3a398caedaf9643f5bcfa86abafdedfbd15",
-        "post.utility.spacing.dup.26": "37f558f9ea348b0c322a1db0a72cfd332b772983",
-        "post.utility.spacing.dup.28": "0aaaef1558842e14b54d645b90fe35b0d1d3b30a",
-        "post.utility.spacing.dup.30": "dbf41e94215d61cd23e246e9731d2f47e01e7e60",
-        "post.utility.spacing.dup.32": "8be8c67dd319ef96e7208a3e8e67479c6499241e",
-        "post.utility.spacing.dup.34": "3de224c920a25d89930c5ab4e462968e1215f1e0",
-        "post.utility.spacing.dup.36": "2b1cd8f1f74cf604900aee9c6b9b1a5f581b39fa",
-        "post.utility.spacing.dup.40": "89a7f921ac312b4a196b8ed8fdc122d0cb17c59e",
-        "post.utility.spacing.dup.48": "d2dd27537edc3f1a2fe80627b29f15d268a4558b",
-        "post.utility.spacing.dup.56": "66eb9fff444ba8eb447114037db2063c84e83947",
-        "post.utility.spacing.dup.64": "dbf16a71eb91f503be2a2724f1510db1b9bf4b91",
-        "post.utility.spacing.dup.78": "c96831555685780d4876f79013af7b8a5f525bf0",
-        "post.utility.spacing.dup.80": "2ca827175d302e999d8307fee39cea9b4ba4917e",
-        "post.utility.spacing.dup.96": "afd205b79c7fb6ba82802f1067b50d55aaebc8d6",
-        "post.utility.spacing.dup.100": "bcd9030f63424d12a73550be12387422cc7d6b62",
-        "post.utility.spacing.dup.112": "1579fffe81d7858788908ee0e6c91b60b253b46d",
-        "post.utility.spacing.dup.5-5": "b0544aca049a8f37bedc7a23956373d78b2dbeee",
-        "post.utility.spacing.dup.6-5": "5aaab350d26b274a4800b85960d830f5e48370c3",
-        "post.utility.spacing.dup.4-5": "8372bdf49b50971b3f86fd487b0979e0789e91f2",
-        "post.utility.spacing.dup.7-5": "23a11db07aa175a0c3b25b0f1b736ceb6f66369d",
-        "post.utility.spacing.dup.1-5": "3f6063d3df9de0e70a07cef75914575893e70c44",
-        "post.utility.spacing.dup.8-5": "9f0f84964a19f4af27f52e3c7ec5f02a30d41491"
+        "post.core.dimension.1280": "80e7b3e1755e8cdce684d233544da4d76fd698dc"
       }
     },
     {
@@ -8284,8 +8119,7 @@
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
         "core": "source",
-        "Mode/Light": "enabled",
-        "Components/Form footer": "disabled"
+        "Mode/Light": "enabled"
       },
       "group": "Mode",
       "$figmaCollectionId": "VariableCollectionId:718:1666",
@@ -8434,8 +8268,8 @@
         "post.mode.color.interactive.notification.error.bg": "6165ecb63010c190df5bf65b59d442a4f802a05d",
         "post.mode.color.interactive.notification.error.icon": "6a602959aae6c213148ff0f586280a123ebff780",
         "post.mode.color.interactive.notification.error.stroke": "f6a25a2fe2b3146d1684d3906e635ef9505a4c23",
-        "post.mode.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c",
-        "post.mode.color.surface.default.stroke": "acff34c0c7e3f3b7360988406c18af0b164393ff"
+        "post.mode.color.surface.default.stroke": "acff34c0c7e3f3b7360988406c18af0b164393ff",
+        "post.mode.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c"
       }
     },
     {
@@ -8445,8 +8279,7 @@
       "selectedTokenSets": {
         "core": "source",
         "Mode/Light": "enabled",
-        "Mode/Dark": "enabled",
-        "Components/Form footer": "disabled"
+        "Mode/Dark": "enabled"
       },
       "group": "Mode",
       "$figmaCollectionId": "VariableCollectionId:718:1666",
@@ -8583,6 +8416,7 @@
         "post.mode.color.interactive.notification.error.stroke": "f6a25a2fe2b3146d1684d3906e635ef9505a4c23",
         "post.mode.color.surface.default.bg": "76160b240c5dee3ecddf678e49fb08e554103e19",
         "post.mode.color.surface.default.fg": "0497e52aa5f3173648ad5d0a10d8433eb3f229d4",
+        "post.mode.color.surface.default.stroke": "acff34c0c7e3f3b7360988406c18af0b164393ff",
         "post.mode.color.surface.accent1.bg": "46ea4599ed012313784386b9f279a68828a2fa83",
         "post.mode.color.surface.accent1.fg": "cce4daa2f47282b58b5c6403b0e33fd269602a86",
         "post.mode.color.surface.accent2.bg": "f9d7dfcf721d8f28f71a1c5752feba5011aec6e7",
@@ -8595,8 +8429,7 @@
         "post.mode.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb",
         "post.mode.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c",
         "post.mode.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2",
-        "post.mode.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c",
-        "post.mode.color.surface.default.stroke": "acff34c0c7e3f3b7360988406c18af0b164393ff"
+        "post.mode.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c"
       }
     },
     {
@@ -8605,8 +8438,7 @@
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
         "core": "source",
-        "Device/Desktop": "enabled",
-        "Components/Form footer": "disabled"
+        "Device/Desktop": "enabled"
       },
       "group": "Device",
       "$figmaCollectionId": "VariableCollectionId:718:1733",
@@ -8667,6 +8499,9 @@
         "post.device.spacing.padding.block.17": "57a8b79e7d3b5324642cb9aa7b6a784db48e53b2",
         "post.device.spacing.padding.block.18": "606cdbae432937aed9642fc93f74af42c0aaeac4",
         "post.device.spacing.padding.block.19": "35c06becdcfcbcaca8aa9be55c071d8a595fc0b0",
+        "post.device.spacing.padding.block.22": "06bf3cc9f111447dd5ab49c5fcd5319f22842089",
+        "post.device.spacing.padding.block.23": "217fb5f28fcf01b9f362f0e45f0c0780d38150b6",
+        "post.device.spacing.padding.block.24": "f686d2271f0067fa4db06c30ee1db53bd954d0ca",
         "post.device.spacing.padding.inline.3": "68840678b85de831c347ab8bd69931680dd08389",
         "post.device.spacing.padding.inline.5": "0d48e4a92e523fb69ae371e37c6ff79d6d255cc5",
         "post.device.spacing.padding.inline.6": "211520f2bb91c1d8315cefb31dc55d7dde233be7",
@@ -8706,6 +8541,8 @@
         "post.device.font-weight.bold": "fc6bd8d453b32d21a42e41bc8bef6f071b24fdbc",
         "post.device.font-weight.regular": "63954de676cfeffcb52798776599f7a676db2327",
         "post.device.font-weight.black": "e4cfc49770e938bbde9dd1499500d3c90db21bbf",
+        "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
+        "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
         "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e",
         "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b",
         "post.device.spacing.gap.inline.1": "bf4a1f1af93f454818f24e35b2241ae450bf79f1",
@@ -8718,10 +8555,11 @@
         "post.device.spacing.padding.block.2": "8390d8c42f51d4e5f785577cfe0cdb3c535ba080",
         "post.device.spacing.padding.block.9": "857855702e00b04d5681d15b4fb627619436a052",
         "post.device.spacing.padding.block.20": "149611a109df9284e16adfbcdc0ea79e1c8e7b17",
+        "post.device.spacing.padding.block.21": "249439e95218f5a9ea5cb14b01381d3c42758f99",
         "post.device.spacing.margin.1": "1f9ac7585069a5d9f5c14c65a08b6c658bc0a0a5",
         "post.device.spacing.margin.2": "a03e875bcb67b48b5fe0cd53d733c77d6824e86f",
         "post.device.spacing.margin.3": "eaf0d9d533154fc10cd38699804e027093e4d482",
-        "post.device.spacing.padding.block.21": "249439e95218f5a9ea5cb14b01381d3c42758f99",
+        "post.device.sizing.interactive.icon.size2": "7cea78d105586f14c382f30667405f5ac18545f6",
         "post.device.spacing.gap.1": "303b065d5f8bf9049661db8845f2d1e59a4c08b0",
         "post.device.spacing.gap.2": "0e3be5c3cc6b23c8827bc5fb005a234c558199fc",
         "post.device.spacing.gap.3": "91cd08dcbce598d4f63e04fc4e646796d943a377",
@@ -8748,7 +8586,8 @@
         "post.device.border-width.default": "e5f71facc552cd21f6cd7daa18a64c8e8e5ce6a6",
         "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc",
         "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30",
-        "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378"
+        "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
+        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9"
       }
     },
     {
@@ -8758,8 +8597,7 @@
       "selectedTokenSets": {
         "core": "source",
         "Device/Desktop": "enabled",
-        "Device/Tablet": "enabled",
-        "Components/Form footer": "disabled"
+        "Device/Tablet": "enabled"
       },
       "group": "Device",
       "$figmaCollectionId": "VariableCollectionId:718:1733",
@@ -8824,6 +8662,10 @@
         "post.device.spacing.padding.block.16": "58662a7aefe8b726678e0862bfab0bc7fcc0963d",
         "post.device.spacing.padding.block.17": "57a8b79e7d3b5324642cb9aa7b6a784db48e53b2",
         "post.device.spacing.padding.block.20": "149611a109df9284e16adfbcdc0ea79e1c8e7b17",
+        "post.device.spacing.padding.block.21": "249439e95218f5a9ea5cb14b01381d3c42758f99",
+        "post.device.spacing.padding.block.22": "06bf3cc9f111447dd5ab49c5fcd5319f22842089",
+        "post.device.spacing.padding.block.23": "217fb5f28fcf01b9f362f0e45f0c0780d38150b6",
+        "post.device.spacing.padding.block.24": "f686d2271f0067fa4db06c30ee1db53bd954d0ca",
         "post.device.spacing.margin.1": "1f9ac7585069a5d9f5c14c65a08b6c658bc0a0a5",
         "post.device.spacing.margin.2": "a03e875bcb67b48b5fe0cd53d733c77d6824e86f",
         "post.device.spacing.margin.3": "eaf0d9d533154fc10cd38699804e027093e4d482",
@@ -8831,6 +8673,7 @@
         "post.device.sizing.interactive.icon.height": "23ca5ccbf3e98e4780aa20aef636cb50fad8809e",
         "post.device.sizing.interactive.icon.width": "8fea35207b61496ef007e6cf83e7983d1386be76",
         "post.device.sizing.interactive.icon.size": "a7269590e4d43349d7c74194f91278bacc6d7955",
+        "post.device.sizing.interactive.icon.size2": "7cea78d105586f14c382f30667405f5ac18545f6",
         "post.device.sizing.interactive.textfields.icon": "c6ce6c8537f69d8dcd20f710c1fcd38ee7915e4c",
         "post.device.sizing.interactive.stepper.indicator": "da5a12871e0e8fd98b8d214909c46c5d775861dc",
         "post.device.sizing.interactive.button.height.1": "d1728826d76d3d661dd12e94675a8747f6901a9a",
@@ -8858,7 +8701,7 @@
         "post.device.font-weight.bold": "fc6bd8d453b32d21a42e41bc8bef6f071b24fdbc",
         "post.device.font-weight.regular": "63954de676cfeffcb52798776599f7a676db2327",
         "post.device.font-weight.black": "e4cfc49770e938bbde9dd1499500d3c90db21bbf",
-        "post.device.spacing.padding.block.21": "249439e95218f5a9ea5cb14b01381d3c42758f99",
+        "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
         "post.device.spacing.gap.1": "303b065d5f8bf9049661db8845f2d1e59a4c08b0",
         "post.device.spacing.gap.2": "0e3be5c3cc6b23c8827bc5fb005a234c558199fc",
         "post.device.spacing.gap.3": "91cd08dcbce598d4f63e04fc4e646796d943a377",
@@ -8901,7 +8744,9 @@
         "post.device.border-width.default": "e5f71facc552cd21f6cd7daa18a64c8e8e5ce6a6",
         "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc",
         "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30",
-        "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378"
+        "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
+        "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
+        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9"
       }
     },
     {
@@ -8918,8 +8763,7 @@
         "core": "source",
         "Device/Desktop": "enabled",
         "Device/Tablet": "enabled",
-        "Device/Mobile": "enabled",
-        "Components/Form footer": "disabled"
+        "Device/Mobile": "enabled"
       },
       "group": "Device",
       "$figmaCollectionId": "VariableCollectionId:718:1733",
@@ -9015,6 +8859,10 @@
         "post.device.spacing.padding.block.18": "606cdbae432937aed9642fc93f74af42c0aaeac4",
         "post.device.spacing.padding.block.19": "35c06becdcfcbcaca8aa9be55c071d8a595fc0b0",
         "post.device.spacing.padding.block.20": "149611a109df9284e16adfbcdc0ea79e1c8e7b17",
+        "post.device.spacing.padding.block.21": "249439e95218f5a9ea5cb14b01381d3c42758f99",
+        "post.device.spacing.padding.block.22": "06bf3cc9f111447dd5ab49c5fcd5319f22842089",
+        "post.device.spacing.padding.block.23": "217fb5f28fcf01b9f362f0e45f0c0780d38150b6",
+        "post.device.spacing.padding.block.24": "f686d2271f0067fa4db06c30ee1db53bd954d0ca",
         "post.device.spacing.margin.1": "1f9ac7585069a5d9f5c14c65a08b6c658bc0a0a5",
         "post.device.spacing.margin.2": "a03e875bcb67b48b5fe0cd53d733c77d6824e86f",
         "post.device.spacing.margin.3": "eaf0d9d533154fc10cd38699804e027093e4d482",
@@ -9022,6 +8870,7 @@
         "post.device.sizing.interactive.icon.height": "23ca5ccbf3e98e4780aa20aef636cb50fad8809e",
         "post.device.sizing.interactive.icon.width": "8fea35207b61496ef007e6cf83e7983d1386be76",
         "post.device.sizing.interactive.icon.size": "a7269590e4d43349d7c74194f91278bacc6d7955",
+        "post.device.sizing.interactive.icon.size2": "7cea78d105586f14c382f30667405f5ac18545f6",
         "post.device.sizing.interactive.textfields.icon": "c6ce6c8537f69d8dcd20f710c1fcd38ee7915e4c",
         "post.device.sizing.interactive.textfields.dropdown": "2c0942fd50bd63a9509f8550fc6a38642e9001d8",
         "post.device.sizing.interactive.stepper.indicator": "da5a12871e0e8fd98b8d214909c46c5d775861dc",
@@ -9061,7 +8910,9 @@
         "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc",
         "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30",
         "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
-        "post.device.spacing.padding.block.21": "249439e95218f5a9ea5cb14b01381d3c42758f99"
+        "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
+        "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
+        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9"
       }
     },
     {
@@ -9075,8 +8926,7 @@
         "Device/Desktop": "source",
         "Device/Tablet": "source",
         "Device/Mobile": "source",
-        "Channel/EDK": "enabled",
-        "Components/Form footer": "disabled"
+        "Channel/EDK": "enabled"
       },
       "group": "Channel",
       "$figmaCollectionId": "VariableCollectionId:718:1734",
@@ -9097,8 +8947,7 @@
         "Device/Tablet": "source",
         "Device/Mobile": "source",
         "Channel/EDK": "enabled",
-        "Channel/IDK": "enabled",
-        "Components/Form footer": "disabled"
+        "Channel/IDK": "enabled"
       },
       "group": "Channel",
       "$figmaCollectionId": "VariableCollectionId:718:1734",
@@ -9129,8 +8978,7 @@
         "Utilities/Spacing": "source",
         "Utilities/Typo": "source",
         "Elements/ListBullet": "enabled",
-        "Elements/ListNumber": "enabled",
-        "Components/Form footer": "disabled"
+        "Elements/ListNumber": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:3180:16769",
       "$figmaModeId": "3180:1",
@@ -9201,8 +9049,7 @@
         "Channel/EDK": "source",
         "Channel/IDK": "source",
         "Theme/Post": "source",
-        "Utilities/Color": "enabled",
-        "Components/Form footer": "disabled"
+        "Utilities/Color": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:3180:16768",
       "$figmaModeId": "3180:0",
@@ -9362,7 +9209,6 @@
         "Components/Popover": "enabled",
         "Components/Radio button": "enabled",
         "Components/Select": "enabled",
-        "Components/Social media button": "enabled",
         "Components/Stepper": "enabled",
         "Components/Switch": "enabled",
         "Components/Text area": "enabled",
@@ -9383,16 +9229,18 @@
         "Components/Validation": "enabled",
         "Utilities/Color": "source",
         "Components/App store badge": "enabled",
-        "Components/Form footer": "enabled"
+        "Components/Form footer": "enabled",
+        "Components/Grid": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:808:5504",
       "$figmaModeId": "808:0",
       "$figmaVariableReferences": {
         "post.button.border-radius.round": "379af7e758794402e587301b6ca44898347d9279",
-        "post-app-store.google.width": "fa65e38a865f425f8fdfeca8f1b26fc068d5d2a1",
-        "post-app-store.apple.width": "ad43af0ea74ce86af165314d67cd7a7dd663df84",
-        "post-app-store.height": "bfd9997022ededeb1841f9897a28d66715817016",
-        "post.app-store.focus.outline": "92a06daa8a6092ce2812815a72e58e11122736a4",
+        "post.app-store.google.width": "fa65e38a865f425f8fdfeca8f1b26fc068d5d2a1",
+        "post.app-store.apple.width": "ad43af0ea74ce86af165314d67cd7a7dd663df84",
+        "post.app-store.height": "bfd9997022ededeb1841f9897a28d66715817016",
+        "post.app-store.focus.outline.offset": "d19a3aeece25bc28e189950717178de1a26a417d",
+        "post.app-store.focus.outline.color": "77f9914002cf889b0f53dab6fdc611a16e147a5e",
         "post.app-store.focus.outline-width": "db9852513a3a04b96d048ed203f1019be482843d",
         "post.app-store.border-radius": "aa40618f5c2c44b080a7da802ff1cfee577cdc7f",
         "post.badge.bg": "c20dfd9639c61755321be20d24f88bfb50fc9832",
@@ -9543,6 +9391,7 @@
         "post.checkbox.border-radius": "d7f2f321d3f6aa26b82e92bdddc71e8278b2d45a",
         "post.checkbox.group.legend.font-size": "5b0316a7c8f172a8c450b37de8030c2fafdd3b64",
         "post.checkbox.label.padding.block": "1f0dbe15a811f9ac9a6699131a7925b19b90da68",
+        "post.checkbox.gap.inline.group": "e65d5b65b7b21225e8e823f960cdc68f730d225b",
         "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",
@@ -9570,6 +9419,9 @@
         "post.form-footer.border.start.color": "fe40a4f98b31cb6fc9c83a1d1ba0398c677d545f",
         "post.form-footer.padding.block.start": "7e99d301b97b416b17ee532a082c33e6e7e6160b",
         "post.form-footer.gap": "c5fef62c41382d0294a322c4256feb0ef9f3f592",
+        "post.grid.gutter": "f62d09ab74731ba66a0cb6d73a589a4929a4c061",
+        "post.grid.container.max-width": "2a1752769b46f42590f2f73e8cdb7c4629ecf4fd",
+        "post.grid.container.padding.inline": "56d9dc77474c3c19eb5c83a89ba155f6a7b2c262",
         "post.icon-button.focus.stroke": "b742acbcfdcf3dec46d615ce3f25019f6ce49d4e",
         "post.icon-button.focus.stroke-inverted": "add854f7e47a5f8558e23842a8172a4623ade119",
         "post.icon-button.focus.border-width": "ec4a328e003eb58b28f214369e6d26f55913756f",
@@ -9636,6 +9488,8 @@
         "post.icon-button.small.outer": "397d250211d996c86c264457b4495132b61cae03",
         "post.icon-button.small.icon": "316299c3216da324e94be81dc65e2d479626c516",
         "post.icon-button.border-width": "ce734619b02f237a105c715ec54a4564e98aa0a0",
+        "post.lead.font-size": "faf5dba2f96d4f89a72ee8e380d9c5dabd286beb",
+        "post.lead-font-weight": "5f2c7a3dd41d479f8b11e5b1dbfe462152e54aa0",
         "post.list.simple.checks.sizing.icon": "bb5abf0a86b093084f08e078f8f4ad9947a52b72",
         "post.list.simple.checks.padding.icon": "59c39e7014cf31f71f657d6a7034186a35e63012",
         "post.list.simple.checks.padding.text": "a8a03d1e0221fd52a61abb27246f0ee435aea686",
@@ -9659,11 +9513,14 @@
         "post.list.item.enabled-fg": "4a570668b7059b0822f1e137471f2d255cc62f19",
         "post.list.item.hover-fg": "f7051e304ecb770746a86ddbc231512baa96245b",
         "post.list.item.focus.outline.offset": "d066bc28e9b22c828149b8612a34becf5837f5f6",
+        "post.list.item.focus.outline-width": "116e43c79d38c471881a79d5eb170f810ee72640",
+        "post.list.item.border-width": "bcd8aacad9ea04c34d9b9a6195caff661a48f581",
         "post.list.icon.container.padding.block": "2c63130c7c5cc820bceda75d7711862518504a8b",
         "post.list.icon.container.padding.inline": "59b199c894c721103fb3826da4dad5363f85bfdf",
         "post.list.icon.size": "26403e806c4c3551bc29609b720cd1ee98b77132",
-        "post.list.item.border-width": "bcd8aacad9ea04c34d9b9a6195caff661a48f581",
-        "post.list.item.focus.outline-width": "116e43c79d38c471881a79d5eb170f810ee72640",
+        "post.list.switch.padding.block": "f4d818760b6afc45e334e50776ad152fb18d54d9",
+        "post.list.item.focus.outline.color": "0846e0ff8d338fd370fbff218c1ec6c81ba02ed3",
+        "post.list.item.focus.outline-radius": "da1e12bc7bde2114427b1ed43baeb55c0c7dd5eb",
         "post.infobox.sizing.icon": "7dd519c929ff034c7e25825ed27a3d0bf99bdc1d",
         "post.infobox.spacing.gap.inline": "ac6c1c2265e3a937117dc72b1fc0181204661585",
         "post.clickable.spacing.padding.icon": "4ef4cc91db7e7d5643bfedae838969e76322b6fe",
@@ -9744,6 +9601,7 @@
         "post.radio-button.padding.block.group": "990db7096901d16ae10b01800015dece8805bd03",
         "post.radio-button.group.legend.font-size": "173ff3bf123931fc8325fe9156404613a57b8b78",
         "post.radio-button.label.padding.block": "9aa1af7161cf43024101355d41b51c12692a6bf9",
+        "post.radio-button.gap.inline.group": "0d348d17ca88dc80d153be265c58c3ff2c501b4f",
         "post.select.enabled-bg": "56831cf2f49031708c75a392aa1d337d53265db8",
         "post.select.enabled-fg": "f84ea1c81840d02a75bcf62682632a8853f85ad7",
         "post.select.hover-bg": "1c8c858d517f620cf044cb2cb8ebfa29233d2115",
@@ -9794,28 +9652,6 @@
         "post.snackbar.color.error-fg": "859c4782edc8ec6cd3569354f42336766ee272c5",
         "post.snackbar.color.error-stroke": "74374ac91c484a7d91f7c95779d2d1af98fd7e36",
         "post.snackbar.color.error-icon": "fb053dcadabccbdbe12d091934eb678e468af65c",
-        "post.social-media-button.footer.enabled-fg": "fa798efa74f07882ad2eb5335348341d1cd0e900",
-        "post.social-media-button.footer.enabled-bg": "522c78c9d29613192823e96833f28364efeea038",
-        "post.social-media-button.footer.enabled-stroke": "dfaffc9bb53b84fc3bb3215a02f5f1ada976d61f",
-        "post.social-media-button.footer.hover-fg": "354d602114a9727033a08707770636c4bcb5ab4e",
-        "post.social-media-button.footer.hover-bg": "888b6e5dfbbba72b4dc16f8fd45a66e38effdb2f",
-        "post.social-media-button.footer.hover-stroke": "948411353d3e1d04026f7a23c77367ef7303923e",
-        "post.social-media-button.footer.outer": "d32211165497f124da269359b6ec9b4e5eab2116",
-        "post.social-media-button.footer.icon": "a2c88941c990e2288caa1e2d71320dfc3f89912a",
-        "post.social-media-button.footer.border-width": "aaeecf27450ac6f1e9adf122a38a022d5d96f2cf",
-        "post.social-media-button.content.enabled-fg": "74d8297201af8d2f2f5020dae45c3a8fd302b1e7",
-        "post.social-media-button.content.enabled-bg": "86cf14b7bd0cc9b9e4cd210ba73cfc76ea243294",
-        "post.social-media-button.content.enabled-stroke": "0526de97fb85fdf8e39b24d27c58bc5762516597",
-        "post.social-media-button.content.hover-fg": "cdaa599dec7aff1c09cefb274080121988eab79f",
-        "post.social-media-button.content.hover-bg": "7b7ab8fa05a4dfe13cca6b35dfe2306ccd769733",
-        "post.social-media-button.content.hover-stroke": "63870c9c43cb3a8e9208ee01f4755c6b5564002d",
-        "post.social-media-button.content.outer": "6be54af1a4cbc7d122566deb0eb1a9b7249eb3e1",
-        "post.social-media-button.content.icon": "3a470a93d7f76db28c47a929778d3a95d531d5cd",
-        "post.social-media-button.content.border-width": "d4f7bbf8f9ec82e477129f37f467544a74c67fa3",
-        "post.social-media-button.focus.stroke": "6ff27984f2b2cfe8a3ab8bd8723d0e735104d59d",
-        "post.social-media-button.focus.border-width": "5a189cc382e1e2fbb6faad451fadef1269252caf",
-        "post.social-media-button.focus.outline.offset": "33140a9698f27556ecdd801a76ef207e838a7715",
-        "post.social-media-button.border-radius": "b26808858a7de99bec1ec31ebfbd65dc49e734f4",
         "post.stepper.text.enabled-fg": "5399579b1d42c8d09bd42d198a75f16d3085001c",
         "post.stepper.text.disabled-fg": "1400541fc168af90ab6accaf90b0e6245f36c6c9",
         "post.stepper.focus.stroke": "fff618d97ec67ceab1cde99155bc935c37cebc6f",
@@ -9974,8 +9810,6 @@
         "post.inline.color.error-fg": "8e4986f314ec11e8770b472388ef7c782fb07cee",
         "post.inline.color.error-stroke": "de75d6eb0a859440c39a5ac1fd26099b5f6ef793",
         "post.inline.color.error-icon": "71b842f358cc234da3c1fffd7919d7ae06c34790",
-        "post.lead.font-size": "faf5dba2f96d4f89a72ee8e380d9c5dabd286beb",
-        "post.lead-font-weight": "5f2c7a3dd41d479f8b11e5b1dbfe462152e54aa0",
         "post.validation.list.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2",
         "post.validation.list.padding.block.text": "37b3685608b0a7ee4bdc297d80ea55c77856c2ee",
         "post.validation.error": "796bdb2fc917b5948438070371ae60d214216795",
@@ -10030,8 +9864,7 @@
         "Elements/Legend": "source",
         "FigmaOnly": "enabled",
         "Utilities/Spacing": "source",
-        "Utilities/Typo": "source",
-        "Components/Form footer": "disabled"
+        "Utilities/Typo": "source"
       }
     },
     {
@@ -10047,8 +9880,7 @@
         "Device/Mobile": "source",
         "Channel/EDK": "source",
         "Channel/IDK": "source",
-        "Theme/Post": "enabled",
-        "Components/Form footer": "disabled"
+        "Theme/Post": "enabled"
       },
       "group": "Theme",
       "$figmaCollectionId": "VariableCollectionId:4178:5613",
@@ -10073,8 +9905,7 @@
         "Channel/EDK": "source",
         "Channel/IDK": "source",
         "Theme/Post": "enabled",
-        "Theme/Cargo": "enabled",
-        "Components/Form footer": "disabled"
+        "Theme/Cargo": "enabled"
       },
       "group": "Theme",
       "$figmaCollectionId": "VariableCollectionId:4178:5613",
@@ -10114,14 +9945,15 @@
       "Components/Checkbox",
       "Components/Dropdown",
       "Components/Form footer",
+      "Components/Grid",
       "Components/Icon button",
+      "Components/Lead",
       "Components/List",
       "Components/Notifications",
       "Components/Popover",
       "Components/Radio button",
       "Components/Select",
       "Components/Snackbar",
-      "Components/Social media button",
       "Components/Stepper",
       "Components/Switch",
       "Components/Text area",
@@ -10129,7 +9961,6 @@
       "Components/Text input",
       "Components/Toast",
       "Components/Inline notification",
-      "Components/Lead",
       "Components/Validation",
       "FigmaOnly",
       "Utilities/Spacing",

From b59a69f2c32451cd06f6d67798fd1cc2c1ff6b5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:48:37 +0200
Subject: [PATCH 05/40] chore(styles): improve the utility API (#3705)

---
 packages/styles/src/mixins/_media.scss        |   6 +-
 packages/styles/src/utilities/_functions.scss |  35 ++++
 packages/styles/src/utilities/_mixins.scss    | 102 ++++++++-
 packages/styles/src/utilities/_variables.scss | 193 +++++++++++-------
 packages/styles/src/utilities/index.scss      |  32 +--
 .../tests/utilities/functions.test.scss       |  34 +++
 .../styles/tests/utilities/mixins.test.scss   |  99 +++++++--
 7 files changed, 372 insertions(+), 129 deletions(-)
 create mode 100644 packages/styles/src/utilities/_functions.scss
 create mode 100644 packages/styles/tests/utilities/functions.test.scss

diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss
index 2744a83c39..e7dd496aaa 100644
--- a/packages/styles/src/mixins/_media.scss
+++ b/packages/styles/src/mixins/_media.scss
@@ -1,5 +1,9 @@
 @mixin min($device-size) {
-  @media screen and (min-width: $device-size) {
+  @if $device-size != 0 {
+    @media screen and (min-width: $device-size) {
+      @content;
+    }
+  } @else {
     @content;
   }
 }
diff --git a/packages/styles/src/utilities/_functions.scss b/packages/styles/src/utilities/_functions.scss
new file mode 100644
index 0000000000..b60e4e735d
--- /dev/null
+++ b/packages/styles/src/utilities/_functions.scss
@@ -0,0 +1,35 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+@use '../functions/string';
+@use '../functions/tokens' as tokens-fn;
+@use '../tokens/utilities' as tokens;
+
+$token-maps: meta.module-variables(tokens);
+
+@function from-tokens($set, $group: $set) {
+  $map-name: 'post-#{$set}';
+  $token-prefix: 'post-utility-#{$group}-';
+
+  @if (not map.has-key($token-maps, $map-name)) {
+    @error 'The utility token map named "$#{$map-name}" is missing.';
+  }
+
+  $values: ();
+  @each $key, $value in map.get($token-maps, $map-name) {
+    @if (string.contains($key, $token-prefix)) {
+      $new-value: (
+        string.replace($key, $token-prefix, ''): $value,
+      );
+
+      $values: map.merge($values, $new-value);
+    }
+  }
+
+  @if (list.length($values) == 0) {
+    @error 'No token matching "#{$token-prefix}*" was found in the "$#{$map-name}" map.';
+  }
+
+  @return $values;
+}
diff --git a/packages/styles/src/utilities/_mixins.scss b/packages/styles/src/utilities/_mixins.scss
index 6c98727479..f062e7d4a2 100644
--- a/packages/styles/src/utilities/_mixins.scss
+++ b/packages/styles/src/utilities/_mixins.scss
@@ -1,16 +1,96 @@
-@use '../functions/string';
-@use '../mixins/media';
-@use '../variables/breakpoints';
-
-@mixin generate-utilities($group, $tokens, $properties, $prefix, $infix: '') {
-  @each $key, $value in $tokens {
-    @if (string.contains($key, 'post-utility-#{$group}')) {
-      $suffix: string.replace($key, 'post-utility-#{$group}', '');
-      .#{$prefix}#{$infix}#{$suffix} {
-        @each $property in $properties {
-          #{$property}: #{$value} !important;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:string';
+
+/* stylelint-disable max-nesting-depth */
+@mixin generate-utility($utility, $infix: '') {
+  $values: map.get($utility, values);
+
+  // If the values are a list or string, convert it into a map
+  @if meta.type-of($values) == 'string' or meta.type-of(list.nth($values, 1)) != 'list' {
+    $values: list.zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map.get($utility, property);
+
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if meta.type-of($properties) == 'string' {
+      $properties: list.append((), $properties);
+    }
+
+    // Use custom class if present
+    $property-class: if(
+      map.has-key($utility, class),
+      map.get($utility, class),
+      list.nth($properties, 1)
+    );
+    $property-class: if($property-class == null, '', $property-class);
+
+    // Use custom CSS variable name if present, otherwise default to `class`
+    $css-variable-name: if(
+      map.has-key($utility, css-variable-name),
+      map.get($utility, css-variable-name),
+      map.get($utility, class)
+    );
+
+    // State params to generate pseudo-classes
+    $state: if(map.has-key($utility, state), map.get($utility, state), ());
+
+    $infix: if(
+      $property-class == '' and string.slice($infix, 1, 1) == '-',
+      string.slice($infix, 2),
+      $infix
+    );
+
+    // Don't prefix if value key is null (e.g. with shadow class)
+    $property-class-modifier: if(
+      $key,
+      if($property-class == '' and $infix == '', '', '-') + $key,
+      ''
+    );
+
+    $is-css-var: map.get($utility, css-var);
+    $is-local-vars: map.get($utility, local-vars);
+
+    @if $value != null {
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --post-#{$css-variable-name}: #{$value};
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --post-#{$css-variable-name}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --post-#{$local-var}: #{$variable};
+              }
+            }
+            #{$property}: $value !important;
+          }
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --post-#{$local-var}: #{$variable};
+                }
+              }
+              #{$property}: $value !important;
+            }
+          }
         }
       }
     }
   }
 }
+/* stylelint-enable max-nesting-depth */
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index d7c1bca0e7..721d5efe42 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -1,86 +1,131 @@
 @use '../tokens/utilities' as tokens;
 
-/*
-  Add new utilities using the following structure:
-    [set]: (
-      tokens: map (required),
-      classes: (
-        [group]: (
-          responsive: boolean (optional),
-          prefixes: map (required),
-        )
-      )
-    )
-
-    - `set`:
-      The name of the token set (e.g., if the tokens are contained in the "$post-spacing" map, the set is "spacing").
-
-    - `tokens`:
-      The map of tokens that should be used to generate the utility classes.
+@use './functions' as *;
 
-    - `group`:
-      The group name used in the token keys (e.g., if the tokens are named "post-utility-margin-*", the group is "margin").
+/*
+  Utilities are generated with our utility API using bellow $utilities map.
 
-    - `responsive`:
-      If set to `true`, the utility classes will be generated for all breakpoints (e.g., `-sm`, `-md`, `-lg`, etc.).
-      If set to `false` or omitted, utilities will be generated without a breakpoint infix.
+  The utility map contains a keyed list of utility groups which accept the following options:
 
-    - `prefixes`:
-      A map where each key is the class name prefix and the value is the CSS property (or properties) that the class will set.
+  | Option            | Type     | Default value | Description                                                                                                                                                                                                                              |
+  |-------------------|----------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+  | property          | Required | –             | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins).                                                                                                                                |
+  | values            | Required | –             | List of values, or a map if you don’t want the class name to be the same as the value. If null is used as map key, class is not prepended to the class name.                                                                             |
+  | class             | Optional | null          | Name of the generated class. If not provided and property is an array of strings, class will default to the first element of the property array. If not provided and property is a string, the values keys are used for the class names. |
+  | css-var           | Optional | false         | Boolean to generate CSS variables instead of CSS rules.                                                                                                                                                                                  |
+  | css-variable-name | Optional | null          | Custom un-prefixed name for the CSS variable inside the ruleset.                                                                                                                                                                         |
+  | local-vars        | Optional | null          | Map of local CSS variables to generate in addition to the CSS rules.                                                                                                                                                                     |
+  | state             | Optional | null          | List of pseudo-class variants (e.g., :hover or :focus) to generate.                                                                                                                                                                      |
+  | responsive        | Optional | false         | Boolean indicating if responsive classes should be generated.                                                                                                                                                                            |
 
-  Example:
-  spacing: (
-    tokens: tokens.$post-spacing,       // Refers to the token map containing all spacing values
-    classes: (
-      margin: (                         // Refers to the token "post-utility-margin-*" token in above map
-        classes: (
-          m: margin,                    // Generates `.m-*` classes to set the `margin` property
-          mx: margin-left margin-right, // Generates `.mx-*` classes to set `margin-left` and `margin-right` properties
-          ...
-        ),
-        responsive: true,               // Generates responsive classes
-      )
-    )
-  )
+  Our API is based on bootstrap utility API, more information is available here: https://getbootstrap.com/docs/5.3/utilities/api/
 */
 
 $utilities: (
-  spacing: (
-    tokens: tokens.$post-spacing,
-    classes: (
-      margin: (
-        responsive: true,
-        prefixes: (
-          m: margin,
-          mx: margin-inline,
-          ms: margin-inline-start,
-          me: margin-inline-end,
-          my: margin-block,
-          mt: margin-block-start,
-          mb: margin-block-end,
-        ),
-      ),
-      padding: (
-        responsive: true,
-        prefixes: (
-          p: padding,
-          px: padding-inline,
-          ps: padding-inline-start,
-          pe: padding-inline-end,
-          py: padding-block,
-          pt: padding-block-start,
-          pb: padding-block-end,
-        ),
-      ),
-      gap: (
-        responsive: true,
-        prefixes: (
-          gap: gap,
-          row-gap: row-gap,
-          column-gap: column-gap,
-        ),
-      ),
-    ),
+  'margin': (
+    responsive: true,
+    property: margin,
+    class: m,
+    values: from-tokens('spacing', 'margin'),
+  ),
+  'margin-x': (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: from-tokens('spacing', 'margin'),
+  ),
+  'margin-y': (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: from-tokens('spacing', 'margin'),
+  ),
+  'margin-top': (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: from-tokens('spacing', 'margin'),
+  ),
+  'margin-end': (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: from-tokens('spacing', 'margin'),
+  ),
+  'margin-bottom': (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: from-tokens('spacing', 'margin'),
+  ),
+  'margin-start': (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: from-tokens('spacing', 'margin'),
+  ),
+
+  'padding': (
+    responsive: true,
+    property: padding,
+    class: p,
+    values: from-tokens('spacing', 'padding'),
   ),
+  'padding-x': (
+    responsive: true,
+    property: padding-right padding-left,
+    class: px,
+    values: from-tokens('spacing', 'padding'),
+  ),
+  'padding-y': (
+    responsive: true,
+    property: padding-top padding-bottom,
+    class: py,
+    values: from-tokens('spacing', 'padding'),
+  ),
+  'padding-top': (
+    responsive: true,
+    property: padding-top,
+    class: pt,
+    values: from-tokens('spacing', 'padding'),
+  ),
+  'padding-end': (
+    responsive: true,
+    property: padding-right,
+    class: pe,
+    values: from-tokens('spacing', 'padding'),
+  ),
+  'padding-bottom': (
+    responsive: true,
+    property: padding-bottom,
+    class: pb,
+    values: from-tokens('spacing', 'padding'),
+  ),
+  'padding-start': (
+    responsive: true,
+    property: padding-left,
+    class: ps,
+    values: from-tokens('spacing', 'padding'),
+  ),
+
+  'gap': (
+    responsive: true,
+    property: gap,
+    class: gap,
+    values: from-tokens('spacing', 'gap'),
+  ),
+  'row-gap': (
+    responsive: true,
+    property: row-gap,
+    class: row-gap,
+    values: from-tokens('spacing', 'gap'),
+  ),
+  'column-gap': (
+    responsive: true,
+    property: column-gap,
+    class: column-gap,
+    values: from-tokens('spacing', 'gap'),
+  ),
+
   // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
 );
diff --git a/packages/styles/src/utilities/index.scss b/packages/styles/src/utilities/index.scss
index 84aeed5e0d..54e154f001 100644
--- a/packages/styles/src/utilities/index.scss
+++ b/packages/styles/src/utilities/index.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
+@use 'sass:meta';
 
-@use '../functions/string';
 @use '../mixins/media';
 @use '../variables/breakpoints';
 
@@ -9,31 +9,13 @@
 
 @use './temp/legacy';
 
-@each $set, $config in $utilities {
-  $tokens: map.get($config, tokens);
-  $classes: map.get($config, classes);
+@each $breakpoint, $device-size in breakpoints.$grid-breakpoints {
+  @include media.min($device-size) {
+    $infix: if($device-size == 0, '', '-#{$breakpoint}');
 
-  @each $group, $classesConfig in $classes {
-    $responsive: map.get($classesConfig, responsive);
-    $prefixes: map.get($classesConfig, prefixes);
-
-    @each $prefix, $properties in $prefixes {
-      @if $responsive {
-        @each $breakpoint, $min-width in breakpoints.$grid-breakpoints {
-          @if ($min-width == 0) {
-            // responsive utilities on smaller breakpoint (no breakpoint infix)
-            @include generate-utilities($group, $tokens, $properties, $prefix);
-          } @else {
-            // responsive utilities on all breakpoints that are not the smallest (with breakpoint infix)
-            @include media.min($min-width) {
-              $infix: '-#{$breakpoint}';
-              @include generate-utilities($group, $tokens, $properties, $prefix, $infix);
-            }
-          }
-        }
-      } @else {
-        // non-responsive utilities
-        @include generate-utilities($group, $tokens, $properties, $prefix);
+    @each $key, $utility in $utilities {
+      @if meta.type-of($utility) == 'map' and (map.get($utility, responsive) or $infix == '') {
+        @include generate-utility($utility, $infix);
       }
     }
   }
diff --git a/packages/styles/tests/utilities/functions.test.scss b/packages/styles/tests/utilities/functions.test.scss
new file mode 100644
index 0000000000..4376787cd5
--- /dev/null
+++ b/packages/styles/tests/utilities/functions.test.scss
@@ -0,0 +1,34 @@
+@use 'tests/jest';
+@use 'src/utilities/functions';
+
+$post-spacing: (
+  'post-utility-spacing-1': 12px,
+  'post-utility-spacing-2': 16px,
+);
+
+$post-sizing: (
+  'post-utility-height-1': 24px,
+  'post-utility-height-2': 48px,
+  'post-utility-width-1': 28px,
+  'post-utility-width-2': 44px,
+);
+
+functions.$token-maps: (post-spacing: $post-spacing, post-sizing: $post-sizing);
+
+// it should return all values from the token set
+@include jest.equal(
+  (
+    '1': 12px,
+    '2': 16px,
+  ),
+  functions.from-tokens('spacing')
+);
+
+// it should return values from the group in the token set
+@include jest.equal(
+  (
+    '1': 24px,
+    '2': 48px,
+  ),
+  functions.from-tokens('sizing', 'height')
+);
diff --git a/packages/styles/tests/utilities/mixins.test.scss b/packages/styles/tests/utilities/mixins.test.scss
index 230947b399..34d01304e9 100644
--- a/packages/styles/tests/utilities/mixins.test.scss
+++ b/packages/styles/tests/utilities/mixins.test.scss
@@ -4,25 +4,88 @@
 @use 'src/utilities/mixins';
 
 .test {
-  @include mixins.generate-utilities(
-    $group: 'font-weight',
-    $tokens: (
-      post-utility-font-weight-normal: 400,
-    ),
-    $properties: font-weight,
-    $prefix: 'fw'
+  // it should work with only "property" and "values"
+  @include mixins.generate-utility(
+    (
+      property: text-decoration,
+      values: none underline line-through,
+    )
   );
 
-  @include mixins.generate-utilities(
-    $group: 'gutter',
-    $tokens: (
-      post-utility-gutter-12: 12px,
-    ),
-    $properties: (
-      --gutter-x,
-      --gutter-y,
-    ),
-    $prefix: 'g',
-    $infix: '-lg'
+  // it should work with "class"
+  @include mixins.generate-utility(
+    (
+      property: opacity,
+      class: o,
+      values: (
+        0: 0,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    )
+  );
+
+  // it should work with "css-var" and "css-variable-name"
+  @include mixins.generate-utility(
+    (
+      css-var: true,
+      css-variable-name: text-alpha,
+      class: text-opacity,
+      values: (
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    )
+  );
+
+  // it should work with "local-vars"
+  @include mixins.generate-utility(
+    (
+      property: background-color,
+      class: bg,
+      local-vars: (
+        'bg-opacity': 1,
+      ),
+      values: (
+        'transparent': transparent,
+        'error': red,
+        'success': green,
+      ),
+    )
+  );
+
+  // it should work with "state"
+  @include mixins.generate-utility(
+    (
+      property: opacity,
+      class: opacity,
+      state: hover,
+      values: (
+        0: 0,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    )
+  );
+
+  // it should work with "responsive"
+  @include mixins.generate-utility(
+    (
+      property: opacity,
+      responsive: true,
+      values: (
+        0: 0,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    )
   );
 }

From af9df49d49af9f6da36919243b5614f34a15e243 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 10 Oct 2024 08:06:18 +0200
Subject: [PATCH 06/40] chore(deps): update storybook to v8.3.5 (#3703)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[@storybook/addon-docs](https://redirect.github.com/storybookjs/storybook/tree/next/code/addons/docs)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/addons/docs))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2faddon-docs/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2faddon-docs/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2faddon-docs/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2faddon-docs/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2faddon-docs/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/addon-essentials](https://redirect.github.com/storybookjs/storybook/tree/next/code/addons/essentials)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/addons/essentials))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2faddon-essentials/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2faddon-essentials/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2faddon-essentials/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2faddon-essentials/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2faddon-essentials/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/addon-links](https://redirect.github.com/storybookjs/storybook/tree/next/code/addons/links)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/addons/links))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2faddon-links/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2faddon-links/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2faddon-links/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2faddon-links/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2faddon-links/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/blocks](https://redirect.github.com/storybookjs/storybook/tree/next/code/lib/blocks)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/lib/blocks))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2fblocks/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2fblocks/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2fblocks/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2fblocks/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2fblocks/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/components](https://redirect.github.com/storybookjs/storybook/tree/next/code/deprecated/components)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/deprecated/components))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2fcomponents/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2fcomponents/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2fcomponents/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2fcomponents/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2fcomponents/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/core-events](https://redirect.github.com/storybookjs/storybook/tree/next/code/lib/core-events)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/lib/core-events))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2fcore-events/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2fcore-events/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2fcore-events/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2fcore-events/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2fcore-events/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/manager-api](https://redirect.github.com/storybookjs/storybook/tree/next/code/lib/manager-api)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/lib/manager-api))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2fmanager-api/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2fmanager-api/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2fmanager-api/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2fmanager-api/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2fmanager-api/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/preview-api](https://redirect.github.com/storybookjs/storybook/tree/next/code/lib/preview-api)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/lib/preview-api))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2fpreview-api/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2fpreview-api/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2fpreview-api/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2fpreview-api/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2fpreview-api/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/theming](https://redirect.github.com/storybookjs/storybook/tree/next/code/lib/theming)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/lib/theming))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2ftheming/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2ftheming/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2ftheming/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2ftheming/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2ftheming/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/types](https://redirect.github.com/storybookjs/storybook/tree/next/code/lib/types)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/lib/types))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2ftypes/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2ftypes/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2ftypes/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2ftypes/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2ftypes/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/web-components](https://redirect.github.com/storybookjs/storybook/tree/next/code/renderers/web-components)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/renderers/web-components))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2fweb-components/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2fweb-components/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2fweb-components/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2fweb-components/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2fweb-components/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@storybook/web-components-vite](https://redirect.github.com/storybookjs/storybook/tree/next/code/frameworks/web-components-vite)
([source](https://redirect.github.com/storybookjs/storybook/tree/HEAD/code/frameworks/web-components-vite))
| [`8.2.7` ->
`8.3.5`](https://renovatebot.com/diffs/npm/@storybook%2fweb-components-vite/8.2.7/8.3.5)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@storybook%2fweb-components-vite/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@storybook%2fweb-components-vite/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@storybook%2fweb-components-vite/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@storybook%2fweb-components-vite/8.2.7/8.3.5?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>storybookjs/storybook (@&#8203;storybook/addon-docs)</summary>

###
[`v8.3.5`](https://redirect.github.com/storybookjs/storybook/blob/HEAD/CHANGELOG.md#835)

[Compare
Source](https://redirect.github.com/storybookjs/storybook/compare/v8.3.4...v8.3.5)

- CLI: Update the React Native init to include v8 dependencies -
[#&#8203;29273](https://redirect.github.com/storybookjs/storybook/pull/29273),
thanks [@&#8203;dannyhw](https://redirect.github.com/dannyhw)!
- Vitest plugin: Fix renamed export stories -
[#&#8203;29250](https://redirect.github.com/storybookjs/storybook/pull/29250),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!

###
[`v8.3.4`](https://redirect.github.com/storybookjs/storybook/blob/HEAD/CHANGELOG.md#834)

[Compare
Source](https://redirect.github.com/storybookjs/storybook/compare/v8.3.3...v8.3.4)

- Addon Test: Support story name as test description -
[#&#8203;29147](https://redirect.github.com/storybookjs/storybook/pull/29147),
thanks [@&#8203;InfiniteXyy](https://redirect.github.com/InfiniteXyy)!
- Addon-Interactions: Use ansi-to-html for colored test errors -
[#&#8203;29110](https://redirect.github.com/storybookjs/storybook/pull/29110),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!

###
[`v8.3.3`](https://redirect.github.com/storybookjs/storybook/blob/HEAD/CHANGELOG.md#833)

[Compare
Source](https://redirect.github.com/storybookjs/storybook/compare/v8.3.2...v8.3.3)

- CLI: Show constraints in error when getting depndencies -
[#&#8203;29187](https://redirect.github.com/storybookjs/storybook/pull/29187),
thanks [@&#8203;andrasczeh](https://redirect.github.com/andrasczeh)!
- React-Vite: Downgrade react-docgen-typescript plugin -
[#&#8203;29184](https://redirect.github.com/storybookjs/storybook/pull/29184),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!
- UI: Fix composed storybook TooltipLinkList bug where href isn't passed
forward -
[#&#8203;29175](https://redirect.github.com/storybookjs/storybook/pull/29175),
thanks [@&#8203;JSMike](https://redirect.github.com/JSMike)!

###
[`v8.3.2`](https://redirect.github.com/storybookjs/storybook/blob/HEAD/CHANGELOG.md#832)

[Compare
Source](https://redirect.github.com/storybookjs/storybook/compare/v8.3.1...v8.3.2)

- CLI: Fix skip-install for stable latest releases -
[#&#8203;29133](https://redirect.github.com/storybookjs/storybook/pull/29133),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Core: Do not add packageManager field to package.json during
`storybook dev` -
[#&#8203;29152](https://redirect.github.com/storybookjs/storybook/pull/29152),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!

###
[`v8.3.1`](https://redirect.github.com/storybookjs/storybook/blob/HEAD/CHANGELOG.md#831)

[Compare
Source](https://redirect.github.com/storybookjs/storybook/compare/v8.3.0...v8.3.1)

- Angular: Fix sourceDecorator to apply excludeDecorators flag -
[#&#8203;29069](https://redirect.github.com/storybookjs/storybook/pull/29069),
thanks [@&#8203;JSMike](https://redirect.github.com/JSMike)!
- Core: Do not prebundle better-opn -
[#&#8203;29137](https://redirect.github.com/storybookjs/storybook/pull/29137),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Core: Do not prebundle jsdoc-type-pratt-parser -
[#&#8203;29134](https://redirect.github.com/storybookjs/storybook/pull/29134),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Next.js: Upgrade sass-loader from ^12 to ^13 -
[#&#8203;29040](https://redirect.github.com/storybookjs/storybook/pull/29040),
thanks
[@&#8203;HoncharenkoZhenya](https://redirect.github.com/HoncharenkoZhenya)!

###
[`v8.3.0`](https://redirect.github.com/storybookjs/storybook/blob/HEAD/CHANGELOG.md#830)

[Compare
Source](https://redirect.github.com/storybookjs/storybook/compare/v8.2.9...v8.3.0)

Fresh out of the oven! Storybook 8.3 brings you:

- ⚡️ **First-class Vitest integration** to run stories as component
tests
-   🔼 **Next.js-Vite framework** for Vitest compatibility and better DX
-   🗜️ **Further reduced bundle size** for a smaller install footprint
- 🌐 **Experimental Story globals** to standardize stories for themes,
viewports, and locales
-   💯 **Hundreds** more improvements

<details>
<summary>List of all updates</summary>

- Addon Test: Improve messages and post install script handling -
[#&#8203;29036](https://redirect.github.com/storybookjs/storybook/pull/29036),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Addon Viewport: Add default options via parameters -
[#&#8203;28944](https://redirect.github.com/storybookjs/storybook/pull/28944),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- Addon Test: Add experimental vitest integration -
[#&#8203;28768](https://redirect.github.com/storybookjs/storybook/pull/28768),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!
- Addon Test: Fix error message logic in set up file -
[#&#8203;28906](https://redirect.github.com/storybookjs/storybook/pull/28906),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Addon Test: Fix indentation of 'vitePluginNext' in generated Vitest
config file -
[#&#8203;29011](https://redirect.github.com/storybookjs/storybook/pull/29011),
thanks [@&#8203;ghengeveld](https://redirect.github.com/ghengeveld)!
- Addon Test: Fix postinstall file types -
[#&#8203;28978](https://redirect.github.com/storybookjs/storybook/pull/28978),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!
- Addon Test: Fix tests potentially not existing in non-isolate mode -
[#&#8203;28993](https://redirect.github.com/storybookjs/storybook/pull/28993),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Addon Test: Improve transformation logic to avoid duplicate tests -
[#&#8203;28929](https://redirect.github.com/storybookjs/storybook/pull/28929),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Addon Test: Set default viewport if applicable -
[#&#8203;28905](https://redirect.github.com/storybookjs/storybook/pull/28905),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Addon Test: Set screenshotFailures to false by default -
[#&#8203;28908](https://redirect.github.com/storybookjs/storybook/pull/28908),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Addon Docs: Remove babel dependency -
[#&#8203;28915](https://redirect.github.com/storybookjs/storybook/pull/28915),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!
- Addon Interactions: Fix status in panel tab -
[#&#8203;28580](https://redirect.github.com/storybookjs/storybook/pull/28580),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Angular: Fix Angular template error for props with a circular
reference -
[#&#8203;28498](https://redirect.github.com/storybookjs/storybook/pull/28498),
thanks [@&#8203;Marklb](https://redirect.github.com/Marklb)!
- Angular: Fix template props not able to use dot notation -
[#&#8203;28588](https://redirect.github.com/storybookjs/storybook/pull/28588),
thanks [@&#8203;Marklb](https://redirect.github.com/Marklb)!
- Backgrounds/Viewports: Make defaults overridable in
`StoryGlobals`-mode -
[#&#8203;29025](https://redirect.github.com/storybookjs/storybook/pull/29025),
thanks [@&#8203;JReinhold](https://redirect.github.com/JReinhold)!
- Blocks: Fix scroll to non-ascii anchors -
[#&#8203;28826](https://redirect.github.com/storybookjs/storybook/pull/28826),
thanks [@&#8203;SkReD](https://redirect.github.com/SkReD)!
- Build: Remove external overrides, use package.json as source of truth
-
[#&#8203;28632](https://redirect.github.com/storybookjs/storybook/pull/28632),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!
- Builder-Vite: Add null character prefix to virtual file IDs -
[#&#8203;28863](https://redirect.github.com/storybookjs/storybook/pull/28863),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Builder-Vite: Fix 'condition node never be used' warning -
[#&#8203;28989](https://redirect.github.com/storybookjs/storybook/pull/28989),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- CLI: Add conditional logging for manager and preview start -
[#&#8203;28603](https://redirect.github.com/storybookjs/storybook/pull/28603),
thanks [@&#8203;tobiasdiez](https://redirect.github.com/tobiasdiez)!
- CLI: Fix dedent import in package managers -
[#&#8203;28980](https://redirect.github.com/storybookjs/storybook/pull/28980),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!
- CLI: Fix the initialization of Storybook in workspaces -
[#&#8203;28699](https://redirect.github.com/storybookjs/storybook/pull/28699),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- CLI: Handle Yarn PnP wrapper scenario when adding an addon -
[#&#8203;29027](https://redirect.github.com/storybookjs/storybook/pull/29027),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- CLI: Make PackageJson optional for starting a dev server -
[#&#8203;28594](https://redirect.github.com/storybookjs/storybook/pull/28594),
thanks [@&#8203;tobiasdiez](https://redirect.github.com/tobiasdiez)!
- CLI: Update spawn options in proxy.ts to support Windows -
[#&#8203;28990](https://redirect.github.com/storybookjs/storybook/pull/28990),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Components: Remove external overrides -
[#&#8203;28632](https://redirect.github.com/storybookjs/storybook/pull/28632),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!
- ConfigFile: Fix `as const satisfies` modifiers -
[#&#8203;29000](https://redirect.github.com/storybookjs/storybook/pull/29000),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!
- Controls: Add disableSave parameter -
[#&#8203;28734](https://redirect.github.com/storybookjs/storybook/pull/28734),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Core: Add Rsbuild frameworks to known frameworks -
[#&#8203;28694](https://redirect.github.com/storybookjs/storybook/pull/28694),
thanks [@&#8203;fi3ework](https://redirect.github.com/fi3ework)!
- Core: De-duplicate babel use in core -
[#&#8203;28972](https://redirect.github.com/storybookjs/storybook/pull/28972),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- Core: Fix header for MountMustBeDestructuredError message -
[#&#8203;28590](https://redirect.github.com/storybookjs/storybook/pull/28590),
thanks [@&#8203;0916dhkim](https://redirect.github.com/0916dhkim)!
- Core: Fix manager-builder `tsconfig` to emit `react-jsx` -
[#&#8203;28541](https://redirect.github.com/storybookjs/storybook/pull/28541),
thanks
[@&#8203;williamhelmrath](https://redirect.github.com/williamhelmrath)!
- Core: Introduce setProjectAnnotations API to more renderers and
frameworks -
[#&#8203;28907](https://redirect.github.com/storybookjs/storybook/pull/28907),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Core: Make sure CJS build always has lowest prio -
[#&#8203;28829](https://redirect.github.com/storybookjs/storybook/pull/28829),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!
- Core: Move `util` to regular dependency -
[#&#8203;29008](https://redirect.github.com/storybookjs/storybook/pull/29008),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- Core: Split Storybook CLI -
[#&#8203;28519](https://redirect.github.com/storybookjs/storybook/pull/28519),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!
- Core: Upgrade docs-mdx for smaller install -
[#&#8203;28552](https://redirect.github.com/storybookjs/storybook/pull/28552),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!
- CPC: Add `ESM` export to `docs-tools` & `node-logger` packages -
[#&#8203;28539](https://redirect.github.com/storybookjs/storybook/pull/28539),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- CPC: Fix missing dependency in `@storybook/addon-interactions` -
[#&#8203;28518](https://redirect.github.com/storybookjs/storybook/pull/28518),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- CPC: Fix type generation -
[#&#8203;28507](https://redirect.github.com/storybookjs/storybook/pull/28507),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- CPC: Revert renames of panels, addon_ids -
[#&#8203;28524](https://redirect.github.com/storybookjs/storybook/pull/28524),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- CSF: Allow overridding globals at the story level -
[#&#8203;26654](https://redirect.github.com/storybookjs/storybook/pull/26654),
thanks [@&#8203;tmeasday](https://redirect.github.com/tmeasday)!
- Dependencies: Upgrade `commander` -
[#&#8203;28857](https://redirect.github.com/storybookjs/storybook/pull/28857),
thanks [@&#8203;43081j](https://redirect.github.com/43081j)!
- Fix: Add header for MountMustBeDestructuredError message -
[#&#8203;28590](https://redirect.github.com/storybookjs/storybook/pull/28590),
thanks [@&#8203;0916dhkim](https://redirect.github.com/0916dhkim)!
- Fix: Prevent iframe from capturing mouse events in composed Storybooks
-
[#&#8203;28568](https://redirect.github.com/storybookjs/storybook/pull/28568),
thanks
[@&#8203;Vincentdevreede](https://redirect.github.com/Vincentdevreede)!
- Maintenance: Add `node:`-prefix to node core-modules -
[#&#8203;28860](https://redirect.github.com/storybookjs/storybook/pull/28860),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- Maintenance: Rename addon-vitest to addon-test -
[#&#8203;29014](https://redirect.github.com/storybookjs/storybook/pull/29014),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Next.js-Vite: Fix vite plugin exports -
[#&#8203;29046](https://redirect.github.com/storybookjs/storybook/pull/29046),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Next.js-Vite: Streamline Next.js dir option -
[#&#8203;28995](https://redirect.github.com/storybookjs/storybook/pull/28995),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Next.js-Vite: Update next and vite-plugin-storybook-nextjs
dependencies -
[#&#8203;28994](https://redirect.github.com/storybookjs/storybook/pull/28994),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Next.js: Add
[@&#8203;storybook/nextjs-vite](https://redirect.github.com/storybook/nextjs-vite)
package -
[#&#8203;28800](https://redirect.github.com/storybookjs/storybook/pull/28800),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Next.js: Fix wrong Next.js framework reference -
[#&#8203;28992](https://redirect.github.com/storybookjs/storybook/pull/28992),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Next.js: Make RSC portable-stories compatible -
[#&#8203;28756](https://redirect.github.com/storybookjs/storybook/pull/28756),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Next.js: Update dependencies -
[#&#8203;29052](https://redirect.github.com/storybookjs/storybook/pull/29052),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Nextjs-Vite: Re-export vite-plugin-storybook-nextjs -
[#&#8203;29012](https://redirect.github.com/storybookjs/storybook/pull/29012),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Portable Stories: Improve Handling of React Updates and Errors -
[#&#8203;29044](https://redirect.github.com/storybookjs/storybook/pull/29044),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- React: Avoid 'Dynamic require of react is not possible' issue -
[#&#8203;28730](https://redirect.github.com/storybookjs/storybook/pull/28730),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- React: Bundle in `lodash` -
[#&#8203;28609](https://redirect.github.com/storybookjs/storybook/pull/28609),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- Svelte: Fix events not being logged in Actions when a story has
decorators -
[#&#8203;28247](https://redirect.github.com/storybookjs/storybook/pull/28247),
thanks [@&#8203;JReinhold](https://redirect.github.com/JReinhold)!
- SvelteKit: Introduce portable stories support -
[#&#8203;28918](https://redirect.github.com/storybookjs/storybook/pull/28918),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- SvelteKit/Vue3: Refactor plugin export paths -
[#&#8203;29016](https://redirect.github.com/storybookjs/storybook/pull/29016),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Telemetry: Add globals stats -
[#&#8203;28822](https://redirect.github.com/storybookjs/storybook/pull/28822),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!
- Telemetry: Add portable stories -
[#&#8203;26764](https://redirect.github.com/storybookjs/storybook/pull/26764),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!
- Test: Fix support for TS < 4.7 -
[#&#8203;28887](https://redirect.github.com/storybookjs/storybook/pull/28887),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- Test: Rename vitest plugin entrypoint -
[#&#8203;29067](https://redirect.github.com/storybookjs/storybook/pull/29067),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Test: Upgrade Vitest to v2 -
[#&#8203;28788](https://redirect.github.com/storybookjs/storybook/pull/28788),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Types: Adjust beforeAll to be non-nullable in
NormalizedProjectAnnotations -
[#&#8203;28671](https://redirect.github.com/storybookjs/storybook/pull/28671),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!
- Types: Update type signatures of objects and functions -
[#&#8203;28503](https://redirect.github.com/storybookjs/storybook/pull/28503),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- UI: Fix collapse/expand all functionality -
[#&#8203;28582](https://redirect.github.com/storybookjs/storybook/pull/28582),
thanks
[@&#8203;filipemelo2002](https://redirect.github.com/filipemelo2002)!
- UI: Fix conditional hooks usage in sidebar -
[#&#8203;28979](https://redirect.github.com/storybookjs/storybook/pull/28979),
thanks [@&#8203;JReinhold](https://redirect.github.com/JReinhold)!
- UI: Fix sidebar not wrapping -
[#&#8203;29055](https://redirect.github.com/storybookjs/storybook/pull/29055),
thanks [@&#8203;JReinhold](https://redirect.github.com/JReinhold)!
- Vite: Fix HMR -
[#&#8203;28876](https://redirect.github.com/storybookjs/storybook/pull/28876),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- Vite: Fix missing source map warning -
[#&#8203;28984](https://redirect.github.com/storybookjs/storybook/pull/28984),
thanks
[@&#8203;valentinpalkovic](https://redirect.github.com/valentinpalkovic)!
- Vitest: Fix add command -
[#&#8203;28975](https://redirect.github.com/storybookjs/storybook/pull/28975),
thanks [@&#8203;ghengeveld](https://redirect.github.com/ghengeveld)!
- Vitest: Fix default viewport -
[#&#8203;28943](https://redirect.github.com/storybookjs/storybook/pull/28943),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!
- Vitest: Implement add command for vitest addon -
[#&#8203;28920](https://redirect.github.com/storybookjs/storybook/pull/28920),
thanks [@&#8203;kasperpeulen](https://redirect.github.com/kasperpeulen)!
- Vue: Add missing prop controls when using `vue-component-meta` docgen
plugin -
[#&#8203;28760](https://redirect.github.com/storybookjs/storybook/pull/28760),
thanks [@&#8203;larsrickert](https://redirect.github.com/larsrickert)!
- Vue: Improve generated code snippets -
[#&#8203;27194](https://redirect.github.com/storybookjs/storybook/pull/27194),
thanks [@&#8203;larsrickert](https://redirect.github.com/larsrickert)!
- Vue3: Add vite plugin for portable stories -
[#&#8203;29004](https://redirect.github.com/storybookjs/storybook/pull/29004),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!

</details>

###
[`v8.2.9`](https://redirect.github.com/storybookjs/storybook/blob/HEAD/CHANGELOG.md#829)

[Compare
Source](https://redirect.github.com/storybookjs/storybook/compare/v8.2.8...v8.2.9)

- CLI: Fix `init --skip-install` -
[#&#8203;28853](https://redirect.github.com/storybookjs/storybook/pull/28853),
thanks [@&#8203;ndelangen](https://redirect.github.com/ndelangen)!
- Telemetry: Disable save-from-controls logs for example stories -
[#&#8203;28870](https://redirect.github.com/storybookjs/storybook/pull/28870),
thanks [@&#8203;shilman](https://redirect.github.com/shilman)!

###
[`v8.2.8`](https://redirect.github.com/storybookjs/storybook/blob/HEAD/CHANGELOG.md#828)

[Compare
Source](https://redirect.github.com/storybookjs/storybook/compare/v8.2.7...v8.2.8)

- CLI: Parse more Yarn Berry errors -
[#&#8203;28816](https://redirect.github.com/storybookjs/storybook/pull/28816),
thanks [@&#8203;yannbf](https://redirect.github.com/yannbf)!
- Fix: Invariant failed: Expected package.json#version to be defined in
the "undefined" package -
[#&#8203;28752](https://redirect.github.com/storybookjs/storybook/pull/28752),
thanks [@&#8203;abcdmku](https://redirect.github.com/abcdmku)!

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on the first day of the
month" in timezone Europe/Zurich, Automerge - At any time (no schedule
defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these
updates again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/).
View the [repository job
log](https://developer.mend.io/github/swisspost/design-system).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC4xMTQuMCIsInVwZGF0ZWRJblZlciI6IjM4LjExNC4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyLwn5OmIGRvY3VtZW50YXRpb24iXX0=-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 packages/documentation/package.json |  24 +--
 pnpm-lock.yaml                      | 288 ++++++++++++++--------------
 2 files changed, 154 insertions(+), 158 deletions(-)

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 1060baf857..0e35b8b62d 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -41,18 +41,18 @@
     "@open-wc/lit-helpers": "0.7.0",
     "@percy/cli": "1.29.1",
     "@percy/cypress": "3.1.2",
-    "@storybook/addon-docs": "8.2.7",
-    "@storybook/addon-essentials": "8.2.7",
-    "@storybook/addon-links": "8.2.7",
-    "@storybook/blocks": "8.2.7",
-    "@storybook/components": "8.2.7",
-    "@storybook/core-events": "8.2.7",
-    "@storybook/manager-api": "8.2.7",
-    "@storybook/preview-api": "8.2.7",
-    "@storybook/theming": "8.2.7",
-    "@storybook/types": "8.2.7",
-    "@storybook/web-components": "8.2.7",
-    "@storybook/web-components-vite": "8.2.7",
+    "@storybook/addon-docs": "8.3.5",
+    "@storybook/addon-essentials": "8.3.5",
+    "@storybook/addon-links": "8.3.5",
+    "@storybook/blocks": "8.3.5",
+    "@storybook/components": "8.3.5",
+    "@storybook/core-events": "8.3.5",
+    "@storybook/manager-api": "8.3.5",
+    "@storybook/preview-api": "8.3.5",
+    "@storybook/theming": "8.3.5",
+    "@storybook/types": "8.3.5",
+    "@storybook/web-components": "8.3.5",
+    "@storybook/web-components-vite": "8.3.5",
     "@swisspost/design-system-components-angular": "workspace:9.0.0-next.1",
     "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.1",
     "@types/css-modules": "1.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30e469b854..6ed4c06294 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -328,41 +328,41 @@ importers:
         specifier: 3.1.2
         version: 3.1.2(cypress@13.13.2)
       '@storybook/addon-docs':
-        specifier: 8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/addon-essentials':
-        specifier: 8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/addon-links':
-        specifier: 8.2.7
-        version: 8.2.7(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/blocks':
-        specifier: 8.2.7
-        version: 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/components':
-        specifier: 8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/core-events':
-        specifier: 8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/manager-api':
-        specifier: 8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/preview-api':
-        specifier: 8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/theming':
-        specifier: 8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/types':
-        specifier: 8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/web-components':
-        specifier: 8.2.7
-        version: 8.2.7(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+        specifier: 8.3.5
+        version: 8.3.5(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/web-components-vite':
-        specifier: 8.2.7
-        version: 8.2.7(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))
+        specifier: 8.3.5
+        version: 8.3.5(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))
       '@swisspost/design-system-components-angular':
         specifier: workspace:9.0.0-next.1
         version: link:../components-angular/dist/components
@@ -3507,82 +3507,82 @@ packages:
     peerDependencies:
       '@stencil/core': '>=2.0.0 || >=3.0.0 || >= 4.0.0-beta.0 || >= 4.0.0'
 
-  '@storybook/addon-actions@8.2.7':
-    resolution: {integrity: sha512-wDnMGGmaogAForkNncfCx8BEDiwxeK8zC0lj8HkRPUuH6vTr81U5RIb12Wa2TnnNKLKMFAtyPSnofHf3OAfzZQ==}
+  '@storybook/addon-actions@8.3.5':
+    resolution: {integrity: sha512-t8D5oo+4XfD+F8091wLa2y/CDd/W2lExCeol5Vm1tp5saO+u6f2/d7iykLhTowWV84Uohi3D073uFeyTAlGebg==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-backgrounds@8.2.7':
-    resolution: {integrity: sha512-kEL3kzYB0qNfpznchlGBnQm4iydyzdTYDPlCFsKUAxfUmJFnpz2H52Sl5lB+qJC/4OREp1Usltag7cUjeuyzMQ==}
+  '@storybook/addon-backgrounds@8.3.5':
+    resolution: {integrity: sha512-IQGjDujuw8+iSqKREdkL8I5E/5CAHZbfOWd4A75PQK2D6qZ0fu/xRwTOQOH4jP6xn/abvfACOdL6A0d5bU90ag==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-controls@8.2.7':
-    resolution: {integrity: sha512-u3MruX0Zh6l1iNkoJdXwx+zPVqpDKypVrC0YdN3qQ3+mtTwqt35rgetYqtOkDnJ8mXKxo8A5giERKPIyzH9iBA==}
+  '@storybook/addon-controls@8.3.5':
+    resolution: {integrity: sha512-2eCVobUUvY1Rq7sp1U8Mx8t44VXwvi0E+hqyrsqOx5TTSC/FUQ+hNAX6GSYUcFIyQQ1ORpKNlUjAAdjxBv1ZHQ==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-docs@8.2.7':
-    resolution: {integrity: sha512-icLbvUWp95WUxq2sY+0xgJ49MaQ2HqtWY9RUJUZswJ/ZPJTCCpIoa6HP/NOB9A90Oec9n8sW+1CdDL4CxfxfZg==}
+  '@storybook/addon-docs@8.3.5':
+    resolution: {integrity: sha512-MOVfo1bY8kXTzbvmWnx3UuSO4WNykFz7Edvb3mxltNyuW7UDRZGuIuSe32ddT/EtLJfurrC9Ja3yBy4KBUGnMA==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-essentials@8.2.7':
-    resolution: {integrity: sha512-5qe7La9B2Z4Y9Fet3C35y8zOZwKgrqduNk8yAUmPRAOwopdo8SGKYpnFTnAtTfTCVk6Y+AZlRfQq0yLUk0Wl3g==}
+  '@storybook/addon-essentials@8.3.5':
+    resolution: {integrity: sha512-hXTtPuN4/IsXjUrkMPAuz1qKAl8DovdXpjQgjQs7jSAVx3kc4BZaGqJ3gaVenKtO8uDchmA92BoQygpkc8eWhw==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-highlight@8.2.7':
-    resolution: {integrity: sha512-YhiLtyJ3NBNV3FQoQo8RFjj59QGSmmeSwRvCjoac6No2DY5vkMW5a8mW6ORr6QYd7ratRNtd3AsPqksZIehRwQ==}
+  '@storybook/addon-highlight@8.3.5':
+    resolution: {integrity: sha512-ku0epul9aReCR3Gv/emwYnsqg3vgux5OmYMjoDcJC7s+LyfweSzLV/f5t9gSHazikJElh5TehtVkWbC4QfbGSw==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-links@8.2.7':
-    resolution: {integrity: sha512-BJdR+vdj7S6Rtx8XqBNQzLsRGH/FYHJ6B6BPWGp0awVx0jNWJnxepINQov8i+GAddUVQGCNG+r4LI3QSD3tNAA==}
+  '@storybook/addon-links@8.3.5':
+    resolution: {integrity: sha512-giRCpn6cfJMYPnVJkojoQDO5ae6098fgY9YgAhwaJej/9dufNcioFdbiyfK1vyzbG6TGeTmJ9ncWCXgWRtzxPQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.2.7
+      storybook: ^8.3.5
     peerDependenciesMeta:
       react:
         optional: true
 
-  '@storybook/addon-measure@8.2.7':
-    resolution: {integrity: sha512-cS5njwlzrgrUjigUKjhbgJMT8bhPmVDK3FwrQqGhw6xYP4cd9/YBJ4RLNPWhOgGJ+EUTz7eFZ/Rkli5mNrhYcQ==}
+  '@storybook/addon-measure@8.3.5':
+    resolution: {integrity: sha512-6GVehgbHhFIFS69xSfRV+12VK0cnuIAtZdp1J3eUCc2ATrcigqVjTM6wzZz6kBuX6O3dcusr7Wg46KtNliqLqg==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-outline@8.2.7':
-    resolution: {integrity: sha512-oFSo3o5eEUSsdGUSPV22pGoJ5lL0PGcqjcee2hyl0Rc60ovsnB1BEGOoaGk7/bmkywMxRZm8D6j85V8HftA/kg==}
+  '@storybook/addon-outline@8.3.5':
+    resolution: {integrity: sha512-dwmK6GzjEnQP9Yo0VnBUQtJkXZlXdfjWyskZ/IlUVc+IFdeeCtIiMyA92oMfHo8eXt0k1g21ZqMaIn7ZltOuHw==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-toolbars@8.2.7':
-    resolution: {integrity: sha512-lEq0/uiogQSxS8pM5AqIexPiG2mudHUxgBiVWSspbTQDUbGBUxB64VYeYERat50N/GyS2iCymlfSkC+OUXaYLQ==}
+  '@storybook/addon-toolbars@8.3.5':
+    resolution: {integrity: sha512-Ml2gc9q8WbteDvmuAZGgBxt5SqWMXzuTkMjlsA8EB53hlkN1w9esX4s8YtBeNqC3HKoUzcdq8uexSBqU8fDbSA==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/addon-viewport@8.2.7':
-    resolution: {integrity: sha512-d4+klwM/duTukNED1WCeBgIMqL5Jvm/iUs2rUc5HI1FGMEDYnoLVR2ztjivQs+6f1cJWuGwWZD/toB5pKHuR/A==}
+  '@storybook/addon-viewport@8.3.5':
+    resolution: {integrity: sha512-FSWydoPiVWFXEittG7O1YgvuaqoU9Vb+qoq9XfP/hvQHHMDcMZvC40JaV8AnJeTXaM7ngIjcn9XDEfGbFfOzXw==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/blocks@8.2.7':
-    resolution: {integrity: sha512-lZB4EzmY4ftgubkf7hmkALEhmfMhRkDRD5QjrgTZLRpdVXPzFUyljgLlTBhv34YTN+ZLYK618/4uSVJBpgoKeQ==}
+  '@storybook/blocks@8.3.5':
+    resolution: {integrity: sha512-8cHTdTywolTHlgwN8I7YH7saWAIjGzV617AwjhJ95AKlC0VtpO1gAFcAgCqr4DU9eMc+LZuvbnaU/RSvA5eCCQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.2.7
+      storybook: ^8.3.5
     peerDependenciesMeta:
       react:
         optional: true
       react-dom:
         optional: true
 
-  '@storybook/builder-vite@8.2.7':
-    resolution: {integrity: sha512-CoEQjsfAQdZeAavfh1sBTMmC453kUFLKHr1zs6MZAlkejxky+U21t1Zb1qEU+IsEr/AlzvJr60pxUNL/dy6PVQ==}
+  '@storybook/builder-vite@8.3.5':
+    resolution: {integrity: sha512-paGX8tEmAeAKFU5Cnwkq3RAi3LFCnmjAxMJikT09jUi6jDpNa0VzH8jbLxKdjsPMAsz0Wv3mrLvL2b8hyxLWAw==}
     peerDependencies:
       '@preact/preset-vite': '*'
-      storybook: ^8.2.7
+      storybook: ^8.3.5
       typescript: '>= 4.3.x'
       vite: ^4.0.0 || ^5.0.0
       vite-plugin-glimmerx: '*'
@@ -3600,23 +3600,23 @@ packages:
   '@storybook/codemod@8.2.7':
     resolution: {integrity: sha512-D2sJcZMUO6Y7DNja4LvdT6uBee4bZbQKB904kEG9Kpr0XF20IHAP9BbkfG8HEFaS0GbJwvGvE03Sg+S1y+vO6Q==}
 
-  '@storybook/components@8.2.7':
-    resolution: {integrity: sha512-FXhnoHl9S+tKSFc62iUG3EWplQP9ojGQaSMhqP4QTus6xmo53oSsPzuTPQilKVHkGxFQW8eGgKKsfHw3G2NT2g==}
+  '@storybook/components@8.3.5':
+    resolution: {integrity: sha512-Rq28YogakD3FO4F8KwAtGpo1g3t4V/gfCLqTQ8B6oQUFoxLqegkWk/DlwCzvoJndXuQJfdSyM6+r1JcA4Nql5A==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/core-events@8.2.7':
-    resolution: {integrity: sha512-w4Gz7ExwCFrr/Z6JTTLj/jLDsiapqq71lGcCTE7fZp4blN/FovB/oOehljAkjyCOCL8Rx3kiSeWIicO+M8o1Fw==}
+  '@storybook/core-events@8.3.5':
+    resolution: {integrity: sha512-tA4ptifvmxDd4n5CYpL2ksEg2YuLr3a9IPvEww+XJWsyx+lTQ5rwbaRyu8CUxJfOsppyz5cf9OOqRcZ0ENcrpQ==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
   '@storybook/core@8.2.7':
     resolution: {integrity: sha512-vgw5MYN9Bq2/ZsObCOEHbBHwi4RpbYCHPFtKkr4kTnWID++FCSiSVd7jY3xPvcNxWqCxOyH6dThpBi+SsB/ZAA==}
 
-  '@storybook/csf-plugin@8.2.7':
-    resolution: {integrity: sha512-rBdplL6xcVJcuq+uM0eidomMQ5BtAlVAejYrOTNiqBk/zVh5JSvchYzYG9n6Fo2PdKLLKdlZ874zhsVuNriNBQ==}
+  '@storybook/csf-plugin@8.3.5':
+    resolution: {integrity: sha512-ODVqNXwJt90hG7QW8I9w/XUyOGlr0l7XltmIJgXwB/2cYDvaGu3JV5Ybg7O0fxPV8uXk7JlRuUD8ZYv5Low6pA==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
   '@storybook/csf@0.0.1':
     resolution: {integrity: sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==}
@@ -3627,52 +3627,52 @@ packages:
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
-  '@storybook/icons@1.2.9':
-    resolution: {integrity: sha512-cOmylsz25SYXaJL/gvTk/dl3pyk7yBFRfeXTsHvTA3dfhoU/LWSq0NKL9nM7WBasJyn6XPSGnLS4RtKXLw5EUg==}
+  '@storybook/icons@1.2.12':
+    resolution: {integrity: sha512-UxgyK5W3/UV4VrI3dl6ajGfHM4aOqMAkFLWe2KibeQudLf6NJpDrDMSHwZj+3iKC4jFU7dkKbbtH2h/al4sW3Q==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@storybook/manager-api@8.2.7':
-    resolution: {integrity: sha512-BXjz6eNl1GyFcMwzRQTIokslcIY71AYblJUscPcy03X93oqI0GjFVa1xuSMwYw/oXWn7SHhKmqtqEG19lvBGRQ==}
+  '@storybook/manager-api@8.3.5':
+    resolution: {integrity: sha512-fEQoKKi7h7pzh2z9RfuzatJxubrsfL/CB99fNXQ0wshMSY/7O4ckd18pK4fzG9ErnCtLAO9qsim4N/4eQC+/8Q==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/preview-api@8.2.7':
-    resolution: {integrity: sha512-lNZBTjZaYNSwBY8dEcDZdkOBvq1/JoVWpuvqDEKvGmp5usTe77xAOwGyncEb96Cx1BbXXkMiDrqbV5G23PFRYA==}
+  '@storybook/preview-api@8.3.5':
+    resolution: {integrity: sha512-VPqpudE8pmjTLvdNJoW/2//nqElDgUOmIn3QxbbCmdZTHDg5tFtxuqwdlNfArF0TxvTSBDIulXt/Q6K56TAfTg==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/react-dom-shim@8.2.7':
-    resolution: {integrity: sha512-9VI+NrC09DAr0QQZsFmU5Fd9eqdJp/1AHK+sm9BOZretGGGJwn22xS7UXhHIiFpfXJQnr3TNcYWRzXFyuaE/Sw==}
+  '@storybook/react-dom-shim@8.3.5':
+    resolution: {integrity: sha512-Hf0UitJ/K0C7ajooooUK/PxOR4ihUWqsC7iCV1Gqth8U37dTeLMbaEO4PBwu0VQ+Ufg0N8BJLWfg7o6G4hrODw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/theming@8.2.7':
-    resolution: {integrity: sha512-+iqm0GfRkshrjjNSOzwl7AD2m+LtJGXJCr93ke1huDK497WUKbX1hbbw51h5E1tEkx0c2wIqUlaqCM+7XMYcpw==}
+  '@storybook/theming@8.3.5':
+    resolution: {integrity: sha512-9HmDDyC691oqfg4RziIM9ElsS2HITaxmH7n/yeUPtuirkPdAQzqOzhvH/Sa0qOhifzs8VjR+Gd/a/ZQ+S38r7w==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/types@8.2.7':
-    resolution: {integrity: sha512-dYPokh7dOVpMo5kT8WQn4X/0ApqZGz8A2o8dLf16LyGNBIeFXYzIv4BvP89BUjmSzEj2J4d1hNuI5dvq5khBRg==}
+  '@storybook/types@8.3.5':
+    resolution: {integrity: sha512-XWK8tCgoTI1QycQiZCYtAijws2JjbbGANuq1olBRZ1BcZWvc1TkNSipqF1TLMkPGiNq+MxrXAKutUoQK459fTg==}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/web-components-vite@8.2.7':
-    resolution: {integrity: sha512-i0at4OwUXp31gUEkSdfF4MLomgWmanpEJyaWtFVneeC55Fz2gFlmggFVIWx2fTQxSV6F07/PFneXYqlwjJAsAA==}
+  '@storybook/web-components-vite@8.3.5':
+    resolution: {integrity: sha512-ypHMCBSX9BE3X6lejMmkgIUibmbpgSAL/+N/B5wJ1BUn7A+VQ2M6TehpAtVk3gQGPyUj8hBpHWHYoUW6oupNPQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
-  '@storybook/web-components@8.2.7':
-    resolution: {integrity: sha512-ndcLJip+oNFqqPp2UkuO6gUVZ+IjYhPhFGB7yeVzWLa/OT/XfAcEVfRWfeNwBGxc7r18sY25oo2d3ykgauYVvA==}
+  '@storybook/web-components@8.3.5':
+    resolution: {integrity: sha512-pZW0r5Q8rHIeKpVwQzSy7iqd4VTelW3R62Bj/mgJtS4E7u5WO353pw6Cpsl0Qlj0fSKHSprfmenTCr1XqAgz/Q==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       lit: ^2.0.0 || ^3.0.0
-      storybook: ^8.2.7
+      storybook: ^8.3.5
 
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
@@ -13914,7 +13914,7 @@ snapshots:
   '@kurbar/storybook-addon-docs-stencil@8.0.0(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       '@storybook/client-logger': 8.1.9
-      '@storybook/manager-api': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/manager-api': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
     transitivePeerDependencies:
       - storybook
 
@@ -14635,7 +14635,7 @@ snapshots:
     dependencies:
       '@stencil/core': 4.19.2
 
-  '@storybook/addon-actions@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-actions@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.7
@@ -14644,28 +14644,28 @@ snapshots:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       uuid: 9.0.0
 
-  '@storybook/addon-backgrounds@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-backgrounds@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-controls@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
+      '@storybook/global': 5.0.0
       dequal: 2.0.3
       lodash: 4.17.21
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-docs@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-docs@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
-      '@babel/core': 7.25.2
       '@mdx-js/react': 3.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@storybook/blocks': 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/csf-plugin': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/blocks': 8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/csf-plugin': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/react-dom-shim': 8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@types/react': 18.3.3
       fs-extra: 11.1.1
       react: 18.3.1
@@ -14674,31 +14674,27 @@ snapshots:
       rehype-slug: 6.0.0
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - supports-color
 
-  '@storybook/addon-essentials@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
-    dependencies:
-      '@storybook/addon-actions': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/addon-backgrounds': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/addon-controls': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/addon-docs': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/addon-highlight': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/addon-measure': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/addon-outline': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/addon-toolbars': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/addon-viewport': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+  '@storybook/addon-essentials@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+    dependencies:
+      '@storybook/addon-actions': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/addon-backgrounds': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/addon-controls': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/addon-docs': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/addon-highlight': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/addon-measure': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/addon-outline': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/addon-toolbars': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/addon-viewport': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - supports-color
 
-  '@storybook/addon-highlight@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-highlight@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       '@storybook/global': 5.0.0
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/addon-links@8.2.7(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-links@8.3.5(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/global': 5.0.0
@@ -14707,32 +14703,32 @@ snapshots:
     optionalDependencies:
       react: 18.3.1
 
-  '@storybook/addon-measure@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-measure@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       '@storybook/global': 5.0.0
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-outline@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-outline@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       '@storybook/global': 5.0.0
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-toolbars@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-toolbars@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/addon-viewport@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/addon-viewport@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       memoizerific: 1.11.3
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/blocks@8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/blocks@8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/global': 5.0.0
-      '@storybook/icons': 1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/icons': 1.2.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/lodash': 4.14.194
       color-convert: 2.0.1
       dequal: 2.0.3
@@ -14749,9 +14745,9 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))':
+  '@storybook/builder-vite@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))':
     dependencies:
-      '@storybook/csf-plugin': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/csf-plugin': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@types/find-cache-dir': 3.2.1
       browser-assert: 1.2.1
       es-module-lexer: 1.5.3
@@ -14791,11 +14787,11 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/components@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/components@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/core-events@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/core-events@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
@@ -14817,7 +14813,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/csf-plugin@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       unplugin: 1.4.0
@@ -14832,37 +14828,37 @@ snapshots:
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/icons@1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@storybook/icons@1.2.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/manager-api@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/manager-api@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/preview-api@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/preview-api@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/react-dom-shim@8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/react-dom-shim@8.3.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/theming@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/theming@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/types@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/types@8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
 
-  '@storybook/web-components-vite@8.2.7(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))':
+  '@storybook/web-components-vite@8.3.5(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))':
     dependencies:
-      '@storybook/builder-vite': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))
-      '@storybook/web-components': 8.2.7(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/builder-vite': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))
+      '@storybook/web-components': 8.3.5(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       magic-string: 0.30.10
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
     transitivePeerDependencies:
@@ -14873,13 +14869,13 @@ snapshots:
       - vite
       - vite-plugin-glimmerx
 
-  '@storybook/web-components@8.2.7(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
+  '@storybook/web-components@8.3.5(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))':
     dependencies:
-      '@storybook/components': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/components': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/preview-api': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
-      '@storybook/theming': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/manager-api': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/preview-api': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
+      '@storybook/theming': 8.3.5(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))
       lit: 3.1.4
       storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2))
       tiny-invariant: 1.3.3

From e4c188f9c9faab2ad52a2419f564488dfe0b455f Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Thu, 10 Oct 2024 14:34:22 +0200
Subject: [PATCH 07/40] chore(documentation): improve storybook contrast on
 mode buttons (#3715)

---
 packages/documentation/.storybook/addons/addons.scss |  4 ++++
 .../addons/styles-switcher/StylesSwitcher.tsx        | 12 +++++++++---
 .../addons/version-switcher/VersionSwitcher.tsx      |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/documentation/.storybook/addons/addons.scss b/packages/documentation/.storybook/addons/addons.scss
index eb90a8a8dc..f6861fbce9 100644
--- a/packages/documentation/.storybook/addons/addons.scss
+++ b/packages/documentation/.storybook/addons/addons.scss
@@ -1,5 +1,9 @@
 @use '@swisspost/design-system-styles/core' as post;
 
+.addon-label {
+  color: post.$body-color !important;
+}
+
 .addon-dropdown {
   min-width: 12rem;
   display: flex;
diff --git a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
index 722fd13277..adebf7a66d 100644
--- a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
+++ b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
@@ -164,7 +164,9 @@ function StylesSwitcher() {
           </div>
         }
       >
-        <IconButton size="medium">Theme: {currentTheme}</IconButton>
+        <IconButton className="addon-label" size="medium">
+          Theme: {currentTheme}
+        </IconButton>
       </WithTooltip>
 
       {/* Channel dropdown */}
@@ -186,7 +188,9 @@ function StylesSwitcher() {
           </div>
         }
       >
-        <IconButton size="medium">Chanel: {currentChannel}</IconButton>
+        <IconButton className="addon-label" size="medium">
+          Chanel: {currentChannel}
+        </IconButton>
       </WithTooltip>
 
       {/* Mode dropdown */}
@@ -208,7 +212,9 @@ function StylesSwitcher() {
           </div>
         }
       >
-        <IconButton size="medium">Mode: {currentMode}</IconButton>
+        <IconButton className="addon-label" size="medium">
+          Mode: {currentMode}
+        </IconButton>
       </WithTooltip>
     </>
   );
diff --git a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx
index ad07d1df0b..bcd0fd0058 100644
--- a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx
+++ b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx
@@ -102,7 +102,7 @@ function VersionSwitcher() {
         </>
       )}
     >
-      <IconButton placeholder="Versions">
+      <IconButton placeholder="Versions" className="addon-label">
         v{CURRENT_MINOR_VERSION}
         <post-icon name="2052"></post-icon>
       </IconButton>

From 585990b53ca0c712d40c165a38f8f871b439480f Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Fri, 11 Oct 2024 08:01:25 +0200
Subject: [PATCH 08/40] chore(components, documentation): add e2e tests for
 nested accordions (#3634)

---
 .../components/cypress/e2e/accordion.cy.ts    | 32 +++++++++++++++++--
 .../components/accordion/accordion.stories.ts |  1 +
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/components/cypress/e2e/accordion.cy.ts b/packages/components/cypress/e2e/accordion.cy.ts
index 23a6a8a4de..6f97c9ff05 100644
--- a/packages/components/cypress/e2e/accordion.cy.ts
+++ b/packages/components/cypress/e2e/accordion.cy.ts
@@ -48,7 +48,33 @@ describe('accordion', () => {
   describe('nested', () => {
     beforeEach(() => {
       cy.getComponent('accordion', ACCORDION_ID, 'nested');
-      cy.get('@accordion').find('post-accordion post-accordion-item').as('nestedCollapsibles');
+      cy.get('@accordion').find('post-accordion-item').as('collapsibles');
+    });
+
+    it('should show the first nested element of the first element', () => {
+      cy.get('@collapsibles').eq(1).click();
+      cy.get('@collapsibles').eq(1).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should not show the first nested element as expanded after clicking the last nested element', () => {
+      cy.get('@collapsibles').eq(2).click();
+      cy.get('@collapsibles').eq(1).shadow().find('post-collapsible').should('be.hidden');
+      cy.get('@collapsibles').eq(2).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should show the first nested element wrapped in a div in the second parent accordion element', () => {
+      cy.get('@collapsibles').eq(4).click();
+      cy.get('@collapsibles').eq(5).click();
+      cy.get('@collapsibles').eq(4).shadow().find('post-collapsible').should('be.visible');
+      cy.get('@collapsibles').eq(5).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should not show the first nested element wrapped in a div as expanded after clicking the last nested element', () => {
+      cy.get('@collapsibles').eq(4).click();
+      cy.get('@collapsibles').eq(7).click();
+      cy.get('@collapsibles').eq(5).shadow().find('post-collapsible').should('be.hidden');
+      cy.get('@collapsibles').eq(4).shadow().find('post-collapsible').should('be.visible');
+      cy.get('@collapsibles').eq(7).shadow().find('post-collapsible').should('be.visible');
     });
 
     it('should not propagate "postToggle" event from nested post-accordion', () => {
@@ -56,8 +82,8 @@ describe('accordion', () => {
         const EventHandlerMock = cy.spy();
         Cypress.$(document.querySelector('post-accordion')).on('postToggle', EventHandlerMock);
 
-        cy.get('@nestedCollapsibles')
-          .last()
+        cy.get('@collapsibles')
+          .eq(3)
           .click()
           .then(() => {
             expect(EventHandlerMock).to.not.be.called;
diff --git a/packages/documentation/src/stories/components/accordion/accordion.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
index 8ada6bd988..ef304d6043 100644
--- a/packages/documentation/src/stories/components/accordion/accordion.stories.ts
+++ b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
@@ -113,6 +113,7 @@ export const Nested: Story = {
       <post-accordion-item>
         ${getAccordionItemContent(mainAccordionIndex + 1, args.headingLevel)}
         ${mainAccordionIndex === 0 ? getNestedAccordion() : nothing}
+        <div>${mainAccordionIndex === 1 ? getNestedAccordion() : nothing}</div>
       </post-accordion-item>
     `;
   }),

From c9be0cb07e649112183b222935e076157698124e Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Fri, 11 Oct 2024 08:21:22 +0200
Subject: [PATCH 09/40] feat: foundations typography legend (#3614)

Co-authored-by: karimim <muhammad.karimi@post.ch>
Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .changeset/beige-jobs-do.md                   |  6 +++
 .../stories/foundation/legend/legend.docs.mdx | 17 ++++++
 .../foundation/legend/legend.stories.ts       | 53 +++++++++++++++++++
 packages/styles/src/elements/_index.scss      |  1 +
 .../styles/src/elements/fieldset-legend.scss  | 18 +++++++
 packages/styles/src/elements/reset.scss       |  9 ++++
 6 files changed, 104 insertions(+)
 create mode 100644 .changeset/beige-jobs-do.md
 create mode 100644 packages/documentation/src/stories/foundation/legend/legend.docs.mdx
 create mode 100644 packages/documentation/src/stories/foundation/legend/legend.stories.ts
 create mode 100644 packages/styles/src/elements/fieldset-legend.scss

diff --git a/.changeset/beige-jobs-do.md b/.changeset/beige-jobs-do.md
new file mode 100644
index 0000000000..9187fc9ab7
--- /dev/null
+++ b/.changeset/beige-jobs-do.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated and tokenized styles for the legend element.
diff --git a/packages/documentation/src/stories/foundation/legend/legend.docs.mdx b/packages/documentation/src/stories/foundation/legend/legend.docs.mdx
new file mode 100644
index 0000000000..a43e1bab67
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/legend/legend.docs.mdx
@@ -0,0 +1,17 @@
+import { Meta, Controls, Canvas } from '@storybook/blocks';
+import * as LegendStories from './legend.stories';
+
+<Meta of={LegendStories} />
+
+<div className="docs-title">
+  # Legend
+  <nav>
+    <link-design of={JSON.stringify(LegendStories)}></link-design>
+  </nav>
+</div>
+
+A legend is in general the title of a group of related (interactive) elements in a form. Not to be confused with caption.
+
+<Canvas of={LegendStories.Default} sourceState="shown" />
+
+<Controls of={LegendStories.Default} />
diff --git a/packages/documentation/src/stories/foundation/legend/legend.stories.ts b/packages/documentation/src/stories/foundation/legend/legend.stories.ts
new file mode 100644
index 0000000000..061d28f6dd
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/legend/legend.stories.ts
@@ -0,0 +1,53 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '61faccd2-de2c-48f0-9a06-c051a56580ef',
+  title: 'Foundations/Typography/Legend',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=1495-27801&node-type=instance&m=dev',
+    },
+  },
+  args: {
+    type: 'small',
+  },
+  argTypes: {
+    type: {
+      name: 'Type',
+      description:
+        'Large: Used for the title of a section in a form. Small: Used for the title of group of selection options.',
+      control: {
+        type: 'radio',
+        labels: {
+          large: 'Large',
+          small: 'Small',
+        },
+      },
+      options: ['large', 'small'],
+      table: {
+        category: 'General',
+        type: {
+          summary: 'HTML class attribute',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args: Args) => html`
+    <fieldset>
+      <legend ${args.type !== 'small' && args.type ? unsafeStatic(`class=${args.type}`) : ''}>
+        Default legend
+      </legend>
+    </fieldset>
+  `,
+};
diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
index 1cebd63b2c..d2c8cd0147 100644
--- a/packages/styles/src/elements/_index.scss
+++ b/packages/styles/src/elements/_index.scss
@@ -1,3 +1,4 @@
 @use 'reset';
 @use 'body';
 @use 'heading';
+@use 'fieldset-legend';
diff --git a/packages/styles/src/elements/fieldset-legend.scss b/packages/styles/src/elements/fieldset-legend.scss
new file mode 100644
index 0000000000..c050142b93
--- /dev/null
+++ b/packages/styles/src/elements/fieldset-legend.scss
@@ -0,0 +1,18 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-legend;
+
+legend {
+  font-weight: tokens.get('legend', 'font-weight');
+  line-height: tokens.get('legend', 'line-height');
+  width: 100%;
+
+  &.large {
+    font-size: tokens.get('legend', 'large-font-size');
+    margin-block-start: tokens.get('legend', 'large-margin-block-start');
+    margin-block-end: tokens.get('legend', 'large-margin-block-end');
+    padding-block-end: tokens.get('legend', 'large-padding-block-end');
+    border-bottom: tokens.get('legend', 'large-border-bottom');
+  }
+}
diff --git a/packages/styles/src/elements/reset.scss b/packages/styles/src/elements/reset.scss
index 2448e4c84f..7df818bed2 100644
--- a/packages/styles/src/elements/reset.scss
+++ b/packages/styles/src/elements/reset.scss
@@ -142,3 +142,12 @@ th {
   border-style: solid;
   border-width: 0;
 }
+
+fieldset,
+legend {
+  padding: 0;
+}
+
+fieldset {
+  border: 0;
+}

From 9b35d70bb4a28b6254182778c0c39eb9e21f6b55 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Fri, 11 Oct 2024 08:29:49 +0200
Subject: [PATCH 10/40] chore(documentation,styles): create display utility 
 (#3661)

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .../src/components/post-tooltip/readme.md     |  2 +-
 .../snapshots/utilities/display.snapshot.ts   |  7 +++
 .../utilities/display/display.docs.mdx        | 48 +++++++++++++++++++
 .../display/display.snapshot.stories.ts       | 31 ++++++++++++
 .../utilities/display/display.stories.ts      | 20 ++++++++
 .../utilities/display/display.styles.scss     | 11 +++++
 .../src/themes/bootstrap/_utilities.scss      |  2 +
 packages/styles/src/utilities/_variables.scss |  9 +++-
 8 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 packages/documentation/cypress/snapshots/utilities/display.snapshot.ts
 create mode 100644 packages/documentation/src/stories/utilities/display/display.docs.mdx
 create mode 100644 packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/display/display.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/display/display.styles.scss

diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
index 4fd194c2fa..46b675438a 100644
--- a/packages/components/src/components/post-tooltip/readme.md
+++ b/packages/components/src/components/post-tooltip/readme.md
@@ -76,4 +76,4 @@ graph TD;
 
 ----------------------------------------------
 
-*Built with [StencilJS](https://stenciljs.com/)*
+*Built with [StencilJS](https://stenciljs.com/)*
\ No newline at end of file
diff --git a/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts
new file mode 100644
index 0000000000..bc776e5392
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/display.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Display', () => {
+  it('display', () => {
+    cy.visit('/iframe.html?id=snapshots--display');
+    cy.get('.display-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Display', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/utilities/display/display.docs.mdx b/packages/documentation/src/stories/utilities/display/display.docs.mdx
new file mode 100644
index 0000000000..9d3f04c309
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.docs.mdx
@@ -0,0 +1,48 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as DisplayStories from './display.stories';
+import { breakpoints, firstBreakpoint } from '../spacing/spacing.docs.mdx';
+import { forEach } from '@/utils/react';
+
+export const displayOptions = [
+  'none',
+  'inline',
+  'inline-block',
+  'block',
+  'grid',
+  'inline-grid',
+  'table',
+  'table-cell',
+  'table-row',
+  'flex',
+  'inline-flex',
+];
+
+<Meta of={DisplayStories} />
+
+# Display
+
+<div className="lead">
+  Use the display utility classes to set the display of an element to any possible display CSS
+  value.
+</div>
+
+The naming convention for display utilities follows this pattern:
+
+- For all breakpoints (<code>{firstBreakpoint}</code> and up): `d-{display}`
+- Starting from a specific breakpoint ({breakpoints.map(([b, isLast]) => (<span key={b}><code>{b}</code>{isLast ? ', ' : ''}</span>))}): `d-{breakpoint}-{display}`
+
+### Available display values
+
+The available display utilities values are the following:
+
+<ul>
+  {forEach(displayOptions, function ({ value }) {
+    return <li>{value}</li>;
+  })}
+</ul>
+
+### Usage
+
+To set a display on an element, simply add a `d-{display}` class to it.
+
+<Canvas of={DisplayStories.Default} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts b/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts
new file mode 100644
index 0000000000..6600a7ed1c
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts
@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './display.stories';
+import { displayOptions } from './display.docs.mdx';
+import './display.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Display: Story = {
+  render: () => {
+    return html`
+      <div class="display-example">
+        ${displayOptions.map(
+          display => html`
+            <div class="display-container p-8">
+              <div class="d-${display} p-8">${display}</div>
+              <div class="d-${display} p-8">${display}</div>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/display/display.stories.ts b/packages/documentation/src/stories/utilities/display/display.stories.ts
new file mode 100644
index 0000000000..91b3a91143
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.stories.ts
@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '1bb8a4a7-8205-4dcb-a41c-8f7ab1de1c99',
+  title: 'Utilities/Display',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () =>
+    html`
+      <div class="d-inline bg-yellow p-8">Content</div>
+      <div class="d-inline bg-black p-8">Content</div>
+    `,
+};
diff --git a/packages/documentation/src/stories/utilities/display/display.styles.scss b/packages/documentation/src/stories/utilities/display/display.styles.scss
new file mode 100644
index 0000000000..eb981a09ce
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/display/display.styles.scss
@@ -0,0 +1,11 @@
+@use 'sass:color';
+@use '@swisspost/design-system-styles/core' as post;
+
+.display-container {
+  border: post.$border-width solid post.$border-color;
+
+  > * {
+    border: post.$border-width solid post.$border-color;
+    background-color: color.adjust(post.$border-color, $lightness: 15%);
+  }
+}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 01cb191d0c..2c21df1b4b 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -26,4 +26,6 @@ $utilities: map.remove($utilities, 'gap');
 $utilities: map.remove($utilities, 'row-gap');
 $utilities: map.remove($utilities, 'column-gap');
 
+$utilities: map.remove($utilities, 'display');
+
 @import 'bootstrap/scss/utilities/api';
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index 721d5efe42..ddeb97c37a 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -126,6 +126,13 @@ $utilities: (
     class: column-gap,
     values: from-tokens('spacing', 'gap'),
   ),
-
+  'display': (
+    responsive: true,
+    print: true,
+    property: display,
+    class: d,
+    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
+      none,
+  ),
   // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
 );

From 4779bb7104c1aff2be012a8f206669121813bdaa Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Fri, 11 Oct 2024 10:43:24 +0200
Subject: [PATCH 11/40] chore: use layers for token entry files (#3720)

Wrapping tokens into a layer allows consuming projects to easily define
the cascade order of the tokens, no matter at what position they get
imported.
---
 .changeset/lovely-mirrors-travel.md           |  5 +++++
 packages/styles/src/post-tokens-external.scss | 12 ++++++++----
 packages/styles/src/post-tokens-internal.scss | 12 ++++++++----
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/lovely-mirrors-travel.md

diff --git a/.changeset/lovely-mirrors-travel.md b/.changeset/lovely-mirrors-travel.md
new file mode 100644
index 0000000000..a273515f9f
--- /dev/null
+++ b/.changeset/lovely-mirrors-travel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Wrapped new token only entry files in a CSS layer called 'design-system'. The two files affected are 'post-tokens-external.scss' and 'post-tokens-internal.scss' as well as their compiled CSS counterparts.
diff --git a/packages/styles/src/post-tokens-external.scss b/packages/styles/src/post-tokens-external.scss
index 83413253b6..7e24bd151a 100644
--- a/packages/styles/src/post-tokens-external.scss
+++ b/packages/styles/src/post-tokens-external.scss
@@ -1,4 +1,8 @@
-@use './tokens/modes';
-@use './tokens/device';
-@use './tokens/external';
-@use './tokens/post-theme';
+@use 'sass:meta';
+
+@layer design-system {
+  @include meta.load-css('./tokens/modes');
+  @include meta.load-css('./tokens/device');
+  @include meta.load-css('./tokens/external');
+  @include meta.load-css('./tokens/post-theme');
+}
diff --git a/packages/styles/src/post-tokens-internal.scss b/packages/styles/src/post-tokens-internal.scss
index f025362bc0..9e60d28e0f 100644
--- a/packages/styles/src/post-tokens-internal.scss
+++ b/packages/styles/src/post-tokens-internal.scss
@@ -1,4 +1,8 @@
-@use './tokens/modes';
-@use './tokens/device';
-@use './tokens/internal';
-@use './tokens/post-theme';
+@use 'sass:meta';
+
+@layer design-system {
+  @include meta.load-css('./tokens/modes');
+  @include meta.load-css('./tokens/device');
+  @include meta.load-css('./tokens/internal');
+  @include meta.load-css('./tokens/post-theme');
+}

From ff6d8cd662121668e107ad8ed51de671256fa922 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Fri, 11 Oct 2024 11:24:17 +0200
Subject: [PATCH 12/40] chore: release react components (#3718)

This PR sets the react components package to public, which will release
it to npm under the version 9.0.0-next.X.
---
 .changeset/shaggy-experts-give.md      |  5 +++++
 packages/components-react/package.json | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/shaggy-experts-give.md

diff --git a/.changeset/shaggy-experts-give.md b/.changeset/shaggy-experts-give.md
new file mode 100644
index 0000000000..5fc5c61837
--- /dev/null
+++ b/.changeset/shaggy-experts-give.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components-react': patch
+---
+
+Initial release!
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 9200c39be8..387f23f3a0 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,15 +1,24 @@
 {
   "name": "@swisspost/design-system-components-react",
   "version": "9.0.0-next.1",
+  "description": "Design System React Components for easy integration with the React ecosystem",
+  "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/swisspost/design-system.git"
+  },
+  "homepage": "https://design-system.post.ch",
+  "bugs": {
+    "url": "https://github.com/swisspost/design-system/issues"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "private": true,
   "files": [
     "dist"
   ],
   "publishConfig": {
-    "access": "restricted",
+    "access": "public",
     "linkDirectory": true
   },
   "scripts": {

From a4dc71b03a4ee10f910e8b01fa7a29b57c5d7bb1 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Fri, 11 Oct 2024 11:24:42 +0200
Subject: [PATCH 13/40] fix(styles): compile element output to CSS (#3709)

All files without leading underscore are now compiled on styles:build.
This will also fix future issues in this direction but requires stricter
usage of the sass partial file naming convention with leading
underscores.
---
 .changeset/three-lies-do.md                   |  5 ++++
 packages/styles/gulpfile.js                   | 24 +----------------
 packages/styles/package.json                  |  2 +-
 .../{index.scss => _index.scss}               |  0
 .../portal/{index.scss => _index.scss}        |  0
 .../src/utilities/{index.scss => _index.scss} |  0
 packages/tokens/_build/methods.js             |  4 +--
 packages/tokens/package.json                  |  4 ++-
 pnpm-lock.yaml                                | 27 ++++++++++---------
 9 files changed, 27 insertions(+), 39 deletions(-)
 create mode 100644 .changeset/three-lies-do.md
 rename packages/styles/src/components/intranet-header/{index.scss => _index.scss} (100%)
 rename packages/styles/src/layouts/portal/{index.scss => _index.scss} (100%)
 rename packages/styles/src/utilities/{index.scss => _index.scss} (100%)

diff --git a/.changeset/three-lies-do.md b/.changeset/three-lies-do.md
new file mode 100644
index 0000000000..ddde7de2eb
--- /dev/null
+++ b/.changeset/three-lies-do.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed an issue with element styles that were not compiled to the output as CSS.
diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js
index 7cc36272d1..62cb06a352 100644
--- a/packages/styles/gulpfile.js
+++ b/packages/styles/gulpfile.js
@@ -115,7 +115,7 @@ gulp.task('transform-package-json', done => {
  */
 gulp.task('sass', () => {
   return gulp
-    .src('./src/*.scss')
+    .src('./src/**/*.scss')
     .pipe(
       gulpSass({
         outputStyle: 'compressed',
@@ -128,27 +128,6 @@ gulp.task('sass', () => {
     .pipe(gulp.dest(options.outputDir));
 });
 
-/**
- * Compile components to Css
- *  - Compile
- *  - Autoprefix
- *  - Also puts compiled Css into tsc-out
- */
-gulp.task('build-components', () => {
-  return gulp
-    .src('./src/components/*.scss')
-    .pipe(
-      gulpSass({
-        outputStyle: 'compressed',
-        includePaths: options.includePaths,
-        quietDeps: true,
-        silenceDeprecations: ['mixed-decls'],
-      }),
-    )
-    .pipe(gulpPostCss([autoprefixer()]))
-    .pipe(gulp.dest(`${options.outputDir}/components`));
-});
-
 /**
  * Generate uncompressed sass output
  */
@@ -201,6 +180,5 @@ exports.default = gulp.task(
   gulp.parallel(
     gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'),
     gulp.series('temporarily-copy-token-files', 'sass'),
-    gulp.series('build-components'),
   ),
 );
diff --git a/packages/styles/package.json b/packages/styles/package.json
index b2c7e9f007..0b21ec6796 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -22,7 +22,7 @@
     "play": "vite --open",
     "build": "pnpm clean && gulp build",
     "unit": "gulp sass:tests",
-    "clean": "rimraf out-tsc dist",
+    "clean": "rimraf out-tsc dist src/tokens/temp",
     "format": "prettier src/**/*.scss --write",
     "lint": "stylelint src/**/*.scss !src/tokens/temp/**",
     "lint:fix": "stylelint src/**/*.scss !src/tokens/temp/** --fix"
diff --git a/packages/styles/src/components/intranet-header/index.scss b/packages/styles/src/components/intranet-header/_index.scss
similarity index 100%
rename from packages/styles/src/components/intranet-header/index.scss
rename to packages/styles/src/components/intranet-header/_index.scss
diff --git a/packages/styles/src/layouts/portal/index.scss b/packages/styles/src/layouts/portal/_index.scss
similarity index 100%
rename from packages/styles/src/layouts/portal/index.scss
rename to packages/styles/src/layouts/portal/_index.scss
diff --git a/packages/styles/src/utilities/index.scss b/packages/styles/src/utilities/_index.scss
similarity index 100%
rename from packages/styles/src/utilities/index.scss
rename to packages/styles/src/utilities/_index.scss
diff --git a/packages/tokens/_build/methods.js b/packages/tokens/_build/methods.js
index 22e7ab9b46..46db33c2e0 100644
--- a/packages/tokens/_build/methods.js
+++ b/packages/tokens/_build/methods.js
@@ -232,7 +232,7 @@ export async function createOutputFiles() {
             },
             files: [
               {
-                destination: `${name}.scss`.toLowerCase(),
+                destination: `_${name}.scss`.toLowerCase(),
                 format: 'swisspost/scss-format',
                 filter: 'swisspost/tokenset-filter',
                 options: {
@@ -268,7 +268,7 @@ export async function createOutputFiles() {
       .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`, `${getFileHeader()}${imports}\n`);
   }
 
   /**
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 97fb533390..c7c338d99c 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -15,7 +15,8 @@
   },
   "type": "module",
   "scripts": {
-    "build": "node ./build.js",
+    "build": "pnpm clean && node ./build.js",
+    "clean": "rimraf dist",
     "build:verbose": "node ./build.js --verbosity=verbose"
   },
   "keywords": [
@@ -33,6 +34,7 @@
   },
   "devDependencies": {
     "@tokens-studio/sd-transforms": "1.2.2",
+    "rimraf": "6.0.1",
     "style-dictionary": "4.0.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6ed4c06294..3d38385ef2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1054,6 +1054,9 @@ importers:
       '@tokens-studio/sd-transforms':
         specifier: 1.2.2
         version: 1.2.2(style-dictionary@4.0.1)
+      rimraf:
+        specifier: 6.0.1
+        version: 6.0.1
       style-dictionary:
         specifier: 4.0.1
         version: 4.0.1
@@ -15920,6 +15923,14 @@ snapshots:
 
   axe-core@4.7.0: {}
 
+  axios@1.6.2:
+    dependencies:
+      follow-redirects: 1.15.6(debug@4.3.7)
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   axios@1.6.2(debug@4.3.6):
     dependencies:
       follow-redirects: 1.15.6(debug@4.3.6)
@@ -18613,7 +18624,7 @@ snapshots:
   http-proxy-middleware@2.0.6(@types/express@4.17.21):
     dependencies:
       '@types/http-proxy': 1.17.11
-      http-proxy: 1.18.1
+      http-proxy: 1.18.1(debug@4.3.7)
       is-glob: 4.0.3
       is-plain-obj: 3.0.0
       micromatch: 4.0.8
@@ -18633,14 +18644,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  http-proxy@1.18.1:
-    dependencies:
-      eventemitter3: 4.0.7
-      follow-redirects: 1.15.6(debug@4.3.6)
-      requires-port: 1.0.0
-    transitivePeerDependencies:
-      - debug
-
   http-proxy@1.18.1(debug@4.3.7):
     dependencies:
       eventemitter3: 4.0.7
@@ -18656,7 +18659,7 @@ snapshots:
       corser: 2.0.1
       he: 1.2.0
       html-encoding-sniffer: 3.0.0
-      http-proxy: 1.18.1
+      http-proxy: 1.18.1(debug@4.3.7)
       mime: 1.6.0
       minimist: 1.2.8
       opener: 1.5.2
@@ -19708,7 +19711,7 @@ snapshots:
       dom-serialize: 2.2.1
       glob: 7.2.3
       graceful-fs: 4.2.11
-      http-proxy: 1.18.1
+      http-proxy: 1.18.1(debug@4.3.7)
       isbinaryfile: 4.0.10
       lodash: 4.17.21
       log4js: 6.9.1
@@ -20785,7 +20788,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.6.2(debug@4.3.6)
+      axios: 1.6.2
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1

From bef4fb672b3ab5d484ff959305544a1ffbf43c94 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Fri, 11 Oct 2024 11:52:24 +0200
Subject: [PATCH 14/40] chore: update lockfile (#3724)

---
 .../src/components/post-tooltip/readme.md     |  2 +-
 pnpm-lock.yaml                                | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
index 46b675438a..4fd194c2fa 100644
--- a/packages/components/src/components/post-tooltip/readme.md
+++ b/packages/components/src/components/post-tooltip/readme.md
@@ -76,4 +76,4 @@ graph TD;
 
 ----------------------------------------------
 
-*Built with [StencilJS](https://stenciljs.com/)*
\ No newline at end of file
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3d38385ef2..acc7b160af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15923,14 +15923,6 @@ snapshots:
 
   axe-core@4.7.0: {}
 
-  axios@1.6.2:
-    dependencies:
-      follow-redirects: 1.15.6(debug@4.3.7)
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
   axios@1.6.2(debug@4.3.6):
     dependencies:
       follow-redirects: 1.15.6(debug@4.3.6)
@@ -18624,7 +18616,7 @@ snapshots:
   http-proxy-middleware@2.0.6(@types/express@4.17.21):
     dependencies:
       '@types/http-proxy': 1.17.11
-      http-proxy: 1.18.1(debug@4.3.7)
+      http-proxy: 1.18.1
       is-glob: 4.0.3
       is-plain-obj: 3.0.0
       micromatch: 4.0.8
@@ -18644,6 +18636,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  http-proxy@1.18.1:
+    dependencies:
+      eventemitter3: 4.0.7
+      follow-redirects: 1.15.6(debug@4.3.6)
+      requires-port: 1.0.0
+    transitivePeerDependencies:
+      - debug
+
   http-proxy@1.18.1(debug@4.3.7):
     dependencies:
       eventemitter3: 4.0.7
@@ -18659,7 +18659,7 @@ snapshots:
       corser: 2.0.1
       he: 1.2.0
       html-encoding-sniffer: 3.0.0
-      http-proxy: 1.18.1(debug@4.3.7)
+      http-proxy: 1.18.1
       mime: 1.6.0
       minimist: 1.2.8
       opener: 1.5.2
@@ -19711,7 +19711,7 @@ snapshots:
       dom-serialize: 2.2.1
       glob: 7.2.3
       graceful-fs: 4.2.11
-      http-proxy: 1.18.1(debug@4.3.7)
+      http-proxy: 1.18.1
       isbinaryfile: 4.0.10
       lodash: 4.17.21
       log4js: 6.9.1
@@ -20788,7 +20788,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.6.2
+      axios: 1.6.2(debug@4.3.6)
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1

From ee48732571435cd278d3a817c718f4bc9a69addd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Fri, 11 Oct 2024 13:19:10 +0200
Subject: [PATCH 15/40] chore(intranet-header): fix start script (#3712)

---
 .../intranet-header-workspace/package.json    |   8 +-
 pnpm-lock.yaml                                | 249 ++++++++++++++++--
 2 files changed, 235 insertions(+), 22 deletions(-)

diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
index e243a47461..783f2a1c83 100644
--- a/packages/intranet-header-workspace/package.json
+++ b/packages/intranet-header-workspace/package.json
@@ -5,7 +5,9 @@
   "private": true,
   "scripts": {
     "clean": "rimraf dist",
-    "start": "ng serve --port 9320",
+    "start": "npm-run-all --parallel --print-label start:**",
+    "start:lib": "rimraf dist/intranet-header && ng build intranet-header --watch",
+    "start:app": "wait-on dist/intranet-header && ng serve --port 9320",
     "build": "ng build intranet-header",
     "lint": "ng lint"
   },
@@ -47,8 +49,10 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
     "ng-packagr": "18.1.0",
+    "npm-run-all": "4.1.5",
     "rimraf": "6.0.1",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "wait-on": "8.0.1"
   },
   "keywords": [
     "components",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acc7b160af..22d8b27299 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -167,7 +167,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
+        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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-eslint/builder':
         specifier: 18.2.0
         version: 18.2.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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
+        version: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
       typescript:
         specifier: 5.5.4
         version: 5.5.4
@@ -670,7 +670,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
+        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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-eslint/builder':
         specifier: 18.2.0
         version: 18.2.0(eslint@8.57.0)(typescript@5.5.4)
@@ -724,13 +724,19 @@ 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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
+        version: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
+      npm-run-all:
+        specifier: 4.1.5
+        version: 4.1.5
       rimraf:
         specifier: 6.0.1
         version: 6.0.1
       typescript:
         specifier: 5.5.4
         version: 5.5.4
+      wait-on:
+        specifier: 8.0.1
+        version: 8.0.1
 
   packages/intranet-header-workspace/projects/intranet-header:
     dependencies:
@@ -980,7 +986,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
+        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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/cli':
         specifier: 18.1.3
         version: 18.1.3(chokidar@3.6.0)
@@ -1010,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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
+        version: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)
       npm-run-all2:
         specifier: 6.2.2
         version: 6.2.2
@@ -3427,6 +3433,9 @@ packages:
   '@sideway/address@4.1.4':
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
 
+  '@sideway/address@4.1.5':
+    resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==}
+
   '@sideway/formula@3.0.1':
     resolution: {integrity: sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==}
 
@@ -4520,6 +4529,9 @@ packages:
   axios@1.6.2:
     resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==}
 
+  axios@1.7.7:
+    resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==}
+
   axobject-query@3.2.1:
     resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
 
@@ -5103,6 +5115,10 @@ packages:
   cross-spawn@5.1.0:
     resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
 
+  cross-spawn@6.0.5:
+    resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
+    engines: {node: '>=4.8'}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -6539,6 +6555,9 @@ packages:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
 
+  hosted-git-info@2.8.9:
+    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+
   hosted-git-info@7.0.1:
     resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -7299,6 +7318,9 @@ packages:
   joi@17.11.0:
     resolution: {integrity: sha512-NgB+lZLNoqISVy1rZocE9PZI36bL/77ie924Ri43yEvi9GUUMPeyVIr8KdFTMUlby1p0PBYMk9spIxEUQYqrJQ==}
 
+  joi@17.13.3:
+    resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
+
   jquery@3.7.1:
     resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
 
@@ -7355,6 +7377,9 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  json-parse-better-errors@1.0.2:
+    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
+
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
@@ -7577,6 +7602,10 @@ packages:
     resolution: {integrity: sha512-JnoEulTgveoC64vlYJ9sufGLuNkk6TcxSYpKxSC9aM42I61jIv3pQH0fgb6qW7HV0+FNqA3g1WCQQYfhfawGoQ==}
     hasBin: true
 
+  load-json-file@4.0.0:
+    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
+    engines: {node: '>=4'}
+
   load-plugin@6.0.3:
     resolution: {integrity: sha512-kc0X2FEUZr145odl68frm+lMJuQ23+rTXYmR6TImqPtbpmXC4vVXbWKDQ9IzndA0HfyQamWfKLhzsqGSTxE63w==}
 
@@ -8123,6 +8152,9 @@ packages:
     resolution: {integrity: sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==}
     os: ['!win32']
 
+  nice-try@1.0.5:
+    resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
+
   node-addon-api@3.2.1:
     resolution: {integrity: sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==}
 
@@ -8182,6 +8214,9 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
 
+  normalize-package-data@2.5.0:
+    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+
   normalize-package-data@6.0.0:
     resolution: {integrity: sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -8239,6 +8274,11 @@ packages:
     engines: {node: ^14.18.0 || ^16.13.0 || >=18.0.0, npm: '>= 8'}
     hasBin: true
 
+  npm-run-all@4.1.5:
+    resolution: {integrity: sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==}
+    engines: {node: '>= 4'}
+    hasBin: true
+
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -8466,6 +8506,10 @@ packages:
     resolution: {integrity: sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==}
     engines: {node: '>=0.8'}
 
+  parse-json@4.0.0:
+    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
+    engines: {node: '>=4'}
+
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -8519,6 +8563,10 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
+  path-key@2.0.1:
+    resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
+    engines: {node: '>=4'}
+
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -8548,6 +8596,10 @@ packages:
   path-to-regexp@6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
 
+  path-type@3.0.0:
+    resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
+    engines: {node: '>=4'}
+
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -8594,6 +8646,11 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
+  pidtree@0.3.1:
+    resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
     engines: {node: '>=0.10'}
@@ -8603,6 +8660,10 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pify@3.0.0:
+    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
+    engines: {node: '>=4'}
+
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
@@ -9201,6 +9262,10 @@ packages:
     resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  read-pkg@3.0.0:
+    resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
+    engines: {node: '>=4'}
+
   read-yaml-file@1.1.0:
     resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
     engines: {node: '>=6'}
@@ -9868,6 +9933,10 @@ packages:
     resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
     engines: {node: '>= 0.4'}
 
+  string.prototype.padend@3.1.6:
+    resolution: {integrity: sha512-XZpspuSB7vJWhvJc9DLSlrXl1mcA2BdoY5jjnS135ydXqLoqhs96JjDtCkjJEQHvfqZIp9hBuBMgI589peyx9Q==}
+    engines: {node: '>= 0.4'}
+
   string.prototype.repeat@1.0.0:
     resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
 
@@ -10702,6 +10771,11 @@ packages:
     engines: {node: '>=12.0.0'}
     hasBin: true
 
+  wait-on@8.0.1:
+    resolution: {integrity: sha512-1wWQOyR2LVVtaqrcIL2+OM+x7bkpmzVROa0Nf6FryXkS+er5Sa1kzFGjzZRqLnHa3n1rACFLeTwUqE1ETL9Mig==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+
   walk-up-path@3.0.1:
     resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}
 
@@ -11040,13 +11114,13 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@angular-devkit/build-angular@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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-devkit/build-angular@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
       '@angular-devkit/build-webpack': 0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1(esbuild@0.21.5)))(webpack@5.92.1(esbuild@0.21.5))
       '@angular-devkit/core': 18.1.3(chokidar@3.6.0)
-      '@angular/build': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7)(terser@5.29.2)(typescript@5.5.4)
+      '@angular/build': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(terser@5.29.2)(typescript@5.5.4)
       '@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@babel/core': 7.24.7
       '@babel/generator': 7.24.7
@@ -11113,8 +11187,8 @@ snapshots:
       jest: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
       jest-environment-jsdom: 29.7.0
       karma: 6.4.4
-      ng-packagr: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.6.2))
+      ng-packagr: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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))
     transitivePeerDependencies:
       - '@rspack/core'
       - '@swc/core'
@@ -11245,7 +11319,7 @@ snapshots:
       tslib: 2.6.3
     optional: true
 
-  '@angular/build@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7)(terser@5.29.2)(typescript@5.5.4)':
+  '@angular/build@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(terser@5.29.2)(typescript@5.5.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
@@ -11280,7 +11354,7 @@ snapshots:
       '@angular/localize': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))
       less: 4.2.0
       postcss: 8.4.38
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2))
+      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
     transitivePeerDependencies:
       - '@types/node'
       - chokidar
@@ -14556,6 +14630,10 @@ snapshots:
     dependencies:
       '@hapi/hoek': 9.3.0
 
+  '@sideway/address@4.1.5':
+    dependencies:
+      '@hapi/hoek': 9.3.0
+
   '@sideway/formula@3.0.1': {}
 
   '@sideway/pinpoint@2.0.0': {}
@@ -15337,7 +15415,7 @@ snapshots:
       debug: 4.3.7(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.6.2
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@5.5.4)
     optionalDependencies:
       typescript: 5.5.4
@@ -15352,7 +15430,7 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
-      semver: 7.6.2
+      semver: 7.6.3
       ts-api-utils: 1.3.0(typescript@5.6.2)
     optionalDependencies:
       typescript: 5.6.2
@@ -15931,6 +16009,14 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  axios@1.7.7:
+    dependencies:
+      follow-redirects: 1.15.6(debug@4.3.6)
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   axobject-query@3.2.1:
     dependencies:
       dequal: 2.0.3
@@ -16609,6 +16695,14 @@ snapshots:
       shebang-command: 1.2.0
       which: 1.3.1
 
+  cross-spawn@6.0.5:
+    dependencies:
+      nice-try: 1.0.5
+      path-key: 2.0.1
+      semver: 5.7.2
+      shebang-command: 1.2.0
+      which: 1.3.1
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
@@ -18545,6 +18639,8 @@ snapshots:
     dependencies:
       parse-passwd: 1.0.0
 
+  hosted-git-info@2.8.9: {}
+
   hosted-git-info@7.0.1:
     dependencies:
       lru-cache: 10.4.3
@@ -19500,6 +19596,14 @@ snapshots:
       '@sideway/formula': 3.0.1
       '@sideway/pinpoint': 2.0.0
 
+  joi@17.13.3:
+    dependencies:
+      '@hapi/hoek': 9.3.0
+      '@hapi/topo': 5.1.0
+      '@sideway/address': 4.1.5
+      '@sideway/formula': 3.0.1
+      '@sideway/pinpoint': 2.0.0
+
   jquery@3.7.1: {}
 
   js-tokens@4.0.0: {}
@@ -19609,6 +19713,8 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
+  json-parse-better-errors@1.0.2: {}
+
   json-parse-even-better-errors@2.3.1: {}
 
   json-parse-even-better-errors@3.0.0: {}
@@ -19875,6 +19981,13 @@ snapshots:
       '@lmdb/lmdb-linux-x64': 3.0.12
       '@lmdb/lmdb-win32-x64': 3.0.12
 
+  load-json-file@4.0.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      parse-json: 4.0.0
+      pify: 3.0.0
+      strip-bom: 3.0.0
+
   load-plugin@6.0.3:
     dependencies:
       '@npmcli/config': 8.3.3
@@ -20602,7 +20715,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  ng-packagr@18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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):
+  ng-packagr@18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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):
     dependencies:
       '@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@rollup/plugin-json': 6.1.0(rollup@4.18.1)
@@ -20631,7 +20744,7 @@ snapshots:
       typescript: 5.5.4
     optionalDependencies:
       rollup: 4.18.1
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2))
+      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
     transitivePeerDependencies:
       - supports-color
 
@@ -20641,6 +20754,8 @@ snapshots:
       node-gyp-build: 4.6.0
     optional: true
 
+  nice-try@1.0.5: {}
+
   node-addon-api@3.2.1:
     optional: true
 
@@ -20676,7 +20791,7 @@ snapshots:
       make-fetch-happen: 13.0.0
       nopt: 7.2.1
       proc-log: 3.0.0
-      semver: 7.6.2
+      semver: 7.6.3
       tar: 6.1.14
       which: 4.0.0
     transitivePeerDependencies:
@@ -20699,11 +20814,18 @@ snapshots:
     dependencies:
       abbrev: 2.0.0
 
+  normalize-package-data@2.5.0:
+    dependencies:
+      hosted-git-info: 2.8.9
+      resolve: 1.22.8
+      semver: 5.7.2
+      validate-npm-package-license: 3.0.4
+
   normalize-package-data@6.0.0:
     dependencies:
       hosted-git-info: 7.0.1
       is-core-module: 2.13.1
-      semver: 7.6.2
+      semver: 7.6.3
       validate-npm-package-license: 3.0.4
 
   normalize-path@2.1.1:
@@ -20771,6 +20893,18 @@ snapshots:
       read-package-json-fast: 3.0.2
       shell-quote: 1.8.1
 
+  npm-run-all@4.1.5:
+    dependencies:
+      ansi-styles: 3.2.1
+      chalk: 2.4.2
+      cross-spawn: 6.0.5
+      memorystream: 0.3.1
+      minimatch: 3.1.2
+      pidtree: 0.3.1
+      read-pkg: 3.0.0
+      shell-quote: 1.8.1
+      string.prototype.padend: 3.1.6
+
   npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
@@ -21097,6 +21231,11 @@ snapshots:
       map-cache: 0.2.2
       path-root: 0.1.1
 
+  parse-json@4.0.0:
+    dependencies:
+      error-ex: 1.3.2
+      json-parse-better-errors: 1.0.2
+
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -21163,6 +21302,8 @@ snapshots:
 
   path-is-absolute@1.0.1: {}
 
+  path-key@2.0.1: {}
+
   path-key@3.1.1: {}
 
   path-parse@1.0.7: {}
@@ -21187,6 +21328,10 @@ snapshots:
 
   path-to-regexp@6.2.1: {}
 
+  path-type@3.0.0:
+    dependencies:
+      pify: 3.0.0
+
   path-type@4.0.0: {}
 
   path-type@5.0.0: {}
@@ -21220,10 +21365,14 @@ snapshots:
 
   picomatch@4.0.2: {}
 
+  pidtree@0.3.1: {}
+
   pidtree@0.6.0: {}
 
   pify@2.3.0: {}
 
+  pify@3.0.0: {}
+
   pify@4.0.1: {}
 
   pify@5.0.0: {}
@@ -21341,6 +21490,15 @@ snapshots:
       postcss: 8.4.45
       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@20.14.14)(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@20.14.14)(typescript@5.5.4)
+    optional: true
+
   postcss-load-config@4.0.2(postcss@8.4.40)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2)):
     dependencies:
       lilconfig: 3.1.2
@@ -21788,6 +21946,12 @@ snapshots:
       json-parse-even-better-errors: 3.0.0
       npm-normalize-package-bin: 3.0.1
 
+  read-pkg@3.0.0:
+    dependencies:
+      load-json-file: 4.0.0
+      normalize-package-data: 2.5.0
+      path-type: 3.0.0
+
   read-yaml-file@1.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -22690,6 +22854,13 @@ snapshots:
       set-function-name: 2.0.2
       side-channel: 1.0.6
 
+  string.prototype.padend@3.1.6:
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
+
   string.prototype.repeat@1.0.0:
     dependencies:
       define-properties: 1.2.1
@@ -23022,6 +23193,34 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(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@20.14.14)(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
+
   tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -23091,7 +23290,7 @@ snapshots:
 
   term-size@2.2.1: {}
 
-  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.92.1(esbuild@0.21.5)):
+  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.92.1):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -23763,6 +23962,16 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  wait-on@8.0.1:
+    dependencies:
+      axios: 1.7.7
+      joi: 17.13.3
+      lodash: 4.17.21
+      minimist: 1.2.8
+      rxjs: 7.8.1
+    transitivePeerDependencies:
+      - debug
+
   walk-up-path@3.0.1: {}
 
   walker@1.0.8:
@@ -23882,7 +24091,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.92.1(esbuild@0.21.5))
+      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.92.1)
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     transitivePeerDependencies:

From 8255435aa0a7b100b5498d8c8cb9d80d1a6c5cec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Fri, 11 Oct 2024 13:21:54 +0200
Subject: [PATCH 16/40] fix(styles): reworked get-function for tokens (#3704)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .../.storybook/styles/components/typo.scss    |  4 +-
 packages/styles/src/components/lead.scss      |  4 +-
 .../styles/src/components/text-highlight.scss | 12 +--
 packages/styles/src/elements/body.scss        | 12 +--
 .../styles/src/elements/fieldset-legend.scss  | 14 ++--
 packages/styles/src/elements/heading.scss     | 40 +++++-----
 packages/styles/src/functions/_tokens.scss    | 74 +++++++------------
 .../src/variables/components/_stepper.scss    |  1 -
 8 files changed, 70 insertions(+), 91 deletions(-)

diff --git a/packages/documentation/.storybook/styles/components/typo.scss b/packages/documentation/.storybook/styles/components/typo.scss
index 12c389db3f..0f6a972b11 100644
--- a/packages/documentation/.storybook/styles/components/typo.scss
+++ b/packages/documentation/.storybook/styles/components/typo.scss
@@ -30,7 +30,7 @@ body {
     }
 
     .docs-story > :first-child {
-      font-family: tokens.get('post-body', 'font-family');
+      font-family: tokens.get('body-font-family');
     }
 
     .font-sans-serif {
@@ -44,6 +44,6 @@ body {
 
   // full-screen preview
   #storybook-root {
-    font-family: tokens.get('post-body', 'font-family');
+    font-family: tokens.get('body-font-family');
   }
 }
diff --git a/packages/styles/src/components/lead.scss b/packages/styles/src/components/lead.scss
index 207a8300f8..f6a5d0813a 100644
--- a/packages/styles/src/components/lead.scss
+++ b/packages/styles/src/components/lead.scss
@@ -5,6 +5,6 @@
 tokens.$default-map: components.$post-lead;
 
 .lead {
-  font-size: tokens.get('post-lead', 'font-size');
-  font-weight: tokens.get('post-lead', 'font-weight');
+  font-size: tokens.get('lead-font-size');
+  font-weight: tokens.get('lead-font-weight');
 }
diff --git a/packages/styles/src/components/text-highlight.scss b/packages/styles/src/components/text-highlight.scss
index c07f32b046..2a3e62351c 100644
--- a/packages/styles/src/components/text-highlight.scss
+++ b/packages/styles/src/components/text-highlight.scss
@@ -5,10 +5,10 @@
 tokens.$default-map: components.$post-text-highlighted;
 
 .text-highlighted {
-  background-color: tokens.get('post-text', 'highlighted-bg');
-  color: tokens.get('post-text', 'highlighted-fg');
-  padding: tokens.get('post-text', 'highlighted-padding-text');
-  margin-block-start: tokens.get('post-text', 'highlighted-height-space-bottom');
-  margin-block-end: tokens.get('post-text', 'highlighted-height-space-bottom');
-  border-radius: tokens.get('post-text', 'highlighted-border-radius');
+  background-color: tokens.get('text-highlighted-bg');
+  color: tokens.get('text-highlighted-fg');
+  padding: tokens.get('text-highlighted-padding-text');
+  margin-block-start: tokens.get('text-highlighted-height-space-bottom');
+  margin-block-end: tokens.get('text-highlighted-height-space-bottom');
+  border-radius: tokens.get('text-highlighted-border-radius');
 }
diff --git a/packages/styles/src/elements/body.scss b/packages/styles/src/elements/body.scss
index 95a8f1835c..91a74e8958 100644
--- a/packages/styles/src/elements/body.scss
+++ b/packages/styles/src/elements/body.scss
@@ -8,10 +8,10 @@ tokens.$default-map: elements.$post-body;
 @use '../components/fonts';
 
 body {
-  font-family: tokens.get('post-body', 'font-family');
-  font-size: tokens.get('post-body', 'font-size');
-  font-weight: tokens.get('post-body', 'font-weight');
-  line-height: tokens.get('post-body', 'line-height');
-  letter-spacing: tokens.get('post-body', 'letter-spacing');
-  color: tokens.get('post-body', 'color');
+  font-family: tokens.get('body-font-family');
+  font-size: tokens.get('body-font-size');
+  font-weight: tokens.get('body-font-weight');
+  line-height: tokens.get('body-line-height');
+  letter-spacing: tokens.get('body-letter-spacing');
+  color: tokens.get('body-color');
 }
diff --git a/packages/styles/src/elements/fieldset-legend.scss b/packages/styles/src/elements/fieldset-legend.scss
index c050142b93..1adb691cce 100644
--- a/packages/styles/src/elements/fieldset-legend.scss
+++ b/packages/styles/src/elements/fieldset-legend.scss
@@ -4,15 +4,15 @@
 tokens.$default-map: elements.$post-legend;
 
 legend {
-  font-weight: tokens.get('legend', 'font-weight');
-  line-height: tokens.get('legend', 'line-height');
+  font-weight: tokens.get('legend-font-weight');
+  line-height: tokens.get('legend-line-height');
   width: 100%;
 
   &.large {
-    font-size: tokens.get('legend', 'large-font-size');
-    margin-block-start: tokens.get('legend', 'large-margin-block-start');
-    margin-block-end: tokens.get('legend', 'large-margin-block-end');
-    padding-block-end: tokens.get('legend', 'large-padding-block-end');
-    border-bottom: tokens.get('legend', 'large-border-bottom');
+    font-size: tokens.get('legend-large-font-size');
+    margin-block-start: tokens.get('legend-large-margin-block-start');
+    margin-block-end: tokens.get('legend-large-margin-block-end');
+    padding-block-end: tokens.get('legend-large-padding-block-end');
+    border-bottom: tokens.get('legend-large-border-bottom');
   }
 }
diff --git a/packages/styles/src/elements/heading.scss b/packages/styles/src/elements/heading.scss
index 6d2f76e011..f7861198e6 100644
--- a/packages/styles/src/elements/heading.scss
+++ b/packages/styles/src/elements/heading.scss
@@ -15,48 +15,48 @@ h5,
 .h5,
 h6,
 .h6 {
-  line-height: tokens.get('post-heading', 'line-height');
-  font-weight: tokens.get('post-heading', 'font-weight');
+  line-height: tokens.get('heading-line-height');
+  font-weight: tokens.get('heading-font-weight');
 }
 
 h1,
 .h1 {
-  font-size: tokens.get('post-h1', 'font-size');
-  margin-block-start: tokens.get('post-h1', 'margin-block-start');
-  margin-block-end: tokens.get('post-h1', 'margin-block-end');
+  font-size: tokens.get('h1-font-size');
+  margin-block-start: tokens.get('h1-margin-block-start');
+  margin-block-end: tokens.get('h1-margin-block-end');
 }
 
 h2,
 .h2 {
-  font-size: tokens.get('post-h2', 'font-size');
-  margin-block-start: tokens.get('post-h2', 'margin-block-start');
-  margin-block-end: tokens.get('post-h2', 'margin-block-end');
+  font-size: tokens.get('h2-font-size');
+  margin-block-start: tokens.get('h2-margin-block-start');
+  margin-block-end: tokens.get('h2-margin-block-end');
 }
 
 h3,
 .h3 {
-  font-size: tokens.get('post-h3', 'font-size');
-  margin-block-start: tokens.get('post-h3', 'margin-block-start');
-  margin-block-end: tokens.get('post-h3', 'margin-block-end');
+  font-size: tokens.get('h3-font-size');
+  margin-block-start: tokens.get('h3-margin-block-start');
+  margin-block-end: tokens.get('h3-margin-block-end');
 }
 
 h4,
 .h4 {
-  font-size: tokens.get('post-h4', 'font-size');
-  margin-block-start: tokens.get('post-h4', 'margin-block-start');
-  margin-block-end: tokens.get('post-h4', 'margin-block-end');
+  font-size: tokens.get('h4-font-size');
+  margin-block-start: tokens.get('h4-margin-block-start');
+  margin-block-end: tokens.get('h4-margin-block-end');
 }
 
 h5,
 .h5 {
-  font-size: tokens.get('post-h5', 'font-size');
-  margin-block-start: tokens.get('post-h5', 'margin-block-start');
-  margin-block-end: tokens.get('post-h5', 'margin-block-end');
+  font-size: tokens.get('h5-font-size');
+  margin-block-start: tokens.get('h5-margin-block-start');
+  margin-block-end: tokens.get('h5-margin-block-end');
 }
 
 h6,
 .h6 {
-  font-size: tokens.get('post-h6', 'font-size');
-  margin-block-start: tokens.get('post-h6', 'margin-block-start');
-  margin-block-end: tokens.get('post-h6', 'margin-block-end');
+  font-size: tokens.get('h6-font-size');
+  margin-block-start: tokens.get('h6-margin-block-start');
+  margin-block-end: tokens.get('h6-margin-block-end');
 }
diff --git a/packages/styles/src/functions/_tokens.scss b/packages/styles/src/functions/_tokens.scss
index 0254d87b68..b66fa11ef7 100644
--- a/packages/styles/src/functions/_tokens.scss
+++ b/packages/styles/src/functions/_tokens.scss
@@ -1,74 +1,54 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use 'sass:string';
+@use 'sass:list';
+
+$_namespace: 'post';
+$default-map: null !default;
 
 /**
- * @function get($prefix, $key-name)
- * Gets a token-key, normalizes and resolves it with the $default-map.
+ * @function get($key, $map)
+ * Gets a token-key, normalizes and resolves it with the given map or $default-map.
  *
- * @param {string} $prefix - The token map name.
- * @param {string} $key-name - The token key name.
- * @param {map} $map - The map to get the token key from.
+ * @param {string} $key - The full token key (including prefix).
+ * @param {map} $map - The map to get the token key from (optional).
  *
- * @returns {any} $value of $normalized-prefix[$normalized-key-name]
+ * @returns {any} $value of $normalized-key in the specified map
  *
  * @example
  * @use '../tokens/components' as components;
  * @use '../functions/tokens' as tokens;
  *
- * // set the default map to use or always use the third function parameter to specify a different map.
- * tokens.$default-map: components.$post-body;
- *
- * // lets say you have two keys: 'post-selector-font-family' and 'post-selector-font-size' in the same map.
- * // then use it like so:
+ * // set the default map to use or always use the second function parameter to specify a different map.
+ * tokens.$default-map: components.$post-badge;
  *
  * selector {
- *   font-family: tokens.get('post-selector', 'font-family');
- *   font-family: tokens.get('selector', 'font-family');
- *
- *   font-family: tokens.get('selector-font', 'family');
- *   font-size: tokens.get('selector-font', 'size');
- *
- *   font-family: tokens.get('selector', 'font-family', $my-custom-map);  // use a different map than the default one
+ *   background-color: tokens.get('post-badge-bg');
+ *   color: tokens.get('badge-fg');
+ *   border-width: tokens.get('app-store-focus-outline-width', components.$post-app-store-badge);  // use a different map than the default one
  * }
  */
+@function get($key, $map: $default-map) {
+  $normalized-key: normalize-key($key);
 
-$_namespace: 'post';
-$default-map: null !default;
-
-@function get($prefix, $key-name, $map: $default-map) {
-  $key-name: normalize-key-name($prefix, $key-name);
-
-  @if not map.has-key($map, $key-name) {
-    @error 'No such key "#{$key-name}" in given map! Available keys are: #{meta.inspect(map.keys($map))}.';
+  @if not meta.type-of($map) == 'map' {
+    @error 'No map provided or provided $map is not valid. Got #{meta.type-of($map)} instead.';
   }
 
-  @return map.get($map, $key-name);
-}
-
-@function normalize-key-name($original-prefix, $key-name) {
-  $namespaced-prefix: normalize-prefix($original-prefix);
-  $prefix: string.slice($namespaced-prefix, string.length('#{$_namespace}-') + 1);
-  $key-contains-namespace: string.index($key-name, '#{$_namespace}-') == 1;
-  $key-contains-prefix: string.index($key-name, '#{$prefix}-') == 1;
-
-  @if not $key-contains-namespace {
-    @if not $key-contains-prefix {
-      $key-name: '#{$namespaced-prefix}-#{$key-name}';
-    } @else {
-      $key-name: '#{$_namespace}-#{$key-name}';
-    }
+  @if not map.has-key($map, $normalized-key) {
+    @error 'No such key "#{$normalized-key}" in given map! Available keys are: #{meta.inspect(map.keys($map))}.';
   }
 
-  @return $key-name;
+  @return map.get($map, $normalized-key);
 }
 
-@function normalize-prefix($prefix) {
-  $prefix-contains-namespace: string.index($prefix, '#{$_namespace}-') == 1;
+@function normalize-key($key) {
+  $key-parts: string.split($key, '-');
+  $key-contains-namespace: list.nth($key-parts, 1) == $_namespace;
 
-  @if not $prefix-contains-namespace {
-    $prefix: '#{$_namespace}-#{$prefix}';
+  @if not $key-contains-namespace {
+    $key: '#{$_namespace}-#{$key}';
   }
 
-  @return $prefix;
+  @return $key;
 }
diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss
index 7dc24521ad..60bab4b596 100644
--- a/packages/styles/src/variables/components/_stepper.scss
+++ b/packages/styles/src/variables/components/_stepper.scss
@@ -35,4 +35,3 @@ $stepper-link-color: var(--post-gray-60);
 
 $stepper-link-current-color: var(--post-gray-80);
 $stepper-link-current-font-weight: type.$font-weight-bold;
-

From 9f3fc1a391d15ea3fb3f278dfd178070be29ddce Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Fri, 11 Oct 2024 16:37:59 +0200
Subject: [PATCH 17/40] chore(documentation,styles): add flex utilities (#3678)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .../snapshots/utilities/flex.snapshot.ts      |   7 +
 .../stories/utilities/flex/flex.blocks.tsx    | 163 ++++++++++++++
 .../src/stories/utilities/flex/flex.docs.mdx  | 213 ++++++++++++++++++
 .../utilities/flex/flex.snapshot.stories.ts   | 174 ++++++++++++++
 .../stories/utilities/flex/flex.stories.ts    | 129 +++++++++++
 .../stories/utilities/flex/flex.styles.scss   |  72 ++++++
 .../src/themes/bootstrap/_utilities.scss      |  11 +
 packages/styles/src/utilities/_variables.scss |  98 ++++++++
 8 files changed, 867 insertions(+)
 create mode 100644 packages/documentation/cypress/snapshots/utilities/flex.snapshot.ts
 create mode 100644 packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
 create mode 100644 packages/documentation/src/stories/utilities/flex/flex.docs.mdx
 create mode 100644 packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/flex/flex.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/flex/flex.styles.scss

diff --git a/packages/documentation/cypress/snapshots/utilities/flex.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/flex.snapshot.ts
new file mode 100644
index 0000000000..6a58d74b5e
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/flex.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Flex', () => {
+  it('flex', () => {
+    cy.visit('/iframe.html?id=snapshots--flex');
+    cy.get('.flex-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Flex', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx b/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
new file mode 100644
index 0000000000..642f5ec5ee
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
@@ -0,0 +1,163 @@
+import { breakpoints } from '../spacing/spacing.docs.mdx';
+
+const FlexDocContainer = (props: {
+  children: string | JSX.Element | JSX.Element[];
+  name: string;
+  prefix: string;
+}) => (
+  <article className="d-flex flex-column flex-lg-row align-items-start flex-doc-container">
+    <div className="flex-doc-container__description order-2 order-lg-1">
+      <h3 className="h6 text-capitalize">{props.name}</h3>
+    </div>
+    <div className="flex-doc-container__demo order-3 order-lg-2">{props.children}</div>
+    <div className="flex-doc-container__props order-1 order-lg-3">
+      <dl>
+        <dt>Class</dt>
+        <dd>
+          <code>
+            .{props.prefix}-{props.name}
+          </code>
+        </dd>
+      </dl>
+    </div>
+  </article>
+);
+
+export function FlexBreakpointBlock(props: { display: string }) {
+  return (
+    <>
+      If you want to set it from a specific breakpoint: (
+      {breakpoints.map(([b, isLast]) => (
+        <span key={b}>
+          <code>{b}</code>
+          {isLast ? ', ' : ''}
+        </span>
+      ))}
+      ): <code>{props.display}</code>
+    </>
+  );
+}
+
+export function FlexValuesBlock(props: { name: string; values: string[] }) {
+  return (
+    <>
+      The available values for {props.name} are the following:{' '}
+      {props.values.map((val, i) => (
+        <span key={val}>
+          <code>{val}</code>
+          {i < props.values.length - 1 ? ', ' : ''}
+        </span>
+      ))}
+      .
+    </>
+  );
+}
+
+export function FlexDirectionContainer(props: { name: string }) {
+  return (
+    <FlexDocContainer name={props.name} prefix="flex">
+      <div className={`d-flex flex-${props.name}`}>
+        <div className="bg-yellow p-12">First content</div>
+        <div className="bg-gray p-12">Second content</div>
+      </div>
+    </FlexDocContainer>
+  );
+}
+
+export function AlignItemsContainer(props: { name: string }) {
+  return (
+    <FlexDocContainer name={props.name} prefix="align-items">
+      <div className={`d-flex align-items-${props.name}`}>
+        <div className="bg-yellow p-12">Content</div>
+        <div className="bg-gray px-12 py-48">Content</div>
+      </div>
+    </FlexDocContainer>
+  );
+}
+
+export function JustifyContentContainer(props: { name: string }) {
+  return (
+    <FlexDocContainer name={props.name} prefix="justify-content">
+      <div className={`d-flex justify-content-${props.name}`}>
+        <div className="bg-yellow p-12">Content</div>
+        <div className="bg-gray p-12">Content</div>
+      </div>
+    </FlexDocContainer>
+  );
+}
+
+export function AlignSelfContainer(props: { name: string }) {
+  return (
+    <FlexDocContainer name={props.name} prefix="align-self">
+      <div className="d-flex align-items-start">
+        <div className="bg-gray px-12 py-48">Content</div>
+        <div className={`bg-yellow p-12 align-self-${props.name}`}>Content with align-self</div>
+        <div className="bg-gray px-12 py-48">Content</div>
+      </div>
+    </FlexDocContainer>
+  );
+}
+
+export function GrowContainer(props: { name: number }) {
+  return (
+    <FlexDocContainer name={props.name.toString()} prefix="flex-grow">
+      <div className="d-flex align-items-start grow-shrink-container">
+        <div className={`bg-yellow p-12 flex-grow-${props.name}`}>
+          I'm {props.name === 0 ? 'not' : ''} growing
+        </div>
+        <div className="bg-gray p-12">Content</div>
+      </div>
+    </FlexDocContainer>
+  );
+}
+
+export function ShrinkContainer(props: { name: number }) {
+  return (
+    <FlexDocContainer name={props.name.toString()} prefix="flex-shrink">
+      <div className="d-flex align-items-start grow-shrink-container">
+        <div className="bg-gray p-12">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </div>
+        <div className={`bg-yellow p-12 flex-shrink-${props.name}`}>
+          I {props.name === 0 ? "don't" : ''} shrink
+        </div>
+      </div>
+    </FlexDocContainer>
+  );
+}
+
+export function AlignContentContainer(props: { name: string }) {
+  return (
+    <FlexDocContainer name={props.name} prefix="align-content">
+      <div className={`align-content-container d-flex align-content-${props.name} flex-wrap`}>
+        <div className="bg-gray p-12">Content</div>
+        <div className="bg-yellow p-12">Content</div>
+        <div className="bg-gray p-12">Content</div>
+        <div className="bg-yellow p-12">Content</div>
+        <div className="bg-gray p-12">Content</div>
+        <div className="bg-yellow p-12">Content</div>
+        <div className="bg-gray p-12">Content</div>
+        <div className="bg-yellow p-12">Content</div>
+      </div>
+    </FlexDocContainer>
+  );
+}
+
+export function WrapContainer(props: { name: string }) {
+  return (
+    <FlexDocContainer name={props.name} prefix="flex">
+      <div className={`d-flex flex-${props.name}`}>
+        <div className="bg-gray p-12">Content 1</div>
+        <div className="bg-yellow p-12">Content 2</div>
+        <div className="bg-gray p-12">Content 3</div>
+        <div className="bg-yellow p-12">Content 4</div>
+        <div className="bg-gray p-12">Content 5</div>
+        <div className="bg-yellow p-12">Content 6</div>
+        <div className="bg-gray p-12">Content 7</div>
+        <div className="bg-yellow p-12">Content 8</div>
+      </div>
+    </FlexDocContainer>
+  );
+}
diff --git a/packages/documentation/src/stories/utilities/flex/flex.docs.mdx b/packages/documentation/src/stories/utilities/flex/flex.docs.mdx
new file mode 100644
index 0000000000..25746cfaa1
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/flex/flex.docs.mdx
@@ -0,0 +1,213 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as FlexStories from './flex.stories';
+import { breakpoints, firstBreakpoint } from '../spacing/spacing.docs.mdx';
+import {
+  FlexBreakpointBlock,
+  FlexValuesBlock,
+  FlexDirectionContainer,
+  AlignItemsContainer,
+  JustifyContentContainer,
+  AlignSelfContainer,
+  GrowContainer,
+  ShrinkContainer,
+  AlignContentContainer,
+  WrapContainer,
+} from './flex.blocks';
+import { forEach } from '@/utils/react';
+import './flex.styles.scss';
+
+export const flexOrderValues = ['0', '1', '2', '3', '4', '5', 'first', 'last'];
+export const flexDirectionValues = ['row', 'row-reverse', 'column', 'column-reverse'];
+export const flexAlignItemsValues = ['start', 'end', 'center', 'baseline', 'stretch'];
+export const flexJustifyContentValues = ['start', 'end', 'center', 'between', 'around', 'evenly'];
+export const flexAlignSelfValues = ['start', 'end', 'center', 'baseline', 'stretch'];
+export const flexAlignContentValues = ['start', 'end', 'center', 'between', 'around', 'stretch'];
+export const flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
+
+<Meta of={FlexStories} />
+
+# Flex
+
+<div className="lead">
+  Use the flex utility classes to change the display of elements within a .d-flex parent.
+</div>
+<br />
+
+Flex utilities work alongside the <code>display: flex</code> css property that can be added to any HTML element using the classes `d-flex` or `d-{breakpoint}-flex`.
+
+## Flex direction
+
+Flex direction is used on a flex container element to set the direction of its children.
+
+<FlexValuesBlock name="flex-direction" values={flexDirectionValues} />
+
+### Usage
+
+To set the direction of elements within a flex container, simply add a `.flex-{value}` class to the container.
+
+<FlexBreakpointBlock display="flex-{breakpoint}-{value}" />
+
+<Canvas of={FlexStories.Default} sourceState="shown" />
+
+<section>
+  {forEach(flexDirectionValues, function ({ key, value }) {
+    return <FlexDirectionContainer key={key} name={value} />;
+  })}
+</section>
+
+## Align items
+
+Align items is used on a flex container element to set the horizontal alignement (vertical alignment if set to `flex-direction: column`) of its children.
+
+<FlexValuesBlock name="align-items" values={flexAlignItemsValues} />
+
+### Usage
+
+To set the alignment of elements within a flex container, simply add a `.align-items-{value}` class to the container.
+
+<FlexBreakpointBlock display="align-items-{breakpoint}-{value}" />
+
+<Canvas of={FlexStories.AlignItems} sourceState="shown" />
+
+<section>
+  {forEach(flexAlignItemsValues, function ({ key, value }) {
+    return <AlignItemsContainer key={key} name={value} />;
+  })}
+</section>
+
+## Justify content
+
+Justify content is used on a flex container element to set the vertical alignment (horizontal alignment if set to `flex-direction: column`).
+
+<FlexValuesBlock name="justify-content" values={flexJustifyContentValues} />
+
+### Usage
+
+To set the alignment of elements within a flex container, simply add a `.justify-content-{value}` class to the container.
+
+<FlexBreakpointBlock display="justify-content-{breakpoint}-{value}" />
+
+<Canvas of={FlexStories.JustifyContent} sourceState="shown" />
+
+<section>
+  {forEach(flexJustifyContentValues, function ({ key, value }) {
+    return <JustifyContentContainer key={key} name={value} />;
+  })}
+</section>
+
+## Align self
+
+Align self is used on a child of a flex container element to set its horizontal alignement (vertical alignment if parent is set to `flex-direction: column`).
+
+<FlexValuesBlock name="align-self" values={flexAlignSelfValues} />
+
+### Usage
+
+To set the alignment of the child element within a flex container, simply add a `.align-self-{value}` class to the child.
+
+<FlexBreakpointBlock display="align-self-{breakpoint}-{value}" />
+
+<Canvas of={FlexStories.AlignSelf} sourceState="shown" />
+
+<section>
+  {forEach(flexAlignSelfValues, function ({ key, value }) {
+    return <AlignSelfContainer key={key} name={value} />;
+  })}
+</section>
+
+## Grow / Shrink
+
+The grow and shrink utilities are used on children of a flex container to tell the child element to fill the available space.
+The available values are the following: `grow-{0|1}`, `shrink-{0|1}`.
+
+### Usage
+
+To set the grow/shrink of a child element within a flex container, simply add a `.flex-{grow|shrink-{0|1}` class to the child.
+
+<FlexBreakpointBlock display="flex-{breakpoint}-{grow|shrink}-{0|1}" />
+
+<Canvas of={FlexStories.GrowShrink} sourceState="shown" />
+
+#### Grow
+
+<section>
+  <GrowContainer name={0} />
+  <GrowContainer name={1} />
+</section>
+
+#### Shrink
+
+<section>
+  <ShrinkContainer name={0} />
+  <ShrinkContainer name={1} />
+</section>
+
+## Align content
+
+Align content is used on a flex container to set the horizontal alignment of the element's children <u>together</u>.
+
+Note that align-content will only work if there are more than one row of elements of children.
+
+<FlexValuesBlock name="align-content" values={flexAlignContentValues} />
+
+### Usage
+
+To set the alignment of the child elements within a flex container, simply add a `.align-content-{value}` class to the flex container.
+
+<FlexBreakpointBlock display="align-content-{breakpoint}-{value}" />
+
+<Canvas of={FlexStories.AlignContent} sourceState="shown" />
+
+<section>
+  {forEach(flexAlignContentValues, function ({ key, value }) {
+    return <AlignContentContainer key={key} name={value} />;
+  })}
+</section>
+
+## Order
+
+Order is used on a child element of a `.d-flex` parent. It's used to reorder the elements within the parent.
+
+<FlexValuesBlock name="order" values={flexOrderValues} />
+
+### Usage
+
+To set the alignment of a specific element within a flex container, simply add a `.order-{value}` class to the child element.
+
+<FlexBreakpointBlock display="order-{breakpoint}-{value}" />
+
+<Canvas of={FlexStories.Order} sourceState="shown" />
+
+## Wrap
+
+Flex wrap is used on a flex parent container to define the wrapping of its children.
+
+<FlexValuesBlock name="wrap" values={flexWrapValues} />
+
+### Usage
+
+To set the alignment of a specific element within a flex container, simply add a `.flex-{value}` class to the child element.
+
+<FlexBreakpointBlock display="flex-{breakpoint}-{value}" />
+
+<Canvas of={FlexStories.Wrap} sourceState="shown" />
+
+<section>
+  {forEach(flexWrapValues, function ({ key, value }) {
+    return <WrapContainer key={key} name={value} />;
+  })}
+</section>
+
+## Fill
+
+The fill utility is used on children of a flex container to force them to take all of the available space (divide equally if content is smaller than container, or divide depending on child's contents)
+The fill value is the following: `fill`.
+
+### Usage
+
+To have children elements of a flex container fill the space, simply add a `.flex-fill` class to the child.
+
+<FlexBreakpointBlock display="flex-{breakpoint}-fill" />
+
+<Canvas of={FlexStories.FillEqual} sourceState="shown" />
+<Canvas of={FlexStories.Fill} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts b/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
new file mode 100644
index 0000000000..4dc2b239ae
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
@@ -0,0 +1,174 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './flex.stories';
+import './flex.styles.scss';
+import {
+  flexAlignContentValues,
+  flexAlignItemsValues,
+  flexAlignSelfValues,
+  flexDirectionValues,
+  flexJustifyContentValues,
+  flexWrapValues,
+} from './flex.docs.mdx';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+function getFlex(type: string) {
+  switch (type) {
+    case 'Direction':
+      return html`
+        ${flexDirectionValues.map(
+          val => html`
+            <div class="d-flex flex-${val}">
+              <div class="bg-yellow p-12">Content</div>
+              <div class="bg-gray p-12">Content</div>
+            </div>
+          `,
+        )}
+      `;
+    case 'Align Items':
+      return html`
+        ${flexAlignItemsValues.map(
+          val => html`
+            <div class="d-flex align-items-${val}">
+              <div class="bg-yellow p-12">Content</div>
+              <div class="bg-gray px-12 py-48">Content</div>
+            </div>
+          `,
+        )}
+      `;
+    case 'Justify Content':
+      return html`
+        ${flexJustifyContentValues.map(
+          val => html`
+            <div class="d-flex justify-content-${val}">
+              <div class="bg-yellow p-12">Content</div>
+              <div class="bg-gray p-12">Content</div>
+            </div>
+          `,
+        )}
+      `;
+    case 'Align Self':
+      return html`
+        ${flexAlignSelfValues.map(
+          val => html`
+            <div class="d-flex align-items-start">
+              <div class="bg-gray px-12 py-48">Content</div>
+              <div class="bg-yellow p-12 align-self-${val}">Content with align-self</div>
+              <div class="bg-gray px-12 py-48">Content</div>
+            </div>
+          `,
+        )}
+      `;
+    case 'Grow / Shrink':
+      return html`
+        ${bombArgs({
+          type: ['grow', 'shrink'],
+          value: [0, 1],
+        }).map(
+          args => html`
+            <div class="d-flex align-items-start grow-shrink-container">
+              <div class="bg-yellow p-12 flex-${args.type}-${args.value}">
+                I'm ${args.value === 0 ? 'not' : ''} ${args.type}ing
+              </div>
+              <div class="bg-gray p-12">
+                ${args.type === 'grow'
+                  ? 'Content'
+                  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'}
+              </div>
+            </div>
+          `,
+        )}
+      `;
+    case 'Align Content':
+      return html`
+        ${flexAlignContentValues.map(
+          val => html`
+            <div class="align-content-container d-flex flex-wrap align-content-${val}">
+              ${Array.from({ length: 8 }).map(
+                (_, i) =>
+                  html` <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-12">Content</div> `,
+              )}
+            </div>
+          `,
+        )}
+      `;
+    case 'Wrap':
+      return html`
+        ${flexWrapValues.map(
+          val => html`
+            <div class="d-flex flex-${val}">
+              ${Array.from({ length: 30 }).map(
+                (_, i) => html`
+                  <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-12">Content ${i + 1}</div>
+                `,
+              )}
+            </div>
+          `,
+        )}
+      `;
+    case 'Order':
+      return html`
+        ${[
+          [4, 5, 2, 3, 'last', 'first', 0, 1],
+          ['last', 5, 4, 3, 2, 1, 0, 'first'],
+        ].map(
+          arr => html`
+            <div class="d-flex flex-wrap">
+              ${arr.map(
+                (order, i) =>
+                  html`<div class="bg-${i % 2 === 0 ? 'gray' : 'yellow'} p-8 order-${order}">
+                    Element ${i} with position: ${order}
+                  </div>`,
+              )}
+            </div>
+          `,
+        )}
+      `;
+    case 'Fill':
+      return html`
+        ${[true, false].map(
+          isEqual => html`
+            <div class="d-flex">
+              <div class="bg-yellow p-8 flex-fill">Content</div>
+              <div class="bg-gray p-8 flex-fill">
+                ${isEqual ? 'Content' : 'Element with more content than the others'}
+              </div>
+              <div class="bg-yellow p-8 flex-fill">Content</div>
+            </div>
+          `,
+        )}
+      `;
+  }
+}
+
+export const Flex: Story = {
+  render: () => {
+    return html` <div class="flex-example">
+      ${[
+        'Direction',
+        'Align Items',
+        'Justify Content',
+        'Align Self',
+        'Grow / Shrink',
+        'Align Content',
+        'Wrap',
+        'Order',
+        'Fill',
+      ].map(
+        val => html`
+          <h1>${val}</h1>
+          <div class="flex-example-child gap-8 d-flex flex-column">${getFlex(val)}</div>
+        `,
+      )}
+    </div>`;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/flex/flex.stories.ts b/packages/documentation/src/stories/utilities/flex/flex.stories.ts
new file mode 100644
index 0000000000..b049815326
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/flex/flex.stories.ts
@@ -0,0 +1,129 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: 'b0154a21-1138-4a69-953a-c17c3cb7c538',
+  title: 'Utilities/Flex',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () =>
+    html`
+      <div class="d-flex flex-row">
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+      </div>
+    `,
+};
+
+export const AlignItems: Story = {
+  render: () =>
+    html`
+      <div class="d-flex align-items-end">
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray px-8 py-48">Content</div>
+      </div>
+    `,
+};
+
+export const AlignSelf: Story = {
+  render: () =>
+    html`
+      <div class="d-flex">
+        <div class="bg-gray px-8 py-48">Content</div>
+        <div class="bg-yellow align-self-end p-8">Content</div>
+        <div class="bg-gray px-8 py-48">Content</div>
+      </div>
+    `,
+};
+
+export const JustifyContent: Story = {
+  render: () =>
+    html`
+      <div class="d-flex justify-content-between">
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+      </div>
+    `,
+};
+
+export const GrowShrink: Story = {
+  render: () =>
+    html`
+      <div class="d-flex">
+        <div class="bg-yellow flex-grow-1 p-8">I'm growing</div>
+        <div class="bg-gray flex-shrink-1 p-8">I'm shrinking</div>
+      </div>
+    `,
+};
+
+export const AlignContent: Story = {
+  render: () =>
+    html`
+      <div style="height: 14rem" class="d-flex flex-wrap align-content-around">
+        ${Array.from({ length: 14 }).map(
+          (_, i) => html` <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-8">Content</div> `,
+        )}
+      </div>
+    `,
+};
+
+export const Order: Story = {
+  render: () =>
+    html`
+      <div class="d-flex">
+        <div class="bg-yellow p-8 order-3">First element, positioned last</div>
+        <div class="bg-gray p-8 order-2">Second element</div>
+        <div class="bg-yellow p-8 order-1">Last element, positioned first</div>
+      </div>
+    `,
+};
+
+export const Wrap: Story = {
+  render: () =>
+    html`
+      <div class="d-flex flex-wrap">
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+        <div class="bg-yellow p-8">Content</div>
+        <div class="bg-gray p-8">Content</div>
+      </div>
+    `,
+};
+
+export const FillEqual: Story = {
+  render: () =>
+    html`
+      <div class="d-flex">
+        <div class="bg-yellow p-8 flex-fill">Same content, same width</div>
+        <div class="bg-gray p-8 flex-fill">Same content, same width</div>
+        <div class="bg-yellow p-8 flex-fill">Same content, same width</div>
+      </div>
+    `,
+};
+
+export const Fill: Story = {
+  render: () =>
+    html`
+      <div class="d-flex">
+        <div class="bg-yellow p-8 flex-fill">Content</div>
+        <div class="bg-gray p-8 flex-fill">Element with more content than the others</div>
+        <div class="bg-yellow p-8 flex-fill">Content</div>
+      </div>
+    `,
+};
diff --git a/packages/documentation/src/stories/utilities/flex/flex.styles.scss b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
new file mode 100644
index 0000000000..065df88b56
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
@@ -0,0 +1,72 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.flex-doc-container {
+  > * {
+    align-self: stretch;
+    padding: post.$size-mini (post.$size-regular * 0.5);
+    border-top: post.$border-width solid post.$border-color;
+    flex: 0 0 50%;
+
+    &:first-child {
+      padding-inline-start: 0;
+      flex: 0 0 20%;
+    }
+
+    &:last-child {
+      padding-inline-end: 0;
+      flex: 0 0 30%;
+    }
+  }
+
+  .grow-shrink-container > * {
+    flex-basis: auto;
+  }
+
+  .flex-doc-container__description h3 {
+    margin-block-end: 0.5rem;
+    margin-block-start: 0.5rem;
+  }
+
+  .flex-doc-container__demo {
+    padding: post.$size-mini;
+
+    > * > * {
+      border-radius: post.$border-radius;
+      box-shadow: post.$elevation-1;
+    }
+
+    @include post.media-breakpoint-up(lg) {
+      border: post.$border-width solid post.$border-color;
+    }
+  }
+
+  &:not(:last-child) .flex-doc-container__demo {
+    border-bottom: 0;
+  }
+
+  .flex-doc-container__props dl {
+    display: flex;
+  }
+
+  @include post.media-breakpoint-down(md) {
+    .flex-doc-container__description {
+      border-top: none;
+    }
+
+    .flex-doc-container__props dl {
+      justify-content: center;
+    }
+  }
+}
+
+.align-content-container {
+  height: 14rem;
+
+  > * {
+    flex: 0 0 25%;
+  }
+}
+
+.flex-example-child > * {
+  border: post.$border-width solid post.$border-color;
+}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 2c21df1b4b..7920d02940 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -26,6 +26,17 @@ $utilities: map.remove($utilities, 'gap');
 $utilities: map.remove($utilities, 'row-gap');
 $utilities: map.remove($utilities, 'column-gap');
 
+$utilities: map.remove($utilities, 'flex');
+$utilities: map.remove($utilities, 'flex-direction');
+$utilities: map.remove($utilities, 'align-items');
+$utilities: map.remove($utilities, 'align-content');
+$utilities: map.remove($utilities, 'align-self');
+$utilities: map.remove($utilities, 'flex-grow');
+$utilities: map.remove($utilities, 'flex-shrink');
+$utilities: map.remove($utilities, 'flex-wrap');
+$utilities: map.remove($utilities, 'order');
+$utilities: map.remove($utilities, 'justify-content');
+
 $utilities: map.remove($utilities, 'display');
 
 @import 'bootstrap/scss/utilities/api';
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index ddeb97c37a..d39a938383 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -126,6 +126,104 @@ $utilities: (
     class: column-gap,
     values: from-tokens('spacing', 'gap'),
   ),
+  'flex': (
+    responsive: true,
+    property: flex,
+    values: (
+      fill: 1 1 auto,
+    ),
+  ),
+  'flex-direction': (
+    responsive: true,
+    property: flex-direction,
+    class: flex,
+    values: row column row-reverse column-reverse,
+  ),
+  'flex-grow': (
+    responsive: true,
+    property: flex-grow,
+    class: flex,
+    values: (
+      grow-0: 0,
+      grow-1: 1,
+    ),
+  ),
+  'flex-shrink': (
+    responsive: true,
+    property: flex-shrink,
+    class: flex,
+    values: (
+      shrink-0: 0,
+      shrink-1: 1,
+    ),
+  ),
+  'flex-wrap': (
+    responsive: true,
+    property: flex-wrap,
+    class: flex,
+    values: wrap nowrap wrap-reverse,
+  ),
+  'justify-content': (
+    responsive: true,
+    property: justify-content,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      between: space-between,
+      around: space-around,
+      evenly: space-evenly,
+    ),
+  ),
+  'align-items': (
+    responsive: true,
+    property: align-items,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      baseline: baseline,
+      stretch: stretch,
+    ),
+  ),
+  'align-content': (
+    responsive: true,
+    property: align-content,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      between: space-between,
+      around: space-around,
+      stretch: stretch,
+    ),
+  ),
+  'align-self': (
+    responsive: true,
+    property: align-self,
+    values: (
+      auto: auto,
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      baseline: baseline,
+      stretch: stretch,
+    ),
+  ),
+  'order': (
+    responsive: true,
+    property: order,
+    values: (
+      first: -1,
+      0: 0,
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      last: 6,
+    ),
+  ),
   'display': (
     responsive: true,
     print: true,

From bd409e286c85228fc1d96f493c2bc56870e67326 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 11 Oct 2024 17:25:23 +0200
Subject: [PATCH 18/40] fix(styles): mixed-decls for accordion (#3732)

---
 packages/styles/src/components/accordion.scss |  5 +-
 pnpm-lock.yaml                                | 69 +++++--------------
 2 files changed, 18 insertions(+), 56 deletions(-)

diff --git a/packages/styles/src/components/accordion.scss b/packages/styles/src/components/accordion.scss
index 74588e95bf..708561024e 100644
--- a/packages/styles/src/components/accordion.scss
+++ b/packages/styles/src/components/accordion.scss
@@ -9,8 +9,8 @@
 @use './../variables/components/accordion';
 
 .accordion-item {
-  @include accordion-mx.background-color;
   border-block: accordion.$accordion-border-width solid accordion.$accordion-border-color;
+  @include accordion-mx.background-color;
 
   & + & {
     border-block-start: 0;
@@ -27,8 +27,6 @@
 
 .accordion-button {
   @include button-mx.reset-button;
-  @include focus-mx.focus-ring;
-
   width: 100%;
   position: relative;
   padding-block: accordion.$accordion-button-padding;
@@ -37,6 +35,7 @@
     accordion.$accordion-gap;
   text-align: start;
   transition: accordion.$accordion-button-transition;
+  @include focus-mx.focus-ring;
 
   &:hover {
     color: accordion.$accordion-button-hover-color;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22d8b27299..f481760f69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -167,7 +167,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.2.0
         version: 18.2.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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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
@@ -670,7 +670,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.2.0
         version: 18.2.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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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-all:
         specifier: 4.1.5
         version: 4.1.5
@@ -986,7 +986,7 @@ importers:
     devDependencies:
       '@angular-devkit/build-angular':
         specifier: 18.1.3
-        version: 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3
         version: 18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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: 6.2.2
         version: 6.2.2
@@ -11114,13 +11114,13 @@ snapshots:
     transitivePeerDependencies:
       - chokidar
 
-  '@angular-devkit/build-angular@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1801.3(chokidar@3.6.0)
       '@angular-devkit/build-webpack': 0.1801.3(chokidar@3.6.0)(webpack-dev-server@5.0.4(webpack@5.92.1(esbuild@0.21.5)))(webpack@5.92.1(esbuild@0.21.5))
       '@angular-devkit/core': 18.1.3(chokidar@3.6.0)
-      '@angular/build': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(terser@5.29.2)(typescript@5.5.4)
+      '@angular/build': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7)(terser@5.29.2)(typescript@5.5.4)
       '@angular/compiler-cli': 18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@babel/core': 7.24.7
       '@babel/generator': 7.24.7
@@ -11187,8 +11187,8 @@ snapshots:
       jest: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
       jest-environment-jsdom: 29.7.0
       karma: 6.4.4
-      ng-packagr: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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))
+      ng-packagr: 18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.6.2))
     transitivePeerDependencies:
       - '@rspack/core'
       - '@swc/core'
@@ -11319,7 +11319,7 @@ snapshots:
       tslib: 2.6.3
     optional: true
 
-  '@angular/build@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(terser@5.29.2)(typescript@5.5.4)':
+  '@angular/build@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/localize@18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(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.38)(tailwindcss@3.4.7)(terser@5.29.2)(typescript@5.5.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1801.3(chokidar@3.6.0)
@@ -11354,7 +11354,7 @@ snapshots:
       '@angular/localize': 18.1.3(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4))(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))
       less: 4.2.0
       postcss: 8.4.38
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
+      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2))
     transitivePeerDependencies:
       - '@types/node'
       - chokidar
@@ -20715,7 +20715,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  ng-packagr@18.1.0(@angular/compiler-cli@18.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(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.1.3(@angular/compiler@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(typescript@5.5.4)
       '@rollup/plugin-json': 6.1.0(rollup@4.18.1)
@@ -20744,7 +20744,7 @@ snapshots:
       typescript: 5.5.4
     optionalDependencies:
       rollup: 4.18.1
-      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))
+      tailwindcss: 3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -21490,15 +21490,6 @@ snapshots:
       postcss: 8.4.45
       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@20.14.14)(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@20.14.14)(typescript@5.5.4)
-    optional: true
-
   postcss-load-config@4.0.2(postcss@8.4.40)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2)):
     dependencies:
       lilconfig: 3.1.2
@@ -23193,34 +23184,6 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(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@20.14.14)(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
-
   tailwindcss@3.4.7(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.6.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -23290,7 +23253,7 @@ snapshots:
 
   term-size@2.2.1: {}
 
-  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.92.1):
+  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.92.1(esbuild@0.21.5)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -24091,7 +24054,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.92.1)
+      terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.92.1(esbuild@0.21.5))
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     transitivePeerDependencies:

From 01cabad408e69ea9a8834fe5da997b30c8f16f27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 11 Oct 2024 17:26:08 +0200
Subject: [PATCH 19/40] fix(styles): mixed-decls for button (#3733)

---
 packages/styles/src/components/button.scss |  4 ++--
 packages/styles/src/mixins/_utilities.scss | 10 ++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 425a25309a..477398fa32 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -18,8 +18,6 @@
 @use './../placeholders/button' as button-ph;
 
 .btn {
-  @include button-mx.button-size();
-
   // Resets
   display: inline-flex;
   position: relative;
@@ -39,6 +37,8 @@
   text-decoration: none !important; // For <a> tags, !important for hover
   white-space: nowrap; // Long content should never break in buttons
 
+  @include button-mx.button-size();
+
   @include utilities.disabled-style() {
     text-decoration: line-through !important;
   }
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 1d0342456d..c53dd8740f 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -111,26 +111,24 @@
   // :has(:focus-visible) mimic a focus-visible-within pseudo-class
   &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
     outline-style: $style !important;
+    // In case rules need to be slightly adjusted
+    @content;
 
     @include high-contrast-mode() {
       outline-color: Highlight !important;
     }
-
-    // In case rules need to be slightly adjusted
-    @content;
   }
 
   // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
   @supports not selector(:has(:focus-visible)) {
     &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
       outline-style: $style !important;
+      // In case rules need to be slightly adjusted
+      @content;
 
       @include high-contrast-mode() {
         outline-color: Highlight !important;
       }
-
-      // In case rules need to be slightly adjusted
-      @content;
     }
   }
 }

From dfc1ef953f9f4a14fcc08f2992612f2e93750b28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 11 Oct 2024 17:26:40 +0200
Subject: [PATCH 20/40] fix(styles): mixed-decls for chip (#3734)

---
 packages/styles/src/components/chip.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss
index cfa625f731..73698846f6 100644
--- a/packages/styles/src/components/chip.scss
+++ b/packages/styles/src/components/chip.scss
@@ -7,10 +7,11 @@
 @use './../placeholders/badge' as badge-ph;
 
 .chip-dismissible {
-  @include chip-mx.chip-styles();
   position: relative;
   padding-inline-start: chip.$chip-dismissable-padding-start;
   gap: chip.$chip-gap;
+  @include utilities.focus-style-none();
+  @include chip-mx.chip-styles();
 
   &::before,
   &::after {
@@ -39,7 +40,6 @@
   }
 
   // set the focus ring on the close button only
-  @include utilities.focus-style-none();
   @include utilities.focus-style('::before') {
     background-color: chip.$chip-hover-bg;
   }
@@ -52,8 +52,8 @@
   max-width: 100%;
 
   &-label {
-    @include chip-mx.chip-styles();
     cursor: pointer;
+    @include chip-mx.chip-styles();
 
     > .badge {
       box-sizing: border-box;

From 27f85dd1f873c1cdc613d453c7cbeba299d29b9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 11 Oct 2024 17:27:21 +0200
Subject: [PATCH 21/40] fix(styles): mixed-decls for close (#3735)

---
 packages/styles/src/placeholders/_close.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss
index 08b424ab08..6237114ce3 100644
--- a/packages/styles/src/placeholders/_close.scss
+++ b/packages/styles/src/placeholders/_close.scss
@@ -11,13 +11,13 @@
 
 %btn-close {
   @include button-mx.reset-button;
-  @include utilities-mx.focus-style() {
-    border-radius: commons.$border-radius;
-  }
   border-radius: close.$close-border-radius;
   color: close.$close-color;
   transition: close.$close-transition;
   cursor: pointer;
+  @include utilities-mx.focus-style() {
+    border-radius: commons.$border-radius;
+  }
 
   &::before {
     @include icons-mx.icon(2043);

From 59885c0e53a6c0da9ca61a7694bb5cc89df2a7f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 11 Oct 2024 17:27:46 +0200
Subject: [PATCH 22/40] fix(styles): mixed-decls for dialog (#3736)

---
 packages/styles/src/components/dialog.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss
index f3bf5211df..0b15aafa1b 100644
--- a/packages/styles/src/components/dialog.scss
+++ b/packages/styles/src/components/dialog.scss
@@ -212,6 +212,8 @@ dialog:not([data-animation='none']) {
   }
 
   &[data-animation='slide-in'] {
+    transform: translateY(calc(var(--_dialog-slide-in-offset)));
+
     &[data-position='top'] {
       --_dialog-slide-in-offset: -3rem;
     }
@@ -220,8 +222,6 @@ dialog:not([data-animation='none']) {
       --_dialog-slide-in-offset: 3rem;
     }
 
-    transform: translateY(calc(var(--_dialog-slide-in-offset)));
-
     &[open] {
       transform: translateY(0);
 

From bf506710064a1688c20ea48c366a055d36cbeb24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 11 Oct 2024 17:28:23 +0200
Subject: [PATCH 23/40] fix(styles): mixed-decls for form-check (#3737)

---
 .../styles/src/components/form-check.scss     | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
index 896170a421..f433547db8 100644
--- a/packages/styles/src/components/form-check.scss
+++ b/packages/styles/src/components/form-check.scss
@@ -48,13 +48,6 @@
   }
 
   &-input {
-    &:not([disabled]),
-    &:not([disabled]) ~ .form-check-label {
-      cursor: pointer;
-    }
-
-    @include utility-mx.focus-style-none();
-
     display: inline-flex;
     flex: 0 auto;
     appearance: none;
@@ -63,6 +56,12 @@
     width: form-check.$form-check-input-size;
     border: form-check.$form-check-input-border-width solid currentColor;
     margin-top: 1px;
+    @include utility-mx.focus-style-none();
+
+    &:not([disabled]),
+    &:not([disabled]) ~ .form-check-label {
+      cursor: pointer;
+    }
 
     @include utility-mx.high-contrast-mode {
       border-color: FieldText; // For blink-browser as otherwise the default color (which is not a full color) will be converted to Highlight
@@ -122,6 +121,9 @@
     }
 
     &[disabled] {
+      border: 0;
+      background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
+
       &[type='checkbox'],
       &[type='radio'] {
         @include utility-mx.high-contrast-mode {
@@ -147,9 +149,6 @@
         }
       }
 
-      border: 0;
-      background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
-
       @include color-mx.on-dark-background {
         background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}');
       }

From abf9c881c586bd63978ab724ed356466a34c72aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 11 Oct 2024 17:29:07 +0200
Subject: [PATCH 24/40] fix(styles): mixed-decls for list-group (#3738)

---
 packages/styles/src/components/list-group.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/components/list-group.scss b/packages/styles/src/components/list-group.scss
index 7846b79f22..ebc233f24a 100644
--- a/packages/styles/src/components/list-group.scss
+++ b/packages/styles/src/components/list-group.scss
@@ -121,9 +121,9 @@
   }
 
   &-minimal {
-    @include type-mixins.font-curve('bigger-regular');
     padding-right: 0;
     padding-left: 0;
+    @include type-mixins.font-curve('bigger-regular');
   }
 
   &-transparent {

From 6e4705cbb8c76fb9c123c8ca97af7d2d8561dda6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 11 Oct 2024 17:29:28 +0200
Subject: [PATCH 25/40] fix(styles): mixed-decls for subnavigation (#3739)

---
 .../styles/src/components/subnavigation.scss   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/styles/src/components/subnavigation.scss b/packages/styles/src/components/subnavigation.scss
index 2a2b6f89fd..7db696a807 100644
--- a/packages/styles/src/components/subnavigation.scss
+++ b/packages/styles/src/components/subnavigation.scss
@@ -49,11 +49,6 @@ $module-name: 'subnavigation';
 
   &-link {
     @extend %font-curve-small;
-
-    @include transition(
-      color animation.$transition-time-default animation.$transition-easing-default
-    );
-
     display: flex;
     position: relative;
     align-items: center;
@@ -66,6 +61,10 @@ $module-name: 'subnavigation';
     text-decoration: none;
     white-space: nowrap;
 
+    @include transition(
+      color animation.$transition-time-default animation.$transition-easing-default
+    );
+
     @include media-breakpoint-up(lg) {
       padding: subnavigation.$subnavigation-link-padding-lg;
     }
@@ -95,15 +94,16 @@ $module-name: 'subnavigation';
         #{subnavigation.$subnavigation-link-underscore-color-hover},
         #{subnavigation.$subnavigation-link-underscore-height}
       );
+      z-index: utility-functions.z-index(subnavigation, underscore-link);
+      right: animation.$transition-distance-medium;
+      left: animation.$transition-distance-medium;
+      opacity: 0;
+
       @include transition(
         opacity animation.$transition-time-default animation.$transition-easing-default,
         left animation.$transition-time-default animation.$transition-easing-decelerate,
         right animation.$transition-time-default animation.$transition-easing-decelerate
       );
-      z-index: utility-functions.z-index(subnavigation, underscore-link);
-      right: animation.$transition-distance-medium;
-      left: animation.$transition-distance-medium;
-      opacity: 0;
 
       @include media-breakpoint-up(lg) {
         right: animation.$transition-distance-medium-md;

From d9f24d274b26a3774852c606685288f984f4495b Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Fri, 11 Oct 2024 18:00:32 +0200
Subject: [PATCH 26/40] chore: fix homepage link (#3719)

This sets the homepage field in the package.json of some packages to our
actual, nice URL.
---
 packages/changelog-github/package.json                          | 2 +-
 packages/components-angular/projects/components/package.json    | 2 +-
 packages/icons/package.json                                     | 2 +-
 .../projects/intranet-header/package.json                       | 2 +-
 packages/styles/package.json                                    | 2 +-
 packages/tokens/package.json                                    | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/changelog-github/package.json b/packages/changelog-github/package.json
index b7fc5bc4ec..aaabfc270f 100644
--- a/packages/changelog-github/package.json
+++ b/packages/changelog-github/package.json
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index aa512d26a8..67f6c19466 100644
--- a/packages/components-angular/projects/components/package.json
+++ b/packages/components-angular/projects/components/package.json
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 8ef0f70b9b..039472e5da 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
diff --git a/packages/intranet-header-workspace/projects/intranet-header/package.json b/packages/intranet-header-workspace/projects/intranet-header/package.json
index c51f39c0df..6da9d00458 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header/package.json
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 0b21ec6796..0b5d0b6b03 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index c7c338d99c..95cf397283 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -9,7 +9,7 @@
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },

From 066d9ed722a3570b53b94684d03fbf6245c18fba Mon Sep 17 00:00:00 2001
From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Date: Mon, 14 Oct 2024 20:06:46 +0200
Subject: [PATCH 27/40] =?UTF-8?q?chore(changesets):=20=F0=9F=A6=8B?=
 =?UTF-8?q?=F0=9F=93=A6=20publish=20packages=20(main)=20(next)=20(#3685)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @swisspost/design-system-styles@9.0.0-next.2

### Minor Changes

- Updated and tokenized styles for the legend element. (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3614](https://github.com/swisspost/design-system/pull/3614))

- Added styling support and documentation for the `<dialog>` element.
The dialog will replace the current modal and notification overlay
components coming from ng-bootstrap. (by
[@gfellerph](https://github.com/gfellerph) with
[#2772](https://github.com/swisspost/design-system/pull/2772))

### Patch Changes

- Wrapped new token only entry files in a CSS layer called
'design-system'. The two files affected are 'post-tokens-external.scss'
and 'post-tokens-internal.scss' as well as their compiled CSS
counterparts. (by [@gfellerph](https://github.com/gfellerph) with
[#3720](https://github.com/swisspost/design-system/pull/3720))

- Deprecated the ng-bootstrap components Modal and Notification overlay
in favor of the new Dialog component. The styles for these ng-bootstrap
components will be removed in a future major version. (by
[@gfellerph](https://github.com/gfellerph) with
[#2772](https://github.com/swisspost/design-system/pull/2772))

- Fixed an issue with element styles that were not compiled to the
output as CSS. (by [@gfellerph](https://github.com/gfellerph) with
[#3709](https://github.com/swisspost/design-system/pull/3709))

## @swisspost/design-system-components@9.0.0-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2

## @swisspost/design-system-components-angular@9.0.0-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.2

## @swisspost/design-system-components-react@9.0.0-next.2

### Patch Changes

- Initial release! (by [@gfellerph](https://github.com/gfellerph) with
[#3718](https://github.com/swisspost/design-system/pull/3718))
-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.2

## @swisspost/internet-header@1.14.6-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2

## @swisspost/design-system-intranet-header@9.0.0-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2

## @swisspost/design-system-styles-primeng@9.0.0-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2

## @swisspost/design-system-icons@9.0.0-next.2



## @swisspost/design-system-migrations@9.0.0-next.2



## @swisspost/design-system-documentation@6.0.0-next.2

### Minor Changes

- Updated and tokenized styles for the legend element. (by
[@bashirkarimi](https://github.com/bashirkarimi) with
[#3614](https://github.com/swisspost/design-system/pull/3614))

- Added styling support and documentation for the `<dialog>` element.
The dialog will replace the current modal and notification overlay
components coming from ng-bootstrap. (by
[@gfellerph](https://github.com/gfellerph) with
[#2772](https://github.com/swisspost/design-system/pull/2772))

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2
    -   @swisspost/design-system-components-react@9.0.0-next.2
    -   @swisspost/design-system-components@9.0.0-next.2
    -   @swisspost/internet-header@1.14.6-next.2
    -   @swisspost/design-system-icons@9.0.0-next.2

## @swisspost/design-system-components-angular-workspace@1.1.10-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2
    -   @swisspost/design-system-components@9.0.0-next.2

## @swisspost/design-system-intranet-header-workspace@3.0.22-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2

## @swisspost/design-system-intranet-header-showcase@1.0.10-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-intranet-header@9.0.0-next.2

## @swisspost/design-system-nextjs-integration@0.1.14-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2
    -   @swisspost/design-system-components-react@9.0.0-next.2
    -   @swisspost/internet-header@1.14.6-next.2

## @swisspost/design-system-styles-primeng-workspace@1.0.6-next.2

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.2

## @swisspost/design-system-tokens@9.0.0-next.2

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json                           |  6 +++
 packages/components-angular/CHANGELOG.md      |  8 ++++
 packages/components-angular/package.json      |  6 +--
 .../projects/components/CHANGELOG.md          |  7 +++
 .../projects/components/package.json          |  4 +-
 packages/components-react/CHANGELOG.md        |  8 ++++
 packages/components-react/package.json        |  4 +-
 packages/components/CHANGELOG.md              |  7 +++
 packages/components/package.json              |  4 +-
 packages/documentation/CHANGELOG.md           | 17 +++++++
 packages/documentation/package.json           | 16 +++----
 .../documentation/public/assets/versions.json | 34 ++++++-------
 packages/icons/CHANGELOG.md                   |  2 +
 packages/icons/package.json                   |  2 +-
 packages/internet-header/CHANGELOG.md         |  7 +++
 packages/internet-header/package.json         |  4 +-
 .../intranet-header-workspace/CHANGELOG.md    |  7 +++
 .../intranet-header-workspace/package.json    |  4 +-
 .../intranet-header-showcase/CHANGELOG.md     |  7 +++
 .../intranet-header-showcase/package.json     |  4 +-
 .../projects/intranet-header/CHANGELOG.md     |  7 +++
 .../projects/intranet-header/package.json     |  6 +--
 packages/migrations/CHANGELOG.md              |  2 +
 packages/migrations/package.json              |  2 +-
 packages/nextjs-integration/CHANGELOG.md      |  9 ++++
 packages/nextjs-integration/package.json      |  8 ++--
 .../styles-primeng-workspace/CHANGELOG.md     |  7 +++
 .../styles-primeng-workspace/package.json     |  4 +-
 .../projects/styles-primeng/CHANGELOG.md      |  7 +++
 .../projects/styles-primeng/package.json      |  4 +-
 packages/styles/CHANGELOG.md                  | 16 +++++++
 packages/styles/package.json                  |  6 +--
 packages/tokens/CHANGELOG.md                  |  2 +
 packages/tokens/package.json                  |  2 +-
 pnpm-lock.yaml                                | 48 +++++++++----------
 35 files changed, 207 insertions(+), 81 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index c665a31949..95b1e2863e 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -22,6 +22,7 @@
     "@swisspost/design-system-tokens": "8.2.0"
   },
   "changesets": [
+    "beige-jobs-do",
     "big-frogs-admire",
     "breezy-cups-add",
     "clean-icons-complain",
@@ -36,18 +37,23 @@
     "gorgeous-flowers-flow",
     "great-humans-talk",
     "heavy-rats-explode",
+    "kind-buses-trade",
     "kind-papayas-provide",
     "lemon-clocks-clean",
+    "lovely-mirrors-travel",
     "nervous-rocks-shop",
     "ninety-nails-float",
     "pink-weeks-relate",
     "plenty-apricots-raise",
+    "popular-games-rush",
     "proud-actors-knock",
     "red-lies-lick",
     "selfish-bats-run",
+    "shaggy-experts-give",
     "sharp-crews-watch",
     "six-spiders-smoke",
     "tame-terms-push",
+    "three-lies-do",
     "tidy-dolls-walk",
     "yellow-yaks-jog"
   ]
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index b58a34c25a..2565c8eb42 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.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+  - @swisspost/design-system-components@9.0.0-next.2
+
 ## 1.1.10-next.1
 
 ### Patch Changes
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index be51de464b..8cbf768223 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.1",
+  "version": "1.1.10-next.2",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.1.3",
     "@angular/platform-browser-dynamic": "18.1.3",
     "@angular/router": "18.1.3",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.1",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.2",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
     "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 087ed7e423..44c609b97f 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.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.2
+
 ## 9.0.0-next.1
 
 ### Patch Changes
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index 67f6c19466..f84662b15f 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.1",
+  "version": "9.0.0-next.2",
   "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.1"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.2"
   },
   "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 88e333652a..1af971c8e0 100644
--- a/packages/components-react/CHANGELOG.md
+++ b/packages/components-react/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.2
+
+### Patch Changes
+
+- Initial release! (by [@gfellerph](https://github.com/gfellerph) with [#3718](https://github.com/swisspost/design-system/pull/3718))
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.2
+
 ## 9.0.0-next.1
 
 ### Patch Changes
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 387f23f3a0..64de061d50 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.1",
+  "version": "9.0.0-next.2",
   "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.1"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.2"
   },
   "devDependencies": {
     "@types/node": "20.14.14",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 888081a674..621dfeaebe 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+
 ## 9.0.0-next.1
 
 ### Major Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index 36574a4d22..262c4aa775 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.1",
+  "version": "9.0.0-next.2",
   "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.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },
diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
index eb7ee10038..8057970efa 100644
--- a/packages/documentation/CHANGELOG.md
+++ b/packages/documentation/CHANGELOG.md
@@ -1,5 +1,22 @@
 # @swisspost/design-system-documentation
 
+## 6.0.0-next.2
+
+### Minor Changes
+
+- Updated and tokenized styles for the legend element. (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3614](https://github.com/swisspost/design-system/pull/3614))
+
+- Added styling support and documentation for the `<dialog>` element. The dialog will replace the current modal and notification overlay components coming from ng-bootstrap. (by [@gfellerph](https://github.com/gfellerph) with [#2772](https://github.com/swisspost/design-system/pull/2772))
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+  - @swisspost/design-system-components-react@9.0.0-next.2
+  - @swisspost/design-system-components@9.0.0-next.2
+  - @swisspost/internet-header@1.14.6-next.2
+  - @swisspost/design-system-icons@9.0.0-next.2
+
 ## 6.0.0-next.1
 
 ### Major Changes
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 0e35b8b62d..ea3eb6a054 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.1",
+  "version": "6.0.0-next.2",
   "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.1",
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.1",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.1",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
-    "@swisspost/internet-header": "workspace:1.14.6-next.1",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.2",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.2",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.2",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
+    "@swisspost/internet-header": "workspace:1.14.6-next.2",
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
@@ -53,8 +53,8 @@
     "@storybook/types": "8.3.5",
     "@storybook/web-components": "8.3.5",
     "@storybook/web-components-vite": "8.3.5",
-    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.1",
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.2",
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.2",
     "@types/css-modules": "1.0.5",
     "@types/mdx": "2.0.13",
     "@types/react": "18.3.3",
diff --git a/packages/documentation/public/assets/versions.json b/packages/documentation/public/assets/versions.json
index 0cdd6edddb..f70c2fbab3 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.1",
+    "version": "9.0.0-next.2",
     "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
     "url": "https://design-system.post.ch",
     "dependencies": {
@@ -9,22 +9,22 @@
       "@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.1",
-      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.1",
-      "@swisspost/design-system-components-angular": "9.0.0-next.1",
-      "@swisspost/design-system-components-react": "9.0.0-next.1",
-      "@swisspost/design-system-documentation": "6.0.0-next.1",
-      "@swisspost/design-system-icons": "9.0.0-next.1",
-      "@swisspost/internet-header": "1.14.6-next.1",
-      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.1",
-      "@swisspost/design-system-intranet-header": "9.0.0-next.1",
-      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.1",
-      "@swisspost/design-system-migrations": "9.0.0-next.1",
-      "@swisspost/design-system-nextjs-integration": "0.1.14-next.1",
-      "@swisspost/design-system-styles": "9.0.0-next.1",
-      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.1",
-      "@swisspost/design-system-styles-primeng": "9.0.0-next.1",
-      "@swisspost/design-system-tokens": "9.0.0-next.1"
+      "@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/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 35af5cf54a..fb8a18da6e 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-icons
 
+## 9.0.0-next.2
+
 ## 9.0.0-next.1
 
 ## 9.0.0-next.0
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 039472e5da..90b96e7fa9 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.1",
+  "version": "9.0.0-next.2",
   "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/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md
index c017feb6f3..0d555790e7 100644
--- a/packages/internet-header/CHANGELOG.md
+++ b/packages/internet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/internet-header
 
+## 1.14.6-next.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+
 ## 1.14.6-next.1
 
 ### Patch Changes
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
index 88c02c0d4a..6323803928 100644
--- a/packages/internet-header/package.json
+++ b/packages/internet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/internet-header",
-  "version": "1.14.6-next.1",
+  "version": "1.14.6-next.2",
   "description": "The header for client facing applications.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
     "body-scroll-lock": "4.0.0-beta.0",
     "iframe-resizer": "4.4.5",
     "jquery": "3.7.1",
diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md
index 1263aafc62..77d8d925e7 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.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+
 ## 3.0.22-next.1
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
index 783f2a1c83..6c89a9ef5d 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.1",
+  "version": "3.0.22-next.2",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -23,7 +23,7 @@
     "@angular/router": "18.1.3",
     "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@popperjs/core": "2.11.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
     "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 6dde7874d4..796df4195c 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.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-intranet-header@9.0.0-next.2
+
 ## 1.0.10-next.1
 
 ### 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 d5a31a03fe..2d795f9ee1 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.1",
+  "version": "1.0.10-next.2",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.1"
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.2"
   }
 }
diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
index 0bd21864af..4052d9d1d8 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.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+
 ## 9.0.0-next.1
 
 ### 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 6da9d00458..795b93fe41 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.1",
+  "version": "9.0.0-next.2",
   "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.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
     "tslib": "2.6.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.1"
+    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.2"
   },
   "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 00931819ad..3209260e59 100644
--- a/packages/migrations/CHANGELOG.md
+++ b/packages/migrations/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-migrations
 
+## 9.0.0-next.2
+
 ## 9.0.0-next.1
 
 ## 9.0.0-next.0
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index 104c9d70e2..3b8825b2c0 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.1",
+  "version": "9.0.0-next.2",
   "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 619dbc6087..193d5ffc84 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.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+  - @swisspost/design-system-components-react@9.0.0-next.2
+  - @swisspost/internet-header@1.14.6-next.2
+
 ## 0.1.14-next.1
 
 ### Patch Changes
diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json
index d19d1bc3ed..b9952962f0 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.1",
+  "version": "0.1.14-next.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.1",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
-    "@swisspost/internet-header": "workspace:1.14.6-next.1",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.2",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
+    "@swisspost/internet-header": "workspace:1.14.6-next.2",
     "next": "14.2.10",
     "react": "^18",
     "react-dom": "^18"
diff --git a/packages/styles-primeng-workspace/CHANGELOG.md b/packages/styles-primeng-workspace/CHANGELOG.md
index 10b0690cb4..5c103ccaaa 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.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+
 ## 1.0.6-next.1
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json
index be124dee37..fd7dfdef1c 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.1",
+  "version": "1.0.6-next.2",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -22,7 +22,7 @@
     "@angular/platform-browser": "18.1.3",
     "@angular/platform-browser-dynamic": "18.1.3",
     "@angular/router": "18.1.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
     "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 022e3e5d4a..bacee2e41a 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.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+
 ## 9.0.0-next.1
 
 ### 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 be9b67e10b..d6b96cf7e1 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.1",
+  "version": "9.0.0-next.2",
   "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.1",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
     "tslib": "2.6.3"
   },
   "sideEffects": false,
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 367208c2cf..06adf0981a 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -1,5 +1,21 @@
 # @swisspost/design-system-styles
 
+## 9.0.0-next.2
+
+### Minor Changes
+
+- Updated and tokenized styles for the legend element. (by [@bashirkarimi](https://github.com/bashirkarimi) with [#3614](https://github.com/swisspost/design-system/pull/3614))
+
+- Added styling support and documentation for the `<dialog>` element. The dialog will replace the current modal and notification overlay components coming from ng-bootstrap. (by [@gfellerph](https://github.com/gfellerph) with [#2772](https://github.com/swisspost/design-system/pull/2772))
+
+### Patch Changes
+
+- Wrapped new token only entry files in a CSS layer called 'design-system'. The two files affected are 'post-tokens-external.scss' and 'post-tokens-internal.scss' as well as their compiled CSS counterparts. (by [@gfellerph](https://github.com/gfellerph) with [#3720](https://github.com/swisspost/design-system/pull/3720))
+
+- Deprecated the ng-bootstrap components Modal and Notification overlay in favor of the new Dialog component. The styles for these ng-bootstrap components will be removed in a future major version. (by [@gfellerph](https://github.com/gfellerph) with [#2772](https://github.com/swisspost/design-system/pull/2772))
+
+- Fixed an issue with element styles that were not compiled to the output as CSS. (by [@gfellerph](https://github.com/gfellerph) with [#3709](https://github.com/swisspost/design-system/pull/3709))
+
 ## 9.0.0-next.1
 
 ### Major Changes
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 0b5d0b6b03..4769a69844 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.1",
+  "version": "9.0.0-next.2",
   "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.1",
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.1",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.2",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.2",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
index cfc4196db4..66e513b8ec 100644
--- a/packages/tokens/CHANGELOG.md
+++ b/packages/tokens/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-tokens
 
+## 9.0.0-next.2
+
 ## 9.0.0-next.1
 
 ## 9.0.0-next.0
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 95cf397283..aa6858725e 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-tokens",
-  "version": "9.0.0-next.1",
+  "version": "9.0.0-next.2",
   "private": true,
   "description": "Design Tokens for the Swiss Post.",
   "author": "Swiss Post <design-system@post.ch>",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f481760f69..9b04bb41bc 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.1
+        specifier: workspace:9.0.0-next.2
         version: link:../styles/dist
       ally.js:
         specifier: 1.4.1
@@ -150,10 +150,10 @@ importers:
         specifier: 18.1.3
         version: 18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.1.3(@angular/animations@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../components
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -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.1
+        specifier: workspace:9.0.0-next.2
         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.1
+        specifier: workspace:9.0.0-next.2
         version: link:../components
     devDependencies:
       '@types/node':
@@ -294,19 +294,19 @@ importers:
   packages/documentation:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../components
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../components-react
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../icons
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:1.14.6-next.1
+        specifier: workspace:1.14.6-next.2
         version: link:../internet-header
       bootstrap:
         specifier: 5.3.3
@@ -364,10 +364,10 @@ importers:
         specifier: 8.3.5
         version: 8.3.5(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@20.14.14)(less@4.2.0)(sass@1.78.0)(terser@5.29.2))
       '@swisspost/design-system-components-angular':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../components-angular/dist/components
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         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.1
+        specifier: workspace:9.0.0-next.2
         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.1
+        specifier: workspace:9.0.0-next.2
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -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.1
+        specifier: workspace:9.0.0-next.2
         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.1
+        specifier: workspace:3.0.22-next.2
         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.1
+        specifier: workspace:9.0.0-next.2
         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.1
+        specifier: workspace:9.0.0-next.2
         version: link:../components-react
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:1.14.6-next.1
+        specifier: workspace:1.14.6-next.2
         version: link:../internet-header
       next:
         specifier: 14.2.10
@@ -875,10 +875,10 @@ importers:
         version: 3.0.0
     devDependencies:
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../icons
       '@swisspost/design-system-tokens':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../tokens/dist
       '@types/node':
         specifier: 20.14.14
@@ -969,7 +969,7 @@ importers:
         specifier: 18.1.3
         version: 18.1.3(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.1.3(@angular/animations@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.1.3(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.1.3(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.1
+        specifier: workspace:9.0.0-next.2
         version: link:../styles/dist
       primeng:
         specifier: 17.18.7
@@ -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.1
+        specifier: workspace:9.0.0-next.2
         version: link:../../../styles/dist
       primeng:
         specifier: ^17.18.0

From c1749e50c162b7c7fa8b779b12c9aff204f716e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Tue, 15 Oct 2024 17:07:15 +0200
Subject: [PATCH 28/40] feat(tokens): add newest tokens (#3758)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com>
Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .../tokens/tokensstudio-generated/tokens.json | 345 ++++++++++++------
 1 file changed, 230 insertions(+), 115 deletions(-)

diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json
index 0549fddcbc..24bf7a1396 100644
--- a/packages/tokens/tokensstudio-generated/tokens.json
+++ b/packages/tokens/tokensstudio-generated/tokens.json
@@ -810,7 +810,7 @@
                   },
                   "bg-inverted": {
                     "$type": "color",
-                    "$value": "{post.core.color.sandgrey.100}"
+                    "$value": "{post.core.color.colorless}"
                   },
                   "stroke-inverted": {
                     "$type": "color",
@@ -836,7 +836,7 @@
                   },
                   "bg-inverted": {
                     "$type": "color",
-                    "$value": "{post.core.color.sandgrey.070}"
+                    "$value": "{post.core.color.sandgrey.alpha.lightsand.10}"
                   },
                   "stroke-inverted": {
                     "$type": "color",
@@ -862,7 +862,7 @@
                   },
                   "bg-inverted": {
                     "$type": "color",
-                    "$value": "{post.core.color.sandgrey.060}"
+                    "$value": "{post.core.color.sandgrey.alpha.lightsand.30}"
                   },
                   "stroke-inverted": {
                     "$type": "color",
@@ -916,7 +916,7 @@
                   },
                   "bg-inverted": {
                     "$type": "color",
-                    "$value": "{post.core.color.sandgrey.070}"
+                    "$value": "{post.core.color.sandgrey.alpha.lightsand.10}"
                   },
                   "stroke-inverted": {
                     "$type": "color",
@@ -942,7 +942,7 @@
                   },
                   "bg-inverted": {
                     "$type": "color",
-                    "$value": "{post.core.color.sandgrey.060}"
+                    "$value": "{post.core.color.sandgrey.alpha.lightsand.30}"
                   },
                   "stroke-inverted": {
                     "$type": "color",
@@ -2209,6 +2209,10 @@
               "size2": {
                 "$type": "sizing",
                 "$value": "{post.core.dimension.24}"
+              },
+              "size3": {
+                "$type": "sizing",
+                "$value": "{post.core.dimension.40}"
               }
             },
             "textfields": {
@@ -2986,7 +2990,7 @@
           },
           "8": {
             "$type": "fontSizes",
-            "$value": "{post.core.font-size.14}"
+            "$value": "{post.core.font-size.16}"
           },
           "9": {
             "$type": "fontSizes",
@@ -3910,6 +3914,72 @@
       }
     }
   },
+  "Components/Avatar": {
+    "post": {
+      "avatar": {
+        "size": {
+          "$type": "sizing",
+          "$value": "{post.device.sizing.interactive.icon.size3}"
+        },
+        "enabled-bg": {
+          "$type": "color",
+          "$value": "{post.mode.color.interactive.primary.enabled.bg2}"
+        },
+        "enabled-fg": {
+          "$type": "color",
+          "$value": "{post.mode.color.interactive.primary.enabled.fg3}"
+        },
+        "border-width": {
+          "$type": "borderWidth",
+          "$value": "{post.device.border-width.default}"
+        },
+        "border-radius": {
+          "$type": "borderRadius",
+          "$value": "{post.device.border-radius.round}"
+        },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{post.device.font-size.8}"
+        },
+        "focus": {
+          "outline-width": {
+            "$type": "borderWidth",
+            "$value": "{post.device.border-width.focus}"
+          },
+          "outline": {
+            "offset": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.gap.2}"
+            },
+            "color": {
+              "$type": "color",
+              "$value": "{post.mode.color.interactive.focus.stroke}"
+            }
+          }
+        },
+        "image": {
+          "hover-opacity": {
+            "$type": "color",
+            "$value": "{post.core.color.sandgrey.alpha.lightsand.50}"
+          }
+        },
+        "hover-bg": {
+          "$type": "color",
+          "$value": "{post.mode.color.interactive.primary.hover.bg2}"
+        },
+        "border": {
+          "color": {
+            "$type": "color",
+            "$value": "{post.mode.color.interactive.primary.enabled.stroke3}"
+          }
+        },
+        "hover-fg": {
+          "$type": "color",
+          "$value": "{post.mode.color.interactive.primary.hover.fg3}"
+        }
+      }
+    }
+  },
   "Components/Badge": {
     "post": {
       "badge": {
@@ -5435,92 +5505,6 @@
   "Components/List": {
     "post": {
       "list": {
-        "simple": {
-          "checks": {
-            "sizing": {
-              "icon": {
-                "$type": "sizing",
-                "$value": "{post.device.sizing.icon.1}"
-              }
-            },
-            "padding": {
-              "icon": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.16}"
-              },
-              "text": {
-                "$type": "spacing",
-                "$value": "{post.device.spacing.padding.block.6}"
-              },
-              "block": {
-                "outer": {
-                  "$type": "spacing",
-                  "$value": "{post.device.spacing.padding.5}"
-                }
-              }
-            },
-            "gap": {
-              "inline": {
-                "text": {
-                  "$type": "spacing",
-                  "$value": "{post.device.spacing.gap.inline.2}"
-                }
-              },
-              "block": {
-                "text": {
-                  "$type": "spacing",
-                  "$value": "{post.device.spacing.gap.block.3}"
-                }
-              }
-            },
-            "icon": {
-              "container": {
-                "inline": {
-                  "$type": "spacing",
-                  "$value": "{post.device.spacing.padding.4}"
-                },
-                "block": {
-                  "$type": "spacing",
-                  "$value": "{post.device.spacing.padding.18}"
-                }
-              }
-            }
-          },
-          "bullets": {
-            "spacing": {
-              "padding": {
-                "text": {
-                  "$type": "spacing",
-                  "$value": "{post.device.spacing.padding.block.6}"
-                }
-              },
-              "gap": {
-                "inline": {
-                  "text": {
-                    "$type": "spacing",
-                    "$value": "{post.device.spacing.gap.inline.10}"
-                  }
-                }
-              }
-            }
-          }
-        },
-        "checks": {
-          "color": {
-            "icon-bg": {
-              "$type": "color",
-              "$value": "{post.mode.color.surface.accent4.bg}"
-            },
-            "icon-fg": {
-              "$type": "color",
-              "$value": "{post.mode.color.surface.accent4.fg}"
-            },
-            "text-fg": {
-              "$type": "color",
-              "$value": "{post.mode.color.interactive.primary.enabled.fg1}"
-            }
-          }
-        },
         "item": {
           "padding": {
             "inline": {
@@ -5624,6 +5608,114 @@
               "$value": "{post.device.spacing.padding.block.18}"
             }
           }
+        },
+        "margin": {
+          "block": {
+            "$type": "spacing",
+            "$value": "{post.device.spacing.padding.block.8}"
+          }
+        },
+        "bg": {
+          "$type": "color",
+          "$value": "{post.mode.color.surface.default.bg}"
+        }
+      }
+    }
+  },
+  "Components/List simple": {
+    "post": {
+      "list": {
+        "simple": {
+          "checks": {
+            "sizing": {
+              "icon": {
+                "$type": "sizing",
+                "$value": "{post.device.sizing.icon.1}"
+              }
+            },
+            "padding": {
+              "icon": {
+                "$type": "spacing",
+                "$value": "{post.device.spacing.padding.16}"
+              },
+              "text": {
+                "$type": "spacing",
+                "$value": "{post.device.spacing.padding.block.6}"
+              },
+              "block": {
+                "outer": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.5}"
+                }
+              }
+            },
+            "gap": {
+              "inline": {
+                "text": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.gap.inline.2}"
+                }
+              },
+              "block": {
+                "text": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.gap.block.3}"
+                }
+              }
+            },
+            "icon": {
+              "container": {
+                "inline": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.4}"
+                },
+                "block": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.18}"
+                }
+              }
+            }
+          },
+          "bullets": {
+            "spacing": {
+              "padding": {
+                "text": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.block.6}"
+                }
+              },
+              "gap": {
+                "inline": {
+                  "text": {
+                    "$type": "spacing",
+                    "$value": "{post.device.spacing.gap.inline.10}"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "checks": {
+          "color": {
+            "icon-bg": {
+              "$type": "color",
+              "$value": "{post.mode.color.surface.accent4.bg}"
+            },
+            "icon-fg": {
+              "$type": "color",
+              "$value": "{post.mode.color.surface.accent4.fg}"
+            },
+            "text-fg": {
+              "$type": "color",
+              "$value": "{post.mode.color.interactive.primary.enabled.fg1}"
+            }
+          },
+          "margin": {
+            "block": {
+              "$type": "spacing",
+              "$value": "{post.device.spacing.padding.block.8}"
+            }
+          }
         }
       }
     }
@@ -8079,6 +8171,7 @@
         "post.core.dimension.96": "c284ed2b1cd135012ce6f9a7b7709b031550b4ab",
         "post.core.dimension.100": "a6b405b6955da9114e41712fd7f8413e018c81c9",
         "post.core.dimension.112": "483e4eb70ead94af3bac5727f4021e10f46e6eaf",
+        "post.core.dimension.1280": "80e7b3e1755e8cdce684d233544da4d76fd698dc",
         "post.core.dimension.5-5": "972288dd1addb9aae5e34073da7683bc7f0a99fd",
         "post.core.dimension.6-5": "ef1aee12a8f7f938117c4de244a4f37d7dfad29f",
         "post.core.dimension.4-5": "4bdff2ecd88fa32f393698921bced3153c49b909",
@@ -8109,8 +8202,7 @@
         "post.core.letter-spacing.none": "195c468fa2f255470e6e8077bfc5cb14da225064",
         "post.core.font-family.frutiger": "7a8104756190e8b94f97c29243dd5d7d142a7065",
         "post.core.font-family.swiss-post": "5547f71fafbe8166ac0384fd4e8862796da43fea",
-        "post.core.font-family.caveat": "15b599e49f27297ab4aced39752df2cf43f2bb20",
-        "post.core.dimension.1280": "80e7b3e1755e8cdce684d233544da4d76fd698dc"
+        "post.core.font-family.caveat": "15b599e49f27297ab4aced39752df2cf43f2bb20"
       }
     },
     {
@@ -8578,6 +8670,7 @@
         "post.device.spacing.padding.inline.1": "6dd0e239a4087795199f786e69f14b6a93ff485c",
         "post.device.spacing.padding.inline.4": "255cacee7bf87ef4ca8143f3234f5ae6239e9c53",
         "post.device.spacing.padding.block.5": "12aa516946fda5276cad33a82917f9a28cc78bf1",
+        "post.device.sizing.interactive.icon.size3": "2d6b0a326866829ebae61170bdd76c65456bd604",
         "post.device.sizing.interactive.textfields.dropdown": "2c0942fd50bd63a9509f8550fc6a38642e9001d8",
         "post.device.border-radius.1": "bf9efed364999a9ef84bdb512985ac9f6fdbec1d",
         "post.device.border-radius.round": "055c77f9d3dcf72433a5321df80ed3a62e9501b2",
@@ -8733,6 +8826,7 @@
         "post.device.spacing.padding.block.15": "b2a434eb28279be77246ffac732334fe984ed0b1",
         "post.device.spacing.padding.block.18": "606cdbae432937aed9642fc93f74af42c0aaeac4",
         "post.device.spacing.padding.block.19": "35c06becdcfcbcaca8aa9be55c071d8a595fc0b0",
+        "post.device.sizing.interactive.icon.size3": "2d6b0a326866829ebae61170bdd76c65456bd604",
         "post.device.sizing.interactive.textfields.dropdown": "2c0942fd50bd63a9509f8550fc6a38642e9001d8",
         "post.device.sizing.interactive.button.height.5": "436a60e0ceb2a414cf67c83f22509f2eaeeba7cb",
         "post.device.sizing.interactive.button.icon.6": "3a79fafdf0edac10e89188baab62e2b2a37e4d67",
@@ -8871,6 +8965,7 @@
         "post.device.sizing.interactive.icon.width": "8fea35207b61496ef007e6cf83e7983d1386be76",
         "post.device.sizing.interactive.icon.size": "a7269590e4d43349d7c74194f91278bacc6d7955",
         "post.device.sizing.interactive.icon.size2": "7cea78d105586f14c382f30667405f5ac18545f6",
+        "post.device.sizing.interactive.icon.size3": "2d6b0a326866829ebae61170bdd76c65456bd604",
         "post.device.sizing.interactive.textfields.icon": "c6ce6c8537f69d8dcd20f710c1fcd38ee7915e4c",
         "post.device.sizing.interactive.textfields.dropdown": "2c0942fd50bd63a9509f8550fc6a38642e9001d8",
         "post.device.sizing.interactive.stepper.indicator": "da5a12871e0e8fd98b8d214909c46c5d775861dc",
@@ -8911,8 +9006,8 @@
         "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30",
         "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
         "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
-        "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
-        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9"
+        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9",
+        "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c"
       }
     },
     {
@@ -9230,7 +9325,9 @@
         "Utilities/Color": "source",
         "Components/App store badge": "enabled",
         "Components/Form footer": "enabled",
-        "Components/Grid": "enabled"
+        "Components/Grid": "enabled",
+        "Components/List simple": "enabled",
+        "Components/Avatar": "enabled"
       },
       "$figmaCollectionId": "VariableCollectionId:808:5504",
       "$figmaModeId": "808:0",
@@ -9243,6 +9340,14 @@
         "post.app-store.focus.outline.color": "77f9914002cf889b0f53dab6fdc611a16e147a5e",
         "post.app-store.focus.outline-width": "db9852513a3a04b96d048ed203f1019be482843d",
         "post.app-store.border-radius": "aa40618f5c2c44b080a7da802ff1cfee577cdc7f",
+        "post.avatar.size": "fdc1484ed63e645974c9a435ca62dd46b26a84e0",
+        "post.avatar.border-width": "2baed26616e4f57e9f0d918307a9ab81b5943a1f",
+        "post.avatar.border-radius": "678ffd41a7a2b40ecda04f9934a7c5f3a46af947",
+        "post.avatar.font-size": "a6f355062eaa456bf2a08bd812e990d0e799ef28",
+        "post.avatar.focus.outline-width": "00c1775287d56489f956cac4b326066f6484a341",
+        "post.avatar.focus.outline.offset": "5bd301c5170ad3d660fb070eca4341ced50b5008",
+        "post.avatar.focus.outline.color": "c0afc6c16022ba4ac8d1119fb79d2b6e8326a665",
+        "post.avatar.border.color": "90487aa720710673a56fdd65f24fe8d00ff0aeaa",
         "post.badge.bg": "c20dfd9639c61755321be20d24f88bfb50fc9832",
         "post.badge.fg": "4b08c2c1f32eab0e4964da479f7d856f8d776cef",
         "post.badge.stroke": "76ca5d074874c7609f45effffb5684cdb0ae7962",
@@ -9383,6 +9488,7 @@
         "post.checkbox.focus.border-radius": "f4e43b666081d5a3bbd1ea30f5e8e580dbb21f96",
         "post.checkbox.gap.block.group": "c87709f94c2c59282e5bcfc93d28ea57339d29be",
         "post.checkbox.gap.inline.text-start": "6a0ccb17874af047442e69a9ea84440679f3a4e7",
+        "post.checkbox.gap.inline.group": "e65d5b65b7b21225e8e823f960cdc68f730d225b",
         "post.checkbox.icon.border-width": "df706a4acde93afd0c8a6c08650212691c753a4d",
         "post.checkbox.icon.size": "bacfefb76323eaf5cbec8ca21a1b228051dfc310",
         "post.checkbox.icon.padding.container": "e9e51839824fee21aa30c8e627bc8d8506989bf7",
@@ -9391,7 +9497,6 @@
         "post.checkbox.border-radius": "d7f2f321d3f6aa26b82e92bdddc71e8278b2d45a",
         "post.checkbox.group.legend.font-size": "5b0316a7c8f172a8c450b37de8030c2fafdd3b64",
         "post.checkbox.label.padding.block": "1f0dbe15a811f9ac9a6699131a7925b19b90da68",
-        "post.checkbox.gap.inline.group": "e65d5b65b7b21225e8e823f960cdc68f730d225b",
         "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",
@@ -9490,19 +9595,6 @@
         "post.icon-button.border-width": "ce734619b02f237a105c715ec54a4564e98aa0a0",
         "post.lead.font-size": "faf5dba2f96d4f89a72ee8e380d9c5dabd286beb",
         "post.lead-font-weight": "5f2c7a3dd41d479f8b11e5b1dbfe462152e54aa0",
-        "post.list.simple.checks.sizing.icon": "bb5abf0a86b093084f08e078f8f4ad9947a52b72",
-        "post.list.simple.checks.padding.icon": "59c39e7014cf31f71f657d6a7034186a35e63012",
-        "post.list.simple.checks.padding.text": "a8a03d1e0221fd52a61abb27246f0ee435aea686",
-        "post.list.simple.checks.padding.block.outer": "fc4a948d80c33f7f485e1559a701c795b136185c",
-        "post.list.simple.checks.gap.inline.text": "6c150a26e38d619d9d0e35a364b2fba9d86a60d7",
-        "post.list.simple.checks.gap.block.text": "6cf9bbb003a5295246f02134089019f9abda52ca",
-        "post.list.simple.checks.icon.container.inline": "7b56b23c45c26a3d4bd0dd76f84e74cede898c57",
-        "post.list.simple.checks.icon.container.block": "670186a5b10d70027009f3e318cc99fc0a2c822f",
-        "post.list.simple.bullets.spacing.padding.text": "f20b175bc4f0a3da29a9c6838af1231fa0a67400",
-        "post.list.simple.bullets.spacing.gap.inline.text": "7a53d3141b532fd4204d2ab1fc49c676b10c0107",
-        "post.list.checks.color.icon-bg": "fae4fd2c5bc7dec515b82a34ae4279361d3aad86",
-        "post.list.checks.color.icon-fg": "16cd2459165982f548ff3971fba0746e6be362a1",
-        "post.list.checks.color.text-fg": "570728a610b063ec0e5c8abb631f23173079187d",
         "post.list.item.padding.inline.start": "f7f1ba4ae736cfe139c14f5d2da5834c6555c8c0",
         "post.list.item.padding.inline.end": "f89ce359dcd178ea9994cf93e962e4c8ac437b7e",
         "post.list.item.padding.block.start": "11f6bc404467908a5a162c5d014ba825e488fe4a",
@@ -9513,14 +9605,30 @@
         "post.list.item.enabled-fg": "4a570668b7059b0822f1e137471f2d255cc62f19",
         "post.list.item.hover-fg": "f7051e304ecb770746a86ddbc231512baa96245b",
         "post.list.item.focus.outline.offset": "d066bc28e9b22c828149b8612a34becf5837f5f6",
+        "post.list.item.focus.outline.color": "0846e0ff8d338fd370fbff218c1ec6c81ba02ed3",
         "post.list.item.focus.outline-width": "116e43c79d38c471881a79d5eb170f810ee72640",
+        "post.list.item.focus.outline-radius": "da1e12bc7bde2114427b1ed43baeb55c0c7dd5eb",
         "post.list.item.border-width": "bcd8aacad9ea04c34d9b9a6195caff661a48f581",
         "post.list.icon.container.padding.block": "2c63130c7c5cc820bceda75d7711862518504a8b",
         "post.list.icon.container.padding.inline": "59b199c894c721103fb3826da4dad5363f85bfdf",
         "post.list.icon.size": "26403e806c4c3551bc29609b720cd1ee98b77132",
         "post.list.switch.padding.block": "f4d818760b6afc45e334e50776ad152fb18d54d9",
-        "post.list.item.focus.outline.color": "0846e0ff8d338fd370fbff218c1ec6c81ba02ed3",
-        "post.list.item.focus.outline-radius": "da1e12bc7bde2114427b1ed43baeb55c0c7dd5eb",
+        "post.list.margin.block": "d53e96d1e948088deafee9bd8fb5a84edacb868e",
+        "post.list.bg": "3ae4e2a10ad075b1d4d5f45253a54cd648336989",
+        "post.list.simple.checks.sizing.icon": "bb5abf0a86b093084f08e078f8f4ad9947a52b72",
+        "post.list.simple.checks.padding.icon": "59c39e7014cf31f71f657d6a7034186a35e63012",
+        "post.list.simple.checks.padding.text": "a8a03d1e0221fd52a61abb27246f0ee435aea686",
+        "post.list.simple.checks.padding.block.outer": "fc4a948d80c33f7f485e1559a701c795b136185c",
+        "post.list.simple.checks.gap.inline.text": "6c150a26e38d619d9d0e35a364b2fba9d86a60d7",
+        "post.list.simple.checks.gap.block.text": "6cf9bbb003a5295246f02134089019f9abda52ca",
+        "post.list.simple.checks.icon.container.inline": "7b56b23c45c26a3d4bd0dd76f84e74cede898c57",
+        "post.list.simple.checks.icon.container.block": "670186a5b10d70027009f3e318cc99fc0a2c822f",
+        "post.list.simple.bullets.spacing.padding.text": "f20b175bc4f0a3da29a9c6838af1231fa0a67400",
+        "post.list.simple.bullets.spacing.gap.inline.text": "7a53d3141b532fd4204d2ab1fc49c676b10c0107",
+        "post.list.checks.color.icon-bg": "fae4fd2c5bc7dec515b82a34ae4279361d3aad86",
+        "post.list.checks.color.icon-fg": "16cd2459165982f548ff3971fba0746e6be362a1",
+        "post.list.checks.color.text-fg": "570728a610b063ec0e5c8abb631f23173079187d",
+        "post.list.checks.margin.block": "d299b40b073470d2b17eab110d34bdd43233bd69",
         "post.infobox.sizing.icon": "7dd519c929ff034c7e25825ed27a3d0bf99bdc1d",
         "post.infobox.spacing.gap.inline": "ac6c1c2265e3a937117dc72b1fc0181204661585",
         "post.clickable.spacing.padding.icon": "4ef4cc91db7e7d5643bfedae838969e76322b6fe",
@@ -9590,6 +9698,7 @@
         "post.radio-button.focus.outline.offset": "28cb3442544ef6bf2eb3dc1ad8a550d38269ac61",
         "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",
@@ -9601,7 +9710,6 @@
         "post.radio-button.padding.block.group": "990db7096901d16ae10b01800015dece8805bd03",
         "post.radio-button.group.legend.font-size": "173ff3bf123931fc8325fe9156404613a57b8b78",
         "post.radio-button.label.padding.block": "9aa1af7161cf43024101355d41b51c12692a6bf9",
-        "post.radio-button.gap.inline.group": "0d348d17ca88dc80d153be265c58c3ff2c501b4f",
         "post.select.enabled-bg": "56831cf2f49031708c75a392aa1d337d53265db8",
         "post.select.enabled-fg": "f84ea1c81840d02a75bcf62682632a8853f85ad7",
         "post.select.hover-bg": "1c8c858d517f620cf044cb2cb8ebfa29233d2115",
@@ -9813,7 +9921,12 @@
         "post.validation.list.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2",
         "post.validation.list.padding.block.text": "37b3685608b0a7ee4bdc297d80ea55c77856c2ee",
         "post.validation.error": "796bdb2fc917b5948438070371ae60d214216795",
-        "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371"
+        "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371",
+        "post.avatar.enabled-bg": "1863e011a6589c655c1f6ce1b3fa63e4153719e2",
+        "post.avatar.enabled-fg": "9fbe58313d6bf87fab98be4e81191e79f1a038b0",
+        "post.avatar.image.hover-opacity": "2659b79bad8b084a6be14379c73d2b9fe8ff893c",
+        "post.avatar.hover-bg": "ac1cb946a9c9eba579dc69e06ddbb685dbce5dd8",
+        "post.avatar.hover-fg": "a23cdafe5339df135a601e47dce7964ed8269528"
       }
     },
     {
@@ -9937,6 +10050,7 @@
       "Elements/ListNumber",
       "Elements/Legend",
       "Components/App store badge",
+      "Components/Avatar",
       "Components/Badge",
       "Components/Banner",
       "Components/Breadcrumb",
@@ -9949,6 +10063,7 @@
       "Components/Icon button",
       "Components/Lead",
       "Components/List",
+      "Components/List simple",
       "Components/Notifications",
       "Components/Popover",
       "Components/Radio button",

From 3c3cc5d2cbb946aa9d24c04a7e3032b3602ac49b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Tue, 15 Oct 2024 17:11:39 +0200
Subject: [PATCH 29/40] fix(styles): mixed decls for floating-label (#3742)

---
 packages/styles/src/components/floating-label.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 0fa0c65dab..b756a57e85 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -100,14 +100,15 @@
     }
 
     &.form-control-sm {
-      &[type='date']::-webkit-calendar-picker-indicator {
-        margin-top: -(spacing.$size-small-regular);
-      }
       font-size: forms.$form-floating-label-font-size-placeholder-sm;
       height: forms.$form-floating-label-height-sm;
       min-height: forms.$form-floating-label-height-sm;
       padding-inline: forms.$form-floating-padding-x-sm;
 
+      &[type='date']::-webkit-calendar-picker-indicator {
+        margin-top: -(spacing.$size-small-regular);
+      }
+
       ~ label {
         font-size: forms.$form-floating-label-font-size-placeholder-sm;
         padding-top: forms.$form-floating-label-padding-t-sm;

From 8163e97b18791ea26ff749d164221cd0175a5796 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Tue, 15 Oct 2024 17:11:56 +0200
Subject: [PATCH 30/40] fix(style): mixed decls in notification mixin (#3741)

---
 packages/styles/.stylelintrc                  |  5 +----
 packages/styles/src/mixins/_notification.scss | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/styles/.stylelintrc b/packages/styles/.stylelintrc
index afc29c9fc2..1ad112b652 100644
--- a/packages/styles/.stylelintrc
+++ b/packages/styles/.stylelintrc
@@ -1,9 +1,6 @@
 {
   "plugins": ["stylelint-scss"],
-  "extends": [
-    "stylelint-config-sass-guidelines",
-    "stylelint-prettier/recommended"
-  ],
+  "extends": ["stylelint-config-sass-guidelines", "stylelint-prettier/recommended"],
   "rules": {
     "max-nesting-depth": 5,
     "selector-max-compound-selectors": 5,
diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index c861a4509b..700760279a 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -79,10 +79,13 @@
 @mixin notification-body($size) {
   $hr-margin-block: map.get(notification.$notification-hr-margin-block-map, $size);
 
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: notification.$notification-body-gap;
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: notification.$notification-body-gap;
+  }
 
   a {
     font-weight: notification.$notification-link-font-weight;
@@ -124,9 +127,12 @@
 @mixin notification-dismissible($size, $close: 'btn-close') {
   $padding-x: map.get(notification.$notification-padding-x-map, $size);
 
-  pointer-events: auto;
-  position: relative;
-  padding-inline-end: $padding-x + notification.$notification-gap + close.$close-size;
+  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
+  & {
+    pointer-events: auto;
+    position: relative;
+    padding-inline-end: $padding-x + notification.$notification-gap + close.$close-size;
+  }
 
   > .#{$close} {
     position: absolute;

From 47c16371c5e9c614d8dca821d818cf3c40ac8405 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Tue, 15 Oct 2024 17:19:16 +0200
Subject: [PATCH 31/40] chore(documentation): update design system team in
 footer (#3706)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .../.storybook/blocks/footer.tsx              | 99 +++++++++++++++----
 .../.storybook/blocks/layout/layout.scss      | 82 ++++++++++++---
 2 files changed, 148 insertions(+), 33 deletions(-)

diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
index a64503e76b..2f58d78201 100644
--- a/packages/documentation/.storybook/blocks/footer.tsx
+++ b/packages/documentation/.storybook/blocks/footer.tsx
@@ -1,26 +1,78 @@
 import React from 'react';
 
-interface Developer {
+interface TeamMember {
   name: string;
   title: string;
-  avatar: string;
+  githubImageId: string;
+  githubUsername: string;
 }
 
-const DEVELOPERS: Developer[] = [
+const TEAM_MEMBERS: TeamMember[] = [
   {
     name: 'Philipp Gfeller',
-    title: 'Lead UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/1659006?v=4',
+    title: 'Lead Potato',
+    githubImageId: '1659006',
+    githubUsername: 'gfellerph',
   },
   {
     name: 'Alizé Debray',
-    title: 'UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/33580481?v=4',
+    title: 'UI Mademoiselle',
+    githubImageId: '33580481',
+    githubUsername: 'alizedebray',
   },
   {
     name: 'Oliver Schürch',
+    title: 'Señor Developer',
+    githubImageId: '9716662',
+    githubUsername: 'oliverschuerch',
+  },
+  {
+    name: 'Myrta Sakellariou',
+    title: 'Mama Pigxel',
+    githubImageId: '66249294',
+    githubUsername: 'myrta2302',
+  },
+  {
+    name: 'Lea Gardavaud',
+    title: 'UI Developer',
+    githubImageId: '183501002',
+    githubUsername: 'leagrdv',
+  },
+  {
+    name: 'Alona Zherdetska',
+    title: 'Component Fairy',
+    githubImageId: '138328641',
+    githubUsername: 'alionazherdetska',
+  },
+  {
+    name: 'Tim Schär',
     title: 'UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/9716662?v=4',
+    githubImageId: '59233938',
+    githubUsername: 'schaertim',
+  },
+  {
+    name: 'Rouven Steiger',
+    title: 'Art Guy EDK',
+    githubImageId: '104423005',
+    githubUsername: 'rouvenpost',
+  },
+  {
+    name: 'Christian Zundel',
+    title: 'UX Designer',
+    githubImageId: '119845956',
+    githubUsername: 'Cian77',
+  },
+  {
+    name: 'Alessio Travaglini',
+    title: 'Token Orchestrator',
+    githubImageId: '158268546',
+    githubUsername: 'Vandapanda',
+  },
+  {
+    name: 'Romain Veya',
+    title: 'UI Developer',
+    githubImageId: '111903046',
+    githubUsername: 'veyaromain',
   },
 ];
 
@@ -43,20 +95,25 @@ export default (params: { pathToStoryFile?: String }) => (
       <div className="bg-light">
         <div className="container">
           <div className="pt-big-r pb-big-r">
-            <h2 className="mt-0">Support</h2>
-            <div className="d-flex flex-wrap mt-huge-r mb-huge-r profile-list">
-              {DEVELOPERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => (
-                <article key={index} className="avatar">
-                  <img className="profile-picture" src={developer.avatar} alt="" />
-                  <div>
-                    <p>
-                      <strong>{developer.name}</strong>
-                    </p>
-                    <p>{developer.title}</p>
-                  </div>
-                </article>
+            <h2 className="mt-0">Design System Team Members</h2>
+            <ul className="list-profile">
+              {TEAM_MEMBERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => (
+                <li key={index}>
+                  <a className="avatar" href={`https://github.com/${developer.githubUsername}`}>
+                    <div className="avatar-image">
+                      <img
+                        src={`https://avatars.githubusercontent.com/u/${developer.githubImageId}?v=4`}
+                        alt={developer.name}
+                      />
+                    </div>
+                    <div className="avatar-description">
+                      <span>{developer.title}</span>
+                      <span>{developer.name}</span>
+                    </div>
+                  </a>
+                </li>
               ))}
-            </div>
+            </ul>
             <div className="row mt-regular-r">
               <div className="col-12 col-rg-auto mt-regular-r">
                 <a
diff --git a/packages/documentation/.storybook/blocks/layout/layout.scss b/packages/documentation/.storybook/blocks/layout/layout.scss
index 9e4525f84a..f9a6e4ff90 100644
--- a/packages/documentation/.storybook/blocks/layout/layout.scss
+++ b/packages/documentation/.storybook/blocks/layout/layout.scss
@@ -40,22 +40,80 @@
 }
 
 .docs-footer {
+  ul.list-profile {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem 1.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
   .avatar {
-    display: flex;
-    align-items: flex-start;
+    display: inline-flex;
+    gap: calc(1rem - 6px * 2);
+    align-items: center;
+    text-decoration: none;
+
+    .avatar-image {
+      border-radius: 50%;
 
-    p {
-      margin-bottom: 0.25rem;
+      img {
+        display: block;
+        position: relative;
+        box-sizing: content-box;
+        z-index: 2;
+        width: 4rem;
+        border: 6px solid transparent;
+        border-radius: inherit;
+      }
     }
-  }
 
-  .profile-picture {
-    width: 5rem;
-    border-radius: 50%;
-    margin-right: 1rem;
-  }
+    .avatar-description {
+      position: relative;
+      padding: 10px;
+      border-radius: 4px;
+
+      span {
+        display: block;
+        position: relative;
+        z-index: 2;
+        font-size: 1rem;
+        line-height: 1.2;
 
-  .profile-list {
-    gap: 2rem 4rem;
+        &:first-child {
+          font-weight: bold;
+          font-size: 0.6875rem;
+        }
+      }
+
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        inset: 0;
+        left: calc(-1rem * 2);
+        z-index: 1;
+        border-radius: 4px;
+      }
+    }
+
+    &:hover {
+      .avatar-image {
+        box-shadow: 0.25px 1px 1px rgba(0, 0, 0, 0.1), 1px 2px 2.5px 1px rgba(0, 0, 0, 0.2);
+
+        img {
+          border-color: white;
+        }
+      }
+
+      .avatar-description {
+        &::after {
+          background-color: white;
+          box-shadow: 0.25px 1px 1px rgba(0, 0, 0, 0.1), 1px 2px 2.5px 1px rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
   }
 }

From e36d79f4355578ca31449a5065955a11d3177cbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Tue, 15 Oct 2024 17:31:16 +0200
Subject: [PATCH 32/40] chore(icons): remove data-* attributes from output
 files (#3747)

---
 packages/icons/svgo.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/icons/svgo.config.ts b/packages/icons/svgo.config.ts
index 58039aac5c..c133772b09 100644
--- a/packages/icons/svgo.config.ts
+++ b/packages/icons/svgo.config.ts
@@ -27,7 +27,7 @@ export default {
       name: 'removeAttrs',
       params: {
         elemSeparator: '::',
-        attrs: ['style', 'svg::(width|height|xml:space)'],
+        attrs: ['style', 'data-.*', 'svg::(width|height|xml:space)'],
       },
     },
   ],

From bd15df3d17b8c1f8d628bb4acbba50f7d839ad57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Tue, 15 Oct 2024 17:32:29 +0200
Subject: [PATCH 33/40] chore: remove mixed-decls build configs (#3743)

---
 packages/documentation/vite.config.js | 7 -------
 packages/styles/gulpfile.js           | 2 --
 2 files changed, 9 deletions(-)

diff --git a/packages/documentation/vite.config.js b/packages/documentation/vite.config.js
index fff54bb396..af7680cc71 100644
--- a/packages/documentation/vite.config.js
+++ b/packages/documentation/vite.config.js
@@ -23,11 +23,4 @@ export default {
     ],
     exclude: ['@swisspost/design-system-styles'],
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        silenceDeprecations: ['mixed-decls'],
-      },
-    },
-  },
 };
diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js
index 62cb06a352..1a663b1e9b 100644
--- a/packages/styles/gulpfile.js
+++ b/packages/styles/gulpfile.js
@@ -121,7 +121,6 @@ gulp.task('sass', () => {
         outputStyle: 'compressed',
         includePaths: options.includePaths,
         quietDeps: true,
-        silenceDeprecations: ['mixed-decls'],
       }),
     )
     .pipe(gulpPostCss([autoprefixer()]))
@@ -139,7 +138,6 @@ gulp.task('sass:dev', () => {
       gulpSass({
         includePaths: options.includePaths,
         quietDeps: true,
-        silenceDeprecations: ['mixed-decls'],
       }),
     )
     .pipe(gulpPostCss([autoprefixer()]))

From 9f38b686b128397f2e2267ddb54157aa5ed5b05a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Tue, 15 Oct 2024 18:01:13 +0200
Subject: [PATCH 34/40] chore(intranet-header): fix dropdown nav-link
 documentation (#3722)

---
 .changeset/loud-dingos-remember.md                           | 5 +++++
 .../intranet-header-navigation-bar.sample.html               | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/loud-dingos-remember.md

diff --git a/.changeset/loud-dingos-remember.md b/.changeset/loud-dingos-remember.md
new file mode 100644
index 0000000000..18303aed33
--- /dev/null
+++ b/.changeset/loud-dingos-remember.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed the dropdown toggle in the example of the intranet header with a navigation bar.
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html
index d304a71b41..63a6b6b8a0 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html
@@ -3,7 +3,7 @@
     <li class="nav-item"><a class="nav-link">Link 1</a></li>
     <li class="nav-item"><a class="nav-link">Link 2</a></li>
     <li class="nav-item" ngbDropdown>
-      <span class="nav-link" id="toggle" ngbDropdownToggle>Dropdown</span>
+      <button class="nav-link" id="toggle" ngbDropdownToggle>Dropdown</button>
       <div class="dropdown-menu" aria-labelledby="toggle" ngbDropdownMenu>
         <a class="dropdown-item" ngbDropdownItem>Dropdown link 1</a>
         <a class="dropdown-item" ngbDropdownItem>Dropdown link 2</a>

From 224f190cb66805914d05a7ebdbb7892cbbde4c1e Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Wed, 16 Oct 2024 12:51:46 +0200
Subject: [PATCH 35/40] feat: add paragraph style (#3569)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add paragraph style only.

---------

Co-authored-by: karimim <muhammad.karimi@post.ch>
Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/sixty-items-promise.md             |  5 +++
 .changeset/strange-bottles-impress.md         |  5 +++
 .../elements/paragraph/paragraph.docs.mdx     | 17 +++++++++
 .../elements/paragraph/paragraph.stories.ts   | 37 +++++++++++++++++++
 packages/styles/src/elements/_index.scss      |  1 +
 packages/styles/src/elements/paragraph.scss   | 17 +++++++++
 6 files changed, 82 insertions(+)
 create mode 100644 .changeset/sixty-items-promise.md
 create mode 100644 .changeset/strange-bottles-impress.md
 create mode 100644 packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx
 create mode 100644 packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
 create mode 100644 packages/styles/src/elements/paragraph.scss

diff --git a/.changeset/sixty-items-promise.md b/.changeset/sixty-items-promise.md
new file mode 100644
index 0000000000..d6de1b72b9
--- /dev/null
+++ b/.changeset/sixty-items-promise.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added paragraph style.
diff --git a/.changeset/strange-bottles-impress.md b/.changeset/strange-bottles-impress.md
new file mode 100644
index 0000000000..79f561cfb8
--- /dev/null
+++ b/.changeset/strange-bottles-impress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added paragraph element.
diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx
new file mode 100644
index 0000000000..d9be9afb9c
--- /dev/null
+++ b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx
@@ -0,0 +1,17 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ParagraphStories from './paragraph.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={ParagraphStories} />
+
+<div className="docs-title">
+  # Paragraph
+
+  <nav>
+    <link-design of={JSON.stringify(ParagraphStories)}></link-design>
+  </nav>
+</div>
+
+Default paragraph without size variants.
+
+<Canvas of={ParagraphStories.Default} sourceState="shown" />
diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
new file mode 100644
index 0000000000..2a9d17b4a5
--- /dev/null
+++ b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
@@ -0,0 +1,37 @@
+import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '7ecd87f1-de96-4e39-a057-ba1798eb69593',
+  title: 'Foundations/Typography/Paragraph',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=178-6713&node-type=frame&t=Zs4iDGVBTA88pChW-0',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  decorators: [
+    (story: StoryFn, context: StoryContext) => html` <div>${story(context.args, context)}</div> `,
+  ],
+  render: () => html`
+    <p>
+      This is a paragraph. It is a block of text that is separated from other blocks of text by a
+      blank line. It is usually indented at the beginning of the first line. The first word of a
+      paragraph is often indented more than the rest of the paragraph.
+    </p>
+    <p>
+      This is a paragraph. It is a block of text that is separated from other blocks of text by a
+      blank line. It is usually indented at the beginning of the first line. The first word of a
+      paragraph is often indented more than the rest of the paragraph.
+    </p>
+  `,
+};
diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
index d2c8cd0147..e4233fb679 100644
--- a/packages/styles/src/elements/_index.scss
+++ b/packages/styles/src/elements/_index.scss
@@ -1,4 +1,5 @@
 @use 'reset';
 @use 'body';
+@use 'paragraph';
 @use 'heading';
 @use 'fieldset-legend';
diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss
new file mode 100644
index 0000000000..12e638dd65
--- /dev/null
+++ b/packages/styles/src/elements/paragraph.scss
@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-paragraph;
+
+p {
+  margin-block: tokens.get('paragraph-margin-block-start');
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}

From 283275bbadb3bdcafdcb6b9687c9f911091ba9ae Mon Sep 17 00:00:00 2001
From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com>
Date: Wed, 16 Oct 2024 15:28:30 +0200
Subject: [PATCH 36/40] feat(styles): tokenize the Link component styles
 (#3590)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Zherdetska Alona, IT21.1 <alona.zherdetska@post.ch>
Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/lazy-gorillas-admire.md            |  6 +++
 .../.storybook/styles/preview.scss            |  7 ---
 .../snapshots/components/link.snapshot.ts     |  7 +++
 .../src/stories/components/link/link.docs.mdx | 21 ++++++++
 .../components/link/link.snapshot.stories.ts  | 40 ++++++++++++++
 .../stories/components/link/link.stories.ts   | 52 +++++++++++++++++++
 packages/styles/src/elements/_index.scss      |  1 +
 packages/styles/src/elements/anchor.scss      | 37 +++++++++++++
 .../styles/src/utilities/temp/_legacy.scss    | 28 ----------
 9 files changed, 164 insertions(+), 35 deletions(-)
 create mode 100644 .changeset/lazy-gorillas-admire.md
 create mode 100644 packages/documentation/cypress/snapshots/components/link.snapshot.ts
 create mode 100644 packages/documentation/src/stories/components/link/link.docs.mdx
 create mode 100644 packages/documentation/src/stories/components/link/link.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/components/link/link.stories.ts
 create mode 100644 packages/styles/src/elements/anchor.scss

diff --git a/.changeset/lazy-gorillas-admire.md b/.changeset/lazy-gorillas-admire.md
new file mode 100644
index 0000000000..0ad335a666
--- /dev/null
+++ b/.changeset/lazy-gorillas-admire.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Updated the Link component styles to align with the new design, added a documentation page outlining the usage of the component.
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index b768d3e6ea..3cc1177fed 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -68,13 +68,6 @@
       }
     }
 
-    // General styles for content
-    a:not(.sb-story a) {
-      @include utilities.focus-style() {
-        border-radius: post.$border-radius;
-      }
-    }
-
     // Style buttons related to the current page next to the tile
     .docs-title,
     .docs-title nav {
diff --git a/packages/documentation/cypress/snapshots/components/link.snapshot.ts b/packages/documentation/cypress/snapshots/components/link.snapshot.ts
new file mode 100644
index 0000000000..a455162ad4
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/link.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Link', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--link');
+    cy.get('a', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Links', { widths: [400] });
+  });
+});
diff --git a/packages/documentation/src/stories/components/link/link.docs.mdx b/packages/documentation/src/stories/components/link/link.docs.mdx
new file mode 100644
index 0000000000..44827d14c3
--- /dev/null
+++ b/packages/documentation/src/stories/components/link/link.docs.mdx
@@ -0,0 +1,21 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as LinkStories from './link.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={LinkStories} />
+
+<div className="docs-title">
+  # Link
+
+  <nav>
+    <link-design of={JSON.stringify(LinkStories)}></link-design>
+  </nav>
+</div>
+<div className="lead">
+  Use links to navigate users to another location, such as a different site, resource, or section within the same page.
+</div>
+
+<Canvas sourceState="shown" of={LinkStories.Default} />
+<div className="hide-col-default">
+  <Controls of={LinkStories.Default} />
+</div>
diff --git a/packages/documentation/src/stories/components/link/link.snapshot.stories.ts b/packages/documentation/src/stories/components/link/link.snapshot.stories.ts
new file mode 100644
index 0000000000..dfab463bd6
--- /dev/null
+++ b/packages/documentation/src/stories/components/link/link.snapshot.stories.ts
@@ -0,0 +1,40 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta, { Default } from './link.stories';
+import { html } from 'lit';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Link: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`
+      <div>
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div
+              class="${bg} d-flex flex-column gap-regular p-regular mt-regular"
+              data-color-mode="${bg === 'bg-white' ? 'light' : 'dark'}"
+            >
+              ${bombArgs({
+                text: ['Link Text', 'Lorem ipsum dolor sit amet consectetur'],
+                href: ['https://example.com', 'https://imgur.com/FKmX7dt'],
+              }).map((args: Args) =>
+                Default.render?.(
+                  { ...context.args, ...args, text: `${args.text}`, href: `${args.href}` },
+                  context,
+                ),
+              )}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/components/link/link.stories.ts b/packages/documentation/src/stories/components/link/link.stories.ts
new file mode 100644
index 0000000000..0b59678ee8
--- /dev/null
+++ b/packages/documentation/src/stories/components/link/link.stories.ts
@@ -0,0 +1,52 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+  id: '6f359d06-bca5-4983-b588-c8c790531642',
+  title: 'Foundations/Typography/Link',
+  tags: ['package:HTML'],
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2016-47948',
+    },
+  },
+  args: {
+    text: 'Link Text',
+    href: 'https://imgur.com/FKmX7dt',
+  },
+  argTypes: {
+    text: {
+      name: 'Text',
+      description: 'Defines the text within the link.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    href: {
+      name: 'Href',
+      description: 'Defines the target URL for the link.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args: Args) => {
+    return html` <a href="${args.href}">${args.text}</a> `;
+  },
+};
diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
index e4233fb679..70bc8dd8ac 100644
--- a/packages/styles/src/elements/_index.scss
+++ b/packages/styles/src/elements/_index.scss
@@ -1,5 +1,6 @@
 @use 'reset';
 @use 'body';
+@use 'anchor';
 @use 'paragraph';
 @use 'heading';
 @use 'fieldset-legend';
diff --git a/packages/styles/src/elements/anchor.scss b/packages/styles/src/elements/anchor.scss
new file mode 100644
index 0000000000..2903f40ada
--- /dev/null
+++ b/packages/styles/src/elements/anchor.scss
@@ -0,0 +1,37 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+@use '../mixins/utilities';
+
+tokens.$default-map: elements.$post-link;
+
+a {
+  text-decoration: tokens.get('link-decoration');
+  border-radius: tokens.get('link-border-radius');
+  color: inherit;
+
+  &:hover {
+    color: tokens.get('link-hover-fg');
+  }
+
+  @include utilities.focus-style(
+    $offset: tokens.get('link-focus-outline-offset'),
+    $width: tokens.get('link-focus-outline-width'),
+    $color: tokens.get('link-focus-outline-color'),
+    $style: tokens.get('link-focus-outline-style')
+  );
+
+  @include utilities.high-contrast-mode() {
+    &,
+    &:focus {
+      color: LinkText !important;
+    }
+
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+
+    &:visited {
+      color: VisitedText;
+    }
+  }
+}
diff --git a/packages/styles/src/utilities/temp/_legacy.scss b/packages/styles/src/utilities/temp/_legacy.scss
index 3a963fc06c..3d3743bc57 100644
--- a/packages/styles/src/utilities/temp/_legacy.scss
+++ b/packages/styles/src/utilities/temp/_legacy.scss
@@ -65,31 +65,3 @@ span.spacer {
     @include color-mx.colored-background($color);
   }
 }
-
-// TODO: refactor to link default styles
-.text-auto {
-  a {
-    color: inherit;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
-a {
-  color: var(--post-contrast-color);
-
-  &:hover {
-    color: rgba(var(--post-contrast-color-rgb), 0.8);
-  }
-
-  @include utilities.high-contrast-mode() {
-    &,
-    &:visited,
-    &:focus,
-    &:hover {
-      color: LinkText !important;
-    }
-  }
-}

From 579d250ee5bebeb94978f0afa6f8e5a0adf1e6e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Wed, 16 Oct 2024 15:29:33 +0200
Subject: [PATCH 37/40] chore: create token PR workflow (#3688)

---
 .github/workflows/create-token-pr.yaml | 56 ++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 .github/workflows/create-token-pr.yaml

diff --git a/.github/workflows/create-token-pr.yaml b/.github/workflows/create-token-pr.yaml
new file mode 100644
index 0000000000..31b2c7315c
--- /dev/null
+++ b/.github/workflows/create-token-pr.yaml
@@ -0,0 +1,56 @@
+###
+#
+# Creates a PR from the token branch whenever is has commits ahead of main.
+#
+###
+
+name: Create Token PR
+on:
+  push:
+    branches:
+      - tokens/v*
+
+jobs:
+  create_pr:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the token branch which was pushed
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # Get the name of the token branch which was pushed and the corresponding PR branch
+      - name: Get Branch
+        id: branch-names
+        run: |
+          echo "pr-branch=merge-tokens-$(echo ${GITHUB_REF##*/})" >> $GITHUB_OUTPUT
+
+      # Check if the PR branch already exists
+      - name: Check PR Branch
+        id: git-branch
+        run: |
+          GIT_BRANCH="$(git branch -l $PR_BRANCH)"
+          echo "pr_branch=${GIT_BRANCH}" >> $GITHUB_OUTPUT
+        env:
+          PR_BRANCH: ${{ steps.branch-names.outputs.pr-branch }}
+
+      # if the branch already exits, update the PR
+      - name: Update Branch
+        if: steps.git-branch.outputs.pr_branch != ''
+        run: |
+          git checkout $PR_BRANCH
+          git merge ${{ github.ref_name }} -X theirs --no-edit
+          git push
+        env:
+          PR_BRANCH: ${{ steps.branch-names.outputs.pr-branch }}
+          GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+
+      # if the branch does not exit, create the PR
+      - name: Create PR
+        if: steps.git-branch.outputs.pr_branch == ''
+        run: |
+          git checkout -b $PR_BRANCH ${{ github.ref_name }}
+          gh pr create --title "chore(tokens): :art: update tokens"
+        env:
+          PR_BRANCH: ${{ steps.branch-names.outputs.pr-branch }}
+          GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}

From 36f16261c6c388cffb78238d5b3e8e76a5578fd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Wed, 16 Oct 2024 16:26:53 +0200
Subject: [PATCH 38/40] chore: improve the token PR workflow (#3766)

---
 .github/workflows/create-token-pr.yaml | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/create-token-pr.yaml b/.github/workflows/create-token-pr.yaml
index 31b2c7315c..ad1f91ab67 100644
--- a/.github/workflows/create-token-pr.yaml
+++ b/.github/workflows/create-token-pr.yaml
@@ -20,7 +20,7 @@ jobs:
         uses: actions/checkout@v4
 
       # Get the name of the token branch which was pushed and the corresponding PR branch
-      - name: Get Branch
+      - name: Get Branch Name
         id: branch-names
         run: |
           echo "pr-branch=merge-tokens-$(echo ${GITHUB_REF##*/})" >> $GITHUB_OUTPUT
@@ -29,14 +29,17 @@ jobs:
       - name: Check PR Branch
         id: git-branch
         run: |
-          GIT_BRANCH="$(git branch -l $PR_BRANCH)"
-          echo "pr_branch=${GIT_BRANCH}" >> $GITHUB_OUTPUT
+          if git branch --list "$PR_BRANCH"; then
+            echo "pr_branch=true" >> $GITHUB_OUTPUT
+          else
+            echo "pr_branch=false" >> $GITHUB_OUTPUT
+          fi
         env:
           PR_BRANCH: ${{ steps.branch-names.outputs.pr-branch }}
 
       # if the branch already exits, update the PR
       - name: Update Branch
-        if: steps.git-branch.outputs.pr_branch != ''
+        if: steps.git-branch.outputs.pr_branch == 'true'
         run: |
           git checkout $PR_BRANCH
           git merge ${{ github.ref_name }} -X theirs --no-edit
@@ -47,10 +50,10 @@ jobs:
 
       # if the branch does not exit, create the PR
       - name: Create PR
-        if: steps.git-branch.outputs.pr_branch == ''
+        if: steps.git-branch.outputs.pr_branch == 'false'
         run: |
           git checkout -b $PR_BRANCH ${{ github.ref_name }}
-          gh pr create --title "chore(tokens): :art: update tokens"
+          gh pr create --title "chore(tokens): :art: update tokens" --body "Merge this PR to update the tokens in the main branch." --base main --head $PR_BRANCH
         env:
           PR_BRANCH: ${{ steps.branch-names.outputs.pr-branch }}
           GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}

From e347f273d7ebcfcedb1b7e6540729ea12d36324b Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Wed, 16 Oct 2024 20:50:10 +0200
Subject: [PATCH 39/40] chore: document margins decision (#3750)

As resolved to in a meeting on the 14th of October 2024, margins for
basic elements should be defined and reset for first- and last child
respectively.
---
 packages/styles/CONTRIBUTING.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/styles/CONTRIBUTING.md b/packages/styles/CONTRIBUTING.md
index a05cabccd8..b01d5fd307 100644
--- a/packages/styles/CONTRIBUTING.md
+++ b/packages/styles/CONTRIBUTING.md
@@ -48,6 +48,24 @@ The only and default theme used currently is Bootstrap. When adding themings for
 
 Licenses of third party packages that are bundled with the output (e.g. Bootstrap) need to be included in the output and delivered with the output code.
 
+### Margins
+
+Block level content elements (headings, paragraphs, images, lists, ...; html tags without any classes or context) should use the following margin system: define block margins but reset the margin start for the first child and the margin end for the last child. The rules for first and last child should have low specificity.
+
+```html
+p {
+  margin-block: 1rem;
+
+  :where(:first-child) {
+    margin-block-start: 0;
+  }
+
+  :where(:last-child) {
+    margin-block-end: 0;
+  }
+}
+```
+
 ## Bundling the styles
 
 Run the following command to lint all scss files, create a dist folder and build the output CSS files using [gulp](https://gulpjs.com/). This command also copies the entire Scss source files into the dist folder, making them available for developers.

From e249312bbae0b3366df12d6bb65784218b2a2eb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Thu, 17 Oct 2024 09:02:19 +0200
Subject: [PATCH 40/40] chore: improve token pr workflow (#3770)

---
 .github/workflows/create-token-pr.yaml | 45 ++++++++++++--------------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/.github/workflows/create-token-pr.yaml b/.github/workflows/create-token-pr.yaml
index ad1f91ab67..1aa53365a3 100644
--- a/.github/workflows/create-token-pr.yaml
+++ b/.github/workflows/create-token-pr.yaml
@@ -15,45 +15,42 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      # Checkout the token branch which was pushed
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
-      # Get the name of the token branch which was pushed and the corresponding PR branch
-      - name: Get Branch Name
-        id: branch-names
+      # Check if a PR branch corresponding to the token branch exists
+      - name: Get PR Branch
+        id: pr-branch
         run: |
-          echo "pr-branch=merge-tokens-$(echo ${GITHUB_REF##*/})" >> $GITHUB_OUTPUT
+          PR_BRANCH="merge-tokens-${GITHUB_REF##*/}"
+          echo "name=${PR_BRANCH}" >> $GITHUB_OUTPUT
 
-      # Check if the PR branch already exists
-      - name: Check PR Branch
-        id: git-branch
-        run: |
-          if git branch --list "$PR_BRANCH"; then
-            echo "pr_branch=true" >> $GITHUB_OUTPUT
+          if [[ -n $(git ls-remote origin "${PR_BRANCH}") ]]; then
+            echo "exists=true" >> $GITHUB_OUTPUT
           else
-            echo "pr_branch=false" >> $GITHUB_OUTPUT
+            echo "exists=false" >> $GITHUB_OUTPUT
           fi
-        env:
-          PR_BRANCH: ${{ steps.branch-names.outputs.pr-branch }}
 
-      # if the branch already exits, update the PR
-      - name: Update Branch
-        if: steps.git-branch.outputs.pr_branch == 'true'
+      # If the branch exits, update the PR
+      - name: Update PR
+        if: steps.pr-branch.outputs.exists == 'true'
         run: |
-          git checkout $PR_BRANCH
+          git config user.name "Swiss Post Bot"
+          git config user.email "103635272+swisspost-bot@users.noreply.github.com"
+          git checkout ${{ steps.pr-branch.outputs.name }}
           git merge ${{ github.ref_name }} -X theirs --no-edit
           git push
         env:
-          PR_BRANCH: ${{ steps.branch-names.outputs.pr-branch }}
           GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
 
-      # if the branch does not exit, create the PR
+      # If the branch does not exit, create the PR
       - name: Create PR
-        if: steps.git-branch.outputs.pr_branch == 'false'
+        if: steps.pr-branch.outputs.exists == 'false'
         run: |
-          git checkout -b $PR_BRANCH ${{ github.ref_name }}
-          gh pr create --title "chore(tokens): :art: update tokens" --body "Merge this PR to update the tokens in the main branch." --base main --head $PR_BRANCH
+          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:
-          PR_BRANCH: ${{ steps.branch-names.outputs.pr-branch }}
           GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}