fix(components): update outline offset of focused elements

.changeset/early-news-fetch.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': major
+---
+
+Renamed the `toggleMobileMenu` method in the `post-header` component to `toggleBurgerMenu` for clearer and device-agnostic naming.

.changeset/good-walls-cheer.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-components': major
+'@swisspost/design-system-documentation': patch
+---
+
+Removed the default slot from the `post-header` component.
+Content previously placed in the default slot should now be assigned to the `local-controls` slot.

.changeset/quiet-flies-lie.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-components': major
+'@swisspost/design-system-documentation': patch
+---
+
+Removed the `slot` attribute from the `post-mainnavigation` host.
+The slot must now be added manually to position the `post-mainnavigation` correctly within the `post-header` component.

.changeset/shaky-cups-bake.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': major
+---
+
+Removed `--post-local-header-top` custom properties from the `post-header` component because the local header is no longer a positioned element.

.changeset/tricky-wombats-rest.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Corrected offset of the outline of focused elements in the `post-language-option` and `post-mainnavigation`.

packages/components/cypress/e2e/header.cy.ts

@@ -18,13 +18,13 @@ describe('Header', () => {
     };
 
     it('should close mobile nav menu after reattaching header', () => {
-      cy.get('div.local-header-mobile-extended').should('not.exist');
+      cy.get('div.burger-menu.extended').should('not.exist');
       cy.get('post-togglebutton').click();
-      cy.get('div.local-header-mobile-extended').should('exist');
+      cy.get('div.burger-menu.extended').should('exist');
 
       removeAndReattachHeader();
 
-      cy.get('div.local-header-mobile-extended').should('not.exist');
+      cy.get('div.burger-menu.extended').should('not.exist');
     });
 
     it('should release scroll lock after reattaching header', () => {
@@ -40,31 +40,31 @@ describe('Header', () => {
     it('should close both megadropdown and mobile menu with one click', () => {
       // Open mobile menu
       cy.get('post-togglebutton').click();
-      cy.get('div.local-header-mobile-extended').should('exist');
+      cy.get('div.burger-menu.extended').should('exist');
       // Open megadropdown
       cy.get('post-megadropdown-trigger').first().click();
       cy.get('post-megadropdown .megadropdown-container').should('be.visible');
       // Click menu button to close both
       cy.get('post-togglebutton').click();
-      cy.get('div.local-header-mobile-extended').should('not.exist');
+      cy.get('div.burger-menu.extended').should('not.exist');
       cy.get('post-megadropdown .megadropdown-container').should('not.be.visible');
     });
 
     it('should animate megadropdown open after forced close', () => {
       // Open mobile menu and megadropdown
       cy.get('post-togglebutton').click();
-      cy.get('div.local-header-mobile-extended').should('exist');
+      cy.get('div.burger-menu.extended').should('exist');
       cy.get('post-megadropdown-trigger').first().should('be.visible').click();
       cy.get('post-megadropdown .megadropdown-container').should('be.visible');
 
       // Force close by toggling menu
       cy.get('post-togglebutton').click();
-      cy.get('div.local-header-mobile-extended').should('not.exist');
+      cy.get('div.burger-menu.extended').should('not.exist');
       cy.get('post-megadropdown .megadropdown-container').should('not.be.visible');
 
       // Reopen mobile menu before clicking the trigger again
       cy.get('post-togglebutton').click();
-      cy.get('div.local-header-mobile-extended').should('exist');
+      cy.get('div.burger-menu.extended').should('exist');
       cy.get('post-megadropdown-trigger').first().should('be.visible').click();
 
       // Check if animation class is present

packages/components/cypress/fixtures/post-mainnavigation-overflow.test.html

@@ -46,7 +46,7 @@
       <h1 slot="title">Application title</h1>
 
       <!-- Custom content (optional) -->
-      <ul class="list-inline">
+      <ul slot="local-controls" class="list-inline">
         <li>
           <a href="#">
             <span>Search</span>
@@ -62,7 +62,7 @@ <h1 slot="title">Application title</h1>
       </ul>
 
       <!-- Main navigation -->
-      <post-mainnavigation caption="Hauptnavigation">
+      <post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
         <post-list title-hidden="">
           <h2>Main Navigation</h2>
 

packages/components/cypress/fixtures/post-mainnavigation.test.html

@@ -46,7 +46,7 @@
       <h1 slot="title">Application title</h1>
 
       <!-- Custom content (optional) -->
-      <ul class="list-inline">
+      <ul slot="local-controls" class="list-inline">
         <li>
           <a href="#">
             <span>Search</span>
@@ -62,7 +62,7 @@ <h1 slot="title">Application title</h1>
       </ul>
 
       <!-- Main navigation -->
-      <post-mainnavigation caption="Hauptnavigation">
+      <post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
         <post-list title-hidden="">
           <h2>Main Navigation</h2>
 

packages/components/src/components.d.ts

@@ -202,9 +202,9 @@ export namespace Components {
     }
     interface PostHeader {
         /**
-          * Toggles the mobile navigation.
+          * Toggles the burger navigation menu.
          */
-        "toggleMobileMenu": (force?: boolean) => Promise<void>;
+        "toggleBurgerMenu": (force?: boolean) => Promise<void>;
     }
     /**
      * @class PostIcon - representing a stencil component

packages/components/src/components/post-avatar/post-avatar.scss

@@ -57,7 +57,6 @@ img,
   justify-content: center;
   align-items: center;
   position: relative;
-  z-index: 2;
   width: 100%;
   height: 100%;
   background-color: var(--post-avatar-bg);

packages/components/src/components/post-header/custom-properties.scss

@@ -0,0 +1,59 @@
+@use '@swisspost/design-system-styles/mixins/media';
+
+:host {
+  // The following variables will affect the header to minimize it on scroll
+  --post-global-header-top: calc(var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height));
+  --post-header-top: calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));
+
+  --post-logo-height: calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));
+  --post-global-controls-top: clamp(
+    /* 0 when header is static, large negative when header shrinks to enable offset */
+    1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)),
+    calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))),
+    0px
+  );
+
+  @include media.only(desktop) {
+    --post-header-gap: 0.25rem;
+    --post-global-header-padding-inline-start: 0.25rem;
+    --post-global-header-padding-inline-end: 0.5rem;
+    --post-local-header-padding-inline-start: 0.75rem;
+    --post-local-header-padding-inline-end: 0.5rem;
+  }
+
+  @include media.only(tablet) {
+    --post-header-gap: 0.75rem 0.25rem;
+    --post-global-header-padding-inline-start: 0.25rem;
+    --post-global-header-padding-inline-end: 0.25rem;
+    --post-local-header-padding-inline-start: 0.75rem;
+    --post-local-header-padding-inline-end: 0.25rem;
+    --post-local-header-padding-block: 0.75rem;
+    --post-burger-menu-padding-inline: 2.5rem;
+    --post-burger-menu-body-gap: 2rem;
+    --post-burger-menu-footer-gap: 1.5rem;
+  }
+
+  // this is being discussed in Figma
+  @include media.only(sm) {
+    --post-burger-menu-padding-inline: 1rem;
+  }
+
+  @include media.only(mobile) {
+    --post-header-gap: 0.75rem 0.25rem;
+    --post-global-header-padding-inline-start: 0rem;
+    --post-global-header-padding-inline-end: 0.5rem;
+    --post-local-header-padding-inline-start: 0.5rem;
+    --post-local-header-padding-inline-end: 0.5rem;
+    --post-local-header-padding-block: 0.75rem;
+    --post-burger-menu-padding-inline: 1rem;
+    --post-burger-menu-body-gap: 1.5rem;
+    --post-burger-menu-footer-gap: 1rem;
+  }
+}
+
+:host([data-expanded]) {
+  --post-header-top: 0;
+  --post-global-header-top: 0;
+  --post-global-controls-top: 0;
+  --post-logo-height: var(--post-global-header-expanded-height);
+}