From aebfcf2433c3cb3d819bee3e39a9522def63f14e Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Wed, 4 Dec 2024 11:39:25 +0100
Subject: [PATCH 01/16] add styling to dropdown

---
 packages/components/src/components.d.ts       |  55 +++---
 .../post-closebutton/post-closebutton.tsx     |   2 +-
 .../post-megadropdown-trigger.tsx             |  83 ++++++++--
 .../post-megadropdown-trigger/readme.md       |   8 +-
 .../post-megadropdown/post-megadropdown.scss  | 106 +++++++++---
 .../post-megadropdown/post-megadropdown.tsx   |  89 +++++++---
 .../components/post-megadropdown/readme.md    |  38 +++--
 packages/components/src/index.html            | 156 +++++-------------
 8 files changed, 319 insertions(+), 218 deletions(-)

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 531997eef8..5f9f242523 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -245,25 +245,24 @@ export namespace Components {
     }
     interface PostMegadropdown {
         /**
-          * Hide megadropdown
-          * @returns boolean
+          * Hides the popover dropdown
          */
         "hide": () => Promise<void>;
         /**
-          * Show megadropdown
-          * @param element HTMLElement
-          * @returns boolean
+          * Displays the popover dropdown
+          * @param target - The HTML element relative to which the popover dropdown should be displayed.
          */
-        "show": (element: HTMLElement) => Promise<void>;
+        "show": (target: HTMLElement) => Promise<void>;
         /**
-          * Toggle megadropdown
-          * @param element HTMLElement
-          * @param force boolean
-          * @returns boolean
+          * Toggles the dropdown visibility based on its current state.
          */
-        "toggle": (element: HTMLElement, force?: boolean) => Promise<boolean>;
+        "toggle": (target: HTMLElement) => Promise<void>;
     }
     interface PostMegadropdownTrigger {
+        /**
+          * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
+         */
+        "for": string;
     }
     interface PostMenu {
         /**
@@ -461,9 +460,9 @@ export interface PostMainnavigationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostMainnavigationElement;
 }
-export interface PostMegadropdownTriggerCustomEvent<T> extends CustomEvent<T> {
+export interface PostMegadropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLPostMegadropdownTriggerElement;
+    target: HTMLPostMegadropdownElement;
 }
 export interface PostMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -640,25 +639,25 @@ declare global {
         prototype: HTMLPostMainnavigationElement;
         new (): HTMLPostMainnavigationElement;
     };
-    interface HTMLPostMegadropdownElement extends Components.PostMegadropdown, HTMLStencilElement {
-    }
-    var HTMLPostMegadropdownElement: {
-        prototype: HTMLPostMegadropdownElement;
-        new (): HTMLPostMegadropdownElement;
-    };
-    interface HTMLPostMegadropdownTriggerElementEventMap {
-        "postToggle": any;
+    interface HTMLPostMegadropdownElementEventMap {
+        "toggleMegadropdown": boolean;
     }
-    interface HTMLPostMegadropdownTriggerElement extends Components.PostMegadropdownTrigger, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPostMegadropdownTriggerElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent<HTMLPostMegadropdownTriggerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLPostMegadropdownElement extends Components.PostMegadropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPostMegadropdownElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownElement, ev: PostMegadropdownCustomEvent<HTMLPostMegadropdownElementEventMap[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 HTMLPostMegadropdownTriggerElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent<HTMLPostMegadropdownTriggerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPostMegadropdownElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownElement, ev: PostMegadropdownCustomEvent<HTMLPostMegadropdownElementEventMap[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 HTMLPostMegadropdownElement: {
+        prototype: HTMLPostMegadropdownElement;
+        new (): HTMLPostMegadropdownElement;
+    };
+    interface HTMLPostMegadropdownTriggerElement extends Components.PostMegadropdownTrigger, HTMLStencilElement {
+    }
     var HTMLPostMegadropdownTriggerElement: {
         prototype: HTMLPostMegadropdownTriggerElement;
         new (): HTMLPostMegadropdownTriggerElement;
@@ -1030,12 +1029,16 @@ declare namespace LocalJSX {
         "onPostToggle"?: (event: PostMainnavigationCustomEvent<any>) => void;
     }
     interface PostMegadropdown {
+        /**
+          * Emits when the dropdown is shown or hidden. The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
+         */
+        "onToggleMegadropdown"?: (event: PostMegadropdownCustomEvent<boolean>) => void;
     }
     interface PostMegadropdownTrigger {
         /**
-          * Emits after each toggle
+          * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
          */
-        "onPostToggle"?: (event: PostMegadropdownTriggerCustomEvent<any>) => void;
+        "for": string;
     }
     interface PostMenu {
         /**
diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx
index 68d13ef51a..0d447ab844 100644
--- a/packages/components/src/components/post-closebutton/post-closebutton.tsx
+++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx
@@ -15,7 +15,7 @@ export class PostClosebutton {
     return (
       <Host data-version={version}>
         <button class="btn btn-icon-close">
-          <post-icon aria-hidden="true" name="2043"></post-icon>
+          <post-icon aria-hidden="true" name="closex"></post-icon>
           <span class="visually-hidden">
             <slot></slot>
           </span>
diff --git a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
index 246c9d2c95..e2662c98a4 100644
--- a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
+++ b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
@@ -1,29 +1,86 @@
-import { Component, Event, EventEmitter, Host, State, h } from '@stencil/core';
+import { Component, Element, Prop, h, Host, State, Watch } from '@stencil/core';
+import { version } from '@root/package.json';
+import { checkType, getRoot } from '@/utils';
 
 @Component({
   tag: 'post-megadropdown-trigger',
-  shadow: true,
-  styleUrl: './post-megadropdown-trigger.scss',
+  styleUrl: 'post-megadropdown-trigger.scss',
+  shadow: false,
 })
 export class PostMegadropdownTrigger {
   /**
-   * Emits after each toggle
+   * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
    */
-  @Event() postToggle: EventEmitter;
+  @Prop() for!: string;
 
-  @State() toggled = false;
+  @Element() host: HTMLPostMegadropdownTriggerElement;
 
-  private handleClick() {
-    this.toggled = !this.toggled;
-    this.postToggle.emit();
+  /**
+   * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown 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 mega dropdown control.
+   */
+  private slottedButton: HTMLButtonElement | null = null;
+  private root?: Document | ShadowRoot;
+
+  /**
+   * 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 megadropdown(): HTMLPostMegadropdownElement | null {
+    const ref = this.root.getElementById(this.for);
+    return ref && ref.localName === 'post-megadropdown'
+      ? (ref as HTMLPostMegadropdownElement)
+      : null;
+  }
+
+  private handleToggle() {
+    const megadropdown = this.megadropdown;
+    if (megadropdown && this.slottedButton) {
+      this.ariaExpanded = !this.ariaExpanded;
+      this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+      megadropdown.toggle(this.host);
+    } else {
+      console.warn(`No post-megadropdown found with ID: ${this.for}`);
+    }
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      this.handleToggle();
+    }
+  };
+
+  componentDidLoad() {
+    this.root = getRoot(this.host);
+    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-megadropdown-trigger');
+    }
   }
 
   render() {
     return (
-      <Host slot="post-megadropdown-trigger">
-        <button aria-expanded={this.toggled} onClick={() => this.handleClick()}>
-          <slot></slot>
-        </button>
+      <Host data-version={version} tab-index="-1">
+        <slot></slot>
       </Host>
     );
   }
diff --git a/packages/components/src/components/post-megadropdown-trigger/readme.md b/packages/components/src/components/post-megadropdown-trigger/readme.md
index 870d32aabc..9488d51aa9 100644
--- a/packages/components/src/components/post-megadropdown-trigger/readme.md
+++ b/packages/components/src/components/post-megadropdown-trigger/readme.md
@@ -5,11 +5,11 @@
 <!-- Auto Generated Below -->
 
 
-## Events
+## Properties
 
-| Event        | Description             | Type               |
-| ------------ | ----------------------- | ------------------ |
-| `postToggle` | Emits after each toggle | `CustomEvent<any>` |
+| Property           | Attribute | Description                                                                                                         | Type     | Default     |
+| ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `for` _(required)_ | `for`     | ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown. | `string` | `undefined` |
 
 
 ----------------------------------------------
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index ffc7413fc4..b17d09f595 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -10,7 +10,7 @@
 post-popovercontainer {
   background-color: #fafafa;
   width: 100%;
-  border-bottom: 1px solid black;
+  border-radius: 0;
 
   @include media.max(lg) {
     // Overrides floating-ui inline styles on mobile
@@ -24,48 +24,104 @@ post-popovercontainer {
 }
 
 .megadropdown {
-  display: flex;
-  gap: 1rem;
-  padding: 1.5rem;
-  border-radius: 0 0 3px 3px;
+  padding: 31px 40px 40px;
 
   @include media.max(lg) {
-    flex-direction: column;
+    padding: 16px 32px 24px;
+  }
+
+  .megadropdown-content {
+    gap: 1.5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(15vw, 100%), 1fr));
+    grid-auto-rows: 1fr auto;
+    grid-auto-flow: dense;
+
+    @include media.max(lg) {
+      grid-template-columns: repeat(auto-fit, minmax(min(35vw, 100%), 1fr));
+    }
+  }
+
+  h2 {
+    display: none;
+    margin-top: 0;
+    margin-bottom: 8px;
+
+    @include media.max(lg) {
+      display: block;
+      font-size: 20px;
+    }
   }
 
   post-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    display: grid;
+    grid-row: span 2;
+    grid-template-rows: subgrid !important;
+    row-gap: 0px;
+
+    > * {
+      width: 100%;
+    }
+
+    .list-title {
+      display: flex;
+      flex-direction: column-reverse;
+      height: 100%;
+
+      h3 {
+        font-size: 20px;
+        border-bottom: 1px solid #050400;
+
+        a {
+          padding: 15px 12px 14px 0;
+          text-decoration: none;
+          display: block;
+          width: 100%;
+
+          @include media.max(lg) {
+            font-size: 16px;
+            padding: 12px 12px 11px 0;
+          }
+        }
+      }
+    }
   }
 
   post-list-item {
-    border-bottom: 1px solid gray;
+    border-bottom: 1px solid #050400;
 
     > a {
-      padding-block: 0.25rem;
+      padding: 13px 12px 12px 0;
       display: block;
       text-decoration: none;
+      width: 100%;
+
+      @include media.max(lg) {
+        padding: 12px 12px 11px 0;
+      }
     }
   }
-}
 
-.back-button {
-  display: none;
+  .back-button {
+    display: none;
+    margin-bottom: 2rem;
+
+    post-icon {
+      transform: rotate(180deg);
+    }
 
-  @include media.max(lg) {
-    display: block;
+    @include media.max(lg) {
+      display: block;
+    }
   }
-}
 
-post-closebutton {
-  margin-left: auto;
+  .close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
 
-  @include media.max(lg) {
-    display: none;
+    @include media.max(lg) {
+      display: none;
+    }
   }
 }
-
-h3 {
-  font-size: 20px;
-}
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
index 3709c59e5a..261db4d924 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
@@ -1,56 +1,101 @@
-import { Component, Host, Method, h } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Host, Method, State } from '@stencil/core';
 
 @Component({
   tag: 'post-megadropdown',
+  styleUrl: 'post-megadropdown.scss',
   shadow: false,
-  styleUrl: './post-megadropdown.scss',
 })
 export class PostMegadropdown {
   private popoverRef: HTMLPostPopovercontainerElement;
+  private animationClass: string | null = null;
+
+  @Element() host: HTMLPostMegadropdownElement;
+
+  /**
+   * Holds the current visibility state of the dropdown.
+   * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
+   * and updates automatically when the dropdown is toggled.
+   */
+  @State() isVisible: boolean = false;
+
+  /**
+   * Emits when the dropdown is shown or hidden.
+   * The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
+   **/
+  @Event() toggleMegadropdown: EventEmitter<boolean>;
+
+  componentDidLoad() {
+    this.popoverRef.addEventListener('postToggle', (event: CustomEvent<boolean>) => {
+      this.isVisible = event.detail;
+      this.toggleMegadropdown.emit(this.isVisible);
+    });
+  }
 
   /**
-   * Show megadropdown
-   * @param element HTMLElement
-   * @returns boolean
+   * Toggles the dropdown visibility based on its current state.
    */
   @Method()
-  async show(element: HTMLElement) {
-    return this.popoverRef.show(element);
+  async toggle(target: HTMLElement) {
+    this.isVisible ? await this.hide() : await this.show(target);
   }
 
   /**
-   * Hide megadropdown
-   * @returns boolean
+   * Displays the popover dropdown
+   *
+   * @param target - The HTML element relative to which the popover dropdown should be displayed.
    */
   @Method()
-  async hide() {
-    return this.popoverRef.hide();
+  async show(target: HTMLElement) {
+    if (this.popoverRef) {
+      await this.popoverRef.show(target);
+      this.animationClass = 'slide-in';
+    } else {
+      console.error('show: popoverRef is null or undefined');
+    }
   }
 
   /**
-   * Toggle megadropdown
-   * @param element HTMLElement
-   * @param force boolean
-   * @returns boolean
+   * Hides the popover dropdown
    */
   @Method()
-  async toggle(element: HTMLElement, force?: boolean) {
-    return this.popoverRef.toggle(element, force ?? undefined);
+  async hide() {
+    if (this.popoverRef) {
+      await this.popoverRef.hide();
+    } else {
+      console.error('hide: popoverRef is null or undefined');
+    }
   }
 
-  private handleBackButtonClick() {
-    this.hide();
+  private handleBackButtonClick(e) {
+    e.stopPropagation();
+    setTimeout(() => {
+      this.animationClass = 'slide-out';
+    }, 0);
+    setTimeout(() => {
+      this.hide();
+    }, 350);
+  }
+
+  private handleCloseButtonClick() {
+    this.popoverRef.hide();
   }
 
   render() {
     return (
-      <Host slot="post-mainnavigation">
+      <Host>
+        {this.animationClass}
         <post-popovercontainer placement="bottom" edge-gap="0" ref={el => (this.popoverRef = el)}>
           <div class="megadropdown">
-            <div onClick={() => this.handleBackButtonClick()} class="back-button">
+            <div onClick={e => this.handleBackButtonClick(e)} class="back-button">
               <slot name="back-button"></slot>
             </div>
-            <slot></slot>
+            <div onClick={() => this.handleCloseButtonClick()} class="close-button">
+              <slot name="close-button"></slot>
+            </div>
+            <slot name="megadropdown-title"></slot>
+            <div class="megadropdown-content">
+              <slot></slot>
+            </div>
           </div>
         </post-popovercontainer>
       </Host>
diff --git a/packages/components/src/components/post-megadropdown/readme.md b/packages/components/src/components/post-megadropdown/readme.md
index 532147ae8e..295598dd07 100644
--- a/packages/components/src/components/post-megadropdown/readme.md
+++ b/packages/components/src/components/post-megadropdown/readme.md
@@ -5,50 +5,56 @@
 <!-- Auto Generated Below -->
 
 
+## Events
+
+| Event                | Description                                                                                                                                  | Type                   |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| `toggleMegadropdown` | Emits when the dropdown is shown or hidden. The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed. | `CustomEvent<boolean>` |
+
+
 ## Methods
 
 ### `hide() => Promise<void>`
 
-Hide megadropdown
+Hides the popover dropdown
 
 #### Returns
 
 Type: `Promise<void>`
 
-boolean
 
-### `show(element: HTMLElement) => Promise<void>`
 
-Show megadropdown
+### `show(target: HTMLElement) => Promise<void>`
+
+Displays the popover dropdown
 
 #### Parameters
 
-| Name      | Type          | Description |
-| --------- | ------------- | ----------- |
-| `element` | `HTMLElement` | HTMLElement |
+| Name     | Type          | Description                                                                    |
+| -------- | ------------- | ------------------------------------------------------------------------------ |
+| `target` | `HTMLElement` | - The HTML element relative to which the popover dropdown should be displayed. |
 
 #### Returns
 
 Type: `Promise<void>`
 
-boolean
 
-### `toggle(element: HTMLElement, force?: boolean) => Promise<boolean>`
 
-Toggle megadropdown
+### `toggle(target: HTMLElement) => Promise<void>`
+
+Toggles the dropdown visibility based on its current state.
 
 #### Parameters
 
-| Name      | Type          | Description |
-| --------- | ------------- | ----------- |
-| `element` | `HTMLElement` | HTMLElement |
-| `force`   | `boolean`     | boolean     |
+| Name     | Type          | Description |
+| -------- | ------------- | ----------- |
+| `target` | `HTMLElement` |             |
 
 #### Returns
 
-Type: `Promise<boolean>`
+Type: `Promise<void>`
+
 
-boolean
 
 
 ## Dependencies
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index bf61af6af2..bcae3f4d21 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -16,116 +16,50 @@
     <script nomodule src="/build/post-components.js"></script>
   </head>
   <body style="min-height: 200vh">
-    <post-header>
-      <post-logo>Homepage</post-logo>
-      <ul slot="audience-navigation">
-        <li><a href="">Privatkunden</a></li>
-        <li><a href="">Geschäftskunden</a></li>
-        <li><a href="">Behörden</a></li>
-      </ul>
-      <ul slot="meta-navigation">
-        <li><a href="">Über uns</a></li>
-        <li><a href="">Jobs</a></li>
-      </ul>
-
-      <button slot="post-togglebutton">= Menu</button>
-
-      <ul slot="post-language-switch">
-        <li>
-          <a href="#">DE</a>
-        </li>
-        <li>
-          <a href="#">FR</a>
-        </li>
-        <li>
-          <a href="#">IT</a>
-        </li>
-        <li>
-          <a href="#">EN</a>
-        </li>
-      </ul>
-
-      <h1 slot="title">Application title</h1>
-      <ul>
-        <li><a href="#">Search</a></li>
-        <li><a href="#">Login</a></li>
-      </ul>
-
-      <post-mainnavigation caption="Hauptnavigation">
-        <button slot="back-button"><- Back</button>
-        <post-list>
-          <h2><a href="/privatkunden">Privatkunden</a></h2>
-          <!-- Link only level 1 -->
-          <post-list-item><a href="/briefe">Briefe</a></post-list-item>
-
-          <!-- Level 1 with megadropdown -->
-          <post-list-item>
-            <post-megadropdown-trigger> Briefe </post-megadropdown-trigger>
-            <post-megadropdown>
-              <button slot="back-button"><- Zurück</button>
-              <h2><a href="">Briefe title</a></h2>
-              <post-list>
-                <h3>Briefe senden</h3>
-                <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
-                <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
-                <post-list-item><a href="">Waren Ausland</a></post-list-item>
-                <post-list-item><a href="">Express und Kurier</a></post-list-item>
-              </post-list>
-              <post-list>
-                <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
-                <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
-                <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
-                <post-list-item><a href="">Waren Ausland</a></post-list-item>
-                <post-list-item><a href="">Express und Kurier</a></post-list-item>
-              </post-list>
-              <post-closebutton>Schliessen</post-closebutton>
-            </post-megadropdown>
-          </post-list-item>
-          <post-list-item>
-            <post-megadropdown-trigger> Pakete </post-megadropdown-trigger>
-            <post-megadropdown>
-              <button slot="back-button"><- Zurück</button>
-              <h2><a href="">Pakete title</a></h2>
-              <post-list>
-                <h3>Pakete senden</h3>
-                <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
-                <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
-                <post-list-item><a href="">Waren Ausland</a></post-list-item>
-                <post-list-item><a href="">Express und Kurier</a></post-list-item>
-              </post-list>
-              <post-list>
-                <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
-                <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
-                <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
-                <post-list-item><a href="">Waren Ausland</a></post-list-item>
-                <post-list-item><a href="">Express und Kurier</a></post-list-item>
-              </post-list>
-              <post-closebutton>Schliessen</post-closebutton>
-            </post-megadropdown>
-          </post-list-item>
-        </post-list>
-      </post-mainnavigation>
-    </post-header>
-
-    <h1>Components package playground</h1>
-    <p class="mb-4">
-      Use this playground for quickly developing Stencil web-components. Run
-      <code style="background-color: lightgrey; padding: 0.125rem 0.25rem; border-radius: 0.25rem"
-        >pnpm components:start</code
-      >
-      to get going.
-    </p>
-    <label for="tokens-select">Select tokens package: </label>
-    <select
-      name="tokens"
-      id="tokens-select"
-      value="external"
-      class="mb-4"
-      onchange="if (['external', 'internal'].includes(this.value)) { document.getElementById('tokens').setAttribute('href', `/assets/css/post-tokens-${encodeURIComponent(this.value)}.css`); }"
-    >
-      <option value="external">Post external</option>
-      <option value="internal">Post internal</option>
-    </select>
-    <hr />
+    <post-megadropdown-trigger for="abcd">
+      <button class="btn btn-link">Dropdown trigger</button>
+    </post-megadropdown-trigger>
+    <post-megadropdown id="abcd">
+      <button slot="back-button" class="btn btn-link">
+        <post-icon name="arrowright"></post-icon>
+        Zurück</button>
+      <post-closebutton slot="close-button">Schliessen</post-closebutton>
+      <h2 slot="megadropdown-title">Dropdown title H2</h2>
+      <post-list>
+        <h3><a href="/schritt-für-schritt">Schritt</a></h3>
+        <post-list-item><a href="/sch">Pakete Schweiz super long name how it look slike</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+      <post-list>
+        <h3><a href="/schritt-für-schritt">Schritt für Schritt with a long name on multiple lines</a></h3>
+        <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+      <post-list>
+        <h3><a href="/schritt-für-schritt">Schritt für Schritt with a long name on multiple lines</a></h3>
+        <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+      <post-list>
+        <h3><a href="/schritt-für-schritt">Schritt multiple lines</a></h3>
+        <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+      <post-list>
+        <h3><a href="/schritt-für-schritt">Schritt multiple lines</a></h3>
+        <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+    </post-megadropdown>
   </body>
 </html>

From 6dc3751907a5a1c26e76c9f1aa96d76b898903f1 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Wed, 4 Dec 2024 13:26:08 +0100
Subject: [PATCH 02/16] add animation

---
 .../post-megadropdown/post-megadropdown.scss  | 31 ++++++++++++++++++-
 .../post-megadropdown/post-megadropdown.tsx   | 30 ++++++++++++------
 2 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index b17d09f595..77ed6b97ee 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -1,6 +1,24 @@
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/variables/color';
 
+@keyframes slide-in {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
 *,
 ::before,
 ::after {
@@ -13,13 +31,24 @@ post-popovercontainer {
   border-radius: 0;
 
   @include media.max(lg) {
-    // Overrides floating-ui inline styles on mobile
     position: absolute;
     top: var(--header-height) !important;
     bottom: 0;
     left: 0;
     width: 100%;
     height: auto;
+
+    &.slide-in {
+      animation: slide-in;
+      animation-duration: 350ms;
+      animation-fill-mode: forwards;
+    }
+
+    &.slide-out {
+      animation: slide-out;
+      animation-duration: 350ms;
+      animation-fill-mode: forwards;
+    }
   }
 }
 
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
index 261db4d924..301f8ee166 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
@@ -1,4 +1,14 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  State,
+  forceUpdate,
+} from '@stencil/core';
 
 @Component({
   tag: 'post-megadropdown',
@@ -66,11 +76,9 @@ export class PostMegadropdown {
     }
   }
 
-  private handleBackButtonClick(e) {
-    e.stopPropagation();
-    setTimeout(() => {
-      this.animationClass = 'slide-out';
-    }, 0);
+  private handleBackButtonClick() {
+    this.animationClass = 'slide-out';
+    forceUpdate(this);
     setTimeout(() => {
       this.hide();
     }, 350);
@@ -83,10 +91,14 @@ export class PostMegadropdown {
   render() {
     return (
       <Host>
-        {this.animationClass}
-        <post-popovercontainer placement="bottom" edge-gap="0" ref={el => (this.popoverRef = el)}>
+        <post-popovercontainer
+          class={this.animationClass}
+          placement="bottom"
+          edge-gap="0"
+          ref={el => (this.popoverRef = el)}
+        >
           <div class="megadropdown">
-            <div onClick={e => this.handleBackButtonClick(e)} class="back-button">
+            <div onClick={() => this.handleBackButtonClick()} class="back-button">
               <slot name="back-button"></slot>
             </div>
             <div onClick={() => this.handleCloseButtonClick()} class="close-button">

From 8d7164dcd416ef63ab4ec79d84e4443e6fe12c00 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 9 Dec 2024 09:55:46 +0100
Subject: [PATCH 03/16] Update height of header

---
 .../src/components/post-megadropdown/post-megadropdown.scss  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index 77ed6b97ee..30982a02ee 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -26,11 +26,16 @@
 }
 
 post-popovercontainer {
+  --global-header-height: 72px;
+  --main-header-height: 56px;
+  --header-height: calc(var(--global-header-height) + var(--main-header-height));
+
   background-color: #fafafa;
   width: 100%;
   border-radius: 0;
 
   @include media.max(lg) {
+    --global-header-height: 64px;
     position: absolute;
     top: var(--header-height) !important;
     bottom: 0;

From c81db2ef43c9e25de34e6111955f0d95cffc6a63 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 9 Dec 2024 10:01:24 +0100
Subject: [PATCH 04/16] added changeset

---
 .changeset/gold-news-repair.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gold-news-repair.md

diff --git a/.changeset/gold-news-repair.md b/.changeset/gold-news-repair.md
new file mode 100644
index 0000000000..f10c73d5a3
--- /dev/null
+++ b/.changeset/gold-news-repair.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Added the `post-megadropdown` component.

From 7740eaf17ad786d5acbc8d05783c73c24721f235 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 9 Dec 2024 10:05:28 +0100
Subject: [PATCH 05/16] remove unnecessary code

---
 .../post-megadropdown-trigger.tsx                         | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
index e2662c98a4..4b79c6fe71 100644
--- a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
+++ b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
@@ -54,13 +54,6 @@ export class PostMegadropdownTrigger {
     }
   }
 
-  private handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-      e.preventDefault();
-      this.handleToggle();
-    }
-  };
-
   componentDidLoad() {
     this.root = getRoot(this.host);
     this.validateControlFor();
@@ -71,7 +64,6 @@ export class PostMegadropdownTrigger {
       this.slottedButton.addEventListener('click', () => {
         this.handleToggle();
       });
-      this.slottedButton.addEventListener('keydown', this.handleKeyDown);
     } else {
       console.warn('No button found within post-megadropdown-trigger');
     }

From 17435cbe3e3916397704637a2d59f3cc30c0fa46 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Thu, 12 Dec 2024 15:43:07 +0100
Subject: [PATCH 06/16] updated generated files

---
 packages/components/src/components.d.ts          | 16 ----------------
 .../components/post-language-option/readme.md    | 15 +++++++--------
 .../components/post-language-switch/readme.md    |  1 -
 3 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 2ac3e75fdf..a4c3b5a984 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -218,10 +218,6 @@ export namespace Components {
           * The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
          */
         "code": string;
-        /**
-          * Used on parent component (post-language-switch) to detect elements that are manually added
-         */
-        "generated": boolean;
         /**
           * The full name of the language. For example, "Deutsch".
          */
@@ -248,10 +244,6 @@ export namespace Components {
           * A descriptive text for the list of language options
          */
         "description": string;
-        /**
-          * The name of the language switch, which will be used on the dropdown as an ID
-         */
-        "name": string;
         /**
           * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
          */
@@ -1045,10 +1037,6 @@ declare namespace LocalJSX {
           * The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
          */
         "code": string;
-        /**
-          * Used on parent component (post-language-switch) to detect elements that are manually added
-         */
-        "generated"?: boolean;
         /**
           * The full name of the language. For example, "Deutsch".
          */
@@ -1075,10 +1063,6 @@ declare namespace LocalJSX {
           * A descriptive text for the list of language options
          */
         "description"?: string;
-        /**
-          * The name of the language switch, which will be used on the dropdown as an ID
-         */
-        "name"?: string;
         /**
           * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
          */
diff --git a/packages/components/src/components/post-language-option/readme.md b/packages/components/src/components/post-language-option/readme.md
index 1b9514058f..8aff93a8a1 100644
--- a/packages/components/src/components/post-language-option/readme.md
+++ b/packages/components/src/components/post-language-option/readme.md
@@ -7,14 +7,13 @@
 
 ## Properties
 
-| Property            | Attribute   | Description                                                                                                                                                 | Type                   | Default     |
-| ------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
-| `active`            | `active`    | If set to `true`, the language option is considered the current language for the page.                                                                      | `boolean`              | `undefined` |
-| `code` _(required)_ | `code`      | The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".      | `string`               | `undefined` |
-| `generated`         | `generated` | Used on parent component (post-language-switch) to detect elements that are manually added                                                                  | `boolean`              | `undefined` |
-| `name`              | `name`      | The full name of the language. For example, "Deutsch".                                                                                                      | `string`               | `undefined` |
-| `url`               | `url`       | The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor. | `string`               | `undefined` |
-| `variant`           | `variant`   | The variant of the post-language-switch parent (dynamically set by the parent)                                                                              | `"dropdown" \| "list"` | `undefined` |
+| Property            | Attribute | Description                                                                                                                                                 | Type                   | Default     |
+| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
+| `active`            | `active`  | If set to `true`, the language option is considered the current language for the page.                                                                      | `boolean`              | `undefined` |
+| `code` _(required)_ | `code`    | The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".      | `string`               | `undefined` |
+| `name`              | `name`    | The full name of the language. For example, "Deutsch".                                                                                                      | `string`               | `undefined` |
+| `url`               | `url`     | The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor. | `string`               | `undefined` |
+| `variant`           | `variant` | The variant of the post-language-switch parent (dynamically set by the parent)                                                                              | `"dropdown" \| "list"` | `undefined` |
 
 
 ## Events
diff --git a/packages/components/src/components/post-language-switch/readme.md b/packages/components/src/components/post-language-switch/readme.md
index c2079be7d3..8beb610dfa 100644
--- a/packages/components/src/components/post-language-switch/readme.md
+++ b/packages/components/src/components/post-language-switch/readme.md
@@ -9,7 +9,6 @@
 | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
 | `caption`     | `caption`     | A title for the list of language options                                                                                                                   | `string`               | `undefined` |
 | `description` | `description` | A descriptive text for the list of language options                                                                                                        | `string`               | `undefined` |
-| `name`        | `name`        | The name of the language switch, which will be used on the dropdown as an ID                                                                               | `string`               | `undefined` |
 | `variant`     | `variant`     | Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header) | `"dropdown" \| "list"` | `'list'`    |
 
 

From 0e49ee3864fc13eef47600d9136515370f19a6ba Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Thu, 12 Dec 2024 15:47:05 +0100
Subject: [PATCH 07/16] Updated index and header markup

---
 packages/components/src/index.html            | 26 +++++++++-------
 .../header/components/header.markup.ts        | 30 ++++++++++++-------
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 172bd137c5..9081ac088e 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -66,10 +66,14 @@ <h2>Main Navigation</h2>
 
           <!-- Level 1 with megadropdown -->
           <post-list-item>
-            <post-megadropdown-trigger> Briefe </post-megadropdown-trigger>
-            <post-megadropdown>
-              <button slot="back-button"><- Zurück</button>
-              <h2><a href="">Briefe title</a></h2>
+            <post-megadropdown-trigger for="briefe"> <button class="btn btn-link">Briefe</button> </post-megadropdown-trigger>
+            <post-megadropdown id="briefe">
+              <button slot="back-button" class="btn btn-link">
+                <post-icon name="arrowright"></post-icon>
+                Zurück
+              </button>
+              <post-closebutton slot="close-button">Schliessen</post-closebutton>
+              <h2 slot="megadropdown-title"><a href="">Briefe title</a></h2>
               <post-list>
                 <h3>Briefe senden</h3>
                 <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
@@ -84,14 +88,17 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
                 <post-list-item><a href="">Waren Ausland</a></post-list-item>
                 <post-list-item><a href="">Express und Kurier</a></post-list-item>
               </post-list>
-              <post-closebutton>Schliessen</post-closebutton>
             </post-megadropdown>
           </post-list-item>
           <post-list-item>
-            <post-megadropdown-trigger> Pakete </post-megadropdown-trigger>
-            <post-megadropdown>
-              <button slot="back-button"><- Zurück</button>
-              <h2><a href="">Pakete title</a></h2>
+            <post-megadropdown-trigger for="pakete"> <button class="btn btn-link">Pakete</button> </post-megadropdown-trigger>
+            <post-megadropdown id="pakete">
+              <button slot="back-button" class="btn btn-link">
+                <post-icon name="arrowright"></post-icon>
+                Zurück
+              </button>
+              <post-closebutton slot="close-button">Schliessen</post-closebutton>
+              <h2 slot="megadropdown-title"><a href="">Pakete title</a></h2>
               <post-list>
                 <h3>Pakete senden</h3>
                 <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
@@ -106,7 +113,6 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
                 <post-list-item><a href="">Waren Ausland</a></post-list-item>
                 <post-list-item><a href="">Express und Kurier</a></post-list-item>
               </post-list>
-              <post-closebutton>Schliessen</post-closebutton>
             </post-megadropdown>
           </post-list-item>
         </post-list>
diff --git a/packages/documentation/src/stories/components/header/components/header.markup.ts b/packages/documentation/src/stories/components/header/components/header.markup.ts
index f110177cf7..6b00670d4e 100644
--- a/packages/documentation/src/stories/components/header/components/header.markup.ts
+++ b/packages/documentation/src/stories/components/header/components/header.markup.ts
@@ -49,10 +49,16 @@ export default html`<post-header>
 
       <!-- Level 1 with megadropdown -->
       <post-list-item>
-        <post-megadropdown-trigger> Briefe </post-megadropdown-trigger>
-        <post-megadropdown>
-          <button slot="back-button"><- Zurück</button>
-          <h2><a href="">Briefe title</a></h2>
+        <post-megadropdown-trigger for="briefe">
+          <button class="btn btn-link">Briefe</button>
+        </post-megadropdown-trigger>
+        <post-megadropdown id="briefe">
+          <button slot="back-button" class="btn btn-link">
+            <post-icon name="arrowright"></post-icon>
+            Zurück
+          </button>
+          <post-closebutton slot="close-button">Schliessen</post-closebutton>
+          <h2 slot="megadropdown-title"><a href="">Briefe title</a></h2>
           <post-list>
             <h3>Briefe senden</h3>
             <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
@@ -67,14 +73,19 @@ export default html`<post-header>
             <post-list-item><a href="">Waren Ausland</a></post-list-item>
             <post-list-item><a href="">Express und Kurier</a></post-list-item>
           </post-list>
-          <post-closebutton>Schliessen</post-closebutton>
         </post-megadropdown>
       </post-list-item>
       <post-list-item>
-        <post-megadropdown-trigger> Pakete </post-megadropdown-trigger>
-        <post-megadropdown>
-          <button slot="back-button"><- Zurück</button>
-          <h2><a href="">Pakete title</a></h2>
+        <post-megadropdown-trigger for="pakete">
+          <button class="btn btn-link">Pakete</button>
+        </post-megadropdown-trigger>
+        <post-megadropdown id="pakete">
+          <button slot="back-button" class="btn btn-link">
+            <post-icon name="arrowright"></post-icon>
+            Zurück
+          </button>
+          <post-closebutton slot="close-button">Schliessen</post-closebutton>
+          <h2 slot="megadropdown-title"><a href="">Pakete title</a></h2>
           <post-list>
             <h3>Pakete senden</h3>
             <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
@@ -89,7 +100,6 @@ export default html`<post-header>
             <post-list-item><a href="">Waren Ausland</a></post-list-item>
             <post-list-item><a href="">Express und Kurier</a></post-list-item>
           </post-list>
-          <post-closebutton>Schliessen</post-closebutton>
         </post-megadropdown>
       </post-list-item>
     </post-list>

From bd40eb27b6bd09a1a9afc089b755e18a487188c3 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Fri, 13 Dec 2024 10:55:23 +0100
Subject: [PATCH 08/16] update component with pr review comments

---
 packages/components/src/components.d.ts       |  8 +---
 .../components/post-header/post-header.scss   |  7 +---
 .../post-megadropdown-trigger.tsx             | 15 ++++----
 .../post-megadropdown/post-megadropdown.scss  | 38 ++++++++++++++++---
 .../post-megadropdown/post-megadropdown.tsx   | 25 ++++--------
 .../components/post-megadropdown/readme.md    | 16 ++------
 packages/components/src/index.html            |  4 +-
 7 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index a4c3b5a984..825cf0bec7 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -270,10 +270,6 @@ export namespace Components {
     interface PostMainnavigation {
     }
     interface PostMegadropdown {
-        /**
-          * Hides the popover dropdown
-         */
-        "hide": () => Promise<void>;
         /**
           * Displays the popover dropdown
           * @param target - The HTML element relative to which the popover dropdown should be displayed.
@@ -678,7 +674,7 @@ declare global {
         new (): HTMLPostMainnavigationElement;
     };
     interface HTMLPostMegadropdownElementEventMap {
-        "toggleMegadropdown": boolean;
+        "postToggleMegadropdown": boolean;
     }
     interface HTMLPostMegadropdownElement extends Components.PostMegadropdown, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostMegadropdownElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownElement, ev: PostMegadropdownCustomEvent<HTMLPostMegadropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1096,7 +1092,7 @@ declare namespace LocalJSX {
         /**
           * Emits when the dropdown is shown or hidden. The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
          */
-        "onToggleMegadropdown"?: (event: PostMegadropdownCustomEvent<boolean>) => void;
+        "onPostToggleMegadropdown"?: (event: PostMegadropdownCustomEvent<boolean>) => void;
     }
     interface PostMegadropdownTrigger {
         /**
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index 5879d615d4..50130c0518 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -93,10 +93,6 @@ slot[name='post-logo'] {
   padding-inline: 12px;
   background: white;
   height: var(--main-header-height);
-
-  @include media.max(lg) {
-    border-bottom: 1px solid black;
-  }
 }
 :host(:not(:has([slot='title']))) .title-header {
   display: none;
@@ -124,7 +120,8 @@ slot[name='post-logo'] {
     position: absolute;
     inset-inline: 0;
     inset-block-end: calc(100vh - var(--header-height));
-    transition: transform animation.$transition-time-area-medium animation.$transition-easing-accelerate;
+    transition: transform animation.$transition-time-area-medium
+      animation.$transition-easing-accelerate;
 
     &.extended {
       transform: translateY(100%);
diff --git a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
index 4b79c6fe71..a9d5e32f23 100644
--- a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
+++ b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Prop, h, Host, State, Watch } from '@stencil/core';
 import { version } from '@root/package.json';
-import { checkType, getRoot } from '@/utils';
+import { checkType } from '@/utils';
 
 @Component({
   tag: 'post-megadropdown-trigger',
@@ -25,7 +25,6 @@ export class PostMegadropdownTrigger {
    * Used to manage click and key events for mega dropdown control.
    */
   private slottedButton: HTMLButtonElement | null = null;
-  private root?: Document | ShadowRoot;
 
   /**
    * Watch for changes to the `for` property to validate its type and ensure it is a string.
@@ -37,25 +36,23 @@ export class PostMegadropdownTrigger {
   }
 
   private get megadropdown(): HTMLPostMegadropdownElement | null {
-    const ref = this.root.getElementById(this.for);
+    const ref = document.getElementById(this.for);
     return ref && ref.localName === 'post-megadropdown'
       ? (ref as HTMLPostMegadropdownElement)
       : null;
   }
 
   private handleToggle() {
-    const megadropdown = this.megadropdown;
-    if (megadropdown && this.slottedButton) {
+    if (this.megadropdown && this.slottedButton) {
       this.ariaExpanded = !this.ariaExpanded;
       this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-      megadropdown.toggle(this.host);
+      this.megadropdown.toggle(this.host);
     } else {
       console.warn(`No post-megadropdown found with ID: ${this.for}`);
     }
   }
 
   componentDidLoad() {
-    this.root = getRoot(this.host);
     this.validateControlFor();
 
     this.slottedButton = this.host.querySelector('button');
@@ -72,7 +69,9 @@ export class PostMegadropdownTrigger {
   render() {
     return (
       <Host data-version={version} tab-index="-1">
-        <slot></slot>
+        <button>
+          <slot></slot>
+        </button>
       </Host>
     );
   }
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index 30982a02ee..0926998f82 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -26,18 +26,21 @@
 }
 
 post-popovercontainer {
-  --global-header-height: 72px;
-  --main-header-height: 56px;
-  --header-height: calc(var(--global-header-height) + var(--main-header-height));
+  --post-global-header-height: 72px;
+  --post-main-header-height: 56px;
+  --post-header-height: calc(var(--post-global-header-height) + var(--post-main-header-height));
 
   background-color: #fafafa;
+  border: none;
+  border-top: 1px solid #e1e0dc;
   width: 100%;
   border-radius: 0;
+  box-shadow: 0 8px 6px rgba(0, 0, 0, 16%);
 
   @include media.max(lg) {
-    --global-header-height: 64px;
+    --post-global-header-height: 64px;
     position: absolute;
-    top: var(--header-height) !important;
+    top: var(--post-header-height) !important;
     bottom: 0;
     left: 0;
     width: 100%;
@@ -80,6 +83,13 @@ post-popovercontainer {
     display: none;
     margin-top: 0;
     margin-bottom: 8px;
+    font-weight: 900;
+
+    a {
+      text-decoration: none;
+      font-weight: inherit;
+      border-bottom: 0;
+    }
 
     @include media.max(lg) {
       display: block;
@@ -90,7 +100,7 @@ post-popovercontainer {
   post-list {
     display: grid;
     grid-row: span 2;
-    grid-template-rows: subgrid !important;
+    grid-template-rows: subgrid;
     row-gap: 0px;
 
     > * {
@@ -105,12 +115,22 @@ post-popovercontainer {
       h3 {
         font-size: 20px;
         border-bottom: 1px solid #050400;
+        padding: 15px 12px 14px 0;
+        display: block;
+        font-weight: 900;
 
         a {
           padding: 15px 12px 14px 0;
           text-decoration: none;
           display: block;
           width: 100%;
+          font-size: inherit;
+          display: inline-block;
+          font-weight: inherit;
+          height: unset;
+          padding: 0;
+          border: 0;
+        }
 
           @include media.max(lg) {
             font-size: 16px;
@@ -129,6 +149,8 @@ post-popovercontainer {
       display: block;
       text-decoration: none;
       width: 100%;
+      border-bottom: 0;
+      height: auto;
 
       @include media.max(lg) {
         padding: 12px 12px 11px 0;
@@ -140,6 +162,10 @@ post-popovercontainer {
     display: none;
     margin-bottom: 2rem;
 
+    .btn {
+      width: auto;
+    }
+
     post-icon {
       transform: rotate(180deg);
     }
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
index 301f8ee166..9d3b83ef41 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
@@ -1,14 +1,4 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  h,
-  Host,
-  Method,
-  State,
-  forceUpdate,
-} from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Host, Method, State } from '@stencil/core';
 
 @Component({
   tag: 'post-megadropdown',
@@ -17,7 +7,6 @@ import {
 })
 export class PostMegadropdown {
   private popoverRef: HTMLPostPopovercontainerElement;
-  private animationClass: string | null = null;
 
   @Element() host: HTMLPostMegadropdownElement;
 
@@ -28,16 +17,18 @@ export class PostMegadropdown {
    */
   @State() isVisible: boolean = false;
 
+  @State() animationClass: string | null = null;
+
   /**
    * Emits when the dropdown is shown or hidden.
    * The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
    **/
-  @Event() toggleMegadropdown: EventEmitter<boolean>;
+  @Event() postToggleMegadropdown: EventEmitter<boolean>;
 
   componentDidLoad() {
     this.popoverRef.addEventListener('postToggle', (event: CustomEvent<boolean>) => {
       this.isVisible = event.detail;
-      this.toggleMegadropdown.emit(this.isVisible);
+      this.postToggleMegadropdown.emit(this.isVisible);
     });
   }
 
@@ -67,10 +58,9 @@ export class PostMegadropdown {
   /**
    * Hides the popover dropdown
    */
-  @Method()
-  async hide() {
+  private hide() {
     if (this.popoverRef) {
-      await this.popoverRef.hide();
+      this.popoverRef.hide();
     } else {
       console.error('hide: popoverRef is null or undefined');
     }
@@ -78,7 +68,6 @@ export class PostMegadropdown {
 
   private handleBackButtonClick() {
     this.animationClass = 'slide-out';
-    forceUpdate(this);
     setTimeout(() => {
       this.hide();
     }, 350);
diff --git a/packages/components/src/components/post-megadropdown/readme.md b/packages/components/src/components/post-megadropdown/readme.md
index 295598dd07..368d1a787f 100644
--- a/packages/components/src/components/post-megadropdown/readme.md
+++ b/packages/components/src/components/post-megadropdown/readme.md
@@ -7,23 +7,13 @@
 
 ## Events
 
-| Event                | Description                                                                                                                                  | Type                   |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
-| `toggleMegadropdown` | Emits when the dropdown is shown or hidden. The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed. | `CustomEvent<boolean>` |
+| Event                    | Description                                                                                                                                  | Type                   |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| `postToggleMegadropdown` | Emits when the dropdown is shown or hidden. The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed. | `CustomEvent<boolean>` |
 
 
 ## Methods
 
-### `hide() => Promise<void>`
-
-Hides the popover dropdown
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 ### `show(target: HTMLElement) => Promise<void>`
 
 Displays the popover dropdown
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 9081ac088e..f63f871654 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -66,7 +66,7 @@ <h2>Main Navigation</h2>
 
           <!-- Level 1 with megadropdown -->
           <post-list-item>
-            <post-megadropdown-trigger for="briefe"> <button class="btn btn-link">Briefe</button> </post-megadropdown-trigger>
+            <post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
             <post-megadropdown id="briefe">
               <button slot="back-button" class="btn btn-link">
                 <post-icon name="arrowright"></post-icon>
@@ -91,7 +91,7 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
             </post-megadropdown>
           </post-list-item>
           <post-list-item>
-            <post-megadropdown-trigger for="pakete"> <button class="btn btn-link">Pakete</button> </post-megadropdown-trigger>
+            <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
             <post-megadropdown id="pakete">
               <button slot="back-button" class="btn btn-link">
                 <post-icon name="arrowright"></post-icon>

From 133c4fb4dc85b5ce0a85f1d36dfc0f1aa9ddb1c8 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Fri, 13 Dec 2024 11:17:05 +0100
Subject: [PATCH 09/16] fix merge error

---
 .../post-megadropdown/post-megadropdown.scss  | 69 +++++++++----------
 1 file changed, 34 insertions(+), 35 deletions(-)

diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index 0926998f82..34546d9ece 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -132,56 +132,55 @@ post-popovercontainer {
           border: 0;
         }
 
-          @include media.max(lg) {
-            font-size: 16px;
-            padding: 12px 12px 11px 0;
-          }
+        @include media.max(lg) {
+          font-size: 16px;
+          padding: 12px 12px 11px 0;
         }
       }
     }
   }
+}
 
-  post-list-item {
-    border-bottom: 1px solid #050400;
+post-list-item {
+  border-bottom: 1px solid #050400;
 
-    > a {
-      padding: 13px 12px 12px 0;
-      display: block;
-      text-decoration: none;
-      width: 100%;
-      border-bottom: 0;
-      height: auto;
+  > a {
+    padding: 13px 12px 12px 0;
+    display: block;
+    text-decoration: none;
+    width: 100%;
+    border-bottom: 0;
+    height: auto;
 
-      @include media.max(lg) {
-        padding: 12px 12px 11px 0;
-      }
+    @include media.max(lg) {
+      padding: 12px 12px 11px 0;
     }
   }
+}
 
-  .back-button {
-    display: none;
-    margin-bottom: 2rem;
+.back-button {
+  display: none;
+  margin-bottom: 2rem;
 
-    .btn {
-      width: auto;
-    }
+  .btn {
+    width: auto;
+  }
 
-    post-icon {
-      transform: rotate(180deg);
-    }
+  post-icon {
+    transform: rotate(180deg);
+  }
 
-    @include media.max(lg) {
-      display: block;
-    }
+  @include media.max(lg) {
+    display: block;
   }
+}
 
-  .close-button {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
+.close-button {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
 
-    @include media.max(lg) {
-      display: none;
-    }
+  @include media.max(lg) {
+    display: none;
   }
 }

From e544a4867a3344a9d49d1c9d1d85f705d2b911f7 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Thu, 12 Dec 2024 16:22:04 +0100
Subject: [PATCH 10/16] wip: add documentation for mega dropdown

---
 .../megadropdown/megadropdown.docs.mdx        | 24 +++++++
 .../megadropdown.snapshot.stories.ts          | 23 +++++++
 .../megadropdown/megadropdown.stories.ts      | 63 +++++++++++++++++++
 .../megadropdown/megadropdown.styles.scss     |  4 ++
 4 files changed, 114 insertions(+)
 create mode 100644 packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
 create mode 100644 packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
 create mode 100644 packages/documentation/src/stories/raw-components/megadropdown/megadropdown.styles.scss

diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
new file mode 100644
index 0000000000..c7f398b76b
--- /dev/null
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
@@ -0,0 +1,24 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as megadropdownStories from './megadropdown.stories';
+import './megadropdown.styles.scss';
+
+<Meta of={megadropdownStories} />
+
+<div className="docs-title">
+  # Mega dropdown
+
+  <nav>
+    <link-design of={JSON.stringify(megadropdownStories)}></link-design>
+  </nav>
+</div>
+
+<p className="lead">Enable users to select their preferred language.</p>
+
+<Canvas sourceState="shown" of={megadropdownStories.Default} />
+
+<Controls of={megadropdownStories.Default} />
+
+## Installation
+
+The `<post-language-option>` element is part of the `@swisspost/design-system-components` package.
+For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts
new file mode 100644
index 0000000000..002343e2a6
--- /dev/null
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts
@@ -0,0 +1,23 @@
+import type { StoryContext, StoryObj } from '@storybook/web-components';
+import meta from './megadropdown.stories';
+import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+  decorators: [],
+};
+
+type Story = StoryObj<HTMLPostMegadropdownElement>;
+
+export const Megadropdown: Story = {
+  render: (
+    _args: HTMLPostMegadropdownElement,
+    context: StoryContext<HTMLPostMegadropdownElement>,
+  ) => {
+    return schemes(() => html` ${meta.render?.({ ...context.args }, context)} `);
+  },
+};
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
new file mode 100644
index 0000000000..eeb66ef647
--- /dev/null
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
@@ -0,0 +1,63 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaComponent } from '@root/types';
+import { StoryContext, StoryFn } from '@storybook/web-components';
+
+const meta: MetaComponent<HTMLPostMegadropdownElement> = {
+  id: '212efc4e-875b-4497-912d-d28c6baf32f5',
+  title: 'Raw Components/Megadropdown',
+  tags: ['package:WebComponents'],
+  component: 'post-megadropdown',
+  render: render,
+  decorators: [decorator],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=2908-30413&m=dev',
+    },
+  },
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+
+function decorator(story: StoryFn, context: StoryContext) {
+  return html` <div class="megadropdown-container">${story(context.args, context)}</div> `;
+}
+
+// RENDERERS
+function render() {
+  return html`
+    <post-megadropdown-trigger for="ddd">
+      <button class="btn btn-link">Briefe</button>
+    </post-megadropdown-trigger>
+    <post-megadropdown id="ddd">
+      <button slot="back-button" class="btn btn-link">
+        <post-icon name="arrowright"></post-icon>
+        Zurück
+      </button>
+      <post-closebutton slot="close-button">Schliessen</post-closebutton>
+      <h2 slot="megadropdown-title"><a href="">Briefe title</a></h2>
+      <post-list>
+        <h3>Briefe senden</h3>
+        <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+      <post-list>
+        <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
+        <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
+        <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
+        <post-list-item><a href="">Waren Ausland</a></post-list-item>
+        <post-list-item><a href="">Express und Kurier</a></post-list-item>
+      </post-list>
+    </post-megadropdown>
+  `;
+}
+
+// STORIES
+type Story = StoryObj<HTMLPostLanguageOptionElement>;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.styles.scss b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.styles.scss
new file mode 100644
index 0000000000..8330b54302
--- /dev/null
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.styles.scss
@@ -0,0 +1,4 @@
+.megadropdown-container {
+  position: relative;
+  height: 12rem;
+}

From 7cff72a3564d6c9edcce77a5c836d631ec2e3e76 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 23 Dec 2024 15:53:41 +0100
Subject: [PATCH 11/16] add e2e and fix display of megadropdown trigger

---
 .../components/cypress/e2e/megadropdown.cy.ts | 91 +++++++++++++++++++
 .../megadropdown/megadropdown.docs.mdx        |  3 +-
 .../megadropdown/megadropdown.stories.ts      | 22 +++--
 .../megadropdown/megadropdown.styles.scss     |  4 -
 4 files changed, 105 insertions(+), 15 deletions(-)
 create mode 100644 packages/components/cypress/e2e/megadropdown.cy.ts
 delete mode 100644 packages/documentation/src/stories/raw-components/megadropdown/megadropdown.styles.scss

diff --git a/packages/components/cypress/e2e/megadropdown.cy.ts b/packages/components/cypress/e2e/megadropdown.cy.ts
new file mode 100644
index 0000000000..9bb51c2090
--- /dev/null
+++ b/packages/components/cypress/e2e/megadropdown.cy.ts
@@ -0,0 +1,91 @@
+const MEGADROPDOWN_ID = '212efc4e-875b-4497-912d-d28c6baf32f5';
+
+describe('megadropdown', () => {
+  describe('default', () => {
+    describe('mobile', () => {
+      beforeEach(() => {
+        cy.viewport('iphone-6+');
+        cy.getComponents(
+          MEGADROPDOWN_ID,
+          'default',
+          'post-megadropdown',
+          'post-megadropdown-trigger',
+        );
+        cy.get('@megadropdown').find('.back-button').as('back-btn');
+        cy.get('@megadropdown').find('.close-button').as('close-btn');
+      });
+
+      it('should render', () => {
+        cy.get('@megadropdown').should('exist');
+        cy.get('@megadropdown-trigger').should('exist');
+        cy.get('@megadropdown').should(`be.hidden`);
+      });
+
+      it('should open on trigger click', () => {
+        cy.get('@megadropdown-trigger').should('exist');
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@megadropdown').should(`be.visible`);
+      });
+
+      it('should show back button', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@back-btn').should(`be.visible`);
+      });
+
+      it('should not show close button', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@close-btn').should(`be.hidden`);
+      });
+
+      it('should close on back button click', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@back-btn').click();
+        cy.wait(500);
+        cy.get('@megadropdown').should(`be.hidden`);
+      });
+    });
+
+    describe('desktop', () => {
+      beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.getComponents(
+          MEGADROPDOWN_ID,
+          'default',
+          'post-megadropdown',
+          'post-megadropdown-trigger',
+        );
+        cy.get('@megadropdown').find('.back-button').as('back-btn');
+        cy.get('@megadropdown').find('.close-button').as('close-btn');
+      });
+
+      it('should render', () => {
+        cy.get('@megadropdown').should('exist');
+        cy.get('@megadropdown-trigger').should('exist');
+        cy.get('@megadropdown').should(`be.hidden`);
+      });
+
+      it('should open on trigger click', () => {
+        cy.get('@megadropdown-trigger').should('exist');
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@megadropdown').should(`be.visible`);
+      });
+
+      it('should show close button', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@close-btn').should(`be.visible`);
+      });
+
+      it('should not show back button', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@back-btn').should(`be.hidden`);
+      });
+
+      it('should close on close button click', () => {
+        cy.get('@megadropdown-trigger').click();
+        cy.get('@close-btn').click();
+        cy.wait(500);
+        cy.get('@megadropdown').should(`be.hidden`);
+      });
+    });
+  });
+});
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
index c7f398b76b..13ff9c329d 100644
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
@@ -1,6 +1,5 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as megadropdownStories from './megadropdown.stories';
-import './megadropdown.styles.scss';
 
 <Meta of={megadropdownStories} />
 
@@ -20,5 +19,5 @@ import './megadropdown.styles.scss';
 
 ## Installation
 
-The `<post-language-option>` element is part of the `@swisspost/design-system-components` package.
+The `<post-megadropdown>` element is part of the `@swisspost/design-system-components` package.
 For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
index eeb66ef647..8404240fdb 100644
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
@@ -23,25 +23,29 @@ const meta: MetaComponent<HTMLPostMegadropdownElement> = {
 export default meta;
 
 function decorator(story: StoryFn, context: StoryContext) {
-  return html` <div class="megadropdown-container">${story(context.args, context)}</div> `;
+  return html`
+    <post-mainnavigation>
+      <post-list title-hidden="">
+        <post-list-item> ${story(context.args, context)} </post-list-item>
+      </post-list>
+    </post-mainnavigation>
+  `;
 }
 
 // RENDERERS
 function render() {
   return html`
-    <post-megadropdown-trigger for="ddd">
-      <button class="btn btn-link">Briefe</button>
-    </post-megadropdown-trigger>
-    <post-megadropdown id="ddd">
-      <button slot="back-button" class="btn btn-link">
+    <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
+    <post-megadropdown id="pakete">
+      <button slot="back-button" class="btn btn-tertiary px-0">
         <post-icon name="arrowright"></post-icon>
         Zurück
       </button>
       <post-closebutton slot="close-button">Schliessen</post-closebutton>
-      <h2 slot="megadropdown-title"><a href="">Briefe title</a></h2>
+      <h2 slot="megadropdown-title"><a href="">Pakete title</a></h2>
       <post-list>
-        <h3>Briefe senden</h3>
-        <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
+        <h3>Pakete senden</h3>
+        <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
         <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
         <post-list-item><a href="">Waren Ausland</a></post-list-item>
         <post-list-item><a href="">Express und Kurier</a></post-list-item>
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.styles.scss b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.styles.scss
deleted file mode 100644
index 8330b54302..0000000000
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.styles.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.megadropdown-container {
-  position: relative;
-  height: 12rem;
-}

From edab8879ed3213af1563385f84f768772006ee98 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Mon, 23 Dec 2024 15:55:09 +0100
Subject: [PATCH 12/16] changeset

---
 .changeset/selfish-donuts-rest.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/selfish-donuts-rest.md

diff --git a/.changeset/selfish-donuts-rest.md b/.changeset/selfish-donuts-rest.md
new file mode 100644
index 0000000000..16608722c1
--- /dev/null
+++ b/.changeset/selfish-donuts-rest.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+---
+
+Added documentation and e2e tests for `post-megadropdown` web component.

From 0d922798177394adf8ff9d349243a08e05e8f163 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Tue, 24 Dec 2024 09:15:53 +0100
Subject: [PATCH 13/16] fix preview and lead text

---
 packages/documentation/.storybook/styles/preview.scss         | 3 ++-
 .../stories/raw-components/megadropdown/megadropdown.docs.mdx | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 8e4983d47c..a21d734600 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -61,7 +61,8 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
 
   .sbdocs-content .container {
     // Support for autolink-headings
-    :is(h1, h2, h3, h4, h5, h6) {
+    .docs-title :is(h1, h2, h3, h4, h5, h6),
+    > :is(h1, h2, h3, h4, h5, h6) {
       position: relative;
 
       @media (hover: hover) {
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
index 13ff9c329d..1507cf127d 100644
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.docs.mdx
@@ -11,7 +11,9 @@ import * as megadropdownStories from './megadropdown.stories';
   </nav>
 </div>
 
-<p className="lead">Enable users to select their preferred language.</p>
+<p className="lead">
+  The megadropdown is used within the `post-header` main navigation to display submenus.
+</p>
 
 <Canvas sourceState="shown" of={megadropdownStories.Default} />
 

From d84461a4b5f3b335dd94bb6bd911f32094f516ae Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Tue, 24 Dec 2024 10:04:53 +0100
Subject: [PATCH 14/16] try and fix tests

---
 packages/components/cypress/e2e/megadropdown.cy.ts    |  6 ++++--
 .../megadropdown/megadropdown.snapshot.stories.ts     |  4 ++--
 .../megadropdown/megadropdown.stories.ts              | 11 +++++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/components/cypress/e2e/megadropdown.cy.ts b/packages/components/cypress/e2e/megadropdown.cy.ts
index 9bb51c2090..57fb2ec474 100644
--- a/packages/components/cypress/e2e/megadropdown.cy.ts
+++ b/packages/components/cypress/e2e/megadropdown.cy.ts
@@ -7,7 +7,7 @@ describe('megadropdown', () => {
         cy.viewport('iphone-6+');
         cy.getComponents(
           MEGADROPDOWN_ID,
-          'default',
+          'tests',
           'post-megadropdown',
           'post-megadropdown-trigger',
         );
@@ -24,6 +24,7 @@ describe('megadropdown', () => {
       it('should open on trigger click', () => {
         cy.get('@megadropdown-trigger').should('exist');
         cy.get('@megadropdown-trigger').click();
+        cy.wait(500);
         cy.get('@megadropdown').should(`be.visible`);
       });
 
@@ -50,7 +51,7 @@ describe('megadropdown', () => {
         cy.viewport(1920, 1080);
         cy.getComponents(
           MEGADROPDOWN_ID,
-          'default',
+          'tests',
           'post-megadropdown',
           'post-megadropdown-trigger',
         );
@@ -67,6 +68,7 @@ describe('megadropdown', () => {
       it('should open on trigger click', () => {
         cy.get('@megadropdown-trigger').should('exist');
         cy.get('@megadropdown-trigger').click();
+        cy.wait(500);
         cy.get('@megadropdown').should(`be.visible`);
       });
 
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts
index 002343e2a6..0a181fba8a 100644
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.snapshot.stories.ts
@@ -1,5 +1,5 @@
 import type { StoryContext, StoryObj } from '@storybook/web-components';
-import meta from './megadropdown.stories';
+import meta, { megadropdownDecorator } from './megadropdown.stories';
 import { html } from 'lit';
 import { schemes } from '@/shared/snapshots/schemes';
 
@@ -8,7 +8,7 @@ const { id, ...metaWithoutId } = meta;
 export default {
   ...metaWithoutId,
   title: 'Snapshots',
-  decorators: [],
+  decorators: [megadropdownDecorator],
 };
 
 type Story = StoryObj<HTMLPostMegadropdownElement>;
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
index 8404240fdb..b29381a353 100644
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
@@ -9,7 +9,6 @@ const meta: MetaComponent<HTMLPostMegadropdownElement> = {
   tags: ['package:WebComponents'],
   component: 'post-megadropdown',
   render: render,
-  decorators: [decorator],
   parameters: {
     design: {
       type: 'figma',
@@ -22,7 +21,7 @@ const meta: MetaComponent<HTMLPostMegadropdownElement> = {
 
 export default meta;
 
-function decorator(story: StoryFn, context: StoryContext) {
+export function megadropdownDecorator(story: StoryFn, context: StoryContext) {
   return html`
     <post-mainnavigation>
       <post-list title-hidden="">
@@ -32,7 +31,6 @@ function decorator(story: StoryFn, context: StoryContext) {
   `;
 }
 
-// RENDERERS
 function render() {
   return html`
     <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
@@ -64,4 +62,9 @@ function render() {
 // STORIES
 type Story = StoryObj<HTMLPostLanguageOptionElement>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  decorators: [megadropdownDecorator],
+};
+
+// No decorators on the test page
+export const Tests: Story = {};

From d667c869f40e6a7f3b5e7709d413e00ddb3e8f7c Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Tue, 24 Dec 2024 11:14:29 +0100
Subject: [PATCH 15/16] try and fix tests

---
 packages/components/cypress/e2e/megadropdown.cy.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/cypress/e2e/megadropdown.cy.ts b/packages/components/cypress/e2e/megadropdown.cy.ts
index 57fb2ec474..4ad3d2bf98 100644
--- a/packages/components/cypress/e2e/megadropdown.cy.ts
+++ b/packages/components/cypress/e2e/megadropdown.cy.ts
@@ -30,11 +30,13 @@ describe('megadropdown', () => {
 
       it('should show back button', () => {
         cy.get('@megadropdown-trigger').click();
+        cy.wait(500);
         cy.get('@back-btn').should(`be.visible`);
       });
 
       it('should not show close button', () => {
         cy.get('@megadropdown-trigger').click();
+        cy.wait(500);
         cy.get('@close-btn').should(`be.hidden`);
       });
 
@@ -74,11 +76,13 @@ describe('megadropdown', () => {
 
       it('should show close button', () => {
         cy.get('@megadropdown-trigger').click();
+        cy.wait(500);
         cy.get('@close-btn').should(`be.visible`);
       });
 
       it('should not show back button', () => {
         cy.get('@megadropdown-trigger').click();
+        cy.wait(500);
         cy.get('@back-btn').should(`be.hidden`);
       });
 

From 21597e114cbb88dc87c3b8a4496483d8a3da82c9 Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Fri, 27 Dec 2024 15:34:31 +0100
Subject: [PATCH 16/16] fix tests

---
 .../components/cypress/e2e/megadropdown.cy.ts | 49 ++++++-------------
 .../post-megadropdown/post-megadropdown.tsx   |  2 +-
 2 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/packages/components/cypress/e2e/megadropdown.cy.ts b/packages/components/cypress/e2e/megadropdown.cy.ts
index 4ad3d2bf98..bae52d55fb 100644
--- a/packages/components/cypress/e2e/megadropdown.cy.ts
+++ b/packages/components/cypress/e2e/megadropdown.cy.ts
@@ -2,9 +2,9 @@ const MEGADROPDOWN_ID = '212efc4e-875b-4497-912d-d28c6baf32f5';
 
 describe('megadropdown', () => {
   describe('default', () => {
-    describe('mobile', () => {
+    describe('desktop', () => {
       beforeEach(() => {
-        cy.viewport('iphone-6+');
+        cy.viewport(1920, 1080);
         cy.getComponents(
           MEGADROPDOWN_ID,
           'tests',
@@ -24,33 +24,29 @@ describe('megadropdown', () => {
       it('should open on trigger click', () => {
         cy.get('@megadropdown-trigger').should('exist');
         cy.get('@megadropdown-trigger').click();
-        cy.wait(500);
         cy.get('@megadropdown').should(`be.visible`);
       });
 
-      it('should show back button', () => {
+      it('should show close button', () => {
         cy.get('@megadropdown-trigger').click();
-        cy.wait(500);
-        cy.get('@back-btn').should(`be.visible`);
+        cy.get('@close-btn').should(`be.visible`);
       });
 
-      it('should not show close button', () => {
+      it('should not show back button', () => {
         cy.get('@megadropdown-trigger').click();
-        cy.wait(500);
-        cy.get('@close-btn').should(`be.hidden`);
+        cy.get('@back-btn').should(`be.hidden`);
       });
 
-      it('should close on back button click', () => {
+      it('should close on close button click', () => {
         cy.get('@megadropdown-trigger').click();
-        cy.get('@back-btn').click();
-        cy.wait(500);
+        cy.get('@close-btn').click();
         cy.get('@megadropdown').should(`be.hidden`);
       });
     });
 
-    describe('desktop', () => {
+    describe('mobile', () => {
       beforeEach(() => {
-        cy.viewport(1920, 1080);
+        cy.viewport(500, 1200);
         cy.getComponents(
           MEGADROPDOWN_ID,
           'tests',
@@ -61,36 +57,19 @@ describe('megadropdown', () => {
         cy.get('@megadropdown').find('.close-button').as('close-btn');
       });
 
-      it('should render', () => {
-        cy.get('@megadropdown').should('exist');
-        cy.get('@megadropdown-trigger').should('exist');
-        cy.get('@megadropdown').should(`be.hidden`);
-      });
-
       it('should open on trigger click', () => {
-        cy.get('@megadropdown-trigger').should('exist');
         cy.get('@megadropdown-trigger').click();
-        cy.wait(500);
         cy.get('@megadropdown').should(`be.visible`);
       });
 
-      it('should show close button', () => {
-        cy.get('@megadropdown-trigger').click();
-        cy.wait(500);
-        cy.get('@close-btn').should(`be.visible`);
-      });
-
-      it('should not show back button', () => {
+      it('should show back button', () => {
         cy.get('@megadropdown-trigger').click();
-        cy.wait(500);
-        cy.get('@back-btn').should(`be.hidden`);
+        cy.get('@back-btn').should(`be.visible`);
       });
 
-      it('should close on close button click', () => {
+      it('should not show close button', () => {
         cy.get('@megadropdown-trigger').click();
-        cy.get('@close-btn').click();
-        cy.wait(500);
-        cy.get('@megadropdown').should(`be.hidden`);
+        cy.get('@close-btn').should(`be.hidden`);
       });
     });
   });
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
index 0ccbc975d6..b6ebdcc94e 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
@@ -82,7 +82,7 @@ export class PostMegadropdown {
 
   private handleFocusout(event: FocusEvent) {
     const relatedTarget = event.relatedTarget as HTMLElement;
-    const megadropdown= this.popoverRef.querySelector('.megadropdown');
+    const megadropdown = this.popoverRef.querySelector('.megadropdown');
     if (!megadropdown.contains(relatedTarget)) {
       this.hide();
     }