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

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

@@ -1,5 +1,5 @@
 import { h, Host, } from "@stencil/core";
-import { checkNonEmpty, checkOneOf } from "../../utils/index";
+import { checkRequiredAndType, checkEmptyOrType, checkRequiredAndOneOf } from "../../utils/index";
 import { version } from "../../../../package";
 let cardControlIds = 0;
 /**
@@ -11,10 +11,10 @@ let cardControlIds = 0;
 export class PostCardControl {
     /**
      * A public method to reset the controls `checked` and `validity` state.
-     * The validity state is set to `null`, so it's neither valid nor invalid.
+     * The validity state is set to `undefined`, so it's neither valid nor invalid.
      */
     async reset() {
-        this.validity = null;
+        this.validity = undefined;
         this.controlSetChecked(this.initialChecked);
     }
     /**
@@ -26,10 +26,24 @@ export class PostCardControl {
         this.controlSetChecked(false);
     }
     validateControlLabel() {
-        checkNonEmpty(this, 'label');
+        checkRequiredAndType(this, 'label', 'string');
+    }
+    validateControlDescription() {
+        checkEmptyOrType(this, 'description', 'string');
     }
     validateControlType() {
-        checkOneOf(this, 'type', ['checkbox', 'radio']);
+        checkRequiredAndOneOf(this, 'type', ['checkbox', 'radio']);
+    }
+    validateControlName() {
+        checkEmptyOrType(this, 'name', 'string');
+    }
+    validateControlValue() {
+        if (this.type == 'radio') {
+            checkEmptyOrType(this, 'value', 'string');
+        }
+    }
+    validateControlIcon() {
+        checkEmptyOrType(this, 'icon', 'string');
     }
     updateControlChecked(checked = this.checked) {
         this.controlSetChecked(checked);
@@ -60,14 +74,14 @@ export class PostCardControl {
         this.controlId = `PostCardControl_${cardControlIds++}`;
         this.focused = false;
         this.label = undefined;
-        this.description = null;
+        this.description = undefined;
         this.type = undefined;
-        this.name = null;
-        this.value = null;
+        this.name = undefined;
+        this.value = undefined;
         this.checked = false;
         this.disabled = false;
-        this.validity = null;
-        this.icon = null;
+        this.validity = undefined;
+        this.icon = undefined;
         this.cardClickHandler = this.cardClickHandler.bind(this);
         this.controlClickHandler = this.controlClickHandler.bind(this);
         this.controlChangeHandler = this.controlChangeHandler.bind(this);
@@ -216,14 +230,14 @@ export class PostCardControl {
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '9172642a4424a3393c0738feba3a3ef8dcea43e8', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'd6e47613dfe9d33647fd2379010275d70cbcbdcb', class: {
+        return (h(Host, { key: 'ff23ac518f715fc7c2727dd7c2abccd0fdb486da', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '3519942dfeb694729e4b6c7c7df4b68854ccde81', class: {
                 'card-control': true,
                 'is-checked': this.checked,
                 'is-disabled': this.disabled,
                 'is-focused': this.focused,
-                'is-valid': this.validity !== null && this.validity !== 'false',
-                'is-invalid': this.validity === 'false',
-            } }, h("input", { key: '44b0e5d5c2c6a759300979a5c33c2a65afaaa27d', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === 'false', onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: 'fd3106562bfcb5ca0e7e5704272f927bfb201af5', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: 'ebfa245a0e2b6e45384586408614ce85494fbc58', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '99b406bc58fbfcd054f1b551a453a7ac1f4276f6' })))));
+                'is-valid': this.validity !== undefined && this.validity !== false,
+                'is-invalid': this.validity === false,
+            } }, h("input", { key: 'f47a58485c7d507565e29c832ca1c3d6b053bc17', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === false, onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: '65e8247d88c2cc6bb2e0be17e7d6fab3502fb364', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: 'df538a1f14b49fa7bd6907ef57d045c7303b6d77', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '1a79c6a2da57a5b8aef911dc2acd09e553b79489' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -231,7 +245,11 @@ export class PostCardControl {
     }
     componentDidLoad() {
         this.validateControlLabel();
+        this.validateControlName();
+        this.validateControlValue();
+        this.validateControlDescription();
         this.validateControlType();
+        this.validateControlIcon();
     }
     formAssociatedCallback() {
         this.controlSetChecked(this.checked);
@@ -286,14 +304,13 @@ export class PostCardControl {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the description in the control-label."
                 },
                 "attribute": "description",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             },
             "type": {
                 "type": "string",
@@ -321,14 +338,13 @@ export class PostCardControl {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "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",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             },
             "value": {
                 "type": "string",
@@ -339,14 +355,13 @@ export class PostCardControl {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "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",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             },
             "checked": {
                 "type": "boolean",
@@ -385,22 +400,21 @@ export class PostCardControl {
                 "defaultValue": "false"
             },
             "validity": {
-                "type": "string",
+                "type": "boolean",
                 "mutable": true,
                 "complexType": {
-                    "original": "null | 'true' | 'false'",
-                    "resolved": "\"false\" | \"true\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "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",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             },
             "icon": {
                 "type": "string",
@@ -411,14 +425,13 @@ export class PostCardControl {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "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",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             }
         };
     }
@@ -475,7 +488,7 @@ export class PostCardControl {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "A public method to reset the controls `checked` and `validity` state.\nThe validity state is set to `null`, so it's neither valid nor invalid.",
+                    "text": "A public method to reset the controls `checked` and `validity` state.\nThe validity state is set to `undefined`, so it's neither valid nor invalid.",
                     "tags": []
                 }
             },
@@ -503,9 +516,21 @@ export class PostCardControl {
         return [{
                 "propName": "label",
                 "methodName": "validateControlLabel"
+            }, {
+                "propName": "description",
+                "methodName": "validateControlDescription"
             }, {
                 "propName": "type",
                 "methodName": "validateControlType"
+            }, {
+                "propName": "name",
+                "methodName": "validateControlName"
+            }, {
+                "propName": "value",
+                "methodName": "validateControlValue"
+            }, {
+                "propName": "icon",
+                "methodName": "validateControlIcon"
             }, {
                 "propName": "checked",
                 "methodName": "updateControlChecked"

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

@@ -5,7 +5,7 @@ import { version } from "../../../../package";
  */
 export class PostClosebutton {
     render() {
-        return (h(Host, { key: 'cfa55f799fdf9ad0f3ac1eb296e063b5001de997', "data-version": version }, h("button", { key: '7c8a084f6d7278329ddfb5fc4b2b8f992a185666', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'fc74ccb4f0c4c091a02a41cdef918d6c3b065c8c', "aria-hidden": "true", name: "closex" }), h("span", { key: '98478b013714df6d82c6c2f533ac8ecd2abae778', class: "visually-hidden" }, h("slot", { key: '109e2bca4436986dd037d8c29088cc79395bc200' })))));
+        return (h(Host, { key: '7b5e179b42eefd1823b2b2ef7ee17c94bd9f0ddd', "data-version": version }, h("button", { key: '471e68d1ddcfe741f5450d002b2daa86cec0f986', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: '928fa7460988cffa269a29506e68e056f84bcef8', "aria-hidden": "true", name: "closex" }), h("span", { key: 'c1501f4a8b7d8d95be7d02576b10143b9e6b0654', class: "visually-hidden" }, h("slot", { key: 'a9f1ab8db57486d420db0981090ad2ba5183c289' })))));
     }
     static get is() { return "post-closebutton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class PostCollapsible {
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'a678bc639dfd7686d8e1bd57ca0f09984a24ab61', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: 'e0b88ac152fa09314b4bc01c9abdb11480e2cb4d' })));
+        return (h(Host, { key: '130edce2062a5f3dac3072f173d021e88dddd7cf', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '54ed1790df52911b821a4de38cd5f33c425f3399' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkNonEmpty, checkType, eventGuard, getRoot } from "../../utils/index";
+import { checkRequiredAndType, eventGuard, getRoot } from "../../utils/index";
 export class PostCollapsibleTrigger {
     constructor() {
         this.observer = new MutationObserver(() => this.setTrigger());
@@ -10,8 +10,7 @@ export class PostCollapsibleTrigger {
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
     validateAriaAttributes() {
-        checkNonEmpty(this, 'for');
-        checkType(this, 'for', 'string', 'The post-collapsible-trigger "for" prop should be a id.');
+        checkRequiredAndType(this, 'for', 'string');
     }
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary
@@ -90,7 +89,7 @@ export class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: 'cd703fe34b8c82afc5956b58724d36b06054bc0b', "data-version": version }, h("slot", { key: '5abe4ba2b8922b941cc8aebbc7039e34e1853855' })));
+        return (h(Host, { key: '8c835c780604b1138262489ca7d3313288e5ee86', "data-version": version }, h("slot", { key: 'ef354c2ca5e699a4e2c8940959f75a69918f388c' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +103,7 @@ export class PostCollapsibleTrigger {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { breakpoint } from "../../utils/index";
+import { checkRequiredAndType, breakpoint } from "../../utils/index";
 /**
  * @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).
@@ -18,6 +18,12 @@ export class PostFooter {
         this.label = undefined;
         this.isMobile = breakpoint.get('name') === 'mobile';
     }
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
+    componentWillLoad() {
+        this.validateLabel();
+    }
     connectedCallback() {
         window.addEventListener('postBreakpoint:name', this.breakpointChange);
     }
@@ -31,7 +37,7 @@ export class PostFooter {
         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" }))));
     }
     render() {
-        return (h(Host, { key: '4058ba0a63a666b82d274d1c35397c97d280ba49', "data-version": version }, h("footer", { key: '27adf1e2a1439fd69efd6e571fcdd6851304c92a' }, h("h2", { key: '1ca0cd955ec5e6d315521eb5c28c5963ed44856d', class: "visually-hidden" }, this.label), h("div", { key: '27a6f520dee9d6294fa3cd4ebc6fd5062ac327ce', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '5607004d5e3ea553a86d476ca459b3b3632ef12d', class: "footer-column" }, h("div", { key: 'cd4727970358ffad4ca28fffaccc8a5eab4dec27', class: "footer-socialmedia" }, h("slot", { key: '92e105af21b69640a07c2d35c24bff6aae84abb6', name: "socialmedia" })), h("div", { key: '904b787df3f192593408d99857e213143cec6706', class: "footer-app" }, h("slot", { key: '2f4ab14e20737c6035c175e58982464fe6987724', name: "app" }))), h("div", { key: 'c85b261b4ae0cb1e27f424f460fa2838e1174fb0', class: "footer-businesssectors" }, h("slot", { key: 'c66baa3a1b689d881db68448b9d72d47acd11c7c', name: "businesssectors" })), h("div", { key: '4eebc88279f29eef028766c1fcb90effc1aaf1ca', class: "footer-meta" }, h("slot", { key: 'd689d7c14af01dc13c7f9f0fd170f3974150b9aa', name: "meta" })), h("div", { key: '36f87386755a4ae1186109b46609c6ad9c1d5041', class: "footer-copyright" }, h("slot", { key: 'c37231f795b1a5a407f83aeaf8a8b093713b8db1', name: "copyright" }))))));
+        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" }))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -72,4 +78,10 @@ export class PostFooter {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "validateLabel"
+            }];
+    }
 }

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}: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:3;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:2;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:1;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}@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}}

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

@@ -1,6 +1,7 @@
 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";
@@ -41,8 +42,15 @@ export class PostHeader {
         }
     }
     constructor() {
-        this.throttledResize = throttle(50, () => this.handleResize());
-        this.megedropdownStateHandler = (event) => {
+        this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+            this.switchLanguageSwitchMode();
+            if (this.device === 'desktop' && this.mobileMenuExtended) {
+                this.closeMobileMenu();
+            }
+        };
+        this.megadropdownStateHandler = (event) => {
             eventGuard(this.host, event, {
                 targetLocalName: 'post-megadropdown',
                 delegatorSelector: 'post-header',
@@ -50,13 +58,12 @@ export class PostHeader {
                 this.megadropdownOpen = event.detail.isVisible;
             });
         };
-        this.device = null;
+        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);
-        this.megedropdownStateHandler = this.megedropdownStateHandler.bind(this);
         this.keyboardHandler = this.keyboardHandler.bind(this);
         this.handleLinkClick = this.handleLinkClick.bind(this);
     }
@@ -68,9 +75,11 @@ export class PostHeader {
         this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
-        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.addEventListener('click', this.handleLinkClick);
-        this.handleResize();
+        window.addEventListener('postBreakpoint:name', this.breakpointChange);
+        this.switchLanguageSwitchMode();
+        this.updateLocalHeaderHeight();
         this.handleScrollParentResize();
         this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
     }
@@ -84,10 +93,11 @@ export class PostHeader {
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
         const scrollParent = this.scrollParent;
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
         window.removeEventListener('resize', this.throttledResize);
         window.removeEventListener('scroll', this.handleScrollEvent);
         scrollParent.removeEventListener('scroll', this.handleScrollEvent);
-        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.removeEventListener('keydown', this.keyboardHandler);
         this.host.removeEventListener('click', this.handleLinkClick);
         if (this.scrollParentResizeObserver) {
@@ -100,6 +110,14 @@ export class PostHeader {
         }
         this.mobileMenuExtended = false;
     }
+    async closeMobileMenu() {
+        this.mobileMenuAnimation.finish();
+        const menuButton = this.getMenuButton();
+        if (menuButton) {
+            menuButton.toggled = false;
+        }
+        this.mobileMenuExtended = false;
+    }
     /**
      * Toggles the mobile navigation.
      */
@@ -138,6 +156,9 @@ export class PostHeader {
         this.firstFocusableEl = focusableChildren[0];
         this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
     }
+    getMenuButton() {
+        return this.host.querySelector('post-togglebutton');
+    }
     keyboardHandler(e) {
         if (e.key === 'Tab' && this.mobileMenuExtended) {
             if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
@@ -180,28 +201,6 @@ export class PostHeader {
             }
         }
     }
-    handleResize() {
-        const previousDevice = this.device;
-        let newDevice;
-        const width = window?.innerWidth;
-        if (width >= 1024) {
-            newDevice = 'desktop';
-        }
-        else if (width >= 600) {
-            newDevice = 'tablet';
-        }
-        else {
-            newDevice = 'mobile';
-        }
-        // Apply only on change for doing work only when necessary
-        if (newDevice !== previousDevice) {
-            this.device = newDevice;
-            this.postUpdateDevice.emit(this.device);
-            window.requestAnimationFrame(() => {
-                this.switchLanguageSwitchMode();
-            });
-        }
-    }
     handleScrollParentResize() {
         if (this.scrollParent) {
             this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
@@ -233,7 +232,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: '9705dc224bcf389c8836efbaf40d6d6617b2052f', "data-version": version }, h("div", { key: '41a1b10ff4193b0a31eecc673935aabb70c1d1b4', class: "global-header" }, h("div", { key: '7e3692fca4130755c009447fcc20585386f1c65d', class: "global-sub" }, h("div", { key: '5b4d7fb16fcbeee3f07a1a160751b5c23e9f9edb', class: "logo" }, h("slot", { key: '67048479266ba86f2a1b739751be7bfe97ce4544', name: "post-logo" }))), h("div", { key: '83642103fae714a7c9ac1962e1433fd72899cf87', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'ff672718574b3690d9ac8c2f54cb50e2b7052533', name: "meta-navigation" }), h("slot", { key: '782d10f094831da10cd9e9695944eee9c8003a05', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '5c5a277e3a627f5a731e1342c6604b6e064f3b52', name: "post-language-switch" }), h("div", { key: 'b07c9f1994fd99b170192ed4f4092afb92a1dd3e', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '1bbb5a704cf1841e4845ff9921cd6662ee2d7387', name: "post-togglebutton" })))), h("div", { key: 'da8ecfd78835ab7431408558ee938d5054349955', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '23c35a54fdf177a9b58054154e09f406f27fe049', name: "title" }), h("div", { key: 'de4dfdec5bd43a22587aa8e93842c4e16c73f82b', class: "local-sub" }, h("slot", { key: '35b09a33f3c87e382afb809f0c2b8153dd909097', name: "local-controls" }), h("slot", { key: 'bdfa7a68815e8d259cd346ef890904b652a5a7f2' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        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()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -254,30 +253,6 @@ export class PostHeader {
             "megadropdownOpen": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "postUpdateDevice",
-                "name": "postUpdateDevice",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "An event emitted when the device has changed"
-                },
-                "complexType": {
-                    "original": "DEVICE_SIZE",
-                    "resolved": "\"desktop\" | \"mobile\" | \"tablet\"",
-                    "references": {
-                        "DEVICE_SIZE": {
-                            "location": "local",
-                            "path": "/home/runner/work/design-system/design-system/packages/components/src/components/post-header/post-header.tsx",
-                            "id": "src/components/post-header/post-header.tsx::DEVICE_SIZE"
-                        }
-                    }
-                }
-            }];
-    }
     static get methods() {
         return {
             "toggleMobileMenu": {