@swisspost/design-system-components 9.0.0-next.12 → 9.0.0-next.14

package/dist/esm/{post-togglebutton-c2231709.js → post-togglebutton-95ba85d2.js}

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-6bfe6554.js';
-import { v as version } from './package-f8f7bb40.js';
-import { s as slideUp, a as slideDown } from './slide-3422b8a3.js';
-import { c as checkEmptyOrOneOf, d as checkEmptyOrType, b as checkEmptyOrUrl } from './index-b49c9904.js';
+import { r as registerInstance, g as getElement, h, H as Host, c as createEvent } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
+import { s as slideUp, a as slideDown } from './slide-62768431.js';
+import { c as checkEmptyOrOneOf, d as checkEmptyOrType, b as checkEmptyOrUrl } from './index-d1bbbd88.js';
 import { c as checkNonEmpty } from './check-non-empty-58bd6b17.js';
-import { c as checkType } from './check-type-8828dbe4.js';
+import { c as checkType } from './check-type-a6ccc9a3.js';
 import { n as nanoid } from './index.browser-51485f85.js';
 import { g as getRoot } from './get-root-7af2e0d1.js';
 
@@ -11,10 +11,10 @@ const PostClosebutton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    get host() { return getElement(this); }
     render() {
-        return (h(Host, { key: 'cb5be35247053b1227c32f7949baca51ccc31081', "data-version": version }, h("button", { key: 'ece4ca00fedfd0ee76a971ca2a9cf0cf9a1e7f0c', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'c14a15906a1f229d642c2a8aea456f7a4acc5619', "aria-hidden": "true", name: "closex" }), h("span", { key: '94757c5e870f57ec8ba0c52fc5bb2a1f6eed91c2', class: "visually-hidden" }, h("slot", { key: 'a76c388cceca0b7d4da01b8e737e65f24d11df23' })))));
+        return (h(Host, { key: 'c03f50379252ba13992bc3d021989ac07dba9f79', "data-version": version }, h("button", { key: 'e97a86bb6e1eace89a1a3a78fb231047f065dd5e', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'aca522d4c251a8183c91c2bd4d810d0716a2fe13', "aria-hidden": "true", name: "closex" }), h("span", { key: '6873522961b1683d1261163b07ee022f93eed836', class: "visually-hidden" }, h("slot", { key: 'bf4b13356c9a0164f1481d1fedc3a78a53e5f8e0' })))));
     }
-    get host() { return getElement(this); }
 };
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
@@ -151,28 +151,77 @@ function throttle (delay, callback, options) {
   return wrapper;
 }
 
-const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{--global-header-height:72px;--global-header-minimal-height:24px;--main-header-height:56px;--main-header-min-height:56px;--header-height:calc(var(--global-header-height) + var(--main-header-height))}@media screen and (min-width: 1024px){:host{display:block;position:sticky;inset-inline:0;inset-block-start:calc(-1*(var(--global-header-height) + var(--main-header-height) - var(--global-header-minimal-height)));box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.99px){:host{--global-header-height:64px;--main-header-height:48px;--main-header-min-height:48px}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);height:var(--global-header-height);z-index:1}@media screen and (max-width: 1023.99px){.global-header{inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{padding-inline-end:var(--post-core-dimension-12);top:calc((var(--global-header-height) - var(--global-header-minimal-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24)}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-minimal-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.title-header{display:flex;align-items:center;gap:var(--post-core-dimension-8);min-height:var(--main-header-min-height);justify-content:space-between;background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.title-header{padding:var(--post-core-dimension-18) var(--post-core-dimension-16) var(--post-core-dimension-4) var(--post-core-dimension-12)}}@media screen and (max-width: 1023.99px){.title-header{position:sticky;z-index:1;inset-block-start:var(--global-header-height);padding-inline:var(--post-core-dimension-8) var(--post-core-dimension-16);padding-block:var(--post-core-dimension-9);flex-wrap:wrap}.title-header.title-header-mobile-extended{border-bottom:1px solid var(--post-core-color-sandgrey-012)}}:host(:not(:has([slot=title]))) .title-header{display:none}::slotted(h1){margin:0 !important;flex-shrink:10}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.99px){::slotted(h1){font-size:var(--post-core-font-size-20) !important;max-width:calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16))}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.navigation{position:sticky;z-index:1;inset-block-start:var(--global-header-minimal-height)}}@media screen and (max-width: 1023.99px){.navigation{position:fixed;inset-inline:0;inset-block-end:calc(100vh - var(--header-height));box-shadow:var(--post-core-elevation-3);min-height:var(--post-core-dimension-10);max-height:calc(100vh - var(--header-height));overflow:auto}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}";
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+    '[tabindex^="-"]',
+].join(',')})`;
+function getFocusableChildren(element) {
+    return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
+}
+
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1090;--global-header-height:72px;--global-header-minimal-height:24px;--local-header-height:112px;--local-header-min-height:56px;--header-height:calc(var(--global-header-height) + var(--local-header-height));z-index:1020;position:relative}@media screen and (min-width: 1024px){:host{--global-header-reduced-height:24px;--main-navigation-height:56px}}@media screen and (max-width: 1023.98px){:host{--global-header-height:64px;--local-header-height:48px;--local-header-min-height:48px;--main-navigation-height:0px}}:host(:not(:has([slot=title]))){--local-header-height:var(--main-navigation-height)}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);height:var(--global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:var(--post-core-dimension-12);inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24)}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--post-core-dimension-8);min-height:var(--local-header-min-height);background:var(--post-core-color-brand-white);transition:box-shadow .2s ease-in-out}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:calc(-1*(var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height));padding-block-start:var(--post-core-dimension-18);box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:var(--post-core-dimension-9);flex-wrap:wrap}.local-header.local-header-mobile-extended{border-bottom:1px solid var(--post-core-color-sandgrey-012)}.local-header:not(.title-header-mobile-extended){box-shadow:var(--post-core-elevation-3)}}.local-sub{margin-inline-end:var(--post-core-dimension-16)}::slotted(.list-inline){margin:-8px 0 !important;z-index:3 !important;position:relative !important}::slotted(h1){margin:0 !important;flex-shrink:10;z-index:3}@media screen and (min-width: 600px){::slotted(h1){margin-inline-start:var(--post-core-dimension-12) !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:var(--post-core-dimension-8) !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:var(--post-core-font-size-20) !important;max-width:calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16))}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--global-header-minimal-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:var(--post-core-color-brand-white)}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;background:var(--post-core-color-brand-white);inset-block-end:calc(100vh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100vh - var(--header-height));display:flex;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:var(--post-core-dimension-16)}}";
 const PostHeaderStyle0 = postHeaderCss;
 
 const PostHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.scrollParent = null;
-        this.throttledScroll = () => this.handleScrollEvent();
-        this.throttledResize = throttle(50, () => this.handleResize());
-        this.device = null;
-        this.mobileMenuExtended = false;
-    }
+        this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
+    }
+    firstFocusableEl;
+    lastFocusableEl;
+    scrollParent = null;
+    mobileMenu;
+    mobileMenuAnimation;
+    throttledScroll = () => this.handleScrollEvent();
+    throttledResize = throttle(50, () => this.handleResize());
     componentWillRender() {
         this.scrollParent = this.getScrollParent(this.host);
         this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
         window.addEventListener('resize', this.throttledResize, { passive: true });
         this.handleResize();
         this.handleScrollEvent();
+        this.getFocusableElements();
     }
+    get host() { return getElement(this); }
+    device = null;
+    mobileMenuExtended = false;
     frozeBody(isMobileMenuExtended) {
         document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
+        if (isMobileMenuExtended) {
+            this.host.addEventListener('keydown', e => {
+                this.keyboardHandler(e);
+            });
+        }
+        else {
+            this.host.removeEventListener('keydown', e => {
+                this.keyboardHandler(e);
+            });
+        }
     }
+    /**
+     * An event emitted when the device has changed
+     */
+    postUpdateDevice;
     /**
      * Toggles the mobile navigation.
      */
@@ -192,6 +241,36 @@ const PostHeader = class {
         if (!this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
     }
+    // Get all the focusable elements in the post-header mobile menu
+    getFocusableElements() {
+        // Get elements in the correct order (different as the DOM order)
+        const focusableEls = [
+            ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
+            ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-mainnavigation > .back-button, 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];
+    }
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.mobileMenuExtended) {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If Tab and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
     handleScrollEvent() {
         // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
         const st = Math.max(0, this.scrollParent instanceof Document
@@ -223,10 +302,9 @@ const PostHeader = class {
         });
     }
     handleResize() {
-        var _a;
         const previousDevice = this.device;
         let newDevice;
-        const width = window === null || window === void 0 ? void 0 : window.innerWidth;
+        const width = window?.innerWidth;
         if (width >= 1024) {
             newDevice = 'desktop';
         }
@@ -241,29 +319,31 @@ const PostHeader = class {
             this.toggleMobileMenu();
             this.mobileMenuAnimation.finish(); // no animation
         }
-        const mhh = (_a = this.host.shadowRoot.querySelector('.title-header')) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight;
         this.host.style.setProperty('--main-header-height', `${mhh}px`);
         // Apply only on change for doing work only when necessary
         if (newDevice !== previousDevice) {
             this.device = newDevice;
+            this.postUpdateDevice.emit(this.device);
             window.requestAnimationFrame(() => {
                 this.switchLanguageSwitchMode();
             });
         }
     }
     switchLanguageSwitchMode() {
-        var _a;
         const variant = this.device === 'desktop' ? 'menu' : 'list';
-        (_a = this.host.querySelector('post-language-switch')) === null || _a === void 0 ? void 0 : _a.setAttribute('variant', variant);
+        this.host.querySelector('post-language-switch')?.setAttribute('variant', variant);
     }
-    render() {
+    renderNavigation() {
         const navigationClasses = ['navigation'];
         if (this.mobileMenuExtended) {
             navigationClasses.push('extended');
         }
-        return (h(Host, { key: '008e84568ce41249365d93169b2f94cd988601d0', version: version }, h("div", { key: 'f6415c30b3bfacd01a65166c7f0a3afc37676cc8', class: "global-header" }, h("div", { key: 'dc1465a3a68ce8c66c7da644d992c37d8d09ccc4', class: "global-sub" }, h("div", { key: '490b4afe502465bc20ccc41149533929987f2fab', class: "logo" }, h("slot", { key: '28ee1cdb2804f6315fffa2c319a1e2fa1e54ad08', name: "post-logo" }))), h("div", { key: '777d715f4718bb6738665f3d65c9ee4729a977de', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'c1ddbfdecc96fe3a6efb930d8475ee880059d372', name: "meta-navigation" }), h("slot", { key: 'df1ccf5c36ea4a05812c3983961389c42c42ddb9', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'ace2dda9a3f3d898934c7d47c84e2475fb555e5d', name: "post-language-switch" }), h("div", { key: '3e8d94d9534d5daaa2f8e6ca5cc0833e78a49224', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '58e3637f103411f5e577dba931caf884f46a6e47', name: "post-togglebutton" })))), h("div", { key: 'f90ff065ed795fc780c90768e5c0ab5a431bec8d', class: 'title-header ' + (this.mobileMenuExtended ? 'title-header-mobile-extended' : '') }, h("slot", { key: 'a1aaaf02da073b9e7de82e84c93745afa6a8c4e9', name: "title" }), h("div", { key: '84ae2f8b846536130967362de160e054049c8489', class: "global-sub" }, h("slot", { key: '8a845cd7f87b3a2c2fba7ffc1ace31e87f6329d9', name: "local-controls" }), h("slot", { key: 'f3822b883fc88436a84d3ca7f840946af992417e' }))), h("div", { key: '8e0390c6c2b9a71488eea73c9207d0c336c9b75d', ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { key: '5fc2db060eb962c313fc4c9ab67032e990ff54c6', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { key: '7b9147dcf5de01865785d417c8d1966efb891ace', class: "navigation-footer" }, h("slot", { key: '6e163a7dad7b0b0fc02493cd15152179d4242980', name: "meta-navigation" }), h("slot", { key: 'e8fd19eeed8a99d69ccd8635e36cd0256ed4424b', name: "post-language-switch" }))))));
+        return (h("div", { ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
+    }
+    render() {
+        return (h(Host, { key: 'efbf8028f2abf376f497081996dba759f5885630', version: version }, h("div", { key: 'ecaaea274045453ce869f36e8a1155626b1818ba', class: "global-header" }, h("div", { key: '2fda0d65321ad1cbbc47b731f095e0d9b6694d99', class: "global-sub" }, h("div", { key: '24864d5f18c9d923717cc2e996395cff3bd6ce8b', class: "logo" }, h("slot", { key: 'ba82d7f62bb845732fe6066bcdc7eef15913c9e6', name: "post-logo" }))), h("div", { key: 'a0ddea4e564fca1e286998c73fea75eb8c228428', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '0d7aa11452eb69fe28914ff7787c6dc206fd4009', name: "meta-navigation" }), h("slot", { key: 'e92b7b9db6e16e8fcecb1ca74efa63942dd542c5', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c68984037a71d5ac54828f6cf2367c3b07e428fc', name: "post-language-switch" }), h("div", { key: '70fb5040dc2f000c2afa286bb673ae9cf88521cf', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '509fb81812262cd9efdb3a562e48f72b0d29e376', name: "post-togglebutton" })))), h("div", { key: '393d1040bad2f85caced5b4a8ff02e30fa5fd5f1', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '786cc114aae985a0612d3cb044684290e3026462', name: "title" }), h("div", { key: 'd4f68653a09bbf0b222873ed5d23fec6ba9d8f6f', class: "local-sub" }, h("slot", { key: '0ad7dda5490964e9a8eae5e0bf66a117882f7a06', name: "local-controls" }), h("slot", { key: 'bddc01c7696f456c38c200b330767a0f1b353d88' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "mobileMenuExtended": ["frozeBody"]
     }; }
@@ -286,53 +366,111 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
 const PostIcon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.animation = null;
-        this.base = null;
-        this.flipH = false;
-        this.flipV = false;
-        this.name = undefined;
-        this.rotate = null;
-        this.scale = null;
     }
+    get host() { return getElement(this); }
+    /**
+     * The name of the animation.
+     */
+    animation = null;
     validateAnimation(newValue = this.animation) {
         if (newValue !== undefined)
             checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
     }
+    /**
+     * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.
+     */
+    base = null;
     validateBase(newValue = this.base) {
         checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
     }
+    /**
+     * When set to `true`, the icon will be flipped horizontally.
+     */
+    flipH = false;
     validateFlipH(newValue = this.flipH) {
         checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
     }
+    /**
+     * When set to `true`, the icon will be flipped vertically.
+     */
+    flipV = false;
     validateFlipV(newValue = this.flipV) {
         checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
     }
+    /**
+     * The name/id of the icon (e.g. 1000, 1001, ...).
+     */
+    name;
     validateName(newValue = this.name) {
         checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
         checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
     }
+    /**
+     * The number of degree for the css rotate transformation.
+     */
+    rotate = null;
     validateRotate(newValue = this.rotate) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
     }
+    /**
+     * The number for the css scale transformation.
+     */
+    scale = null;
     validateScale(newValue = this.scale) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
     }
-    getPath() {
-        var _a, _b, _c, _d, _e, _f;
-        // Construct icon path from different possible sources
-        const metaBase = (_b = (_a = document.head
-            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-        const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
-        const fileBase = `${(_f = (_e = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase) !== null && _e !== void 0 ? _e : baseHref) !== null && _f !== void 0 ? _f : CDN_URL}/`.replace(/\/\/$/, '/');
-        const fileName = `${this.name}.svg`;
-        const filePath = `${fileBase}${fileName}`;
-        return new URL(filePath, window.location.origin).toString();
+    // Construct the icon url from different possible sources
+    getUrl() {
+        // the first definition object which defines a domain, will be used to set the domain of the file url
+        // the first definition object which defines a slug, will be used to set the slug of the file url
+        const urlDefinitions = [
+            getUrlDefinition(this.base, 'both'),
+            getUrlDefinition(document.head
+                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
+                ?.getAttribute('data-post-icon-base'), 'relative'),
+            getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both'),
+        ];
+        // in case no other definition defines a domain, the current origin is used as a fallback
+        const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin ?? window.location.origin;
+        // in case no other definition defines a slug, the cdn url is used as a fallback
+        const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
+        const file = `${this.name}.svg`;
+        let url;
+        if (slug) {
+            url = new URL(`${origin}${slug}/${file}`).toString();
+        }
+        else {
+            url = new URL(`${CDN_URL}/${file}`).toString();
+        }
+        return url;
+        function getUrlDefinition(url, allow) {
+            return {
+                url: getUrlObject(url),
+                definesDomain: allow !== 'relative' ? definesDomain(url) : false,
+                definesSlug: allow !== 'absolute' ? definesSlug(url) : false,
+            };
+            function getUrlObject(url) {
+                if (url) {
+                    return definesDomain(url) ? new URL(url) : new URL(url, window.location.origin);
+                }
+                else {
+                    return null;
+                }
+            }
+            function definesDomain(url) {
+                return url ? /^https?:\/\//.test(url) : false;
+            }
+            function definesSlug(url) {
+                const urlObject = getUrlObject(url);
+                return Boolean(/^\/.+/.test(urlObject?.pathname));
+            }
+        }
     }
     getStyles() {
-        const path = this.getPath();
+        const url = this.getUrl();
         return Object.entries({
-            '-webkit-mask-image': `url(${path})`,
-            'mask-image': `url('${path}')`,
+            '-webkit-mask-image': `url(${url})`,
+            'mask-image': `url('${url}')`,
             'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
                 (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
         })
@@ -349,9 +487,8 @@ const PostIcon = class {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '70e13e357929d2601de3b61f46f9a717ba491fd5', "data-version": version }, h("span", { key: 'a0c40175bfa6bd06f3498dc056685c8396b6e706', style: this.getStyles() })));
+        return (h(Host, { key: '6c494ba3cdd2ee173fa99a8ce8ff0e8ab5cf2979', "data-version": version }, h("span", { key: 'd9e0192a2788541b97bf3e25468129ac335d44b5', style: this.getStyles() })));
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "animation": ["validateAnimation"],
         "base": ["validateBase"],
@@ -371,21 +508,38 @@ const PostLanguageOption = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postChange = createEvent(this, "postChange", 7);
-        this.code = undefined;
-        this.active = undefined;
-        this.variant = undefined;
-        this.name = undefined;
-        this.url = undefined;
     }
+    get host() { return getElement(this); }
+    /**
+     *  The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
+     */
+    code;
     validateCode(value = this.code) {
         checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
     }
+    /**
+     * If set to `true`, the language option is considered the current language for the page.
+     */
+    active;
     validateActiveProp(value = this.active) {
         checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
     }
+    /**
+     * The variant of the post-language-switch parent (dynamically set by the parent)
+     */
+    variant;
+    /**
+     * The full name of the language. For example, "Deutsch".
+     */
+    name;
     validateName(value = this.name) {
         checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
     }
+    /**
+     * The URL used for the href attribute of the internal anchor.
+     * This field is optional; if not provided, a button will be used internally instead of an anchor.
+     */
+    url;
     validateUrl(value = this.url) {
         checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
     }
@@ -398,6 +552,10 @@ const PostLanguageOption = class {
             throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
         }
     }
+    /**
+     * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
+     */
+    postChange;
     /**
      * Selects the language option programmatically.
      */
@@ -418,9 +576,8 @@ const PostLanguageOption = class {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '6a7c4af5ab0a953cc2c70621efc6fff905638900', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+        return (h(Host, { key: 'eff35e907ca174aa239604d8e3c937309d306cd1', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "code": ["validateCode"],
         "active": ["validateActiveProp"],
@@ -432,27 +589,39 @@ PostLanguageOption.style = PostLanguageOptionStyle0;
 
 const SWITCH_VARIANTS = ['list', 'menu'];
 
-const postLanguageSwitchCss = ":host{display:block}@media screen and (max-width: 1023.99px){:host{display:flex !important;gap:.5rem}}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.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:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}";
+const postLanguageSwitchCss = ":host{display:block}@media screen and (max-width: 1023.98px){:host{display:flex !important;gap:.5rem}}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.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:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}";
 const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
 
 const PostLanguageSwitch = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.menuId = `p${nanoid(11)}`;
-        this.caption = undefined;
-        this.description = undefined;
-        this.variant = 'list';
-        this.activeLang = undefined;
     }
+    get host() { return getElement(this); }
+    /**
+     * A title for the list of language options
+     */
+    caption;
     validateCaption(value = this.caption) {
         checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
     }
+    /**
+     * A descriptive text for the list of language options
+     */
+    description;
     validateDescription(value = this.description) {
         checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
     }
+    /**
+     * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+     */
+    variant = 'list';
     validateVariant(value = this.variant) {
         checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
     }
+    /**
+     * The active language of the language switch
+     */
+    activeLang;
     connectedCallback() {
         this.updateChildrenVariant();
         // Get the active language based on children's active state
@@ -492,6 +661,7 @@ const PostLanguageSwitch = class {
             }
         });
     }
+    menuId = `p${nanoid(11)}`;
     renderList() {
         return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
     }
@@ -501,7 +671,6 @@ const PostLanguageSwitch = class {
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "caption": ["validateCaption"],
         "description": ["validateDescription"],
@@ -516,10 +685,21 @@ const PostListStyle0 = postListCss;
 const PostList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.titleId = undefined;
-        this.titleHidden = false;
-        this.horizontal = false;
     }
+    get host() { return getElement(this); }
+    /**
+     * The unique title of the list that is also referenced in the labelledby
+     */
+    titleId;
+    /**
+     * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+     */
+    titleHidden = false;
+    /**
+     * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+     */
+    horizontal = false;
+    titleEl;
     componentWillLoad() {
         /**
          * Get the id set on the host element or use a random id by default
@@ -535,9 +715,8 @@ const PostList = class {
         }
     }
     render() {
-        return (h(Host, { key: '70594af566e1fe34ce0b9ebe1a8cbbc868dab973', "data-version": version }, h("div", { key: '27b6c4af3d51a0d83f968ec751b6bcf46feb7d05', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: 'a913bd018199bb031e3d96d487bd528831453387' })), h("div", { key: 'e1a3ddecc643a78f57b91cc9ccb0de6b02302a47', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'bd7c6df300d28fe0b9f1dd3135eb42da00e731b9', name: "post-list-item" }))));
+        return (h(Host, { key: 'bdd973098d8b2a74635d489dca8f0f6825e31c51', "data-version": version }, h("div", { key: '9dcd6ca7069658c3e7f0d14fc130d18ebe522acb', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: 'ad51f345b2c120796d02dbc3d6815a58addc7fb4' })), h("div", { key: '47fddd7b977c85c195757f461c0ec009270cdb8b', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '176662b40ca47b6aeeded26256bc84bdee6483a6', name: "post-list-item" }))));
     }
-    get host() { return getElement(this); }
 };
 PostList.style = PostListStyle0;
 
@@ -548,13 +727,13 @@ const PostListItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    get host() { return getElement(this); }
     connectedCallback() {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: 'f7b26e05f1fa8bab9909dcee305dbf74960671eb', role: "listitem", slot: "post-list-item" }, h("slot", { key: '3d75b0acf3f4a89c64c447e8d182bbc9a4f930a0' })));
+        return (h(Host, { key: '8e209e77859bd05d62cae41aec9dec6fb2e820cb', role: "listitem", slot: "post-list-item" }, h("slot", { key: 'ce79a335e80401465b74208957e22983d6df4ce0' })));
     }
-    get host() { return getElement(this); }
 };
 PostListItem.style = PostListItemStyle0;
 
@@ -564,8 +743,12 @@ const PostLogoStyle0 = postLogoCss;
 const PostLogo = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.url = undefined;
     }
+    get host() { return getElement(this); }
+    /**
+     * The URL to which the user is redirected upon clicking the logo.
+     */
+    url;
     validateUrl() {
         checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
     }
@@ -581,25 +764,53 @@ 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: 'c20cf7b8d3684d33cf9b85448a560a93cd4df118', "data-version": version }, h(LogoTag, Object.assign({ key: '16f5f647935c87124d7bf1be5dd5fb4c6d56a76f', class: `logo ${logoLink ? 'logo-link' : ''}` }, (logoLink ? { href: logoLink } : {})), h("span", { key: '1373265c0c2271069c1ee540fb6d5576e67dd923', class: "description" }, h("slot", { key: 'd52c8c0d28e8292f7a30733dc195e1e1e32edf2a', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'ad1c0ff356325415a1f99c4bc941895d1448801a', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'ca8015671b16c192d44a1b48699e45ff7adc6123', id: "Logo" }, h("rect", { key: 'e862e2ea34630326ca6f6eea164f227b138d44c1', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'd25e571bd67524c33c343312826e37dafedf918c', 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: 'a053c52cf9de963d52bc6a0f078a986c836b6038', 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: 'd5f61d2740588571b77c9317d535b5c12c9ba996', "data-version": version }, h(LogoTag, { key: '95d19b08bae7e4137f43c0b7e345fa44ed1a6e9e', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'd7a4e97a9685ebc099e57737926d0fbe6d8ed12f', class: "description" }, h("slot", { key: '6b08a53ad00b103930f0b1aab1d305ae77feccba', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'a7adc544f620325bdec5fa3fbc5a880d10a85f7e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'f68e9b4b0ef8b0d4b34a47a23cb4f0a0e04b5456', id: "Logo" }, h("rect", { key: 'b21a948f30baa4808182ccee37822315d87282eb', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '57ec911498cb069aaa80b4857447c1da3aa76959', 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: 'fed41d70f4532da5769cbc51740e21520568af7f', 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 {
         "url": ["validateUrl"]
     }; }
 };
 PostLogo.style = PostLogoStyle0;
 
-const postMainnavigationCss = "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:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger 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){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger 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){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button: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>button:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:var(--post-core-dimension-4);z-index:1}@media screen and (min-width: 1024px){post-mainnavigation nav{position:relative;max-width:100vw;max-height:var(--post-core-dimension-56);user-select:none}post-mainnavigation post-list{margin-inline:var(--post-core-dimension-4)}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline:var(--post-core-dimension-12);height:var(--post-core-dimension-56);gap:var(--post-core-dimension-4);font-size:var(--post-core-font-size-16);border-block:0 solid rgba(0,0,0,0);border-block-end-color:currentColor}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{border-block-width:var(--post-core-dimension-2)}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{border-block-width:var(--post-core-dimension-4);font-weight:var(--post-core-font-weight-700)}post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:var(--post-core-dimension-12);transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.99px){post-mainnavigation post-list>[role=list]{transform:none !important}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;height:var(--post-core-dimension-48);padding-inline-end:var(--post-core-dimension-6);gap:var(--post-core-dimension-16);border-block:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-block-end-color:currentColor;font-weight:var(--post-core-font-weight-700)}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button.selected{border-block-width:var(--post-core-dimension-3)}post-mainnavigation post-list-item>a:hover::after,post-mainnavigation post-list-item>button:hover::after,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::after{content:\"\";display:block;mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-24);height:var(--post-core-dimension-24)}}post-mainnavigation .back-button .btn{padding-inline:0}";
+const postMainnavigationCss = "post-mainnavigation{flex:0 0 auto}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:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger 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){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger 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){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-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:var(--post-core-dimension-4)}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:var(--post-core-font-size-16)}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:var(--post-core-font-size-14)}}@media screen and (min-width: 1024px){post-mainnavigation{display:block}post-mainnavigation nav{max-width:100vw;background:var(--post-core-color-brand-white);max-height:var(--main-navigation-height);user-select:none;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{position:absolute;inset-block:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;background:var(--post-core-color-brand-white);padding:var(--post-core-dimension-16);box-shadow:var(--post-core-elevation-5);line-height:var(--post-core-line-height-100);height:100%}post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}post-mainnavigation post-list{margin-inline:var(--post-core-dimension-4)}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:var(--post-core-dimension-12);height:var(--main-navigation-height);gap:var(--post-core-dimension-4);font-size:var(--post-core-font-size-16);border-block:0 solid rgba(0,0,0,0);border-block-end-color:currentColor}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:3}}@media screen and (min-width: 1024px)and (min-width: 1024px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:4}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{border-block-width:var(--post-core-dimension-2)}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{border-block-width:var(--post-core-dimension-4);font-weight:var(--post-core-font-weight-700)}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:var(--post-core-font-size-14)}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:var(--post-core-dimension-12);transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:var(--post-core-dimension-48);padding-inline-end:calc(var(--post-core-dimension-6) + var(--post-core-dimension-24) + var(--post-core-dimension-16));gap:var(--post-core-dimension-16);font-weight:var(--post-core-font-weight-400);position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{height:var(--post-core-dimension-3)}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::after,post-mainnavigation post-megadropdown a:hover::after{content:\"\";display:block;margin-right:calc((var(--post-core-dimension-24) + var(--post-core-dimension-16))*-1);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m31.95 16-9.11 9.11c-.2.2-.45.29-.71.29s-.51-.1-.71-.29a.996.996 0 0 1 0-1.41l6.69-6.69H-.05v-2h28.17l-6.69-6.69a.996.996 0 1 1 1.41-1.41l9.11 9.11Z'%3E%3C/path%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-20);min-width:var(--post-core-dimension-20);height:var(--post-core-dimension-20)}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:var(--post-core-dimension-48);padding-inline-end:calc(var(--post-core-dimension-6) + var(--post-core-dimension-24) + var(--post-core-dimension-16));gap:var(--post-core-dimension-16);font-weight:var(--post-core-font-weight-400);position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{height:var(--post-core-dimension-3)}post-mainnavigation post-list-item>a:hover::after,post-mainnavigation post-list-item>button:hover::after,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::after{content:\"\";display:block;margin-right:calc((var(--post-core-dimension-24) + var(--post-core-dimension-16))*-1);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m31.95 16-9.11 9.11c-.2.2-.45.29-.71.29s-.51-.1-.71-.29a.996.996 0 0 1 0-1.41l6.69-6.69H-.05v-2h28.17l-6.69-6.69a.996.996 0 1 1 1.41-1.41l9.11 9.11Z'%3E%3C/path%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-20);min-width:var(--post-core-dimension-20);height:var(--post-core-dimension-20)}}post-mainnavigation .back-button .btn{padding-inline:0}";
 const PostMainnavigationStyle0 = postMainnavigationCss;
 
+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 NAVIGATION_LIST_SELECTOR = 'post-list:not(post-megadropdown *) > [role="list"]';
+const NAVIGATION_ITEM_SELECTOR = ':is(post-list-item > a, post-list-item > post-megadropdown-trigger > button):not(post-megadropdown *)';
 const PostMainnavigation = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.postToggle = createEvent(this, "postToggle", 7);
+    }
+    header;
+    navbar;
+    rightScrollButton;
+    leftScrollButton;
+    scrollRepeatInterval;
+    navbarDisableTimer;
+    mutationObserver = new MutationObserver(async (mutations) => {
+        // Wait for all elements to be hydrated
+        await Promise.all(mutations
+            .flatMap((mutation) => Array.from(mutation.addedNodes))
+            .map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
+        // Recalculate scrollability after DOM changes
+        this.checkScrollability();
+    });
+    get host() { return getElement(this); }
+    canScrollLeft = false;
+    canScrollRight = false;
+    translateAmount = 0;
+    /**
+     * Update navbar translation when 'translateAmount' changes and recalculate scrollability
+     */
+    onTranslateAmountChanges(value) {
+        this.navbar.style.transform = `translateX(-${value}px)`;
+        this.checkScrollability();
     }
     /**
      * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     * This ensures that we can interact with the header for mobile menu toggling.
      */
     connectedCallback() {
         this.header = this.host.closest('post-header');
@@ -609,104 +820,329 @@ const PostMainnavigation = class {
      */
     disconnectedCallback() {
         this.header = null;
+        this.mutationObserver.disconnect();
+    }
+    componentDidLoad() {
+        setTimeout(() => this.checkScrollability()); // Initial check to determine if scrolling is needed
+        this.mutationObserver.observe(this.navigationList, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        window.addEventListener('resize', // Recheck scrollability on window resize
+        throttle(100, () => this.checkScrollability()));
+        // Handle focus changes and adjust scroll as needed
+        this.navbar.addEventListener('focusin', e => this.adjustTranslation(e));
     }
     handleBackButtonClick() {
         if (this.header)
             this.header.toggleMobileMenu();
     }
+    /**
+     * Moves focus on the navbar and adjusts scrolling to bring focused element into view.
+     */
+    adjustTranslation(e) {
+        const focusedElement = e.target;
+        if (!this.canScroll || !focusedElement.matches(NAVIGATION_ITEM_SELECTOR))
+            return;
+        // We need to move the element into the view before it is focused to avoid browser default behavior
+        e.preventDefault();
+        this.withoutTransition(() => {
+            // Try scrolling in both directions, only the necessary translation will actually occur
+            this.translateRightTo(focusedElement);
+            this.translateLeftTo(focusedElement);
+            focusedElement.focus();
+        });
+    }
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    checkScrollability() {
+        const { scrollWidth, clientWidth } = this.navbar;
+        const couldScroll = this.canScroll;
+        if (scrollWidth === clientWidth) {
+            // If scroll width equals client width, scrolling is disabled in both directions
+            this.canScrollLeft = this.canScrollRight = false;
+        }
+        else {
+            this.canScrollLeft = this.translateAmount !== 0; // Scrolling left is possible if not at the start
+            this.canScrollRight = clientWidth + this.translateAmount !== scrollWidth; // Scrolling right is possible if not at the end
+        }
+        if (couldScroll && !this.canScroll) {
+            this.withoutTransition(() => (this.translateAmount = 0));
+        }
+    }
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    get canScroll() {
+        return this.canScrollLeft || this.canScrollRight;
+    }
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    handleScrollButtonClick(direction) {
+        if (!this.canScroll)
+            return;
+        // Disable interaction with the navbar during scrolling
+        this.disableNavbar();
+        // Perform the initial scroll action
+        this.scroll(direction);
+        // Repeat the scrolling action while the button is held down
+        this.scrollRepeatInterval = setInterval(() => {
+            this.scroll(direction);
+        }, SCROLL_REPEAT_INTERVAL);
+    }
+    /**
+     * Stops the repeated scrolling when the mouse button is released.
+     */
+    stopScrolling() {
+        if (this.scrollRepeatInterval)
+            clearInterval(this.scrollRepeatInterval);
+    }
+    scroll(direction) {
+        const navigationItems = Array.from(this.navigationItems);
+        if (direction === 'left')
+            navigationItems.reverse();
+        for (const item of navigationItems) {
+            const couldScroll = direction === 'left' ? this.translateLeftTo(item) : this.translateRightTo(item);
+            if (couldScroll)
+                break;
+        }
+    }
+    translateRightTo(navigationItem) {
+        const itemRightEdgePosition = navigationItem.offsetLeft + navigationItem.offsetWidth + this.getFocusMargin(navigationItem);
+        const lastVisiblePosition = this.navbar.clientWidth + this.translateAmount;
+        // If the item is already fully visible, don't scroll
+        if (itemRightEdgePosition < lastVisiblePosition)
+            return false;
+        const maxTranslateAmount = this.navbar.scrollWidth - this.navbar.clientWidth;
+        const newRightEdgePosition = itemRightEdgePosition + this.rightScrollButton.clientWidth - this.navbar.clientWidth;
+        this.translateAmount = Math.min(maxTranslateAmount, newRightEdgePosition);
+        return true;
+    }
+    translateLeftTo(navigationItem) {
+        const itemLeftEdgePosition = navigationItem.offsetLeft - this.getFocusMargin(navigationItem);
+        const firstVisiblePosition = this.translateAmount;
+        // If the item is already fully visible, don't scroll
+        if (itemLeftEdgePosition > firstVisiblePosition)
+            return false;
+        const minTranslateAmount = 0;
+        const newRightEdgePosition = itemLeftEdgePosition - this.leftScrollButton.clientWidth;
+        this.translateAmount = Math.max(minTranslateAmount, newRightEdgePosition);
+        return true;
+    }
+    /**
+     * Calculate the margin required for focus outline around navigation items
+     */
+    getFocusMargin(navigationItem) {
+        const { outlineWidth, outlineOffset } = getComputedStyle(navigationItem);
+        return parseInt(outlineWidth) + parseInt(outlineOffset) + 1;
+    }
+    /**
+     * Returns the navigation list container element
+     */
+    get navigationList() {
+        return this.navbar.querySelector(NAVIGATION_LIST_SELECTOR);
+    }
+    /**
+     * Returns the navigation items
+     */
+    get navigationItems() {
+        return this.navbar.querySelectorAll(NAVIGATION_ITEM_SELECTOR);
+    }
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    disableNavbar() {
+        if (this.navbarDisableTimer)
+            clearTimeout(this.navbarDisableTimer);
+        this.navbar.style.pointerEvents = 'none';
+        this.navbarDisableTimer = setTimeout(() => {
+            this.navbar.style.pointerEvents = 'initial';
+        }, NAVBAR_DISABLE_DURATION);
+    }
+    /**
+     * Allows to translate the navbar without a transition
+     */
+    withoutTransition(callback) {
+        const transition = this.navbar.style.transition;
+        this.navbar.style.transition = 'none';
+        callback();
+        setTimeout(() => {
+            this.navbar.style.transition = transition;
+        });
+    }
     render() {
-        return (h(Host, { key: '23d1cc3919d15543bf409e8fa25be02973532a12', slot: "post-mainnavigation" }, h("div", { key: '8d35b8b7715fbac387361706a03a10e4af481301', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '01899ddef2cdc321ff7383eec310877335e951a7', name: "back-button" })), h("nav", { key: '3237225f2608b28355e669e11189ba1ccc9c593a' }, h("slot", { key: '32105f3acf726a590631896c707a2149706a90d5' }))));
+        return (h(Host, { key: '3280c55d0f8e7aec6e1dc3f59744114b2557cb04', slot: "post-mainnavigation" }, h("div", { key: '446ede19ef62a21022a771edb8a6e8eb30a5c5d3', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5e923b62133d3452676445349624157fd7d3d957', name: "back-button" })), h("nav", { key: 'd67723ba6b42ec2b083197091ec7226dc258897e', ref: el => (this.navbar = el) }, h("slot", { key: 'ea1a0fd7f76e02b89789713a49fc4d7fd6e8a022' })), h("div", { key: '1a3d640acfe23ae5c5f9ab26a7bca9c3c2bc4434', class: `left-scroll-button${this.canScrollLeft ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: 'a3260bba8104bf9155120e04fed6ba0aa102e529', type: "button", tabindex: "-1", ref: el => (this.leftScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('left') }, h("post-icon", { key: '0bba0a76f93098267be8432636391641f55d5df8', "aria-hidden": "true", name: "chevronleft" }))), h("div", { key: '401ef6821f258737d17ed54ae1c577cc4783a3f9', class: `right-scroll-button${this.canScrollRight ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: 'd964f4b74ad8fef86115b12fcda12cc54da936f3', type: "button", tabindex: "-1", ref: el => (this.rightScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('right') }, h("post-icon", { key: '5758f48df24b4a3ea241f43464b448878e31977d', "aria-hidden": "true", name: "chevronright" })))));
     }
-    get host() { return getElement(this); }
+    static get watchers() { return {
+        "translateAmount": ["onTranslateAmountChanges"]
+    }; }
 };
 PostMainnavigation.style = PostMainnavigationStyle0;
 
-const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}*,::before,::after{box-sizing:border-box}post-popovercontainer{background-color:#fafafa;border:none;border-top:1px solid #e1e0dc;width:100%;border-radius:0;box-shadow:0 8px 6px rgba(0,0,0,.16)}@media screen and (max-width: 1023.99px){post-popovercontainer{position:absolute;top:var(--header-height) !important;bottom:0;left:0;width:100%;height:auto;border-top:unset}post-popovercontainer.slide-in{animation:slide-in;animation-duration:350ms;animation-fill-mode:forwards}post-popovercontainer.slide-out{animation:slide-out;animation-duration:350ms;animation-fill-mode:forwards}}.megadropdown{padding:31px 40px 40px}@media screen and (max-width: 1023.99px){.megadropdown{padding:16px 32px 24px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.99px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.99px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown h2{display:block;font-size:20px}}.megadropdown a:hover{border-block-width:0}.megadropdown a:hover::after{content:unset}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;border-bottom:1px solid #050400;padding:15px 12px 14px 0;display:block;font-weight:900}.megadropdown post-list .list-title h3 a{text-decoration:none;width:100%;font-size:inherit;display:inline-block;font-weight:inherit;height:unset;padding:0;border:0}@media screen and (max-width: 1023.99px){.megadropdown post-list .list-title h3{font-size:16px;padding:12px 12px 11px 0}}.megadropdown post-list-item{border-bottom:1px solid #050400}.megadropdown post-list-item>a{padding:13px 12px 12px 0;display:block;text-decoration:none;width:100%;border-bottom:0;height:auto;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown post-list-item>a{padding:12px 12px 11px 0}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}.megadropdown .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.99px){.megadropdown .back-button{display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.99px){.megadropdown .close-button{display:none}}";
+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{--post-main-header-height:56px;--post-global-header-height:72px;--post-header-height:calc(var(--post-global-header-height) + var(--post-main-header-height));box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;border-top:1px solid #e1e0dc;width:100%;top:100%;left:0;border-radius:0}.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{--post-global-header-height:64px;z-index:4;top:0 !important;left:0;width:100%;position:fixed;height:calc(100vh - var(--post-header-height));max-height:calc(100vh - var(--header-height));border-top:unset;overflow:auto}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.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)){padding:15px 12px 14px 8px;border-bottom:1px solid #050400}.megadropdown post-list .list-title h3 a{padding-block:15px 14px;padding-inline-start:8px;border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:var(--post-core-dimension-48);padding-inline-end:calc(var(--post-core-dimension-6) + var(--post-core-dimension-24) + var(--post-core-dimension-16));gap:var(--post-core-dimension-16);font-weight:var(--post-core-font-weight-400);position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:currentColor;bottom:0;width:100%;height:var(--post-core-dimension-1);position:absolute;left:0}.megadropdown post-list .list-title h3 a:hover::before{height:var(--post-core-dimension-3)}.megadropdown post-list .list-title h3 a:hover::after{content:\"\";display:block;margin-right:calc((var(--post-core-dimension-24) + var(--post-core-dimension-16))*-1);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m31.95 16-9.11 9.11c-.2.2-.45.29-.71.29s-.51-.1-.71-.29a.996.996 0 0 1 0-1.41l6.69-6.69H-.05v-2h28.17l-6.69-6.69a.996.996 0 1 1 1.41-1.41l9.11 9.11Z'%3E%3C/path%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-20);min-width:var(--post-core-dimension-20);height:var(--post-core-dimension-20)}@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)){padding:15px 12px 14px 8px;border-bottom:1px solid #050400}}@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}.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-bottom:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
 const PostMegadropdownStyle0 = postMegadropdownCss;
 
 const PostMegadropdown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
-        this.isVisible = false;
-        this.animationClass = null;
-    }
-    componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.postToggleMegadropdown.emit(this.isVisible);
-        });
-        this.popoverRef.addEventListener('animationend', () => {
-            if (this.animationClass === 'slide-out') {
-                this.hide();
-            }
-        });
     }
+    header;
+    firstFocusableEl;
+    lastFocusableEl;
+    device;
+    get host() { return getElement(this); }
+    /** Tracks the currently active dropdown instance. */
+    static activeDropdown = null;
     /**
-     * Toggles the dropdown visibility based on its current state.
+     * Holds the current visibility state of the dropdown.
+     * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
+     * and updates automatically when the dropdown is toggled.
      */
-    async toggle(target) {
-        this.isVisible ? this.hide() : await this.show(target);
+    isVisible = false;
+    /** Holds the current animation class. */
+    animationClass = null;
+    /**
+     * Emits when the dropdown is shown or hidden.
+     * The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
+     **/
+    postToggleMegadropdown;
+    disconnectedCallback() {
+        this.removeOutsideClickListener();
+        if (PostMegadropdown.activeDropdown === this) {
+            PostMegadropdown.activeDropdown = null;
+        }
+    }
+    componentWillRender() {
+        this.getFocusableElements();
     }
     /**
-     * Displays the popover dropdown
-     *
-     * @param target - The HTML element relative to which the popover dropdown should be displayed.
+     * Toggles the dropdown visibility based on its current state.
      */
-    async show(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.show(target);
-            this.animationClass = 'slide-in';
+    async toggle() {
+        if (this.isVisible) {
+            this.hide();
         }
         else {
-            console.error('show: popoverRef is null or undefined');
+            await this.show();
         }
     }
     /**
-     * Hides the popover dropdown
+     * Displays the dropdown.
      */
-    hide() {
-        if (this.popoverRef) {
-            this.popoverRef.hide();
-        }
-        else {
-            console.error('hide: popoverRef is null or undefined');
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
         }
+        this.isVisible = true;
+        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
+        this.animationClass = 'slide-in';
+        PostMegadropdown.activeDropdown = this;
+        this.postToggleMegadropdown.emit(this.isVisible);
+        this.addOutsideClickListener();
     }
-    handleBackButtonClick() {
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide() {
         this.animationClass = 'slide-out';
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
     }
-    handleCloseButtonClick() {
-        this.popoverRef.hide();
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+        if (this.header) {
+            this.header.addEventListener('postUpdateDevice', (event) => (this.device = event.detail));
+        }
     }
-    handleFocusout(event) {
-        const relatedTarget = event.relatedTarget;
-        const megadropdown = this.popoverRef.querySelector('.megadropdown');
-        if (!megadropdown.contains(relatedTarget)) {
-            this.hide();
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    forceClose() {
+        this.isVisible = false;
+        this.animationClass = null;
+        this.postToggleMegadropdown.emit(this.isVisible);
+        this.removeOutsideClickListener();
+    }
+    handleAnimationEnd() {
+        if (this.animationClass === 'slide-out') {
+            this.isVisible = false;
+            this.animationClass = null;
+            this.postToggleMegadropdown.emit(this.isVisible);
+            this.removeOutsideClickListener();
+        }
+    }
+    handleClickOutside = (event) => {
+        const target = event.target;
+        if (this.host.contains(target)) {
+            return;
+        }
+        if (target instanceof HTMLElement) {
+            const trigger = target.closest('post-megadropdown-trigger');
+            if (trigger) {
+                const targetDropdownId = trigger.getAttribute('for');
+                if (targetDropdownId !== this.host.id) {
+                    return;
+                }
+            }
+        }
+        this.hide();
+    };
+    addOutsideClickListener() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+    removeOutsideClickListener() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+    getFocusableElements() {
+        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
+        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.device !== 'desktop') {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
         }
     }
     render() {
-        return (h(Host, { key: 'cb7df3441b1c064045c6d27cd7e20376a62de57c' }, h("post-popovercontainer", { key: '8c2de3df3d1dd59187f463d751654958326dde02', class: this.animationClass, placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '392182e1d6206c969fc64b1758d121e1ab6361f3', class: "megadropdown", onFocusout: e => this.handleFocusout(e) }, h("div", { key: '45742e41d227d0481436bd49de065044a2ce5e35', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5607a569924faba3be599b6e1f53f4a8704b2f05', name: "back-button" })), h("div", { key: 'c1a99e2d25af71fc3122e1173549ad7fe1d920b7', onClick: () => this.handleCloseButtonClick(), class: "close-button" }, h("slot", { key: '82059d749600e18e63c836d5ab6697eb50ec91cf', name: "close-button" })), h("slot", { key: 'eea5e876c1ae5558a3c5c6301b298e564d8b75b0', name: "megadropdown-title" }), h("div", { key: '16b0f351786aef2827ce08163a554e49c40f224b', class: "megadropdown-content" }, h("slot", { key: '97e5230769b01070e488f71704740ec27de9f2d4' }))))));
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (h(Host, { key: '5aa08b01be715325182c245e1b0ae2456bcc5df6' }, h("div", { key: '0737c9368ecbffac59bbdf47fabac3f3b94ae7bb', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'efe49f3f9cdcd99e2feca78b772c944405e19f21', class: "megadropdown" }, h("div", { key: '14dd7ff2f7e7b1eb91f2673a25d7ccafffe4f9d0', onClick: () => this.hide(), class: "back-button" }, h("slot", { key: '554e30e6408c0bef0549f5e2c31dcd8b90ceee40', name: "back-button" })), h("div", { key: '4e7335152d7b6649918adf075213ebbf8b8ddeaa', onClick: () => this.hide(), class: "close-button" }, h("slot", { key: 'db90f3a5334ce723c0ee672a96167197ca25b545', name: "close-button" })), h("slot", { key: 'b11b1d16147f88103f2eb24c8dd21394de53f69c', name: "megadropdown-title" }), h("div", { key: '6d837c1a70f66f00097fb531058750fbac6fd41a', class: "megadropdown-content" }, h("slot", { key: 'be685185f04e44d867167f918494d086856b5928' }))))));
     }
-    get host() { return getElement(this); }
 };
 PostMegadropdown.style = PostMegadropdownStyle0;
 
-const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%}";
+const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}";
 const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
 
 const PostMegadropdownTrigger = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for mega dropdown control.
-         */
-        this.slottedButton = null;
-        this.for = undefined;
-        this.ariaExpanded = false;
     }
+    /**
+     * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
+     */
+    for;
+    get host() { return getElement(this); }
+    /**
+     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
+     */
+    ariaExpanded = false;
+    /**
+     * Reference to the slotted button within the trigger, if present.
+     * Used to manage click and key events for mega dropdown control.
+     */
+    slottedButton = null;
     /**
      * 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.
@@ -722,7 +1158,7 @@ const PostMegadropdownTrigger = class {
     }
     handleToggle() {
         if (this.megadropdown) {
-            this.megadropdown.toggle(this.host);
+            this.megadropdown.toggle();
         }
         else {
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
@@ -751,43 +1187,14 @@ const PostMegadropdownTrigger = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ba9b6922d4f4eac596f7d1310a5a1bf534b156d8', "data-version": version, "tab-index": "-1" }, h("button", { key: '5fe4ea7f385897606f472ea72be84399e76550e2' }, h("slot", { key: '333f583f0db191599c4be9be9647789b2ea1ecaf' }))));
+        return (h(Host, { key: '2e009cb0dbfd81785d3a8ce5802a4fab0e84a52e', "data-version": version, "tab-index": "-1" }, h("button", { key: 'd77d9a5eb5786a63cf7453c639647adc705892bc' }, h("slot", { key: '19f4b17dc2d073b0770c33d6acfb763c1e47735a' }))));
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }
 };
 PostMegadropdownTrigger.style = PostMegadropdownTriggerStyle0;
 
-const focusableSelector = `:where(${[
-    'button',
-    'input:not([type="hidden"])',
-    '[tabindex]',
-    'select',
-    'textarea',
-    '[contenteditable]',
-    'a[href]',
-    'iframe',
-    'audio[controls]',
-    'video[controls]',
-    'area[href]',
-    'details > summary:first-of-type',
-].join(',')})`;
-const focusDisablingSelector = `:where(${[
-    '[inert]',
-    '[inert] *',
-    ':disabled',
-    'dialog:not([open]) *',
-    '[popover]:not(:popover-open) *',
-    'details:not([open]) > *:not(details > summary:first-of-type)',
-    'details:not([open]) > *:not(details > summary:first-of-type) *',
-    '[tabindex^="-"]',
-].join(',')})`;
-const getFocusableChildren = (element) => {
-    return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
-};
-
 const postMenuCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}.popover-container{display:flex;flex-direction:column}";
 const PostMenuStyle0 = postMenuCss;
 
@@ -795,36 +1202,38 @@ const PostMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.toggleMenu = createEvent(this, "toggleMenu", 7);
-        this.lastFocusedElement = null;
-        this.KEYCODES = {
-            SPACE: ' ',
-            ENTER: 'Enter',
-            UP: 'ArrowUp',
-            DOWN: 'ArrowDown',
-            TAB: 'Tab',
-            HOME: 'Home',
-            END: 'End',
-            ESCAPE: 'Escape',
-        };
-        this.handleKeyDown = (e) => {
-            e.stopPropagation();
-            if (e.key === this.KEYCODES.ESCAPE) {
-                this.toggle(this.host);
-                return;
-            }
-            if (Object.values(this.KEYCODES).includes(e.key)) {
-                this.controlKeyDownHandler(e);
-            }
-        };
-        this.handleClick = (e) => {
-            const target = e.target;
-            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-                this.toggle(this.host);
-            }
-        };
-        this.placement = 'bottom';
-        this.isVisible = false;
     }
+    popoverRef;
+    lastFocusedElement = null;
+    KEYCODES = {
+        SPACE: ' ',
+        ENTER: 'Enter',
+        UP: 'ArrowUp',
+        DOWN: 'ArrowDown',
+        TAB: 'Tab',
+        HOME: 'Home',
+        END: 'End',
+        ESCAPE: 'Escape',
+    };
+    get host() { return getElement(this); }
+    /**
+     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
+     * towards the viewport if they would overlap edge boundaries.
+     */
+    placement = 'bottom';
+    /**
+     * Holds the current visibility state of the menu.
+     * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
+     * and updates automatically when the menu is toggled.
+     */
+    isVisible = false;
+    /**
+     * Emits when the menu is shown or hidden.
+     * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
+     **/
+    toggleMenu;
+    root;
     connectedCallback() {
         this.root = getRoot(this.host);
         this.host.addEventListener('keydown', this.handleKeyDown);
@@ -844,7 +1253,12 @@ const PostMenu = class {
      * Toggles the menu visibility based on its current state.
      */
     async toggle(target) {
-        this.isVisible ? await this.hide() : await this.show(target);
+        if (this.isVisible) {
+            await this.hide();
+        }
+        else {
+            await this.show(target);
+        }
     }
     /**
      * Displays the popover menu, focusing the first menu item.
@@ -878,6 +1292,22 @@ const PostMenu = class {
             console.error('hide: popoverRef is null or undefined');
         }
     }
+    handleKeyDown = (e) => {
+        e.stopPropagation();
+        if (e.key === this.KEYCODES.ESCAPE) {
+            this.toggle(this.host);
+            return;
+        }
+        if (Object.values(this.KEYCODES).includes(e.key)) {
+            this.controlKeyDownHandler(e);
+        }
+    };
+    handleClick = (e) => {
+        const target = e.target;
+        if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+            this.toggle(this.host);
+        }
+    };
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -926,9 +1356,8 @@ const PostMenu = class {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: '68c4661d3ab9256dadbbe3243247456c090b728e', "data-version": version }, h("post-popovercontainer", { key: 'b6cb0624239e0ed5aeadac63ffb1b1f7fb0e873e', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '608f677ae715eb09ed46fde9912241dc35673e06', class: "popover-container", part: "popover-container" }, h("slot", { key: '83f84b7b29b4d7c9d4e0924026ca7469c1f0cfb0' })))));
+        return (h(Host, { key: '071532c327f80197dda662f77e5cb2444281087d', "data-version": version }, h("post-popovercontainer", { key: '9f70ca4009139e0547026b26be610a02f4f1a95a', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '3ff1048a8fb27402a82cedc3dc300366063c9601', class: "popover-container", part: "popover-container" }, h("slot", { key: 'bed6c96b7502e0032b746ac6fdf8c3dd6d782e48' })))));
     }
-    get host() { return getElement(this); }
 };
 PostMenu.style = PostMenuStyle0;
 
@@ -938,20 +1367,22 @@ const PostMenuTriggerStyle0 = postMenuTriggerCss;
 const PostMenuTrigger = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for menu control.
-         */
-        this.slottedButton = null;
-        this.handleKeyDown = (e) => {
-            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.handleToggle();
-            }
-        };
-        this.for = undefined;
-        this.ariaExpanded = false;
     }
+    /**
+     * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
+     */
+    for;
+    get host() { return getElement(this); }
+    /**
+     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
+     */
+    ariaExpanded = false;
+    /**
+     * Reference to the slotted button within the trigger, if present.
+     * Used to manage click and key events for menu control.
+     */
+    slottedButton = null;
+    root;
     /**
      * 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.
@@ -974,6 +1405,12 @@ const PostMenuTrigger = class {
             console.warn(`No post-menu found with ID: ${this.for}`);
         }
     }
+    handleKeyDown = (e) => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.handleToggle();
+        }
+    };
     componentDidLoad() {
         this.root = getRoot(this.host);
         this.validateControlFor();
@@ -1000,9 +1437,8 @@ const PostMenuTrigger = class {
         }
     }
     render() {
-        return (h(Host, { key: '5bdaebd0c1f46fda5804c0e8d39ab3e714b523c5', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'ffee26535991d712f44cb1859a5976ec89ad772a' })));
+        return (h(Host, { key: 'a0fff619978087ce0c67d7d327982424e3784ff0', "data-version": version, "tab-index": "-1" }, h("slot", { key: '93e26150b59e9a01275a6815096e09ff5fac146b' })));
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }
@@ -3111,7 +3547,7 @@ const computePosition = (reference, floating, options) => {
   }
 `,E=null;function I(e){if(E===null)try{E=new CSSStyleSheet,E.replaceSync(C);}catch{E=!1;}if(E===!1){let t=document.createElement("style");t.textContent=C,e instanceof Document?e.head.prepend(t):e.prepend(t);}else e.adoptedStyleSheets=[E,...e.adoptedStyleSheets];}function K(){window.ToggleEvent=window.ToggleEvent||c;function e(n){return n?.includes(":popover-open")&&(n=n.replace(J,"$1.\\:popover-open")),n}f(Document.prototype,"querySelector",e),f(Document.prototype,"querySelectorAll",e),f(Element.prototype,"querySelector",e),f(Element.prototype,"querySelectorAll",e),f(Element.prototype,"matches",e),f(Element.prototype,"closest",e),f(DocumentFragment.prototype,"querySelectorAll",e),f(DocumentFragment.prototype,"querySelectorAll",e),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n);}},showPopover:{enumerable:!0,configurable:!0,value(){S(this);}},hidePopover:{enumerable:!0,configurable:!0,value(){m(this,!0,!0);}},togglePopover:{enumerable:!0,configurable:!0,value(n){h.get(this)==="showing"&&n===void 0||n===!1?m(this,!0,!0):(n===void 0||n===!0)&&S(this);}}});let t=Element.prototype.attachShadow;t&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(n){let s=t.call(this,n);return I(s),s}}});let o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let n=o.call(this);return n.shadowRoot&&I(n.shadowRoot),n}}});let r=new WeakMap;function i(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),r.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),r.set(this,s);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let s=r.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return r.delete(this),null;let u=v(this),w=this.getAttribute("popovertarget");return (u instanceof Document||u instanceof B)&&w&&u.getElementById(w)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s);}}});}i(HTMLButtonElement),i(HTMLInputElement);let l=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=v(s);if(!(u instanceof B||u instanceof Document))return;let w=s.closest("[popovertargetaction],[popovertarget]");if(w){O(w),n.preventDefault();return}},a=n=>{let s=n.key,u=n.target;!n.defaultPrevented&&u&&(s==="Escape"||s==="Esc")&&T(u.ownerDocument,!0,!0);};(n=>{n.addEventListener("click",l),n.addEventListener("keydown",a),n.addEventListener("pointerdown",x),n.addEventListener("pointerup",x);})(document),I(document);}j()||K();})();
 
-const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);background:var(--post-current-palette-bg);color:var(--post-current-palette-fg);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}: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) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom: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){box-shadow:var(--post-device-elevation-300);background:var(--post-current-palette-bg);color:var(--post-current-palette-fg);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}: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):not(:has(.arrow)){box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow){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){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){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){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-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}";
 const PostPopovercontainerStyle0 = postPopovercontainerCss;
 
 const SIDE_MAP = {
@@ -3124,12 +3560,35 @@ const PostPopovercontainer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postToggle = createEvent(this, "postToggle", 7);
-        this.placement = 'top';
-        this.edgeGap = 8;
-        this.arrow = false;
     }
+    get host() { return getElement(this); }
+    arrowRef;
+    eventTarget;
+    clearAutoUpdate;
+    toggleTimeoutId;
+    /**
+     * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
+     */
+    postToggle;
+    /**
+     * Whether or not the popover should close when user clicks outside of it
+     */
+    manualClose = false;
+    /**
+     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
+     * towards the viewport if they would overlap edge boundaries.
+     */
+    placement = 'top';
+    /**
+     * Gap between the edge of the page and the popover
+     */
+    edgeGap = 8;
+    /**
+     * Wheter or not to display a little pointer arrow
+     */
+    arrow = false;
     componentDidLoad() {
-        this.host.setAttribute('popover', '');
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
@@ -3247,11 +3706,10 @@ const PostPopovercontainer = class {
         }
     }
     render() {
-        return (h(Host, { key: '844302edb3852f99229d4f4ccacf82cd78588435', "data-version": version }, this.arrow && (h("span", { key: 'ae293d24ef24282bfcaeb7f545653a563e5246d5', class: "arrow", ref: el => {
+        return (h(Host, { key: '6bebf9ab3013796d0eebb3d543411a0e80d2e913', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, this.arrow && (h("span", { key: 'd6eca10452a54073a293128e8faf76e45e35c4c5', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '61dd3072a5217099028e3dd4b22fa845ea2f5970' })));
+            } })), h("slot", { key: '3b6674dfa1b3ffac10c6640717c7ae713577c965' })));
     }
-    get host() { return getElement(this); }
 };
 PostPopovercontainer.style = PostPopovercontainerStyle0;
 
@@ -3261,18 +3719,12 @@ const PostTogglebuttonStyle0 = postTogglebuttonCss;
 const PostTogglebutton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.handleClick = () => {
-            this.toggled = !this.toggled;
-        };
-        this.handleKeydown = (event) => {
-            // perform a click when enter or spaced are pressed to mimic the button behavior
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault(); // prevents the page from scrolling when space is pressed
-                this.host.click();
-            }
-        };
-        this.toggled = false;
     }
+    get host() { return getElement(this); }
+    /**
+     * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+     */
+    toggled = false;
     validateToggled(value = this.toggled) {
         checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
     }
@@ -3282,10 +3734,19 @@ const PostTogglebutton = class {
         this.host.addEventListener('click', () => this.handleClick());
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
+    handleClick = () => {
+        this.toggled = !this.toggled;
+    };
+    handleKeydown = (event) => {
+        // perform a click when enter or spaced are pressed to mimic the button behavior
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault(); // prevents the page from scrolling when space is pressed
+            this.host.click();
+        }
+    };
     render() {
-        return (h(Host, { key: '461f72ebada75a99921b7a166f67f2547aa6465e', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'cd5f4cc4df687cceacb3ea6c125b7b62f01b2712' })));
+        return (h(Host, { key: 'e4974336def6dbf244b3d63b9aa00e2e7bce1920', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'b1179664b0f0651865e973c7afe951102b048877' })));
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "toggled": ["validateToggled"]
     }; }