feat(components): enable shadow DOM for the post-megadropdown

Author: alizedebray

packages/components-angular/projects/consumer-app/src/app/app.component.html

@@ -80,9 +80,9 @@
       <!-- Level 1 with megadropdown -->
       @for (dropdown of megadropdowns; track dropdown.id) {
         <li>
-          <post-megadropdown-trigger [for]="dropdown.id">{{
-            dropdown.trigger
-          }}</post-megadropdown-trigger>
+          <post-megadropdown-trigger [for]="dropdown.id">
+            <button>{{ dropdown.trigger }}</button>
+          </post-megadropdown-trigger>
           <post-megadropdown [id]="dropdown.id" labelClose="Close" labelBack="Back">
             <a class="megadropdown-overview-link" [href]="dropdown.overviewLink"
             >Overview {{ dropdown.trigger }}</a

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

@@ -124,8 +124,8 @@ describe('header', () => {
       cy.get('post-megadropdown#letters a[href="/kl"]').first().as('lettersSecondLink');
       cy.get('post-megadropdown#packages a[href="/sch"]').first().as('packagesLink');
 
-      cy.get('post-megadropdown-trigger button').first().as('lettersTrigger');
-      cy.get('post-megadropdown-trigger button').eq(1).as('packagesTrigger');
+      cy.get('post-megadropdown-trigger button:not([inert])').first().as('lettersTrigger');
+      cy.get('post-megadropdown-trigger button:not([inert])').eq(1).as('packagesTrigger');
 
       // Activate first link
       cy.get('@lettersFirstLink').then($link => $link.attr('aria-current', 'page'));

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

@@ -42,7 +42,7 @@ describe('mainnavigation', { baseUrl: null, includeShadowDom: true }, () => {
       cy.get('post-mainnavigation[data-hydrated]').as('mainnavigation');
 
       cy.get('@mainnavigation')
-        .find(':is(a,button):not(post-megadropdown *)')
+        .find(':is(a,button):not([inert], post-megadropdown *)')
         .should('have.length', 20)
         .as('navigationItems');
 

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

@@ -69,7 +69,9 @@
       <post-mainnavigation slot="main-nav" caption="Haupt">
         <ul>
           <li>
-            <post-megadropdown-trigger for="item-1">Item 1</post-megadropdown-trigger>
+            <post-megadropdown-trigger for="item-1">
+              <button>Item 1</button>
+            </post-megadropdown-trigger>
             <post-megadropdown id="item-1" label-close="Schliessen" label-back="Back">
               <a class="megadropdown-overview-link" href="/briefe">Übersicht Briefe</a>
               <post-list>
@@ -122,7 +124,9 @@
           <li><a href="/item-19">Item 19</a></li>
 
           <li>
-            <post-megadropdown-trigger for="item-20">Item 20</post-megadropdown-trigger>
+            <post-megadropdown-trigger for="item-20">
+              <button>Item 20</button>
+            </post-megadropdown-trigger>
             <post-megadropdown id="item-20" label-close="Schliessen" label-back="Back">
               <a class="megadropdown-overview-link" href="/pakete">Übersicht Pakete</a>
               <post-list>

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

@@ -74,7 +74,9 @@
 
           <!-- Level 1 with megadropdown -->
           <li>
-            <post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
+            <post-megadropdown-trigger for="briefe">
+              <button>Briefe</button>
+            </post-megadropdown-trigger>
             <post-megadropdown id="briefe" label-close="Schliessen" label-back="Back">
               <a class="megadropdown-overview-link" href="/briefe">Übersicht Briefe</a>
               <post-list>
@@ -94,7 +96,9 @@
             </post-megadropdown>
           </li>
           <li>
-            <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
+            <post-megadropdown-trigger for="pakete">
+              <button>Pakete</button>
+            </post-megadropdown-trigger>
             <post-megadropdown id="pakete" label-close="Schliessen" label-back="Back">
               <a class="megadropdown-overview-link" href="/pakete">Übersicht Pakete</a>
               <post-list>

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

@@ -28,10 +28,8 @@ some content
  - [post-breadcrumbs](../post-breadcrumbs)
  - [post-card-control](../post-card-control)
  - [post-closebutton](../post-closebutton)
- - [post-language-menu](../post-language-menu)
  - [post-mainnavigation](../post-mainnavigation)
  - [post-megadropdown](../post-megadropdown)
- - [post-megadropdown-trigger](../post-megadropdown-trigger)
  - [post-pagination](../post-pagination)
  - [post-rating](../post-rating)
 
@@ -44,10 +42,8 @@ graph TD;
   post-breadcrumbs --> post-icon
   post-card-control --> post-icon
   post-closebutton --> post-icon
-  post-language-menu --> post-icon
   post-mainnavigation --> post-icon
   post-megadropdown --> post-icon
-  post-megadropdown-trigger --> post-icon
   post-pagination --> post-icon
   post-rating --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px

packages/components/src/components/post-language-menu/post-language-menu.tsx

@@ -132,10 +132,13 @@ export class PostLanguageMenu {
             {this.activeLang}
             <span class="visually-hidden">{this.caption}</span>
             <span class="visually-hidden">{this.description}</span>
-            <post-icon aria-hidden="true" name="chevrondown"></post-icon>
           </button>
         </post-menu-trigger>
-        <post-menu id={this.menuId} class="post-language-menu-dropdown-container" label={this.caption}>
+        <post-menu
+          id={this.menuId}
+          class="post-language-menu-dropdown-container"
+          label={this.caption}
+        >
           <slot></slot>
         </post-menu>
       </Host>

packages/components/src/components/post-language-menu/readme.md

@@ -17,14 +17,12 @@
 ### Depends on
 
 - [post-menu-trigger](../post-menu-trigger)
-- [post-icon](../post-icon)
 - [post-menu](../post-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   post-language-menu --> post-menu-trigger
-  post-language-menu --> post-icon
   post-language-menu --> post-menu
   post-menu --> post-popovercontainer
   style post-language-menu fill:#f9f,stroke:#333,stroke-width:4px

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

@@ -48,7 +48,6 @@ export class PostMainnavigation {
     this.validateCaption();
 
     setTimeout(() => {
-      this.fixLayoutShift();
       this.checkScrollability();
     });
 
@@ -92,28 +91,13 @@ export class PostMainnavigation {
       ),
     );
 
-    this.fixLayoutShift();
     this.checkScrollability();
   }
 
   private get navigationItems(): HTMLElement[] {
     return Array.from(this.host.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
   }
 
-  /**
-   * Hack to fix the layout shift due to bold text on active elements
-   */
-  private fixLayoutShift() {
-    this.navigationItems
-      .filter(item => !item.matches(':has(.shown-when-inactive)'))
-      .forEach(item => {
-        item.innerHTML = `
-          <span class="shown-when-inactive" aria-hidden="true">${item.innerHTML}</span>
-          ${item.innerHTML}
-        `;
-      });
-  }
-
   /**
    * Returns whether scrolling is enabled in either the left or right direction.
    */

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

@@ -1,17 +1,28 @@
 @use '@swisspost/design-system-styles/mixins/media';
-@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
 
-post-megadropdown-trigger {
-  width: 100%;
+:host {
   position: relative;
+  display: inline-block;
+}
+
+// On desktop, we need an inert button to stabilize layout.
+// This prevents layout shifts caused by the real button toggling between normal and bold font-weights.
+@include media.only(desktop) {
+  // The inert button provides size to the host but stays invisible.
+  ::slotted(button[inert]) {
+    visibility: hidden !important;
+  }
 
-  button {
-    @include header-mx.nav-item-rotating-chevron;
+  // The interactive button is positioned on top of the inert one and adopts the same height and width.
+  ::slotted(button:not([inert], :only-child)) {
+    position: absolute !important;
+    inset: 0 !important;
+  }
+}
 
-    @include media.max(desktop) {
-      post-icon {
-        transform: rotate(-90deg);
-      }
-    }
+// On mobile, the font-weight does not change so the inert button is unnecessary.
+@include media.max(desktop) {
+  ::slotted(button[inert]) {
+    display: none !important;
   }
 }