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

package/dist/collection/components/post-linkarea/post-linkarea.js

@@ -25,7 +25,7 @@ export class PostLinkarea {
         this.mutationObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b52d413e897694e5d0a9364ecfd8fea4583014e3', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: 'b08cf1ee4c829d27fb166fc9e796d79e5388fe47' })));
+        return (h(Host, { key: 'fd870766c9624ebe770dcaafc4382a87dc07d1b0', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '41865e43ad277b5b529d7891601130aa39e6943d' })));
     }
     static get is() { return "post-linkarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-logo/post-logo.css

@@ -1 +1,3 @@
-: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}
+:host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link{outline-offset:calc(
+      -2px - var(--post-device-border-width-focus)
+    ) !important}.logo-link :focus,:focus-visible{border-radius:.5rem}

package/dist/collection/components/post-logo/post-logo.js

@@ -20,7 +20,7 @@ export class PostLogo {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: 'e236c1154e8fbf7b9832f1e5f0be25336d4f0388', "data-version": version }, h(LogoTag, { key: '545da59433be40065075b5cd8f9e8791f8b4ffa8', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'b0c493e8d000d33000a3988e3a336f9b6e2a4101', class: "description" }, h("slot", { key: 'b4efe8c1755ae5579fa6663ef69c605abdb385c4', onSlotchange: () => this.checkDescription() })), h("svg", { key: '7619acaca48988233913e2aa487262b96504be03', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '5c15491d631cdfc0a2afbd245c536ab6de07f212', id: "Logo" }, h("rect", { key: '02f3652d1f1eb1406c5c71d159d0812a3b4cf460', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'f956a38b75c3302ab00a2d3af4615038a48b7692', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'b4d00a33b8948d99d8edea5aec25baf50dfdc171', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (h(Host, { key: '39444d3dd1a87425c7134de5af6ad623a68197c0', "data-version": version }, h(LogoTag, { key: '8f41d8c85212f7fde23c11fa0a0fb506deb5e0c9', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '06b777726f42914b941a980bce9dd4ba3dc3637e', class: "description" }, h("slot", { key: 'd95f99a2d3b09ffab6d0e7c11b99178d6c1fb7ef', onSlotchange: () => this.checkDescription() })), h("svg", { key: '57fa969750327b0907cd3f5abefd14b52d176dd8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '61172060743d8d155bcde7d636da3c5569ec1951', id: "Logo" }, h("rect", { key: 'ef042aea64e01c52d241ff599290646af309f868', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'ef5b2d4666dc676157fddacfe9b3f15c017e2e02', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '816fd96b39a89ba22571e7e3257758e39b2599b0', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
     static get is() { return "post-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-mainnavigation/post-mainnavigation.css

@@ -1 +1 @@
-:root{--post-icon-chevrondown: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbmRvd24iPjxzeW1ib2wgaWQ9InMxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMi4wMSA1LjIyYzAtLjE5LjA3LS4zOC4yMi0uNTMuMjktLjI5Ljc3LS4yOSAxLjA2IDBsNC43MiA0LjcyIDQuNzItNC43MmMuMjktLjI5Ljc3LS4yOSAxLjA2IDBzLjI5Ljc3IDAgMS4wNmwtNS43OCA1Ljc4LTUuNzgtNS43OGEuNzQuNzQgMCAwIDEtLjIyLS41MyIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMy4yNiA3Ljg1YzAtLjIyLjA4LS40NS4yNi0uNjIuMzQtLjM0LjktLjM0IDEuMjQgMGw3LjI2IDcuMjYgNy4yNi03LjI2Yy4zNC0uMzQuOS0uMzQgMS4yNCAwcy4zNC45IDAgMS4yNGwtOC41IDguNS04LjUxLTguNWEuOS45IDAgMCAxLS4yNi0uNjJaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik00LjUgMTAuNTRjMC0uMjYuMS0uNTEuMjktLjcxYS45OTYuOTk2IDAgMCAxIDEuNDEgMGw5Ljc5IDkuNzkgOS44LTkuOGEuOTk2Ljk5NiAwIDEgMSAxLjQxIDEuNDFMMTUuOTkgMjIuNDQgNC44IDExLjI1Yy0uMi0uMi0uMjktLjQ1LS4yOS0uNzFaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiPjxwYXRoIGQ9Ik01LjggMTMuMTdhMS4xMjMgMS4xMjMgMCAwIDEgMS45Mi0uOEwyMC4wNSAyNC43bDEyLjM0LTEyLjM0Yy40NC0uNDQgMS4xNS0uNDQgMS41OSAwcy40NCAxLjE1IDAgMS41OUwyMC4wNSAyNy44OCA2LjEzIDEzLjk3Yy0uMjItLjIyLS4zMy0uNTEtLjMzLS44Ii8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Ik03IDE1Ljg3YzAtLjMyLjEyLS42NC4zNy0uODhhMS4yNSAxLjI1IDAgMCAxIDEuNzcgMGwxNC44NyAxNC44NyAxNC44OC0xNC44OGMuNDktLjQ5IDEuMjgtLjQ5IDEuNzcgMHMuNDkgMS4yOCAwIDEuNzdMMjQuMDIgMzMuMzkgNy4zNyAxNi43NWMtLjI0LS4yNC0uMzctLjU2LS4zNy0uODgiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0iTTkuNjMgMjEuMjRhMS4zOCAxLjM4IDAgMCAxIDIuMzUtLjk3TDMyLjAxIDQwLjNsMjAuMDQtMjAuMDRjLjU0LS41NCAxLjQxLS41NCAxLjk1IDBzLjU0IDEuNDEgMCAxLjk1TDMyLjAxIDQ0LjE5IDEwLjAzIDIyLjIyYy0uMjctLjI3LS40LS42Mi0uNC0uOTdaTTAgLjAzaDY0djY0SDB6Ii8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25kb3duIi8+PC9nPjwvc3ZnPg==")}post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;z-index:2}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:"";mask-image:var(--post-icon-chevrondown);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}post-header:not([data-burger-menu])>post-mainnavigation{display:flex;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-header:not([data-burger-menu])>post-mainnavigation nav{flex:1 1 auto;scroll-behavior:smooth}post-header:not([data-burger-menu])>post-mainnavigation.scrollable,post-header:not([data-burger-menu])>post-mainnavigation.scrollable nav{overflow:hidden}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control{z-index:2;cursor:pointer;padding:1rem;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control.scroll-left{margin-inline-end:-3rem}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control.scroll-right{margin-inline-start:-3rem}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control.d-none{display:none}post-header:not([data-burger-menu])>post-mainnavigation .scroll-control post-icon{font-size:1rem}post-header:not([data-burger-menu])>post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a.active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *),post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-expanded=true],post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button.active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *),post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-expanded=true],post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *),post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a.active .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button.active .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a.active .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button.active .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a:hover,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button:hover,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}@media screen and (max-width: 599.98px){post-header:not([data-burger-menu])>post-mainnavigation post-list-item>a,post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button .nav-el-inactive,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button::after,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-header:not([data-burger-menu])>post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-header:not([data-burger-menu])>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)),post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))::before,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)).active,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-current=page],post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-expanded=true],post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a.active,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a[aria-current=page],post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover::before,post-header:not([data-burger-menu])>post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}post-header[data-burger-menu]>post-mainnavigation nav{transform:none !important}post-header[data-burger-menu]>post-mainnavigation .scroll-control{display:none}post-header[data-burger-menu]>post-mainnavigation post-list-item>a,post-header[data-burger-menu]>post-mainnavigation post-list-item>button,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-header[data-burger-menu]>post-mainnavigation post-list-item>a::before,post-header[data-burger-menu]>post-mainnavigation post-list-item>button::before,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-header[data-burger-menu]>post-mainnavigation post-list-item>a.active,post-header[data-burger-menu]>post-mainnavigation post-list-item>a[aria-current=page],post-header[data-burger-menu]>post-mainnavigation post-list-item>a[aria-expanded=true],post-header[data-burger-menu]>post-mainnavigation post-list-item>button.active,post-header[data-burger-menu]>post-mainnavigation post-list-item>button[aria-current=page],post-header[data-burger-menu]>post-mainnavigation post-list-item>button[aria-expanded=true],post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page],post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-header[data-burger-menu]>post-mainnavigation post-list-item>a:hover,post-header[data-burger-menu]>post-mainnavigation post-list-item>button:hover,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-header[data-burger-menu]>post-mainnavigation post-list-item>a:hover::before,post-header[data-burger-menu]>post-mainnavigation post-list-item>button:hover::before,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-header[data-burger-menu]>post-mainnavigation post-list-item>a .nav-el-inactive,post-header[data-burger-menu]>post-mainnavigation post-list-item>button .nav-el-inactive,post-header[data-burger-menu]>post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-header[data-burger-menu]>post-mainnavigation>button::after,post-header[data-burger-menu]>post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}
+:host{display:flex;user-select:none}@media screen and (min-width: 1024px){:host{overflow:hidden}}nav{flex:1 1 auto}@media screen and (min-width: 1024px){nav{scroll-behavior:smooth;max-width:100vw;overflow:hidden;height:var(--post-main-navigation-height)}}.scroll-control{z-index:1;cursor:pointer;padding:1rem;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}.scroll-control.scroll-left{margin-inline-end:-3rem}.scroll-control.scroll-right{margin-inline-start:-3rem}.scroll-control.d-none{display:none}.scroll-control post-icon{font-size:1rem}

package/dist/collection/components/post-mainnavigation/post-mainnavigation.js

@@ -1,21 +1,24 @@
 import { Host, h } from "@stencil/core";
+import { checkRequiredAndType } from "../../utils/index";
 import { version } from "../../../../package";
 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
 export class PostMainnavigation {
+    validateTextMain() {
+        checkRequiredAndType(this, 'textMain', 'string');
+    }
     constructor() {
         this.canScrollLeft = false;
         this.canScrollRight = false;
         this.scrollRight = this.scrollRight.bind(this);
         this.scrollLeft = this.scrollLeft.bind(this);
-        this.handleMutations = this.handleMutations.bind(this);
         this.checkScrollability = this.checkScrollability.bind(this);
         this.resizeObserver = new ResizeObserver(this.checkScrollability);
-        this.mutationObserver = new MutationObserver(this.handleMutations);
+        this.mutationObserver = new MutationObserver(this.checkScrollability);
     }
     componentDidLoad() {
+        this.validateTextMain();
         setTimeout(() => {
-            this.fixLayoutShift();
             this.checkScrollability();
         });
         // Observe the navbar for size changes
@@ -40,30 +43,8 @@ export class PostMainnavigation {
         if (this.scrollRepeatInterval)
             clearInterval(this.scrollRepeatInterval);
     }
-    async handleMutations(mutations) {
-        const addedNodes = mutations.flatMap((mutation) => {
-            return Array.from(mutation.addedNodes);
-        });
-        // Wait for all elements to be hydrated
-        await Promise.all(addedNodes.map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
-        this.fixLayoutShift();
-        this.checkScrollability();
-    }
     get navigationItems() {
-        return Array.from(this.navbar.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
-    }
-    /**
-     * Hack to fix the layout shift due to bold text on active elements
-     */
-    fixLayoutShift() {
-        this.navigationItems
-            .filter(item => !item.matches(':has(.nav-el-active)'))
-            .forEach(item => {
-            item.innerHTML = `
-          <span class="nav-el-active">${item.innerHTML}</span>
-          <span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
-        `;
-        });
+        return Array.from(this.host.querySelectorAll('a:not(post-megadropdown *), post-megadropdown-trigger'));
     }
     /**
      * Returns whether scrolling is enabled in either the left or right direction.
@@ -102,7 +83,7 @@ export class PostMainnavigation {
         }, SCROLL_REPEAT_INTERVAL);
     }
     scrollRight() {
-        const scrollRightLeftEdge = document
+        const scrollRightLeftEdge = this.host.shadowRoot
             .querySelector('.scroll-right')
             .getBoundingClientRect().left;
         for (const navigationItem of this.navigationItems) {
@@ -116,7 +97,7 @@ export class PostMainnavigation {
         }
     }
     scrollLeft() {
-        const scrollLeftRightEdge = document
+        const scrollLeftRightEdge = this.host.shadowRoot
             .querySelector('.scroll-left')
             .getBoundingClientRect().right;
         for (const navigationItem of this.navigationItems.reverse()) {
@@ -142,9 +123,10 @@ export class PostMainnavigation {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (h(Host, { key: 'e3d265f18bb6e2e5f215ad2a6ceb2df8bf97be2c', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: '116f078bcba3ca3ebb09c4a3c2fe616b84522661', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '5ba3151d7c9f75eb4d8e3eac7a38cf2f6ae53852', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '205d09fc7ab8dccd46cd6aa5cdbd23ba8be0cf0f', ref: el => (this.navbar = el) }, h("slot", { key: '7951f73623b9873b9e3ca76dcda2a34922fbe0e7' })), h("div", { key: '56821d40e1f7e771aaa302c640df4003bd3523bc', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '5ee8ea319aada9a12c3983d12f57014db4281d1d', "aria-hidden": "true", name: "chevronright" }))));
+        return (h(Host, { key: '14ca9714f09e1dbbe8c976b8947db07906ec2eb8', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: 'e886823d21e52db04afc91ecbd12149c47d69038', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '3afd56232da3cf120038b68c714c560db16ac30e', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '69c39d75c1f90f01c12904c98fc6e3f8de2ba09d', ref: el => (this.navbar = el), "aria-label": this.textMain }, h("slot", { key: '9251d7cec53c05bf9146d0b2c75533c50f7fe070' })), h("div", { key: '649e7ec3c9f65447a2da965bb7fe0c92b3ff8207', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: 'ac2823ab5195c59ea2831ffb24a1d8a033f7266a', "aria-hidden": "true", name: "chevronright" }))));
     }
     static get is() { return "post-mainnavigation"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["./post-mainnavigation.scss"]
@@ -155,12 +137,42 @@ export class PostMainnavigation {
             "$": ["post-mainnavigation.css"]
         };
     }
+    static get properties() {
+        return {
+            "textMain": {
+                "type": "string",
+                "attribute": "text-main",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the accessible label for the navigation element. This text is used as the `aria-label` attribute to provide screen reader users with a description of the navigation's purpose."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
     static get states() {
         return {
             "canScrollLeft": {},
             "canScrollRight": {}
         };
     }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "textMain",
+                "methodName": "validateTextMain"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "mouseup",

package/dist/collection/components/post-megadropdown/post-megadropdown.css

@@ -1 +1 @@
-@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:1;position:absolute;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{z-index:-1;max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown [slot=megadropdown-overview-link]{text-decoration:none;border-radius:0;padding-block:13px 12px;margin-block-end:16px;display:flex;align-items:center;min-height:56px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset}.megadropdown [slot=megadropdown-overview-link]:focus-visible{border-radius:4px}.megadropdown [slot=megadropdown-overview-link]::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown [slot=megadropdown-overview-link].active,.megadropdown [slot=megadropdown-overview-link][aria-current=page],.megadropdown [slot=megadropdown-overview-link][aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown [slot=megadropdown-overview-link]:hover{background-color:#504f4b;color:#fff}.megadropdown [slot=megadropdown-overview-link]:hover::before{background-color:#504f4b}@media screen and (max-width: 1023.98px){.megadropdown [slot=megadropdown-overview-link]{padding-block:12px 11px;min-height:unset}}@media screen and (max-width: 599.98px){.megadropdown [slot=megadropdown-overview-link]{padding-block:10px 9px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:"";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:4px;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.active,.megadropdown post-list .list-title h3 a[aria-current=page],.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}
+*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;background-color:#fafafa;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{z-index:-1;inset-block-start:100%;max-height:calc(100vh - var(--post-header-height) - 3rem);padding:2rem 2.5rem 2.5rem}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block:1.5rem;display:flex;flex-direction:column}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);order:-1;width:fit-content;padding-inline:0}.back-button:hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash)}.back-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(a){color:LinkText;border:unset}.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}

package/dist/collection/components/post-megadropdown/post-megadropdown.js

@@ -1,9 +1,29 @@
 import { getFocusableChildren } from "../../utils/get-focusable-children";
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { version } from "../../../../package";
 import { breakpoint } from "../../utils/breakpoints";
+import { slide } from "../../animations/index";
+import { fadeSlide } from "../../animations/fade-slide";
+import { checkRequiredAndType } from "../../utils/index";
 export class PostMegadropdown {
+    validateTextClose() {
+        checkRequiredAndType(this, 'textClose', 'string');
+    }
+    validateTextBack() {
+        checkRequiredAndType(this, 'textBack', 'string');
+    }
+    get megadropdownTrigger() {
+        const hostId = this.host.getAttribute('id');
+        return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"]`) : null;
+    }
     constructor() {
+        this.currentAnimation = null;
+        this.isAnimating = false;
+        this.fsAnimationOptions = {
+            translate: -10,
+            duration: 350,
+            easing: 'headerEase',
+        };
         this.device = breakpoint.get('device');
         /**
          * Holds the current visibility state of the dropdown.
@@ -14,13 +34,17 @@ export class PostMegadropdown {
         this.trigger = false;
         /** Holds the current animation class. */
         this.animationClass = null;
-        this.handleClickOutside = (event) => {
+        this.handleClickOutside = async (event) => {
             if (this.device !== 'desktop')
                 return;
             const target = event.target;
             if (this.host.contains(target)) {
                 return;
             }
+            // Ignore clicks on the trigger or its contents to prevent running hide() twice
+            if (this.megadropdownTrigger.contains(target)) {
+                return;
+            }
             if (target instanceof HTMLElement) {
                 const trigger = target.closest('post-megadropdown-trigger');
                 if (trigger) {
@@ -30,14 +54,11 @@ export class PostMegadropdown {
                     }
                 }
             }
-            this.hide(false);
+            await this.hide(false);
         };
-    }
-    get megadropdownTrigger() {
-        const hostId = this.host.getAttribute('id');
-        return hostId
-            ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`)
-            : null;
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleTabOutside = this.handleTabOutside.bind(this);
+        this.handleClickOutside = this.handleClickOutside.bind(this);
     }
     connectedCallback() {
         window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
@@ -46,16 +67,17 @@ export class PostMegadropdown {
         this.getFocusableElements();
     }
     componentDidLoad() {
+        this.validateTextClose();
+        this.validateTextBack();
         this.checkInitialAriaCurrent();
         this.setupObserver();
         this.handleAriaCurrentChange([]);
     }
     disconnectedCallback() {
-        this.removeListeners();
         window.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
-        if (PostMegadropdown.activeDropdown === this) {
+        if (PostMegadropdown.activeDropdown === this)
             PostMegadropdown.activeDropdown = null;
-        }
+        this.removeListeners();
         if (this.defaultSlotObserver) {
             this.defaultSlotObserver.disconnect();
         }
@@ -64,41 +86,70 @@ export class PostMegadropdown {
      * Toggles the dropdown visibility based on its current state.
      */
     async toggle() {
-        if (this.isVisible) {
-            this.hide();
-        }
-        else {
-            await this.show();
+        if (this.isAnimating) {
+            // If this is already animating towards a future state -> reverse intent
+            return this.isVisible ? this.show() : this.hide();
         }
+        return this.isVisible ? this.hide() : this.show();
     }
     /**
      * Displays the dropdown.
      */
     async show() {
+        if (this.device !== 'desktop') {
+            const trigger = this.megadropdownTrigger;
+            if (trigger)
+                this.megadropdownTitle = trigger.innerHTML;
+        }
         if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
             // Close the previously active dropdown without animation
             PostMegadropdown.activeDropdown.forceClose();
         }
-        this.animationClass = 'slide-in';
+        this.cancelAnimation();
+        // Set the megadropdown visible and mark it as the active dropdown
         this.isVisible = true;
         PostMegadropdown.activeDropdown = this;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
-        if (this.firstFocusableEl &&
-            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
-            this.firstFocusableEl.focus();
+        // Update trigger state
+        this.postToggleMegadropdown.emit({ isVisible: true });
+        try {
+            await this.animate('in');
+            this.focusFirst();
+            // After the megadropdown has finished entry animation
+            this.addListeners();
+        }
+        catch {
+            // Open animation was cancelled - reset state
+            this.removeListeners();
+            this.isVisible = false;
+            if (PostMegadropdown.activeDropdown === this)
+                PostMegadropdown.activeDropdown = null;
+            this.postToggleMegadropdown.emit({ isVisible: false, focusParent: true });
         }
-        this.addListeners();
     }
     /**
      * Hides the dropdown with an animation.
      */
     async hide(focusParent = true, forceClose = false) {
-        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
         if (forceClose) {
             this.forceClose();
+            return;
         }
-        else {
-            this.animationClass = 'slide-out';
+        // Update trigger state
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        try {
+            await this.animate('out');
+            // After the closing animation finishes set the megadropdown as non visible
+            this.isVisible = false;
+            this.removeListeners();
+            if (PostMegadropdown.activeDropdown === this)
+                PostMegadropdown.activeDropdown = null;
+        }
+        catch {
+            // Closing animation was cancelled - reset state
+            PostMegadropdown.activeDropdown = this;
+            this.addListeners();
+            this.isVisible = true;
+            this.postToggleMegadropdown.emit({ isVisible: true, focusParent: false });
         }
     }
     /**
@@ -107,63 +158,74 @@ export class PostMegadropdown {
     async focusFirst() {
         this.firstFocusableEl?.focus();
     }
-    breakpointChange(e) {
-        this.device = e.detail;
-        if (this.device === 'desktop' && this.isVisible) {
-            this.animationClass = null;
-        }
-    }
     /**
      * Forces the dropdown to close without animation.
      */
     forceClose() {
-        this.isVisible = false;
-        this.animationClass = null;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
         this.removeListeners();
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: false });
+        this.isVisible = false;
     }
-    handleAnimationEnd() {
-        if (this.animationClass === 'slide-out') {
-            this.isVisible = false;
-            this.animationClass = null;
-            PostMegadropdown.activeDropdown = null;
-            this.removeListeners();
+    // Run the respective animation
+    createAnimation(direction) {
+        if (this.device === 'desktop') {
+            return fadeSlide(this.animatedContainer, direction, this.fsAnimationOptions);
         }
+        return slide(this.animatedContainer, direction, {
+            translate: 100,
+            duration: 350,
+            easing: direction === 'in' ? 'ease-in' : 'ease-out',
+        });
+    }
+    async animate(direction) {
+        this.cancelAnimation();
+        this.currentAnimation = this.createAnimation(direction);
+        // Flag isAnimating used to avoid toggle() de-sync
+        this.isAnimating = true;
+        await this.currentAnimation.finished;
+        this.isAnimating = false;
+        this.currentAnimation = null;
+    }
+    cancelAnimation() {
+        this.currentAnimation?.cancel();
+        this.currentAnimation = null;
+    }
+    breakpointChange(e) {
+        this.device = e.detail;
+        this.cancelAnimation();
     }
     addListeners() {
-        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
-        document.addEventListener('keyup', e => this.handleTabOutside(e));
+        this.host.addEventListener('keydown', this.keyboardHandler);
+        document.addEventListener('keyup', this.handleTabOutside);
         document.addEventListener('mousedown', this.handleClickOutside);
     }
     removeListeners() {
-        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
-        document.removeEventListener('keyup', e => this.handleTabOutside(e));
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        document.removeEventListener('keyup', this.handleTabOutside);
         document.removeEventListener('mousedown', this.handleClickOutside);
     }
     getFocusableElements() {
-        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
-        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
-        // Check for an overview link
-        const overviewLink = this.host.querySelector('a[slot="megadropdown-overview-link"]');
-        if (overviewLink) {
-            focusableChildren.unshift(overviewLink);
-        }
-        this.firstFocusableEl = focusableChildren[0];
-        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+        const focusableElements = [
+            ...getFocusableChildren(this.host),
+            ...getFocusableChildren(this.host.shadowRoot),
+        ];
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements[focusableElements.length - 1];
     }
     // Loop through the focusable children
     keyboardHandler(e) {
-        if (e.key === 'Tab' && this.device !== 'desktop') {
-            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
-                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
-                e.preventDefault();
-                this.lastFocusableEl.focus();
-            }
-            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
-                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
-                e.preventDefault();
-                this.firstFocusableEl.focus();
-            }
+        if (e.key !== 'Tab' || this.device === 'desktop')
+            return;
+        const activeElement = this.host.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey && activeElement === this.firstFocusableEl) {
+            // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+            e.preventDefault();
+            this.lastFocusableEl.focus();
+        }
+        else if (!e.shiftKey && activeElement === this.lastFocusableEl) {
+            // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+            e.preventDefault();
+            this.firstFocusableEl.focus();
         }
     }
     handleTabOutside(e) {
@@ -194,14 +256,8 @@ export class PostMegadropdown {
      */
     setTriggerActive(isActive) {
         const trigger = this.megadropdownTrigger;
-        if (!trigger)
-            return;
-        if (isActive) {
-            trigger.classList.add('active');
-        }
-        else {
-            trigger.classList.remove('active');
-        }
+        if (trigger)
+            trigger.setAttribute('active', isActive.toString());
     }
     /**
      * Updates the megadropdown trigger state when the megadropdown content changes.
@@ -225,9 +281,10 @@ export class PostMegadropdown {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: 'd189f35bb1b66459d6f50bd3326495fe79429be2', version: version }, h("div", { key: 'a9d7d8e25af433b18548a40be4e724c1a3a57374', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'a9886e9c1797eb11c6988e2b17bb73097ca9fb24', class: "megadropdown" }, h("slot", { key: 'e93c659a3ba85dbecebfaa2b2ed435d05cfc4ecc', name: "megadropdown-title" }), h("slot", { key: 'c6d4952fd218d2c31399b31ebea905a19892461d', name: "megadropdown-overview-link" }), h("div", { key: '82a157f8c6225ccec231d660d55b49abf456ba60', class: "megadropdown-content" }, h("slot", { key: '0c2ad616e2e999bb30cc9e9593fcfa4e4b8d71f0' })), h("div", { key: 'b501280cb3c05bb0210e5fe2380d5c338416df90', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '2b60695fac34563724f09b1e6c51b4b386606f17', name: "back-button" })), h("div", { key: '1554073e2476baf7416937f54203e2e404805360', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '29e8f43ddadfa66c405c6ad0ffbf43237fae97ec', name: "close-button" }))))));
+        return (h(Host, { key: 'f099891f24c60ca48ddceeadf754debdf3d8bff1', version: version }, h("div", { key: 'd964a72ec31632a6061f8c656fcc171bc584b764', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: 'b04d8fb83e5658365a1d722572d82237a7bf4eba', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'b7e654a69375c4e8f3af2e8ff65f0a5b7b2ee2cd', class: "megadropdown-content" }, h("slot", { key: '9608aa8b0d9458b593917e66e3fd4db9c447cac2' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack)))));
     }
     static get is() { return "post-megadropdown"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["post-megadropdown.scss"]
@@ -238,11 +295,54 @@ export class PostMegadropdown {
             "$": ["post-megadropdown.css"]
         };
     }
+    static get properties() {
+        return {
+            "textClose": {
+                "type": "string",
+                "attribute": "text-close",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An accessible label for the close button visible on desktop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "textBack": {
+                "type": "string",
+                "attribute": "text-back",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A label for the back button visible on tablet and mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
     static get states() {
         return {
             "device": {},
             "isVisible": {},
             "trigger": {},
+            "megadropdownTitle": {},
             "animationClass": {}
         };
     }
@@ -345,6 +445,15 @@ export class PostMegadropdown {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "textClose",
+                "methodName": "validateTextClose"
+            }, {
+                "propName": "textBack",
+                "methodName": "validateTextBack"
+            }];
+    }
 }
 /** Tracks the currently active dropdown instance. */
 PostMegadropdown.activeDropdown = null;