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

package/loaders/post-logo.js

@@ -1,17 +1,21 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { e as checkEmptyOrUrl } from './index2.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { e as checkEmptyOrUrl } from './p-56ad4838.js';
 
 const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link :focus,:focus-visible{border-radius:2px}";
 const PostLogoStyle0 = postLogoCss;
 
-const PostLogo$1 = /*@__PURE__*/ proxyCustomElement(class PostLogo extends HTMLElement {
+const PostLogo$1 = /*@__PURE__*/ proxyCustomElement(class PostLogo extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.url = undefined;
     }
+    get host() { return 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');
     }
@@ -27,9 +31,8 @@ const PostLogo$1 = /*@__PURE__*/ proxyCustomElement(class PostLogo extends HTMLE
     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 this; }
     static get watchers() { return {
         "url": ["validateUrl"]
     }; }

package/loaders/post-mainnavigation.js

@@ -1,16 +1,47 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { t as throttle } from './p-f7b9f90a.js';
+import { d as defineCustomElement$2 } from './p-f7177e26.js';
 
-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 PostMainnavigation$1 = /*@__PURE__*/ proxyCustomElement(class PostMainnavigation extends HTMLElement {
+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$1 = /*@__PURE__*/ proxyCustomElement(class PostMainnavigation extends H {
     constructor() {
         super();
         this.__registerHost();
-        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 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');
@@ -20,28 +51,186 @@ const PostMainnavigation$1 = /*@__PURE__*/ proxyCustomElement(class PostMainnavi
      */
     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 this; }
+    static get watchers() { return {
+        "translateAmount": ["onTranslateAmountChanges"]
+    }; }
     static get style() { return PostMainnavigationStyle0; }
-}, [4, "post-mainnavigation"]);
+}, [4, "post-mainnavigation", {
+        "canScrollLeft": [32],
+        "canScrollRight": [32],
+        "translateAmount": [32]
+    }, [[9, "mouseup", "stopScrolling"]], {
+        "translateAmount": ["onTranslateAmountChanges"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-mainnavigation"];
+    const components = ["post-mainnavigation", "post-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "post-mainnavigation":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PostMainnavigation$1);
             }
             break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

package/loaders/post-megadropdown-trigger.js

@@ -1,22 +1,29 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { c as checkType } from './p-8562c7dc.js';
 
-const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%}";
+const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%;position:relative;z-index:3}";
 const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
 
-const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdownTrigger extends HTMLElement {
+const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdownTrigger extends H {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * 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 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.
@@ -32,7 +39,7 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
     }
     handleToggle() {
         if (this.megadropdown) {
-            this.megadropdown.toggle(this.host);
+            this.megadropdown.toggle();
         }
         else {
             console.warn(`No post-megadropdown found with ID: ${this.for}`);
@@ -61,9 +68,8 @@ const PostMegadropdownTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostMeg
         }
     }
     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 this; }
     static get watchers() { return {
         "for": ["validateControlFor"]
     }; }

package/loaders/post-megadropdown.js

@@ -1,99 +1,167 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
+import { g as getFocusableChildren } from './p-3aba7629.js';
 
-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$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends HTMLElement {
+const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends H {
     constructor() {
         super();
         this.__registerHost();
         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 this; }
+    /** Tracks the currently active dropdown instance. */
+    static activeDropdown = null;
+    /**
+     * 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.
+     */
+    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();
     }
     /**
      * Toggles the dropdown visibility based on its current state.
      */
-    async toggle(target) {
-        this.isVisible ? this.hide() : await this.show(target);
+    async toggle() {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            await this.show();
+        }
     }
     /**
-     * Displays the popover dropdown
-     *
-     * @param target - The HTML element relative to which the popover dropdown should be displayed.
+     * Displays the dropdown.
      */
-    async show(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.show(target);
-            this.animationClass = 'slide-in';
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
         }
-        else {
-            console.error('show: popoverRef is null or undefined');
+        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();
+    }
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide() {
+        this.animationClass = 'slide-out';
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
+    }
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+        if (this.header) {
+            this.header.addEventListener('postUpdateDevice', (event) => (this.device = event.detail));
         }
     }
     /**
-     * Hides the popover dropdown
+     * Forces the dropdown to close without animation.
      */
-    hide() {
-        if (this.popoverRef) {
-            this.popoverRef.hide();
+    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();
         }
-        else {
-            console.error('hide: popoverRef is null or undefined');
+    }
+    handleClickOutside = (event) => {
+        const target = event.target;
+        if (this.host.contains(target)) {
+            return;
+        }
+        if (target instanceof H) {
+            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);
     }
-    handleBackButtonClick() {
-        this.animationClass = 'slide-out';
+    removeOutsideClickListener() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
     }
-    handleCloseButtonClick() {
-        this.popoverRef.hide();
+    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];
     }
-    handleFocusout(event) {
-        const relatedTarget = event.relatedTarget;
-        const megadropdown = this.popoverRef.querySelector('.megadropdown');
-        if (!megadropdown.contains(relatedTarget)) {
-            this.hide();
+    // 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 this; }
     static get style() { return PostMegadropdownStyle0; }
 }, [4, "post-megadropdown", {
+        "device": [32],
         "isVisible": [32],
         "animationClass": [32],
         "toggle": [64],
-        "show": [64]
+        "show": [64],
+        "hide": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-megadropdown", "post-popovercontainer"];
+    const components = ["post-megadropdown"];
     components.forEach(tagName => { switch (tagName) {
         case "post-megadropdown":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PostMegadropdown$1);
             }
             break;
-        case "post-popovercontainer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 

package/loaders/post-menu-item.js

@@ -1,4 +1,4 @@
-import { P as PostMenuItem$1, d as defineCustomElement$1 } from './post-menu-item2.js';
+import { P as PostMenuItem$1, d as defineCustomElement$1 } from './p-ccccf0c3.js';
 
 const PostMenuItem = PostMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/loaders/post-menu-trigger.js

@@ -1,4 +1,4 @@
-import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './post-menu-trigger2.js';
+import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './p-8b053fd5.js';
 
 const PostMenuTrigger = PostMenuTrigger$1;
 const defineCustomElement = defineCustomElement$1;