@swisspost/design-system-components 10.0.0-next.40 → 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.js

@@ -16,6 +16,8 @@ export class PostFooter {
         checkRequiredAndType(this, 'label', 'string');
     }
     constructor() {
+        this.device = breakpoint.get('device');
+        this.gridSlotDisplayed = {};
         this.breakpointChange = (e) => {
             this.device = e.detail;
         };
@@ -24,13 +26,10 @@ export class PostFooter {
                 this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
             }
         };
-        this.label = undefined;
-        this.device = breakpoint.get('name');
-        this.gridSlotDisplayed = {};
         this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
     }
     connectedCallback() {
-        window.addEventListener('postBreakpoint:name', this.breakpointChange);
+        window.addEventListener('postBreakpoint:device', this.breakpointChange);
     }
     componentWillLoad() {
         this.validateLabel();
@@ -41,7 +40,7 @@ export class PostFooter {
         });
     }
     disconnectedCallback() {
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
+        window.removeEventListener('postBreakpoint:device', this.breakpointChange);
     }
     updateGridSlotDisplay(slotName, hasContent) {
         if (this.gridSlotDisplayed[slotName] !== hasContent) {
@@ -55,7 +54,7 @@ export class PostFooter {
         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: '1cb83edcb5ab2e5582a48fd9c95a60a8411567ee', "data-version": version }, h("footer", { key: '4f507a514bdb6ad3f3579737ae72ae6a40168715' }, h("h2", { key: 'e99aeaef9a9f2e9e060d3f5d0fbad650360a7128', class: "visually-hidden" }, this.label), h("div", { key: 'f4cedb3f564577c0a5a91ea3ca84587c7af5818a', class: "footer-container" }, h("div", { key: '05ffad19533d49c91d5be570f5af52779a33d2df', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '6110e4382e43f63a83630538a0329e1f4b1d8590', class: "footer-column" }, h("div", { key: '5ac7115be86fc40f267c4d279574ad03eff66f39', class: "footer-socialmedia" }, h("slot", { key: '9c83318f3c4cc2d0cfa20087bb592f80a392cfb9', name: "socialmedia" })), h("div", { key: '5c3000bcdeea9a0952f67e6f09b38f476eb5380d', class: "footer-app" }, h("slot", { key: 'dd81ee8ba0e3d4ea42e60aebb4ce6daa30a1fe3d', name: "app" }))), h("div", { key: '242a9a86330f68888943cf2aa83ed0e24649a1a5', class: "footer-businesssectors" }, h("slot", { key: '9c2a860f2c0d89aa0a291ccd1f00dedccda64c71', name: "businesssectors" })), h("div", { key: '84269c90a5027029c6cf17f24d3dfe7cd3e70b06', class: "footer-meta" }, h("slot", { key: '4fef37edc54a6b0f6a52760eb8330ff98efa33bc', name: "meta" })), h("div", { key: '38bba9bd55e6d9025b6e4b95565594a484351a57', class: "footer-copyright" }, h("slot", { key: '4ecc0141a1489463b92ed44e7b02bf72b7f41fc5', 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"; }
@@ -73,6 +72,7 @@ export class PostFooter {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -85,7 +85,8 @@ export class PostFooter {
                     "tags": [],
                     "text": "The label to add to the footer (visually hidden)."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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: 'b552e09d25f9d69217f47b31931553edabcb3b5b', "data-version": version }, h("div", { key: 'b7bb569991b4c50101b80a907aff823ed64f93c3', class: "global-header" }, h("div", { key: 'bd88a1b5cc75cbb9832da4082fc6bc2405342421', class: "global-sub" }, h("div", { key: '0f338f37c57cdad900f0b9654ef16a26e60385d9', class: "logo" }, h("slot", { key: '8f5faf2470aee5a7c3d5ebb4157009f32e679085', name: "post-logo" }))), h("div", { key: 'f97a893b1dd7bce09f57e8199bd584fd6e28b71c', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '5edf8a7834d42b89a5c0bb5e4b53ff75cef78fd7', name: "meta-navigation" }), h("slot", { key: '196cf8c24e02cac8fc8215f9ab2e9efed46dced3', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'bce4b98e5ac9f7afba6b88a9da3fbe91b69aadf3', name: "post-language-switch" }), h("div", { key: '1c4b51f44882f55a5fe5386ed33b696c81289d14', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '56625102ad896e624e6a879f203e6b2cac4455a3', name: "post-togglebutton" })))), h("div", { key: 'd1a3961046902fa6026b065b9a013a341188d0e5', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '28d1be43cae56c53468e51e9b62cf92652431dcd', name: "title" }), h("div", { key: '09729387f1de16c4052c87956112b2aa64148f9a', class: "local-sub" }, h("slot", { key: 'fa0f247d960522d617dfadcfb0576f875eca45c6', name: "local-controls" }), h("slot", { key: 'b49e7647e428efbe3adea6f4302f023a1d6fe2bd' })), 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);