@swisspost/design-system-components 9.0.0-next.31 → 9.0.0-next.33

package/loaders/event-guard.js

@@ -0,0 +1,45 @@
+function eventGuard(host, event, options, callback) {
+    const target = event.target;
+    if (!target)
+        return;
+    if (target.localName === options.targetLocalName) {
+        if (!options.delegatorSelector || shadowClosest(target, options.delegatorSelector) === host) {
+            callback();
+        }
+    }
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) starting from the given element
+ * to find and return the closest ancestor that matches the specified CSS selector.
+ * If no matching element is found, returns null.
+ *
+ * @param element - The starting element from which the search begins.
+ * @param selector - The CSS selector used to test each ancestor element.
+ * @returns The closest matching ancestor element or null if none is found.
+ */
+function shadowClosest(element, selector) {
+    let currentElement = element;
+    while (currentElement) {
+        if (currentElement.matches(selector)) {
+            return currentElement;
+        }
+        const parent = currentElement.parentElement;
+        if (parent) {
+            currentElement = parent;
+        }
+        else {
+            const parentNode = currentElement.parentNode;
+            // When no parentElement exists, check if the current element is inside a shadow DOM.
+            // If so, move up to the shadow host to continue the search outside the shadow boundary.
+            if (parentNode instanceof ShadowRoot) {
+                currentElement = parentNode.host;
+            }
+            else {
+                currentElement = null;
+            }
+        }
+    }
+    return null;
+}
+
+export { eventGuard as e };

package/loaders/package.js

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

package/loaders/post-accordion-item2.js

@@ -3,6 +3,7 @@ import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { b as checkEmptyOrOneOf } from './index2.js';
 import { n as nanoid } from './index.browser.js';
+import { e as eventGuard } from './event-guard.js';
 import { d as defineCustomElement$3 } from './post-collapsible2.js';
 import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
@@ -31,12 +32,11 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     componentDidLoad() {
         this.validateHeadingLevel();
     }
-    // capture to make sure the "collapsed" property is updated before the event is consumed
+    // Capture to make sure the "collapsed" property is updated before the event is consumed
     onCollapseToggle(event) {
-        if (event.target === this.host &&
-            event.target.localName === 'post-accordion-item') {
+        eventGuard(this.host, event, { targetLocalName: 'post-collapsible', delegatorSelector: 'post-accordion-item' }, () => {
             this.collapsed = !event.detail;
-        }
+        });
     }
     /**
      * Triggers the collapse programmatically.
@@ -53,10 +53,10 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: '4c4baf7ac22c632de6b0bc332ffc275e50bb4d71', id: this.id, "data-version": version }, h("div", { key: '576529323c3adca347ec685688c071e21a2f3a76', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'cc29c396173e55168a3bec963d5e101cb3fb17b2', for: `${this.id}--collapse` }, h(HeadingTag, { key: '76f8eed33f0c84bf6e1a534b04a8ccc0c69c6380', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'f56e67ffc94fea0452d1879d3410318b3b12c4bc', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'd5f23318d5c498e0cd9dd1f15c13a636e49b7817', class: {
+        return (h(Host, { key: '725d3710f7937f82c2382938d15770001e923b61', id: this.id, "data-version": version }, h("div", { key: '679d25d8278fbf9ae68546ee50c27a86ded95999', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '7c2af8dc6a1f5265b4ae2cad066be7d2e0bf6a78', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'a10e59a17fdb272fe6308d2ba98f37f90490fab8', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'e2b527850c8342a8adf99453d0ac330b6a94760f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'b722a4bc51757546eefa58c7c3ea3a688838298a', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '051d48cc4201e2d954f4d4bc25c836ddc8e24d0f', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'e9f687c79fab8bd3bd94e4da022b2aea7e0bba5c', name: "header" }), h("post-icon", { key: 'c1f3486254269ab50a89bd6acf8c714cbbced3b8', name: "2051" })))), h("post-collapsible", { key: '7f3788a90e59cdb4f985fd14c64286cb938a3c23', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'e17ae656614ac27d4f09ebba0a7bb547f88f5728', class: "accordion-body", part: "body" }, h("slot", { key: '0387ebe5ce518bbb8b78c66d919715a78b5ae558' }))))));
+            } }, h("slot", { key: '1a42494db72a7b437b1d98fa2e8159d73ece22fa', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '049865bb25f833780ef8e27fe8477e06476a2427', name: "header" }), h("post-icon", { key: 'da0cf7078e4f51710dbfd39c0afa90465fcb53c6', name: "2051" })))), h("post-collapsible", { key: '7c3b268e34d3e4f52820b11a6c090aefbc16e3b9', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '993a7fffbccb557aed2842305f3927e5c3b5047a', class: "accordion-body", part: "body" }, h("slot", { key: '580eb87b1cb4f88acd7dddddecaa1c1982b7f6e3' }))))));
     }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]

package/loaders/post-accordion.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c as checkOneOf } from './check-one-of.js';
+import { e as eventGuard } from './event-guard.js';
 
 const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:not(:only-of-type):first-of-type){--post-accordion-button-border-top:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}";
 const PostAccordionStyle0 = postAccordionCss;
@@ -30,10 +31,7 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
         this.validateHeadingLevel();
     }
     collapseToggleHandler(event) {
-        event.stopPropagation();
-        const toggledItem = event.target;
-        const closestParentAccordion = toggledItem.closest('post-accordion');
-        if (closestParentAccordion === this.host && toggledItem.localName === 'post-accordion-item') {
+        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion' }, () => {
             const toggledAccordionItem = event.target;
             const isClosing = this.expandedItems.has(toggledAccordionItem);
             if (isClosing) {
@@ -44,13 +42,13 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
             }
             if (this.multiple || isClosing)
                 return;
-            // close other open accordion items to have only one opened at a time
+            // Close other open accordion items to ensure only one is open at a time
             Array.from(this.expandedItems.values())
                 .filter(item => item !== toggledAccordionItem)
                 .forEach(item => {
                 item.toggle(false);
             });
-        }
+        });
     }
     /**
      * Toggles the `post-accordion-item` with the given id.
@@ -96,7 +94,7 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
         });
     }
     render() {
-        return (h(Host, { key: '9ec8ca1ceac6587be68272568f216c958460ac0a', "data-version": version }, h("div", { key: '99887626d105f0e8f86b24e211591e7be820738d', class: "accordion" }, h("slot", { key: '4d8a003377c3a90648818a00144fd5f3a65be084', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '80e15cf7835f213cfee1ca7cf83cc2fd24bba3ff', "data-version": version }, h("div", { key: '1cf03d4960115b52394b5cb07cd2286747c728dd', class: "accordion" }, h("slot", { key: 'b94328a45a3cba6a8d3b418061036eb8af2cf027', onSlotchange: () => this.registerAccordionItems() }))));
     }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]

package/loaders/post-back-to-top.js

@@ -5,7 +5,7 @@ import { c as checkType } from './check-type.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postBackToTopCss = ":host{--post-floating-button-translate-y:calc(-1 * var(--post-core-dimension-112));position:fixed;inset-block-start:var(--post-device-position-4);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:var(--post-device-elevation-300);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const postBackToTopCss = ":host{--post-floating-button-position-top:var(--post-device-position-4);--post-back-to-top-position-top:calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation:var(--post-device-elevation-300);position:fixed;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 const PostBackToTopStyle0 = postBackToTopCss;
 
 const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends HTMLElement {
@@ -24,7 +24,7 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     handleScroll = () => {
         this.belowFold = this.isBelowFold();
     };
-    // Watch for changes in belowFold
+    /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
             slideDown(this.host, this.translateY);
@@ -36,8 +36,37 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     scrollToTop() {
         window.scrollTo({
             top: 0,
+            behavior: 'smooth',
         });
     }
+    getSecondPixelValue(parts) {
+        for (const part of parts) {
+            const pixelValues = part.match(/\b\d+px\b/g);
+            if (pixelValues && pixelValues.length > 1) {
+                return pixelValues[1];
+            }
+        }
+    }
+    animateButton() {
+        // Get the back-to-top button top postiion
+        const positionTop = window.getComputedStyle(this.host).getPropertyValue('top');
+        const buttonElement = this.host.shadowRoot.querySelector('button');
+        // Extract the elevation height from the back-to-top button elevation token
+        const elevation = getComputedStyle(buttonElement).getPropertyValue('--post-back-to-top-elevation');
+        const elevationParts = elevation.split(',');
+        const elevationHeight = this.getSecondPixelValue(elevationParts);
+        // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
+        this.translateY =
+            String((-1 * 100) / 100 -
+                parseFloat(positionTop.replace('px', '')) -
+                parseFloat(elevationHeight.replace('px', ''))) + 'px';
+        if (this.belowFold) {
+            slideDown(this.host, this.translateY);
+        }
+        if (!this.belowFold) {
+            this.host.style.transform = `translateY(${this.translateY})`;
+        }
+    }
     // Validate the label
     validateLabel() {
         checkType(this, 'label', 'string');
@@ -49,23 +78,14 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     }
     componentDidLoad() {
         window.addEventListener('scroll', this.handleScroll, false);
-        this.translateY = window
-            .getComputedStyle(this.host)
-            .getPropertyValue('--post-floating-button-translate-y');
-        if (!this.belowFold) {
-            this.host.style.transform = `translateY(${this.translateY})`;
-        }
-        // Initial load
-        if (this.belowFold) {
-            slideUp(this.host, this.translateY);
-        }
+        this.animateButton();
         this.validateLabel();
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '4d8c4e05ebcdd088c924ac0329b2238eb1d3c6ca', "data-version": version }, h("button", { key: 'fc37aff8558d7eb4b27a870f11133fc6984f4e11', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '4b978c44982ec0b02798ce75766b2acdd8497412', "aria-hidden": "true", name: "3026" }), h("span", { key: '4a899be348a6c8721696c634970773cd77f685d9', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: '2198e7aaf2259ea49e4d1037770960e010fb33c9', "data-version": version }, h("button", { key: 'f2e5f0dc2ea445a7fdc89171c7ca3a11ff716916', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '1c749482ad6ea4be61f10973197df9b65a949b82', "aria-hidden": "true", name: "3026" }), h("span", { key: '67d90bbcbfa72b9d593e24ba75d78d55e5d78b18', class: "visually-hidden" }, this.label))));
     }
     static get watchers() { return {
         "belowFold": ["watchBelowFold"],

package/loaders/post-collapsible-trigger2.js

@@ -4,6 +4,7 @@ import { c as checkType } from './check-type.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
 import { d as debounce } from './debounce.js';
 import { g as getRoot } from './get-root.js';
+import { e as eventGuard } from './event-guard.js';
 
 const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends HTMLElement {
     constructor() {
@@ -27,6 +28,8 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
      * Initiate a mutation observer that updates the trigger whenever necessary
      */
     connectedCallback() {
+        this.root = getRoot(this.host);
+        this.root.addEventListener('postToggle', this.handlePostToggle);
         this.observer.observe(this.host, { childList: true, subtree: true });
     }
     /**
@@ -35,11 +38,6 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
      */
     componentWillLoad() {
         this.root = getRoot(this.host);
-        this.root.addEventListener('postToggle', (e) => {
-            if (!this.trigger || !e.target.isEqualNode(this.collapsible))
-                return;
-            this.trigger.setAttribute('aria-expanded', `${e.detail}`);
-        });
     }
     /**
      * Add the "data-version" to the host element and set the trigger
@@ -55,6 +53,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
      */
     disconnectedCallback() {
         this.observer.disconnect();
+        this.root.removeEventListener('postToggle', this.handlePostToggle);
     }
     /**
      * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
@@ -62,6 +61,17 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
     async update() {
         this.debouncedUpdate();
     }
+    /**
+     * Private handler for the 'postToggle' event.
+     * This updates the trigger's "aria-expanded" attribute based on the event detail.
+     */
+    handlePostToggle(e) {
+        eventGuard(this.host, e, { targetLocalName: 'post-collapsible' }, () => {
+            if (this.trigger) {
+                this.trigger.setAttribute('aria-expanded', `${e.detail}`);
+            }
+        });
+    }
     debouncedUpdate = debounce(() => {
         if (!this.trigger)
             return;

package/loaders/post-header.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { v as version } from './package.js';
 import { a as slideUp, s as slideDown } from './slide.js';
 import { g as getFocusableChildren } from './get-focusable-children.js';
+import { e as eventGuard } from './event-guard.js';
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
@@ -137,7 +138,7 @@ function throttle (delay, callback, options) {
   return wrapper;
 }
 
-const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--global-header-top:calc( (var(--global-header-height) - var(--global-header-reduced-height)) * -1 );--local-header-top:calc( -1 * (var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height) );--logo-height:calc(var(--global-header-height) - var(--header-scroll-top));--global-controls-top:calc(min((var(--header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--global-header-top:0;--local-header-top:var(--global-header-height);--logo-height:var(--global-header-height);--global-controls-top:0}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:12px;flex-wrap:wrap;gap:16px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;inset-block-start:calc(var(--header-scroll-top) + var(--header-height))}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--header-scroll-parent-height, 100dvh),100dvh) - var(--header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top));--global-controls-top:calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--global-header-top:0;--local-header-top:var(--post-global-header-height);--logo-height:var(--post-global-header-height);--global-controls-top:0}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--post-global-header-height);padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:1;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
 const PostHeaderStyle0 = postHeaderCss;
 
 const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
@@ -254,9 +255,14 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             });
         }
     }
-    megedropdownStateHandler(event) {
-        this.megadropdownOpen = event.detail.isVisible;
-    }
+    megedropdownStateHandler = (event) => {
+        eventGuard(this.host, event, {
+            targetLocalName: 'post-megadropdown',
+            delegatorSelector: 'post-header',
+        }, () => {
+            this.megadropdownOpen = event.detail.isVisible;
+        });
+    };
     // Get all the focusable elements in the post-header mobile menu
     getFocusableElements() {
         // Get elements in the correct order (different as the DOM order)
@@ -289,11 +295,11 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
     }
     handleScrollEvent() {
         const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
-        this.host.style.setProperty('--header-scroll-top', `${scrollTop}px`);
+        document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
     }
     updateLocalHeaderHeight() {
         const localHeaderHeight = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
-        this.host.style.setProperty('--local-header-height', `${localHeaderHeight}px`);
+        document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderHeight}px`);
     }
     updateScrollParentHeight() {
         this.host.style.setProperty('--header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
@@ -368,7 +374,7 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         return (h("div", { class: navigationClasses.join(' '), style: { '--header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, h("div", { class: "mobile-menu", 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: '1cc6cb8fb53d744a3e857b39fe6d59dcc52616f6', version: version }, h("div", { key: 'f2b0993095d6173cd6e6652f68a6d86cccaca0cf', class: "global-header" }, h("div", { key: '3199a8bfe40e617b9aa41235a836b0346afe3f5f', class: "global-sub" }, h("div", { key: 'acf05b7b78ca758b75b4c999a262506dc43b1692', class: "logo" }, h("slot", { key: '21d50a2e983f3572ce33828fd69a3eff01983206', name: "post-logo" }))), h("div", { key: '7222c559dca81ae94b18a5a88825169fa05b887e', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '4948c8d13318987f9c419ac73d901e558f763d0d', name: "meta-navigation" }), h("slot", { key: '2a10e4dc73716b3fd39fd9fb534678c6203f60e3', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '5786dcda4ca017500916ea4c9da604da46a0e2f5', name: "post-language-switch" }), h("div", { key: 'a2326d26003bb8101dc0236426b26f1f11bdd9df', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: 'e75d428c8a5644bcd979607de1ca85ad435e096d', name: "post-togglebutton" })))), h("div", { key: 'c40d1e10ce6e13e2cae5f8395ad9281dce50975e', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: 'e37002ea2d9d74fdfa0773cb2ca90f7e9560f193', name: "title" }), h("div", { key: 'fe1e158e00458d1232c5b0e9ae22c63e77b25ac6', class: "local-sub" }, h("slot", { key: '4b504f9652a403cf89b0a371a803251923758155', name: "local-controls" }), h("slot", { key: 'c02b89240f8df106f138bc14312031511c5462f6' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: 'd4e9cc7d4e61f9c6223651b73fdab93e44f868f2', version: version }, h("div", { key: 'be40a49df865621d9a31808d468a2bb342803600', class: "global-header" }, h("div", { key: '776d797b9235211bd283fb0ecb29722f2776f2cd', class: "global-sub" }, h("div", { key: '3e89049f43d0de844674db985c3c9e55d510f054', class: "logo" }, h("slot", { key: 'c96d915df7930d15c316e8761c0cf24ed6b44b95', name: "post-logo" }))), h("div", { key: '8aa06d67efef853e2a913c23703a73e38f2ec779', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'cdd0b21cd9c6be0ec5a3aeb29b3b29b3034897a0', name: "meta-navigation" }), h("slot", { key: 'da4c5e8c6db482b031ba3b7ae1cf91f112bda75f', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '8980fdfa5f5e90d3786b5727ff6a9368dea709c6', name: "post-language-switch" }), h("div", { key: '013e2ad6b5bfd6b61f42b1d6c33c9ac6f0af98c0', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: 'cdac00dcf2cfb182bc8cefe0181054fac65c64be', name: "post-togglebutton" })))), h("div", { key: '0bdaa1b3fe2b9a460c7437b950afe8ce4c2237af', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '1adc944fce891f85deb00dd40ad58dc0402491a9', name: "title" }), h("div", { key: '70f9a42f940b231a6e0dd89ee8e67d34f3b98eb6', class: "local-sub" }, h("slot", { key: 'd0106f5ec6ed548e1dbd5ca7f78b1ac5bcf5d2d4', name: "local-controls" }), h("slot", { key: '62e91cc83b232238ac3dcc1166f4a006754c95c9' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get watchers() { return {
         "device": ["lockBody"],

package/loaders/post-icon2.js

@@ -7,7 +7,7 @@ import { c as checkType } from './check-type.js';
 const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
 const PostIconStyle0 = postIconCss;
 
-const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons/';
+const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons/`;
 const ANIMATION_NAMES = [
     'cylon',
     'cylon-vertical',
@@ -126,7 +126,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: 'c80aaf693f730902c4ae57ca78360eee5dedf624', "data-version": version }, h("span", { key: '7e01e1cf7e4fec380e8f054d3cc8fa5404c7a829', style: this.getStyles() })));
+        return (h(Host, { key: '60f27d2a489e5649aa6ff06a771a146f1b83480d', "data-version": version }, h("span", { key: 'd1e7fe17b1c4b522bf091f248dfe51f838b87896', style: this.getStyles() })));
     }
     static get watchers() { return {
         "animation": ["validateAnimation"],

package/loaders/post-language-switch.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { b as checkEmptyOrOneOf } from './index2.js';
 import { v as version } from './package.js';
 import { n as nanoid } from './index.browser.js';
+import { e as eventGuard } from './event-guard.js';
 import { d as defineCustomElement$5 } from './post-icon2.js';
 import { d as defineCustomElement$4 } from './post-menu2.js';
 import { d as defineCustomElement$3 } from './post-menu-trigger2.js';
@@ -10,7 +11,7 @@ import { c as checkType } from './check-type.js';
 
 const SWITCH_VARIANTS = ['list', 'menu'];
 
-const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 12px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}";
+const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}";
 const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
 
 const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageSwitch extends HTMLElement {
@@ -43,22 +44,27 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         this.updateChildrenVariant();
         this.updateActiveLanguage();
     }
+    /**
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
+     */
     handlePostChange(event) {
-        this.activeLang = event.detail;
-        // Update the active state in the children post-language-option components
-        this.languageOptions.forEach(lang => {
-            if (lang.code && lang.code === this.activeLang) {
-                lang.setAttribute('active', '');
-            }
-            else {
-                lang.removeAttribute('active');
+        eventGuard(this.host, event, { targetLocalName: 'post-language-option', delegatorSelector: 'post-language-switch' }, () => {
+            this.activeLang = event.detail;
+            // Update the active state in the children post-language-option components
+            this.languageOptions.forEach(lang => {
+                if (lang.code && lang.code === this.activeLang) {
+                    lang.setAttribute('active', '');
+                }
+                else {
+                    lang.removeAttribute('active');
+                }
+            });
+            // Hides the dropdown when an option has been clicked
+            if (this.variant === 'menu') {
+                const menu = this.host.shadowRoot.querySelector('post-menu');
+                menu.hide();
             }
         });
-        // Hides the dropdown when an option has been clicked
-        if (this.variant === 'menu') {
-            const menu = this.host.shadowRoot.querySelector('post-menu');
-            menu.hide();
-        }
     }
     /**
      * Handles cases where the language switch is being rendered before options are available

package/loaders/post-mainnavigation.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:16px}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:14px}}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;overflow-x:hidden}post-mainnavigation nav{max-width:100%;background:#fff;max-height:var(--main-navigation-height);user-select:none;transition:margin 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{z-index:4;position:absolute;inset-block-end:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;background:#fff;padding:16px;box-shadow:var(--post-device-elevation-500);line-height:100%;height:var(--main-navigation-height)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{background-color:ButtonFace !important}post-mainnavigation .left-scroll-button button:hover,post-mainnavigation .right-scroll-button button:hover{background-color:Highlight !important}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button.d-none,post-mainnavigation .right-scroll-button.d-none{display:none}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}}@media screen and (min-width: 1024px){post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}}@media screen and (min-width: 1024px){post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--main-navigation-height);gap:4px;font-size:16px;z-index:4}post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}";
+const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:16px}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:14px}}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;overflow-x:hidden}post-mainnavigation nav{max-width:100%;background:#fff;max-height:var(--post-main-navigation-height);user-select:none;transition:margin 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{z-index:4;position:absolute;inset-block-end:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;background:#fff;padding:16px;box-shadow:var(--post-device-elevation-500);line-height:100%;height:var(--post-main-navigation-height)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{background-color:ButtonFace !important}post-mainnavigation .left-scroll-button button:hover,post-mainnavigation .right-scroll-button button:hover{background-color:Highlight !important}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button.d-none,post-mainnavigation .right-scroll-button.d-none{display:none}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}}@media screen and (min-width: 1024px){post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}}@media screen and (min-width: 1024px){post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height);gap:4px;font-size:16px;z-index:4}post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}";
 const PostMainnavigationStyle0 = postMainnavigationCss;
 
 const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button

package/loaders/post-megadropdown-trigger.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
+import { e as eventGuard } from './event-guard.js';
 
 const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}";
 const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
@@ -53,13 +54,11 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
             }
         }
     };
-    componentDidLoad() {
-        this.validateControlFor();
-        // Check if the mega dropdown attached to the trigger is expanded or not
-        document.addEventListener('postToggleMegadropdown', (event) => {
+    handleToggleMegadropdown = (event) => {
+        eventGuard(this.host, event, { targetLocalName: 'post-megadropdown' }, () => {
             if (event.target.id === this.for) {
                 this.ariaExpanded = event.detail.isVisible;
-                // Focus on the trigger parent of the dropdown after it's closed if close button had been clicked
+                // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
                 if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
                     setTimeout(() => {
                         this.slottedButton?.focus();
@@ -71,6 +70,11 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
                 }
             }
         });
+    };
+    componentDidLoad() {
+        this.validateControlFor();
+        // Check if the mega dropdown attached to the trigger is expanded or not
+        document.addEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
         this.slottedButton = this.host.querySelector('button');
         if (this.slottedButton) {
             this.slottedButton.setAttribute('aria-haspopup', 'menu');
@@ -83,8 +87,11 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
             console.warn('No button found within post-megadropdown-trigger');
         }
     }
+    disconnectedCallback() {
+        document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
+    }
     render() {
-        return (h(Host, { key: 'a879ee7ccf98c76e6cb2b82b3bfbdff39280e2d5', "data-version": version, "tab-index": "-1" }, h("button", { key: '31e506e1bd542050ae731be74b01614e61dd9622' }, h("slot", { key: 'c17394f96e1d54eda841f3d9485d9e5c2457acff' }))));
+        return (h(Host, { key: '86b85efede8d9b19f3f0560f500f33f5e172177f', "data-version": version, "tab-index": "-1" }, h("button", { key: '0f810e4c38bc4abf23ac60ab27b36d408e7ced0d' }, h("slot", { key: '2a522ac7e15ef8ac077b73cdebf629b89ea173c6' }))));
     }
     static get watchers() { return {
         "for": ["validateControlFor"]

package/loaders/post-megadropdown.js

@@ -3,7 +3,7 @@ import { g as getFocusableChildren } from './get-focusable-children.js';
 import { v as version } from './package.js';
 import { b as breakpoint } from './breakpoints.js';
 
-const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:4;position:fixed;inset-block-start:var(--header-navigation-current-inset);inset-inline:0;height:calc(min(var(--header-scroll-parent-height, 100dvh),100dvh) - var(--header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
+const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:4;position:fixed;inset-block-start:var(--header-navigation-current-inset);inset-inline:0;height:calc(min(var(--header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
 const PostMegadropdownStyle0 = postMegadropdownCss;
 
 const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends HTMLElement {