@swisspost/design-system-components 9.0.0-next.7 → 9.0.0-next.9

package/dist/collection/components/post-language-switch/post-language-switch.js

@@ -0,0 +1,163 @@
+import { Host, h } from "@stencil/core";
+import { checkEmptyOrOneOf, checkType } from "../../utils/index";
+import { version } from "../../../../package";
+import { SWITCH_VARIANTS } from "./switch-variants";
+import { nanoid } from "nanoid";
+export class PostLanguageSwitch {
+    constructor() {
+        this.menuId = `p${nanoid(11)}`;
+        this.caption = undefined;
+        this.description = undefined;
+        this.variant = 'list';
+        this.activeLang = undefined;
+    }
+    validateCaption(value = this.caption) {
+        checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
+    }
+    validateDescription(value = this.description) {
+        checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
+    }
+    validateVariant(value = this.variant) {
+        checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
+    }
+    connectedCallback() {
+        this.updateChildrenVariant();
+        // Get the active language based on children's active state
+        this.activeLang = Array.from(this.host.querySelectorAll('post-language-option'))
+            .find(el => el.getAttribute('active') == 'true')
+            .getAttribute('code');
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.host.querySelectorAll('post-language-option').forEach(el => {
+            el.setAttribute('variant', this.variant);
+        });
+    }
+    componentShouldUpdate() {
+        this.updateChildrenVariant();
+    }
+    componentDidLoad() {
+        this.validateCaption();
+        this.validateDescription();
+        this.validateVariant();
+        // Detects a change in the active language
+        this.host.addEventListener('postChange', (el) => {
+            this.activeLang = el.detail;
+            // Update the active state in the children post-language-option components
+            this.host.querySelectorAll('post-language-option').forEach(lang => {
+                if (lang.code && lang.code === this.activeLang) {
+                    lang.setAttribute('active', 'true');
+                }
+                else {
+                    lang.setAttribute('active', 'false');
+                }
+            });
+            // Hides the dropdown when an option has been clicked
+            if (this.variant === 'dropdown') {
+                const menu = this.host.shadowRoot.querySelector('post-menu');
+                menu.toggle(menu);
+            }
+        });
+    }
+    renderList() {
+        return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
+    }
+    renderDropdown() {
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": `${this.caption}, ${this.description}` }, this.activeLang.toUpperCase(), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId }, h("div", { class: "post-language-switch-dropdown-container" }, h("slot", null)))));
+    }
+    render() {
+        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
+    }
+    static get is() { return "post-language-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-language-switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-language-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A title for the list of language options"
+                },
+                "attribute": "caption",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A descriptive text for the list of language options"
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwitchVariant",
+                    "resolved": "\"dropdown\" | \"list\"",
+                    "references": {
+                        "SwitchVariant": {
+                            "location": "import",
+                            "path": "./switch-variants",
+                            "id": "src/components/post-language-switch/switch-variants.ts::SwitchVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'list'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeLang": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "caption",
+                "methodName": "validateCaption"
+            }, {
+                "propName": "description",
+                "methodName": "validateDescription"
+            }, {
+                "propName": "variant",
+                "methodName": "validateVariant"
+            }];
+    }
+}

package/dist/collection/components/post-language-switch/switch-variants.js

@@ -0,0 +1 @@
+export const SWITCH_VARIANTS = ['list', 'dropdown'];

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

@@ -1,3 +1,3 @@
 /*!
  * Copyright 2021 by Swiss Post, Information Technology
- */post-list{display:flex;gap:var(--post-list-title-gap);flex-direction:column;align-items:flex-start}post-list>div[role=list]{flex-direction:column;display:flex;gap:var(--post-list-item-gap)}post-list[horizontal]:not([horizontal=false]){flex-direction:row;align-items:baseline}post-list[horizontal]:not([horizontal=false])>div[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}
+ */post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}

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

@@ -14,7 +14,7 @@ export class PostList {
         /**
          * Get the id set on the host element or use a random id by default
          */
-        this.titleId = `list-${crypto.randomUUID()}`;
+        this.titleId = `title-${this.host.id || crypto.randomUUID()}`;
     }
     componentDidLoad() {
         this.checkTitle();
@@ -25,7 +25,7 @@ export class PostList {
         }
     }
     render() {
-        return (h(Host, { key: '7126a864e6c4d8152c9024bd8d390514bc8c0b7a', "data-version": version }, h("div", { key: 'c3f56a0e41146dc5dbd2c3fc165152e05953956f', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '3de0cd83b48ef3a3201f854842781ccba9bedf29' })), h("div", { key: '4b8a4ac0a9c89451a408cc8de814878dc8da11b7', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '474d87804fc39241a0f3541a82bdfbe1491a4452', name: "post-list-item" }))));
+        return (h(Host, { key: '4f982e717530514589c5528553b70463d678b676', "data-version": version }, h("div", { key: 'cc65ed208f48e7a22482af96fd069d05363f2617', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0f8bbeade50b59e53767ce2169dd57bb79644705' })), h("div", { key: '7fa5de37a169e6f76928c2088c46ee747427887e', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '86b4d71b83671babb61dd12e842710d67350a09e', name: "post-list-item" }))));
     }
     static get is() { return "post-list"; }
     static get originalStyleUrls() {
@@ -73,7 +73,7 @@ export class PostList {
                     "text": "The list can become horizontal by setting `horizontal=\"true\"` or just `horizontal`"
                 },
                 "attribute": "horizontal",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/post-list-item/post-list-item.js

@@ -7,7 +7,7 @@ export class PostListItem {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: '25532c40e8f02f335df6b112041cbaf6056576b6', role: "listitem" }, h("slot", { key: '46ddc9e27c71040b271ab6bd59db2ac37fa4a112' })));
+        return (h(Host, { key: 'aa9a31c64e3e8ba5dcac1d03b54ab3c886149c1f', role: "listitem", slot: "post-list-item" }, h("slot", { key: '06353140f8917fc5373de6d56708467af2ef52b2' })));
     }
     static get is() { return "post-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,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: 'd3dd408c30b4e22712b9a293906c7334e7d1852b', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: '4eb08a4d1b4a0ec2557b63678225a16d287c692c', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: 'ab3b1a8da4a7b87aa0a020d47586a7018619e9c3', class: "description" }, h("slot", { key: 'a9c39b1f2f54fd4ceb79a82ab30571c161a29adb', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'af4c3fbdb2a72e0b8518a6c16cefdb795f41244c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '05e25c1522dd4edfc676b04cf9092ed519d95381', id: "Logo" }, h("rect", { key: '12e1b7878e990e110c8ae83ef742bb6fa4c48a2f', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '0e1120c70769c4a23b3711c1157e6f1742e3a75b', 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: 'ccc271be1919898fc6eed78bf2e012e71dd96c48', 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: 'b8d47e2530eb39f7b05370b4cea0b728cb00a1fb', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: '47a4d88622aab30e652a08827e221dacda36cb48', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: '4eb6ad1bc6c165197b6bcce8fe1146eb9d48fb21', class: "description" }, h("slot", { key: 'c66a4385f19711daab6f4ba87d5f78f59ad8b263', onSlotchange: () => this.checkDescription() })), h("svg", { key: '824643e64a3fb0914082f8f78a11753d66c98842', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'e4f63d237c1fe1128005f29ea604c865f6b50943', id: "Logo" }, h("rect", { key: '34fec89177fb5461318d3e8fcc725f32dd97057a', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '5600de7c21a8e363fffa35710a3f41e4295b76c7', 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: '719be82825355704c4eac3c60fb461f6303734f7', 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 @@
-*,::before,::after{box-sizing:border-box}@media screen and (min-width: 1024px){slot[name=back-button],[slot=back-button]{display:none}}@media screen and (min-width: 1024px){h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}}post-mainnavigation{height:100%}:host{height:100%;display:block}.main-navigation{margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem}@media screen and (max-width: 1023.99px){.main-navigation{flex-direction:column}}.main-navigation>post-list{display:flex;align-items:stretch;gap:1rem;height:100%}@media screen and (max-width: 1023.99px){.main-navigation>post-list{flex-direction:column}}.main-navigation a,.main-navigation post-megadropdown-toggle{height:100%;display:flex;align-items:center}
+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:"";-webkit-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");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;-webkit-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");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)}}

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

@@ -1,24 +1,23 @@
 import { Host, h } from "@stencil/core";
 export class PostMainnavigation {
-    handleMegadropdownToggled(event) {
-        // Find next element sibling
-        let megalodon;
-        let target = event.target;
-        while (target !== null) {
-            if (target.tagName === 'POST-MEGADROPDOWN') {
-                megalodon = target;
-                break;
-            }
-            target = target.nextElementSibling;
-        }
-        if (megalodon)
-            megalodon.toggle(event.target);
+    /**
+     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     */
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+    }
+    /**
+     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.header = null;
     }
     handleBackButtonClick() {
-        this.postToggle.emit();
+        if (this.header)
+            this.header.toggleMobileMenu();
     }
     render() {
-        return (h(Host, { key: '5006fede681cf581b878c84fd1a6b7fe4830cbd2', slot: "post-mainnavigation" }, h("div", { key: 'a2273bab074eac3f9197961b935c3ba19ecbbb21', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'c42751bee76cecbb076bb227bd0ffcc634b354a2', name: "back-button" })), h("nav", { key: '89541b5efc3500a8feec250a3d10402ea4b1a3a2', class: "main-navigation" }, h("slot", { key: 'f5f5a030325e701aaaca13747131b1f1fa10e849' }))));
+        return (h(Host, { key: 'f21c438ac0bbcb08e08fd419589bf92b7d8b3a61', slot: "post-mainnavigation" }, h("div", { key: '1925f47932d7e842e8b9f059d7ade955c577fa50', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'fe18f6859a6d79c7ae701b65a31be1eab9c8b2ac', name: "back-button" })), h("nav", { key: 'ad2b0a52bc0bcf78a3c3340ba163ee6167be2c73' }, h("slot", { key: '8fc7b01cc0f3729cd2c12c4967ec87891fe0dcf5' }))));
     }
     static get is() { return "post-mainnavigation"; }
     static get originalStyleUrls() {
@@ -49,13 +48,5 @@ export class PostMainnavigation {
                 }
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "postToggle",
-                "method": "handleMegadropdownToggled",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
+    static get elementRef() { return "host"; }
 }

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

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box}post-popovercontainer{background-color:#fafafa;width:100%;border-bottom:1px solid #000}@media screen and (max-width: 1023.99px){post-popovercontainer{position:absolute;top:var(--header-height) !important;bottom:0;left:0;width:100%;height:auto}}.megadropdown{display:flex;gap:1rem;padding:1.5rem;border-radius:0 0 3px 3px}@media screen and (max-width: 1023.99px){.megadropdown{flex-direction:column}}.megadropdown post-list{display:flex;flex-direction:column;gap:.5rem}.megadropdown post-list-item{border-bottom:1px solid gray}.megadropdown post-list-item>a{padding-block:.25rem;display:block;text-decoration:none}.back-button{display:none}@media screen and (max-width: 1023.99px){.back-button{display:block}}post-closebutton{margin-left:auto}@media screen and (max-width: 1023.99px){post-closebutton{display:none}}h3{font-size:20px}
+@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{--post-global-header-height: 72px;--post-main-header-height: 56px;--post-header-height: calc(var(--post-global-header-height) + var(--post-main-header-height));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{--post-global-header-height: 64px;position:absolute;top:var(--post-header-height) !important;bottom:0;left:0;width:100%;height:auto}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}}

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

@@ -1,39 +1,64 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class PostMegadropdown {
+    constructor() {
+        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();
+            }
+        });
+    }
     /**
-     * Show megadropdown
-     * @param element HTMLElement
-     * @returns boolean
+     * Toggles the dropdown visibility based on its current state.
      */
-    async show(element) {
-        return this.popoverRef.show(element);
+    async toggle(target) {
+        this.isVisible ? this.hide() : await this.show(target);
     }
     /**
-     * Hide megadropdown
-     * @returns boolean
+     * Displays the popover dropdown
+     *
+     * @param target - The HTML element relative to which the popover dropdown should be displayed.
      */
-    async hide() {
-        return this.popoverRef.hide();
+    async show(target) {
+        if (this.popoverRef) {
+            await this.popoverRef.show(target);
+            this.animationClass = 'slide-in';
+        }
+        else {
+            console.error('show: popoverRef is null or undefined');
+        }
     }
     /**
-     * Toggle megadropdown
-     * @param element HTMLElement
-     * @param force boolean
-     * @returns boolean
+     * Hides the popover dropdown
      */
-    async toggle(element, force) {
-        return this.popoverRef.toggle(element, force !== null && force !== void 0 ? force : undefined);
+    hide() {
+        if (this.popoverRef) {
+            this.popoverRef.hide();
+        }
+        else {
+            console.error('hide: popoverRef is null or undefined');
+        }
     }
     handleBackButtonClick() {
-        this.hide();
+        this.animationClass = 'slide-out';
+    }
+    handleCloseButtonClick() {
+        this.popoverRef.hide();
     }
     render() {
-        return (h(Host, { key: '96d71da6b3cfcd8980d7e60cb383d545c754d7b3', slot: "post-mainnavigation" }, h("post-popovercontainer", { key: 'ec27bcdae9da77299d59d8869be60c08816eef85', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '0b97d183a5fad18401aa876cf19d3975a1757d18', class: "megadropdown" }, h("div", { key: '4eb9715d7cf88898dddae702f71d430f1e3810af', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'a21d4b50b1d04211ecfb5d0b145452a6bbae0ae0', name: "back-button" })), h("slot", { key: '5a4dd77f0f91bf6a61ef1cf9bdd4371875a52d2e' })))));
+        return (h(Host, { key: 'cfd4e6c7bb87c50e471d304a4b4f086266e1c2fe' }, h("post-popovercontainer", { key: '31dc3a5e98a5c60a4db8d47375491a6f3957af0b', class: this.animationClass, placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '7001d0e108544a0244af088be0bde49f90a3dea3', class: "megadropdown" }, h("div", { key: '513b0710163e8f58677b6b50d2ba2d241cf9ff35', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5457c0b9bfff045f39f470e600b5aa31036c0807', name: "back-button" })), h("div", { key: 'c3314a4ae4f386224a2db7fe32203f72f6a1b284', onClick: () => this.handleCloseButtonClick(), class: "close-button" }, h("slot", { key: '8feeec24fe5f2522ba1a54ab0b7c682d3a152086', name: "close-button" })), h("slot", { key: '6d9426756a809ed26045c9cd56cacf0f36aa9400', name: "megadropdown-title" }), h("div", { key: 'fd3b0ac7998eec76700ccc6668d8b2e3fcc4c63a', class: "megadropdown-content" }, h("slot", { key: '23638936fdffa224de9631bfd599c0872202a30d' }))))));
     }
     static get is() { return "post-megadropdown"; }
     static get originalStyleUrls() {
         return {
-            "$": ["./post-megadropdown.scss"]
+            "$": ["post-megadropdown.scss"]
         };
     }
     static get styleUrls() {
@@ -41,15 +66,39 @@ export class PostMegadropdown {
             "$": ["post-megadropdown.css"]
         };
     }
+    static get states() {
+        return {
+            "isVisible": {},
+            "animationClass": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postToggleMegadropdown",
+                "name": "postToggleMegadropdown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the dropdown is shown or hidden.\nThe event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
-            "show": {
+            "toggle": {
                 "complexType": {
-                    "signature": "(element: HTMLElement) => Promise<void>",
+                    "signature": "(target: HTMLElement) => Promise<void>",
                     "parameters": [{
-                            "name": "element",
+                            "name": "target",
                             "type": "HTMLElement",
-                            "docs": "HTMLElement"
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -64,47 +113,17 @@ export class PostMegadropdown {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Show megadropdown",
-                    "tags": [{
-                            "name": "param",
-                            "text": "element HTMLElement"
-                        }, {
-                            "name": "returns",
-                            "text": "boolean"
-                        }]
+                    "text": "Toggles the dropdown visibility based on its current state.",
+                    "tags": []
                 }
             },
-            "hide": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Hide megadropdown",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "boolean"
-                        }]
-                }
-            },
-            "toggle": {
+            "show": {
                 "complexType": {
-                    "signature": "(element: HTMLElement, force?: boolean) => Promise<boolean>",
+                    "signature": "(target: HTMLElement) => Promise<void>",
                     "parameters": [{
-                            "name": "element",
+                            "name": "target",
                             "type": "HTMLElement",
-                            "docs": "HTMLElement"
-                        }, {
-                            "name": "force",
-                            "type": "boolean",
-                            "docs": "boolean"
+                            "docs": "- The HTML element relative to which the popover dropdown should be displayed."
                         }],
                     "references": {
                         "Promise": {
@@ -116,22 +135,17 @@ export class PostMegadropdown {
                             "id": "global::HTMLElement"
                         }
                     },
-                    "return": "Promise<boolean>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggle megadropdown",
+                    "text": "Displays the popover dropdown",
                     "tags": [{
                             "name": "param",
-                            "text": "element HTMLElement"
-                        }, {
-                            "name": "param",
-                            "text": "force boolean"
-                        }, {
-                            "name": "returns",
-                            "text": "boolean"
+                            "text": "target - The HTML element relative to which the popover dropdown should be displayed."
                         }]
                 }
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

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

@@ -1 +1 @@
-:host{display:inline-block}
+post-megadropdown-trigger{width:100%}