@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

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

@@ -3,6 +3,11 @@ import { version } from "../../../../package";
 import { checkRequiredAndUrl, checkEmptyOrType, debounce } from "../../utils/index";
 export class PostBreadcrumbs {
     constructor() {
+        /**
+         * The text label for the home breadcrumb item.
+         */
+        this.homeText = 'Home';
+        this.breadcrumbItems = [];
         // Waits for breadcrumbs navigation reference to be available
         this.waitForBreadcrumbsRef = debounce(() => {
             if (this.breadcrumbsNavRef?.clientWidth > 0) {
@@ -19,11 +24,6 @@ export class PostBreadcrumbs {
             this.lastWindowWidth = window.innerWidth;
             this.checkConcatenation();
         };
-        this.homeUrl = undefined;
-        this.homeText = 'Home';
-        this.breadcrumbItems = [];
-        this.isConcatenated = undefined;
-        this.lastWindowWidth = undefined;
     }
     validateHomeUrl() {
         checkRequiredAndUrl(this, 'homeUrl');
@@ -84,7 +84,7 @@ export class PostBreadcrumbs {
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: '6498bbfb52739937fc8043a78fa66d922ce740ef', "data-version": version }, h("nav", { key: '421e51bdf79856ba2feb6c23f1b5bb4f5a87f975', "aria-label": "Breadcrumbs", class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '191140970a37312b486b594b065fcc6ef580f1ae', class: "no-list breadcrumbs-list" }, h("li", { key: '37e0da2803814556bac7102e4e27b13cfd268472' }, h("a", { key: 'b11a8dba7b19dac336dc5905dd74b84a9b83da58', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '147009734e9174d7b9541c3f5325d914ef5d35c0', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '56dd5647116c03c11506fb1e2957edeb389c5718', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
+        return (h(Host, { key: 'bfb41c03aa8e4eb1b756386759a22cea673f8e58', "data-version": version }, h("nav", { key: '8ec1727edb8ace33cfb6aeff9694276a241400d2', "aria-label": "Breadcrumbs", class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '7069c0b8affb3a0ae02fcbb8b4b141ec86560cba', class: "no-list breadcrumbs-list" }, h("li", { key: '258f6a1b228f6695f6d28019da495ac2d7d6abe0' }, h("a", { key: '223c58d20df9943972b36195f9a7401bfdba528b', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '830865dbd6f0d0f01976e48866b4e85fb988070a', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '82ba4bcfbca701d0d5a96c1312c7f91540003b2b', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleBreadcrumbItemClick();
@@ -95,7 +95,7 @@ export class PostBreadcrumbs {
                     linkElement?.click();
                     e.preventDefault();
                 }
-            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: 'ca1fe70041a11fa14e04e3e3d4fce699f23a127f', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '360825da69d23943a55ceb7095fabcccbf65795b', class: "hidden-items" }, h("a", { key: '9c5dedc65e639c853bc537a93971a45c6d801d00', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '2e6961ca93e24ba8042cf15f2f8cc14511c3d374', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'ea61643af1b2384e931ecbf5b9ff48950b69719e', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
+            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: 'cfa5c9753eaaf330b5568501521b3706b16aa8e3', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '19ea40941aa73eeafde12372efbda93bc513e6d2', class: "hidden-items" }, h("a", { key: '52ab7559148d3a897e0c4b2ab328f8e47f497353', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '1d5eb01bb09c841199727c6f5a365976535819f1', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'b4e670439f527af22e6fd3a09685f4817b62ec94', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
     }
     static get is() { return "post-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -113,6 +113,7 @@ export class PostBreadcrumbs {
         return {
             "homeUrl": {
                 "type": "string",
+                "attribute": "home-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -125,11 +126,13 @@ export class PostBreadcrumbs {
                     "tags": [],
                     "text": "The URL for the home breadcrumb item."
                 },
-                "attribute": "home-url",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "homeText": {
                 "type": "string",
+                "attribute": "home-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -142,7 +145,8 @@ export class PostBreadcrumbs {
                     "tags": [],
                     "text": "The text label for the home breadcrumb item."
                 },
-                "attribute": "home-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'Home'"
             }

package/dist/collection/components/post-card-control/post-card-control.js

@@ -73,15 +73,14 @@ export class PostCardControl {
         };
         this.controlId = `PostCardControl_${cardControlIds++}`;
         this.focused = false;
-        this.label = undefined;
-        this.description = undefined;
-        this.type = undefined;
-        this.name = undefined;
-        this.value = undefined;
+        /**
+         * Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
+         */
         this.checked = false;
+        /**
+         * Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
+         */
         this.disabled = false;
-        this.validity = undefined;
-        this.icon = undefined;
         this.cardClickHandler = this.cardClickHandler.bind(this);
         this.controlClickHandler = this.controlClickHandler.bind(this);
         this.controlChangeHandler = this.controlChangeHandler.bind(this);
@@ -280,6 +279,7 @@ export class PostCardControl {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -292,11 +292,13 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the text in the control-label."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -309,11 +311,13 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the description in the control-label."
                 },
-                "attribute": "description",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'checkbox' | 'radio'",
@@ -326,11 +330,13 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `type` attribute of the control."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -343,11 +349,13 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `name` attribute of the control.\n<span className=\"mb-4 banner banner-sm banner-info\">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -360,11 +368,13 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `value` attribute of the control. <span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>"
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -377,12 +387,14 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -395,12 +407,14 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "validity": {
                 "type": "boolean",
+                "attribute": "validity",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -413,11 +427,13 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the validation `validity` of the control.\nTo reset validity to an undefined state, simply remove the attribute from the control."
                 },
-                "attribute": "validity",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -430,7 +446,8 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the icon `name` inside the card.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>"
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -9,6 +9,9 @@ export class PostCollapsible {
     constructor() {
         this.isLoaded = false;
         this.isOpen = true;
+        /**
+         * If `true`, the element is collapsed otherwise it is displayed.
+         */
         this.collapsed = false;
     }
     collapsedChange() {
@@ -68,6 +71,7 @@ export class PostCollapsible {
         return {
             "collapsed": {
                 "type": "boolean",
+                "attribute": "collapsed",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -80,7 +84,8 @@ export class PostCollapsible {
                     "tags": [],
                     "text": "If `true`, the element is collapsed otherwise it is displayed."
                 },
-                "attribute": "collapsed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js

@@ -1,10 +1,19 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkRequiredAndType, eventGuard, getRoot } from "../../utils/index";
+import { checkRequiredAndType, EventFrom, getRoot } from "../../utils/index";
 export class PostCollapsibleTrigger {
     constructor() {
         this.observer = new MutationObserver(() => this.setTrigger());
-        this.for = undefined;
     }
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
@@ -41,11 +50,9 @@ export class PostCollapsibleTrigger {
      * This updates the trigger's "aria-expanded" attribute based on the event detail.
      */
     handlePostToggle(e) {
-        eventGuard(this.host, e, { targetLocalName: 'post-collapsible' }, () => {
-            if (this.trigger) {
-                this.trigger.setAttribute('aria-expanded', `${e.detail}`);
-            }
-        });
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', `${e.detail}`);
+        }
     }
     updateAriaAttributes() {
         if (!this.trigger)
@@ -89,7 +96,7 @@ export class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: '8c835c780604b1138262489ca7d3313288e5ee86', "data-version": version }, h("slot", { key: 'ef354c2ca5e699a4e2c8940959f75a69918f388c' })));
+        return (h(Host, { key: '7fdf4338861df3ed4a61e2de68a0623f7f43df19', "data-version": version }, h("slot", { key: '4efa3ed29778dc162c4e8628f32d447d8b0b9ece' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -97,6 +104,7 @@ export class PostCollapsibleTrigger {
         return {
             "for": {
                 "type": "string",
+                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -109,7 +117,8 @@ export class PostCollapsibleTrigger {
                     "tags": [],
                     "text": "Link the trigger to a post-collapsible with this id"
                 },
-                "attribute": "for",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             }
         };
@@ -143,3 +152,6 @@ export class PostCollapsibleTrigger {
             }];
     }
 }
+__decorate([
+    EventFrom('post-collapsible')
+], PostCollapsibleTrigger.prototype, "handlePostToggle", null);

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

@@ -1 +1 @@
-:host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block: 32px;--post-footer-container-padding-inline: 16px;--post-footer-container-max-width: 1200px;--post-footer-grid-template: auto / auto;--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 0;--post-footer-grid-margin-block-end: 24px;--post-footer-grid-padding-block-end: 0;--post-footer-column-flex-direction: column;--post-footer-column-align-items: start;--post-footer-column-gap: 0;--post-footer-post-list-flex-direction: column;--post-footer-post-list-gap: 8px;--post-footer-post-list-align-items: start;--post-footer-socialmedia-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end: 16px;--post-footer-meta-font-size: inherit;--post-footer-copyright-font-size: var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block: 40px;--post-footer-grid-template: repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap: 32px;--post-footer-grid-column-gap: 16px;--post-footer-grid-margin-block-end: 32px;--post-footer-grid-padding-block-end: 32px;--post-footer-post-list-flex-direction: row;--post-footer-post-list-gap: 16px;--post-footer-post-list-align-items: center;--post-footer-meta-margin-block-end: 8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline: 40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block: 56px;--post-footer-grid-template: auto / repeat(4, auto);--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 24px;--post-footer-grid-margin-block-end: 40px;--post-footer-column-flex-direction: row;--post-footer-column-align-items: center;--post-footer-column-gap: 32px;--post-footer-post-list-gap: 24px;--post-footer-businesssectors-margin-block-end: 24px;--post-footer-meta-font-size: 16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}
+:host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block: 32px;--post-footer-container-padding-inline: 16px;--post-footer-container-max-width: 1200px;--post-footer-grid-template: auto / auto;--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 0;--post-footer-grid-margin-block-end: 24px;--post-footer-grid-padding-block-end: 0;--post-footer-column-flex-direction: column;--post-footer-column-align-items: start;--post-footer-column-gap: 0;--post-footer-post-list-flex-direction: column;--post-footer-post-list-gap: 8px;--post-footer-post-list-align-items: start;--post-footer-socialmedia-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end: var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end: 16px;--post-footer-meta-font-size: inherit;--post-footer-copyright-font-size: var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block: 40px;--post-footer-grid-template: repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap: 32px;--post-footer-grid-column-gap: 16px;--post-footer-grid-margin-block-end: 32px;--post-footer-grid-padding-block-end: 32px;--post-footer-post-list-flex-direction: row;--post-footer-post-list-gap: 16px;--post-footer-post-list-align-items: center;--post-footer-meta-margin-block-end: 8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline: 40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block: 56px;--post-footer-grid-template: auto / repeat(4, auto);--post-footer-grid-row-gap: 0;--post-footer-grid-column-gap: 24px;--post-footer-grid-margin-block-end: 40px;--post-footer-column-flex-direction: row;--post-footer-column-align-items: center;--post-footer-column-gap: 32px;--post-footer-post-list-gap: 24px;--post-footer-businesssectors-margin-block-end: 24px;--post-footer-meta-font-size: 16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}post-accordion-item.d-none+post-accordion-item{--post-accordion-button-border-top-width: unset}post-accordion-item:not(.d-none)~post-accordion-item,post-accordion-item:not(post-accordion-item:not(.d-none)~*):not(:has(~post-accordion-item:not(.d-none))){--post-accordion-button-border-top-width: 0}

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { checkRequiredAndType, breakpoint } from "../../utils/index";
+const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
 /**
  * @slot grid-{1|2|3|4}-title - Slot for the accordion headers (mobile).
  * @slot grid-{1|2|3|4} - Slot for the accordion bodies (mobile) and the grid cells (tablet, desktop).
@@ -11,33 +12,49 @@ import { checkRequiredAndType, breakpoint } from "../../utils/index";
  * @slot copyright - Slot for the copyright text.
  */
 export class PostFooter {
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
     constructor() {
+        this.device = breakpoint.get('device');
+        this.gridSlotDisplayed = {};
         this.breakpointChange = (e) => {
-            this.isMobile = e.detail === 'mobile';
+            this.device = e.detail;
         };
-        this.label = undefined;
-        this.isMobile = breakpoint.get('name') === 'mobile';
+        this.handleGridSlotChange = (...devices) => (e) => {
+            if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
+                this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+            }
+        };
+        this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
     }
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:device', this.breakpointChange);
     }
     componentWillLoad() {
         this.validateLabel();
-    }
-    connectedCallback() {
-        window.addEventListener('postBreakpoint:name', this.breakpointChange);
+        // initialize grid visibility by checking the content of each slot
+        GRID_SLOTS.forEach(slotName => {
+            const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
+            this.updateGridSlotDisplay(slotName, assignedElements.length > 0);
+        });
     }
     disconnectedCallback() {
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
+        window.removeEventListener('postBreakpoint:device', this.breakpointChange);
+    }
+    updateGridSlotDisplay(slotName, hasContent) {
+        if (this.gridSlotDisplayed[slotName] !== hasContent) {
+            this.gridSlotDisplayed = { ...this.gridSlotDisplayed, [slotName]: hasContent };
+        }
     }
     renderAccordion() {
-        return (h("div", { class: "footer-grid" }, h("post-accorddion", { "heading-level": "3", multiple: true }, h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-1-title" })), h("slot", { name: "grid-1" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-2-title" })), h("slot", { name: "grid-2" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-3-title" })), h("slot", { name: "grid-3" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-4-title" })), h("slot", { name: "grid-4" })))));
+        return (h("post-accordion", { headingLevel: 3, multiple: true }, GRID_SLOTS.map(slotName => (h("post-accordion-item", { class: { 'd-none': !this.gridSlotDisplayed[slotName] }, collapsed: true }, h("span", { slot: "header" }, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('mobile'), name: slotName }))))));
     }
-    renderGrid() {
-        return (h("div", { class: "footer-grid" }, h("div", null, h("slot", { name: "grid-1" })), h("div", null, h("slot", { name: "grid-2" })), h("div", null, h("slot", { name: "grid-3" })), h("div", null, h("slot", { name: "grid-4" }))));
+    renderColumns() {
+        return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: 'bc281bf0152baa3afd8c84cffabfa30ce1e45078', "data-version": version }, h("footer", { key: '601562fd03a55f5f6c70e562fcdbd71d33806472' }, h("h2", { key: 'e2af67c5474ea7daa0f3a2d4c6e77e474cb826be', class: "visually-hidden" }, this.label), h("div", { key: '516aaf268492edc20f360ffa6e65a6cfd523212a', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '9d375ab468bc83f8618e8182f9b378eed3f2f871', class: "footer-column" }, h("div", { key: '64bf6a7bbe203e585a21744323bd9e64cee2ef4f', class: "footer-socialmedia" }, h("slot", { key: 'f8c4ab3652fdbfd48db9906ea9b0a45cd9b9f034', name: "socialmedia" })), h("div", { key: '891558211351676a8917657f69c7d51d0e8d147c', class: "footer-app" }, h("slot", { key: 'e94a1a3ab56e7aa61026efa6c011fc507906147d', name: "app" }))), h("div", { key: 'dd1d69c520d0f56882c04294695dd300ed5b77a9', class: "footer-businesssectors" }, h("slot", { key: 'f2b5e4a217263815aac8ea44b30ea05081cfce53', name: "businesssectors" })), h("div", { key: '53d5f33b34c3e4a2b3563f576a16206a63a77673', class: "footer-meta" }, h("slot", { key: 'd18780dd7543d4e50f833550fcd3976d98186e86', name: "meta" })), h("div", { key: '4e057e39bf528a931de27f70d86ee938599274d8', class: "footer-copyright" }, h("slot", { key: '0dd9926c1d7ca418260f973de6eda41726ab54c0', name: "copyright" }))))));
+        return (h(Host, { key: 'a8e9b31b6397a0714dbf04344ab8b14a6557de33', "data-version": version }, h("footer", { key: 'ff7b4b44e16615386c5d12e22cede352f1713771' }, h("h2", { key: '3c9e6bb2abc6c8d780d2d8add008a6429d2e56c5', class: "visually-hidden" }, this.label), h("div", { key: 'ed1081328cc99f3a35fca694bcb46a06a0722e0c', class: "footer-container" }, h("div", { key: 'd251ed5c1cd48a58ffa13fcb3783c20ca0324f62', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '470c1bb6d26ba07b5aad802c7c4a857a4b677a33', class: "footer-column" }, h("div", { key: '1f5aa5b055e5843dbcd2b54e9f3e07f854131bdf', class: "footer-socialmedia" }, h("slot", { key: 'a0a4017352ff569ccda7f0f51192bf2e6ab5bf76', name: "socialmedia" })), h("div", { key: '52adfc1753529270eb3484581dac57978af5f447', class: "footer-app" }, h("slot", { key: '790891de631670fbca5460e3b1a118c22c707180', name: "app" }))), h("div", { key: 'a28cecfec455f31af7d098bf305c2b6382c85d8c', class: "footer-businesssectors" }, h("slot", { key: '14d504b9356313a3e631a9eca247bc3137ab22d5', name: "businesssectors" })), h("div", { key: '81a7114a63ac70c5e3fdf93c72c4f92ff93f8d14', class: "footer-meta" }, h("slot", { key: '346445c8df4d4ca575dff3a78408593b3fde805d', name: "meta" })), h("div", { key: '971e837c1c1553a5223c6a547bcc818baa252d1e', class: "footer-copyright" }, h("slot", { key: '7c22cadabaa8f1845226bccdbe3caf191e39e28e', name: "copyright" }))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -55,6 +72,7 @@ export class PostFooter {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -67,14 +85,16 @@ export class PostFooter {
                     "tags": [],
                     "text": "The label to add to the footer (visually hidden)."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "isMobile": {}
+            "device": {},
+            "gridSlotDisplayed": {}
         };
     }
     static get elementRef() { return "host"; }

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

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-global-header-top: calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top: calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height: calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top: calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top: 0;--post-local-header-top: var(--post-global-header-height);--post-logo-height: var(--post-global-header-height);--post-global-controls-top: 0}@media screen and (max-width: 1023.98px){:host{position:fixed;inset:0;bottom:auto}}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0;position:relative}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:"";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--post-local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;position:relative;padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}
+*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-global-header-top: calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top: calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height: calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top: calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top: 0;--post-local-header-top: var(--post-global-header-height);--post-logo-height: var(--post-global-header-height);--post-global-controls-top: 0}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:"";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--post-local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;inset-block-start:var(--post-global-header-height);padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}

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

@@ -1,10 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { h, Host, } from "@stencil/core";
 import { throttle } from "throttle-debounce";
 import { version } from "../../../../package";
 import { breakpoint } from "../../utils/breakpoints";
 import { slideDown, slideUp } from "../../animations/slide";
 import { getFocusableChildren } from "../../utils/get-focusable-children";
-import { eventGuard } from "../../utils/event-gua";
+import { EventFrom } from "../../utils/event-from";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
@@ -43,6 +53,9 @@ export class PostHeader {
     }
     constructor() {
         this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
+        this.device = breakpoint.get('device');
+        this.mobileMenuExtended = false;
+        this.megadropdownOpen = false;
         this.breakpointChange = (e) => {
             this.device = e.detail;
             this.switchLanguageSwitchMode();
@@ -51,16 +64,8 @@ export class PostHeader {
             }
         };
         this.megadropdownStateHandler = (event) => {
-            eventGuard(this.host, event, {
-                targetLocalName: 'post-megadropdown',
-                delegatorSelector: 'post-header',
-            }, () => {
-                this.megadropdownOpen = event.detail.isVisible;
-            });
+            this.megadropdownOpen = event.detail.isVisible;
         };
-        this.device = breakpoint.get('name');
-        this.mobileMenuExtended = false;
-        this.megadropdownOpen = false;
         this.handleScrollEvent = this.handleScrollEvent.bind(this);
         this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
         this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
@@ -77,9 +82,8 @@ export class PostHeader {
         });
         document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.addEventListener('click', this.handleLinkClick);
-        window.addEventListener('postBreakpoint:name', this.breakpointChange);
+        window.addEventListener('postBreakpoint:device', this.breakpointChange);
         this.switchLanguageSwitchMode();
-        this.updateLocalHeaderHeight();
         this.handleScrollParentResize();
         this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
     }
@@ -90,10 +94,13 @@ export class PostHeader {
         this.getFocusableElements();
         this.handleLocalHeaderResize();
     }
+    componentDidLoad() {
+        this.updateLocalHeaderHeight();
+    }
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
         const scrollParent = this.scrollParent;
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
+        window.removeEventListener('postBreakpoint:device', this.breakpointChange);
         window.removeEventListener('resize', this.throttledResize);
         window.removeEventListener('scroll', this.handleScrollEvent);
         scrollParent.removeEventListener('scroll', this.handleScrollEvent);
@@ -178,8 +185,10 @@ export class PostHeader {
         document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
     }
     updateLocalHeaderHeight() {
-        const localHeaderHeight = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
-        document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderHeight}px`);
+        const localHeaderElement = this.host.shadowRoot.querySelector('.local-header');
+        if (localHeaderElement) {
+            document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderElement.clientHeight}px`);
+        }
     }
     updateScrollParentHeight() {
         this.host.style.setProperty('--post-header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
@@ -232,7 +241,7 @@ export class PostHeader {
         return (h("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))))));
     }
     render() {
-        return (h(Host, { key: 'f48a0da1abf27c8e9ebaf069f56b12b9705ae8ba', "data-version": version }, h("div", { key: 'f427fe866ae03d01882f983953e316db8ce61b3f', class: "global-header" }, h("div", { key: '1681be355fa453dfe8c7f4e73d74dd52a7dc847c', class: "global-sub" }, h("div", { key: '985ee91b791c24947564ac8af001d7a1b3ef04cc', class: "logo" }, h("slot", { key: 'e961d5ad800836001ba735ab482e05fe722867ee', name: "post-logo" }))), h("div", { key: '353c38aa0dffa907d1dd55c889454ae373ab656b', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '6c1d0b4b518bd35021cf45eceb764975a1f51248', name: "meta-navigation" }), h("slot", { key: 'b814a775d1f12ec1e49e720733e90718ee0d64d3', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'dda35455f620e178e141aca1ea103e62fe8e7fee', name: "post-language-switch" }), h("div", { key: '3c5dfdc7168af7f659b6b9ef62ba01451b257282', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '5b90487f039ac8fe5d8fe7c20ca2851e2c2abc45', name: "post-togglebutton" })))), h("div", { key: '7efcbd5e59afafd9fc3fbbe55961bc694c3eeb88', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '128925f3547041b2f6890ad9dde7e0c598dbcc22', name: "title" }), h("div", { key: 'eaa2bb08500efd23e1593dee585fe7d743986d5d', class: "local-sub" }, h("slot", { key: 'ddf6eed8f5303976464899c31c7cb8aa378acd37', name: "local-controls" }), h("slot", { key: 'f64f7ba2b47c267c3a52b356a48bd990b4da42d7' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: '90a8c0bedc440a7242167267a62772939c3e92bc', "data-version": version }, h("div", { key: '605d0dd51867f6748cc1148d6336c3e42943a4cb', class: "global-header" }, h("div", { key: '12ea812d7aca78f86cea0494029b92d7e7e5c4e7', class: "global-sub" }, h("div", { key: 'e6e2e92bedc2b2abd84546ed7bbf8d54b4cb6f79', class: "logo" }, h("slot", { key: '52b5fa88095656878d81b5bfae5d9e2d4e154d6d', name: "post-logo" }))), h("div", { key: '428c5a10001e44fb0fc0f4806bca223697de874f', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '806129b790ec2e92a2229c4c83b390604bf7402f', name: "meta-navigation" }), h("slot", { key: 'd1b8d1967dc6847999040f7d6be49ccdb9888c73', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c9dec95d646e20493efde8648e0962782844d218', name: "post-language-switch" }), h("div", { key: 'ce6105955665c13392a38968cea359c431e002a4', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '0dadceedde6aa20e0e2255c49b8b56995a2131b2', name: "post-togglebutton" })))), h("div", { key: 'cffb43a5b2c1843f42b73288c713f633949879db', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: 'd36e0dda59b4a6d5fe61b3ac48fcdc1868fd0a4b', name: "title" }), h("div", { key: '998114aff9f726b3d9edf256756d399efd2e0751', class: "local-sub" }, h("slot", { key: '222017a680af7bbeca73d7414801fd3ce3a55099', name: "local-controls" }), h("slot", { key: '760849a61ffea59dc184c4ae31b254f7c53aaaa3' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -293,3 +302,6 @@ export class PostHeader {
             }];
     }
 }
+__decorate([
+    EventFrom('post-megadropdown')
+], PostHeader.prototype, "megadropdownStateHandler", void 0);