@swisspost/design-system-components 10.0.0-next.55 → 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-wEFJ-c34.js';
-import { v as version } from './package-BhxZzOEC.js';
-import { d as checkEmptyOrOneOf, a as checkEmptyOrType, c as checkRequiredAndType, h as checkEmptyOrUrl } from './index-Beaz8wEe.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 = ":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]){--post-header-top:0;--post-global-header-top:0;--post-global-controls-top:0;--post-logo-height:var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,.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}.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:1.25rem}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .target-group{margin-inline-end:auto}.global-header.no-target-group .target-group{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 .navigation-controls{flex:0 0 auto}.local-header.no-navigation-controls .navigation{margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end))}.local-header.no-navigation-controls .navigation-controls{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:not(.extended){transform:translateY(-100%)}.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 .navigation-controls{height:3.5rem;display:flex;align-items:center;justify-content:flex-end;padding-inline:.25rem}.burger-menu.no-navigation-controls .navigation-controls{display:none}";
+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;
@@ -109,6 +115,9 @@ const PostHeader = class {
         }
         return document.body;
     }
+    validateTextMenu() {
+        checkRequiredAndType(this, 'textMenu', 'string');
+    }
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
         const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
@@ -124,10 +133,14 @@ 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.hasNavigationControls = false;
-        this.hasTargetGroup = false;
+        this.hasLocalNav = false;
+        this.hasAudience = false;
         this.hasTitle = false;
         this.burgerMenuExtended = false;
         this.megadropdownOpen = false;
@@ -144,15 +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 });
@@ -163,7 +175,6 @@ const PostHeader = class {
             passive: true,
         });
         document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
-        this.host.addEventListener('click', this.handleLinkClick);
         window.addEventListener('postBreakpoint:device', this.breakpointChange);
         this.handleScrollParentResize();
         this.lockBody(false, this.burgerMenuExtended, 'burgerMenuExtended');
@@ -174,11 +185,13 @@ const PostHeader = class {
         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() {
@@ -190,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;
@@ -206,11 +221,9 @@ const PostHeader = class {
         this.burgerMenuExtended = false;
     }
     async closeBurgerMenu() {
-        this.burgerMenuAnimation.finish();
-        const menuButton = this.getMenuButton();
-        if (menuButton) {
-            menuButton.toggled = false;
-        }
+        this.burgerMenuAnimation?.finish();
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.toggled = false;
         this.burgerMenuExtended = false;
     }
     /**
@@ -220,18 +233,18 @@ const PostHeader = class {
         if (this.device === 'desktop')
             return;
         this.burgerMenuAnimation = this.burgerMenuExtended
-            ? slideUp(this.burgerMenu)
-            : slideDown(this.burgerMenu);
+            ? 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');
-        if (menuButton)
-            menuButton.toggled = force ?? !this.burgerMenuExtended;
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.toggled = force ?? !this.burgerMenuExtended;
         if (this.burgerMenuExtended) {
             // Wait for the close animation to finish before hiding megadropdowns
             await this.burgerMenuAnimation.finished;
             this.burgerMenuExtended = force ?? !this.burgerMenuExtended;
             if (this.burgerMenuExtended === false) {
                 this.closeAllMegadropdowns();
+                this.burgerMenu.scrollTop = 0;
             }
         }
         else {
@@ -242,37 +255,31 @@ const PostHeader = class {
             }
         }
     }
+    megadropdownStateHandler(event) {
+        this.megadropdownOpen = event.detail.isVisible;
+    }
     // Get all the focusable elements in the post-header burger menu
     getFocusableElements() {
-        // Get elements in the correct order (different as the DOM order)
-        const focusableEls = [
-            ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
-            ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-megadropdown-trigger')),
-            ...Array.from(this.host.querySelectorAll('.list-inline[slot="meta-navigation"] > li, post-language-option')),
-        ];
-        // Add the main toggle menu button to the list of focusable children
-        const focusableChildren = [
-            this.host.querySelector('post-togglebutton'),
-            ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
-        ];
-        this.firstFocusableEl = focusableChildren[0];
-        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
-    }
-    getMenuButton() {
-        return this.host.querySelector('post-togglebutton');
+        if (!this.burgerMenu)
+            return;
+        const focusableElements = [this.burgerMenuButton];
+        focusableElements.push(...getDeepFocusableChildren(this.localHeader, el => !el.matches('post-megadropdown')), ...getDeepFocusableChildren(this.burgerMenu, el => !el.matches('post-megadropdown')));
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements[focusableElements.length - 1];
     }
     keyboardHandler(e) {
-        if (e.key === 'Tab' && this.burgerMenuExtended) {
-            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() {
@@ -332,21 +339,28 @@ const PostHeader = class {
         }
     }
     checkSlottedContent() {
-        this.hasNavigation = !!this.host.querySelector('[slot="post-mainnavigation"]');
-        this.hasNavigationControls = !!this.host.querySelector('[slot="navigation-controls"]');
-        this.hasTargetGroup = !!this.host.querySelector('[slot="target-group"]');
+        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.hasBurgerMenu ? 'list' : 'menu';
-        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
+        Array.from(this.host.querySelectorAll('post-language-menu')).forEach(languageSwitch => {
             languageSwitch?.setAttribute('variant', variant);
         });
     }
-    onFocusChange() {
-        const fixedElements = this.device === 'desktop' ? '.logo, .navigation' : '.global-header, .burger-menu';
-        const isHeaderExpanded = this.host.matches(':focus-within') &&
-            !this.host.shadowRoot.querySelector(`:where(${fixedElements}):focus-within`);
+    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', '');
         }
@@ -355,39 +369,42 @@ const PostHeader = class {
         }
     }
     renderNavigation() {
+        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 } }, h("slot", { name: "post-mainnavigation" }), h("div", { class: "navigation-controls" }, 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: {
                 'burger-menu': true,
                 'extended': this.burgerMenuExtended,
-                'no-navigation-controls': !this.hasNavigationControls,
-            }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, h("div", { class: "navigation-controls" }, h("slot", { name: "navigation-controls" })), h("div", { class: "burger-menu-body" }, h("slot", { name: "target-group" }), h("slot", { name: "post-mainnavigation" })), h("div", { class: "burger-menu-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))));
+                '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() {
-        return (h(Host, { key: 'c9b1c1a946800f728a7a90a91dff3abf23b5100f', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu }, h("div", { key: '21d2b9bd39946df7e42d3d5c763d40cd1dabee69', class: {
+        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-target-group': !this.hasTargetGroup,
-            } }, h("div", { key: '50cf30a8febea656eb3349e6c06dc5b609b13a6d', class: "logo" }, h("slot", { key: 'df1ecaca7b39316ef4d4bb56e33c3214b2648e68', name: "post-logo" })), h("div", { key: '9c4319dce10d9e98291a6cbdb0effb854a8b6dac', class: "sliding-controls" }, this.device === 'desktop' && (h("div", { key: 'ce916d4bdb65c641e58725f70b7689704847593c', class: "target-group" }, h("slot", { key: '810e4164ae17b8571011799307f3688cf64b5c30', name: "target-group" }))), h("slot", { key: 'abe6f2e08e87295e88e4cf33db0e72021d622aaf', name: "global-controls" }), !this.hasBurgerMenu && [
-            h("slot", { key: '4ef5603837d0f26c25dd50bf17bb0011dc927de0', name: "meta-navigation" }),
-            h("slot", { key: 'b1bc83f1bd5004af89e444a9bdf487225ac882d7', name: "post-language-switch" }),
-        ], h("slot", { key: '11dfd54337cf457bc25ec680c8d4e11a6712dc63', name: "global-login" }), this.hasNavigation && this.device !== 'desktop' && (h("div", { key: '67658d80ce90f4446ea8d1078937101a299536b8', onClick: () => this.toggleBurgerMenu(), class: "burger-menu-toggle" }, h("slot", { key: '2fdba487922c63db152ec08e3382640c9cdf1c12', name: "post-togglebutton" }))))), h("div", { key: '1516e38c9628d8cfb75d6f9bd55912071da5e94e', class: {
+                '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-target-group': !this.hasTargetGroup,
+                'no-audience': !this.hasAudience,
                 'no-navigation': this.device !== 'desktop' || !this.hasNavigation,
-                'no-navigation-controls': !this.hasNavigationControls,
-            } }, h("slot", { key: '839b34249ece8af5cc53231271e739a6a664a977', name: "title" }), this.hasTitle && h("slot", { key: 'aa281968b58ecad425beb1b4ffbd1273cc167ea4', name: "local-controls" }), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+                '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"],
         "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)}}";
@@ -452,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);
@@ -501,7 +520,7 @@ const PostIcon = class {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '7ce1f627f621201c0f4d6e90ee3d8d6d3c32798a', "data-version": version }, h("span", { key: '987ecd266b8bd68bdbb06cdb500a746b913e79b1', 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 {
@@ -516,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;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;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: '06ba54de702d5014b34f1b0cb6396cb947ac3ca6', "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}.post-language-switch-list{margin-top:1rem}";
+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;
@@ -591,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)}`;
@@ -602,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);
@@ -623,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', '');
@@ -644,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);
     }
-    checkTitle() {
-        if (!this.titleEl.textContent.trim()) {
-            console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
+    validateName() {
+        checkEmptyOrType(this, 'name', 'string');
+    }
+    validateUrl() {
+        checkEmptyOrUrl(this, 'url');
+    }
+    componentDidLoad() {
+        this.validateCode();
+        this.validateName();
+        this.validateUrl();
+        if (!this.name && this.isNameRequired()) {
+            throw new Error('The "name" property of the post-language-menu-item component is required when the full language name is not displayed.');
+        }
+        if (this.active) {
+            this.postLanguageMenuItemInitiallyActive.emit(this.code);
         }
     }
-    render() {
-        return (h(Host, { key: '85193bec2b2ff22ed76c93a4037f353b091192bc', "data-version": version }, h("div", { key: '32cdc5ccb95b48e3f81e90ac93f0207d935c9d3b', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '890dd411e370a7829354dcaa00fae75e8f538f01' })), h("div", { key: '72867a1d81f2e186ed3d68f5185a46c7c96fdd3b', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '2cd5a5e9ca717c675f9db3a19fbf13ff49a7312c', 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: '98f83a8ef6ff73461bfc7b67d8113543e94d66cb', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '1ee5c021183b30ba7b560a58042a196aa9c1127e' })));
+        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) {
@@ -748,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: 'e236c1154e8fbf7b9832f1e5f0be25336d4f0388', "data-version": version }, h(LogoTag, { key: '545da59433be40065075b5cd8f9e8791f8b4ffa8', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'b0c493e8d000d33000a3988e3a336f9b6e2a4101', class: "description" }, h("slot", { key: 'b4efe8c1755ae5579fa6663ef69c605abdb385c4', onSlotchange: () => this.checkDescription() })), h("svg", { key: '7619acaca48988233913e2aa487262b96504be03', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '5c15491d631cdfc0a2afbd245c536ab6de07f212', id: "Logo" }, h("rect", { key: '02f3652d1f1eb1406c5c71d159d0812a3b4cf460', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'f956a38b75c3302ab00a2d3af4615038a48b7692', 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: 'b4d00a33b8948d99d8edea5aec25baf50dfdc171', 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 {
@@ -757,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;z-index:2}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}}post-header:not([data-burger-menu])>post-mainnavigation{display:flex;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-header:not([data-burger-menu])>post-mainnavigation nav{flex:1 1 auto;scroll-behavior:smooth}post-header:not([data-burger-menu])>post-mainnavigation.scrollable,post-header:not([data-burger-menu])>post-mainnavigation.scrollable nav{overflow:hidden}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control{z-index:2;cursor:pointer;padding:1rem;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control.scroll-left{margin-inline-end:-3rem}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control.scroll-right{margin-inline-start:-3rem}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control.d-none{display:none}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control post-icon{font-size:1rem}post-header:not([data-burger-menu])>post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button,post-header:not([data-burger-menu])>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}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a.active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *),post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-expanded=true],post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button.active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *),post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-expanded=true],post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *),post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a.active .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button.active .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a.active .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button.active .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a:hover,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button:hover,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}@media screen and (max-width: 599.98px){post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button,post-header:not([data-burger-menu])>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-header:not([data-burger-menu])>post-mainnavigation post-list-item>button .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button::after,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)),post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))::before,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)).active,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-current=page],post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-expanded=true],post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a.active,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a[aria-current=page],post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover::before,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}post-header[data-burger-menu]>post-mainnavigation nav{transform:none !important}post-header[data-burger-menu]>post-mainnavigation .scroll-control{display:none}post-header[data-burger-menu]>post-mainnavigation post-list-item>a,post-header[data-burger-menu]>post-mainnavigation post-list-item>button,post-header[data-burger-menu]>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-header[data-burger-menu]>post-mainnavigation post-list-item>a::before,post-header[data-burger-menu]>post-mainnavigation post-list-item>button::before,post-header[data-burger-menu]>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-header[data-burger-menu]>post-mainnavigation post-list-item>a.active,post-header[data-burger-menu]>post-mainnavigation post-list-item>a[aria-current=page],post-header[data-burger-menu]>post-mainnavigation post-list-item>a[aria-expanded=true],post-header[data-burger-menu]>post-mainnavigation post-list-item>button.active,post-header[data-burger-menu]>post-mainnavigation post-list-item>button[aria-current=page],post-header[data-burger-menu]>post-mainnavigation post-list-item>button[aria-expanded=true],post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page],post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-header[data-burger-menu]>post-mainnavigation post-list-item>a:hover,post-header[data-burger-menu]>post-mainnavigation post-list-item>button:hover,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-header[data-burger-menu]>post-mainnavigation post-list-item>a:hover::before,post-header[data-burger-menu]>post-mainnavigation post-list-item>button:hover::before,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-header[data-burger-menu]>post-mainnavigation post-list-item>a .nav-el-inactive,post-header[data-burger-menu]>post-mainnavigation post-list-item>button .nav-el-inactive,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-header[data-burger-menu]>post-mainnavigation>button::after,post-header[data-burger-menu]>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
@@ -800,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.
@@ -862,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) {
@@ -876,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()) {
@@ -902,17 +850,38 @@ const PostMainnavigation = class {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (h(Host, { key: 'e3d265f18bb6e2e5f215ad2a6ceb2df8bf97be2c', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: '116f078bcba3ca3ebb09c4a3c2fe616b84522661', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '5ba3151d7c9f75eb4d8e3eac7a38cf2f6ae53852', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '205d09fc7ab8dccd46cd6aa5cdbd23ba8be0cf0f', ref: el => (this.navbar = el) }, h("slot", { key: '7951f73623b9873b9e3ca76dcda2a34922fbe0e7' })), h("div", { key: '56821d40e1f7e771aaa302c640df4003bd3523bc', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '5ee8ea319aada9a12c3983d12f57014db4281d1d', "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;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:1;position:absolute;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{z-index:-1;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]:focus-visible{border-radius:4px}.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:4px;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.
@@ -923,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) {
@@ -939,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));
@@ -955,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();
         }
@@ -973,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 });
         }
     }
     /**
@@ -1016,63 +1016,74 @@ 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) {
@@ -1103,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.
@@ -1134,15 +1139,19 @@ const PostMegadropdown = class {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: 'd189f35bb1b66459d6f50bd3326495fe79429be2', version: version }, h("div", { key: 'a9d7d8e25af433b18548a40be4e724c1a3a57374', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'a9886e9c1797eb11c6988e2b17bb73097ca9fb24', class: "megadropdown" }, h("slot", { key: 'e93c659a3ba85dbecebfaa2b2ed435d05cfc4ecc', name: "megadropdown-title" }), h("slot", { key: 'c6d4952fd218d2c31399b31ebea905a19892461d', name: "megadropdown-overview-link" }), h("div", { key: '82a157f8c6225ccec231d660d55b49abf456ba60', class: "megadropdown-content" }, h("slot", { key: '0c2ad616e2e999bb30cc9e9593fcfa4e4b8d71f0' })), h("div", { key: 'b501280cb3c05bb0210e5fe2380d5c338416df90', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '2b60695fac34563724f09b1e6c51b4b386606f17', name: "back-button" })), h("div", { key: '1554073e2476baf7416937f54203e2e404805360', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '29e8f43ddadfa66c405c6ad0ffbf43237fae97ec', 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}";
+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;
@@ -1155,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.
+         * Sets the trigger state to be active or inactive.
          */
-        this.ariaExpanded = false;
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for mega dropdown control.
-         */
-        this.slottedButton = null;
-        /**
-         * Tracks whether this trigger's dropdown was expanded before a state change.
-         * Used to determine if this trigger should handle focus when its dropdown closes.
-         */
-        this.wasExpanded = false;
-        this.handleKeyDown = (event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                this.handleToggle();
-                if (this.megadropdown && !this.ariaExpanded) {
-                    setTimeout(() => this.megadropdown.focusFirst(), 100);
-                }
-            }
-        };
-        this.handleToggleMegadropdown = (event) => {
-            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: 'b5d3eb64df71ac025f1ca882811b4c6f20ccf8b7', "data-version": version, "tab-index": "-1" }, h("button", { key: '2ba6ec332db1ffbac84dd134b144e33115bac31e' }, h("slot", { key: '39b36a16250897f243b8039342c7ff294f83df4d' }))));
+        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;
@@ -1298,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)) {
@@ -1388,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) {
@@ -1435,7 +1428,7 @@ const PostMenu = class {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'ab27eeef6ddcca57eb65ca9f7471809d9f78d7d1', "data-version": version }, h("post-popovercontainer", { key: 'c8053a6cbae6d22751e81107099180b95829b8c4', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'c60d336220b331cd7f3d5b896788f3fdcee090cf', part: "menu" }, h("slot", { key: '629b1f5dbe4074df6459bdfe64e1c0f836314e85', name: "header" }), h("slot", { key: 'c918bba494424db857e7e99fd80d24224bdeb9ed' })))));
+        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 {
@@ -1445,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}";
@@ -1526,7 +1519,7 @@ const PostMenuTrigger = class {
         }
     }
     render() {
-        return (h(Host, { key: '14592f9564fdb09b2e809374d5794bf71f576dbb', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'a0f463000420df39035cc5a48369d230394b5e04' })));
+        return (h(Host, { key: '3ef7e372c9c655bf1da5d5a7d4bca6925a010f65', "data-version": version, "tab-index": "-1" }, h("slot", { key: '771db943ad5aa639c325f055ba6f9d763bf4256d' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -4256,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) {
@@ -4285,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() {
@@ -4334,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) {
@@ -4362,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();
         }
@@ -4408,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,
@@ -4466,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`;
@@ -4473,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`,
                 });
             }
         }
@@ -4578,9 +4577,9 @@ const PostPopovercontainer = class {
         }
     }
     render() {
-        return (h(Host, { key: '9ec775608a6bfab69c50e9cefb1a42235deaa451', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'b659d1ce9cf9d3b661e3712c689cf1ffb0816f6e', class: "popover-content" }, this.arrow && (h("span", { key: '504e007d07d6b38018d93f5dca5a074b881cd50b', 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: '207062f4582b4aad7b570a7453711fd61654d5e3' }))));
+            } })), h("slot", { key: 'e8737e5acec3a20d258d462a7d82278d303ba353' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -4637,10 +4636,10 @@ const PostTogglebutton = class {
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
     render() {
-        return (h(Host, { key: 'ecd5772b09be8842e5c6fc3bf34932b27d90c533', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '3bb32b33155e71ced9375afb5a26d1d4e63a83c8' })));
+        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 };