From 41b6806166098e6ea13658b8187d027744818473 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Tue, 24 Dec 2024 13:10:31 +0100
Subject: [PATCH 1/2] chore(components): remove usage of utility classes

---
 .changeset/breezy-poets-shout.md                            | 5 +++++
 .../components/src/components/post-header/post-header.scss  | 1 +
 .../components/src/components/post-header/post-header.tsx   | 5 +----
 .../components/post-mainnavigation/post-mainnavigation.scss | 4 ++++
 packages/components/src/index.html                          | 6 +++---
 5 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/breezy-poets-shout.md

diff --git a/.changeset/breezy-poets-shout.md b/.changeset/breezy-poets-shout.md
new file mode 100644
index 0000000000..faf0fbbe29
--- /dev/null
+++ b/.changeset/breezy-poets-shout.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed usage of utility classes in `post-header` component.
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index 2b22afd3ed..c6c3eb7b01 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -96,6 +96,7 @@ slot[name='post-logo'] {
 .title-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--post-core-dimension-4);
   height: var(--main-header-height);
   background: var(--post-core-color-brand-white);
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
index 3d0cf0487d..849678ba9f 100644
--- a/packages/components/src/components/post-header/post-header.tsx
+++ b/packages/components/src/components/post-header/post-header.tsx
@@ -151,10 +151,7 @@ export class PostHeader {
           </div>
         </div>
         <div
-          class={
-            'title-header d-flex space-between align-center ' +
-            (this.mobileMenuExtended ? 'title-header-mobile-extended' : '')
-          }
+          class={'title-header ' + (this.mobileMenuExtended ? 'title-header-mobile-extended' : '')}
         >
           <slot name="title"></slot>
           <div class="global-sub">
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index c6f08ed52b..66fcac7c25 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -122,4 +122,8 @@ post-mainnavigation {
       }
     }
   }
+
+  .back-button .btn {
+    padding-inline: 0;
+  }
 }
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 8bffd715bf..9d430ef3bc 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -67,7 +67,7 @@ <h1 slot="title">Application title</h1>
 
       <!-- Main navigation -->
       <post-mainnavigation caption="Hauptnavigation">
-        <button type="button" slot="back-button" class="btn btn-sm btn-tertiary p-0">
+        <button type="button" slot="back-button" class="btn btn-sm btn-tertiary">
           <post-icon aria-hidden="true" name="3024"></post-icon> Back
         </button>
 
@@ -82,7 +82,7 @@ <h2>Main Navigation</h2>
           <post-list-item>
             <post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
             <post-megadropdown id="briefe">
-              <button slot="back-button" class="btn btn-tertiary px-0">
+              <button slot="back-button" class="btn btn-tertiary">
                 <post-icon name="arrowright"></post-icon>
                 Zurück
               </button>
@@ -107,7 +107,7 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
           <post-list-item>
             <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
             <post-megadropdown id="pakete">
-              <button slot="back-button" class="btn btn-tertiary px-0">
+              <button slot="back-button" class="btn btn-tertiary">
                 <post-icon name="arrowright"></post-icon>
                 Zurück
               </button>

From 53a40a63d646e7f2ba44f81e1e415baa708b45ec Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Mon, 30 Dec 2024 15:39:33 +0100
Subject: [PATCH 2/2] Update .changeset/breezy-poets-shout.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/breezy-poets-shout.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/breezy-poets-shout.md b/.changeset/breezy-poets-shout.md
index faf0fbbe29..5f9bb20e20 100644
--- a/.changeset/breezy-poets-shout.md
+++ b/.changeset/breezy-poets-shout.md
@@ -2,4 +2,4 @@
 '@swisspost/design-system-components': patch
 ---
 
-Removed usage of utility classes in `post-header` component.
+Removed the dependency on utility classes in `post-header` component. The header can now be used without importing CSS utility classes.