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

package/dist/esm/{post-closebutton_15.entry.js → post-closebutton_13.entry.js}

@@ -1,16 +1,19 @@
-import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-CFNKgUjL.js';
-import { v as version } from './package-BXRsHuTS.js';
-import { d as checkEmptyOrOneOf, a as checkEmptyOrType, c as checkRequiredAndType, g as checkEmptyOrUrl } from './index-VmK3ABCB.js';
-import { t as throttle, b as breakpoint, I as IS_BROWSER } from './breakpoints-CJ80BZ06.js';
-import { a as getFocusableChildren } from './get-focusable-children-D9ZHp2FP.js';
-import { E as EventFrom } from './event-from-CzIKqBrS.js';
+import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-1ReqxAnI.js';
+import { v as version } from './package-DZ5m2Ttg.js';
+import { f as checkEmptyOrOneOf, c as checkRequiredAndType, t as throttle, e as breakpoint, b as checkEmptyOrType, i as checkEmptyOrUrl } from './breakpoints-DYoSKGHO.js';
+import { f as fade } from './fade-DsgPYmAa.js';
+import { g as getDeepFocusableChildren, a as getFocusableChildren } from './get-focusable-children-BXNs2_sw.js';
+import { E as EventFrom } from './event-from-rEfV4v4a.js';
+import { a as IS_BROWSER } from './environment-CEmnRoA6.js';
 import { n as nanoid } from './index.browser-BLchVpF6.js';
+import { r as resolveEasing } from './utils-CoDiS_Ik.js';
+import { f as fadeSlide } from './fade-slide-CvOvauo9.js';
 import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
-import { g as getRoot } from './get-root-BkQ3CrLq.js';
+import { g as getRoot } from './get-root-CXfAA093.js';
 
 const BUTTON_TYPES = ['button', 'submit', 'reset'];
 
-const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);display:flex;align-items:center;justify-content:center}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
+const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);display:flex;align-items:center;justify-content:center}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn{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-closebutton .btn: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-closebutton .btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-closebutton .btn: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-closebutton .btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
 
 const PostClosebutton = class {
     constructor(hostRef) {
@@ -46,7 +49,7 @@ const PostClosebutton = class {
         }
     }
     render() {
-        return (h(Host, { key: '9b5bb7e95c6cf3039119ce485e963ac672834bc3', "data-version": version }, h("button", { key: '084709a7c632a8c665905a667fa6498cae1972a6', class: "btn", type: this.buttonType }, h("post-icon", { key: 'e19209e0c8de59d3e187531e0185d8f2d5c85408', "aria-hidden": "true", name: "closex" }), h("span", { key: '233184a45391e5a9b89635345f2324a87f5e9558', class: "visually-hidden" }, h("slot", { key: 'c213ac1dbdd98d83a8b2dc1b74c85926404ad1c1' })))));
+        return (h(Host, { key: '6965a8cb5fb765b4fcec0439ceeafe19d34970c2', "data-version": version }, h("button", { key: '7e718f70b0a4ac79e9439784dac46bd1ffd60fd1', class: "btn", type: this.buttonType }, h("post-icon", { key: '70acda3fbe6c9420f0be708fde6b29a7d5337d13', "aria-hidden": "true", name: "closex" }), h("span", { key: '899b3814c0898b521e4166e1cd951af628558e78', class: "visually-hidden" }, h("slot", { key: 'b13d0e95fd567c86e93e5185389909c7c0e7107d' })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -55,31 +58,34 @@ const PostClosebutton = class {
 };
 PostClosebutton.style = postClosebuttonCss;
 
-const easing$1 = 'ease';
-const duration$1 = 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$1,
-        easing: easing$1,
-        fill,
-    });
+/**
+ * Used by PostMegadropdown (burger menu)
+ */
+const defaultOptions = {
+    translate: 100,
+    duration: 500,
+    easing: 'ease',
+    fill: 'none',
+};
+function animateSlide(el, keyframes, options) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, { duration, easing: resolveEasing(easing), fill });
 }
-function slideDown(el, translateSize = '-100%') {
-    return el.animate([
-        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
-        { transform: 'translateY(0)' }, // End position
-    ], {
-        duration: duration$1,
-        easing: easing$1,
-        fill,
-    });
+function slide(el, direction, options = {}) {
+    const mergedOptions = {
+        ...defaultOptions,
+        ...options,
+    };
+    const { translate } = mergedOptions;
+    const baseKeyframes = [
+        { transform: `translateX(${translate}%)` },
+        { transform: 'translateX(0)' },
+    ];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateSlide(el, keyframes, options);
 }
 
-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$3 = (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;
@@ -92,7 +98,7 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const PostHeader = class {
-    get hasMobileMenu() {
+    get hasBurgerMenu() {
         return this.device !== 'desktop' && this.hasNavigation;
     }
     get scrollParent() {
@@ -109,10 +115,13 @@ const PostHeader = class {
         }
         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);
         }
@@ -124,16 +133,22 @@ const PostHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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 => {
@@ -142,14 +157,14 @@ const PostHeader = class {
                 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 });
@@ -160,23 +175,23 @@ const PostHeader = class {
             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() {
@@ -188,7 +203,9 @@ const PostHeader = class {
             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;
@@ -197,81 +214,72 @@ const PostHeader = class {
             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() {
@@ -282,7 +290,7 @@ const PostHeader = class {
     }
     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');
@@ -300,8 +308,8 @@ const PostHeader = class {
         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');
@@ -323,38 +331,80 @@ const PostHeader = class {
             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 getElement(this); }
     static get watchers() { return {
+        "textMenu": ["validateTextMenu"],
         "device": ["lockBody"],
-        "mobileMenuExtended": ["lockBody"]
+        "burgerMenuExtended": ["lockBody"]
     }; }
 };
 __decorate$3([
     EventFrom('post-megadropdown')
-], PostHeader.prototype, "megadropdownStateHandler", void 0);
+], PostHeader.prototype, "megadropdownStateHandler", null);
 PostHeader.style = postHeaderCss;
 
 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)}}";
@@ -419,9 +469,11 @@ const PostIcon = class {
         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);
@@ -468,7 +520,7 @@ const PostIcon = class {
         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 getElement(this); }
     static get watchers() { return {
@@ -483,70 +535,7 @@ PostIcon.style = postIconCss;
 
 const SWITCH_VARIANTS = ['list', 'menu'];
 
-const postLanguageOptionCss = "post-language-option{display:inline-block}post-language-option 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-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option 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-option a{color:var(--post-current-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}post-language-option :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-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option: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-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option: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-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option: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-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-option:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-option:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}";
-
-const PostLanguageOption = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.postChange = createEvent(this, "postChange");
-        this.postLanguageOptionInitiallyActive = createEvent(this, "postLanguageOptionInitiallyActive");
-    }
-    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-option component is required when the full language name is not displayed.');
-        }
-        if (this.active) {
-            this.postLanguageOptionInitiallyActive.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: 'b86bf33feb890e5dfbfae16f45ce2e56fdfaf16a', "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 getElement(this); }
-    static get watchers() { return {
-        "code": ["validateCode"],
-        "variant": ["validateVariant"],
-        "name": ["validateName"],
-        "url": ["validateUrl"]
-    }; }
-};
-PostLanguageOption.style = postLanguageOptionCss;
-
-const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap;gap:.5rem}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}post-menu::part(menu){padding-block:0}";
+const postLanguageMenuCss = ":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}";
 
 var __decorate$2 = (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;
@@ -558,7 +547,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const PostLanguageSwitch = class {
+const PostLanguageMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.menuId = `p${nanoid(11)}`;
@@ -569,13 +558,13 @@ const PostLanguageSwitch = class {
         this.variant = 'list';
     }
     get languageOptions() {
-        return Array.from(this.host.querySelectorAll('post-language-option'));
+        return Array.from(this.host.querySelectorAll('post-language-menu-item'));
     }
     validateCaption() {
-        checkRequiredAndType(this, 'caption', 'string');
+        checkRequiredAndType(this, 'textChangeLanguage', 'string');
     }
     validateDescription() {
-        checkRequiredAndType(this, 'description', 'string');
+        checkRequiredAndType(this, 'textCurrentLanguage', 'string');
     }
     validateVariant() {
         checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
@@ -590,11 +579,11 @@ const PostLanguageSwitch = class {
         this.updateChildrenVariant();
     }
     /**
-     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-menu-item> element.
      */
     handlePostChange(event) {
         this.activeLang = event.detail;
-        // Update the active state in the children post-language-option components
+        // Update the active state in the children post-language-menu-item components
         this.languageOptions.forEach(lang => {
             if (lang.code && lang.code === this.activeLang) {
                 lang.setAttribute('active', '');
@@ -611,90 +600,102 @@ const PostLanguageSwitch = class {
     }
     /**
      * Handles cases where the language switch is being rendered before options are available
-     * @param event Initially emitted by <post-langauge-option>
+     * @param event Initially emitted by <post-language-menu-item>
      */
     handleInitiallyActive(event) {
         this.activeLang = event.detail;
     }
-    // Update post-language-option variant to have the correct style
+    // Update post-language-menu-item variant to have the correct style
     updateChildrenVariant() {
         this.languageOptions.forEach(el => {
             el.setAttribute('variant', this.variant);
         });
     }
     renderList() {
-        return (h(Host, { "data-version": version }, h("div", { class: "post-language-switch-list", role: "list", "aria-label": this.caption, "aria-describedby": this.listSpanId }, h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), h("slot", null))));
+        return (h(Host, { "data-version": version }, h("div", { class: "post-language-menu-list", role: "list", "aria-label": this.textChangeLanguage, "aria-describedby": this.listSpanId }, h("span", { id: this.listSpanId, class: "visually-hidden" }, this.textCurrentLanguage), h("slot", null))));
     }
     renderDropdown() {
-        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.caption), h("span", { class: "visually-hidden" }, this.description), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", label: this.caption }, h("slot", null))));
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-menu-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.textChangeLanguage), h("span", { class: "visually-hidden" }, this.textCurrentLanguage), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-menu-dropdown-container", label: this.textChangeLanguage, placement: "bottom-end" }, h("slot", null))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "caption": ["validateCaption"],
-        "description": ["validateDescription"],
+        "textChangeLanguage": ["validateCaption"],
+        "textCurrentLanguage": ["validateDescription"],
         "variant": ["validateVariant"]
     }; }
 };
 __decorate$2([
-    EventFrom('post-language-option')
-], PostLanguageSwitch.prototype, "handlePostChange", null);
-PostLanguageSwitch.style = postLanguageSwitchCss;
+    EventFrom('post-language-menu-item')
+], PostLanguageMenu.prototype, "handlePostChange", null);
+PostLanguageMenu.style = postLanguageMenuCss;
 
-const postListCss = "post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+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 PostList = class {
+const PostLanguageMenuItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
-         */
-        this.titleHidden = false;
-        /**
-         * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
-         */
-        this.horizontal = false;
+        this.postChange = createEvent(this, "postChange");
+        this.postLanguageMenuItemInitiallyActive = createEvent(this, "postLanguageMenuItemInitiallyActive");
     }
-    componentWillLoad() {
-        /**
-         * Get the id set on the host element or use a random id by default
-         */
-        this.titleId = `title-${this.host.id || nanoid(6)}`;
+    validateCode() {
+        checkRequiredAndType(this, 'code', 'string');
     }
-    componentDidLoad() {
-        this.checkTitle();
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+    }
+    validateName() {
+        checkEmptyOrType(this, 'name', 'string');
     }
-    checkTitle() {
-        if (!this.titleEl.textContent.trim()) {
-            console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
+    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);
         }
     }
-    render() {
-        return (h(Host, { key: '908588a3f1261efbb85dbefade9f85f8ec6f16f8', "data-version": version }, h("div", { key: '44b224379be814dab98e16ad12a3ca0f10e61ac0', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '1aed36b7c286796a4d617643e7606e63bc2dd95a' })), h("div", { key: '3e1d137712b3e7616bab450426964f6c9334198e', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'fd5abb2fca95d32295fbfa158795413264200ae8', name: "post-list-item" }))));
+    /**
+     * Selects the language option programmatically.
+     */
+    async select() {
+        this.active = true;
+        this.emitChange();
     }
-    get host() { return getElement(this); }
-};
-PostList.style = postListCss;
-
-const postListItemCss = ":host{display:flex}";
-
-const PostListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+    emitChange() {
+        this.postChange.emit(this.code);
     }
-    connectedCallback() {
-        this.host.setAttribute('slot', 'post-list-item');
+    isNameRequired() {
+        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
     }
     render() {
-        return (h(Host, { key: '67204f0c31a6bc4cad3359030a8da57a045de7c5', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '0c68073c601a3792880fc0e68af24a4a204548ed' })));
+        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 getElement(this); }
+    static get watchers() { return {
+        "code": ["validateCode"],
+        "variant": ["validateVariant"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }; }
 };
-PostListItem.style = postListItemCss;
+PostLanguageMenuItem.style = postLanguageMenuItemCss;
 
-const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{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}.logo-link: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){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link: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){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link :focus,:focus-visible{border-radius:2px}";
+const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{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}.logo-link: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){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link: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){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link{outline-offset:calc(\n      -2px - var(--post-device-border-width-focus)\n    ) !important}.logo-link :focus,:focus-visible{border-radius:.5rem}";
 
 const PostLogo = class {
     constructor(hostRef) {
@@ -715,7 +716,7 @@ const PostLogo = class {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: 'acd3bfab8d395cde2d79066580a8e53e65c426f4', "data-version": version }, h(LogoTag, { key: 'c5c2f8a2be6204bb693d5d53fd95e75133518a1d', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '675b756441237173c1046b74c2dfe2dfc08bfd7f', class: "description" }, h("slot", { key: '710fd3483f56ad353e1a99f4fff2acc78ee53b46', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'e72b70e26da0fefd52a7e9aec41772dd5c9f0258', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'b67d56c9319bb576a56c76c5299f4a81c93d6c3c', id: "Logo" }, h("rect", { key: '8c073060a51c5e6942c1b33fc5c2a3a7eb422f07', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'f97840922aa977b0f74bc5e8a88ff99136c80e46', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'f7faf347bb660e2a4550b48fc2d997ad01b2b8ae', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (h(Host, { key: '39444d3dd1a87425c7134de5af6ad623a68197c0', "data-version": version }, h(LogoTag, { key: '8f41d8c85212f7fde23c11fa0a0fb506deb5e0c9', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '06b777726f42914b941a980bce9dd4ba3dc3637e', class: "description" }, h("slot", { key: 'd95f99a2d3b09ffab6d0e7c11b99178d6c1fb7ef', onSlotchange: () => this.checkDescription() })), h("svg", { key: '57fa969750327b0907cd3f5abefd14b52d176dd8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '61172060743d8d155bcde7d636da3c5569ec1951', id: "Logo" }, h("rect", { key: 'ef042aea64e01c52d241ff599290646af309f868', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'ef5b2d4666dc676157fddacfe9b3f15c017e2e02', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '816fd96b39a89ba22571e7e3257758e39b2599b0', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -724,25 +725,27 @@ const PostLogo = class {
 };
 PostLogo.style = postLogoCss;
 
-const postMainnavigationCss = ":root{--post-icon-chevrondown:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbmRvd24iPjxzeW1ib2wgaWQ9InMxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMi4wMSA1LjIyYzAtLjE5LjA3LS4zOC4yMi0uNTMuMjktLjI5Ljc3LS4yOSAxLjA2IDBsNC43MiA0LjcyIDQuNzItNC43MmMuMjktLjI5Ljc3LS4yOSAxLjA2IDBzLjI5Ljc3IDAgMS4wNmwtNS43OCA1Ljc4LTUuNzgtNS43OGEuNzQuNzQgMCAwIDEtLjIyLS41MyIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMy4yNiA3Ljg1YzAtLjIyLjA4LS40NS4yNi0uNjIuMzQtLjM0LjktLjM0IDEuMjQgMGw3LjI2IDcuMjYgNy4yNi03LjI2Yy4zNC0uMzQuOS0uMzQgMS4yNCAwcy4zNC45IDAgMS4yNGwtOC41IDguNS04LjUxLTguNWEuOS45IDAgMCAxLS4yNi0uNjJaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik00LjUgMTAuNTRjMC0uMjYuMS0uNTEuMjktLjcxYS45OTYuOTk2IDAgMCAxIDEuNDEgMGw5Ljc5IDkuNzkgOS44LTkuOGEuOTk2Ljk5NiAwIDEgMSAxLjQxIDEuNDFMMTUuOTkgMjIuNDQgNC44IDExLjI1Yy0uMi0uMi0uMjktLjQ1LS4yOS0uNzFaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiPjxwYXRoIGQ9Ik01LjggMTMuMTdhMS4xMjMgMS4xMjMgMCAwIDEgMS45Mi0uOEwyMC4wNSAyNC43bDEyLjM0LTEyLjM0Yy40NC0uNDQgMS4xNS0uNDQgMS41OSAwcy40NCAxLjE1IDAgMS41OUwyMC4wNSAyNy44OCA2LjEzIDEzLjk3Yy0uMjItLjIyLS4zMy0uNTEtLjMzLS44Ii8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Ik03IDE1Ljg3YzAtLjMyLjEyLS42NC4zNy0uODhhMS4yNSAxLjI1IDAgMCAxIDEuNzcgMGwxNC44NyAxNC44NyAxNC44OC0xNC44OGMuNDktLjQ5IDEuMjgtLjQ5IDEuNzcgMHMuNDkgMS4yOCAwIDEuNzdMMjQuMDIgMzMuMzkgNy4zNyAxNi43NWMtLjI0LS4yNC0uMzctLjU2LS4zNy0uODgiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0iTTkuNjMgMjEuMjRhMS4zOCAxLjM4IDAgMCAxIDIuMzUtLjk3TDMyLjAxIDQwLjNsMjAuMDQtMjAuMDRjLjU0LS41NCAxLjQxLS41NCAxLjk1IDBzLjU0IDEuNDEgMCAxLjk1TDMyLjAxIDQ0LjE5IDEwLjAzIDIyLjIyYy0uMjctLjI3LS40LS42Mi0uNC0uOTdaTTAgLjAzaDY0djY0SDB6Ii8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25kb3duIi8+PC9nPjwvc3ZnPg==\")}post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:var(--post-icon-chevrondown);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:flex;overflow:hidden;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;z-index:5;padding:1rem;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{margin-inline-end:-3rem}post-mainnavigation .scroll-control.scroll-right{margin-inline-start:-3rem}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.active .nav-el-active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.active .nav-el-active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.active .nav-el-inactive,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.active .nav-el-inactive,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)).active,post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-current=page],post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-expanded=true],post-mainnavigation post-megadropdown a.active,post-mainnavigation post-megadropdown a[aria-current=page],post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.active,post-mainnavigation post-list-item>a[aria-current=page],post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.active,post-mainnavigation post-list-item>button[aria-current=page],post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page],post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}";
+const postMainnavigationCss = ":host{display:flex;user-select:none}@media screen and (min-width: 1024px){:host{overflow:hidden}}nav{flex:1 1 auto}@media screen and (min-width: 1024px){nav{scroll-behavior:smooth;max-width:100vw;overflow:hidden;height:var(--post-main-navigation-height)}}.scroll-control{z-index:1;cursor:pointer;padding:1rem;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}.scroll-control.scroll-left{margin-inline-end:-3rem}.scroll-control.scroll-right{margin-inline-start:-3rem}.scroll-control.d-none{display:none}.scroll-control post-icon{font-size:1rem}";
 
 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
 const PostMainnavigation = class {
+    validateTextMain() {
+        checkRequiredAndType(this, 'textMain', 'string');
+    }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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);
+        this.mutationObserver = new MutationObserver(this.checkScrollability);
     }
     componentDidLoad() {
+        this.validateTextMain();
         setTimeout(() => {
-            this.fixLayoutShift();
             this.checkScrollability();
         });
         // Observe the navbar for size changes
@@ -767,30 +770,8 @@ const PostMainnavigation = class {
         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>
-        `;
-        });
+        return Array.from(this.host.querySelectorAll('a:not(post-megadropdown *), post-megadropdown-trigger'));
     }
     /**
      * Returns whether scrolling is enabled in either the left or right direction.
@@ -829,7 +810,7 @@ const PostMainnavigation = class {
         }, SCROLL_REPEAT_INTERVAL);
     }
     scrollRight() {
-        const scrollRightLeftEdge = document
+        const scrollRightLeftEdge = this.host.shadowRoot
             .querySelector('.scroll-right')
             .getBoundingClientRect().left;
         for (const navigationItem of this.navigationItems) {
@@ -843,7 +824,7 @@ const PostMainnavigation = class {
         }
     }
     scrollLeft() {
-        const scrollLeftRightEdge = document
+        const scrollLeftRightEdge = this.host.shadowRoot
             .querySelector('.scroll-left')
             .getBoundingClientRect().right;
         for (const navigationItem of this.navigationItems.reverse()) {
@@ -869,17 +850,38 @@ const PostMainnavigation = class {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (h(Host, { key: '04ae6ffdd6560113431b70c3c27f16057fc9a87d', slot: "post-mainnavigation", version: version }, h("div", { key: '2f79728dcbbfe94a343b880e2ba07331f45c9f30', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '3e762484bbcd03ac0d67b4ab722ffcd862bb073e', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '1150bfdf724e4d93b45f1fff071fba56d31d15b5', ref: el => (this.navbar = el) }, h("slot", { key: '3496b7c6d2d75300b1727148ff9b9965717d9909' })), h("div", { key: '1fa6dd50d9650ab6e5047c607f7e5ed0416ed245', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '9487d621e1d7289a0afeb1d0443ec8bc70cd5f3e', "aria-hidden": "true", name: "chevronright" }))));
+        return (h(Host, { key: '14ca9714f09e1dbbe8c976b8947db07906ec2eb8', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: 'e886823d21e52db04afc91ecbd12149c47d69038', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '3afd56232da3cf120038b68c714c560db16ac30e', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '69c39d75c1f90f01c12904c98fc6e3f8de2ba09d', ref: el => (this.navbar = el), "aria-label": this.textMain }, h("slot", { key: '9251d7cec53c05bf9146d0b2c75533c50f7fe070' })), h("div", { key: '649e7ec3c9f65447a2da965bb7fe0c92b3ff8207', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: 'ac2823ab5195c59ea2831ffb24a1d8a033f7266a', "aria-hidden": "true", name: "chevronright" }))));
     }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "textMain": ["validateTextMain"]
+    }; }
 };
 PostMainnavigation.style = postMainnavigationCss;
 
-const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;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 [slot=megadropdown-overview-link]{text-decoration:none;border-radius:0;padding-block:13px 12px;margin-block-end:16px;display:flex;align-items:center;min-height:56px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset}.megadropdown [slot=megadropdown-overview-link]::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown [slot=megadropdown-overview-link].active,.megadropdown [slot=megadropdown-overview-link][aria-current=page],.megadropdown [slot=megadropdown-overview-link][aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown [slot=megadropdown-overview-link]:hover{background-color:#504f4b;color:#fff}.megadropdown [slot=megadropdown-overview-link]:hover::before{background-color:#504f4b}@media screen and (max-width: 1023.98px){.megadropdown [slot=megadropdown-overview-link]{padding-block:12px 11px;min-height:unset}}@media screen and (max-width: 599.98px){.megadropdown [slot=megadropdown-overview-link]{padding-block:10px 9px}}.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.active,.megadropdown post-list .list-title h3 a[aria-current=page],.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
+const postMegadropdownCss = "*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;background-color:#fafafa;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{z-index:-1;inset-block-start:100%;max-height:calc(100vh - var(--post-header-height) - 3rem);padding:2rem 2.5rem 2.5rem}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block:1.5rem;display:flex;flex-direction:column}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{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;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);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);order:-1;width:fit-content;padding-inline:0}.back-button:hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash)}.back-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}.back-button: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){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button: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){.back-button: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){.back-button:is(a){color:LinkText;border:unset}.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button: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)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}";
 
 const PostMegadropdown = class {
+    validateTextClose() {
+        checkRequiredAndType(this, 'textClose', 'string');
+    }
+    validateTextBack() {
+        checkRequiredAndType(this, 'textBack', 'string');
+    }
+    get megadropdownTrigger() {
+        const hostId = this.host.getAttribute('id');
+        return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"]`) : null;
+    }
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown");
+        this.currentAnimation = null;
+        this.isAnimating = false;
+        this.fsAnimationOptions = {
+            translate: -10,
+            duration: 350,
+            easing: 'headerEase',
+        };
         this.device = breakpoint.get('device');
         /**
          * Holds the current visibility state of the dropdown.
@@ -890,13 +892,17 @@ const PostMegadropdown = class {
         this.trigger = false;
         /** Holds the current animation class. */
         this.animationClass = null;
-        this.handleClickOutside = (event) => {
+        this.handleClickOutside = async (event) => {
             if (this.device !== 'desktop')
                 return;
             const target = event.target;
             if (this.host.contains(target)) {
                 return;
             }
+            // Ignore clicks on the trigger or its contents to prevent running hide() twice
+            if (this.megadropdownTrigger.contains(target)) {
+                return;
+            }
             if (target instanceof HTMLElement) {
                 const trigger = target.closest('post-megadropdown-trigger');
                 if (trigger) {
@@ -906,14 +912,11 @@ const PostMegadropdown = class {
                     }
                 }
             }
-            this.hide(false);
+            await this.hide(false);
         };
-    }
-    get megadropdownTrigger() {
-        const hostId = this.host.getAttribute('id');
-        return hostId
-            ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`)
-            : null;
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleTabOutside = this.handleTabOutside.bind(this);
+        this.handleClickOutside = this.handleClickOutside.bind(this);
     }
     connectedCallback() {
         window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
@@ -922,16 +925,17 @@ const PostMegadropdown = class {
         this.getFocusableElements();
     }
     componentDidLoad() {
+        this.validateTextClose();
+        this.validateTextBack();
         this.checkInitialAriaCurrent();
         this.setupObserver();
         this.handleAriaCurrentChange([]);
     }
     disconnectedCallback() {
-        this.removeListeners();
         window.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
-        if (PostMegadropdown.activeDropdown === this) {
+        if (PostMegadropdown.activeDropdown === this)
             PostMegadropdown.activeDropdown = null;
-        }
+        this.removeListeners();
         if (this.defaultSlotObserver) {
             this.defaultSlotObserver.disconnect();
         }
@@ -940,41 +944,70 @@ const PostMegadropdown = class {
      * Toggles the dropdown visibility based on its current state.
      */
     async toggle() {
-        if (this.isVisible) {
-            this.hide();
-        }
-        else {
-            await this.show();
+        if (this.isAnimating) {
+            // If this is already animating towards a future state -> reverse intent
+            return this.isVisible ? this.show() : this.hide();
         }
+        return this.isVisible ? this.hide() : this.show();
     }
     /**
      * Displays the dropdown.
      */
     async show() {
+        if (this.device !== 'desktop') {
+            const trigger = this.megadropdownTrigger;
+            if (trigger)
+                this.megadropdownTitle = trigger.innerHTML;
+        }
         if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
             // Close the previously active dropdown without animation
             PostMegadropdown.activeDropdown.forceClose();
         }
-        this.animationClass = 'slide-in';
+        this.cancelAnimation();
+        // Set the megadropdown visible and mark it as the active dropdown
         this.isVisible = true;
         PostMegadropdown.activeDropdown = this;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
-        if (this.firstFocusableEl &&
-            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
-            this.firstFocusableEl.focus();
+        // Update trigger state
+        this.postToggleMegadropdown.emit({ isVisible: true });
+        try {
+            await this.animate('in');
+            this.focusFirst();
+            // After the megadropdown has finished entry animation
+            this.addListeners();
+        }
+        catch {
+            // Open animation was cancelled - reset state
+            this.removeListeners();
+            this.isVisible = false;
+            if (PostMegadropdown.activeDropdown === this)
+                PostMegadropdown.activeDropdown = null;
+            this.postToggleMegadropdown.emit({ isVisible: false, focusParent: true });
         }
-        this.addListeners();
     }
     /**
      * Hides the dropdown with an animation.
      */
     async hide(focusParent = true, forceClose = false) {
-        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
         if (forceClose) {
             this.forceClose();
+            return;
         }
-        else {
-            this.animationClass = 'slide-out';
+        // Update trigger state
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        try {
+            await this.animate('out');
+            // After the closing animation finishes set the megadropdown as non visible
+            this.isVisible = false;
+            this.removeListeners();
+            if (PostMegadropdown.activeDropdown === this)
+                PostMegadropdown.activeDropdown = null;
+        }
+        catch {
+            // Closing animation was cancelled - reset state
+            PostMegadropdown.activeDropdown = this;
+            this.addListeners();
+            this.isVisible = true;
+            this.postToggleMegadropdown.emit({ isVisible: true, focusParent: false });
         }
     }
     /**
@@ -983,68 +1016,79 @@ const PostMegadropdown = class {
     async focusFirst() {
         this.firstFocusableEl?.focus();
     }
-    breakpointChange(e) {
-        this.device = e.detail;
-        if (this.device === 'desktop' && this.isVisible) {
-            this.animationClass = null;
-        }
-    }
     /**
      * Forces the dropdown to close without animation.
      */
     forceClose() {
-        this.isVisible = false;
-        this.animationClass = null;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
         this.removeListeners();
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: false });
+        this.isVisible = false;
     }
-    handleAnimationEnd() {
-        if (this.animationClass === 'slide-out') {
-            this.isVisible = false;
-            this.animationClass = null;
-            PostMegadropdown.activeDropdown = null;
-            this.removeListeners();
+    // Run the respective animation
+    createAnimation(direction) {
+        if (this.device === 'desktop') {
+            return fadeSlide(this.animatedContainer, direction, this.fsAnimationOptions);
         }
+        return slide(this.animatedContainer, direction, {
+            translate: 100,
+            duration: 350,
+            easing: direction === 'in' ? 'ease-in' : 'ease-out',
+        });
+    }
+    async animate(direction) {
+        this.cancelAnimation();
+        this.currentAnimation = this.createAnimation(direction);
+        // Flag isAnimating used to avoid toggle() de-sync
+        this.isAnimating = true;
+        await this.currentAnimation.finished;
+        this.isAnimating = false;
+        this.currentAnimation = null;
+    }
+    cancelAnimation() {
+        this.currentAnimation?.cancel();
+        this.currentAnimation = null;
+    }
+    breakpointChange(e) {
+        this.device = e.detail;
+        this.cancelAnimation();
     }
     addListeners() {
-        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
-        document.addEventListener('keyup', e => this.handleTabOutside(e));
+        this.host.addEventListener('keydown', this.keyboardHandler);
+        document.addEventListener('keyup', this.handleTabOutside);
         document.addEventListener('mousedown', this.handleClickOutside);
     }
     removeListeners() {
-        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
-        document.removeEventListener('keyup', e => this.handleTabOutside(e));
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        document.removeEventListener('keyup', this.handleTabOutside);
         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)));
-        // Check for an overview link
-        const overviewLink = this.host.querySelector('a[slot="megadropdown-overview-link"]');
-        if (overviewLink) {
-            focusableChildren.unshift(overviewLink);
-        }
-        this.firstFocusableEl = focusableChildren[0];
-        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+        const focusableElements = [
+            ...getFocusableChildren(this.host),
+            ...getFocusableChildren(this.host.shadowRoot),
+        ];
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements[focusableElements.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();
-            }
+        if (e.key !== 'Tab' || this.device === 'desktop')
+            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();
         }
     }
     handleTabOutside(e) {
         if (e.key === 'Tab' && this.device === 'desktop') {
-            if (!this.host.contains(e.target)) {
+            if (this.isVisible && !this.host.contains(e.target)) {
                 this.hide(false);
             }
         }
@@ -1070,14 +1114,8 @@ const PostMegadropdown = class {
      */
     setTriggerActive(isActive) {
         const trigger = this.megadropdownTrigger;
-        if (!trigger)
-            return;
-        if (isActive) {
-            trigger.classList.add('active');
-        }
-        else {
-            trigger.classList.remove('active');
-        }
+        if (trigger)
+            trigger.setAttribute('active', isActive.toString());
     }
     /**
      * Updates the megadropdown trigger state when the megadropdown content changes.
@@ -1101,15 +1139,19 @@ const PostMegadropdown = class {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: 'd111d8d93a9b64018f3df88813da8f6d1c65759e', version: version }, h("div", { key: 'd7cb2b98624c9241108bc66cc11c15c0a2e7acf3', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '9f0280b6f28f19ee7f9ba4707209b64b38759927', class: "megadropdown" }, h("slot", { key: '71f2521e1ab13406dd986c18a7c52e171148b0b0', name: "megadropdown-title" }), h("slot", { key: '148de1446aade76b074e155d07b70e775fc9612c', name: "megadropdown-overview-link" }), h("div", { key: '269c1e1db66acb7c274c720a9f715d29e875ef54', class: "megadropdown-content" }, h("slot", { key: '444040337c57e64bcc57f56415c4c40513ef0a5b' })), h("div", { key: 'f97d8c578ee19b5ba7d593e5d110e3b283255087', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: 'dc04da3a42714e2e8742ab8ed25bcc288a236294', name: "back-button" })), h("div", { key: '354eca51a5aef76d483a30e595bedfa95792d7ce', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '28693622360c0da91f3051426be545852c5ec337', name: "close-button" }))))));
+        return (h(Host, { key: 'f099891f24c60ca48ddceeadf754debdf3d8bff1', version: version }, h("div", { key: 'd964a72ec31632a6061f8c656fcc171bc584b764', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: 'b04d8fb83e5658365a1d722572d82237a7bf4eba', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'b7e654a69375c4e8f3af2e8ff65f0a5b7b2ee2cd', class: "megadropdown-content" }, h("slot", { key: '9608aa8b0d9458b593917e66e3fd4db9c447cac2' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack)))));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "textClose": ["validateTextClose"],
+        "textBack": ["validateTextBack"]
+    }; }
 };
 /** Tracks the currently active dropdown instance. */
 PostMegadropdown.activeDropdown = null;
 PostMegadropdown.style = postMegadropdownCss;
 
-const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}@media screen and (max-width: 1023.98px){post-megadropdown-trigger{z-index:4}}";
+const postMegadropdownTriggerCss = "button{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)}button:hover{text-decoration:none}button:disabled{border-style:var(--post-core-border-style-dash)}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}button: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){button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){button: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){button: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){button:is(a){color:LinkText;border:unset}button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}button: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)}button: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)}button: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)}button{--post-nav-item-border-width:1px;width:100%;justify-content:start;position:relative;padding:.75rem .75rem calc(.75rem - var(--post-nav-item-border-width)) .5rem;gap:1rem;border-radius:0;line-height:1.5;outline-color:currentColor !important;height:100%}button::before{content:\"\";background-color:#050400;position:absolute;inset-inline:0;inset-block-end:0;height:var(--post-nav-item-border-width)}button: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)}button:hover::before{background-color:rgba(0,0,0,0)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:none}button{outline-offset:calc(\n      -2px - var(--post-device-border-width-focus)\n    ) !important}button>post-icon:where(:last-child){margin-inline-start:auto}@media screen and (min-width: 0)and (max-width: 599.98px){button{padding:calc(.5rem + 1.5px) .75rem calc(.5rem + 1.5px - var(--post-nav-item-border-width)) .5rem;gap:.5rem;font-size:.875rem}button>post-icon{font-size:1rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){button{padding:1rem .75rem;gap:.5rem}button::before{content:unset}}:host{position:relative;display:inline-block}button post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}button>span{position:relative}button>span>span[aria-hidden]{font-weight:700;visibility:hidden}button>span>span:not([aria-hidden]){position:absolute;inset:0}@media screen and (min-width: 1024px){button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){font-weight:700}}@media screen and (max-width: 1023.98px){button post-icon{margin-inline-start:auto;transform:rotate(-90deg) !important}}";
 
 var __decorate$1 = (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;
@@ -1122,101 +1164,85 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const PostMegadropdownTrigger = class {
+    validateFor() {
+        checkRequiredAndType(this, 'for', 'string');
+    }
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.mutationObserver = new MutationObserver(this.cloneSlottedButton.bind(this));
+        this.isMegadropdownExpanded = false;
+        this.slottedContent = null;
         /**
-         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
-         */
-        this.ariaExpanded = false;
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for mega dropdown control.
+         * Sets the trigger state to be active or inactive.
          */
-        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) => {
-            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.active = false;
+        this.onMegadropdownToggled = this.onMegadropdownToggled.bind(this);
     }
-    /**
-     * 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() {
-        checkRequiredAndType(this, 'for', 'string');
+    connectedCallback() {
+        this.mutationObserver.observe(this.host, { childList: true, subtree: true });
+    }
+    componentWillLoad() {
+        this.cloneSlottedButton();
+    }
+    componentDidLoad() {
+        this.validateFor();
+        // Check if the mega dropdown attached to the trigger is expanded or not
+        if (IS_BROWSER)
+            document.addEventListener('postToggleMegadropdown', this.onMegadropdownToggled);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('postToggleMegadropdown', this.onMegadropdownToggled);
+    }
+    cloneSlottedButton() {
+        this.slottedContent = this.host.innerHTML;
     }
     get megadropdown() {
         const ref = document.getElementById(this.for);
-        return ref && ref.localName === 'post-megadropdown'
-            ? ref
-            : null;
-    }
-    handleToggle() {
-        if (this.megadropdown) {
-            this.megadropdown.toggle();
-        }
-        else {
+        if (ref?.localName !== 'post-megadropdown') {
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
+            return null;
         }
+        return ref;
     }
-    componentDidLoad() {
-        this.validateControlFor();
-        // Check if the mega dropdown attached to the trigger is expanded or not
-        document.addEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
-        this.slottedButton = this.host.querySelector('button');
-        if (this.slottedButton) {
-            this.slottedButton.setAttribute('aria-haspopup', 'menu');
-            this.slottedButton.addEventListener('click', () => {
-                this.handleToggle();
-            });
-            this.slottedButton.addEventListener('keydown', this.handleKeyDown);
-        }
-        else {
-            console.warn('No button found within post-megadropdown-trigger');
-        }
+    onClick() {
+        this.megadropdown?.toggle();
     }
-    disconnectedCallback() {
-        document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
+    onKeyDown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        const megadropdown = this.megadropdown;
+        if (!megadropdown)
+            return;
+        event.preventDefault();
+        this.megadropdown.toggle();
+    }
+    onMegadropdownToggled(event) {
+        if (event.target.id === this.for) {
+            const wasMegadropdownExpanded = this.isMegadropdownExpanded;
+            this.isMegadropdownExpanded = event.detail.isVisible;
+            const haveBeenClosed = wasMegadropdownExpanded && !this.isMegadropdownExpanded;
+            if (!haveBeenClosed || !event.detail.focusParent)
+                return;
+            // Focus on the trigger parent of the dropdown after it's closed if the close button had been clicked
+            setTimeout(() => {
+                this.interactiveButton.focus();
+            }, 100);
+        }
     }
     render() {
-        return (h(Host, { key: '838bff4fe3feac679b522c2f7a166ac7aa5c2bf9', "data-version": version, "tab-index": "-1" }, h("button", { key: 'b5a90298610863e46447198642b5a27b8702aefc' }, h("slot", { key: '14c83456eb056f48143edcd2c532bca017c60171' }))));
+        return (h(Host, { key: '73479c3c80cda63b9f82ec584c962ffa53b7b85c', "data-version": version }, h("button", { key: 'e76d5077f1ac2e6c16e365799ea79f6985ec0d14', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, h("span", { key: 'a60b5838443ccd75fc08e07f791cb4ef088343f3' }, h("span", { key: 'da180bb66704712c0cba7b575ba260765a0df36f' }, h("slot", { key: 'c27dbc706a82fc49acb3414855e0e57d1dac0923' })), h("span", { key: '87ebe5fdcba5a160b2698965284fc5ce66d0fa90', "aria-hidden": "true", innerHTML: this.slottedContent })), h("post-icon", { key: '76f620188ebc3ad60b04523ea70ee4f3b642a2e8', name: "chevrondown" }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "for": ["validateControlFor"]
+        "for": ["validateFor"]
     }; }
 };
 __decorate$1([
     EventFrom('post-megadropdown', { ignoreNestedComponents: false })
-], PostMegadropdownTrigger.prototype, "handleToggleMegadropdown", void 0);
+], PostMegadropdownTrigger.prototype, "onMegadropdownToggled", null);
 PostMegadropdownTrigger.style = postMegadropdownTriggerCss;
 
-const postMenuCss = ":host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}";
+const postMenuCss = ":host{display:block}:where([part=post-menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}";
 
 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;
@@ -1265,35 +1291,6 @@ const PostMenu = class {
                 this.controlKeyDownHandler(e);
             }
         };
-        this.handlePostShown = (event) => {
-            // Only for the first open
-            if (event.detail.first) {
-                // Add "menu" and "menuitem" aria roles and aria-label
-                this.host.setAttribute('role', 'menu');
-                const menuItems = this.getSlottedItems();
-                for (const item of menuItems) {
-                    item.setAttribute('role', 'menuitem');
-                }
-                if (this.label)
-                    this.host.setAttribute('aria-label', this.label);
-            }
-        };
-        this.handlePostToggled = (event) => {
-            this.isVisible = event.detail.isOpen;
-            this.toggleMenu.emit(this.isVisible);
-            if (this.isVisible) {
-                this.lastFocusedElement = this.root?.activeElement;
-                requestAnimationFrame(() => {
-                    const menuItems = this.getSlottedItems();
-                    if (menuItems.length > 0) {
-                        menuItems[0].focus();
-                    }
-                });
-            }
-            else if (this.lastFocusedElement) {
-                this.lastFocusedElement.focus();
-            }
-        };
         this.handleClick = (e) => {
             const target = e.target;
             if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
@@ -1355,6 +1352,35 @@ const PostMenu = class {
             console.error('hide: popoverRef is null or undefined');
         }
     }
+    handlePostShown(event) {
+        // Only for the first open
+        if (event.detail.first) {
+            // Add "menu" and "menuitem" aria roles and aria-label
+            this.host.setAttribute('role', 'menu');
+            const menuItems = this.getSlottedItems();
+            for (const item of menuItems) {
+                item.setAttribute('role', 'menuitem');
+            }
+            if (this.label)
+                this.host.setAttribute('aria-label', this.label);
+        }
+    }
+    handlePostToggled(event) {
+        this.isVisible = event.detail.isOpen;
+        this.toggleMenu.emit(this.isVisible);
+        if (this.isVisible) {
+            this.lastFocusedElement = this.root?.activeElement;
+            requestAnimationFrame(() => {
+                const menuItems = this.getSlottedItems();
+                if (menuItems.length > 0) {
+                    menuItems[0].focus();
+                }
+            });
+        }
+        else if (this.lastFocusedElement) {
+            this.lastFocusedElement.focus();
+        }
+    }
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -1402,7 +1428,7 @@ const PostMenu = class {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'eef3d3cdf2553c2627ddf580a95c70f00c02d388', "data-version": version }, h("post-popovercontainer", { key: '27c3341bec9d4ee98b59f70e902913f03954c32c', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ef6c0ab8b6de380c23f6562a3d0ba34d9eaace98', part: "menu" }, h("slot", { key: 'edca1d3e9ab11d016ba18baf9f8d6aa65bb71958', name: "header" }), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })))));
+        return (h(Host, { key: '08285b17608e5bc3133a3da6015a5a0d4de6ec29', "data-version": version }, h("post-popovercontainer", { key: '17e45869b5e76cdd9bd43ca77b2f0b3876462014', onPostShow: this.handlePostShown.bind(this), onPostToggle: this.handlePostToggled.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'e2486aa099ffc8ac59885a0971ebb13649a49a35', part: "post-menu" }, h("slot", { key: '9f0e05f211fe18cf5beed8e1b33bde26d4974e24', name: "header" }), h("slot", { key: '971ac8ad433467a2ebe2429574cb10dbdadbcf25' })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -1412,10 +1438,10 @@ const PostMenu = class {
 };
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostShown", void 0);
+], PostMenu.prototype, "handlePostShown", null);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostToggled", void 0);
+], PostMenu.prototype, "handlePostToggled", null);
 PostMenu.style = postMenuCss;
 
 const postMenuTriggerCss = ":host{display:inline-block}";
@@ -1493,7 +1519,7 @@ const PostMenuTrigger = class {
         }
     }
     render() {
-        return (h(Host, { key: 'fc962802089652073c19cc35a511e48b0cab43b7', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3a8b40c0a88c44092b56ca4aa1c74f880bebb20' })));
+        return (h(Host, { key: '3ef7e372c9c655bf1da5d5a7d4bca6925a010f65', "data-version": version, "tab-index": "-1" }, h("slot", { key: '771db943ad5aa639c325f055ba6f9d763bf4256d' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -4223,7 +4249,7 @@ function popIn(el) {
     });
 }
 
-const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
+const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{--arrow-size: 0.5825rem;position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow[dynamic-placement=top]{border-bottom-right-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=right]{border-bottom-left-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=bottom]{border-top-left-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=left]{border-top-right-radius:2px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer) .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}";
 
 const PostPopovercontainer = class {
     constructor(hostRef) {
@@ -4252,10 +4278,6 @@ const PostPopovercontainer = class {
          * Whether or not to display a little pointer arrow
          */
         this.arrow = false;
-        /**
-         * Whether or not the popovercontainer should close when user clicks outside of it
-         */
-        this.manualClose = false;
         this.currentAnimation = null;
     }
     validatePlacement() {
@@ -4301,10 +4323,35 @@ const PostPopovercontainer = class {
         this.calculatePosition();
         this.host.showPopover();
     }
+    /**
+     * Programmatically hide the popovercontainer
+     */
+    async hide() {
+        if (!this.toggleTimeoutId) {
+            this.eventTarget = null;
+            this.host.hidePopover();
+            this.postHide.emit();
+        }
+    }
+    /**
+     * Toggle popovercontainer display
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * @param force Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.eventTarget = target;
+        // Prevent instant double toggle
+        if (!this.toggleTimeoutId) {
+            this.calculatePosition();
+            this.host.togglePopover(force);
+            this.toggleTimeoutId = null;
+        }
+        return this.host.matches(':where(:popover-open, .popover-open)');
+    }
     /**
      * Handles the popover opening process and emits related events.
      */
-    async open() {
+    open() {
         const content = this.host.querySelector('.popover-content');
         this.startAutoupdates();
         if (content) {
@@ -4329,7 +4376,7 @@ const PostPopovercontainer = class {
     /**
      * Handles the popover closing process and emits related events.
      */
-    async close() {
+    close() {
         if (typeof this.clearAutoUpdate === 'function') {
             this.clearAutoUpdate();
         }
@@ -4375,31 +4422,6 @@ const PostPopovercontainer = class {
             }
         }
     }
-    /**
-     * Programmatically hide the popovercontainer
-     */
-    async hide() {
-        if (!this.toggleTimeoutId) {
-            this.eventTarget = null;
-            this.host.hidePopover();
-            this.postHide.emit();
-        }
-    }
-    /**
-     * Toggle popovercontainer display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
-     * @param force Pass true to always show or false to always hide
-     */
-    async toggle(target, force) {
-        this.eventTarget = target;
-        // Prevent instant double toggle
-        if (!this.toggleTimeoutId) {
-            this.calculatePosition();
-            this.host.togglePopover(force);
-            this.toggleTimeoutId = null;
-        }
-        return this.host.matches(':where(:popover-open, .popover-open)');
-    }
     /**
      * Start or stop auto updates based on popovercontainer events.
      * Popovercontainers can be closed or opened with other methods than class members,
@@ -4433,6 +4455,7 @@ const PostPopovercontainer = class {
     async calculatePosition() {
         const { x, y, middlewareData, placement } = await this.computeMainPosition();
         const currentPlacement = placement.split('-')[0];
+        this.dynamicPlacement = currentPlacement;
         // Position popover
         this.host.style.left = `${x}px`;
         this.host.style.top = `${y}px`;
@@ -4440,11 +4463,20 @@ const PostPopovercontainer = class {
         if (this.arrow && middlewareData.arrow) {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
             const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
+            const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+            // Calculate dynamically the half side which provides the static side offset
+            const arrowSizeValue = getComputedStyle(this.arrowRef)
+                .getPropertyValue('--arrow-size')
+                .trim();
+            const arrowSizePx = arrowSizeValue.endsWith('rem')
+                ? Number.parseFloat(arrowSizeValue) * rootFontSize
+                : Number.parseFloat(arrowSizeValue);
+            const halfSide = -0.5 * arrowSizePx;
             if (staticSide) {
                 Object.assign(this.arrowRef.style, {
                     left: arrowX ? `${arrowX}px` : '',
                     top: arrowY ? `${arrowY}px` : '',
-                    [staticSide]: '-5px',
+                    [staticSide]: `${halfSide}px`,
                 });
             }
         }
@@ -4545,9 +4577,9 @@ const PostPopovercontainer = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ec57bb478a7fe7d6449ef1ed4d91db4d0835ea4e', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '2969b3c6ef9441d06b9c913f47bb64e84006dbe4', class: "popover-content" }, this.arrow && (h("span", { key: '03b8addd0bee91d9358e9554f2d507b9a349e0db', class: "arrow", ref: el => {
+        return (h(Host, { key: '0aaf70cb284e7227149f2e500aa7c72cab69d90a', "data-version": version, popover: "auto" }, h("div", { key: '9762887bdddca93acc6dfda715f2f41f4f6c98d6', class: "popover-content" }, this.arrow && (h("span", { key: 'e77f16be0b3b0cdb02886ea928aa6986d3f477e3', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '2fb25dce5ea9e5f1044cde4839df61af34c8b667' }))));
+            } })), h("slot", { key: 'e8737e5acec3a20d258d462a7d82278d303ba353' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -4604,10 +4636,10 @@ const PostTogglebutton = class {
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
     render() {
-        return (h(Host, { key: 'f56832bfbfacc23923ac06d8455fffcdafa8a7ec', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '7adc9ed579b6badeb08c7599ceb95892d68f027f' })));
+        return (h(Host, { key: 'a526ab3b0ae14c93bb4e1a8dc6d3ded4ff1bf014', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'e8a5bdd99d9270cfcf014306a8d7fe8a2b6b79ba' })));
     }
     get host() { return getElement(this); }
 };
 PostTogglebutton.style = postTogglebuttonCss;
 
-export { PostClosebutton as post_closebutton, PostHeader as post_header, PostIcon as post_icon, PostLanguageOption as post_language_option, PostLanguageSwitch as post_language_switch, PostList as post_list, PostListItem as post_list_item, PostLogo as post_logo, PostMainnavigation as post_mainnavigation, PostMegadropdown as post_megadropdown, PostMegadropdownTrigger as post_megadropdown_trigger, PostMenu as post_menu, PostMenuTrigger as post_menu_trigger, PostPopovercontainer as post_popovercontainer, PostTogglebutton as post_togglebutton };
+export { PostClosebutton as post_closebutton, PostHeader as post_header, PostIcon as post_icon, PostLanguageMenu as post_language_menu, PostLanguageMenuItem as post_language_menu_item, PostLogo as post_logo, PostMainnavigation as post_mainnavigation, PostMegadropdown as post_megadropdown, PostMegadropdownTrigger as post_megadropdown_trigger, PostMenu as post_menu, PostMenuTrigger as post_menu_trigger, PostPopovercontainer as post_popovercontainer, PostTogglebutton as post_togglebutton };