From 13ac05757b7d117ddc301ed809a4b1cd6ed06c95 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:35:41 +0200
Subject: [PATCH 01/11] feat(styles): updated vertical-align utility (#3805)
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>
---
 .changeset/new-goats-impress.md               |  6 ++
 .../utilities/vertical-align.snapshot.ts      |  7 ++
 .../vertical-align/vertical-align.docs.mdx    | 29 ++++++++
 .../vertical-align.snapshot.stories.ts        | 33 +++++++++
 .../vertical-align/vertical-align.stories.ts  | 68 +++++++++++++++++++
 .../vertical-align/vertical-align.styles.scss | 61 +++++++++++++++++
 .../src/themes/bootstrap/_utilities.scss      |  2 +
 packages/styles/src/utilities/_variables.scss |  7 +-
 8 files changed, 211 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/new-goats-impress.md
 create mode 100644 packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts
 create mode 100644 packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx
 create mode 100644 packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts
 create mode 100644 packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss

diff --git a/.changeset/new-goats-impress.md b/.changeset/new-goats-impress.md
new file mode 100644
index 0000000000..d1bd841e3c
--- /dev/null
+++ b/.changeset/new-goats-impress.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated vertical-align utility
diff --git a/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts
new file mode 100644
index 0000000000..6d2235f46d
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/vertical-align.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Vetical Align', () => {
+  it('vertica-align', () => {
+    cy.visit('/iframe.html?id=snapshots--vertical-align');
+    cy.get('.vertical-align-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Vertical Align', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx
new file mode 100644
index 0000000000..48fcfe4a04
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.docs.mdx
@@ -0,0 +1,29 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { formatAsMap } from '@/utils/sass-export';
+import * as VerticalAlignStories from './vertical-align.stories';
+
+<Meta of={VerticalAlignStories} />
+
+# Vertical Alignment
+
+<div className="lead">
+  Use the vertical alignment utilities to adjust the alignment of elements.
+</div>
+
+Note that vertical-align applies only to `inline`, `inline-block, `inline-table`, and `table-cell` elements.
+
+## Examples
+
+With inline elements:
+
+<Canvas sourceState="shown" of={VerticalAlignStories.Default} />
+<div className="hide-col-default">
+  <Controls of={VerticalAlignStories.Default} />
+</div>
+
+With table cells:
+
+<Canvas sourceState="shown" of={VerticalAlignStories.tableVersion} />
+<div className="hide-col-default">
+  <Controls of={VerticalAlignStories.tableVersion} />
+</div>
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts
new file mode 100644
index 0000000000..31e346cb88
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts
@@ -0,0 +1,33 @@
+import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './vertical-align.stories';
+import './vertical-align.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const VerticalAlign: Story = {
+  render: () => {
+    return html`
+      ${meta?.argTypes?.align?.options?.map(
+        align =>
+          html`<div>
+            <span>${align ? `align-${align}` : 'text'}</span>
+            <img class="logo align-${align}" alt="logo" src="/assets/images/logo-swisspost.svg" />
+          </div>`,
+      )}
+    `;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="snapshot">${story(context.args, context)}</div>`;
+      return storyTemplate;
+    },
+  ],
+};
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts
new file mode 100644
index 0000000000..db879df901
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.stories.ts
@@ -0,0 +1,68 @@
+import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import './vertical-align.styles.scss';
+import { MetaExtended } from '@root/types';
+
+const alignOptions = ['baseline', 'top', 'middle', 'bottom', 'text-bottom', 'text-top'];
+
+const meta: MetaExtended = {
+  id: 'cf01f6d1-970f-444e-aaa9-8a96c25cc8b2',
+  title: 'Utilities/Vertical Align',
+  args: {
+    align: '',
+  },
+  argTypes: {
+    align: {
+      name: 'align',
+      description: 'Set the vertical alignment of the text',
+      control: {
+        type: 'select',
+      },
+      options: alignOptions,
+    },
+  },
+  render: (args: Args) => {
+    return html`<span class="align-baseline">baseline</span>
+      <span class="align-top">top</span>
+      <span class="align-middle">middle</span>
+      <span class="align-bottom">bottom</span>
+      <span class="align-text-bottom">text-bottom</span>
+      <span class="align-text-top">text-top</span>
+      <span class="${args.align ? 'align-' + args.align : nothing}">${args.align || 'text'}</span>`;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="vertical-align-example">
+        ${story(context.args, context)}
+      </div>`;
+      return storyTemplate;
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const tableVersion: Story = {
+  argTypes: {
+    align: {
+      options: alignOptions.filter(o => !o.includes('text-')),
+    },
+  },
+  render: (args: Args) => {
+    return html`<table class="table table-bordered">
+      <tbody>
+        <tr>
+          <td class="align-baseline">baseline</td>
+          <td class="align-top">top</td>
+          <td class="align-middle">middle</td>
+          <td class="align-bottom">bottom</td>
+          <td class="${args.align ? 'align-' + args.align : nothing}">${args.align || 'text'}</td>
+        </tr>
+      </tbody>
+    </table>`;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss
new file mode 100644
index 0000000000..1100f28378
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.styles.scss
@@ -0,0 +1,61 @@
+.vertical-align-example {
+  :not(:has(table)) & {
+    border: 1px solid rgb(204, 204, 204);
+    line-height: 3;
+  }
+
+  table {
+    margin: 0;
+    height: 100px;
+    td:nth-of-type(5) {
+      color: red;
+    }
+  }
+
+  span {
+    padding-inline: 0.5rem;
+    &:nth-of-type(7) {
+      padding-inline-start: 2rem;
+      color: red;
+    }
+  }
+
+  .logo {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+  }
+
+  .snapshot {
+    gap: 2rem;
+    display: flex;
+    flex-direction: column;
+
+    & > div {
+      border: 1px solid rgb(204, 204, 204);
+      width: 320px;
+
+      span {
+        min-width: 150px;
+      }
+
+      span:nth-of-type(2) {
+        color: gray;
+      }
+    }
+  }
+
+  .box {
+    border: 1px solid rgb(204, 204, 204);
+    height: 50px;
+    width: 50px;
+    display: inline-block;
+    text-align: center;
+  }
+}
+
+#storybook-root .vertical-align-example {
+  &:not(:has(table)) {
+    border: none;
+  }
+}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 88efc41434..7a575257c7 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -39,6 +39,8 @@ $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
 
+$utilities: map.remove($utilities, 'vertical-align');
+
 $utilities: map.remove($utilities, 'float');
 
 $utilities: map.remove($utilities, 'opacity');
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index 7902d738b2..52ad221068 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -22,6 +22,11 @@
 */
 
 $utilities: (
+  'align': (
+    property: vertical-align,
+    class: align,
+    values: baseline top middle bottom text-bottom text-top,
+  ),
   'float': (
     responsive: true,
     property: float,
@@ -83,7 +88,6 @@ $utilities: (
     class: ms,
     values: from-tokens('spacing', 'margin'),
   ),
-
   'padding': (
     responsive: true,
     property: padding,
@@ -126,7 +130,6 @@ $utilities: (
     class: ps,
     values: from-tokens('spacing', 'padding'),
   ),
-
   'gap': (
     responsive: true,
     property: gap,

From dbefaead4f151f640f1b40b0815d7be82b89db3b Mon Sep 17 00:00:00 2001
From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:23:27 +0100
Subject: [PATCH 02/11] chore(tokens): :art: update tokens (#3958)

Merge this PR to update the tokens in the main branch.

---------

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

diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json
index 75599a9cd8..ee04454f8b 100644
--- a/packages/tokens/tokensstudio-generated/tokens.json
+++ b/packages/tokens/tokensstudio-generated/tokens.json
@@ -235,6 +235,10 @@
             "$type": "dimension",
             "$value": "6"
           },
+          "7": {
+            "$type": "dimension",
+            "$value": "7"
+          },
           "8": {
             "$type": "dimension",
             "$value": "8"
@@ -1375,7 +1379,7 @@
                 "$value": "{post.core.color.sandgrey.100}"
               }
             },
-            "emphasis": {
+            "accent": {
               "bg": {
                 "$type": "color",
                 "$value": "{post.core.color.sandgrey.080}"
@@ -1478,7 +1482,7 @@
                   "$value": "{post.core.color.cargo.blue}"
                 }
               },
-              "emphasis": {
+              "accent": {
                 "bg": {
                   "$type": "color",
                   "$value": "{post.core.color.cargo.blue}"
@@ -2141,7 +2145,7 @@
                 "$value": "{post.core.color.sandgrey.100}"
               }
             },
-            "emphasis": {
+            "accent": {
               "bg": {
                 "$type": "color",
                 "$value": "{post.core.color.sandgrey.002}"
@@ -2191,6 +2195,76 @@
             }
           }
         }
+      },
+      "cargo": {
+        "scheme": {
+          "color": {
+            "surface": {
+              "default": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.080}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                },
+                "stroke": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                }
+              },
+              "accent1": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.100}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                }
+              },
+              "alternate": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.100}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                }
+              },
+              "brand": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.cargo.green}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.brand.white}"
+                },
+                "fg-accent": {
+                  "$type": "color",
+                  "$value": "{post.core.color.cargo.blue}"
+                }
+              },
+              "accent": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.cargo.blue}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.100}"
+                },
+                "fg-accent": {
+                  "$type": "color",
+                  "$value": "{post.core.color.cargo.green}"
+                }
+              }
+            }
+          }
+        }
       }
     }
   },
@@ -2657,6 +2731,10 @@
               "29": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.25-5}"
+              },
+              "30": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.6-5}"
               }
             }
           },
@@ -3261,6 +3339,10 @@
               "29": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.23}"
+              },
+              "30": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.7}"
               }
             },
             "inline": {
@@ -3853,6 +3935,10 @@
               "29": {
                 "$type": "spacing",
                 "$value": "{post.core.dimension.24-5}"
+              },
+              "30": {
+                "$type": "spacing",
+                "$value": "{post.core.dimension.8-5}"
               }
             }
           },
@@ -4170,11 +4256,11 @@
             "accent": {
               "bg": {
                 "$type": "color",
-                "$value": "{post.scheme.color.surface.emphasis.bg}"
+                "$value": "{post.scheme.color.surface.accent.bg}"
               },
               "fg": {
                 "$type": "color",
-                "$value": "{post.scheme.color.surface.emphasis.fg}"
+                "$value": "{post.scheme.color.surface.accent.fg}"
               }
             },
             "alternate": {
@@ -4220,21 +4306,21 @@
             "default": {
               "bg": {
                 "$type": "color",
-                "$value": "{post.scheme.color.surface.default.bg}"
+                "$value": "{post.cargo.scheme.color.surface.default.bg}"
               },
               "fg": {
                 "$type": "color",
-                "$value": "{post.scheme.color.surface.default.fg}"
+                "$value": "{post.cargo.scheme.color.surface.default.fg}"
               }
             },
             "alternate": {
               "bg": {
                 "$type": "color",
-                "$value": "{post.scheme.color.surface.alternate.bg}"
+                "$value": "{post.cargo.scheme.color.surface.alternate.bg}"
               },
               "fg": {
                 "$type": "color",
-                "$value": "{post.scheme.color.surface.alternate.fg}"
+                "$value": "{post.cargo.scheme.color.surface.alternate.fg}"
               }
             },
             "brand": {
@@ -4250,11 +4336,11 @@
             "accent": {
               "bg": {
                 "$type": "color",
-                "$value": "{post.cargo.scheme.color.surface.emphasis.bg}"
+                "$value": "{post.cargo.scheme.color.surface.accent.bg}"
               },
               "fg": {
                 "$type": "color",
-                "$value": "{post.cargo.scheme.color.surface.emphasis.fg-accent}"
+                "$value": "{post.cargo.scheme.color.surface.accent.fg-accent}"
               }
             }
           }
@@ -6442,11 +6528,11 @@
           "color": {
             "icon-bg": {
               "$type": "color",
-              "$value": "{post.scheme.color.surface.emphasis.bg}"
+              "$value": "{post.scheme.color.surface.accent.bg}"
             },
             "icon-fg": {
               "$type": "color",
-              "$value": "{post.scheme.color.surface.emphasis.fg}"
+              "$value": "{post.scheme.color.surface.accent.fg}"
             },
             "text-fg": {
               "$type": "color",
@@ -6612,15 +6698,15 @@
         "close-button": {
           "enabled-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "selected-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "hover-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "hover-bg": {
             "$type": "color",
@@ -6640,11 +6726,11 @@
           },
           "enabled-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "selected-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "hover-fg": {
             "$type": "color",
@@ -6676,11 +6762,11 @@
         "surface": {
           "bg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.bg}"
+            "$value": "{post.scheme.color.surface.accent.bg}"
           },
           "fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           },
           "border-radius": {
             "$type": "borderRadius",
@@ -6712,7 +6798,7 @@
         "text": {
           "selected-fg": {
             "$type": "color",
-            "$value": "{post.scheme.color.surface.emphasis.fg}"
+            "$value": "{post.scheme.color.surface.accent.fg}"
           }
         },
         "elevation": {
@@ -7837,6 +7923,16 @@
                 }
               }
             }
+          },
+          "filled": {
+            "padding": {
+              "block": {
+                "start": {
+                  "$type": "spacing",
+                  "$value": "{post.device.spacing.padding.block.30}"
+                }
+              }
+            }
           }
         },
         "filled": {
@@ -9071,6 +9167,7 @@
         "post.core.dimension.4": "652e6941eb5ffe7b11b4919943eaa82985cea887",
         "post.core.dimension.5": "4948cef0547c7028ae2b54d67888730ae50a7a51",
         "post.core.dimension.6": "2fb4138c6e29828418c6e0d8c3bb0730efb65c1a",
+        "post.core.dimension.7": "b425da6d6f562134ae5a90e3354c1dd426d7a6dc",
         "post.core.dimension.8": "32a49eb9f6a3706172348bdf0fd51703bdecc0e9",
         "post.core.dimension.9": "ca8146c7e9870c3cf4e15aa0cd4141b129e2a5b5",
         "post.core.dimension.10": "0b8ab9e8f85d59a203c115bacd0e1467302b37d8",
@@ -9116,6 +9213,8 @@
         "post.core.dimension.16-5": "18a30d47473c6776f526d6695a08ebe450ef9fef",
         "post.core.dimension.17-5": "de25828e578f9363bd50fec54426f989e8d618e1",
         "post.core.dimension.26-5": "fc0f8d331a3a6869de95d2f1031974fbc926e0c4",
+        "post.core.dimension.25-5": "52d70e1c63622fee6eeb2d8a176796da6bb60233",
+        "post.core.dimension.24-5": "b4bfb43876d1f47a6b0c4e965437a2f29327ff8c",
         "post.core.font-weight.300": "4436d559d2383ae1a0ad88d57da9ce6360a7aef7",
         "post.core.font-weight.400": "2e0dea0ce52e09ecf1ea56fc61739b5dfd4c1335",
         "post.core.font-weight.500": "b4f03965c86694b373279706e6a7abd0f85ef831",
@@ -9297,9 +9396,6 @@
         "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c",
         "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621",
         "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f",
-        "post.scheme.color.surface.emphasis.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
-        "post.scheme.color.surface.emphasis.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
-        "post.scheme.color.surface.emphasis.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5",
         "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb",
         "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c",
         "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2",
@@ -9318,9 +9414,12 @@
         "post.cargo.scheme.color.surface.brand.bg": "8ac0a07d302c92c052a22bb1fd904776139683c2",
         "post.cargo.scheme.color.surface.brand.fg": "45dd08b4fe3f397ab01e14e3ac0df31ba570ea21",
         "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0",
-        "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
-        "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881",
-        "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2"
+        "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
+        "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881",
+        "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
+        "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
+        "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
+        "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5"
       }
     },
     {
@@ -9329,10 +9428,8 @@
       "$figmaStyleReferences": {},
       "selectedTokenSets": {
         "core": "source",
-        "Scheme/Light": "enabled",
         "Scheme/Dark": "enabled"
       },
-      "group": "Scheme",
       "$figmaCollectionId": "VariableCollectionId:718:1666",
       "$figmaModeId": "718:2",
       "$figmaVariableReferences": {
@@ -9479,9 +9576,6 @@
         "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c",
         "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621",
         "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f",
-        "post.scheme.color.surface.emphasis.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
-        "post.scheme.color.surface.emphasis.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
-        "post.scheme.color.surface.emphasis.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5",
         "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb",
         "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c",
         "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2",
@@ -9498,10 +9592,14 @@
         "post.cargo.scheme.color.surface.brand.bg": "8ac0a07d302c92c052a22bb1fd904776139683c2",
         "post.cargo.scheme.color.surface.brand.fg": "45dd08b4fe3f397ab01e14e3ac0df31ba570ea21",
         "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0",
-        "post.cargo.scheme.color.surface.emphasis.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
-        "post.cargo.scheme.color.surface.emphasis.fg": "e724294b65aca52dcb29118010534f0482bd0881",
-        "post.cargo.scheme.color.surface.emphasis.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2"
-      }
+        "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
+        "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881",
+        "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
+        "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
+        "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
+        "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5"
+      },
+      "group": "Scheme"
     },
     {
       "id": "0ce712c559607fae28cbd844cac1884d8f961af2",
@@ -9623,6 +9721,9 @@
         "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
         "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4",
         "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288",
+        "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967",
+        "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9",
+        "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2",
         "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e",
         "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b",
         "post.device.spacing.gap.6": "d3f0e06bad0472f9dec52560b44068444b9f9676",
@@ -9673,7 +9774,8 @@
         "post.device.border-width.focus": "36b85b12779fa51b466bbb29ec9f9a54b1ab7dcc",
         "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30",
         "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
-        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9"
+        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9",
+        "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc"
       }
     },
     {
@@ -9800,6 +9902,9 @@
         "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
         "post.device.border-width.quote": "1c2f3d93f282058f554db3737d1b131c886b81f4",
         "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288",
+        "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967",
+        "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9",
+        "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2",
         "post.device.spacing.gap.1": "303b065d5f8bf9049661db8845f2d1e59a4c08b0",
         "post.device.spacing.gap.2": "0e3be5c3cc6b23c8827bc5fb005a234c558199fc",
         "post.device.spacing.gap.3": "91cd08dcbce598d4f63e04fc4e646796d943a377",
@@ -9847,7 +9952,8 @@
         "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30",
         "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
         "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
-        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9"
+        "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9",
+        "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc"
       }
     },
     {
@@ -10028,7 +10134,11 @@
         "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
         "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9",
         "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c",
-        "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288"
+        "post.device.position.1": "39f7571c71eb116a2c8eb1184ed6c76f98b2a288",
+        "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967",
+        "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc",
+        "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9",
+        "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2"
       }
     },
     {
@@ -10426,6 +10536,15 @@
         "post.banner.neutral.border.color": "0ff562d88f3593f563203f317655ee7fb4c0e6fe",
         "post.banner.neutral.icon.color": "2e59130401db212ad37cb342a250ee6bc7d859e2",
         "post.banner.neutral.bg-scheme": "34ed982b500a8a935ee38321ce5a07ba49fd2e22",
+        "post.blockquote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89",
+        "post.blockquote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527",
+        "post.blockquote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1",
+        "post.blockquote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892",
+        "post.blockquote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859",
+        "post.blockquote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27",
+        "post.blockquote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63",
+        "post.blockquote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819",
+        "post.blockquote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2",
         "post.breadcrumb.enabled-fg": "2baf0e7b11623e8bfb266ffb3a8cf71cc6c4dbd4",
         "post.breadcrumb.hover-fg": "9848a57f5708dd944ac7a829f5031edcc927f7ba",
         "post.breadcrumb.selected-fg": "11ba9dc52d4c5ff12c180643b18255c8f570da7a",
@@ -10737,15 +10856,6 @@
         "post.popover.text.selected-fg": "963b9d422b963ed3acdf1500f4aebfd93e4e98fc",
         "post.popover.paragraph.font-size": "753ab6d39cf4d2df84fe359b6d932172e31f0fab",
         "post.popover.legend.font-size": "ca32c490ebb5bc14ebf424aba54246f56931bde2",
-        "post.blockquote.border-width.left": "6568787d70363b299117e8c52095eeb14451fe89",
-        "post.blockquote.border.left.color": "adc2d5072c255eb50d74db7d8d3513930191b527",
-        "post.blockquote.margin.block": "bd08d047e4f9a0f40d6fc329ffcfe35605868fa1",
-        "post.blockquote.margin.inline": "e74d12dbeafe66a04d4429241a8c0018b2bd3892",
-        "post.blockquote.padding.inline.start": "7a1872b53d95b09254aedb9c83134c16f257d859",
-        "post.blockquote.padding.inline.end": "4aaac936d03e419c78861c16341f44cc5aa12c27",
-        "post.blockquote.gap.inline": "dc6aadb7c7375ca7445e8e3a7123c31a62ad9b63",
-        "post.blockquote.font-weight": "bbbd5bcf6682a14dd804110603e0f781f880f819",
-        "post.blockquote.font-size": "0ca009d91f5f9572660f874598908a4c2f0fdaa2",
         "post.radio-button.enabled-bg": "981537511aa6b68e6575007cd1724da013be2dcc",
         "post.radio-button.enabled-fg": "ad56c5542bcfd074a5baf4037297d0884420cd6d",
         "post.radio-button.hover-bg": "f8df140d31e8b662762a8ad65af72207185e25a6",
@@ -10933,8 +11043,27 @@
         "post.input.color.selected-stroke": "cd6d5766d9f136e44719c7a28eb250c545556c35",
         "post.input.color.signal.error": "7ddc0bfe846c295b5a215c45e423a2fdddf6959a",
         "post.input.color.signal.success": "0157a5c40c9a4eb6f87cfddd9a5c3f3a8a67282e",
+        "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d",
+        "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65",
+        "post.input.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7",
+        "post.input.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a",
+        "post.input.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1",
+        "post.input.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d",
+        "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909",
+        "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45",
+        "post.input.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f",
         "post.input.sizing.icon": "d8468d53a31f1ff5e298f2e6783a215bc1a9902c",
         "post.input.border-radius.surface": "d06c0dd30f742b0d6cd4cbddcf2ee20dc059be64",
+        "post.input.border-width": "1ade7245040a677b64153d2cdf6651fcea38bf0e",
+        "post.input.empty.padding.block": "5e8222cbe4c364dc01d3f3a4bdc58faa38f2056c",
+        "post.input.label.empty.padding.block.start": "d62b407bf1b5948a054a4f578b2cddaeb4c37c34",
+        "post.input.label.empty.padding.inline.start": "b51731dc964c610165cf1ae964d243ad78df81e5",
+        "post.input.label.empty.padding.inline.end": "3717013c982ae87b4a055205377945bfd6f49e68",
+        "post.input.label.validated.padding.inline.end": "e48ddec27eff926626a3b10a7861ec56e487e335",
+        "input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc",
+        "post.input.filled.padding.block.start": "2924bedf122ccb4ab278a3ce28e06a8337c84059",
+        "post.input.filled.padding.block.end": "66ffd33591a7dcb8d7d81b4a9ceb90cb563652d2",
+        "post.input.label.filled.padding.block.start": "25bb881879bcfa6f8fc16fbda7cd5164a5083252",
         "post.toast.spacing.padding.action": "7b789908238cacf3f7c6b327401296ec0a1da28c",
         "post.toast.spacing.padding.inline": "014e44c5cc1c44d944c9d6df6c213c429f99c76d",
         "post.toast.spacing.padding.block": "8588d5bd126b4227934aec9c655f6dbcb10a84b7",
@@ -10978,16 +11107,7 @@
         "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371",
         "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646",
         "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469",
-        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f",
-        "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d",
-        "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65",
-        "post.input.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7",
-        "post.input.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a",
-        "post.input.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1",
-        "post.input.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d",
-        "post.input.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f",
-        "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909",
-        "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45"
+        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f"
       }
     },
     {
@@ -11062,16 +11182,16 @@
       "$figmaVariableReferences": {
         "post.theme.palettes.bg-scheme.brand": "ac9cc556351b9d9b72ce01e166e148b74b25de3f",
         "post.theme.palettes.bg-scheme.emphasis": "f37d68c8d5ee579997a1a1b403162484c8cff869",
+        "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009",
+        "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b",
+        "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2",
+        "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121",
         "post.theme.color.palettes.brand.bg": "2f0b9e90b3d7117a9d7037b325deac970c3bee16",
         "post.theme.color.palettes.brand.fg": "8ce342d323f6022375641c1f92d265636eda0015",
         "post.theme.color.palettes.accent.bg": "36c62b7057d0d665572ef3d4be91dd81c61fb13b",
         "post.theme.color.palettes.accent.fg": "8d3dab1f80eb4d3b22f62613a3c3f80d5609538d",
         "post.theme.palettes.bg-scheme.default": "9504f02cdfa20b1afd02c21b95c5e8753ac50340",
-        "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0",
-        "post.theme.color.palettes.default.bg": "dc69a147a83c9da5d6b52a3e1999082ac7405009",
-        "post.theme.color.palettes.default.fg": "17e7f1199980448c9e431b59ac934c0ef11c5e1b",
-        "post.theme.color.palettes.alternate.bg": "47e0f61a01f52edc65e7fcfb6ba1237495959eb2",
-        "post.theme.color.palettes.alternate.fg": "96a7f4c12efb74f3da27770f2014a52032056121"
+        "post.theme.palettes.bg-scheme.alternate": "bb955dc5c7061bd23cb6c735b2d5f01b727625d0"
       }
     },
     {

From 5738e12fb6ec33170b83e8d89f10c5d5c3c1db78 Mon Sep 17 00:00:00 2001
From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:50:53 +0100
Subject: [PATCH 03/11] chore(tokens): :art: update tokens (#3959)

Merge this PR to update the tokens in the main branch.

---------

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

diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json
index ee04454f8b..d953769d56 100644
--- a/packages/tokens/tokensstudio-generated/tokens.json
+++ b/packages/tokens/tokensstudio-generated/tokens.json
@@ -2826,6 +2826,10 @@
                 "5": {
                   "$type": "sizing",
                   "$value": "{post.core.dimension.48}"
+                },
+                "6": {
+                  "$type": "sizing",
+                  "$value": "{post.core.dimension.64}"
                 }
               },
               "appstore": {
@@ -3432,6 +3436,10 @@
                 "5": {
                   "$type": "sizing",
                   "$value": "{post.core.dimension.40}"
+                },
+                "6": {
+                  "$type": "sizing",
+                  "$value": "{post.core.dimension.56}"
                 }
               },
               "appstore": {
@@ -7786,19 +7794,19 @@
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.enabled.fg2}"
           },
-          "enabled-stroke": {
+          "enabled-border": {
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.enabled.stroke}"
           },
-          "hover-stroke": {
+          "hover-border": {
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.hover.stroke}"
           },
-          "disabled-stroke": {
+          "disabled-border": {
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.disabled.stroke}"
           },
-          "selected-stroke": {
+          "selected-border": {
             "$type": "color",
             "$value": "{post.scheme.color.interactive.primary.selected.stroke1}"
           },
@@ -7827,21 +7835,9 @@
         },
         "padding": {
           "block": {
-            "text1": {
-              "$type": "spacing",
-              "$value": "{post.device.spacing.padding.block.1}"
-            },
-            "text2": {
-              "$type": "spacing",
-              "$value": "{post.device.spacing.padding.block.3}"
-            },
-            "text-assist": {
+            "assist": {
               "$type": "spacing",
               "$value": "{post.device.spacing.padding.block.5}"
-            },
-            "text5": {
-              "$type": "spacing",
-              "$value": "{post.device.spacing.padding.block.2}"
             }
           },
           "inline": {
@@ -7853,7 +7849,7 @@
               "$type": "spacing",
               "$value": "{post.device.spacing.padding.3}"
             },
-            "text-assist": {
+            "assist": {
               "$type": "spacing",
               "$value": "{post.device.spacing.padding.2}"
             }
@@ -7863,6 +7859,10 @@
           "icon": {
             "$type": "sizing",
             "$value": "{post.device.sizing.notification.1}"
+          },
+          "height": {
+            "$type": "sizing",
+            "$value": "{post.device.sizing.interactive.button.height.6}"
           }
         },
         "border-radius": {
@@ -7932,6 +7932,22 @@
                   "$value": "{post.device.spacing.padding.block.30}"
                 }
               }
+            },
+            "font-size": {
+              "$type": "fontSizes",
+              "$value": "{post.device.font-size.10}"
+            }
+          }
+        },
+        "validation": {
+          "icon": {
+            "position": {
+              "inline": {
+                "end": {
+                  "$type": "dimension",
+                  "$value": "{post.device.position.2}"
+                }
+              }
             }
           }
         },
@@ -7948,19 +7964,11 @@
               }
             }
           }
-        }
-      }
-    },
-    "input": {
-      "validation": {
-        "icon": {
-          "position": {
-            "inline": {
-              "end": {
-                "$type": "dimension",
-                "$value": "{post.device.position.2}"
-              }
-            }
+        },
+        "assist": {
+          "font-size": {
+            "$type": "fontSizes",
+            "$value": "{post.device.font-size.10}"
           }
         }
       }
@@ -9396,14 +9404,15 @@
         "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c",
         "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621",
         "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f",
+        "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
+        "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
+        "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5",
         "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb",
         "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c",
         "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2",
         "post.scheme.color.notification.popover.hover": "9e2793c01c18d6947c2d4e898afcb379426d952c",
         "post.scheme.accent.bg-scheme.1": "a7a55881dbc34e6d6b85f0bd30188fb164677678",
         "post.scheme.accent.bg-scheme.2": "a343e732fc434c2a0b9c1597748d8e12a1755aed",
-        "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f",
-        "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198",
         "post.cargo.scheme.color.surface.default.bg": "41eb3ffd4461ead71c3379a48099d9c674aab882",
         "post.cargo.scheme.color.surface.default.fg": "d42f699b9bbf506aee792a6a5d28a01f8fdc3078",
         "post.cargo.scheme.color.surface.default.stroke": "68a8156f2b87010e07a024843e8efbbdf62022d3",
@@ -9417,9 +9426,8 @@
         "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
         "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881",
         "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
-        "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
-        "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
-        "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5"
+        "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f",
+        "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198"
       }
     },
     {
@@ -9441,8 +9449,6 @@
         "post.scheme.color.signal.warning-light": "89302ce07bdf3dda8857ae055241ba5e55af16c7",
         "post.scheme.color.signal.information-dark": "04907dc5972eef19d828ea38aafba62220824b5c",
         "post.scheme.color.signal.information-light": "92a36e527934b27f741ef1d21ccd77f46081bcea",
-        "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f",
-        "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198",
         "post.scheme.color.signal.success-solo": "005074d4749ba0d64a11e8a5c742c48631c98dca",
         "post.scheme.color.signal.error-solo": "93e0cd4e7a5f9b2a33a76c9c0f3ab60dc5543f66",
         "post.scheme.color.interactive.button.primary.enabled.fg": "2a55e0da7a6a77af2ab682cfee46da43264624cf",
@@ -9576,6 +9582,9 @@
         "post.scheme.color.surface.alternate.fg": "c301615214e1cca28102b3a651f3b8c9da42ca5c",
         "post.scheme.color.surface.brand.bg": "5882e06454efa138fece081c28b7788f52e81621",
         "post.scheme.color.surface.brand.fg": "962f01542da03311583047fbea671773938b354f",
+        "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
+        "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
+        "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5",
         "post.scheme.color.notification.badge.bg": "0de95de05ec88e26525f4211c81f0f8dbe321ebb",
         "post.scheme.color.notification.badge.fg": "48ff724df33b9947e7e74a729c5dc4a7c930f58c",
         "post.scheme.color.notification.badge.stroke": "3b53b100fef4f7aa9a97b64e7d2fa8fc9c51aba2",
@@ -9594,10 +9603,7 @@
         "post.cargo.scheme.color.surface.brand.fg-accent": "15eac3957d30e8b21001a30f17a62fd362e0c5f0",
         "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
         "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881",
-        "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
-        "post.scheme.color.surface.accent.bg": "e3fe18387eb6baccd0e82d158ea15da28536615d",
-        "post.scheme.color.surface.accent.fg": "d3570e8972397cb630ce75bf875bfd6a22b4157a",
-        "post.scheme.color.surface.accent.fg-accent": "d7893d385ffd4cb44d7c3f5299884b5719e5e8f5"
+        "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2"
       },
       "group": "Scheme"
     },
@@ -9724,6 +9730,7 @@
         "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967",
         "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9",
         "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2",
+        "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6",
         "post.device.spacing.gap.4": "18a97621a6b8cd79f7f4424a6afbc99f49a4104e",
         "post.device.spacing.gap.5": "cd8bc19de4a06c78cf89a9c2ee34309a0f517e9b",
         "post.device.spacing.gap.6": "d3f0e06bad0472f9dec52560b44068444b9f9676",
@@ -9953,7 +9960,8 @@
         "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378",
         "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05",
         "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9",
-        "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc"
+        "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc",
+        "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6"
       }
     },
     {
@@ -10138,7 +10146,8 @@
         "post.device.spacing.padding.block.28": "895e312dae801af70e24ede86c2d25203b46e967",
         "post.device.position.2": "ba05cc16eebec31bed449523188a621463b014cc",
         "post.device.spacing.padding.block.29": "e4a88bacff8f38bce4b8c1daec564da51ccc5af9",
-        "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2"
+        "post.device.spacing.padding.block.30": "f22671807ba118b22495e0eb82d88eb98a47b3e2",
+        "post.device.sizing.interactive.button.height.6": "78caf6ef8cec35dc5ab0dc663c9d2747595bc9a6"
       }
     },
     {
@@ -11037,21 +11046,12 @@
         "post.input.color.selected-bg": "8bd7235f1399a9bc166130edce1af72427cfb8ed",
         "post.input.color.selected-fg": "1ae0d7346c71e3c28fd3ebe05123a3ea04b3fbe6",
         "post.input.color.helptext-fg": "cc1db7dbc95596ee0f941b44c4b55712ba6625e2",
-        "post.input.color.enabled-stroke": "e8fb5159e5c020c2919c12ad157578d1083b1cc2",
-        "post.input.color.hover-stroke": "5a5615016cc59292e11a683669369db7182dafb9",
-        "post.input.color.disabled-stroke": "c65628869cf318afba36f149d035a6ad6291e0d3",
-        "post.input.color.selected-stroke": "cd6d5766d9f136e44719c7a28eb250c545556c35",
         "post.input.color.signal.error": "7ddc0bfe846c295b5a215c45e423a2fdddf6959a",
         "post.input.color.signal.success": "0157a5c40c9a4eb6f87cfddd9a5c3f3a8a67282e",
         "post.input.gap.inline.1": "ea0f287f910901d9a2754175427d33874636908d",
         "post.input.gap.inline.2": "e17ec3bfeef8ad59d33f8ed4028bcbeffb3c2e65",
-        "post.input.padding.block.text1": "a2dbf734944c2720e08b06ba2f0d4446807214a7",
-        "post.input.padding.block.text2": "16e43ccd63e09b43f7078bfdc6bee6432ea4fe9a",
-        "post.input.padding.block.text-assist": "74fa0091e635d194f2726e8a49d63029f797d7b1",
-        "post.input.padding.block.text5": "be118ff83da708f6758b8dda877fadaea5a24e3d",
         "post.input.padding.inline.start": "95d346d8cf0d15d92cbb0d838ad1d21e2196d909",
         "post.input.padding.inline.end": "251080d245b6ce91ef6947cedb9d8710871c1e45",
-        "post.input.padding.inline.text-assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f",
         "post.input.sizing.icon": "d8468d53a31f1ff5e298f2e6783a215bc1a9902c",
         "post.input.border-radius.surface": "d06c0dd30f742b0d6cd4cbddcf2ee20dc059be64",
         "post.input.border-width": "1ade7245040a677b64153d2cdf6651fcea38bf0e",
@@ -11060,10 +11060,13 @@
         "post.input.label.empty.padding.inline.start": "b51731dc964c610165cf1ae964d243ad78df81e5",
         "post.input.label.empty.padding.inline.end": "3717013c982ae87b4a055205377945bfd6f49e68",
         "post.input.label.validated.padding.inline.end": "e48ddec27eff926626a3b10a7861ec56e487e335",
-        "input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc",
+        "post.input.validation.icon.position.inline.end": "b57f1666c23edfb6f677c04e41bc20ebaae726cc",
         "post.input.filled.padding.block.start": "2924bedf122ccb4ab278a3ce28e06a8337c84059",
         "post.input.filled.padding.block.end": "66ffd33591a7dcb8d7d81b4a9ceb90cb563652d2",
         "post.input.label.filled.padding.block.start": "25bb881879bcfa6f8fc16fbda7cd5164a5083252",
+        "post.input.sizing.height": "82cf75a7b82a124c9b1d42cdbc0e9e84e3b11b9b",
+        "post.input.label.filled.font-size": "a12f8c5b97bd1f6bf59bf7da851dba7386e1396e",
+        "post.input.assist.font-size": "69317593d3b185baf0fb132ac414e643e3c95ae1",
         "post.toast.spacing.padding.action": "7b789908238cacf3f7c6b327401296ec0a1da28c",
         "post.toast.spacing.padding.inline": "014e44c5cc1c44d944c9d6df6c213c429f99c76d",
         "post.toast.spacing.padding.block": "8588d5bd126b4227934aec9c655f6dbcb10a84b7",
@@ -11107,7 +11110,13 @@
         "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371",
         "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646",
         "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469",
-        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f"
+        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f",
+        "post.input.color.enabled-border": "e8fb5159e5c020c2919c12ad157578d1083b1cc2",
+        "post.input.color.hover-border": "5a5615016cc59292e11a683669369db7182dafb9",
+        "post.input.color.disabled-border": "c65628869cf318afba36f149d035a6ad6291e0d3",
+        "post.input.color.selected-border": "cd6d5766d9f136e44719c7a28eb250c545556c35",
+        "post.input.padding.inline.assist": "e265e8a8f1e63ac91a7c044560f1c84736e1167f",
+        "post.input.padding.block.assist": "74fa0091e635d194f2726e8a49d63029f797d7b1"
       }
     },
     {

From ae19d69da70b4f42bf54533baf334cb90309f860 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Mon, 11 Nov 2024 14:52:22 +0100
Subject: [PATCH 04/11] feat(components): close button web component (#3880)
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>
---
 .changeset/shy-walls-exercise.md              |  7 ++++
 .../components/cypress/e2e/closebutton.cy.ts  | 22 +++++++++++
 packages/components/src/components.d.ts       | 13 +++++++
 .../post-closebutton/post-closebutton.tsx     | 26 +++++++++++++
 .../src/components/post-closebutton/readme.md | 30 ++++++++++++++
 .../src/components/post-icon/readme.md        |  2 +
 packages/components/src/index.ts              |  1 +
 .../components/close-button.snapshot.ts       |  7 ++++
 .../{ => buttons}/button/button.docs.mdx      |  0
 .../button/button.snapshot.stories.ts         |  0
 .../{ => buttons}/button/button.stories.ts    |  2 +-
 .../close-button/close-button.docs.mdx        | 24 ++++++++++++
 .../close-button.snapshot.stories.ts          | 26 +++++++++++++
 .../close-button/close-button.stories.ts      | 39 +++++++++++++++++++
 packages/styles/src/components/_index.scss    |  1 +
 .../src/components/icon-close-button.scss     | 28 +++++++++++++
 16 files changed, 227 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/shy-walls-exercise.md
 create mode 100644 packages/components/cypress/e2e/closebutton.cy.ts
 create mode 100644 packages/components/src/components/post-closebutton/post-closebutton.tsx
 create mode 100644 packages/components/src/components/post-closebutton/readme.md
 create mode 100644 packages/documentation/cypress/snapshots/components/close-button.snapshot.ts
 rename packages/documentation/src/stories/components/{ => buttons}/button/button.docs.mdx (100%)
 rename packages/documentation/src/stories/components/{ => buttons}/button/button.snapshot.stories.ts (100%)
 rename packages/documentation/src/stories/components/{ => buttons}/button/button.stories.ts (99%)
 create mode 100644 packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx
 create mode 100644 packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts
 create mode 100644 packages/styles/src/components/icon-close-button.scss

diff --git a/.changeset/shy-walls-exercise.md b/.changeset/shy-walls-exercise.md
new file mode 100644
index 0000000000..ba712642c4
--- /dev/null
+++ b/.changeset/shy-walls-exercise.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added close button web component.
diff --git a/packages/components/cypress/e2e/closebutton.cy.ts b/packages/components/cypress/e2e/closebutton.cy.ts
new file mode 100644
index 0000000000..275adfb50a
--- /dev/null
+++ b/packages/components/cypress/e2e/closebutton.cy.ts
@@ -0,0 +1,22 @@
+const CLOSE_BTN_ID = 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a';
+
+describe('Close button', () => {
+  describe('default', () => {
+    beforeEach(() => {
+      cy.getComponent('post-closebutton', CLOSE_BTN_ID);
+    });
+
+    it('should render with a close button and a11y label', () => {
+      cy.get('@closebutton').should('exist');
+      cy.get('@closebutton').find('.btn-icon-close').should('exist');
+      cy.get('@closebutton').find('span.visually-hidden').should('exist');
+    });
+  });
+});
+
+describe('Accessibility', () => {
+  it('Has no detectable a11y violations on load for all variants', () => {
+    cy.getSnapshots('post-closebutton');
+    cy.checkA11y('#root-inner');
+  });
+});
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 5fb886f66a..3056034100 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -148,6 +148,8 @@ export namespace Components {
          */
         "value": string;
     }
+    interface PostClosebutton {
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is collapsed otherwise it is displayed.
@@ -475,6 +477,12 @@ declare global {
         prototype: HTMLPostCardControlElement;
         new (): HTMLPostCardControlElement;
     };
+    interface HTMLPostClosebuttonElement extends Components.PostClosebutton, HTMLStencilElement {
+    }
+    var HTMLPostClosebuttonElement: {
+        prototype: HTMLPostClosebuttonElement;
+        new (): HTMLPostClosebuttonElement;
+    };
     interface HTMLPostCollapsibleElementEventMap {
         "postToggle": boolean;
     }
@@ -631,6 +639,7 @@ declare global {
         "post-avatar": HTMLPostAvatarElement;
         "post-breadcrumb-item": HTMLPostBreadcrumbItemElement;
         "post-card-control": HTMLPostCardControlElement;
+        "post-closebutton": HTMLPostClosebuttonElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement;
         "post-icon": HTMLPostIconElement;
@@ -769,6 +778,8 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface PostClosebutton {
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is collapsed otherwise it is displayed.
@@ -973,6 +984,7 @@ declare namespace LocalJSX {
         "post-avatar": PostAvatar;
         "post-breadcrumb-item": PostBreadcrumbItem;
         "post-card-control": PostCardControl;
+        "post-closebutton": PostClosebutton;
         "post-collapsible": PostCollapsible;
         "post-collapsible-trigger": PostCollapsibleTrigger;
         "post-icon": PostIcon;
@@ -1003,6 +1015,7 @@ declare module "@stencil/core" {
              * @class PostCardControl - representing a stencil component
              */
             "post-card-control": LocalJSX.PostCardControl & JSXBase.HTMLAttributes<HTMLPostCardControlElement>;
+            "post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes<HTMLPostClosebuttonElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             "post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes<HTMLPostCollapsibleTriggerElement>;
             /**
diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx
new file mode 100644
index 0000000000..68d13ef51a
--- /dev/null
+++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx
@@ -0,0 +1,26 @@
+import { Component, Element, h, Host } from '@stencil/core';
+import { version } from '@root/package.json';
+
+/**
+ * @slot default - Slot for placing visually hidden label in the close button.
+ */
+@Component({
+  tag: 'post-closebutton',
+  shadow: false,
+})
+export class PostClosebutton {
+  @Element() host: HTMLPostClosebuttonElement;
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <button class="btn btn-icon-close">
+          <post-icon aria-hidden="true" name="2043"></post-icon>
+          <span class="visually-hidden">
+            <slot></slot>
+          </span>
+        </button>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-closebutton/readme.md b/packages/components/src/components/post-closebutton/readme.md
new file mode 100644
index 0000000000..ca0053c6df
--- /dev/null
+++ b/packages/components/src/components/post-closebutton/readme.md
@@ -0,0 +1,30 @@
+# post-closebutton
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Slots
+
+| Slot        | Description                                                 |
+| ----------- | ----------------------------------------------------------- |
+| `"default"` | Slot for placing visually hidden label in the close button. |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-closebutton --> post-icon
+  style post-closebutton fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
index 92d1a4bacb..afb94ab2e7 100644
--- a/packages/components/src/components/post-icon/readme.md
+++ b/packages/components/src/components/post-icon/readme.md
@@ -25,6 +25,7 @@ some content
  - [post-alert](../post-alert)
  - [post-breadcrumb-item](../post-breadcrumb-item)
  - [post-card-control](../post-card-control)
+ - [post-closebutton](../post-closebutton)
  - [post-rating](../post-rating)
  - [post-tag](../post-tag)
 
@@ -34,6 +35,7 @@ graph TD;
   post-alert --> post-icon
   post-breadcrumb-item --> post-icon
   post-card-control --> post-icon
+  post-closebutton --> post-icon
   post-rating --> post-icon
   post-tag --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 2644481576..a2734c8e80 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -7,6 +7,7 @@ export { PostAlert } from './components/post-alert/post-alert';
 export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
 export { PostAvatar } from './components/post-avatar/post-avatar';
 export { PostCardControl } from './components/post-card-control/post-card-control';
+export { PostClosebutton } from './components/post-closebutton/post-closebutton';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
 export { PostIcon } from './components/post-icon/post-icon';
diff --git a/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts b/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts
new file mode 100644
index 0000000000..82da359c4c
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/close-button.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Close button', () => {
+  it('post-closebutton', () => {
+    cy.visit('/iframe.html?id=snapshots--post-closebutton');
+    cy.get('post-closebutton[data-hydrated]', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Close button (Web Component)', { widths: [1440] });
+  });
+});
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/buttons/button/button.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/button/button.docs.mdx
rename to packages/documentation/src/stories/components/buttons/button/button.docs.mdx
diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/buttons/button/button.snapshot.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/button/button.snapshot.stories.ts
rename to packages/documentation/src/stories/components/buttons/button/button.snapshot.stories.ts
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/buttons/button/button.stories.ts
similarity index 99%
rename from packages/documentation/src/stories/components/button/button.stories.ts
rename to packages/documentation/src/stories/components/buttons/button/button.stories.ts
index 1b707a53a3..5e8ba415d2 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/buttons/button/button.stories.ts
@@ -6,7 +6,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent = {
   id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4',
-  title: 'Components/Button',
+  title: 'Components/Buttons/Button',
   tags: ['package:HTML'],
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx b/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx
new file mode 100644
index 0000000000..6e3948c7de
--- /dev/null
+++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.docs.mdx
@@ -0,0 +1,24 @@
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import * as CloseButtonStories from './close-button.stories';
+
+<Meta of={CloseButtonStories} />
+
+<div className="docs-title">
+  # Close button
+
+  <nav>
+    <link-design of={JSON.stringify(CloseButtonStories)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  The close button is a web component. It is a slightly adapted version of the icon button, intended
+  for a specific use case.
+</div>
+
+The value inside the `<post-closebutton>` element will be rendered inside the button as a visually hidden text so make sure to only insert inline content there.
+
+<Canvas sourceState="shown" of={CloseButtonStories.Default} />
+<div className="hide-col-default">
+  <Controls of={CloseButtonStories.Default} />
+</div>
diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts b/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts
new file mode 100644
index 0000000000..d6b21d0b46
--- /dev/null
+++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.snapshot.stories.ts
@@ -0,0 +1,26 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta, { Default } from './close-button.stories';
+import { html } from 'lit';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj<HTMLPostClosebuttonElement>;
+
+export const PostClosebutton: Story = {
+  render: (_args: Args, context: StoryContext<HTMLPostClosebuttonElement>) => {
+    return html`
+      ${['bg-white', 'bg-dark'].map(
+        bg => html`
+          <div class="${bg} p-40" data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}>
+            ${Default.render?.({ ...context.args }, context)}
+          </div>
+        `,
+      )}
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts b/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts
new file mode 100644
index 0000000000..7b947e99a0
--- /dev/null
+++ b/packages/documentation/src/stories/components/buttons/close-button/close-button.stories.ts
@@ -0,0 +1,39 @@
+import type { Args, StoryObj } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { MetaComponent } from '@root/types';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+const meta: MetaComponent = {
+  id: 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a',
+  title: 'Components/Buttons/Close button',
+  component: 'post-closebutton',
+  tags: ['package:WebComponents'],
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2514-18516&t=gCGlckfBEobCTna3-4',
+    },
+  },
+  args: {
+    'slots-default': 'Close button',
+  },
+  argTypes: {
+    'slots-default': {
+      name: 'Label',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: (args: Args) => {
+    return html`<post-closebutton>${unsafeHTML(args['slots-default'])}</post-closebutton> `;
+  },
+};
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index b75e0b8370..41d7eacdf6 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -25,6 +25,7 @@
 @use 'forms';
 @use 'grid';
 @use 'icon-button';
+@use 'icon-close-button';
 @use 'icons';
 @use 'lead';
 @use 'list-group';
diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss
new file mode 100644
index 0000000000..c8eb34d175
--- /dev/null
+++ b/packages/styles/src/components/icon-close-button.scss
@@ -0,0 +1,28 @@
+@use '../functions/tokens';
+@use '../tokens/components';
+@use './../mixins/utilities';
+
+tokens.$default-map: components.$post-close;
+
+.btn-icon-close {
+  padding: 0;
+  border: unset;
+  min-height: unset;
+  min-width: unset;
+  width: tokens.get('close-size');
+  height: tokens.get('close-size');
+  border-radius: tokens.get('close-border-radius');
+  background-color: tokens.get('close-enabled-bg');
+  color: tokens.get('close-enabled-fg');
+
+  > post-icon {
+    width: tokens.get('close-icon-size');
+    height: tokens.get('close-icon-size');
+  }
+
+  @include utilities.not-disabled-hover() {
+    cursor: pointer;
+    background-color: tokens.get('close-hover-bg');
+    color: tokens.get('close-hover-fg');
+  }
+}

From e45d72fef68e1d407f5ba392e51ebfc2a86a4298 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 11 Nov 2024 15:53:50 +0100
Subject: [PATCH 05/11] feat(styles): enabled media mixins with string params
 (#3836)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This allows to call the media mixins with keys from the breakpoint list
directly, e.g. `@include media.max(lg) { }`.
---
 packages/styles/src/mixins/_media.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss
index 340afbaeee..475321853b 100644
--- a/packages/styles/src/mixins/_media.scss
+++ b/packages/styles/src/mixins/_media.scss
@@ -2,6 +2,8 @@
 @use 'sass:meta';
 @use '../functions/breakpoint';
 
+$offset: 0.01;
+
 /**
   Creates a min-width breakpoint with the given value
   @param $device-size A pixel value or a key for the breakpoints map
@@ -29,7 +31,7 @@
     $device-size: breakpoint.min-width($device-size);
   }
 
-  @media screen and (max-width: ($device-size - 0.01)) {
+  @media screen and (max-width: ($device-size - $offset)) {
     @content;
   }
 }
@@ -47,7 +49,7 @@
     $max-size: breakpoint.min-width($max-size);
   }
 
-  @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) {
+  @media screen and (min-width: $min-size) and (max-width: ($max-size - $offset)) {
     @content;
   }
 }

From 6486d60abbbd423c5b854500aa4e42325df04a57 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 11 Nov 2024 15:54:08 +0100
Subject: [PATCH 06/11] chore: set tokens package to public (#3960)

---
 packages/tokens/package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 5781f6b8d7..4df4e27669 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -1,8 +1,7 @@
 {
   "name": "@swisspost/design-system-tokens",
   "version": "9.0.0-next.3",
-  "private": true,
-  "description": "Design Tokens for the Swiss Post.",
+  "description": "Design Tokens for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
   "repository": {
@@ -29,7 +28,7 @@
   ],
   "publishConfig": {
     "directory": "./dist",
-    "access": "restricted",
+    "access": "public",
     "linkDirectory": true
   },
   "devDependencies": {

From 3077ab4626387837bb9cb8b87352bd11de38d452 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 11 Nov 2024 15:54:59 +0100
Subject: [PATCH 07/11] chore: update component issue template (#3951)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR is adding a design tasks section to the component v2 issue
template.

---------

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .github/ISSUE_TEMPLATE/component-v2.yml | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/component-v2.yml b/.github/ISSUE_TEMPLATE/component-v2.yml
index dfefd7c352..ace2c22cfb 100644
--- a/.github/ISSUE_TEMPLATE/component-v2.yml
+++ b/.github/ISSUE_TEMPLATE/component-v2.yml
@@ -28,14 +28,31 @@ body:
       options:
         - label: Tokens for this component are ready
   - type: textarea
-    id: tasks
+    id: tasksdesign
     attributes:
-      label: Tasks
+      label: Tasks design
+      description: Default tasks for the design team. Can be edited later according to needs.
+      value: |
+        ```[tasklist]
+        ### 🎨 Design
+        - [ ] Design component according to WIKIT
+        - [ ] Update dependencies
+        - [ ] Add & test compo in layout examples
+        - [ ] Designer review
+        - [ ] Documentation: Overview and usage (about, compo overview, compo props, usage, examples)
+        - [ ] Documentation: Technical documentation (anatomy, accessibility)
+        - [ ] Documentation: Review (content correctness, understandability, gaps)
+        ```
+  - type: textarea
+    id: tasksdev
+    attributes:
+      label: Tasks development
       description: Default tasks for the dev team. Can be edited later according to needs.
       value: |
         ```[tasklist]
-        ### 💻 Tasks
+        ### 💻 Development
         - [ ] Review Design (All states present? Possible to implement?)
+        - [ ] Tokenization
         - [ ] HTML/CSS implementation
         - [ ] Web component implementation
         - [ ] Documentation in Storybook

From 62c6e12995802d3b868bd39abc20c9c819961316 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 11 Nov 2024 15:55:23 +0100
Subject: [PATCH 08/11] chore(icons): :point_up: update icons (#3948) (#3952)

# Design system icons are now up to date!
## Added icons
2632

---------

Co-authored-by: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/2024-11-10-update-icons.md     |   6 +
 packages/icons/public/post-icons/2632.svg |   3 +
 packages/icons/public/report.json         | 146 +++++++++++++---------
 packages/styles/src/_svg-icon-map.scss    |   2 +
 4 files changed, 98 insertions(+), 59 deletions(-)
 create mode 100644 .changeset/2024-11-10-update-icons.md
 create mode 100644 packages/icons/public/post-icons/2632.svg

diff --git a/.changeset/2024-11-10-update-icons.md b/.changeset/2024-11-10-update-icons.md
new file mode 100644
index 0000000000..58d8ed8161
--- /dev/null
+++ b/.changeset/2024-11-10-update-icons.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-icons': minor
+---
+
+Added icon number 2632.
+
diff --git a/packages/icons/public/post-icons/2632.svg b/packages/icons/public/post-icons/2632.svg
new file mode 100644
index 0000000000..a906fca2d3
--- /dev/null
+++ b/packages/icons/public/post-icons/2632.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 0C7.16 0 0 7.16 0 16s7.16 16 16 16 16-7.16 16-16S24.84 0 16 0m0 30.67C7.91 30.67 1.33 24.09 1.33 16S7.91 1.33 16 1.33 30.67 7.91 30.67 16 24.09 30.67 16 30.67M9.18 10.66c-3.35 3.35-3.35 8.81 0 12.16 1.68 1.68 3.88 2.51 6.08 2.51s4.4-.84 6.08-2.51a8.7 8.7 0 0 0 2.21-3.81L24.3 7.7l-11.24.73a8.6 8.6 0 0 0-3.88 2.23m13.68-1.53-.64 9.65a7.16 7.16 0 0 1-1.83 3.09c-1.37 1.37-3.19 2.12-5.14 2.12s-3.77-.75-5.14-2.12c-2.83-2.83-2.83-7.44 0-10.27.87-.87 1.96-1.51 3.16-1.85l9.58-.62Zm-7.6 10.83a3.2 3.2 0 0 0 2.28-.94 3.223 3.223 0 0 0 0-4.56c-.63-.63-1.45-.94-2.28-.94s-1.65.31-2.28.94a3.223 3.223 0 0 0 0 4.56 3.2 3.2 0 0 0 2.28.94m-1.34-4.56c.36-.36.83-.55 1.34-.55s.98.2 1.34.55c.36.36.55.83.55 1.34s-.2.98-.55 1.34c-.36.36-.83.55-1.34.55s-.98-.2-1.34-.55-.55-.83-.55-1.34.2-.98.55-1.34"/>
+</svg>
diff --git a/packages/icons/public/report.json b/packages/icons/public/report.json
index be46312c96..51a74ee2e7 100644
--- a/packages/icons/public/report.json
+++ b/packages/icons/public/report.json
@@ -11385,50 +11385,6 @@
       "createdAt": "2020-12-18T07:32:42.000Z",
       "modifiedAt": "2024-10-18T07:14:11.000Z"
     },
-    {
-      "uuid": "88307300-5bef-11eb-9f99-005056873709",
-      "id": 539481,
-      "type": "picture.pictogram.",
-      "typeFilter": "pictograms",
-      "meta": {
-        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/539481/storage/NTM5NDg5LzAvbWFzdGVy",
-        "keywords": [
-          "LAD",
-          "Leistung am Domizil",
-          "Prestazione a domicilio",
-          "Service at home",
-          "Prestation à domicile",
-          "Wegweiser",
-          "Sign",
-          "Segno",
-          "Signer",
-          "Sinnbild",
-          "Symbol",
-          "Simbolo",
-          "Symbole",
-          "Strassenschild",
-          "Road Sign",
-          "Segnale stradale",
-          "Panneau De Signalisation"
-        ],
-        "year": [
-          "2021"
-        ]
-      },
-      "file": {
-        "mime": "image/svg+xml",
-        "name": "2205.svg",
-        "basename": "2205",
-        "ext": ".svg",
-        "size": {
-          "width": 0,
-          "dpi": 72,
-          "height": 0
-        }
-      },
-      "createdAt": "2021-01-21T13:49:50.000Z",
-      "modifiedAt": "2024-10-24T05:04:06.000Z"
-    },
     {
       "uuid": "4cc7c010-5bf0-11eb-9f99-005056873709",
       "id": 539487,
@@ -11475,6 +11431,50 @@
       "createdAt": "2021-01-21T13:55:20.000Z",
       "modifiedAt": "2024-10-18T07:14:11.000Z"
     },
+    {
+      "uuid": "88307300-5bef-11eb-9f99-005056873709",
+      "id": 539481,
+      "type": "picture.pictogram.",
+      "typeFilter": "pictograms",
+      "meta": {
+        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/539481/storage/NTM5NDg5LzAvbWFzdGVy",
+        "keywords": [
+          "LAD",
+          "Leistung am Domizil",
+          "Prestazione a domicilio",
+          "Service at home",
+          "Prestation à domicile",
+          "Wegweiser",
+          "Sign",
+          "Segno",
+          "Signer",
+          "Sinnbild",
+          "Symbol",
+          "Simbolo",
+          "Symbole",
+          "Strassenschild",
+          "Road Sign",
+          "Segnale stradale",
+          "Panneau De Signalisation"
+        ],
+        "year": [
+          "2021"
+        ]
+      },
+      "file": {
+        "mime": "image/svg+xml",
+        "name": "2205.svg",
+        "basename": "2205",
+        "ext": ".svg",
+        "size": {
+          "width": 0,
+          "dpi": 72,
+          "height": 0
+        }
+      },
+      "createdAt": "2021-01-21T13:49:50.000Z",
+      "modifiedAt": "2024-10-24T05:04:06.000Z"
+    },
     {
       "uuid": "044e0500-5bf1-11eb-9f99-005056873709",
       "id": 539492,
@@ -29138,6 +29138,34 @@
       "createdAt": "2024-10-24T12:09:32.000Z",
       "modifiedAt": "2024-10-25T12:05:09.317Z"
     },
+    {
+      "uuid": "ae649aa0-9b5c-11ef-9712-005056873709",
+      "id": 820602,
+      "type": "picture.pictogram.",
+      "typeFilter": "pictograms",
+      "meta": {
+        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/820602/storage/ODIwNjAxLzAvbWFzdGVy",
+        "keywords": [
+          "shoot photo",
+          "scattare foto",
+          "Foto aufnehmen",
+          "photo prise"
+        ]
+      },
+      "file": {
+        "mime": "image/svg+xml",
+        "name": "2632.svg",
+        "basename": "2632",
+        "ext": ".svg",
+        "size": {
+          "width": 0,
+          "dpi": 72,
+          "height": 0
+        }
+      },
+      "createdAt": "2024-11-05T09:59:43.000Z",
+      "modifiedAt": "2024-11-05T10:11:18.000Z"
+    },
     {
       "uuid": "6faf6ef0-c5ff-11e7-a943-005056a94f4a",
       "id": 352241,
@@ -41636,12 +41664,12 @@
   "wrongViewBox": [],
   "noKeywords": [
     {
-      "uuid": "717dc650-c5ff-11e7-a943-005056a94f4a",
-      "id": 352314,
+      "uuid": "711a4990-c5ff-11e7-a943-005056a94f4a",
+      "id": 352299,
       "type": "picture.pictogram.",
       "typeFilter": "pictograms",
       "meta": {
-        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352314/storage/NTM3MjI0LzAvbWFzdGVy",
+        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352299/storage/NTM3MTkxLzAvbWFzdGVy",
         "businessfield": [
           "kommunikation"
         ],
@@ -41654,8 +41682,8 @@
       },
       "file": {
         "mime": "image/svg+xml",
-        "name": "3073.svg",
-        "basename": "3073",
+        "name": "3058.svg",
+        "basename": "3058",
         "ext": ".svg",
         "size": {
           "width": 0,
@@ -41664,15 +41692,15 @@
         }
       },
       "createdAt": "2017-11-10T10:11:07.000Z",
-      "modifiedAt": "2024-03-12T14:51:51.000Z"
+      "modifiedAt": "2024-03-12T14:51:50.000Z"
     },
     {
-      "uuid": "711a4990-c5ff-11e7-a943-005056a94f4a",
-      "id": 352299,
+      "uuid": "717dc650-c5ff-11e7-a943-005056a94f4a",
+      "id": 352314,
       "type": "picture.pictogram.",
       "typeFilter": "pictograms",
       "meta": {
-        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352299/storage/NTM3MTkxLzAvbWFzdGVy",
+        "downloadLink": "https://cdn.post.ch/hcms/v2.0/entity/asset/352314/storage/NTM3MjI0LzAvbWFzdGVy",
         "businessfield": [
           "kommunikation"
         ],
@@ -41685,8 +41713,8 @@
       },
       "file": {
         "mime": "image/svg+xml",
-        "name": "3058.svg",
-        "basename": "3058",
+        "name": "3073.svg",
+        "basename": "3073",
         "ext": ".svg",
         "size": {
           "width": 0,
@@ -41695,7 +41723,7 @@
         }
       },
       "createdAt": "2017-11-10T10:11:07.000Z",
-      "modifiedAt": "2024-03-12T14:51:50.000Z"
+      "modifiedAt": "2024-03-12T14:51:51.000Z"
     },
     {
       "uuid": "6b09bf30-9901-11eb-935b-005056873709",
@@ -41809,11 +41837,11 @@
   ],
   "noSVG": [],
   "errored": [],
-  "created": "2024-10-27T01:40:29.123Z",
+  "created": "2024-11-10T01:37:42.898Z",
   "stats": {
     "errors": 0,
     "notFound": 0,
-    "success": 961
+    "success": 962
   },
-  "version": "8.3.0"
+  "version": "8.4.0"
 }
\ No newline at end of file
diff --git a/packages/styles/src/_svg-icon-map.scss b/packages/styles/src/_svg-icon-map.scss
index 634df00619..182f3cdb19 100644
--- a/packages/styles/src/_svg-icon-map.scss
+++ b/packages/styles/src/_svg-icon-map.scss
@@ -559,6 +559,8 @@ $svg-icon-map: (
     "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 24h-9.7v-1.5c4-3.5 7.8-7.6 7.8-10.3 0-4.2-6.3-2.4-6.9-2l-.3-1.4c.6-.3 8.8-3.1 8.8 3.4 0 3.8-7.3 10.1-7.8 10.4h8.1z'/%3E%3C/svg%3E",
   '3000':
     "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='M17.4 8.2V24h-1.6V9.9c-.2.2-.5.5-.9.8-.3.3-.7.6-1 .9l-.9.8-.8-1L16 8.2z'/%3E%3C/svg%3E",
+  '2632':
+    "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16s7.16 16 16 16 16-7.16 16-16S24.84 0 16 0m0 30.67C7.91 30.67 1.33 24.09 1.33 16S7.91 1.33 16 1.33 30.67 7.91 30.67 16 24.09 30.67 16 30.67M9.18 10.66c-3.35 3.35-3.35 8.81 0 12.16 1.68 1.68 3.88 2.51 6.08 2.51s4.4-.84 6.08-2.51a8.7 8.7 0 0 0 2.21-3.81L24.3 7.7l-11.24.73a8.6 8.6 0 0 0-3.88 2.23m13.68-1.53-.64 9.65a7.16 7.16 0 0 1-1.83 3.09c-1.37 1.37-3.19 2.12-5.14 2.12s-3.77-.75-5.14-2.12c-2.83-2.83-2.83-7.44 0-10.27.87-.87 1.96-1.51 3.16-1.85l9.58-.62Zm-7.6 10.83a3.2 3.2 0 0 0 2.28-.94 3.223 3.223 0 0 0 0-4.56c-.63-.63-1.45-.94-2.28-.94s-1.65.31-2.28.94a3.223 3.223 0 0 0 0 4.56 3.2 3.2 0 0 0 2.28.94m-1.34-4.56c.36-.36.83-.55 1.34-.55s.98.2 1.34.55c.36.36.55.83.55 1.34s-.2.98-.55 1.34c-.36.36-.83.55-1.34.55s-.98-.2-1.34-.55-.55-.83-.55-1.34.2-.98.55-1.34'/%3E%3C/svg%3E",
   '2631':
     "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.99 24.54h-4.07v-4.82h4.07v-1.34h-7.76c-.37.5-.79.94-1.25 1.34h3.56v4.82h-6.28V21.3c-.44.16-.88.28-1.33.36v2.88h-6.32v-4.03a8 8 0 0 1-1.19-.92c-.04-.04-.08-.07-.12-.1-.36-.35-.69-.72-.98-1.11H.02v1.34h3.54v4.82H.01v7.49H32v-7.49zM4.95 19.72h6.32v4.82H4.95zm2.73 10.97H1.35v-4.82h6.33zm7.66 0H9.01v-4.82h6.33zm7.66 0h-6.33v-4.82H23zm7.67 0h-6.33v-4.82h6.33zM17.42 20.46c3.63 0 7.28-2.75 7.28-7.84-.01-2.46-.77-4.67-2.16-6.82 0 2.54-1.49 3.67-2.54 3.67C21.06 1.93 15.62.1 15.62.1c0 5.5-5.8 6.41-5.8 13.04 0 1.39 1.17 7.33 7.6 7.33Zm-2.36-3.77c.23.08.47.11.71.11h1.33v-1.34c0-.68.12-1.22.29-1.64.25.35.53.64.77.9.64.67 1.05 1.11 1.05 2.17 0 .02-.09 2.02-2.15 2.02-.96 0-1.99-.7-2-2.23Zm-1.11-9.88c1.05-1.25 2.19-2.63 2.72-4.52 1.18 1.05 2.55 3.13 2.02 6.99l-.21 1.52h1.53c1.02 0 2.05-.53 2.8-1.51.38 1.09.56 2.19.57 3.33 0 2.93-1.42 4.88-3.26 5.83.33-.65.44-1.28.44-1.55 0-3.03-2.66-3.08-2.66-5.6 0 0-2.12.98-2.12 4.17-.8 0-1.05-.98-1.05-1.93-.63.99-.99 2-.99 3.13 0 .6.11 1.12.31 1.58-2.66-1.66-2.88-5.07-2.88-5.11 0-2.98 1.36-4.6 2.79-6.32Z'/%3E%3C/svg%3E",
   '2630':

From c1adae5db03af2bb5519174094fc417a293dcbb8 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 11 Nov 2024 16:13:24 +0100
Subject: [PATCH 09/11] chore: copy files on tokens build (#3962)

This is required for the publish command to work properly because only
files in dist are included in the package.
---
 packages/tokens/package.json |  4 +++-
 pnpm-lock.yaml               | 41 ++++++++++++++++++++++++------------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 4df4e27669..955eb99ef5 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -14,7 +14,8 @@
   },
   "type": "module",
   "scripts": {
-    "build": "pnpm clean && node ./build.js",
+    "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist",
+    "build": "pnpm clean && node ./build.js && pnpm copy-files",
     "clean": "rimraf dist",
     "build:verbose": "node ./build.js --verbosity=verbose"
   },
@@ -33,6 +34,7 @@
   },
   "devDependencies": {
     "@tokens-studio/sd-transforms": "1.2.2",
+    "copyfiles": "2.4.1",
     "rimraf": "6.0.1",
     "style-dictionary": "4.0.1"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c97d7a1e8a..4848de421f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -612,7 +612,7 @@ importers:
         version: 2.0.5
       ts-jest:
         specifier: 29.2.4
-        version: 29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))(typescript@5.5.4)
+        version: 29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14))(typescript@5.5.4)
       typescript:
         specifier: 5.5.4
         version: 5.5.4
@@ -1060,6 +1060,9 @@ importers:
       '@tokens-studio/sd-transforms':
         specifier: 1.2.2
         version: 1.2.2(style-dictionary@4.0.1)
+      copyfiles:
+        specifier: 2.4.1
+        version: 2.4.1
       rimraf:
         specifier: 6.0.1
         version: 6.0.1
@@ -15491,7 +15494,7 @@ snapshots:
 
   axios@1.7.7:
     dependencies:
-      follow-redirects: 1.15.6(debug@4.3.6)
+      follow-redirects: 1.15.6(debug@4.3.7)
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -18182,7 +18185,7 @@ snapshots:
   http-proxy-middleware@2.0.6(@types/express@4.17.21):
     dependencies:
       '@types/http-proxy': 1.17.15
-      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
@@ -18202,14 +18205,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
@@ -18225,7 +18220,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
@@ -19099,7 +19094,6 @@ snapshots:
       - babel-plugin-macros
       - supports-color
       - ts-node
-    optional: true
 
   jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)):
     dependencies:
@@ -19357,7 +19351,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
@@ -22882,6 +22876,25 @@ snapshots:
       '@jest/types': 29.6.3
       babel-jest: 29.7.0(@babel/core@7.25.2)
 
+  ts-jest@29.2.4(@babel/core@7.25.2)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.2))(jest@29.7.0(@types/node@20.14.14))(typescript@5.5.4):
+    dependencies:
+      bs-logger: 0.2.6
+      ejs: 3.1.10
+      fast-json-stable-stringify: 2.1.0
+      jest: 29.7.0(@types/node@20.14.14)
+      jest-util: 29.7.0
+      json5: 2.2.3
+      lodash.memoize: 4.1.2
+      make-error: 1.3.6
+      semver: 7.6.2
+      typescript: 5.5.4
+      yargs-parser: 21.1.1
+    optionalDependencies:
+      '@babel/core': 7.25.2
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.25.2)
+
   ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1

From dc99b63000a59a561de8b8486432d3b0b88fae17 Mon Sep 17 00:00:00 2001
From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Date: Mon, 11 Nov 2024 16:43:00 +0100
Subject: [PATCH 10/11] =?UTF-8?q?chore(changesets):=20=F0=9F=A6=8B?=
 =?UTF-8?q?=F0=9F=93=A6=20publish=20packages=20(main)=20(next)=20(#3848)?=
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.4

### Major Changes

- Removed the `.breadcrumb-item` class, which previously handled styling
for breadcrumb items. Introduced a new `post-breadcrumb-item` that
should be used in place of the `.breadcrumb-item` class. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#3659](https://github.com/swisspost/design-system/pull/3659))

### Minor Changes

- Created the `post-list` and `post-list-item` components. (by
[@myrta2302](https://github.com/myrta2302) with
[#3812](https://github.com/swisspost/design-system/pull/3812))

- Added close button web component. (by
[@leagrdv](https://github.com/leagrdv) with
[#3880](https://github.com/swisspost/design-system/pull/3880))

### Patch Changes

- Fixed an issue with the post-collapsible throwing an invalid selector
error. (by [@alizedebray](https://github.com/alizedebray) with
[#3726](https://github.com/swisspost/design-system/pull/3726))
-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.4

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

### Major Changes

- Removed regular button size. Buttons that were previously using
`btn-rg` will now fall back to the default `btn-md` size. (by
[@leagrdv](https://github.com/leagrdv) with
[#3849](https://github.com/swisspost/design-system/pull/3849))

- Updated list group to v2 and added new options: list links, list
documents and list switches. (by [@leagrdv](https://github.com/leagrdv)
with [#3740](https://github.com/swisspost/design-system/pull/3740))

- Removed the `btn-animated` class. It no longer has any effect and can
be removed from existing buttons. (by
[@leagrdv](https://github.com/leagrdv) with
[#3849](https://github.com/swisspost/design-system/pull/3849))

- Removed the `.breadcrumb-item` class, which previously handled styling
for breadcrumb items. Introduced a new `post-breadcrumb-item` that
should be used in place of the `.breadcrumb-item` class. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#3659](https://github.com/swisspost/design-system/pull/3659))

### Minor Changes

- Added Form Footer component. (by
[@leagrdv](https://github.com/leagrdv) with
[#3616](https://github.com/swisspost/design-system/pull/3616))

- Created token-based styles for `<ul>` elements. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#3859](https://github.com/swisspost/design-system/pull/3859))

- Updated vertical-align utility (by
[@myrta2302](https://github.com/myrta2302) with
[#3805](https://github.com/swisspost/design-system/pull/3805))

- Updated button component to v2. (by
[@leagrdv](https://github.com/leagrdv) with
[#3849](https://github.com/swisspost/design-system/pull/3849))

- Added the skiplinks component to styles and documentation. (by
[@leagrdv](https://github.com/leagrdv) with
[#3875](https://github.com/swisspost/design-system/pull/3875))

- Added close button web component. (by
[@leagrdv](https://github.com/leagrdv) with
[#3880](https://github.com/swisspost/design-system/pull/3880))

- Internalized bootstraps floating utilities into the design system. (by
[@myrta2302](https://github.com/myrta2302) with
[#3752](https://github.com/swisspost/design-system/pull/3752))

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

### Minor Changes

- Added icon number 2632. (by [@gfellerph](https://github.com/gfellerph)
with [#3952](https://github.com/swisspost/design-system/pull/3952))

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

### Patch Changes

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

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

### Patch Changes

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

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

### Patch Changes

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

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

### Patch Changes

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

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



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



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

### Minor Changes

- Updated list group to v2 and added new options: list links, list
documents and list switches. (by [@leagrdv](https://github.com/leagrdv)
with [#3740](https://github.com/swisspost/design-system/pull/3740))

- Created the `post-list` and `post-list-item` components. (by
[@myrta2302](https://github.com/myrta2302) with
[#3812](https://github.com/swisspost/design-system/pull/3812))

- Updated the Accessibility documentation section with Form Labels
guidelines. (by [@myrta2302](https://github.com/myrta2302) with
[#3835](https://github.com/swisspost/design-system/pull/3835))

- Added Form Footer component. (by
[@leagrdv](https://github.com/leagrdv) with
[#3616](https://github.com/swisspost/design-system/pull/3616))

- Updated vertical-align utility (by
[@myrta2302](https://github.com/myrta2302) with
[#3805](https://github.com/swisspost/design-system/pull/3805))

- Added the skiplinks component to styles and documentation. (by
[@leagrdv](https://github.com/leagrdv) with
[#3875](https://github.com/swisspost/design-system/pull/3875))

- Added close button web component. (by
[@leagrdv](https://github.com/leagrdv) with
[#3880](https://github.com/swisspost/design-system/pull/3880))

- Internalized bootstraps floating utilities into the design system. (by
[@myrta2302](https://github.com/myrta2302) with
[#3752](https://github.com/swisspost/design-system/pull/3752))

### Patch Changes

- Updated basic `<ul>` element docs and moved them from
`Utilities/Lists` to `Foundation/Typography/Lists`. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#3859](https://github.com/swisspost/design-system/pull/3859))
-   Updated dependencies:
    -   @swisspost/design-system-icons@9.0.0-next.4
    -   @swisspost/design-system-styles@9.0.0-next.4
    -   @swisspost/design-system-components@9.0.0-next.4
    -   @swisspost/internet-header@2.0.0-next.4
    -   @swisspost/design-system-components-react@9.0.0-next.4

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

### Patch Changes

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

## @swisspost/internet-header@2.0.0-next.4

### Patch Changes

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

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

### Patch Changes

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

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

### Patch Changes

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

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

### Patch Changes

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

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

### Patch Changes

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

---------

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              | 18 ++++++
 packages/components/package.json              |  4 +-
 packages/documentation/CHANGELOG.md           | 30 +++++++++
 packages/documentation/package.json           | 16 ++---
 packages/documentation/public/_redirects      |  1 +
 .../documentation/public/assets/versions.json | 62 +++++++++++++-----
 packages/icons/CHANGELOG.md                   |  6 ++
 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                  | 28 ++++++++
 packages/styles/package.json                  |  6 +-
 packages/tokens/CHANGELOG.md                  |  2 +
 packages/tokens/package.json                  |  2 +-
 pnpm-lock.yaml                                | 64 +++++++++++--------
 36 files changed, 297 insertions(+), 85 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 5169ad951f..a948833b59 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -24,6 +24,7 @@
   "changesets": [
     "2024-10-17-update-icons",
     "2024-10-27-update-icons",
+    "2024-11-10-update-icons",
     "beige-jobs-do",
     "big-frogs-admire",
     "breezy-cups-add",
@@ -32,17 +33,25 @@
     "cold-baboons-appear",
     "cold-panthers-vanish",
     "cuddly-bears-check",
+    "cuddly-gifts-film",
+    "dirty-mayflies-taste",
     "eight-turkeys-matter",
     "eleven-keys-work",
     "empty-islands-kneel",
     "fair-actors-scream",
+    "fast-bats-poke",
     "fast-fans-wash",
+    "fifty-dodos-wait",
+    "fifty-students-call",
     "five-hornets-sin",
     "friendly-insects-breathe",
     "funny-shrimps-care",
     "giant-games-swim",
+    "gold-chairs-grin",
+    "gold-chefs-rule",
     "gorgeous-flowers-flow",
     "great-humans-talk",
+    "grumpy-parrots-wonder",
     "heavy-rats-explode",
     "kind-buses-trade",
     "kind-papayas-provide",
@@ -51,26 +60,33 @@
     "loud-dingos-remember",
     "lovely-deers-itch",
     "lovely-mirrors-travel",
+    "neat-suits-provide",
     "nervous-rocks-shop",
+    "new-goats-impress",
     "ninety-nails-float",
     "pink-weeks-relate",
     "plenty-apricots-raise",
     "popular-games-rush",
     "proud-actors-knock",
+    "proud-cheetahs-act",
     "proud-moons-impress",
     "quick-eagles-watch",
     "quiet-apes-rhyme",
+    "rare-dryers-count",
     "red-cobras-cry",
     "red-lies-lick",
+    "rich-timers-listen",
     "selfish-bats-run",
     "selfish-ways-know",
     "shaggy-experts-give",
     "sharp-baboons-smile",
     "sharp-crews-watch",
     "shiny-ears-care",
+    "shy-walls-exercise",
     "silver-coins-invent",
     "six-spiders-smoke",
     "sixty-items-promise",
+    "slimy-rockets-pull",
     "strange-bottles-impress",
     "tame-terms-push",
     "three-lies-do",
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index 11eca2d195..14bd6d34d2 100644
--- a/packages/components-angular/CHANGELOG.md
+++ b/packages/components-angular/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.10-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 1.1.10-next.3
 
 ### Patch Changes
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 06c7e9eb61..04519844ac 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.3",
+  "version": "1.1.10-next.4",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.2.10",
     "@angular/platform-browser-dynamic": "18.2.10",
     "@angular/router": "18.2.10",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.8"
diff --git a/packages/components-angular/projects/components/CHANGELOG.md b/packages/components-angular/projects/components/CHANGELOG.md
index c897490ffa..8a2305d0ef 100644
--- a/packages/components-angular/projects/components/CHANGELOG.md
+++ b/packages/components-angular/projects/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-angular
 
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Minor Changes
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index e82f5da166..040548d639 100644
--- a/packages/components-angular/projects/components/package.json
+++ b/packages/components-angular/projects/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "tslib": "2.6.3",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
index 2345d27a43..e1503d21ca 100644
--- a/packages/components-react/CHANGELOG.md
+++ b/packages/components-react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Patch Changes
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 8238f83559..76bb2f2ae5 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Design System React Components for easy integration with the React ecosystem",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4"
   },
   "devDependencies": {
     "@types/node": "20.14.14",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4eb3171fc0..2f4eb8c9fb 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.4
+
+### Major Changes
+
+- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659))
+
+### Minor Changes
+
+- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812))
+
+- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880))
+
+### Patch Changes
+
+- Fixed an issue with the post-collapsible throwing an invalid selector error. (by [@alizedebray](https://github.com/alizedebray) with [#3726](https://github.com/swisspost/design-system/pull/3726))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Major Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index f2591ed525..221a556679 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },
diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
index 4d4645f460..027ce55b6d 100644
--- a/packages/documentation/CHANGELOG.md
+++ b/packages/documentation/CHANGELOG.md
@@ -1,5 +1,35 @@
 # @swisspost/design-system-documentation
 
+## 6.0.0-next.5
+
+### Minor Changes
+
+- Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740))
+
+- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812))
+
+- Updated the Accessibility documentation section with Form Labels guidelines. (by [@myrta2302](https://github.com/myrta2302) with [#3835](https://github.com/swisspost/design-system/pull/3835))
+
+- Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616))
+
+- Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805))
+
+- Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875))
+
+- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880))
+
+- Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752))
+
+### Patch Changes
+
+- Updated basic `<ul>` element docs and moved them from `Utilities/Lists` to `Foundation/Typography/Lists`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859))
+- Updated dependencies:
+  - @swisspost/design-system-icons@9.0.0-next.4
+  - @swisspost/design-system-styles@9.0.0-next.4
+  - @swisspost/design-system-components@9.0.0-next.4
+  - @swisspost/internet-header@2.0.0-next.4
+  - @swisspost/design-system-components-react@9.0.0-next.4
+
 ## 6.0.0-next.4
 
 ### Patch Changes
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 1e6d5bbd3e..054769c301 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-documentation",
-  "version": "6.0.0-next.4",
+  "version": "6.0.0-next.5",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -28,11 +28,11 @@
     "lint": "eslint **/*.{ts,tsx,mdx}"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
-    "@swisspost/internet-header": "workspace:2.0.0-next.3",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
+    "@swisspost/internet-header": "workspace:2.0.0-next.4",
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
@@ -53,8 +53,8 @@
     "@storybook/types": "8.3.6",
     "@storybook/web-components": "8.3.6",
     "@storybook/web-components-vite": "8.3.6",
-    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.4",
     "@types/css-modules": "1.0.5",
     "@types/mdx": "2.0.13",
     "@types/react": "18.3.3",
diff --git a/packages/documentation/public/_redirects b/packages/documentation/public/_redirects
index 72890d6c5b..554f386e14 100644
--- a/packages/documentation/public/_redirects
+++ b/packages/documentation/public/_redirects
@@ -7,3 +7,4 @@
 /v8   https://design-system-version-8.netlify.app
 /v9   https://swisspost-design-system-version-9.netlify.app
 
+
diff --git a/packages/documentation/public/assets/versions.json b/packages/documentation/public/assets/versions.json
index 3c264439ed..e9ffa81f97 100644
--- a/packages/documentation/public/assets/versions.json
+++ b/packages/documentation/public/assets/versions.json
@@ -1,7 +1,7 @@
 [
   {
     "title": "Version 9",
-    "version": "9.0.0-next.3",
+    "version": "9.0.0-next.4",
     "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
     "url": "https://design-system.post.ch",
     "dependencies": {
@@ -9,22 +9,50 @@
       "@ng-bootstrap/ng-bootstrap": "^17.0.0",
       "bootstrap": "~5.3.0",
       "@swisspost/design-system-changelog-github": "1.0.2",
-      "@swisspost/design-system-components": "9.0.0-next.3",
-      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.3",
-      "@swisspost/design-system-components-angular": "9.0.0-next.3",
-      "@swisspost/design-system-components-react": "9.0.0-next.3",
-      "@swisspost/design-system-documentation": "6.0.0-next.3",
-      "@swisspost/design-system-icons": "9.0.0-next.3",
-      "@swisspost/internet-header": "2.0.0-next.3",
-      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.3",
-      "@swisspost/design-system-intranet-header": "9.0.0-next.3",
-      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.3",
-      "@swisspost/design-system-migrations": "9.0.0-next.3",
-      "@swisspost/design-system-nextjs-integration": "0.1.14-next.3",
-      "@swisspost/design-system-styles": "9.0.0-next.3",
-      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.3",
-      "@swisspost/design-system-styles-primeng": "9.0.0-next.3",
-      "@swisspost/design-system-tokens": "9.0.0-next.3"
+      "@swisspost/design-system-components": "9.0.0-next.4",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.4",
+      "@swisspost/design-system-components-angular": "9.0.0-next.4",
+      "@swisspost/design-system-components-react": "9.0.0-next.4",
+      "@swisspost/design-system-documentation": "6.0.0-next.5",
+      "@swisspost/design-system-icons": "9.0.0-next.4",
+      "@swisspost/internet-header": "2.0.0-next.4",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.4",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.4",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.4",
+      "@swisspost/design-system-migrations": "9.0.0-next.4",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.4",
+      "@swisspost/design-system-styles": "9.0.0-next.4",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.4",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.4",
+      "@swisspost/design-system-tokens": "9.0.0-next.4"
+    }
+  },
+  {
+    "title": "Version 9",
+    "version": "9.0.0-next.3",
+    "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
+    "url": "https://swisspost-design-system-version-9.netlify.app",
+    "dependencies": {
+      "@angular/core": "^18.0.0",
+      "@ng-bootstrap/ng-bootstrap": "^17.0.0",
+      "bootstrap": "~5.3.0",
+      "@swisspost/design-system-changelog-github": "1.0.2",
+      "@swisspost/design-system-components": "9.0.0-next.2",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.2",
+      "@swisspost/design-system-components-angular": "9.0.0-next.2",
+      "@swisspost/design-system-components-react": "9.0.0-next.2",
+      "@swisspost/design-system-documentation": "6.0.0-next.2",
+      "@swisspost/design-system-icons": "9.0.0-next.2",
+      "@swisspost/internet-header": "1.14.6-next.2",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.2",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.2",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.2",
+      "@swisspost/design-system-migrations": "9.0.0-next.2",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.2",
+      "@swisspost/design-system-styles": "9.0.0-next.2",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.2",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.2",
+      "@swisspost/design-system-tokens": "9.0.0-next.2"
     }
   },
   {
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 9884c38702..266f90b48c 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @swisspost/design-system-icons
 
+## 9.0.0-next.4
+
+### Minor Changes
+
+- Added icon number 2632. (by [@gfellerph](https://github.com/gfellerph) with [#3952](https://github.com/swisspost/design-system/pull/3952))
+
 ## 9.0.0-next.3
 
 ### Minor Changes
diff --git a/packages/icons/package.json b/packages/icons/package.json
index a99c408c8e..bfab4bb763 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-icons",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "A collection of Swiss Post icons intended for use with the Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md
index 6045c62d48..191aa04061 100644
--- a/packages/internet-header/CHANGELOG.md
+++ b/packages/internet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/internet-header
 
+## 2.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 2.0.0-next.3
 
 ### Major Changes
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
index b2f9d12ab1..3fc3baad3d 100644
--- a/packages/internet-header/package.json
+++ b/packages/internet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/internet-header",
-  "version": "2.0.0-next.3",
+  "version": "2.0.0-next.4",
   "description": "The header for client facing applications.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -43,7 +43,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "body-scroll-lock": "4.0.0-beta.0",
     "iframe-resizer": "4.4.5",
     "jquery": "3.7.1",
diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md
index 91492befb9..9089734bf1 100644
--- a/packages/intranet-header-workspace/CHANGELOG.md
+++ b/packages/intranet-header-workspace/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header-workspace
 
+## 3.0.22-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 3.0.22-next.3
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
index 0de925c6c9..4765f5d611 100644
--- a/packages/intranet-header-workspace/package.json
+++ b/packages/intranet-header-workspace/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header-workspace",
-  "version": "3.0.22-next.3",
+  "version": "3.0.22-next.4",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -23,7 +23,7 @@
     "@angular/router": "18.2.10",
     "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@popperjs/core": "2.11.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "watch": "1.0.2",
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
index 079e480e30..59a093b10e 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header-showcase
 
+## 1.0.10-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-intranet-header@9.0.0-next.4
+
 ## 1.0.10-next.3
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
index d46ae766af..8a6a4aa998 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@swisspost/design-system-intranet-header-showcase",
-  "version": "1.0.10-next.3",
+  "version": "1.0.10-next.4",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.3"
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.4"
   }
 }
diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
index fdf8cfd7e4..80c03b908e 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
+++ b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header
 
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/projects/intranet-header/package.json b/packages/intranet-header-workspace/projects/intranet-header/package.json
index e140974e8c..6b514d97bf 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Intranet header for internal Swiss Post applications as an Angular component.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -18,11 +18,11 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "tslib": "2.6.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.3"
+    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.4"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/migrations/CHANGELOG.md b/packages/migrations/CHANGELOG.md
index ff686a4cb5..2a14a52f7a 100644
--- a/packages/migrations/CHANGELOG.md
+++ b/packages/migrations/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-migrations
 
+## 9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ## 9.0.0-next.2
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index bc96131ef3..2cf92879b2 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-migrations",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Scripts to migrate an Angular application from one Design System version to another.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/nextjs-integration/CHANGELOG.md b/packages/nextjs-integration/CHANGELOG.md
index 87b1330cee..85e09490e7 100644
--- a/packages/nextjs-integration/CHANGELOG.md
+++ b/packages/nextjs-integration/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @swisspost/design-system-nextjs-integration
 
+## 0.1.14-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+  - @swisspost/internet-header@2.0.0-next.4
+  - @swisspost/design-system-components-react@9.0.0-next.4
+
 ## 0.1.14-next.3
 
 ### Patch Changes
diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json
index d1377d9510..11fe8acd03 100644
--- a/packages/nextjs-integration/package.json
+++ b/packages/nextjs-integration/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-nextjs-integration",
-  "version": "0.1.14-next.3",
+  "version": "0.1.14-next.4",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
-    "@swisspost/internet-header": "workspace:2.0.0-next.3",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
+    "@swisspost/internet-header": "workspace:2.0.0-next.4",
     "next": "15.0.1",
     "react": "^18",
     "react-dom": "^18"
diff --git a/packages/styles-primeng-workspace/CHANGELOG.md b/packages/styles-primeng-workspace/CHANGELOG.md
index b81ee685f3..7f2aef3547 100644
--- a/packages/styles-primeng-workspace/CHANGELOG.md
+++ b/packages/styles-primeng-workspace/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-styles-primeng-workspace
 
+## 1.0.6-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 1.0.6-next.3
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json
index 312a3becaa..bfc99bbf30 100644
--- a/packages/styles-primeng-workspace/package.json
+++ b/packages/styles-primeng-workspace/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@swisspost/design-system-styles-primeng-workspace",
   "description": "Showcase for a Post like custom prime-ng theme",
-  "version": "1.0.6-next.3",
+  "version": "1.0.6-next.4",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -22,7 +22,7 @@
     "@angular/platform-browser": "18.2.10",
     "@angular/platform-browser-dynamic": "18.2.10",
     "@angular/router": "18.2.10",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "primeng": "17.18.7",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
index b20af83a42..e21e541e05 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-styles-primeng
 
+## 9.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/package.json b/packages/styles-primeng-workspace/projects/styles-primeng/package.json
index 6bf017259b..3572a3bd59 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/package.json
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles-primeng",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Swiss Post styles for PrimeNg datatable.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -23,7 +23,7 @@
     "primeng": "^17.18.0"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "tslib": "2.6.3"
   },
   "sideEffects": false,
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 7c92a2548b..724092b33d 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -1,5 +1,33 @@
 # @swisspost/design-system-styles
 
+## 9.0.0-next.4
+
+### Major Changes
+
+- Removed regular button size. Buttons that were previously using `btn-rg` will now fall back to the default `btn-md` size. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849))
+
+- Updated list group to v2 and added new options: list links, list documents and list switches. (by [@leagrdv](https://github.com/leagrdv) with [#3740](https://github.com/swisspost/design-system/pull/3740))
+
+- Removed the `btn-animated` class. It no longer has any effect and can be removed from existing buttons. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849))
+
+- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659))
+
+### Minor Changes
+
+- Added Form Footer component. (by [@leagrdv](https://github.com/leagrdv) with [#3616](https://github.com/swisspost/design-system/pull/3616))
+
+- Created token-based styles for `<ul>` elements. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3859](https://github.com/swisspost/design-system/pull/3859))
+
+- Updated vertical-align utility (by [@myrta2302](https://github.com/myrta2302) with [#3805](https://github.com/swisspost/design-system/pull/3805))
+
+- Updated button component to v2. (by [@leagrdv](https://github.com/leagrdv) with [#3849](https://github.com/swisspost/design-system/pull/3849))
+
+- Added the skiplinks component to styles and documentation. (by [@leagrdv](https://github.com/leagrdv) with [#3875](https://github.com/swisspost/design-system/pull/3875))
+
+- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880))
+
+- Internalized bootstraps floating utilities into the design system. (by [@myrta2302](https://github.com/myrta2302) with [#3752](https://github.com/swisspost/design-system/pull/3752))
+
 ## 9.0.0-next.3
 
 ### Major Changes
diff --git a/packages/styles/package.json b/packages/styles/package.json
index ae55c56de7..97215527b6 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "gulp-sourcemaps": "3.0.0"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.4",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
index 16cd9f8705..fbc6aba9bc 100644
--- a/packages/tokens/CHANGELOG.md
+++ b/packages/tokens/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-tokens
 
+## 9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Minor Changes
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 955eb99ef5..2bc80f0ddb 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.3",
+  "version": "9.0.0-next.4",
   "description": "Design Tokens for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4848de421f..534dde8797 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,7 +47,7 @@ importers:
         specifier: 0.3.7
         version: 0.3.7
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       ally.js:
         specifier: 1.4.1
@@ -150,10 +150,10 @@ importers:
         specifier: 18.2.10
         version: 18.2.10(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.10(@angular/animations@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -232,7 +232,7 @@ importers:
         specifier: ^16.0.0 || ^17.0.0 || ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../../../components
       tslib:
         specifier: 2.6.3
@@ -242,7 +242,7 @@ importers:
   packages/components-react:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components
     devDependencies:
       '@types/node':
@@ -294,19 +294,19 @@ importers:
   packages/documentation:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components-react
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../icons
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:2.0.0-next.3
+        specifier: workspace:2.0.0-next.4
         version: link:../internet-header
       bootstrap:
         specifier: 5.3.3
@@ -364,10 +364,10 @@ importers:
         specifier: 8.3.6
         version: 8.3.6(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.25.3(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@22.7.9)(less@4.2.0)(sass@1.78.0)(terser@5.31.6))
       '@swisspost/design-system-components-angular':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components-angular/dist/components
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../intranet-header-workspace/dist/intranet-header
       '@types/css-modules':
         specifier: 1.0.5
@@ -502,7 +502,7 @@ importers:
   packages/internet-header:
     dependencies:
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       body-scroll-lock:
         specifier: 4.0.0-beta.0
@@ -653,7 +653,7 @@ importers:
         specifier: 2.11.8
         version: 2.11.8
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -747,21 +747,21 @@ importers:
         specifier: ^16.0.0 || ^17.0.0 || ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../../../styles/dist
       tslib:
         specifier: 2.6.3
         version: 2.6.3
     devDependencies:
       '@swisspost/design-system-intranet-header-workspace':
-        specifier: workspace:3.0.22-next.3
+        specifier: workspace:3.0.22-next.4
         version: link:../..
     publishDirectory: ../../dist/intranet-header
 
   packages/intranet-header-workspace/projects/intranet-header-showcase:
     dependencies:
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../../dist/intranet-header
 
   packages/migrations:
@@ -807,13 +807,13 @@ importers:
   packages/nextjs-integration:
     dependencies:
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../components-react
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:2.0.0-next.3
+        specifier: workspace:2.0.0-next.4
         version: link:../internet-header
       next:
         specifier: 15.0.1
@@ -875,10 +875,10 @@ importers:
         version: 3.0.0
     devDependencies:
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../icons
       '@swisspost/design-system-tokens':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../tokens/dist
       '@types/node':
         specifier: 20.14.14
@@ -969,7 +969,7 @@ importers:
         specifier: 18.2.10
         version: 18.2.10(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.10(@angular/animations@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.10(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.10(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../styles/dist
       primeng:
         specifier: 17.18.7
@@ -1045,7 +1045,7 @@ importers:
         specifier: ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.3
+        specifier: workspace:9.0.0-next.4
         version: link:../../../styles/dist
       primeng:
         specifier: ^17.18.0
@@ -15494,7 +15494,7 @@ snapshots:
 
   axios@1.7.7:
     dependencies:
-      follow-redirects: 1.15.6(debug@4.3.7)
+      follow-redirects: 1.15.6(debug@4.3.6)
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -18185,7 +18185,7 @@ snapshots:
   http-proxy-middleware@2.0.6(@types/express@4.17.21):
     dependencies:
       '@types/http-proxy': 1.17.15
-      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
@@ -18205,6 +18205,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
@@ -18220,7 +18228,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
@@ -19351,7 +19359,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

From 1fa8f2891a16de1c634bd575267a933b1e6e5ab5 Mon Sep 17 00:00:00 2001
From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com>
Date: Mon, 11 Nov 2024 17:21:52 +0100
Subject: [PATCH 11/11] feat(components): create the post-menu-button component
 (#3795)
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: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/quick-buses-give.md                |   6 +
 packages/components/src/components.d.ts       |  87 ++++++++
 .../post-menu-item/post-menu-item.scss        |   3 +
 .../post-menu-item/post-menu-item.tsx         |  19 ++
 .../src/components/post-menu-item/readme.md   |  10 +
 .../post-menu-trigger/post-menu-trigger.scss  |   3 +
 .../post-menu-trigger/post-menu-trigger.tsx   |  83 ++++++++
 .../components/post-menu-trigger/readme.md    |  17 ++
 .../src/components/post-menu/post-menu.scss   |  11 +
 .../src/components/post-menu/post-menu.tsx    | 195 ++++++++++++++++++
 .../src/components/post-menu/readme.md        |  82 ++++++++
 .../post-popovercontainer/readme.md           |   2 +
 packages/components/src/index.ts              |   3 +
 packages/components/src/utils/is-focusable.ts |  28 +++
 packages/documentation/.storybook/preview.ts  |   4 +
 .../menu-button/menu-button.docs.mdx          |  19 ++
 .../menu-button/menu-button.stories.ts        |  73 +++++++
 17 files changed, 645 insertions(+)
 create mode 100644 .changeset/quick-buses-give.md
 create mode 100644 packages/components/src/components/post-menu-item/post-menu-item.scss
 create mode 100644 packages/components/src/components/post-menu-item/post-menu-item.tsx
 create mode 100644 packages/components/src/components/post-menu-item/readme.md
 create mode 100644 packages/components/src/components/post-menu-trigger/post-menu-trigger.scss
 create mode 100644 packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx
 create mode 100644 packages/components/src/components/post-menu-trigger/readme.md
 create mode 100644 packages/components/src/components/post-menu/post-menu.scss
 create mode 100644 packages/components/src/components/post-menu/post-menu.tsx
 create mode 100644 packages/components/src/components/post-menu/readme.md
 create mode 100644 packages/components/src/utils/is-focusable.ts
 create mode 100644 packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx
 create mode 100644 packages/documentation/src/stories/components/menu-button/menu-button.stories.ts

diff --git a/.changeset/quick-buses-give.md b/.changeset/quick-buses-give.md
new file mode 100644
index 0000000000..d3212d7400
--- /dev/null
+++ b/.changeset/quick-buses-give.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added new Menu Button components (post-menu-button, post-menu-trigger, and post-menu-item) for creating accessible dropdown menus.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 3056034100..5a64d0884d 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -243,6 +243,33 @@ export namespace Components {
          */
         "url": string | URL;
     }
+    interface PostMenu {
+        /**
+          * Hides the popover menu and restores focus to the previously focused element.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         */
+        "placement"?: Placement;
+        /**
+          * Displays the popover menu, focusing the first menu item.
+          * @param target - The HTML element relative to which the popover menu should be displayed.
+         */
+        "show": (target: HTMLElement) => Promise<void>;
+        /**
+          * Toggles the menu visibility based on its current state.
+         */
+        "toggle": (target: HTMLElement) => Promise<void>;
+    }
+    interface PostMenuItem {
+    }
+    interface PostMenuTrigger {
+        /**
+          * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+         */
+        "for": string;
+    }
     interface PostPopover {
         /**
           * Show a little indicator arrow
@@ -402,6 +429,10 @@ export interface PostLanguageOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostLanguageOptionElement;
 }
+export interface PostMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostMenuElement;
+}
 export interface PostPopovercontainerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostPopovercontainerElement;
@@ -550,6 +581,35 @@ declare global {
         prototype: HTMLPostLogoElement;
         new (): HTMLPostLogoElement;
     };
+    interface HTMLPostMenuElementEventMap {
+        "toggleMenu": boolean;
+    }
+    interface HTMLPostMenuElement extends Components.PostMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPostMenuElementEventMap>(type: K, listener: (this: HTMLPostMenuElement, ev: PostMenuCustomEvent<HTMLPostMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPostMenuElementEventMap>(type: K, listener: (this: HTMLPostMenuElement, ev: PostMenuCustomEvent<HTMLPostMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPostMenuElement: {
+        prototype: HTMLPostMenuElement;
+        new (): HTMLPostMenuElement;
+    };
+    interface HTMLPostMenuItemElement extends Components.PostMenuItem, HTMLStencilElement {
+    }
+    var HTMLPostMenuItemElement: {
+        prototype: HTMLPostMenuItemElement;
+        new (): HTMLPostMenuItemElement;
+    };
+    interface HTMLPostMenuTriggerElement extends Components.PostMenuTrigger, HTMLStencilElement {
+    }
+    var HTMLPostMenuTriggerElement: {
+        prototype: HTMLPostMenuTriggerElement;
+        new (): HTMLPostMenuTriggerElement;
+    };
     interface HTMLPostPopoverElement extends Components.PostPopover, HTMLStencilElement {
     }
     var HTMLPostPopoverElement: {
@@ -647,6 +707,9 @@ declare global {
         "post-list": HTMLPostListElement;
         "post-list-item": HTMLPostListItemElement;
         "post-logo": HTMLPostLogoElement;
+        "post-menu": HTMLPostMenuElement;
+        "post-menu-item": HTMLPostMenuItemElement;
+        "post-menu-trigger": HTMLPostMenuTriggerElement;
         "post-popover": HTMLPostPopoverElement;
         "post-popovercontainer": HTMLPostPopovercontainerElement;
         "post-rating": HTMLPostRatingElement;
@@ -869,6 +932,24 @@ declare namespace LocalJSX {
          */
         "url"?: string | URL;
     }
+    interface PostMenu {
+        /**
+          * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
+         */
+        "onToggleMenu"?: (event: PostMenuCustomEvent<boolean>) => void;
+        /**
+          * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         */
+        "placement"?: Placement;
+    }
+    interface PostMenuItem {
+    }
+    interface PostMenuTrigger {
+        /**
+          * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+         */
+        "for": string;
+    }
     interface PostPopover {
         /**
           * Show a little indicator arrow
@@ -992,6 +1073,9 @@ declare namespace LocalJSX {
         "post-list": PostList;
         "post-list-item": PostListItem;
         "post-logo": PostLogo;
+        "post-menu": PostMenu;
+        "post-menu-item": PostMenuItem;
+        "post-menu-trigger": PostMenuTrigger;
         "post-popover": PostPopover;
         "post-popovercontainer": PostPopovercontainer;
         "post-rating": PostRating;
@@ -1026,6 +1110,9 @@ declare module "@stencil/core" {
             "post-list": LocalJSX.PostList & JSXBase.HTMLAttributes<HTMLPostListElement>;
             "post-list-item": LocalJSX.PostListItem & JSXBase.HTMLAttributes<HTMLPostListItemElement>;
             "post-logo": LocalJSX.PostLogo & JSXBase.HTMLAttributes<HTMLPostLogoElement>;
+            "post-menu": LocalJSX.PostMenu & JSXBase.HTMLAttributes<HTMLPostMenuElement>;
+            "post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes<HTMLPostMenuItemElement>;
+            "post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes<HTMLPostMenuTriggerElement>;
             "post-popover": LocalJSX.PostPopover & JSXBase.HTMLAttributes<HTMLPostPopoverElement>;
             "post-popovercontainer": LocalJSX.PostPopovercontainer & JSXBase.HTMLAttributes<HTMLPostPopovercontainerElement>;
             "post-rating": LocalJSX.PostRating & JSXBase.HTMLAttributes<HTMLPostRatingElement>;
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.scss b/packages/components/src/components/post-menu-item/post-menu-item.scss
new file mode 100644
index 0000000000..f09d32524a
--- /dev/null
+++ b/packages/components/src/components/post-menu-item/post-menu-item.scss
@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}
\ No newline at end of file
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.tsx b/packages/components/src/components/post-menu-item/post-menu-item.tsx
new file mode 100644
index 0000000000..b4c7de0469
--- /dev/null
+++ b/packages/components/src/components/post-menu-item/post-menu-item.tsx
@@ -0,0 +1,19 @@
+import { Component, h, Element, Host } from '@stencil/core';
+import { version } from '@root/package.json';
+
+@Component({
+  tag: 'post-menu-item',
+  shadow: true,
+  styleUrl: 'post-menu-item.scss',
+})
+export class PostMenuItem {
+  @Element() host: HTMLPostMenuItemElement;
+  
+  render() {
+    return (
+      <Host role="menuitem" data-version={version}>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-menu-item/readme.md b/packages/components/src/components/post-menu-item/readme.md
new file mode 100644
index 0000000000..d6c88bc316
--- /dev/null
+++ b/packages/components/src/components/post-menu-item/readme.md
@@ -0,0 +1,10 @@
+# post-menu-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss b/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss
new file mode 100644
index 0000000000..8d3464e097
--- /dev/null
+++ b/packages/components/src/components/post-menu-trigger/post-menu-trigger.scss
@@ -0,0 +1,3 @@
+:host {
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx b/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx
new file mode 100644
index 0000000000..8f07329f27
--- /dev/null
+++ b/packages/components/src/components/post-menu-trigger/post-menu-trigger.tsx
@@ -0,0 +1,83 @@
+import { Component, Element, Prop, h, Host, State, Watch } from '@stencil/core';
+import { version } from '@root/package.json';
+import { checkType } from '@/utils';
+
+@Component({
+  tag: 'post-menu-trigger',
+  styleUrl: 'post-menu-trigger.scss',
+  shadow: false,
+})
+export class PostMenuTrigger {
+  /**
+   * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+   */
+  @Prop() for!: string;
+
+  @Element() host: HTMLPostMenuTriggerElement;
+
+  /**
+   * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
+   */
+  @State() ariaExpanded: boolean = false;
+
+  /**
+   * Reference to the slotted button within the trigger, if present. 
+   * Used to manage click and key events for menu control.
+   */
+  private slottedButton: HTMLButtonElement | null = null;
+
+  /**
+   * Watch for changes to the `for` property to validate its type and ensure it is a string.
+   * @param forValue - The new value of the `for` property.
+   */
+  @Watch('for')
+  validateControlFor(forValue = this.for) {
+    checkType(forValue, 'string', 'The "for" property is required and should be a string.');
+  }
+
+  private get menu(): HTMLPostMenuElement | null {
+    const ref = document.getElementById(this.for);
+    return ref && ref.localName === 'post-menu' ? (ref as HTMLPostMenuElement) : null;
+  }
+
+  private handleToggle() {
+    const menu = this.menu;
+    if (menu && this.slottedButton) {
+      this.ariaExpanded = !this.ariaExpanded;
+      this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+      menu.toggle(this.host);
+    } else {
+      console.warn(`No post-menu found with ID: ${this.for}`);
+    }
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      this.handleToggle();
+    }
+  };
+
+  componentDidLoad() {
+    this.validateControlFor();
+    
+    this.slottedButton = this.host.querySelector('button');
+    if (this.slottedButton) {
+      this.slottedButton.setAttribute('aria-haspopup', 'menu');
+      this.slottedButton.addEventListener('click', () => {
+        this.handleToggle();
+      });
+      this.slottedButton.addEventListener('keydown', this.handleKeyDown);
+    } else {
+      console.warn('No button found within post-menu-trigger');
+    }
+  }
+
+  render() {
+    return (
+      <Host data-version={version} tab-index="-1">
+        <slot></slot>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-menu-trigger/readme.md b/packages/components/src/components/post-menu-trigger/readme.md
new file mode 100644
index 0000000000..5be3ab3109
--- /dev/null
+++ b/packages/components/src/components/post-menu-trigger/readme.md
@@ -0,0 +1,17 @@
+# post-menu-trigger
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute | Description                                                                                       | Type     | Default     |
+| ------------------ | --------- | ------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `for` _(required)_ | `for`     | ID of the menu element that this trigger is linked to. Used to open and close the specified menu. | `string` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-menu/post-menu.scss b/packages/components/src/components/post-menu/post-menu.scss
new file mode 100644
index 0000000000..95b15284b7
--- /dev/null
+++ b/packages/components/src/components/post-menu/post-menu.scss
@@ -0,0 +1,11 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+:host {
+  display: block;
+}
+
+post-popovercontainer {
+  padding: var(--post-menu-padding);
+  background-color: var(--post-menu-bg, #ffffff);
+  border-color: var(--post-menu-bg, #ffffff);
+}
\ No newline at end of file
diff --git a/packages/components/src/components/post-menu/post-menu.tsx b/packages/components/src/components/post-menu/post-menu.tsx
new file mode 100644
index 0000000000..dd5c90f3bf
--- /dev/null
+++ b/packages/components/src/components/post-menu/post-menu.tsx
@@ -0,0 +1,195 @@
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
+import { Placement } from '@floating-ui/dom';
+import { version } from '@root/package.json';
+import { isFocusable } from '@/utils/is-focusable';
+
+@Component({
+  tag: 'post-menu',
+  styleUrl: 'post-menu.scss',
+  shadow: true,
+})
+export class PostMenu {
+  private popoverRef: HTMLPostPopovercontainerElement;
+  private lastFocusedElement: HTMLElement | null = null;
+
+  private readonly KEYCODES = {
+    SPACE: ' ',
+    ENTER: 'Enter',
+    UP: 'ArrowUp',
+    DOWN: 'ArrowDown',
+    TAB: 'Tab',
+    HOME: 'Home',
+    END: 'End',
+    ESCAPE: 'Escape'
+  };
+
+  @Element() host: HTMLPostMenuElement;
+
+  /**
+   * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+   * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
+   * towards the viewport if they would overlap edge boundaries.
+   */
+  @Prop() readonly placement?: Placement = 'bottom';
+
+  /**
+   * Holds the current visibility state of the menu.
+   * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
+   * and updates automatically when the menu is toggled.
+   */
+  @State() isVisible: boolean = false;
+
+  /**
+   * Emits when the menu is shown or hidden.
+   * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
+   **/
+  @Event() toggleMenu: EventEmitter<boolean>;
+
+  connectedCallback() {
+    this.host.addEventListener('keydown', this.handleKeyDown);
+    this.host.addEventListener('click', this.handleClick);
+  }
+
+  disconnectedCallback() {
+    this.host.removeEventListener('keydown', this.handleKeyDown);
+    this.host.removeEventListener('click', this.handleClick);
+  }
+
+  componentDidLoad() {
+    this.popoverRef.addEventListener('postToggle', (event: CustomEvent<boolean>) => {
+      this.isVisible = event.detail;
+      this.toggleMenu.emit(this.isVisible);
+    });
+  }
+
+  /**
+   * Toggles the menu visibility based on its current state.
+   */
+  @Method()
+  async toggle(target: HTMLElement) {
+    this.isVisible ? await this.hide() : await this.show(target);
+  }
+
+  /**
+   * Displays the popover menu, focusing the first menu item.
+   * 
+   * @param target - The HTML element relative to which the popover menu should be displayed.
+   */
+  @Method()
+  async show(target: HTMLElement) {
+    if (this.popoverRef) {
+      await this.popoverRef.show(target);
+      this.lastFocusedElement = document.activeElement as HTMLElement;
+
+      const menuItems = this.getSlottedItems();
+      if (menuItems.length > 0) {
+        (menuItems[0] as HTMLElement).focus();
+      }
+    } else {
+      console.error('show: popoverRef is null or undefined');
+    }
+  }
+
+  /**
+   * Hides the popover menu and restores focus to the previously focused element.
+   */
+  @Method()
+  async hide() {
+    if (this.popoverRef) {
+      await this.popoverRef.hide();
+      if (this.lastFocusedElement) {
+        this.lastFocusedElement.focus();
+      }
+    } else {
+      console.error('hide: popoverRef is null or undefined');
+    }
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    e.stopPropagation();
+
+    if (e.key === this.KEYCODES.ESCAPE) {
+      this.toggle(this.host);
+      return;
+    }
+
+    if (Object.values(this.KEYCODES).includes(e.key)) {
+      this.controlKeyDownHandler(e);
+    }
+  };
+
+  private handleClick = (e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+      this.toggle(this.host);
+    }
+  };
+
+  private controlKeyDownHandler(e: KeyboardEvent) {
+    const menuItems = this.getSlottedItems();
+    if (!menuItems.length) {
+      return;
+    }
+
+    const currentFocusedElement = document.activeElement as HTMLElement;
+    let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
+
+    switch (e.key) {
+      case this.KEYCODES.UP:
+        e.preventDefault();
+        currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
+        break;
+      case this.KEYCODES.DOWN:
+        e.preventDefault();
+        currentIndex = (currentIndex + 1) % menuItems.length;
+        break;
+      case this.KEYCODES.HOME:
+        currentIndex = 0;
+        break;
+      case this.KEYCODES.END:
+        currentIndex = menuItems.length - 1;
+        break;
+      case this.KEYCODES.SPACE:
+      case this.KEYCODES.ENTER:
+        this.toggle(this.host);
+        return;
+      case this.KEYCODES.TAB:
+        this.toggle(this.host);
+        break;
+      default:
+        break;
+    }
+
+    if (menuItems[currentIndex]) {
+      (menuItems[currentIndex] as HTMLElement).focus();
+    }
+  }
+
+  private getSlottedItems() {
+    const slot = this.host.shadowRoot.querySelector('slot');
+    const slottedElements = slot ? slot.assignedElements() : [];
+
+    const menuItems = slottedElements
+      .filter(el => el.tagName === 'POST-MENU-ITEM')
+      .map(el => {
+        const slot = el.shadowRoot.querySelector('slot');
+        const assignedElements = slot ? slot.assignedElements() : [];
+        return assignedElements.filter(isFocusable);
+      })
+      .flat();
+
+    return menuItems;
+  }
+
+  render() {
+    return (
+      <Host data-version={version}>
+        <post-popovercontainer placement={this.placement} ref={e => (this.popoverRef = e)}>
+          <div class="popover-container">
+            <slot></slot>
+          </div>
+        </post-popovercontainer>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/components/post-menu/readme.md b/packages/components/src/components/post-menu/readme.md
new file mode 100644
index 0000000000..f700878d4c
--- /dev/null
+++ b/packages/components/src/components/post-menu/readme.md
@@ -0,0 +1,82 @@
+# post-menu
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property    | Attribute   | Description                                                                                                                                                                                                                                                                                                               | Type                                                                                                                                                                 | Default    |
+| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` |
+
+
+## Events
+
+| Event        | Description                                                                                                                          | Type                   |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- |
+| `toggleMenu` | Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed. | `CustomEvent<boolean>` |
+
+
+## Methods
+
+### `hide() => Promise<void>`
+
+Hides the popover menu and restores focus to the previously focused element.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `show(target: HTMLElement) => Promise<void>`
+
+Displays the popover menu, focusing the first menu item.
+
+#### Parameters
+
+| Name     | Type          | Description                                                                |
+| -------- | ------------- | -------------------------------------------------------------------------- |
+| `target` | `HTMLElement` | - The HTML element relative to which the popover menu should be displayed. |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `toggle(target: HTMLElement) => Promise<void>`
+
+Toggles the menu visibility based on its current state.
+
+#### Parameters
+
+| Name     | Type          | Description |
+| -------- | ------------- | ----------- |
+| `target` | `HTMLElement` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Dependencies
+
+### Depends on
+
+- [post-popovercontainer](../post-popovercontainer)
+
+### Graph
+```mermaid
+graph TD;
+  post-menu --> post-popovercontainer
+  style post-menu fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-popovercontainer/readme.md b/packages/components/src/components/post-popovercontainer/readme.md
index 7efe854e5c..99b04f2f7e 100644
--- a/packages/components/src/components/post-popovercontainer/readme.md
+++ b/packages/components/src/components/post-popovercontainer/readme.md
@@ -78,12 +78,14 @@ Type: `Promise<boolean>`
 
 ### Used by
 
+ - [post-menu](../post-menu)
  - [post-popover](../post-popover)
  - [post-tooltip](../post-tooltip)
 
 ### Graph
 ```mermaid
 graph TD;
+  post-menu --> post-popovercontainer
   post-popover --> post-popovercontainer
   post-tooltip --> post-popovercontainer
   style post-popovercontainer fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index a2734c8e80..593b7c7fa2 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -13,6 +13,9 @@ export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/po
 export { PostIcon } from './components/post-icon/post-icon';
 export { PostLanguageOption } from './components/post-language-option/post-language-option';
 export { PostLogo } from './components/post-logo/post-logo';
+export { PostMenu } from './components/post-menu/post-menu';
+export { PostMenuTrigger } from './components/post-menu-trigger/post-menu-trigger';
+export { PostMenuItem } from './components/post-menu-item/post-menu-item';
 export { PostPopover } from './components/post-popover/post-popover';
 export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
 export { PostRating } from './components/post-rating/post-rating';
diff --git a/packages/components/src/utils/is-focusable.ts b/packages/components/src/utils/is-focusable.ts
new file mode 100644
index 0000000000..66aa7d74dc
--- /dev/null
+++ b/packages/components/src/utils/is-focusable.ts
@@ -0,0 +1,28 @@
+const focusableSelector = `:where(${[
+  'button',
+  'input:not([type="hidden"])',
+  '[tabindex]',
+  'select',
+  'textarea',
+  '[contenteditable]',
+  'a[href]',
+  'iframe',
+  'audio[controls]',
+  'video[controls]',
+  'area[href]',
+  'details > summary:first-of-type',
+].join(',')})`;
+
+const focusDisablingSelector = `:where(${[
+  '[inert]',
+  '[inert] *',
+  ':disabled',
+  'dialog:not([open]) *',
+  '[popover]:not(:popover-open) *',
+  'details:not([open]) > *:not(details > summary:first-of-type)',
+  'details:not([open]) > *:not(details > summary:first-of-type) *',
+].join(',')})`;
+
+export const isFocusable = (element: Element) => {
+  return element?.matches(focusableSelector) && !element?.matches(focusDisablingSelector);
+};
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
index 035bdf5f97..df8c5707e7 100644
--- a/packages/documentation/.storybook/preview.ts
+++ b/packages/documentation/.storybook/preview.ts
@@ -15,6 +15,7 @@ import './styles/preview.scss';
 
 import { SyntaxHighlighter } from '@storybook/components';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+import { ArgTypes } from '@storybook/blocks';
 
 SyntaxHighlighter.registerLanguage('scss', scss);
 
@@ -84,6 +85,9 @@ const preview: Preview = {
           },
         ],
       },
+      argTypes: {
+        sort: 'requiredFirst',
+      },
       source: {
         excludeDecorators: true,
         dark: SourceDarkScheme,
diff --git a/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx b/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx
new file mode 100644
index 0000000000..a5f7a38de6
--- /dev/null
+++ b/packages/documentation/src/stories/components/menu-button/menu-button.docs.mdx
@@ -0,0 +1,19 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as MenuButtonStories from './menu-button.stories';
+
+<Meta of={MenuButtonStories} />
+
+<div className="docs-title">
+  # Menu Button
+
+  <nav>
+    <link-design of={JSON.stringify(MenuButtonStories)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  A dropdown component for displaying a list of links or actions with flexible alignment.
+</div>
+
+<Canvas sourceState="shown" of={MenuButtonStories.Default} />
+<Controls of={MenuButtonStories.Default} />
diff --git a/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts b/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts
new file mode 100644
index 0000000000..1aacdc2e46
--- /dev/null
+++ b/packages/documentation/src/stories/components/menu-button/menu-button.stories.ts
@@ -0,0 +1,73 @@
+import { Args, StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+  id: '8ca2bd70-56e6-4da9-b1fd-4e55388dca88',
+  title: 'Components/Menu Button',
+  tags: ['package:WebComponents'],
+  component: 'post-menu',
+  parameters: {
+    design: {},
+  },
+  render,
+  args: {
+    id: 'menu-one',
+    placement: 'bottom',
+    padding: '',
+    backgroundColor: '',
+  },
+  argTypes: {
+    id: {
+      name: 'id',
+      description:
+        'The id is used to connect a trigger element with the popover.',
+      table: {
+        category: 'General',
+      },
+    },
+    padding: {
+      name: 'padding',
+      description: 'Controls the padding inside the menu container using --post-menu-padding.',
+      control: { type: 'text' },
+      table: {
+        category: 'CSS Variables',
+      },
+    },
+    backgroundColor: {
+      name: 'background color',
+      description: 'Defines the color of the menu.',
+      table: {
+        category: 'CSS Variables'
+      },
+    },
+  },
+};
+
+function render(args: Args) {
+  // Construct the style string conditionally based on padding and backgroundColor
+  const styles = [
+    args.padding ? `--post-menu-padding: ${args.padding};` : '',
+    args.backgroundColor ? `--post-menu-bg: ${args.backgroundColor};` : ''
+  ].filter(Boolean).join(' ').trim();
+
+  return html`
+    <post-menu-trigger for="${args.id}">
+      <button class="btn btn-primary">Menu button</button>
+    </post-menu-trigger>
+    <post-menu 
+      style="${styles || nothing}" 
+      id="${args.id}" 
+      placement="${args.placement !== 'bottom' ? args.placement : nothing}"
+    >
+      <post-menu-item><button>Example 1</button></post-menu-item>
+      <post-menu-item>
+        <a href="#">Example 2</a>
+        <post-menu-item><div>Example 3</div></post-menu-item>
+      </post-menu-item>
+    </post-menu>
+  `;
+}
+
+export default meta;
+export const Default: StoryObj = {};