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

package/dist/cjs/{post-togglebutton-88f6efd9.js → post-togglebutton-6c99f2a8.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-d6bf2c66.js');
-const _package = require('./package-4a02ad6d.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,65 +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;
-    connectedCallback() {
-        const scrollParent = this.scrollParent;
-        scrollParent.style.overflow = '';
-        scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-        console.log('disconnectedCallback', this.mobileMenuExtended, this.scrollParent, this.scrollParent.style.overflow, this.scrollParent.hasAttribute('data-is-post-header-scroll-parent'));
+    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);
     }
-    componentWillRender() {
+    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');
-        console.log('disconnectedCallback', this.mobileMenuExtended, this.scrollParent, this.scrollParent.style.overflow, this.scrollParent.hasAttribute('data-is-post-header-scroll-parent'));
     }
     /**
      * Toggles the mobile navigation.
      */
-    async toggleMobileMenu() {
+    async toggleMobileMenu(force) {
         if (this.device === 'desktop')
             return;
         this.mobileMenuAnimation = this.mobileMenuExtended
@@ -292,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;
     }
@@ -351,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');
@@ -389,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);
         }
     }
@@ -417,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: '5107418a1d580bf6f5fecb7021536a47ac0d753f', version: _package.version }, index.h("div", { key: '07b96160f9734294624a0c4c4db686fca6909e7f', class: "global-header" }, index.h("div", { key: '549eeaee86fbd27a2e994fec00b5bcb4be417eff', class: "global-sub" }, index.h("div", { key: '3119f9f19427ddf7adb3a6f0e1c6b2acd048d758', class: "logo" }, index.h("slot", { key: '088f1a652930115b3c927048d004ebc5958c4a4c', name: "post-logo" }))), index.h("div", { key: '86dff84437178bad2fae559424a08a941822b1bc', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '7b68b2c648b12fe3f777fbd8bac4df51b559fcbf', name: "meta-navigation" }), index.h("slot", { key: 'ac97ce61da9280e3fd1be05fc36aa33e29795449', name: "global-controls" }), this.device === 'desktop' && index.h("slot", { key: 'df45cadb9e3bbbfb4a4b1b8799688c582e23de2b', name: "post-language-switch" }), index.h("div", { key: 'eaad8918db781de6c7c9bd0729801b11ef0cf3cf', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '04753ff37b9523260d1e976698b0aec3838cf935', name: "post-togglebutton" })))), index.h("div", { key: 'b154e5dc69da1638d89f210cb2c7451425c52b5b', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, index.h("slot", { key: 'b1cad5b3e9acee0424884aea0caf8d9e153bf6d3', name: "title" }), index.h("div", { key: '26ec16c47a57a87ff0fc5d030f47bdd91dfbdbc0', class: "local-sub" }, index.h("slot", { key: '8e08c4ec4bd4bee4286173b4ddc77d061b97b0c4', name: "local-controls" }), index.h("slot", { key: 'ea1e250cc166c6dff8beea00fe6d9a9c3a83f55d' })), 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-61fbe2aa.js → post-tooltip-3d847af6.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-d6bf2c66.js');
-const _package = require('./package-4a02ad6d.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-61fbe2aa.js');
+const postTooltip = require('./post-tooltip-3d847af6.js');
 require('./index-d6bf2c66.js');
-require('./package-4a02ad6d.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,65 +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;
-    connectedCallback() {
-        const scrollParent = this.scrollParent;
-        scrollParent.style.overflow = '';
-        scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-        console.log('disconnectedCallback', this.mobileMenuExtended, this.scrollParent, this.scrollParent.style.overflow, this.scrollParent.hasAttribute('data-is-post-header-scroll-parent'));
+    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);
     }
-    componentWillRender() {
+    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');
-        console.log('disconnectedCallback', this.mobileMenuExtended, this.scrollParent, this.scrollParent.style.overflow, this.scrollParent.hasAttribute('data-is-post-header-scroll-parent'));
     }
     /**
      * Toggles the mobile navigation.
      */
-    async toggleMobileMenu() {
+    async toggleMobileMenu(force) {
         if (this.device === 'desktop')
             return;
         this.mobileMenuAnimation = this.mobileMenuExtended
@@ -111,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;
     }
@@ -170,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');
@@ -208,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);
         }
     }
@@ -236,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: '5107418a1d580bf6f5fecb7021536a47ac0d753f', version: version }, h("div", { key: '07b96160f9734294624a0c4c4db686fca6909e7f', class: "global-header" }, h("div", { key: '549eeaee86fbd27a2e994fec00b5bcb4be417eff', class: "global-sub" }, h("div", { key: '3119f9f19427ddf7adb3a6f0e1c6b2acd048d758', class: "logo" }, h("slot", { key: '088f1a652930115b3c927048d004ebc5958c4a4c', name: "post-logo" }))), h("div", { key: '86dff84437178bad2fae559424a08a941822b1bc', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '7b68b2c648b12fe3f777fbd8bac4df51b559fcbf', name: "meta-navigation" }), h("slot", { key: 'ac97ce61da9280e3fd1be05fc36aa33e29795449', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'df45cadb9e3bbbfb4a4b1b8799688c582e23de2b', name: "post-language-switch" }), h("div", { key: 'eaad8918db781de6c7c9bd0729801b11ef0cf3cf', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '04753ff37b9523260d1e976698b0aec3838cf935', name: "post-togglebutton" })))), h("div", { key: 'b154e5dc69da1638d89f210cb2c7451425c52b5b', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: 'b1cad5b3e9acee0424884aea0caf8d9e153bf6d3', name: "title" }), h("div", { key: '26ec16c47a57a87ff0fc5d030f47bdd91dfbdbc0', class: "local-sub" }, h("slot", { key: '8e08c4ec4bd4bee4286173b4ddc77d061b97b0c4', name: "local-controls" }), h("slot", { key: 'ea1e250cc166c6dff8beea00fe6d9a9c3a83f55d' })), 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"; }
@@ -285,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.28";
+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,65 +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;
-    connectedCallback() {
-        const scrollParent = this.scrollParent;
-        scrollParent.style.overflow = '';
-        scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-        console.log('disconnectedCallback', this.mobileMenuExtended, this.scrollParent, this.scrollParent.style.overflow, this.scrollParent.hasAttribute('data-is-post-header-scroll-parent'));
+    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);
     }
-    componentWillRender() {
+    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');
-        console.log('disconnectedCallback', this.mobileMenuExtended, this.scrollParent, this.scrollParent.style.overflow, this.scrollParent.hasAttribute('data-is-post-header-scroll-parent'));
     }
     /**
      * Toggles the mobile navigation.
      */
-    async toggleMobileMenu() {
+    async toggleMobileMenu(force) {
         if (this.device === 'desktop')
             return;
         this.mobileMenuAnimation = this.mobileMenuExtended
@@ -243,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;
     }
@@ -302,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');
@@ -340,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);
         }
     }
@@ -368,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: '5107418a1d580bf6f5fecb7021536a47ac0d753f', version: version }, h("div", { key: '07b96160f9734294624a0c4c4db686fca6909e7f', class: "global-header" }, h("div", { key: '549eeaee86fbd27a2e994fec00b5bcb4be417eff', class: "global-sub" }, h("div", { key: '3119f9f19427ddf7adb3a6f0e1c6b2acd048d758', class: "logo" }, h("slot", { key: '088f1a652930115b3c927048d004ebc5958c4a4c', name: "post-logo" }))), h("div", { key: '86dff84437178bad2fae559424a08a941822b1bc', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '7b68b2c648b12fe3f777fbd8bac4df51b559fcbf', name: "meta-navigation" }), h("slot", { key: 'ac97ce61da9280e3fd1be05fc36aa33e29795449', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'df45cadb9e3bbbfb4a4b1b8799688c582e23de2b', name: "post-language-switch" }), h("div", { key: 'eaad8918db781de6c7c9bd0729801b11ef0cf3cf', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '04753ff37b9523260d1e976698b0aec3838cf935', name: "post-togglebutton" })))), h("div", { key: 'b154e5dc69da1638d89f210cb2c7451425c52b5b', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: 'b1cad5b3e9acee0424884aea0caf8d9e153bf6d3', name: "title" }), h("div", { key: '26ec16c47a57a87ff0fc5d030f47bdd91dfbdbc0', class: "local-sub" }, h("slot", { key: '8e08c4ec4bd4bee4286173b4ddc77d061b97b0c4', name: "local-controls" }), h("slot", { key: 'ea1e250cc166c6dff8beea00fe6d9a9c3a83f55d' })), 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-26T15:36:32",
+  "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": []
         }