@swisspost/design-system-components 10.0.0-next.54 → 10.0.0-next.56

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

@@ -12,24 +12,23 @@ import { h, Host } from "@stencil/core";
 import { throttle } from "throttle-debounce";
 import { version } from "../../../../package";
 import { breakpoint } from "../../utils/breakpoints";
-import { slideDown, slideUp } from "../../animations/slide";
-import { getFocusableChildren } from "../../utils/get-focusable-children";
+import { fade } from "../../animations/index";
+import { getDeepFocusableChildren } from "../../utils/get-focusable-children";
 import { EventFrom } from "../../utils/event-from";
+import { checkRequiredAndType } from "../../utils/index";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
- * @slot global-controls - Holds search button in the global header.
- * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
- * @slot post-togglebutton - Holds the mobile menu toggler.
- * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
+ * @slot global-nav-primary - Holds search button in the global header.
+ * @slot global-nav-secondary - Holds an `<ul>` with meta navigation links.
+ * @slot language-menu - Should be used with the `<post-language-switch>` component.
  * @slot title - Holds the application title.
- * @slot default - Custom controls or content, right aligned in the local header.
- * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
- * @slot target-group - Holds the list of buttons to choose the target group.
- * @slot global-login - Holds the user menu or login button in the global header.
- * @slot navigation-controls - Custom controls, right aligned with the main navigation.
+ * @slot main-nav - Has a default slot because it's only meant to be used in the `<post-header>`.
+ * @slot audience - Holds the list of buttons to choose the audience.
+ * @slot post-login - Holds the user menu or login button in the global header.
+ * @slot local-nav - Holds controls specific to the current application.
  */
 export class PostHeader {
-    get hasMobileMenu() {
+    get hasBurgerMenu() {
         return this.device !== 'desktop' && this.hasNavigation;
     }
     get scrollParent() {
@@ -46,10 +45,13 @@ export class PostHeader {
         }
         return document.body;
     }
+    validateTextMenu() {
+        checkRequiredAndType(this, 'textMenu', 'string');
+    }
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
-        const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
-        if (this.device !== 'desktop' && mobileMenuExtended) {
+        const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
+        if (this.device !== 'desktop' && burgerMenuExtended) {
             scrollParent.setAttribute('data-post-scroll-locked', '');
             this.host.addEventListener('keydown', this.keyboardHandler);
         }
@@ -60,16 +62,22 @@ export class PostHeader {
     }
     constructor() {
         this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
+        this.animationOptions = {
+            duration: 350,
+            easing: 'headerEase',
+        };
         this.device = breakpoint.get('device');
         this.hasNavigation = false;
+        this.hasLocalNav = false;
+        this.hasAudience = false;
         this.hasTitle = false;
-        this.mobileMenuExtended = false;
+        this.burgerMenuExtended = false;
         this.megadropdownOpen = false;
         this.breakpointChange = (e) => {
             this.device = e.detail;
             this.switchLanguageSwitchMode();
-            if (this.device === 'desktop' && this.mobileMenuExtended) {
-                this.closeMobileMenu();
+            if (this.device === 'desktop' && this.burgerMenuExtended) {
+                this.closeBurgerMenu();
             }
             if (this.device !== 'desktop') {
                 Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
@@ -78,14 +86,14 @@ export class PostHeader {
                 this.megadropdownOpen = false;
             }
         };
-        this.megadropdownStateHandler = (event) => {
-            this.megadropdownOpen = event.detail.isVisible;
-        };
         this.handleScrollEvent = this.handleScrollEvent.bind(this);
         this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
         this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
         this.keyboardHandler = this.keyboardHandler.bind(this);
         this.handleLinkClick = this.handleLinkClick.bind(this);
+        this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
+        this.checkSlottedContent = this.checkSlottedContent.bind(this);
+        this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
     }
     connectedCallback() {
         window.addEventListener('resize', this.throttledResize, { passive: true });
@@ -96,23 +104,23 @@ export class PostHeader {
             passive: true,
         });
         document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
-        this.host.addEventListener('click', this.handleLinkClick);
         window.addEventListener('postBreakpoint:device', this.breakpointChange);
-        this.checkNavigationExistence();
-        this.checkTitleExistence();
-        this.switchLanguageSwitchMode();
         this.handleScrollParentResize();
-        this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
+        this.lockBody(false, this.burgerMenuExtended, 'burgerMenuExtended');
     }
     componentWillRender() {
         this.handleScrollEvent();
+        this.handleSlottedContentChanges();
+        this.switchLanguageSwitchMode();
     }
     componentDidRender() {
+        this.validateTextMenu();
         this.getFocusableElements();
         this.handleLocalHeaderResize();
     }
     componentDidLoad() {
         this.updateLocalHeaderHeight();
+        this.host.shadowRoot.addEventListener('click', this.handleLinkClick);
     }
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
@@ -124,7 +132,9 @@ export class PostHeader {
             scrollParent.removeEventListener('scroll', this.handleScrollEvent);
         document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.removeEventListener('keydown', this.keyboardHandler);
-        this.host.removeEventListener('click', this.handleLinkClick);
+        if (this.host.shadowRoot) {
+            this.host.shadowRoot.removeEventListener('click', this.handleLinkClick);
+        }
         if (this.scrollParentResizeObserver) {
             this.scrollParentResizeObserver.disconnect();
             this.scrollParentResizeObserver = null;
@@ -133,81 +143,72 @@ export class PostHeader {
             this.localHeaderResizeObserver.disconnect();
             this.localHeaderResizeObserver = null;
         }
-        this.mobileMenuExtended = false;
-    }
-    checkNavigationExistence() {
-        this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
-    }
-    checkTitleExistence() {
-        this.hasTitle = this.host.querySelectorAll('[slot="title"]').length > 0;
-    }
-    async closeMobileMenu() {
-        this.mobileMenuAnimation.finish();
-        const menuButton = this.getMenuButton();
-        if (menuButton) {
-            menuButton.toggled = false;
+        if (this.slottedContentObserver) {
+            this.slottedContentObserver.disconnect();
+            this.slottedContentObserver = null;
         }
-        this.mobileMenuExtended = false;
+        this.burgerMenuExtended = false;
+    }
+    async closeBurgerMenu() {
+        this.burgerMenuAnimation?.finish();
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.toggled = false;
+        this.burgerMenuExtended = false;
     }
     /**
-     * Toggles the mobile navigation.
+     * Toggles the burger navigation menu.
      */
-    async toggleMobileMenu(force) {
+    async toggleBurgerMenu(force) {
         if (this.device === 'desktop')
             return;
-        this.mobileMenuAnimation = this.mobileMenuExtended
-            ? slideUp(this.mobileMenu)
-            : slideDown(this.mobileMenu);
+        this.burgerMenuAnimation = this.burgerMenuExtended
+            ? fade(this.burgerMenu, 'out', this.animationOptions)
+            : fade(this.burgerMenu, 'in', this.animationOptions);
         // Update the state of the toggle button
-        const menuButton = this.host.querySelector('post-togglebutton');
-        menuButton.toggled = force ?? !this.mobileMenuExtended;
-        if (this.mobileMenuExtended) {
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.toggled = force ?? !this.burgerMenuExtended;
+        if (this.burgerMenuExtended) {
             // Wait for the close animation to finish before hiding megadropdowns
-            await this.mobileMenuAnimation.finished;
-            this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
-            if (this.mobileMenuExtended === false) {
+            await this.burgerMenuAnimation.finished;
+            this.burgerMenuExtended = force ?? !this.burgerMenuExtended;
+            if (this.burgerMenuExtended === false) {
                 this.closeAllMegadropdowns();
+                this.burgerMenu.scrollTop = 0;
             }
         }
         else {
-            this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
+            this.burgerMenuExtended = force ?? !this.burgerMenuExtended;
             // If opening, close any open megadropdowns immediately
             if (this.megadropdownOpen) {
                 this.closeAllMegadropdowns();
             }
         }
     }
-    // Get all the focusable elements in the post-header mobile menu
+    megadropdownStateHandler(event) {
+        this.megadropdownOpen = event.detail.isVisible;
+    }
+    // Get all the focusable elements in the post-header burger menu
     getFocusableElements() {
-        // Get elements in the correct order (different as the DOM order)
-        const focusableEls = [
-            ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
-            ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-megadropdown-trigger')),
-            ...Array.from(this.host.querySelectorAll('.list-inline[slot="meta-navigation"] > li, post-language-option')),
-        ];
-        // Add the main toggle menu button to the list of focusable children
-        const focusableChildren = [
-            this.host.querySelector('post-togglebutton'),
-            ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
-        ];
-        this.firstFocusableEl = focusableChildren[0];
-        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
-    }
-    getMenuButton() {
-        return this.host.querySelector('post-togglebutton');
+        if (!this.burgerMenu)
+            return;
+        const focusableElements = [this.burgerMenuButton];
+        focusableElements.push(...getDeepFocusableChildren(this.localHeader, el => !el.matches('post-megadropdown')), ...getDeepFocusableChildren(this.burgerMenu, el => !el.matches('post-megadropdown')));
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements[focusableElements.length - 1];
     }
     keyboardHandler(e) {
-        if (e.key === 'Tab' && this.mobileMenuExtended) {
-            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();
-            }
+        if (e.key !== 'Tab' || !this.burgerMenuExtended)
+            return;
+        const activeElement = this.host.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey && 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 && 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();
         }
     }
     closeAllMegadropdowns() {
@@ -218,7 +219,7 @@ export class PostHeader {
     }
     handleScrollEvent() {
         const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
-        document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
+        document.documentElement.style.setProperty('--post-header-scroll-top', `${Math.max(scrollTop, 0)}px`);
     }
     updateLocalHeaderHeight() {
         const localHeaderElement = this.host.shadowRoot.querySelector('.local-header');
@@ -236,8 +237,8 @@ export class PostHeader {
         if (!isLinkInMainNav && !isLinkInMegadropdown) {
             return;
         }
-        if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
-            this.toggleMobileMenu(false);
+        if (this.burgerMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
+            this.toggleBurgerMenu(false);
         }
         if (this.device === 'desktop' && isLinkInMegadropdown) {
             const megadropdownLink = target.closest('post-megadropdown a');
@@ -259,28 +260,69 @@ export class PostHeader {
             this.localHeaderResizeObserver.observe(localHeader);
         }
     }
+    handleSlottedContentChanges() {
+        if (!this.slottedContentObserver) {
+            this.checkSlottedContent();
+            this.slottedContentObserver = new MutationObserver(this.checkSlottedContent);
+            this.slottedContentObserver.observe(this.host, { childList: true });
+        }
+    }
+    checkSlottedContent() {
+        this.hasNavigation = !!this.host.querySelector('[slot="main-nav"]');
+        this.hasLocalNav = !!this.host.querySelector('[slot="local-nav"]');
+        this.hasAudience = !!this.host.querySelector('[slot="audience"]');
+        this.hasTitle = !!this.host.querySelector('[slot="title"]');
+    }
     switchLanguageSwitchMode() {
-        const variant = this.hasMobileMenu ? 'list' : 'menu';
-        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
+        const variant = this.hasBurgerMenu ? 'list' : 'menu';
+        Array.from(this.host.querySelectorAll('post-language-menu')).forEach(languageSwitch => {
             languageSwitch?.setAttribute('variant', variant);
         });
     }
+    onFocusChange(e) {
+        const alwaysVisibleElements = this.device === 'desktop'
+            ? '.navigation' // logo isn’t included since it would be too small to focus on effectively.
+            : '.global-header, .burger-menu';
+        const isHeaderExpanded = 
+        // ensure the expanded state stays accurate during focus changes,
+        // e.g., when the focused element is removed from the DOM
+        // during a window resize
+        e.target === document.activeElement &&
+            this.host.matches(':focus-within') &&
+            !this.host.shadowRoot.querySelector(`:where(${alwaysVisibleElements}):focus-within`);
+        if (isHeaderExpanded) {
+            this.host.setAttribute('data-expanded', '');
+        }
+        else {
+            this.host.removeAttribute('data-expanded');
+        }
+    }
     renderNavigation() {
-        const mainNavigation = (h("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }));
+        const localNav = !this.hasTitle && (h("div", { class: "local-nav" }, h("slot", { name: "local-nav" })));
         if (this.device === 'desktop') {
-            return (h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, mainNavigation, h("slot", { name: "navigation-controls" })));
+            return (h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, h("slot", { name: "main-nav" }), localNav));
         }
-        return (h("div", { class: { navigation: true, extended: this.mobileMenuExtended }, style: { '--post-header-navigation-current-inset': `${this.mobileMenu?.scrollTop ?? 0}px` } }, h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, h("div", { class: "navigation-header" }, h("slot", { name: "navigation-controls" }), h("slot", { name: "target-group" })), mainNavigation, h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
+        return (h("div", { class: {
+                'burger-menu': true,
+                'extended': this.burgerMenuExtended,
+                'no-local-nav': !this.hasLocalNav,
+                'megadropdown-open': this.megadropdownOpen,
+            }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, localNav, h("div", { class: "burger-menu-body" }, h("slot", { name: "audience" }), h("slot", { name: "main-nav" })), h("div", { class: "burger-menu-footer" }, h("slot", { name: "global-nav-secondary" }), h("slot", { name: "language-menu" }))));
     }
     render() {
-        const localHeaderClasses = ['local-header'];
-        if (this.mobileMenuExtended)
-            localHeaderClasses.push('local-header-mobile-extended');
-        if (this.device !== 'desktop' || !this.hasNavigation)
-            localHeaderClasses.push('no-navigation');
-        if (!this.hasTitle)
-            localHeaderClasses.push('no-title');
-        return (h(Host, { key: 'fd3c4a534af28b2e35f4a02502283e04be0d9683', "data-version": version, "data-color-scheme": "light" }, h("div", { key: '61c70adea7525d3daa7690ac9243c7697df5c8bc', class: "global-header" }, h("div", { key: '1fdb106a9624a07d3ad3fd1cb4eade9b05282ab5', class: "global-sub" }, h("div", { key: '2c62bccfa8d5fa9642528db265e76aac0d13022c', class: "logo" }, h("slot", { key: '75b87c2428b7ccad6940976e46156b807257cbc5', name: "post-logo" }))), h("div", { key: 'c1950198cbac96132ca5b1c886bb94238c53b903', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '2e695987df3da854db3ec18cc4b1283d0f06dfd1', name: "target-group" })), h("div", { key: '50366842180e3aae87d4e4da68a8f73c2f62c347', class: "global-sub" }, h("slot", { key: '7eba07e3dddbc26843a50b39a69953a01d9e2a5e', name: "global-controls" }), !this.hasMobileMenu && h("slot", { key: 'aa9fc50e2eb8eee4e3d9de76ccbf564ac30a8d03', name: "meta-navigation" }), !this.hasMobileMenu && h("slot", { key: '7742f0d0e30d5b0d90ca9352fec72e49a97ec3cb', name: "post-language-switch" }), h("slot", { key: 'a3545c4bb2a61c00105763059f3bd66ddd829681', name: "global-login" }), this.hasNavigation && (h("div", { key: 'bb8df618571ea8cadb89b0cd8d50bba7c0dec038', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '83b9542127213e39644c280cf9f4e19aaf3f071a', name: "post-togglebutton" }))))), h("div", { key: '2ab719d2610d46050fc99345237b7b9cc54fd467', class: localHeaderClasses.join(' ') }, h("slot", { key: '0e02b3f7421a1c67e99fdc92aadcf61153665820', name: "title", onSlotchange: () => this.checkTitleExistence() }), this.hasTitle && (h("div", { key: '94b091a29727bd556a4907ac4bdb2f8757483135', class: "local-sub" }, h("slot", { key: '7647015350e21278b104ff4538525abeaea98442', name: "local-controls" }), h("slot", { key: '4e42d3fe5c4f676b7bb836c976c1d7e59a1052ae' }))), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: '15de1ff6ccac94813df10fc0b41a518de68dee94', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '0af40c8b8944c7ffcf2bf0fe704671f4012ae8c8' }, h("div", { key: 'cd4564c5c375c015c673df195ba04fe4d89ff1c2', class: {
+                'global-header': true,
+                'no-audience': !this.hasAudience,
+            } }, h("div", { key: 'c4ad8a22fed57e54266c6584548f5203a499b63c', class: "logo" }, h("slot", { key: 'bf86f7ccf2e46263365023f287f18305160cede6', name: "post-logo" })), h("div", { key: 'e89c405cf97ddb08850d3b15ab8977e7e484ba73', class: "sliding-controls" }, this.device === 'desktop' && (h("div", { key: 'c3e9f49a105894d0df44a3d2654065b452292154', class: "audience" }, h("slot", { key: '20effc0592ca8665de464cc5d45d11ef02894acb', name: "audience" }))), h("slot", { key: 'f0ca8a59134520ccbb38907e32bedd4c05800d36', name: "global-nav-primary" }), !this.hasBurgerMenu && [
+            h("slot", { key: '7e2b2982403f491f083fc9f32cee46cbaeca7c50', name: "global-nav-secondary" }),
+            h("slot", { key: '3e7b5f6cb16b2cf2bc64b9b11c70f8b363e80134', name: "language-menu" }),
+        ], h("slot", { key: 'd91059cc4dd4529040aa6436db46f66f2db84e71', name: "post-login" }), this.hasNavigation && this.device !== 'desktop' && (h("div", { key: 'f97161e09b27c11c6f85d112e85a59ddf2925aec', onClick: () => this.toggleBurgerMenu(), class: "burger-menu-toggle" }, h("slot", { key: '18304b858fa2173b63e842ba4d0512bd438a89b0', name: "post-togglebutton" }))), this.hasNavigation && this.device !== 'desktop' && (h("post-togglebutton", { key: '0599e4d106262b7be6557b476becacaf9f5656ba', ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: '3f3578f6172a9d87c531b5bef6a201b255042511' }, this.textMenu), h("post-icon", { key: '7a92cec5793716225cf9dc4646ccff585e02723b', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '9170844d117e8f0bf7f35049debe973ff391158e', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" }))))), h("div", { key: 'db13d084905b4633595bb1d4d83cc88c82c3c679', ref: el => (this.localHeader = el), class: {
+                'local-header': true,
+                'no-title': !this.hasTitle,
+                'no-audience': !this.hasAudience,
+                'no-navigation': this.device !== 'desktop' || !this.hasNavigation,
+                'no-local-nav': !this.hasLocalNav,
+            } }, h("slot", { key: 'f6fb25aef128bf1712995427014c5ff62c3710d0', name: "title" }), this.hasTitle && h("slot", { key: '8cba1c7b544d950140d59336baaf7398a4fb23d8', name: "local-nav" }), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation())));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -294,18 +336,43 @@ export class PostHeader {
             "$": ["post-header.css"]
         };
     }
+    static get properties() {
+        return {
+            "textMenu": {
+                "type": "string",
+                "attribute": "text-menu",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the burger menu button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
     static get states() {
         return {
             "device": {},
             "hasNavigation": {},
+            "hasLocalNav": {},
+            "hasAudience": {},
             "hasTitle": {},
-            "mobileMenuExtended": {},
+            "burgerMenuExtended": {},
             "megadropdownOpen": {}
         };
     }
     static get methods() {
         return {
-            "toggleMobileMenu": {
+            "toggleBurgerMenu": {
                 "complexType": {
                     "signature": "(force?: boolean) => Promise<void>",
                     "parameters": [{
@@ -317,16 +384,12 @@ export class PostHeader {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLPostTogglebuttonElement": {
-                            "location": "global",
-                            "id": "global::HTMLPostTogglebuttonElement"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggles the mobile navigation.",
+                    "text": "Toggles the burger navigation menu.",
                     "tags": []
                 }
             }
@@ -335,14 +398,32 @@ export class PostHeader {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "textMenu",
+                "methodName": "validateTextMenu"
+            }, {
                 "propName": "device",
                 "methodName": "lockBody"
             }, {
-                "propName": "mobileMenuExtended",
+                "propName": "burgerMenuExtended",
                 "methodName": "lockBody"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "onFocusChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     EventFrom('post-megadropdown')
-], PostHeader.prototype, "megadropdownStateHandler", void 0);
+], PostHeader.prototype, "megadropdownStateHandler", null);

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

@@ -63,9 +63,11 @@ export class PostIcon {
         const baseHref = IS_BROWSER
             ? document.querySelector('base[href]')?.getAttribute('href') || ''
             : '';
-        const metaIconBase = IS_BROWSER
-            ? document.querySelector('meta[name="design-system-settings"]')?.getAttribute('data-post-icon-base') || ''
-            : '';
+        let metaIconBase = '';
+        if (IS_BROWSER) {
+            const metaTag = document.querySelector('meta[name="design-system-settings"]');
+            metaIconBase = metaTag?.getAttribute('data-post-icon-base') || '';
+        }
         // Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
         const buildUrlWithBase = (relativeUrl) => {
             const normalizedHref = normalizeUrl(baseHref);
@@ -112,7 +114,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '0031b3e2e4016f9b28cade66fa435741940946a7', "data-version": version }, h("span", { key: '0efbcdd5f1dd737640238a0ab81b67ca8218adec', style: this.getStyles() })));
+        return (h(Host, { key: '6469b748f2792c383593dacd1d9f1f17daf9cde0', "data-version": version }, h("span", { key: '9f4d9766dc97a07a2562dbc3bb0931de29fe9757', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1 @@
+:host{display:flex !important}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-menu-dropdown-container{display:flex;flex-direction:column}.post-language-menu-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);text-transform:uppercase;cursor:pointer}.post-language-menu-trigger:hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash)}.post-language-menu-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-menu-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-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-menu-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-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger:is(a){color:LinkText;border:unset}.post-language-menu-trigger:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.post-language-menu-trigger:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.post-language-menu-trigger:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.post-language-menu-trigger: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-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.post-language-menu-trigger post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}post-menu::part(post-menu){padding-block:0}.post-language-menu-list{margin-top:1rem}