@swisspost/design-system-components 9.0.0-next.27 → 9.0.0-next.29

package/dist/cjs/{post-togglebutton-4f3e0976.js → post-togglebutton-6c99f2a8.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-d6bf2c66.js');
-const _package = require('./package-9cf8a0c0.js');
+const _package = require('./package-4af5d3ea.js');
 const slide = require('./slide-cd1f09b3.js');
 const index$1 = require('./index-23e36ff7.js');
 const checkNonEmpty = require('./check-non-empty-bd99d236.js');
@@ -192,13 +192,6 @@ const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:10
 const PostHeaderStyle0 = postHeaderCss;
 
 const PostHeader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.postUpdateDevice = index.createEvent(this, "postUpdateDevice", 7);
-        this.device = null;
-        this.mobileMenuExtended = false;
-        this.megadropdownOpen = false;
-    }
     firstFocusableEl;
     lastFocusableEl;
     mobileMenu;
@@ -226,58 +219,76 @@ const PostHeader = class {
         if (isMobileMenuExtended) {
             scrollParent.setAttribute('data-is-post-header-scroll-parent', '');
             scrollParent.style.overflow = 'hidden';
-            this.host.addEventListener('keydown', this.keyboardHandler.bind(this));
+            this.host.addEventListener('keydown', this.keyboardHandler);
         }
         else {
             scrollParent.style.overflow = '';
             scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-            this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
+            this.host.removeEventListener('keydown', this.keyboardHandler);
         }
     }
     /**
      * An event emitted when the device has changed
      */
     postUpdateDevice;
-    componentWillRender() {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postUpdateDevice = index.createEvent(this, "postUpdateDevice", 7);
+        this.device = null;
+        this.mobileMenuExtended = false;
+        this.megadropdownOpen = false;
+        this.handleScrollEvent = this.handleScrollEvent.bind(this);
+        this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
+        this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
+        this.megedropdownStateHandler = this.megedropdownStateHandler.bind(this);
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleLinkClick = this.handleLinkClick.bind(this);
+    }
+    connectedCallback() {
         window.addEventListener('resize', this.throttledResize, { passive: true });
-        window.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+        window.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
-        this.scrollParent.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+        this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
+        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        this.host.addEventListener('click', this.handleLinkClick);
+        this.frozeBody(false);
         this.handleResize();
         this.handleScrollEvent();
+        this.handleScrollParentResize();
+    }
+    componentDidRender() {
         this.getFocusableElements();
+        this.handleLocalHeaderResize();
     }
     componentDidLoad() {
         // Check if the mega dropdown is expanded
-        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
-        this.host.addEventListener('click', this.handleLinkClick.bind(this));
-        this.handleScrollParentResize();
-        this.handleLocalHeaderResize();
     }
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
         const scrollParent = this.scrollParent;
         window.removeEventListener('resize', this.throttledResize);
-        window.removeEventListener('scroll', this.handleScrollEvent.bind(this));
-        scrollParent.removeEventListener('scroll', this.handleScrollEvent.bind(this));
-        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
-        this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
-        this.host.removeEventListener('click', this.handleLinkClick.bind(this));
-        if (this.scrollParentResizeObserver)
+        window.removeEventListener('scroll', this.handleScrollEvent);
+        scrollParent.removeEventListener('scroll', this.handleScrollEvent);
+        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        this.host.removeEventListener('click', this.handleLinkClick);
+        if (this.scrollParentResizeObserver) {
             this.scrollParentResizeObserver.disconnect();
-        if (this.localHeaderResizeObserver)
+            this.scrollParentResizeObserver = null;
+        }
+        if (this.localHeaderResizeObserver) {
             this.localHeaderResizeObserver.disconnect();
+            this.localHeaderResizeObserver = null;
+        }
         this.mobileMenuExtended = false;
-        scrollParent.style.overflow = '';
-        scrollParent.removeAttribute('data-is-post-header-scroll-parent');
     }
     /**
      * Toggles the mobile navigation.
      */
-    async toggleMobileMenu() {
+    async toggleMobileMenu(force) {
         if (this.device === 'desktop')
             return;
         this.mobileMenuAnimation = this.mobileMenuExtended
@@ -285,11 +296,11 @@ const PostHeader = class {
             : slide.slideDown(this.mobileMenu);
         // Update the state of the toggle button
         const menuButton = this.host.querySelector('post-togglebutton');
-        menuButton.toggled = !this.mobileMenuExtended;
+        menuButton.toggled = force ?? !this.mobileMenuExtended;
         // Toggle menu visibility before it slides down and after it slides back up
         if (this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
-        this.mobileMenuExtended = !this.mobileMenuExtended;
+        this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
         if (!this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
     }
@@ -344,7 +355,7 @@ const PostHeader = class {
             return;
         }
         if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
-            this.toggleMobileMenu();
+            this.toggleMobileMenu(false);
         }
         if (this.device === 'desktop' && isLinkInMegadropdown) {
             const megadropdownLink = target.closest('post-megadropdown a');
@@ -382,14 +393,14 @@ const PostHeader = class {
     }
     handleScrollParentResize() {
         if (this.scrollParent) {
-            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight.bind(this));
+            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
             this.scrollParentResizeObserver.observe(this.scrollParent);
         }
     }
     handleLocalHeaderResize() {
         const localHeader = this.host.shadowRoot.querySelector('.local-header');
-        if (localHeader) {
-            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight.bind(this));
+        if (localHeader && !this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
             this.localHeaderResizeObserver.observe(localHeader);
         }
     }
@@ -410,7 +421,7 @@ const PostHeader = class {
         return (index.h("div", { class: navigationClasses.join(' ') }, index.h("div", { ref: el => (this.mobileMenu = el) }, index.h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (index.h("div", { class: "navigation-footer" }, index.h("slot", { name: "meta-navigation" }), index.h("slot", { name: "post-language-switch" }))))));
     }
     render() {
-        return (index.h(index.Host, { key: '866b6378652ff5860c8b046f249411941e3510ca', version: _package.version }, index.h("div", { key: '4f834e011faf12f0e9629c442172153a5d710f6a', class: "global-header" }, index.h("div", { key: '16acea9aa91b071f4ee25b00e19a0d23f5765ffa', class: "global-sub" }, index.h("div", { key: '1aea872a00166aeada3538f25c8d5b1afb0595a5', class: "logo" }, index.h("slot", { key: '343ed3f016295d025196841260fc501795f211ec', name: "post-logo" }))), index.h("div", { key: '47e2d3df5973d8cf542051c9da6b2b7f077d202c', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '2000cf588d06f28b1d25bca60842d05e01635e7c', name: "meta-navigation" }), index.h("slot", { key: '40d62c75e080bbee36b4a5f75ee0d6a727b0153a', name: "global-controls" }), this.device === 'desktop' && index.h("slot", { key: '531b27a3332a6f91491b0e04efce42037edf7384', name: "post-language-switch" }), index.h("div", { key: '427b869f050400509ec17b1ed8aa539a3efb8fef', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '3d824c0b31cc55f4279944e02c4fa3f26bce9b7e', name: "post-togglebutton" })))), index.h("div", { key: 'bd23ea8c42abf93d343f4579b1a433d7224a3631', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, index.h("slot", { key: '25ee29386c66395371dd1fa7c61794fefc220b85', name: "title" }), index.h("div", { key: 'e8b11280d2664a8d19935fe7fc095830d0ff4a1c', class: "local-sub" }, index.h("slot", { key: 'af10ad2f82146d10af525dd6a83871f428d09953', name: "local-controls" }), index.h("slot", { key: '311f3b2ef20794fae57d8354bd4a06552e90703e' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (index.h(index.Host, { key: '9cf9cfd3c09958b60be5492f226766098aa4c3fb', version: _package.version }, index.h("div", { key: '11eff51b1d3b5da81af282b12d7c621d9d389dd0', class: "global-header" }, index.h("div", { key: 'e80d3e7726329c6902f414fd6d74f3d74f54e8ca', class: "global-sub" }, index.h("div", { key: '9c7fad8991432ca8f23193566285cb6948a9efbd', class: "logo" }, index.h("slot", { key: 'cd993961cc68757155a6408f9a1ce903cf64bb98', name: "post-logo" }))), index.h("div", { key: '0ebe23b40ed941eb743caaa68767c1e8dbab6f9e', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: 'e972a93266f2240e1f66248c8f00fcc9fafd6b8c', name: "meta-navigation" }), index.h("slot", { key: '5ddac1faa808b043705e9f8d654b6610e230484b', name: "global-controls" }), this.device === 'desktop' && index.h("slot", { key: '86dec5106e34b14cbc6f5fa5c7cac98e0a571ef4', name: "post-language-switch" }), index.h("div", { key: '5eb98bbabfaa86c20974c9ede677bf31aa1afbc7', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '3a35856948852d880be939b6f66b5c38e921c19a', name: "post-togglebutton" })))), index.h("div", { key: 'e2749e94aad4b6174b28dbab5d64c6bc2bd614ca', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, index.h("slot", { key: 'e767a608ecca1199554c25f86188ca3d74ec1f95', name: "title" }), index.h("div", { key: 'bedb62571e462b89948fafa319faa5937fc6b8c3', class: "local-sub" }, index.h("slot", { key: '2e051bd52a90b8f806ca3caaec2ed67c16f887f0', name: "local-controls" }), index.h("slot", { key: '5d1dc41591db297b1d4c9e1622fad2ac5376de87' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get watchers() { return {
         "mobileMenuExtended": ["frozeBody"]

package/dist/cjs/{post-tooltip-bae7ee46.js → post-tooltip-3d847af6.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-d6bf2c66.js');
-const _package = require('./package-9cf8a0c0.js');
+const _package = require('./package-4af5d3ea.js');
 const attributeObserver = require('./attribute-observer-6d8b886b.js');
 const index$1 = require('./index-23e36ff7.js');
 

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-bae7ee46.js');
+const postTooltip = require('./post-tooltip-3d847af6.js');
 require('./index-d6bf2c66.js');
-require('./package-9cf8a0c0.js');
+require('./package-4af5d3ea.js');
 require('./attribute-observer-6d8b886b.js');
 require('./index-23e36ff7.js');
 require('./constants-238701d3.js');

package/dist/collection/components/post-header/post-header.js

@@ -13,11 +13,6 @@ import { getFocusableChildren } from "../../utils/get-focusable-children";
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
  */
 export class PostHeader {
-    constructor() {
-        this.device = null;
-        this.mobileMenuExtended = false;
-        this.megadropdownOpen = false;
-    }
     firstFocusableEl;
     lastFocusableEl;
     mobileMenu;
@@ -45,58 +40,74 @@ export class PostHeader {
         if (isMobileMenuExtended) {
             scrollParent.setAttribute('data-is-post-header-scroll-parent', '');
             scrollParent.style.overflow = 'hidden';
-            this.host.addEventListener('keydown', this.keyboardHandler.bind(this));
+            this.host.addEventListener('keydown', this.keyboardHandler);
         }
         else {
             scrollParent.style.overflow = '';
             scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-            this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
+            this.host.removeEventListener('keydown', this.keyboardHandler);
         }
     }
     /**
      * An event emitted when the device has changed
      */
     postUpdateDevice;
-    componentWillRender() {
+    constructor() {
+        this.device = null;
+        this.mobileMenuExtended = false;
+        this.megadropdownOpen = false;
+        this.handleScrollEvent = this.handleScrollEvent.bind(this);
+        this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
+        this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
+        this.megedropdownStateHandler = this.megedropdownStateHandler.bind(this);
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleLinkClick = this.handleLinkClick.bind(this);
+    }
+    connectedCallback() {
         window.addEventListener('resize', this.throttledResize, { passive: true });
-        window.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+        window.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
-        this.scrollParent.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+        this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
+        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        this.host.addEventListener('click', this.handleLinkClick);
+        this.frozeBody(false);
         this.handleResize();
         this.handleScrollEvent();
+        this.handleScrollParentResize();
+    }
+    componentDidRender() {
         this.getFocusableElements();
+        this.handleLocalHeaderResize();
     }
     componentDidLoad() {
         // Check if the mega dropdown is expanded
-        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
-        this.host.addEventListener('click', this.handleLinkClick.bind(this));
-        this.handleScrollParentResize();
-        this.handleLocalHeaderResize();
     }
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
         const scrollParent = this.scrollParent;
         window.removeEventListener('resize', this.throttledResize);
-        window.removeEventListener('scroll', this.handleScrollEvent.bind(this));
-        scrollParent.removeEventListener('scroll', this.handleScrollEvent.bind(this));
-        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
-        this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
-        this.host.removeEventListener('click', this.handleLinkClick.bind(this));
-        if (this.scrollParentResizeObserver)
+        window.removeEventListener('scroll', this.handleScrollEvent);
+        scrollParent.removeEventListener('scroll', this.handleScrollEvent);
+        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        this.host.removeEventListener('click', this.handleLinkClick);
+        if (this.scrollParentResizeObserver) {
             this.scrollParentResizeObserver.disconnect();
-        if (this.localHeaderResizeObserver)
+            this.scrollParentResizeObserver = null;
+        }
+        if (this.localHeaderResizeObserver) {
             this.localHeaderResizeObserver.disconnect();
+            this.localHeaderResizeObserver = null;
+        }
         this.mobileMenuExtended = false;
-        scrollParent.style.overflow = '';
-        scrollParent.removeAttribute('data-is-post-header-scroll-parent');
     }
     /**
      * Toggles the mobile navigation.
      */
-    async toggleMobileMenu() {
+    async toggleMobileMenu(force) {
         if (this.device === 'desktop')
             return;
         this.mobileMenuAnimation = this.mobileMenuExtended
@@ -104,11 +115,11 @@ export class PostHeader {
             : slideDown(this.mobileMenu);
         // Update the state of the toggle button
         const menuButton = this.host.querySelector('post-togglebutton');
-        menuButton.toggled = !this.mobileMenuExtended;
+        menuButton.toggled = force ?? !this.mobileMenuExtended;
         // Toggle menu visibility before it slides down and after it slides back up
         if (this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
-        this.mobileMenuExtended = !this.mobileMenuExtended;
+        this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
         if (!this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
     }
@@ -163,7 +174,7 @@ export class PostHeader {
             return;
         }
         if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
-            this.toggleMobileMenu();
+            this.toggleMobileMenu(false);
         }
         if (this.device === 'desktop' && isLinkInMegadropdown) {
             const megadropdownLink = target.closest('post-megadropdown a');
@@ -201,14 +212,14 @@ export class PostHeader {
     }
     handleScrollParentResize() {
         if (this.scrollParent) {
-            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight.bind(this));
+            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
             this.scrollParentResizeObserver.observe(this.scrollParent);
         }
     }
     handleLocalHeaderResize() {
         const localHeader = this.host.shadowRoot.querySelector('.local-header');
-        if (localHeader) {
-            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight.bind(this));
+        if (localHeader && !this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
             this.localHeaderResizeObserver.observe(localHeader);
         }
     }
@@ -229,7 +240,7 @@ export class PostHeader {
         return (h("div", { class: navigationClasses.join(' ') }, h("div", { ref: el => (this.mobileMenu = el) }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))))));
     }
     render() {
-        return (h(Host, { key: '866b6378652ff5860c8b046f249411941e3510ca', version: version }, h("div", { key: '4f834e011faf12f0e9629c442172153a5d710f6a', class: "global-header" }, h("div", { key: '16acea9aa91b071f4ee25b00e19a0d23f5765ffa', class: "global-sub" }, h("div", { key: '1aea872a00166aeada3538f25c8d5b1afb0595a5', class: "logo" }, h("slot", { key: '343ed3f016295d025196841260fc501795f211ec', name: "post-logo" }))), h("div", { key: '47e2d3df5973d8cf542051c9da6b2b7f077d202c', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '2000cf588d06f28b1d25bca60842d05e01635e7c', name: "meta-navigation" }), h("slot", { key: '40d62c75e080bbee36b4a5f75ee0d6a727b0153a', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '531b27a3332a6f91491b0e04efce42037edf7384', name: "post-language-switch" }), h("div", { key: '427b869f050400509ec17b1ed8aa539a3efb8fef', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '3d824c0b31cc55f4279944e02c4fa3f26bce9b7e', name: "post-togglebutton" })))), h("div", { key: 'bd23ea8c42abf93d343f4579b1a433d7224a3631', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '25ee29386c66395371dd1fa7c61794fefc220b85', name: "title" }), h("div", { key: 'e8b11280d2664a8d19935fe7fc095830d0ff4a1c', class: "local-sub" }, h("slot", { key: 'af10ad2f82146d10af525dd6a83871f428d09953', name: "local-controls" }), h("slot", { key: '311f3b2ef20794fae57d8354bd4a06552e90703e' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: '9cf9cfd3c09958b60be5492f226766098aa4c3fb', version: version }, h("div", { key: '11eff51b1d3b5da81af282b12d7c621d9d389dd0', class: "global-header" }, h("div", { key: 'e80d3e7726329c6902f414fd6d74f3d74f54e8ca', class: "global-sub" }, h("div", { key: '9c7fad8991432ca8f23193566285cb6948a9efbd', class: "logo" }, h("slot", { key: 'cd993961cc68757155a6408f9a1ce903cf64bb98', name: "post-logo" }))), h("div", { key: '0ebe23b40ed941eb743caaa68767c1e8dbab6f9e', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'e972a93266f2240e1f66248c8f00fcc9fafd6b8c', name: "meta-navigation" }), h("slot", { key: '5ddac1faa808b043705e9f8d654b6610e230484b', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '86dec5106e34b14cbc6f5fa5c7cac98e0a571ef4', name: "post-language-switch" }), h("div", { key: '5eb98bbabfaa86c20974c9ede677bf31aa1afbc7', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '3a35856948852d880be939b6f66b5c38e921c19a', name: "post-togglebutton" })))), h("div", { key: 'e2749e94aad4b6174b28dbab5d64c6bc2bd614ca', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: 'e767a608ecca1199554c25f86188ca3d74ec1f95', name: "title" }), h("div", { key: 'bedb62571e462b89948fafa319faa5937fc6b8c3', class: "local-sub" }, h("slot", { key: '2e051bd52a90b8f806ca3caaec2ed67c16f887f0', name: "local-controls" }), h("slot", { key: '5d1dc41591db297b1d4c9e1622fad2ac5376de87' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -278,8 +289,12 @@ export class PostHeader {
         return {
             "toggleMobileMenu": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(force?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "force",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "9.0.0-next.27";
+const version = "9.0.0-next.29";
 
 export { version as v };

package/dist/components/post-header2.js

@@ -141,15 +141,6 @@ const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:10
 const PostHeaderStyle0 = postHeaderCss;
 
 const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
-        this.device = null;
-        this.mobileMenuExtended = false;
-        this.megadropdownOpen = false;
-    }
     firstFocusableEl;
     lastFocusableEl;
     mobileMenu;
@@ -177,58 +168,78 @@ const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTM
         if (isMobileMenuExtended) {
             scrollParent.setAttribute('data-is-post-header-scroll-parent', '');
             scrollParent.style.overflow = 'hidden';
-            this.host.addEventListener('keydown', this.keyboardHandler.bind(this));
+            this.host.addEventListener('keydown', this.keyboardHandler);
         }
         else {
             scrollParent.style.overflow = '';
             scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-            this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
+            this.host.removeEventListener('keydown', this.keyboardHandler);
         }
     }
     /**
      * An event emitted when the device has changed
      */
     postUpdateDevice;
-    componentWillRender() {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
+        this.device = null;
+        this.mobileMenuExtended = false;
+        this.megadropdownOpen = false;
+        this.handleScrollEvent = this.handleScrollEvent.bind(this);
+        this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
+        this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
+        this.megedropdownStateHandler = this.megedropdownStateHandler.bind(this);
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleLinkClick = this.handleLinkClick.bind(this);
+    }
+    connectedCallback() {
         window.addEventListener('resize', this.throttledResize, { passive: true });
-        window.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+        window.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
-        this.scrollParent.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+        this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
+        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        this.host.addEventListener('click', this.handleLinkClick);
+        this.frozeBody(false);
         this.handleResize();
         this.handleScrollEvent();
+        this.handleScrollParentResize();
+    }
+    componentDidRender() {
         this.getFocusableElements();
+        this.handleLocalHeaderResize();
     }
     componentDidLoad() {
         // Check if the mega dropdown is expanded
-        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
-        this.host.addEventListener('click', this.handleLinkClick.bind(this));
-        this.handleScrollParentResize();
-        this.handleLocalHeaderResize();
     }
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
         const scrollParent = this.scrollParent;
         window.removeEventListener('resize', this.throttledResize);
-        window.removeEventListener('scroll', this.handleScrollEvent.bind(this));
-        scrollParent.removeEventListener('scroll', this.handleScrollEvent.bind(this));
-        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
-        this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
-        this.host.removeEventListener('click', this.handleLinkClick.bind(this));
-        if (this.scrollParentResizeObserver)
+        window.removeEventListener('scroll', this.handleScrollEvent);
+        scrollParent.removeEventListener('scroll', this.handleScrollEvent);
+        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        this.host.removeEventListener('click', this.handleLinkClick);
+        if (this.scrollParentResizeObserver) {
             this.scrollParentResizeObserver.disconnect();
-        if (this.localHeaderResizeObserver)
+            this.scrollParentResizeObserver = null;
+        }
+        if (this.localHeaderResizeObserver) {
             this.localHeaderResizeObserver.disconnect();
+            this.localHeaderResizeObserver = null;
+        }
         this.mobileMenuExtended = false;
-        scrollParent.style.overflow = '';
-        scrollParent.removeAttribute('data-is-post-header-scroll-parent');
     }
     /**
      * Toggles the mobile navigation.
      */
-    async toggleMobileMenu() {
+    async toggleMobileMenu(force) {
         if (this.device === 'desktop')
             return;
         this.mobileMenuAnimation = this.mobileMenuExtended
@@ -236,11 +247,11 @@ const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTM
             : slideDown(this.mobileMenu);
         // Update the state of the toggle button
         const menuButton = this.host.querySelector('post-togglebutton');
-        menuButton.toggled = !this.mobileMenuExtended;
+        menuButton.toggled = force ?? !this.mobileMenuExtended;
         // Toggle menu visibility before it slides down and after it slides back up
         if (this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
-        this.mobileMenuExtended = !this.mobileMenuExtended;
+        this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
         if (!this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
     }
@@ -295,7 +306,7 @@ const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTM
             return;
         }
         if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
-            this.toggleMobileMenu();
+            this.toggleMobileMenu(false);
         }
         if (this.device === 'desktop' && isLinkInMegadropdown) {
             const megadropdownLink = target.closest('post-megadropdown a');
@@ -333,14 +344,14 @@ const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTM
     }
     handleScrollParentResize() {
         if (this.scrollParent) {
-            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight.bind(this));
+            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
             this.scrollParentResizeObserver.observe(this.scrollParent);
         }
     }
     handleLocalHeaderResize() {
         const localHeader = this.host.shadowRoot.querySelector('.local-header');
-        if (localHeader) {
-            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight.bind(this));
+        if (localHeader && !this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
             this.localHeaderResizeObserver.observe(localHeader);
         }
     }
@@ -361,7 +372,7 @@ const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTM
         return (h("div", { class: navigationClasses.join(' ') }, h("div", { ref: el => (this.mobileMenu = el) }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))))));
     }
     render() {
-        return (h(Host, { key: '866b6378652ff5860c8b046f249411941e3510ca', version: version }, h("div", { key: '4f834e011faf12f0e9629c442172153a5d710f6a', class: "global-header" }, h("div", { key: '16acea9aa91b071f4ee25b00e19a0d23f5765ffa', class: "global-sub" }, h("div", { key: '1aea872a00166aeada3538f25c8d5b1afb0595a5', class: "logo" }, h("slot", { key: '343ed3f016295d025196841260fc501795f211ec', name: "post-logo" }))), h("div", { key: '47e2d3df5973d8cf542051c9da6b2b7f077d202c', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '2000cf588d06f28b1d25bca60842d05e01635e7c', name: "meta-navigation" }), h("slot", { key: '40d62c75e080bbee36b4a5f75ee0d6a727b0153a', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '531b27a3332a6f91491b0e04efce42037edf7384', name: "post-language-switch" }), h("div", { key: '427b869f050400509ec17b1ed8aa539a3efb8fef', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '3d824c0b31cc55f4279944e02c4fa3f26bce9b7e', name: "post-togglebutton" })))), h("div", { key: 'bd23ea8c42abf93d343f4579b1a433d7224a3631', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '25ee29386c66395371dd1fa7c61794fefc220b85', name: "title" }), h("div", { key: 'e8b11280d2664a8d19935fe7fc095830d0ff4a1c', class: "local-sub" }, h("slot", { key: 'af10ad2f82146d10af525dd6a83871f428d09953', name: "local-controls" }), h("slot", { key: '311f3b2ef20794fae57d8354bd4a06552e90703e' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: '9cf9cfd3c09958b60be5492f226766098aa4c3fb', version: version }, h("div", { key: '11eff51b1d3b5da81af282b12d7c621d9d389dd0', class: "global-header" }, h("div", { key: 'e80d3e7726329c6902f414fd6d74f3d74f54e8ca', class: "global-sub" }, h("div", { key: '9c7fad8991432ca8f23193566285cb6948a9efbd', class: "logo" }, h("slot", { key: 'cd993961cc68757155a6408f9a1ce903cf64bb98', name: "post-logo" }))), h("div", { key: '0ebe23b40ed941eb743caaa68767c1e8dbab6f9e', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'e972a93266f2240e1f66248c8f00fcc9fafd6b8c', name: "meta-navigation" }), h("slot", { key: '5ddac1faa808b043705e9f8d654b6610e230484b', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '86dec5106e34b14cbc6f5fa5c7cac98e0a571ef4', name: "post-language-switch" }), h("div", { key: '5eb98bbabfaa86c20974c9ede677bf31aa1afbc7', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '3a35856948852d880be939b6f66b5c38e921c19a', name: "post-togglebutton" })))), h("div", { key: 'e2749e94aad4b6174b28dbab5d64c6bc2bd614ca', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: 'e767a608ecca1199554c25f86188ca3d74ec1f95', name: "title" }), h("div", { key: 'bedb62571e462b89948fafa319faa5937fc6b8c3', class: "local-sub" }, h("slot", { key: '2e051bd52a90b8f806ca3caaec2ed67c16f887f0', name: "local-controls" }), h("slot", { key: '5d1dc41591db297b1d4c9e1622fad2ac5376de87' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get watchers() { return {
         "mobileMenuExtended": ["frozeBody"]

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-02-26T14:48:02",
+  "timestamp": "2025-02-26T18:43:34",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.19.2",
@@ -1600,8 +1600,14 @@
             "docs": ""
           },
           "complexType": {
-            "signature": "() => Promise<void>",
-            "parameters": [],
+            "signature": "(force?: boolean) => Promise<void>",
+            "parameters": [
+              {
+                "name": "force",
+                "type": "boolean",
+                "docs": ""
+              }
+            ],
             "references": {
               "Promise": {
                 "location": "global",
@@ -1614,8 +1620,14 @@
             },
             "return": "Promise<void>"
           },
-          "signature": "toggleMobileMenu() => Promise<void>",
-          "parameters": [],
+          "signature": "toggleMobileMenu(force?: boolean) => Promise<void>",
+          "parameters": [
+            {
+              "name": "force",
+              "type": "boolean",
+              "docs": ""
+            }
+          ],
           "docs": "Toggles the mobile navigation.",
           "docsTags": []
         }

package/dist/esm/index.js

@@ -1,24 +1,24 @@
-export { P as PostAccordion } from './post-accordion-317dbe7e.js';
-export { P as PostAccordionItem } from './post-accordion-item-5d1b4d58.js';
-export { P as PostAvatar } from './post-avatar-db4e7dfe.js';
-export { P as PostBackToTop } from './post-back-to-top-56edc0cb.js';
-export { P as PostBanner } from './post-banner-3363f6ca.js';
-export { P as PostBreadcrumb } from './post-breadcrumb-d36a58fe.js';
-export { P as PostBreadcrumbItem, a as PostMenuItem } from './post-menu-item-6b1c6d97.js';
-export { P as PostCardControl } from './post-card-control-01b26f14.js';
-export { P as PostClosebutton, a as PostHeader, b as PostIcon, c as PostLanguageOption, d as PostLanguageSwitch, e as PostList, f as PostListItem, g as PostLogo, h as PostMainnavigation, i as PostMegadropdown, j as PostMegadropdownTrigger, k as PostMenu, l as PostMenuTrigger, m as PostPopovercontainer, n as PostTogglebutton } from './post-togglebutton-d1736d7e.js';
-export { P as PostCollapsible, a as PostCollapsibleTrigger } from './post-collapsible-trigger-129cb03c.js';
-export { P as PostFooter } from './post-footer-16975a8b.js';
-export { P as PostLinkarea } from './post-linkarea-4e80fa68.js';
-export { P as PostPopover } from './post-popover-c0be9a01.js';
-export { P as PostRating } from './post-rating-0a703f5f.js';
-export { P as PostTabs } from './post-tabs-a79dd589.js';
-export { P as PostTabHeader } from './post-tab-header-e84a8bbc.js';
-export { P as PostTabPanel } from './post-tab-panel-8fcce852.js';
-export { P as PostTag } from './post-tag-b36a49e8.js';
-export { P as PostTooltip } from './post-tooltip-91b0d59c.js';
+export { P as PostAccordion } from './post-accordion-465529b0.js';
+export { P as PostAccordionItem } from './post-accordion-item-dcb8a6b3.js';
+export { P as PostAvatar } from './post-avatar-fb92d451.js';
+export { P as PostBackToTop } from './post-back-to-top-29c2ecbc.js';
+export { P as PostBanner } from './post-banner-ae82b42f.js';
+export { P as PostBreadcrumb } from './post-breadcrumb-3951ef10.js';
+export { P as PostBreadcrumbItem, a as PostMenuItem } from './post-menu-item-0f81dbc5.js';
+export { P as PostCardControl } from './post-card-control-1cee4a72.js';
+export { P as PostClosebutton, a as PostHeader, b as PostIcon, c as PostLanguageOption, d as PostLanguageSwitch, e as PostList, f as PostListItem, g as PostLogo, h as PostMainnavigation, i as PostMegadropdown, j as PostMegadropdownTrigger, k as PostMenu, l as PostMenuTrigger, m as PostPopovercontainer, n as PostTogglebutton } from './post-togglebutton-f076a2bb.js';
+export { P as PostCollapsible, a as PostCollapsibleTrigger } from './post-collapsible-trigger-def32fc5.js';
+export { P as PostFooter } from './post-footer-2ec383ec.js';
+export { P as PostLinkarea } from './post-linkarea-d440a2b4.js';
+export { P as PostPopover } from './post-popover-4552c29a.js';
+export { P as PostRating } from './post-rating-abfeeacf.js';
+export { P as PostTabs } from './post-tabs-25ba69ea.js';
+export { P as PostTabHeader } from './post-tab-header-ebbeb215.js';
+export { P as PostTabPanel } from './post-tab-panel-c2e834d4.js';
+export { P as PostTag } from './post-tag-95663466.js';
+export { P as PostTooltip } from './post-tooltip-dc49483f.js';
 import './index-3419e46d.js';
-import './package-f5f8e879.js';
+import './package-08c623bf.js';
 import './heading-levels-5b7b4349.js';
 import './check-one-of-0bee20f5.js';
 import './index-8f8fe5b0.js';