@swisspost/design-system-components 9.0.0-next.12 → 9.0.0-next.14

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

@@ -9,6 +9,83 @@ let cardControlIds = 0;
  * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.<p className="banner banner-sm banner-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 export class PostCardControl {
+    EVENT_MAP = {
+        input: 'postInput',
+        change: 'postChange',
+    };
+    KEYCODES = {
+        SPACE: 'Space',
+        LEFT: 'ArrowLeft',
+        UP: 'ArrowUp',
+        RIGHT: 'ArrowRight',
+        DOWN: 'ArrowDown',
+    };
+    group = {
+        hosts: [],
+        members: [],
+        first: null,
+        last: null,
+        checked: null,
+        focused: null,
+    };
+    control;
+    controlId = `PostCardControl_${cardControlIds++}`;
+    initialChecked;
+    hasIcon;
+    host;
+    focused = false;
+    internals;
+    /**
+     * Defines the text in the control-label.
+     */
+    label;
+    /**
+     * Defines the description in the control-label.
+     */
+    description = null;
+    /**
+     * Defines the `type` attribute of the control.
+     */
+    type;
+    /**
+     * Defines the `name` attribute of the control.
+     * <span className="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>
+     * <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+     */
+    name = null;
+    /**
+     * 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>
+     */
+    value = null;
+    /**
+     * Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
+     */
+    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.
+     */
+    disabled = false;
+    /**
+     * Defines the validation `validity` of the control.
+     * To reset validity to an undefined state, simply remove the attribute from the control.
+     */
+    validity = null;
+    /**
+     * Defines the icon `name` inside the card.
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     */
+    icon = null;
+    /**
+     * An event emitted whenever the components checked state is toggled.
+     * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
+     */
+    postInput;
+    /**
+     * An event emitted whenever the components checked state is toggled.
+     * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
+     * <span className="banner banner-sm banner-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
+     */
+    postChange;
     /**
      * 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.
@@ -38,36 +115,6 @@ export class PostCardControl {
         this.controlSetChecked(this.checked);
     }
     constructor() {
-        this.EVENT_MAP = {
-            input: 'postInput',
-            change: 'postChange',
-        };
-        this.KEYCODES = {
-            SPACE: 'Space',
-            LEFT: 'ArrowLeft',
-            UP: 'ArrowUp',
-            RIGHT: 'ArrowRight',
-            DOWN: 'ArrowDown',
-        };
-        this.group = {
-            hosts: [],
-            members: [],
-            first: null,
-            last: null,
-            checked: null,
-            focused: null,
-        };
-        this.controlId = `PostCardControl_${cardControlIds++}`;
-        this.focused = false;
-        this.label = undefined;
-        this.description = null;
-        this.type = undefined;
-        this.name = null;
-        this.value = null;
-        this.checked = false;
-        this.disabled = false;
-        this.validity = null;
-        this.icon = null;
         this.cardClickHandler = this.cardClickHandler.bind(this);
         this.controlClickHandler = this.controlClickHandler.bind(this);
         this.controlChangeHandler = this.controlChangeHandler.bind(this);
@@ -141,7 +188,6 @@ export class PostCardControl {
         }
     }
     groupCollectMembers() {
-        var _a, _b;
         if (this.type === 'radio' && this.name) {
             this.group.hosts = Array.from(document.querySelectorAll(`post-card-control[type="radio"][name="${this.name}"]`));
             this.group.members = this.group.hosts
@@ -150,9 +196,10 @@ export class PostCardControl {
             if (this.group.members.length > 1) {
                 this.group.first = this.group.members[0];
                 this.group.last = this.group.members[this.group.members.length - 1];
-                this.group.checked = (_a = this.group.members.find(m => m.checked)) !== null && _a !== void 0 ? _a : null;
+                this.group.checked = this.group.members.find(m => m.checked) ?? null;
                 this.group.focused =
-                    (_b = this.group.members.find(m => m.getRootNode().host === document.activeElement)) !== null && _b !== void 0 ? _b : this.group.first;
+                    this.group.members.find(m => m.getRootNode().host === document.activeElement) ??
+                        this.group.first;
                 const focusableMember = this.group.checked || this.group.focused || this.group.first;
                 this.group.members.forEach(m => {
                     m.tabIndex = m === focusableMember ? 0 : -1;
@@ -161,14 +208,12 @@ export class PostCardControl {
         }
     }
     groupGetPrev() {
-        var _a;
         const focusedIndex = this.group.members.findIndex(m => m.id === this.group.focused.id);
-        return (_a = this.group.members.find((_m, i) => i === focusedIndex - 1)) !== null && _a !== void 0 ? _a : this.group.last;
+        return this.group.members.find((_m, i) => i === focusedIndex - 1) ?? this.group.last;
     }
     groupGetNext() {
-        var _a;
         const focusedIndex = this.group.members.findIndex(m => m.id === this.group.focused.id);
-        return (_a = this.group.members.find((_m, i) => i === focusedIndex + 1)) !== null && _a !== void 0 ? _a : this.group.first;
+        return this.group.members.find((_m, i) => i === focusedIndex + 1) ?? this.group.first;
     }
     groupSetChecked(newChecked, e) {
         if (this.group.members.length > 1) {
@@ -204,8 +249,8 @@ export class PostCardControl {
         const possibleFromContexts = ['fieldset'];
         let element = this.host;
         while (element && (!bgContext || !formContext)) {
-            bgContext = bgContext !== null && bgContext !== void 0 ? bgContext : possibleBgContexts.find(selector => element.matches(selector));
-            formContext = formContext !== null && formContext !== void 0 ? formContext : possibleFromContexts.find(selector => element.matches(selector));
+            bgContext = bgContext ?? possibleBgContexts.find(selector => element.matches(selector));
+            formContext = formContext ?? possibleFromContexts.find(selector => element.matches(selector));
             element = element.parentElement;
         }
         const hostContext = [bgContext, formContext].filter(context => !!context).join(' ');
@@ -218,14 +263,14 @@ export class PostCardControl {
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: 'd5a554358103f47b5294dc5f6e21e41a78ec383f', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'd9bd511744e04792f456ab2e22c0f48ea8f3234b', class: {
+        return (h(Host, { key: 'a62b814d2579038654a8fef11c6d136e03381320', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '34e5f1092cd886bd5dc69542728a3c406e11cd51', 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: '37a7bc7d656aa5527037303daacdb8b8ee26b973', 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: '9482a54b665dc2f2fe254f2656af9cb57cb0fb4b', 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: '1b2a1fdb408ea8dcb4649fd76ae848685474f7b5', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '5b9f15b75920c0956730686b52959a9b21a64857' })))));
+            } }, h("input", { key: 'ca21d9eba6b998b26615ae7d92f105b6fe0c2f9f', 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: 'f9b336f63f5f83143bdf2b3b8b2d85a57723b036', 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: '813f81b01385aa7721d35c7edbd1494fc178dc4d', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '95658d0b41b293a8fafbef79b3f2c6fa50c95534' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -235,8 +280,6 @@ export class PostCardControl {
         this.validateControlLabel();
         this.validateControlType();
     }
-    // https://stenciljs.com/docs/form-associated
-    /* eslint-disable @stencil-community/own-methods-must-be-private */
     formAssociatedCallback() {
         this.controlSetChecked(this.checked);
     }
@@ -278,6 +321,8 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the text in the control-label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -295,6 +340,8 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the description in the control-label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "description",
                 "reflect": false,
                 "defaultValue": "null"
@@ -313,6 +360,8 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `type` attribute of the control."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false
             },
@@ -330,6 +379,8 @@ export class PostCardControl {
                     "tags": [],
                     "text": "Defines the `name` attribute of the control.\n<span className=\"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>"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "null"
@@ -348,6 +399,8 @@ 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>"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "null"
@@ -366,6 +419,8 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
@@ -384,6 +439,8 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -402,6 +459,8 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validity",
                 "reflect": false,
                 "defaultValue": "null"
@@ -420,6 +479,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>"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "null"

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

@@ -4,8 +4,9 @@ import { version } from "../../../../package";
  * @slot default - Slot for placing visually hidden label in the close button.
  */
 export class PostClosebutton {
+    host;
     render() {
-        return (h(Host, { key: 'cb5be35247053b1227c32f7949baca51ccc31081', "data-version": version }, h("button", { key: 'ece4ca00fedfd0ee76a971ca2a9cf0cf9a1e7f0c', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'c14a15906a1f229d642c2a8aea456f7a4acc5619', "aria-hidden": "true", name: "closex" }), h("span", { key: '94757c5e870f57ec8ba0c52fc5bb2a1f6eed91c2', class: "visually-hidden" }, h("slot", { key: 'a76c388cceca0b7d4da01b8e737e65f24d11df23' })))));
+        return (h(Host, { key: 'c03f50379252ba13992bc3d021989ac07dba9f79', "data-version": version }, h("button", { key: 'e97a86bb6e1eace89a1a3a78fb231047f065dd5e', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'aca522d4c251a8183c91c2bd4d810d0716a2fe13', "aria-hidden": "true", name: "closex" }), h("span", { key: '6873522961b1683d1261163b07ee022f93eed836', class: "visually-hidden" }, h("slot", { key: 'bf4b13356c9a0164f1481d1fedc3a78a53e5f8e0' })))));
     }
     static get is() { return "post-closebutton"; }
     static get elementRef() { return "host"; }

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

@@ -6,15 +6,23 @@ import { checkEmptyOrType, isMotionReduced } from "../../utils/index";
  * @slot default - Slot for placing content within the collapsible element.
  */
 export class PostCollapsible {
-    constructor() {
-        this.isLoaded = false;
-        this.isOpen = true;
-        this.collapsed = false;
-    }
+    isLoaded = false;
+    isOpen = true;
+    host;
+    /**
+     * If `true`, the element is collapsed otherwise it is displayed.
+     */
+    collapsed = false;
     collapsedChange() {
         checkEmptyOrType(this.collapsed, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
         void this.toggle(!this.collapsed);
     }
+    /**
+     * An event emitted when the collapse element is shown or hidden, before the transition.
+     *
+     * The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
+     */
+    postToggle;
     componentDidLoad() {
         this.collapsedChange();
         this.isLoaded = true;
@@ -49,7 +57,7 @@ export class PostCollapsible {
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'fd2402bcf9dee7753da3d9dc78e48e7410a774c2', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '7119a56492d6ed3fea4c5be8a34d8af60f18fe0a' })));
+        return (h(Host, { key: '3ba9983562f5fabec602f23d8698bacb3ff0dbdc', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '010369b851198dab8eed76a2ab26627d480c97d4' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +87,8 @@ export class PostCollapsible {
                     "tags": [],
                     "text": "If `true`, the element is collapsed otherwise it is displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "collapsed",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1,25 +1,14 @@
 import { version } from "../../../../package";
 import { checkNonEmpty, checkType, debounce, getRoot } from "../../utils/index";
 export class PostCollapsibleTrigger {
-    constructor() {
-        this.observer = new MutationObserver(() => this.setTrigger());
-        this.debouncedUpdate = debounce(() => {
-            var _a;
-            if (!this.trigger)
-                return;
-            // add the provided id to the aria-controls list
-            const ariaControls = this.trigger.getAttribute('aria-controls');
-            if (!(ariaControls === null || ariaControls === void 0 ? void 0 : ariaControls.includes(this.for))) {
-                const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
-                this.trigger.setAttribute('aria-controls', newAriaControls);
-            }
-            // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
-            const isCollapsed = (_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.collapsed;
-            const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
-            this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
-        });
-        this.for = undefined;
-    }
+    trigger;
+    observer = new MutationObserver(() => this.setTrigger());
+    root;
+    host;
+    /**
+     * Link the trigger to a post-collapsible with this id
+     */
+    for;
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
@@ -67,12 +56,25 @@ export class PostCollapsibleTrigger {
     async update() {
         this.debouncedUpdate();
     }
+    debouncedUpdate = debounce(() => {
+        if (!this.trigger)
+            return;
+        // add the provided id to the aria-controls list
+        const ariaControls = this.trigger.getAttribute('aria-controls');
+        if (!ariaControls?.includes(this.for)) {
+            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
+            this.trigger.setAttribute('aria-controls', newAriaControls);
+        }
+        // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
+        const isCollapsed = this.collapsible?.collapsed;
+        const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
+        this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
+    });
     /**
      * Toggle the post-collapsible controlled by the trigger
      */
     async toggleCollapsible() {
-        var _a;
-        await ((_a = this.collapsible) === null || _a === void 0 ? void 0 : _a.toggle());
+        await this.collapsible?.toggle();
     }
     /**
      * Retrieve the post-collapsible controlled by the trigger
@@ -112,6 +114,8 @@ export class PostCollapsibleTrigger {
                     "tags": [],
                     "text": "Link the trigger to a post-collapsible with this id"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "for",
                 "reflect": false
             }

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

@@ -11,10 +11,12 @@ import { breakpoint } from "../../utils/breakpoints";
  * @slot copyright - Slot for the copyright text.
  */
 export class PostFooter {
-    constructor() {
-        this.label = undefined;
-        this.isMobile = breakpoint.get('name') === 'mobile';
-    }
+    host;
+    /**
+     * The label to add to the footer (visually hidden).
+     */
+    label;
+    isMobile = breakpoint.get('name') === 'mobile';
     connectedCallback() {
         window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
     }
@@ -28,7 +30,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: 'b11ecc741d3d9f4786dca3324dc2172aeaa431cd', "data-version": version }, h("footer", { key: 'a786956b1bdf51cf76fca8e4d45210b42bc54501' }, h("h2", { key: '3661bdd6c95eb515cb6a0aa77cb9df4fda7ea972', class: "visually-hidden" }, this.label), h("div", { key: '8b2a1c63f3a092c355bd882d58e5012dd5680a1b', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '250a48a71a05833a18640432eb72fb96df94c102', class: "footer-column" }, h("div", { key: '0d22f0b49aea22f0bd73421f3c86f5389caebec9', class: "footer-socialmedia" }, h("slot", { key: '8703a25dc982f32a32b4115410fcc6356b5e365b', name: "socialmedia" })), h("div", { key: '992e7ff2e6556139ce0946ae6498329a8d2ff686', class: "footer-app" }, h("slot", { key: '6e561307bf4a1d32d3a985b32bd5ed2be43453d2', name: "app" }))), h("div", { key: 'ebdffcd8431e90752f814a5873cec14e00c15b7f', class: "footer-businesssectors" }, h("slot", { key: 'c745850d3e5ff37a71b12c43897625ca3df5ca34', name: "businesssectors" })), h("div", { key: '3d9decbad0be02737d13c4e3c6e00b8bea8d6c5f', class: "footer-meta" }, h("slot", { key: '2a66e70bb788269fecb5bbbccd2af43e9fba3a1f', name: "meta" })), h("div", { key: '0f1f4ee8f86e5eaf6c5c25b82b868d273757c8be', class: "footer-copyright" }, h("slot", { key: 'b63aab9755132addfe4c20233919513990cdf992', name: "copyright" }))))));
+        return (h(Host, { key: '14370a1cfd730a0b0353c88c95f265aefb57c480', "data-version": version }, h("footer", { key: '7208e9d465eb0b469887e7cfae66674db2092dbd' }, h("h2", { key: 'b392c866326374ae27704baaba0dd28c3001ee62', class: "visually-hidden" }, this.label), h("div", { key: '13411ad6e0b55ee17cf9bf77b155aa1c2810f057', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '4815ae94cd43eca92482ad3c93f107243b26890e', class: "footer-column" }, h("div", { key: 'edc787dc5fc96169c323f15254b6088024a6f19d', class: "footer-socialmedia" }, h("slot", { key: '0971e342ac6f3913c408a535ce0746080e3f57af', name: "socialmedia" })), h("div", { key: 'da583c9ed819181bf2732277f4e6ee22df2e3022', class: "footer-app" }, h("slot", { key: 'b6dab5cfa1f4dc9c049f24d3e08416ef5a27e0aa', name: "app" }))), h("div", { key: '53a5c04129d24dfb64eedd46e95b5c78142a3fd7', class: "footer-businesssectors" }, h("slot", { key: '470f4294778b8978bf6eb168e2b47ff29ef43d07', name: "businesssectors" })), h("div", { key: '45d734ded794352b951f2891bbdba081e05a99d5', class: "footer-meta" }, h("slot", { key: '4d0da53c2eb79e111f0f05278a0972f046eebfa9', name: "meta" })), h("div", { key: 'f95fb7ed3cc09218a3d4a554c619b6f379d5135d', class: "footer-copyright" }, h("slot", { key: '9cdcec805152413693dced0f0d55ac1b1121c70e', name: "copyright" }))))));
     }
     disconnectedCallback() {
         window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
@@ -61,6 +63,8 @@ export class PostFooter {
                     "tags": [],
                     "text": "The label to add to the footer (visually hidden)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             }

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

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box}:host{--global-header-height: 72px;--global-header-minimal-height: 24px;--main-header-height: 56px;--main-header-min-height: 56px;--header-height: calc(var(--global-header-height) + var(--main-header-height))}@media screen and (min-width: 1024px){:host{display:block;position:sticky;inset-inline:0;inset-block-start:calc(-1*(var(--global-header-height) + var(--main-header-height) - var(--global-header-minimal-height)));box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.99px){:host{--global-header-height: 64px;--main-header-height: 48px;--main-header-min-height: 48px}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);height:var(--global-header-height);z-index:1}@media screen and (max-width: 1023.99px){.global-header{inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{padding-inline-end:var(--post-core-dimension-12);top:calc((var(--global-header-height) - var(--global-header-minimal-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24)}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-minimal-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.title-header{display:flex;align-items:center;gap:var(--post-core-dimension-8);min-height:var(--main-header-min-height);justify-content:space-between;background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.title-header{padding:var(--post-core-dimension-18) var(--post-core-dimension-16) var(--post-core-dimension-4) var(--post-core-dimension-12)}}@media screen and (max-width: 1023.99px){.title-header{position:sticky;z-index:1;inset-block-start:var(--global-header-height);padding-inline:var(--post-core-dimension-8) var(--post-core-dimension-16);padding-block:var(--post-core-dimension-9);flex-wrap:wrap}.title-header.title-header-mobile-extended{border-bottom:1px solid var(--post-core-color-sandgrey-012)}}:host(:not(:has([slot=title]))) .title-header{display:none}::slotted(h1){margin:0 !important;flex-shrink:10}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.99px){::slotted(h1){font-size:var(--post-core-font-size-20) !important;max-width:calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16))}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.navigation{position:sticky;z-index:1;inset-block-start:var(--global-header-minimal-height)}}@media screen and (max-width: 1023.99px){.navigation{position:fixed;inset-inline:0;inset-block-end:calc(100vh - var(--header-height));box-shadow:var(--post-core-elevation-3);min-height:var(--post-core-dimension-10);max-height:calc(100vh - var(--header-height));overflow:auto}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}
+*,::before,::after{box-sizing:border-box}:host{z-index:1090;--global-header-height: 72px;--global-header-minimal-height: 24px;--local-header-height: 112px;--local-header-min-height: 56px;--header-height: calc(var(--global-header-height) + var(--local-header-height));z-index:1020;position:relative}@media screen and (min-width: 1024px){:host{--global-header-reduced-height: 24px;--main-navigation-height: 56px}}@media screen and (max-width: 1023.98px){:host{--global-header-height: 64px;--local-header-height: 48px;--local-header-min-height: 48px;--main-navigation-height: 0px}}:host(:not(:has([slot=title]))){--local-header-height: var(--main-navigation-height)}: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;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);height:var(--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:var(--post-core-dimension-12);inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24)}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--post-core-dimension-8);min-height:var(--local-header-min-height);background:var(--post-core-color-brand-white);transition:box-shadow .2s ease-in-out}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:calc(-1*(var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height));padding-block-start:var(--post-core-dimension-18);box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:var(--post-core-dimension-9);flex-wrap:wrap}.local-header.local-header-mobile-extended{border-bottom:1px solid var(--post-core-color-sandgrey-012)}.local-header:not(.title-header-mobile-extended){box-shadow:var(--post-core-elevation-3)}}.local-sub{margin-inline-end:var(--post-core-dimension-16)}::slotted(.list-inline){margin:-8px 0 !important;z-index:3 !important;position:relative !important}::slotted(h1){margin:0 !important;flex-shrink:10;z-index:3}@media screen and (min-width: 600px){::slotted(h1){margin-inline-start:var(--post-core-dimension-12) !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:var(--post-core-dimension-8) !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:var(--post-core-font-size-20) !important;max-width:calc(100vw - var(--post-core-dimension-8) - var(--post-core-dimension-16))}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--global-header-minimal-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:var(--post-core-color-brand-white)}}@media screen and (max-width: 1023.98px){.navigation{position:fixed;z-index:1;inset-inline:0;background:var(--post-core-color-brand-white);inset-block-end:calc(100vh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100vh - var(--header-height));display:flex;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:var(--post-core-dimension-16)}}