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

package/dist/components/post-header.js

@@ -1,34 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { t as throttle, b as breakpoint } from './breakpoints.js';
+import { c as checkRequiredAndType, t as throttle, g as breakpoint } from './breakpoints.js';
 import { v as version } from './package.js';
-import { g as getFocusableChildren } from './get-focusable-children.js';
+import { f as fade } from './fade.js';
+import { a as getDeepFocusableChildren } from './get-focusable-children.js';
 import { E as EventFrom } from './event-from.js';
+import { d as defineCustomElement$3 } from './post-icon2.js';
+import { d as defineCustomElement$2 } from './post-togglebutton2.js';
 
-const easing = 'ease';
-const duration = 500;
-const fill = 'forwards';
-function slideUp(el, translateSize = '-100%') {
-    return el.animate([
-        { transform: 'translateY(0)' }, // Starting position (no translation)
-        { transform: `translateY(${translateSize})` }, // End position
-    ], {
-        duration: duration,
-        easing,
-        fill,
-    });
-}
-function slideDown(el, translateSize = '-100%') {
-    return el.animate([
-        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
-        { transform: 'translateY(0)' }, // End position
-    ], {
-        duration: duration,
-        easing,
-        fill,
-    });
-}
-
-const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-logo-height:calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-local-header-top:calc( var(--post-global-header-reduced-height) + var(--post-local-header-reduced-height) - var(--post-local-header-expanded-height) );--post-global-controls-top:clamp( 1000 * var(--post-global-header-top),  calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-expanded-height);--post-logo-height:var(--post-global-header-expanded-height);--post-global-controls-top:0}}.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-expanded-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:8px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-header:has(+.local-header.no-navigation.no-title){box-shadow:var(--post-device-elevation-300)}.global-sub{display:flex;align-items:center;gap:4px}@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(--post-global-controls-top)}.global-sub:not(:last-child):not(:first-child){flex-grow:1}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-expanded-height);width:var(--post-global-header-expanded-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(--post-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;inset-block-start:var(--post-local-header-top);flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-expanded-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;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}.local-header:not(.no-title){padding-block-start:18px}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;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-header.no-navigation{padding-block:0}.local-header.no-navigation .navigation{display:none}.local-header.no-navigation.no-title{display:none}.local-sub{margin-inline-end:16px}@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{display:flex;align-items:center;justify-content:space-between;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:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{padding-block:16px 24px;padding-inline:40px}.navigation-header,::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column}.navigation.extended .navigation-header,.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){padding-block:24px}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-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}.navigation-footer{background-color:#f0efed;gap:24px}.navigation-footer ::slotted(post-language-switch){margin-top:16px}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.navigation-footer{gap:16px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
+const postHeaderCss = ":host{--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-header-top:calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height:calc( var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px) );--post-global-controls-top:clamp(  1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc( -1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height)) ), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap:0.25rem;--post-global-header-padding-inline-start:0.25rem;--post-global-header-padding-inline-end:0.5rem;--post-local-header-padding-inline-start:0.75rem;--post-local-header-padding-inline-end:0.5rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap:0.75rem 0.25rem;--post-global-header-padding-inline-start:0.25rem;--post-global-header-padding-inline-end:0.25rem;--post-local-header-padding-inline-start:0.75rem;--post-local-header-padding-inline-end:0.25rem;--post-local-header-padding-block:0rem;--post-burger-menu-padding-inline:2.5rem;--post-burger-menu-body-gap:2rem;--post-burger-menu-footer-gap:1.5rem}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline:1rem}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap:0.75rem 0.25rem;--post-global-header-padding-inline-start:0rem;--post-global-header-padding-inline-end:0.5rem;--post-local-header-padding-inline-start:0.5rem;--post-local-header-padding-inline-end:0.5rem;--post-local-header-padding-block:0rem;--post-burger-menu-padding-inline:1rem;--post-burger-menu-body-gap:1.5rem;--post-burger-menu-footer-gap:1rem}}:host([data-expanded]),:host([data-menu-extended]){--post-header-top:0;--post-global-header-top:-0.001px;--post-global-controls-top:0;--post-logo-height:var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,header,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.global-header,.local-header,.burger-menu{box-shadow:var(--post-device-elevation-300)}.global-header,.sliding-controls,.local-header,.navigation{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap)}:host{container-type:inline-size;display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020}:host post-togglebutton{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)}:host post-togglebutton:hover{text-decoration:none}:host post-togglebutton:disabled{border-style:var(--post-core-border-style-dash)}:host post-togglebutton{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 post-togglebutton: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 post-togglebutton:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host post-togglebutton: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 post-togglebutton: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){:host post-togglebutton:is(a){color:LinkText;border:unset}:host post-togglebutton:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}:host post-togglebutton:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}:host post-togglebutton:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}:host post-togglebutton: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)}:host post-togglebutton: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)}:host post-togglebutton: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)}@media screen and (min-width: 0)and (max-width: 599.98px){:host post-togglebutton{padding:.625rem}:host post-togglebutton>:not(post-icon){display:none}:host post-togglebutton>post-icon{font-size:1.5rem}}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0;height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header:has(~.local-header:not(.no-title.no-navigation)),.global-header:has(~.burger-menu.extended){box-shadow:none}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:calc(1.25rem - var(--post-header-gap))}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .audience{margin-inline-end:auto}.global-header.no-audience .audience{display:none}.local-header{position:relative;flex-wrap:wrap;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}.local-header:not(.no-title,.no-navigation){padding-block-start:1.125rem}.local-header.no-title.no-navigation{display:none}.local-header:has(.navigation.megadropdown-open),.local-header:has(~.burger-menu.extended){box-shadow:none}.local-header:has(.navigation.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:\"\";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .navigation{flex:1 0 100%;height:var(--post-main-navigation-height);margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));max-width:100cqw}.local-header.no-navigation .navigation{display:none}.local-header .local-nav{flex:0 0 auto}.local-header.no-local-nav .navigation{margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end))}.local-header.no-local-nav .local-nav{display:none}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu.extended.megadropdown-open{overflow:hidden}.burger-menu:not(.extended){transform:translateY(-100%);display:none}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:1.5rem;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block:1rem 1.5rem;gap:var(--post-burger-menu-footer-gap)}.burger-menu .local-nav{min-height:3.5rem;display:flex;align-items:center;justify-content:flex-end;padding-inline:.25rem}.burger-menu.no-local-nav .local-nav{display:none}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -41,7 +20,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
-    get hasMobileMenu() {
+    get hasBurgerMenu() {
         return this.device !== 'desktop' && this.hasNavigation;
     }
     get scrollParent() {
@@ -58,10 +37,13 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         }
         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);
         }
@@ -75,16 +57,22 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         this.__registerHost();
         this.__attachShadow();
         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 => {
@@ -93,14 +81,14 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
                 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 });
@@ -111,23 +99,23 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             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() {
@@ -139,7 +127,9 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             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;
@@ -148,81 +138,72 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             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
-    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];
+    megadropdownStateHandler(event) {
+        this.megadropdownOpen = event.detail.isVisible;
     }
-    getMenuButton() {
-        return this.host.querySelector('post-togglebutton');
+    // Get all the focusable elements in the post-header burger menu
+    getFocusableElements() {
+        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() {
@@ -233,7 +214,7 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
     }
     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');
@@ -251,8 +232,8 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         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');
@@ -274,60 +255,116 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             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())));
     }
     get host() { return this; }
     static get watchers() { return {
+        "textMenu": ["validateTextMenu"],
         "device": ["lockBody"],
-        "mobileMenuExtended": ["lockBody"]
+        "burgerMenuExtended": ["lockBody"]
     }; }
     static get style() { return postHeaderCss; }
 }, [1, "post-header", {
+        "textMenu": [513, "text-menu"],
         "device": [32],
         "hasNavigation": [32],
+        "hasLocalNav": [32],
+        "hasAudience": [32],
         "hasTitle": [32],
-        "mobileMenuExtended": [32],
+        "burgerMenuExtended": [32],
         "megadropdownOpen": [32],
-        "toggleMobileMenu": [64]
-    }, undefined, {
+        "toggleBurgerMenu": [64]
+    }, [[0, "focusin", "onFocusChange"], [0, "focusout", "onFocusChange"]], {
+        "textMenu": ["validateTextMenu"],
         "device": ["lockBody"],
-        "mobileMenuExtended": ["lockBody"]
+        "burgerMenuExtended": ["lockBody"]
     }]);
 __decorate([
     EventFrom('post-megadropdown')
-], PostHeader$1.prototype, "megadropdownStateHandler", void 0);
+], PostHeader$1.prototype, "megadropdownStateHandler", null);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-header"];
+    const components = ["post-header", "post-icon", "post-togglebutton"];
     components.forEach(tagName => { switch (tagName) {
         case "post-header":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PostHeader$1);
             }
             break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-togglebutton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

package/dist/components/post-icon2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { d as checkEmptyOrOneOf, e as checkEmptyOrType, c as checkRequiredAndType } from './index2.js';
+import { I as IS_BROWSER } from './environment.js';
+import { d as checkEmptyOrOneOf, e as checkEmptyOrType, c as checkRequiredAndType } from './breakpoints.js';
 import { v as version } from './package.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)}}";
@@ -67,9 +67,11 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         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);
@@ -116,7 +118,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         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() })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-language-menu-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostLanguageMenuItem extends Components.PostLanguageMenuItem, HTMLElement {}
+export const PostLanguageMenuItem: {
+    prototype: PostLanguageMenuItem;
+    new (): PostLanguageMenuItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-language-menu-item.js

@@ -0,0 +1,98 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as checkRequiredAndType, d as checkEmptyOrOneOf, e as checkEmptyOrType, a as checkEmptyOrUrl } from './breakpoints.js';
+import { v as version } from './package.js';
+import { S as SWITCH_VARIANTS } from './switch-variants.js';
+
+const postLanguageMenuItemCss = "post-language-menu-item{display:inline-block}post-language-menu-item 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}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item button{background-color:ButtonFace !important}post-language-menu-item button:hover{background-color:Highlight !important}}post-language-menu-item button .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-item a{color:var(--post-current-fg);text-decoration:none}post-language-menu-item :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}post-language-menu-item :is(a,button){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-item :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-menu-item :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-menu-item:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-menu-item:where([variant=list]) :is(a,button):hover{color:#504f4b}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-menu-item:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-menu-item:where([variant=menu]){min-width:72px}post-language-menu-item:where([variant=menu])[active]:not([active=false]){display:none}post-language-menu-item:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative;border-radius:0}post-language-menu-item:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-menu-item:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-menu-item:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}";
+
+const PostLanguageMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageMenuItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.postChange = createEvent(this, "postChange", 7);
+        this.postLanguageMenuItemInitiallyActive = createEvent(this, "postLanguageMenuItemInitiallyActive", 7);
+    }
+    validateCode() {
+        checkRequiredAndType(this, 'code', 'string');
+    }
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+    }
+    validateName() {
+        checkEmptyOrType(this, 'name', 'string');
+    }
+    validateUrl() {
+        checkEmptyOrUrl(this, 'url');
+    }
+    componentDidLoad() {
+        this.validateCode();
+        this.validateName();
+        this.validateUrl();
+        if (!this.name && this.isNameRequired()) {
+            throw new Error('The "name" property of the post-language-menu-item component is required when the full language name is not displayed.');
+        }
+        if (this.active) {
+            this.postLanguageMenuItemInitiallyActive.emit(this.code);
+        }
+    }
+    /**
+     * Selects the language option programmatically.
+     */
+    async select() {
+        this.active = true;
+        this.emitChange();
+    }
+    emitChange() {
+        this.postChange.emit(this.code);
+    }
+    isNameRequired() {
+        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
+    }
+    render() {
+        const lang = this.code.toLowerCase();
+        const emitOnKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.emitChange();
+            }
+        };
+        return (h(Host, { key: '0a0f6a2e04d61991696e86fa9a20b34d154e89ac', "data-version": version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "code": ["validateCode"],
+        "variant": ["validateVariant"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }; }
+    static get style() { return postLanguageMenuItemCss; }
+}, [4, "post-language-menu-item", {
+        "code": [513],
+        "active": [1540],
+        "variant": [1],
+        "name": [1],
+        "url": [1],
+        "select": [64]
+    }, undefined, {
+        "code": ["validateCode"],
+        "variant": ["validateVariant"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-language-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-language-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostLanguageMenuItem$1);
+            }
+            break;
+    } });
+}
+
+const PostLanguageMenuItem = PostLanguageMenuItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLanguageMenuItem, defineCustomElement };

package/dist/components/{post-language-switch.d.ts → post-language-menu.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface PostLanguageSwitch extends Components.PostLanguageSwitch, HTMLElement {}
-export const PostLanguageSwitch: {
-    prototype: PostLanguageSwitch;
-    new (): PostLanguageSwitch;
+interface PostLanguageMenu extends Components.PostLanguageMenu, HTMLElement {}
+export const PostLanguageMenu: {
+    prototype: PostLanguageMenu;
+    new (): PostLanguageMenu;
 };
 /**
  * Used to define this component and all nested components recursively.