Merge branch 'main' into feat/3461-component-footer

.changeset/gold-news-repair.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Added the `post-megadropdown` component.

packages/components/src/components.d.ts

@@ -281,25 +281,20 @@ export namespace Components {
     }
     interface PostMegadropdown {
         /**
-          * Hide megadropdown
-          * @returns boolean
+          * Displays the popover dropdown
+          * @param target - The HTML element relative to which the popover dropdown should be displayed.
          */
-        "hide": () => Promise<void>;
-        /**
-          * Show megadropdown
-          * @param element HTMLElement
-          * @returns boolean
-         */
-        "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 {
         /**
@@ -497,9 +492,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;
@@ -694,25 +689,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 {
+        "postToggleMegadropdown": 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;
@@ -1117,12 +1112,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.
+         */
+        "onPostToggleMegadropdown"?: (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 {
         /**

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>

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

@@ -17,7 +17,10 @@
     display: block;
     position: sticky;
     inset-inline: 0;
-    inset-block-start: calc(-1 * (var(--global-header-height) + var(--main-header-height) - var(--global-header-minimal-height)));
+    inset-block-start: calc(
+      -1 * (var(--global-header-height) + var(--main-header-height) -
+            var(--global-header-minimal-height))
+    );
     box-shadow: var(--post-core-elevation-3);
   }
 
@@ -98,7 +101,8 @@ slot[name='post-logo'] {
   background: var(--post-core-color-brand-white);
 
   @include media.min(lg) {
-    padding: var(--post-core-dimension-18) var(--post-core-dimension-16) var(--post-core-dimension-4) var(--post-core-dimension-12);
+    padding: var(--post-core-dimension-18) var(--post-core-dimension-16)
+      var(--post-core-dimension-4) var(--post-core-dimension-12);
   }
 
   @include media.max(lg) {

packages/components/src/components/post-icon/readme.md

@@ -25,6 +25,7 @@ some content
  - [post-accordion-item](../post-accordion-item)
  - [post-back-to-top](../post-back-to-top)
  - [post-banner](../post-banner)
+ - [post-breadcrumb-item](../post-breadcrumb-item)
  - [post-card-control](../post-card-control)
  - [post-closebutton](../post-closebutton)
  - [post-language-switch](../post-language-switch)
@@ -37,6 +38,7 @@ graph TD;
   post-accordion-item --> post-icon
   post-back-to-top --> post-icon
   post-banner --> post-icon
+  post-breadcrumb-item --> post-icon
   post-card-control --> post-icon
   post-closebutton --> post-icon
   post-language-switch --> post-icon

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

@@ -11,18 +11,19 @@ $nav-height: var(--post-core-dimension-56);
 post-mainnavigation {
   // reset links and buttons
   post-list-item {
-    a {
+    > a {
       text-decoration: none;
       border-radius: 0;
     }
 
-    button {
+    post-megadropdown-trigger button {
       @include button.reset-button;
       text-align: start;
     }
 
-    a,
-    button {
+    > a,
+    > button,
+    post-megadropdown-trigger button {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -50,16 +51,17 @@ post-mainnavigation {
     post-list {
       margin-inline: var(--post-core-dimension-4);
 
-      > [role="list"] {
+      > [role='list'] {
         flex-direction: row;
         max-width: 100vw;
         transition: transform animation.$transition-base-timing;
       }
     }
 
     post-list-item {
-      a,
-      button {
+      > a,
+      > button,
+      post-megadropdown-trigger button {
         padding-inline: var(--post-core-dimension-12);
         height: $nav-height;
         gap: var(--post-core-dimension-4);
@@ -78,7 +80,8 @@ post-mainnavigation {
       }
 
       // styles specific to for the mega-dropdown buttons
-      button {
+      > button,
+      post-megadropdown-trigger button {
         padding-inline-end: var(--post-core-dimension-12);
         transition: border-block-end-color animation.$transition-base-timing;
 
@@ -96,20 +99,21 @@ post-mainnavigation {
       }
     }
 
-    [slot="back-button"] {
+    [slot='back-button'] {
       display: none;
     }
   }
 
   // tablet/mobile styles
   @include media.max(lg) {
-    post-list > [role="list"] {
+    post-list > [role='list'] {
       transform: none !important;
     }
 
     post-list-item {
-      a,
-      button {
+      > a,
+      > button,
+      post-megadropdown-trigger button {
         @include header-mx.mobile-header-interactive;
       }
     }

packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss

@@ -1,3 +1,3 @@
-:host {
-  display: inline-block;
+post-megadropdown-trigger {
+  width: 100%;
 }

packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx

@@ -1,27 +1,75 @@
-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 } 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;
+
+  /**
+   * 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 = document.getElementById(this.for);
+    return ref && ref.localName === 'post-megadropdown'
+      ? (ref as HTMLPostMegadropdownElement)
+      : null;
+  }
+
+  private handleToggle() {
+    if (this.megadropdown && this.slottedButton) {
+      this.ariaExpanded = !this.ariaExpanded;
+      this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+      this.megadropdown.toggle(this.host);
+    } else {
+      console.warn(`No post-megadropdown found with ID: ${this.for}`);
+    }
+  }
+
+  componentDidLoad() {
+    this.validateControlFor();
+
+    this.slottedButton = this.host.querySelector('button');
+    if (this.slottedButton) {
+      this.slottedButton.setAttribute('aria-haspopup', 'menu');
+      this.slottedButton.addEventListener('click', () => {
+        this.handleToggle();
+      });
+    } 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()}>
+      <Host data-version={version} tab-index="-1">
+        <button>
           <slot></slot>
         </button>
       </Host>

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` |
 
 
 ----------------------------------------------