@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

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

@@ -1,23 +1,153 @@
 import { Host, h } from "@stencil/core";
+import { version } from "../../../../package";
+const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
+const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
 export class PostMainnavigation {
+    constructor() {
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.scrollRight = this.scrollRight.bind(this);
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.handleMutations = this.handleMutations.bind(this);
+        this.checkScrollability = this.checkScrollability.bind(this);
+        this.resizeObserver = new ResizeObserver(this.checkScrollability);
+        this.mutationObserver = new MutationObserver(this.handleMutations);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.fixLayoutShift();
+            this.checkScrollability();
+        });
+        // Observe the navbar for size changes
+        this.resizeObserver.observe(this.navbar);
+        // Observe the navabar for mutation changes
+        this.mutationObserver.observe(this.navbar, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        // Ensure the scroll buttons are correctly displayed or hidden whenever the navbar is scrolled
+        this.navbar.addEventListener('scrollend', this.checkScrollability);
+    }
     /**
-     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
      */
-    connectedCallback() {
-        this.header = this.host.closest('post-header');
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
+        this.resizeObserver.disconnect();
+        this.navbar.removeEventListener('scrollend', this.checkScrollability);
     }
     /**
-     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     * Stops the repeated scrolling when the mouse button is released.
      */
-    disconnectedCallback() {
-        this.header = null;
+    stopScrolling() {
+        if (this.scrollRepeatInterval)
+            clearInterval(this.scrollRepeatInterval);
+    }
+    async handleMutations(mutations) {
+        const addedNodes = mutations.flatMap((mutation) => {
+            return Array.from(mutation.addedNodes);
+        });
+        // Wait for all elements to be hydrated
+        await Promise.all(addedNodes.map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
+        this.fixLayoutShift();
+        this.checkScrollability();
+    }
+    get navigationItems() {
+        return Array.from(this.navbar.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
+    }
+    /**
+     * Hack to fix the layout shift due to bold text on active elements
+     */
+    fixLayoutShift() {
+        this.navigationItems
+            .filter(item => !item.matches(':has(.nav-el-active)'))
+            .forEach(item => {
+            item.innerHTML = `
+          <span class="nav-el-active">${item.innerHTML}</span>
+          <span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
+        `;
+        });
     }
     handleBackButtonClick() {
-        if (this.header)
-            this.header.toggleMobileMenu();
+        const header = this.navbar.closest('post-header');
+        if (header)
+            header.toggleMobileMenu();
+    }
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    get canScroll() {
+        return this.canScrollLeft || this.canScrollRight;
+    }
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    checkScrollability() {
+        const { scrollLeft, scrollWidth, clientWidth } = this.navbar;
+        if (scrollWidth === clientWidth) {
+            // If scroll width equals client width, scrolling is disabled in both directions
+            this.canScrollLeft = this.canScrollRight = false;
+        }
+        else {
+            this.canScrollLeft = Math.floor(scrollLeft) > 0; // Scrolling left is possible if not at the start
+            this.canScrollRight = Math.ceil(clientWidth + scrollLeft) < scrollWidth; // Scrolling right is possible if not at the end
+        }
+    }
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    handleScrollButtonClick(e, direction) {
+        if (!this.canScroll || e.button !== 0)
+            return;
+        // Disable interaction with the navbar during scrolling
+        this.temporarilyDisableNavbar();
+        // Set up the correct scroll function
+        const scroll = direction === 'right' ? this.scrollRight : this.scrollLeft;
+        scroll();
+        // Repeat the scrolling action while the button is held down
+        this.scrollRepeatInterval = setInterval(() => {
+            scroll();
+        }, SCROLL_REPEAT_INTERVAL);
+    }
+    scrollRight() {
+        const scrollRightLeftEdge = document
+            .querySelector('.scroll-right')
+            .getBoundingClientRect().left;
+        for (const navigationItem of this.navigationItems) {
+            const { right, width } = navigationItem.getBoundingClientRect();
+            // Scroll to the first navigation item that is less than 75% visible
+            const isThreeQuartersVisible = right - 0.25 * width < scrollRightLeftEdge;
+            if (!isThreeQuartersVisible) {
+                this.navbar.scrollBy({ left: right - scrollRightLeftEdge });
+                return;
+            }
+        }
+    }
+    scrollLeft() {
+        const scrollLeftRightEdge = document
+            .querySelector('.scroll-left')
+            .getBoundingClientRect().right;
+        for (const navigationItem of this.navigationItems.reverse()) {
+            const { left, width } = navigationItem.getBoundingClientRect();
+            // Scroll to the first navigation item that is less than 75% visible
+            const isThreeQuartersVisible = left + 0.25 * width > scrollLeftRightEdge;
+            if (!isThreeQuartersVisible) {
+                this.navbar.scrollBy({ left: left - scrollLeftRightEdge });
+                return;
+            }
+        }
+    }
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    temporarilyDisableNavbar() {
+        if (this.navbarDisableTimer)
+            clearTimeout(this.navbarDisableTimer);
+        this.navbar.setAttribute('inert', '');
+        this.navbarDisableTimer = setTimeout(() => {
+            this.navbar.removeAttribute('inert');
+        }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (h(Host, { key: 'f21c438ac0bbcb08e08fd419589bf92b7d8b3a61', slot: "post-mainnavigation" }, h("div", { key: '1925f47932d7e842e8b9f059d7ade955c577fa50', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'fe18f6859a6d79c7ae701b65a31be1eab9c8b2ac', name: "back-button" })), h("nav", { key: 'ad2b0a52bc0bcf78a3c3340ba163ee6167be2c73' }, h("slot", { key: '8fc7b01cc0f3729cd2c12c4967ec87891fe0dcf5' }))));
+        return (h(Host, { key: '6cd850555585d87eb25e3f6892b8010f5e4d23d6', slot: "post-mainnavigation", version: version }, h("div", { key: '3411008120d072920f4de0b71c9dc014748f1390', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '2e3747380cb546bd6da77e5ffba2403586205a55', name: "back-button" })), h("div", { key: 'e9eedd836b3f679ba2861109db2d0811c1142677', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '628511a2c1812a08828e1aa2b51f26ad01a5a2cf', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '1b660d65e1984e8701a98a369046f391fd177338', ref: el => (this.navbar = el) }, h("slot", { key: '0eb35366ac0bd58509afd6a12f68c2b09396a497' })), h("div", { key: '11145ad6602e2df78d3c3f4643cc6e4e960775aa', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '26e795cd00221dbfb1a7632453d0d48993584b0b', "aria-hidden": "true", name: "chevronright" }))));
     }
     static get is() { return "post-mainnavigation"; }
     static get originalStyleUrls() {
@@ -30,23 +160,25 @@ export class PostMainnavigation {
             "$": ["post-mainnavigation.css"]
         };
     }
-    static get events() {
+    static get states() {
+        return {
+            "canScrollLeft": {},
+            "canScrollRight": {}
+        };
+    }
+    static get listeners() {
         return [{
-                "method": "postToggle",
-                "name": "postToggle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Gets emitted when a user closes the main navigation on mobile"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
+                "name": "mouseup",
+                "method": "stopScrolling",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "stopScrolling",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
-    static get elementRef() { return "host"; }
 }

package/dist/collection/components/post-megadropdown/post-megadropdown.css

@@ -1 +1 @@
-@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}*,::before,::after{box-sizing:border-box}post-popovercontainer{--post-global-header-height: 72px;--post-main-header-height: 56px;--post-header-height: calc(var(--post-global-header-height) + var(--post-main-header-height));background-color:#fafafa;border:none;border-top:1px solid #e1e0dc;width:100%;border-radius:0;box-shadow:0 8px 6px rgba(0,0,0,.16)}@media screen and (max-width: 1023.99px){post-popovercontainer{--post-global-header-height: 64px;position:absolute;top:var(--post-header-height) !important;bottom:0;left:0;width:100%;height:auto}post-popovercontainer.slide-in{animation:slide-in;animation-duration:350ms;animation-fill-mode:forwards}post-popovercontainer.slide-out{animation:slide-out;animation-duration:350ms;animation-fill-mode:forwards}}.megadropdown{padding:31px 40px 40px}@media screen and (max-width: 1023.99px){.megadropdown{padding:16px 32px 24px}}.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.99px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.99px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown h2{display:block;font-size:20px}}.megadropdown a:hover{border-block-width:0}.megadropdown a:hover::after{content:unset}.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;border-bottom:1px solid #050400;padding:15px 12px 14px 0;display:block;font-weight:900}.megadropdown post-list .list-title h3 a{text-decoration:none;width:100%;font-size:inherit;display:inline-block;font-weight:inherit;height:unset;padding:0;border:0}@media screen and (max-width: 1023.99px){.megadropdown post-list .list-title h3{font-size:16px;padding:12px 12px 11px 0}}.megadropdown post-list-item{border-bottom:1px solid #050400}.megadropdown post-list-item>a{padding:13px 12px 12px 0;display:block;text-decoration:none;width:100%;border-bottom:0;height:auto;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown post-list-item>a{padding:12px 12px 11px 0}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}.megadropdown .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.99px){.megadropdown .back-button{display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.99px){.megadropdown .close-button{display:none}}
+@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(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-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}}

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

@@ -1,59 +1,157 @@
+import { getFocusableChildren } from "../../utils/get-focusable-children";
 import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { breakpoint } from "../../utils/breakpoints";
 export class PostMegadropdown {
     constructor() {
+        this.handleClickOutside = (event) => {
+            if (this.device !== 'desktop')
+                return;
+            const target = event.target;
+            if (this.host.contains(target)) {
+                return;
+            }
+            if (target instanceof HTMLElement) {
+                const trigger = target.closest('post-megadropdown-trigger');
+                if (trigger) {
+                    const targetDropdownId = trigger.getAttribute('for');
+                    if (targetDropdownId !== this.host.id) {
+                        return;
+                    }
+                }
+            }
+            this.hide(false);
+        };
+        this.device = breakpoint.get('name');
         this.isVisible = false;
         this.animationClass = null;
     }
-    componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.postToggleMegadropdown.emit(this.isVisible);
-        });
-        this.popoverRef.addEventListener('animationend', () => {
-            if (this.animationClass === 'slide-out') {
-                this.hide();
-            }
-        });
+    breakpointChange(e) {
+        this.device = e.detail;
+        if (this.device === 'desktop' && this.isVisible) {
+            this.animationClass = null;
+        }
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        if (PostMegadropdown.activeDropdown === this) {
+            PostMegadropdown.activeDropdown = null;
+        }
+    }
+    componentWillRender() {
+        this.getFocusableElements();
     }
     /**
      * Toggles the dropdown visibility based on its current state.
      */
-    async toggle(target) {
-        this.isVisible ? this.hide() : await this.show(target);
+    async toggle() {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            await this.show();
+        }
     }
     /**
-     * Displays the popover dropdown
-     *
-     * @param target - The HTML element relative to which the popover dropdown should be displayed.
+     * Displays the dropdown.
      */
-    async show(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.show(target);
-            this.animationClass = 'slide-in';
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
         }
         else {
-            console.error('show: popoverRef is null or undefined');
+            this.animationClass = 'slide-in';
+        }
+        this.isVisible = true;
+        PostMegadropdown.activeDropdown = this;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
+        if (this.firstFocusableEl &&
+            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
+            this.firstFocusableEl.focus();
         }
+        this.addListeners();
     }
     /**
-     * Hides the popover dropdown
+     * Hides the dropdown with an animation.
      */
-    hide() {
-        if (this.popoverRef) {
-            this.popoverRef.hide();
+    async hide(focusParent = true, forceClose = false) {
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        if (forceClose) {
+            this.forceClose();
         }
         else {
-            console.error('hide: popoverRef is null or undefined');
+            this.animationClass = 'slide-out';
         }
     }
-    handleBackButtonClick() {
-        this.animationClass = 'slide-out';
+    /**
+     * Sets focus to the first focusable element within the component.
+     */
+    async focusFirst() {
+        this.firstFocusableEl?.focus();
     }
-    handleCloseButtonClick() {
-        this.popoverRef.hide();
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    forceClose() {
+        this.isVisible = false;
+        this.animationClass = null;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
+        this.removeListeners();
+    }
+    handleAnimationEnd() {
+        if (this.animationClass === 'slide-out') {
+            this.isVisible = false;
+            this.animationClass = null;
+            PostMegadropdown.activeDropdown = null;
+            this.removeListeners();
+        }
+    }
+    addListeners() {
+        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
+        document.addEventListener('keyup', e => this.handleTabOutside(e));
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+    removeListeners() {
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
+        document.removeEventListener('keyup', e => this.handleTabOutside(e));
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+    getFocusableElements() {
+        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
+        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.device !== 'desktop') {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
+    handleTabOutside(e) {
+        if (e.key === 'Tab' && this.device === 'desktop') {
+            if (!this.host.contains(e.target)) {
+                this.hide(false);
+            }
+        }
     }
     render() {
-        return (h(Host, { key: 'cfd4e6c7bb87c50e471d304a4b4f086266e1c2fe' }, h("post-popovercontainer", { key: '31dc3a5e98a5c60a4db8d47375491a6f3957af0b', class: this.animationClass, placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '7001d0e108544a0244af088be0bde49f90a3dea3', class: "megadropdown" }, h("div", { key: '513b0710163e8f58677b6b50d2ba2d241cf9ff35', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5457c0b9bfff045f39f470e600b5aa31036c0807', name: "back-button" })), h("div", { key: 'c3314a4ae4f386224a2db7fe32203f72f6a1b284', onClick: () => this.handleCloseButtonClick(), class: "close-button" }, h("slot", { key: '8feeec24fe5f2522ba1a54ab0b7c682d3a152086', name: "close-button" })), h("slot", { key: '6d9426756a809ed26045c9cd56cacf0f36aa9400', name: "megadropdown-title" }), h("div", { key: 'fd3b0ac7998eec76700ccc6668d8b2e3fcc4c63a', class: "megadropdown-content" }, h("slot", { key: '23638936fdffa224de9631bfd599c0872202a30d' }))))));
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (h(Host, { key: '7426a12ebaeac0ce3b8402c3da4d5393daca059b', version: version }, h("div", { key: 'd47b60c334577f5662f19912f12ce941b4b52d94', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '2798f217b2b3e43c3c63072884bbbbe7d99ed62f', class: "megadropdown" }, h("slot", { key: 'b61f82bbc7f87f65d9b6957e7a4e5d6790b6dd00', name: "megadropdown-title" }), h("div", { key: 'f4996a819511cb59185faeedbdcec4be6e6f8a24', class: "megadropdown-content" }, h("slot", { key: '54f695c3b3d30a6a1aae7f7dc6f65f4d4d27de68' })), h("div", { key: 'b1334295c7d758e20c85b6c6c8cefc31dcf09e20', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'c4db69fa3207ce4cb47b725e37b1993820a2a64c', name: "back-button" })), h("div", { key: '68b22a3222382586fc749dec63e36edae84360c1', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '8023b75c931a95dbd9552c1a713790e77e40f526', name: "close-button" }))))));
     }
     static get is() { return "post-megadropdown"; }
     static get originalStyleUrls() {
@@ -68,6 +166,7 @@ export class PostMegadropdown {
     }
     static get states() {
         return {
+            "device": {},
             "isVisible": {},
             "animationClass": {}
         };
@@ -81,11 +180,11 @@ export class PostMegadropdown {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits when the dropdown is shown or hidden.\nThe event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed."
+                    "text": "Emits when the dropdown is shown or hidden.\nThe event payload is an object.\n`isVisible` is true when the dropdown gets opened and false when it gets closed\n`focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page"
                 },
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "{ isVisible: boolean; focusParent?: boolean }",
+                    "resolved": "{ isVisible: boolean; focusParent?: boolean; }",
                     "references": {}
                 }
             }];
@@ -94,20 +193,12 @@ export class PostMegadropdown {
         return {
             "toggle": {
                 "complexType": {
-                    "signature": "(target: HTMLElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "target",
-                            "type": "HTMLElement",
-                            "docs": ""
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -119,33 +210,66 @@ export class PostMegadropdown {
             },
             "show": {
                 "complexType": {
-                    "signature": "(target: HTMLElement) => Promise<void>",
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Displays the dropdown.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "(focusParent?: boolean, forceClose?: boolean) => Promise<void>",
                     "parameters": [{
-                            "name": "target",
-                            "type": "HTMLElement",
-                            "docs": "- The HTML element relative to which the popover dropdown should be displayed."
+                            "name": "focusParent",
+                            "type": "boolean",
+                            "docs": ""
+                        }, {
+                            "name": "forceClose",
+                            "type": "boolean",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLElement": {
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the dropdown with an animation.",
+                    "tags": []
+                }
+            },
+            "focusFirst": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
                             "location": "global",
-                            "id": "global::HTMLElement"
+                            "id": "global::Promise"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Displays the popover dropdown",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target - The HTML element relative to which the popover dropdown should be displayed."
-                        }]
+                    "text": "Sets focus to the first focusable element within the component.",
+                    "tags": []
                 }
             }
         };
     }
     static get elementRef() { return "host"; }
 }
+/** Tracks the currently active dropdown instance. */
+PostMegadropdown.activeDropdown = null;

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.css

@@ -1 +1 @@
-post-megadropdown-trigger{width:100%}
+post-megadropdown-trigger{width:100%;position:relative;z-index:3}

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { checkType } from "../../utils/index";
+import { eventGuard } from "../../utils/event-gua";
 export class PostMegadropdownTrigger {
     constructor() {
         /**
@@ -8,6 +9,37 @@ export class PostMegadropdownTrigger {
          * Used to manage click and key events for mega dropdown control.
          */
         this.slottedButton = null;
+        /**
+         * Tracks whether this trigger's dropdown was expanded before a state change.
+         * Used to determine if this trigger should handle focus when its dropdown closes.
+         */
+        this.wasExpanded = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.handleToggle();
+                if (this.megadropdown && !this.ariaExpanded) {
+                    setTimeout(() => this.megadropdown.focusFirst(), 100);
+                }
+            }
+        };
+        this.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 the close button had been clicked
+                    if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
+                        setTimeout(() => {
+                            this.slottedButton?.focus();
+                        }, 100);
+                    }
+                    this.wasExpanded = this.ariaExpanded;
+                    if (this.slottedButton) {
+                        this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                    }
+                }
+            });
+        };
         this.for = undefined;
         this.ariaExpanded = false;
     }
@@ -15,8 +47,8 @@ export class PostMegadropdownTrigger {
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
      */
-    validateControlFor(forValue = this.for) {
-        checkType(forValue, 'string', 'The "for" property is required and should be a string.');
+    validateControlFor() {
+        checkType(this, 'for', 'string');
     }
     get megadropdown() {
         const ref = document.getElementById(this.for);
@@ -26,7 +58,7 @@ export class PostMegadropdownTrigger {
     }
     handleToggle() {
         if (this.megadropdown) {
-            this.megadropdown.toggle(this.host);
+            this.megadropdown.toggle();
         }
         else {
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
@@ -35,27 +67,24 @@ export class PostMegadropdownTrigger {
     componentDidLoad() {
         this.validateControlFor();
         // Check if the mega dropdown attached to the trigger is expanded or not
-        document.addEventListener('postToggleMegadropdown', (event) => {
-            if (event.target.id === this.for) {
-                this.ariaExpanded = event.detail;
-                if (this.slottedButton) {
-                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-                }
-            }
-        });
+        document.addEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
         this.slottedButton = this.host.querySelector('button');
         if (this.slottedButton) {
             this.slottedButton.setAttribute('aria-haspopup', 'menu');
             this.slottedButton.addEventListener('click', () => {
                 this.handleToggle();
             });
+            this.slottedButton.addEventListener('keydown', this.handleKeyDown);
         }
         else {
             console.warn('No button found within post-megadropdown-trigger');
         }
     }
+    disconnectedCallback() {
+        document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
+    }
     render() {
-        return (h(Host, { key: '4ab919adeaa51fc12d45131fa540c76fb3ba73d9', "data-version": version, "tab-index": "-1" }, h("button", { key: 'e7dac321691cdb19a4874fd0b2097227d077af35' }, h("slot", { key: 'beffc38d2d35a67e74364c3b40b6d39896aa4de3' }))));
+        return (h(Host, { key: '86b85efede8d9b19f3f0560f500f33f5e172177f', "data-version": version, "tab-index": "-1" }, h("button", { key: '0f810e4c38bc4abf23ac60ab27b36d408e7ced0d' }, h("slot", { key: '2a522ac7e15ef8ac077b73cdebf629b89ea173c6' }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/post-menu/post-menu.css

@@ -1,3 +1 @@
-/*!
- * Copyright 2021 by Swiss Post, Information Technology
- */:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}
+@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}.popover-container{display:flex;flex-direction:column}