@swisspost/design-system-components 9.0.0-next.33 → 9.0.0-next.34

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

@@ -9,42 +9,6 @@ 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;
-    internals;
-    /**
-     * 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.
@@ -74,6 +38,26 @@ 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;
@@ -232,14 +216,14 @@ export class PostCardControl {
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '6d243226748befc5cdc25f567672859700b04825', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '0e974eed3c642ca13fa86883c27c0c1e6344d7fd', class: {
+        return (h(Host, { key: '9172642a4424a3393c0738feba3a3ef8dcea43e8', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'd6e47613dfe9d33647fd2379010275d70cbcbdcb', 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: 'bd2a44b835eef5ad2927b3d39721e430deccaf9d', 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: 'a05fc353909de0be2cde8c306bfdc6e7248a59bf', 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: '348dc3bea78771041ad19530c7265fba2ea189dd', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '7e6198e8e3ec1d2aec677be55c5fe8828198e9d7' })))));
+            } }, 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' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -291,7 +275,7 @@ export class PostCardControl {
                     "text": "Defines the text in the control-label."
                 },
                 "attribute": "label",
-                "reflect": false
+                "reflect": true
             },
             "description": {
                 "type": "string",
@@ -340,7 +324,7 @@ export class PostCardControl {
                 "optional": false,
                 "docs": {
                     "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>"
+                    "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,

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

@@ -0,0 +1 @@
+.btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

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

@@ -4,10 +4,20 @@ 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: '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' })))));
+        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' })))));
     }
     static get is() { return "post-closebutton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-closebutton.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-closebutton.css"]
+        };
+    }
     static get elementRef() { return "host"; }
 }

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

@@ -7,21 +7,14 @@ import { checkEmptyOrType, isMotionReduced } from "../../utils/index";
  */
 export class PostCollapsible {
     constructor() {
+        this.isLoaded = false;
+        this.isOpen = true;
         this.collapsed = false;
     }
-    isLoaded = false;
-    isOpen = true;
-    host;
     collapsedChange() {
         checkEmptyOrType(this, 'collapsed', '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;
@@ -46,6 +39,7 @@ export class PostCollapsible {
         const isHostRendered = this.host.offsetParent;
         if (isHostRendered)
             animation.commitStyles();
+        this.updateTriggers();
         return open;
     }
     /**
@@ -56,7 +50,7 @@ export class PostCollapsible {
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'a43e25138933a758759b4adcca249757db75cc4b', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '2936f71a6fb3ddedda372e8da4a19dbceecaefa6' })));
+        return (h(Host, { key: 'a678bc639dfd7686d8e1bd57ca0f09984a24ab61', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: 'e0b88ac152fa09314b4bc01c9abdb11480e2cb4d' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,21 +1,17 @@
+import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkNonEmpty, checkType, debounce, getRoot } from "../../utils/index";
-import { eventGuard } from "../../utils/event-gua";
+import { checkNonEmpty, checkType, eventGuard, getRoot } from "../../utils/index";
 export class PostCollapsibleTrigger {
     constructor() {
+        this.observer = new MutationObserver(() => this.setTrigger());
         this.for = undefined;
     }
-    trigger;
-    observer = new MutationObserver(() => this.setTrigger());
-    root;
-    host;
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
-    setAriaAttributes() {
+    validateAriaAttributes() {
         checkNonEmpty(this, 'for');
         checkType(this, 'for', 'string', 'The post-collapsible-trigger "for" prop should be a id.');
-        void this.update();
     }
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary
@@ -25,25 +21,12 @@ export class PostCollapsibleTrigger {
         this.root.addEventListener('postToggle', this.handlePostToggle);
         this.observer.observe(this.host, { childList: true, subtree: true });
     }
-    /**
-     * Attach a "postToggle" event listener to the root node
-     * to update the trigger's "aria-expanded" attribute whenever the controlled post-collapsible is toggled
-     */
-    componentWillLoad() {
-        this.root = getRoot(this.host);
-    }
-    /**
-     * Add the "data-version" to the host element and set the trigger
-     */
     componentDidLoad() {
-        this.host.setAttribute('data-version', version);
         this.setTrigger();
         if (!this.trigger)
             console.warn('The post-collapsible-trigger must contain a button.');
+        this.validateAriaAttributes();
     }
-    /**
-     * Disconnect the mutation observer
-     */
     disconnectedCallback() {
         this.observer.disconnect();
         this.root.removeEventListener('postToggle', this.handlePostToggle);
@@ -52,7 +35,7 @@ export class PostCollapsibleTrigger {
      * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
      */
     async update() {
-        this.debouncedUpdate();
+        this.updateAriaAttributes();
     }
     /**
      * Private handler for the 'postToggle' event.
@@ -65,7 +48,7 @@ export class PostCollapsibleTrigger {
             }
         });
     }
-    debouncedUpdate = debounce(() => {
+    updateAriaAttributes() {
         if (!this.trigger)
             return;
         // add the provided id to the aria-controls list
@@ -78,7 +61,7 @@ export class PostCollapsibleTrigger {
         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
      */
@@ -104,9 +87,13 @@ export class PostCollapsibleTrigger {
             return;
         this.trigger = trigger;
         this.trigger.addEventListener('click', () => this.toggleCollapsible());
-        this.setAriaAttributes();
+        this.updateAriaAttributes();
+    }
+    render() {
+        return (h(Host, { key: 'cd703fe34b8c82afc5956b58724d36b06054bc0b', "data-version": version }, h("slot", { key: '5abe4ba2b8922b941cc8aebbc7039e34e1853855' })));
     }
     static get is() { return "post-collapsible-trigger"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "for": {
@@ -124,7 +111,7 @@ export class PostCollapsibleTrigger {
                     "text": "Link the trigger to a post-collapsible with this id"
                 },
                 "attribute": "for",
-                "reflect": false
+                "reflect": true
             }
         };
     }
@@ -153,7 +140,7 @@ export class PostCollapsibleTrigger {
     static get watchers() {
         return [{
                 "propName": "for",
-                "methodName": "setAriaAttributes"
+                "methodName": "validateAriaAttributes"
             }];
     }
 }

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/breakpoints";
+import { 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).
@@ -12,15 +12,17 @@ import { breakpoint } from "../../utils/breakpoints";
  */
 export class PostFooter {
     constructor() {
+        this.breakpointChange = (e) => {
+            this.isMobile = e.detail === 'mobile';
+        };
         this.label = undefined;
         this.isMobile = breakpoint.get('name') === 'mobile';
     }
-    host;
     connectedCallback() {
-        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        window.addEventListener('postBreakpoint:name', this.breakpointChange);
     }
-    breakpointChange(e) {
-        this.isMobile = e.detail === 'mobile';
+    disconnectedCallback() {
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
     }
     renderAccordion() {
         return (h("div", { class: "footer-grid" }, h("post-accorddion", { "heading-level": "3", multiple: true }, h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-1-title" })), h("slot", { name: "grid-1" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-2-title" })), h("slot", { name: "grid-2" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-3-title" })), h("slot", { name: "grid-3" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-4-title" })), h("slot", { name: "grid-4" })))));
@@ -29,10 +31,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: '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));
+        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" }))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--global-header-top: calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--local-header-top: calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--logo-height: calc(var(--post-global-header-height) - var(--post-header-scroll-top));--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){--global-header-top: 0;--local-header-top: var(--post-global-header-height);--logo-height: var(--post-global-header-height);--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(--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(--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(--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(--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(--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;--global-header-top: calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--local-header-top: calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--logo-height: calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--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){--global-header-top: 0;--local-header-top: var(--post-global-header-height);--logo-height: var(--post-global-header-height);--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(--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(--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(--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(--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(--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

@@ -14,13 +14,6 @@ import { eventGuard } from "../../utils/event-gua";
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
  */
 export class PostHeader {
-    firstFocusableEl;
-    lastFocusableEl;
-    mobileMenu;
-    mobileMenuAnimation;
-    throttledResize = throttle(50, () => this.handleResize());
-    scrollParentResizeObserver;
-    localHeaderResizeObserver;
     get scrollParent() {
         const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
         if (frozenScrollParent)
@@ -35,7 +28,6 @@ export class PostHeader {
         }
         return document.body;
     }
-    host;
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
         const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
@@ -48,11 +40,16 @@ export class PostHeader {
             this.host.removeEventListener('keydown', this.keyboardHandler);
         }
     }
-    /**
-     * An event emitted when the device has changed
-     */
-    postUpdateDevice;
     constructor() {
+        this.throttledResize = throttle(50, () => this.handleResize());
+        this.megedropdownStateHandler = (event) => {
+            eventGuard(this.host, event, {
+                targetLocalName: 'post-megadropdown',
+                delegatorSelector: 'post-header',
+            }, () => {
+                this.megadropdownOpen = event.detail.isVisible;
+            });
+        };
         this.device = null;
         this.mobileMenuExtended = false;
         this.megadropdownOpen = false;
@@ -74,10 +71,12 @@ export class PostHeader {
         document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
         this.host.addEventListener('click', this.handleLinkClick);
         this.handleResize();
-        this.handleScrollEvent();
         this.handleScrollParentResize();
         this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
     }
+    componentWillRender() {
+        this.handleScrollEvent();
+    }
     componentDidRender() {
         this.getFocusableElements();
         this.handleLocalHeaderResize();
@@ -123,14 +122,6 @@ export class PostHeader {
             });
         }
     }
-    megedropdownStateHandler = (event) => {
-        eventGuard(this.host, event, {
-            targetLocalName: 'post-megadropdown',
-            delegatorSelector: 'post-header',
-        }, () => {
-            this.megadropdownOpen = event.detail.isVisible;
-        });
-    };
     // Get all the focusable elements in the post-header mobile menu
     getFocusableElements() {
         // Get elements in the correct order (different as the DOM order)
@@ -242,7 +233,7 @@ export class PostHeader {
         return (h("div", { class: navigationClasses.join(' '), style: { '--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: 'd4e9cc7d4e61f9c6223651b73fdab93e44f868f2', version: version }, h("div", { key: 'be40a49df865621d9a31808d468a2bb342803600', class: "global-header" }, h("div", { key: '776d797b9235211bd283fb0ecb29722f2776f2cd', class: "global-sub" }, h("div", { key: '3e89049f43d0de844674db985c3c9e55d510f054', class: "logo" }, h("slot", { key: 'c96d915df7930d15c316e8761c0cf24ed6b44b95', name: "post-logo" }))), h("div", { key: '8aa06d67efef853e2a913c23703a73e38f2ec779', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'cdd0b21cd9c6be0ec5a3aeb29b3b29b3034897a0', name: "meta-navigation" }), h("slot", { key: 'da4c5e8c6db482b031ba3b7ae1cf91f112bda75f', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '8980fdfa5f5e90d3786b5727ff6a9368dea709c6', name: "post-language-switch" }), h("div", { key: '013e2ad6b5bfd6b61f42b1d6c33c9ac6f0af98c0', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: 'cdac00dcf2cfb182bc8cefe0181054fac65c64be', name: "post-togglebutton" })))), h("div", { key: '0bdaa1b3fe2b9a460c7437b950afe8ce4c2237af', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '1adc944fce891f85deb00dd40ad58dc0402491a9', name: "title" }), h("div", { key: '70f9a42f940b231a6e0dd89ee8e67d34f3b98eb6', class: "local-sub" }, h("slot", { key: 'd0106f5ec6ed548e1dbd5ca7f78b1ac5bcf5d2d4', name: "local-controls" }), h("slot", { key: '62e91cc83b232238ac3dcc1166f4a006754c95c9' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: 'd8b43333c00a612a3a37479750874a1efaf6a855', "data-version": version }, h("div", { key: 'b270fb139cc8730a774785c5535fb3bcdd60c59c', class: "global-header" }, h("div", { key: 'b3161c4b26a1be4707fa6c7360e6779547b7ab30', class: "global-sub" }, h("div", { key: '44ecddd8f91c86d1af0075718b63e6bf034a25b7', class: "logo" }, h("slot", { key: 'de5208255d0cf59707092c984b0fec33d317d38d', name: "post-logo" }))), h("div", { key: '199dc1da25d817b488d5c3402779130c360e0f9a', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '1337f13908a826022a1bf2a8a1a2e2bfe323900b', name: "meta-navigation" }), h("slot", { key: '2b6fbbcedc8f1803e388fdbcbcd637d6a2605c87', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '2861c1a0f7639678edd0f584d8f98665fcf84fb0', name: "post-language-switch" }), h("div", { key: '06e2d9a4abe3a804f25ffa303f6f9ed5b7c01b60', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '772407e65d3d8f642c1e80fd8cb42b425eed4848', name: "post-togglebutton" })))), h("div", { key: '7b7a3da2a8cc848632c2e45badc52e23958a6faa', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '96e4d68bfe0504cc09d57a8b11dabb9139d780f6', name: "title" }), h("div", { key: '240fae6f0f9d2a192a7b94110a9c4571856de90a', class: "local-sub" }, h("slot", { key: '14fd77af7dca02157248bf95d7d253d5f14e9f1e', name: "local-controls" }), h("slot", { key: '6dfac25cb64401123638ddfc6b94bbe89ae78249' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from "../../utils/index";
+import { IS_BROWSER, checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from "../../utils/index";
 import { version } from "../../../../package";
 const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons/`;
 const ANIMATION_NAMES = [
@@ -24,8 +24,6 @@ export class PostIcon {
         this.rotate = null;
         this.scale = null;
     }
-    isSSR = typeof window === 'undefined';
-    host;
     validateAnimation(newValue = this.animation) {
         if (newValue !== undefined)
             checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
@@ -56,7 +54,7 @@ export class PostIcon {
         // the first definition object which defines a domain, will be used to set the domain of the file url
         // the first definition object which defines a slug, will be used to set the slug of the file url
         const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
-        if (!this.isSSR) {
+        if (IS_BROWSER) {
             urlDefinitions.push(this.getUrlDefinition(document.head
                 .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
                 ?.getAttribute('data-post-icon-base'), 'relative'));
@@ -120,7 +118,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '60f27d2a489e5649aa6ff06a771a146f1b83480d', "data-version": version }, h("span", { key: 'd1e7fe17b1c4b522bf091f248dfe51f838b87896', style: this.getStyles() })));
+        return (h(Host, { key: 'b3c3efcc03f423a248e231b4b4c5d79c93ae25a6', "data-version": version }, h("span", { key: 'd73d4df11fcccb96d5346f3f8c3e18602bb8d484', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -228,7 +226,7 @@ export class PostIcon {
                     "text": "The name/id of the icon (e.g. 1000, 1001, ...)."
                 },
                 "attribute": "name",
-                "reflect": false
+                "reflect": true
             },
             "rotate": {
                 "type": "number",

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

@@ -12,7 +12,6 @@ export class PostLanguageOption {
         this.name = undefined;
         this.url = undefined;
     }
-    host;
     validateCode() {
         checkType(this, 'code', 'string');
     }
@@ -37,14 +36,6 @@ export class PostLanguageOption {
             this.postLanguageOptionInitiallyActive.emit(this.code);
         }
     }
-    /**
-     * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
-     */
-    postChange;
-    /**
-     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
-     */
-    postLanguageOptionInitiallyActive;
     /**
      * Selects the language option programmatically.
      */
@@ -65,7 +56,7 @@ export class PostLanguageOption {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '404caa6a507637810b672c5decf4e3af300733ac', "data-version": version }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+        return (h(Host, { key: '3a6b9a8f63c90f431a13c1df529a2e4716ede5d8', "data-version": version }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
     }
     static get is() { return "post-language-option"; }
     static get originalStyleUrls() {

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

@@ -1,17 +1,19 @@
 import { Host, h } from "@stencil/core";
-import { checkEmptyOrOneOf, checkType } from "../../utils/index";
+import { checkEmptyOrOneOf, checkType, eventGuard } from "../../utils/index";
 import { version } from "../../../../package";
 import { SWITCH_VARIANTS } from "./switch-variants";
 import { nanoid } from "nanoid";
-import { eventGuard } from "../../utils/event-gua";
 export class PostLanguageSwitch {
     constructor() {
+        this.menuId = `p${nanoid(11)}`;
         this.caption = undefined;
         this.description = undefined;
         this.variant = 'list';
         this.activeLang = undefined;
     }
-    host;
+    get languageOptions() {
+        return Array.from(this.host.querySelectorAll('post-language-option'));
+    }
     validateCaption() {
         checkType(this, 'caption', 'string');
     }
@@ -29,7 +31,6 @@ export class PostLanguageSwitch {
         // Initially set variants and active language
         // Handles cases where the language-switch is rendered after the language-options have been rendered
         this.updateChildrenVariant();
-        this.updateActiveLanguage();
     }
     /**
      * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
@@ -60,30 +61,17 @@ export class PostLanguageSwitch {
     handleInitiallyActive(event) {
         this.activeLang = event.detail;
     }
-    get languageOptions() {
-        return this.host.querySelectorAll('post-language-option');
-    }
-    get activeLanguageOption() {
-        return this.host.querySelector('post-language-option[active]:not([active="false"])');
-    }
-    handleSlotChange() {
-        this.updateActiveLanguage();
-    }
-    updateActiveLanguage() {
-        this.activeLang = this.activeLanguageOption.getAttribute('code');
-    }
     // Update post-language-option variant to have the correct style
     updateChildrenVariant() {
         this.languageOptions.forEach(el => {
             el.setAttribute('variant', this.variant);
         });
     }
-    menuId = `p${nanoid(11)}`;
     renderList() {
-        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, h("slot", { onSlotchange: () => this.handleSlotChange() }))));
+        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, h("slot", null))));
     }
     renderDropdown() {
-        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, h("slot", { onSlotchange: () => this.handleSlotChange() }))));
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, h("slot", null))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();

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

@@ -1 +1 @@
-post-linkarea{display:contents;cursor:pointer}
+:host{display:contents;cursor:pointer}

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

@@ -3,7 +3,6 @@ import { version } from "../../../../package";
 const INTERACTIVE_ELEMENTS = ['a'].join(',');
 const INTERACTIVE_ELEMENTS_SELECTOR = `:where(${INTERACTIVE_ELEMENTS})`;
 export class PostLinkarea {
-    host;
     dispatchClick({ ctrlKey, shiftKey, altKey, metaKey }) {
         const interactiveElement = this.host.querySelector(`[data-link]${INTERACTIVE_ELEMENTS_SELECTOR}`) ??
             this.host.querySelector(INTERACTIVE_ELEMENTS_SELECTOR);
@@ -13,9 +12,10 @@ export class PostLinkarea {
         interactiveElement.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
     }
     render() {
-        return (h(Host, { key: 'c27bb1e548eecbef9b981ebadea8a9a30a06a89c', "data-version": version, onClick: e => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '9e5bd5c6032ed87bc2c6e9eed96dc79f19295325' })));
+        return (h(Host, { key: '56e4b032fa8976cc120bff5f1c36d55167e54e98', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '25568fab2a47d765757c00fbee4f2999c1da16d1' })));
     }
     static get is() { return "post-linkarea"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["post-linkarea.scss"]

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

@@ -11,8 +11,6 @@ export class PostList {
         this.titleHidden = false;
         this.horizontal = false;
     }
-    host;
-    titleEl;
     componentWillLoad() {
         /**
          * Get the id set on the host element or use a random id by default
@@ -28,7 +26,7 @@ export class PostList {
         }
     }
     render() {
-        return (h(Host, { key: '085a63d7b4cc85461f2c8fd0c7b9d9f48f42055a', "data-version": version }, h("div", { key: 'd13a66ba16b71eff1a86666b04ca2f41957962e1', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0270bcd71c8a3a34390b98b6374a1a2f06e0d606' })), h("div", { key: 'de04b08bf94900435c53f972c8fcd0798c8a5faf', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'f7aa9976b3283ee4da3d32d84b36e2549c29e80f', name: "post-list-item" }))));
+        return (h(Host, { key: 'b003aa61735359b6a1d95aad8d29c609d5bb3c8b', "data-version": version }, h("div", { key: '2f69a2c72dd357767735e10d16f1b7586da6d5a3', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '3982783d438519673a676323339a013d3edb84db' })), h("div", { key: 'b8a91c4430774f019cc46aa19393e2a1566204a5', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '378a51785c4d52df8ae422657a16e8295b405149', name: "post-list-item" }))));
     }
     static get is() { return "post-list"; }
     static get originalStyleUrls() {