@swisspost/design-system-components 9.0.0-next.5 → 9.0.0-next.7

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

@@ -5,8 +5,8 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
- * @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="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt">block content</a>.<p className="banner banner-sm banner-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
+ * @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 {
     /**
@@ -218,14 +218,14 @@ export class PostCardControl {
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '4e96104d2943b1f25d15197856492a0c16ec8de1', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'b32952648adb9e658735620d38158b0144d5d346', class: {
+        return (h(Host, { key: '9a9606cbe154a9bedbc5bcabfd0f8a124f48d7c3', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'fc77375570af7db9e8fe1a554d73e1aec04025b5', 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: '0bb8a3715e514f784042ff2e4ad0fdd6372265b1', ref: el => (this.control = el), id: this.controlId, class: "card-control--input form-check-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: 'f30f9bb23b2f850b0584a6cf40c9a72363e937f0', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label form-check-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: 'c759f3283261bca1dc25ae58e12c2c41545fad8c', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '7fc6a41a4f230e9c893a251cb80b562e0f2b0c81' })))));
+            } }, h("input", { key: '5364895020750c3a265ff3773d29fa1984215a36', 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: '452117728c65c511f58ca1e3c98f06edff295c83', 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: 'b9da8ef0d3cc6492aa6fa2b7696f73905dca3bb6', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '37aed120bb769b1cfcbccd41b17135b1b769d31e' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -328,7 +328,7 @@ export class PostCardControl {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the `name` attribute of the control.\n<span className=\"alert alert-sm alert-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=\"alert alert-sm alert-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=\"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,
@@ -346,7 +346,7 @@ export class PostCardControl {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the `value` attribute of the control. <span className=\"alert alert-sm alert-info\">This is a required property, when the control is used with type `radio`.</span>"
+                    "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,
@@ -418,7 +418,7 @@ export class PostCardControl {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the icon `name` inside the card.\n<span className=\"alert alert-sm alert-info\">If not set the icon will not show up.</span>"
+                    "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,
@@ -455,7 +455,7 @@ export class PostCardControl {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<span className=\"alert alert-sm alert-info\">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>"
+                    "text": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<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>"
                 },
                 "complexType": {
                     "original": "{ state: boolean; value: string }",

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

@@ -70,7 +70,7 @@ export class PostHeader {
         if (this.mobileMenuExtended) {
             mainNavClasses.push('extended');
         }
-        return (h(Host, { key: '5a05f890e66ec97d54fd17ca26436392a4e78e9b', version: version }, h("div", { key: '8f9b79cb289d0c613f6d000cf969ce5bf0b3d62a', class: "global-header" }, h("div", { key: '0a482fc3153e29917ed2df1fcbf39492a18918ef', class: "global-sub" }, h("div", { key: '3d25cc42a1fac21906cb2c487d90de84a9f1d029', class: "logo" }, h("slot", { key: '5a14eb7b8f9927083a56e37d53bc4aed3311b6c8', name: "post-logo" })), this.device === 'desktop' && h("slot", { key: '21bc41d4a09536a33ee3d7a98424a00d3969718f', name: "audience-navigation" })), h("div", { key: '6c8fdc5acc99c165bda366e872ceb32d6918b515', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '88f681de4d63517d73decd436b7084fca410f021', name: "meta-navigation" }), h("slot", { key: 'b6e5c1143fb89e2940f464bac95277bc2741a5c8', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '2edb30a148ffaae9f864e9babc03228c63a46314', name: "post-language-switch" }), h("div", { key: 'cc0633f19bd9b948fb2456fdc44431984e3a10eb', onClick: () => this.handleMobileMenuToggle(), class: "mobile-toggle" }, h("slot", { key: '26fa9aa29cab7e4048c387ee6c49216dc911f209', name: "post-togglebutton" })))), h("div", { key: '772afbe63ac2f0ae0527e25c6feac75b02365689', class: "title-header d-flex space-between align-center" }, h("slot", { key: '32bf212b1e16df0a2fd7cec6b21a7649458e7660', name: "title" }), h("div", { key: '13bf9f2443fa9c48c6f25a0159896995e170b4dc', class: "global-sub" }, h("slot", { key: 'a20c9414619c9508600c25ef31d5c14f6178f520', name: "local-controls" }), h("slot", { key: 'a87beb7500f4e07396bf4a91ee299a4bebd751bd' }))), h("div", { key: '008c9d1a0acf59a9b54facec5e6aec2f483f8ed7', class: mainNavClasses.join(' ') }, (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: 'e8013ae7c0fe3883a4be405409fd3b35e236cf8c', name: "audience-navigation" })), h("slot", { key: '90412d08f0a835714de0a6c635f82aae90abeac2', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: '31fb4b34ddabda5f87f65a6c841b64f4a9802d50', name: "meta-navigation" })), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: 'cfd212a052d0b736d049084f492c614131ae7a32', name: "post-language-switch" })))));
+        return (h(Host, { key: '85b0f7c1d14b96947497cc6d1cdf059430eb9ab6', version: version }, h("div", { key: '740ed42365e2e71215d4b8174cf98d8f8385fe9a', class: "global-header" }, h("div", { key: '0a0b0a3bdb527c6988992e23a3401f9c51b02d51', class: "global-sub" }, h("div", { key: '983bc0dacdc9f7f96a8aefdd3e17f31d0fbe1ef8', class: "logo" }, h("slot", { key: 'e9b97b26cfdbe836147493c50a98986791d8ce85', name: "post-logo" })), this.device === 'desktop' && h("slot", { key: '8a6d9c3c9d3f72de6d9ef0dbd2ecde3fd4982de6', name: "audience-navigation" })), h("div", { key: 'a85add260edc38024612e7bc1f2e7d19a2b11fdf', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'ffac0efc9078819711471067b6a85feaa807c9c9', name: "meta-navigation" }), h("slot", { key: 'c8270ebb6c57bbba4db4e2799e69e33ea0a2c094', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'ac209cb8acd66dcaeb300c17994f0bae201cc0f8', name: "post-language-switch" }), h("div", { key: '210a5220eb97155138422a032a850d13992ac9a2', onClick: () => this.handleMobileMenuToggle(), class: "mobile-toggle" }, h("slot", { key: '42fb06418bc617252c80bab4ae64c64a74265723', name: "post-togglebutton" })))), h("div", { key: '62e1859020d65a54b86d53882a4452f6005589e9', class: "title-header d-flex space-between align-center" }, h("slot", { key: 'b285ac31f54fb3011813aab9f7c8ae1e9d64e8c2', name: "title" }), h("div", { key: 'b529d4b6d01bc39c9344bd2ed15f698d0637fe35', class: "global-sub" }, h("slot", { key: 'da20b42e70bd715c89ef4e6c7419f115bb1bfb45', name: "local-controls" }), h("slot", { key: 'd27c3b97b6597df51811913c74ae2ec157939563' }))), h("div", { key: '7d80d02dd4794598828d6c05779714d874818bbe', class: mainNavClasses.join(' ') }, (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: 'dc02044dec14c3b716dd20209c5fb775d75d583f', name: "audience-navigation" })), h("slot", { key: '3f5a09fb4f69bb21924db2e236d554036a559d54', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: 'f50c0ce8631109041c25200c4e4b3f57502cf434', name: "meta-navigation" })), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: 'fc87fa82fd01021eb629bacc168f2d0a537409eb', name: "post-language-switch" })))));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-:host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}
+:host{container-name:post-icon;container-type:inline-size;display:inline-block;width:1em;height:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color}@container post-icon (max-width: 23.98px){svg{--pis-16: block}}@container post-icon (min-width: 24px) and (max-width: 31.98px){svg{--pis-24: block}}@container post-icon (min-width: 32px) and (max-width: 39.98px){svg{--pis-32: block}}@container post-icon (min-width: 40px) and (max-width: 47.98px){svg{--pis-40: block}}@container post-icon (min-width: 48px) and (max-width: 63.98px){svg{--pis-48: block}}@container post-icon (min-width: 64px){svg{--pis-64: block}}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}

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

@@ -16,8 +16,6 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
  */
 export class PostIcon {
     constructor() {
-        this.svgStyles = undefined;
-        this.svgOutput = undefined;
         this.animation = null;
         this.base = null;
         this.flipH = false;
@@ -49,6 +47,25 @@ export class PostIcon {
     validateScale(newValue = this.scale) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
     }
+    getPath() {
+        var _a, _b, _c, _d, _e, _f;
+        // Construct icon path from different possible sources
+        const metaBase = (_b = (_a = document.head
+            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
+        const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
+        const fileBase = `${(_f = (_e = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase) !== null && _e !== void 0 ? _e : baseHref) !== null && _f !== void 0 ? _f : CDN_URL}/`.replace(/\/\/$/, '/');
+        const fileName = `${this.name}.svg#i-${this.name}`;
+        const filePath = `${fileBase}${fileName}`;
+        return new URL(filePath, window.location.origin).toString();
+    }
+    getStyles() {
+        return Object.entries({
+            transform: (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
+        })
+            .filter(([_key, value]) => value !== null)
+            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+    }
     componentDidLoad() {
         this.validateBase();
         this.validateName();
@@ -58,30 +75,8 @@ export class PostIcon {
         this.validateRotate();
         this.validateAnimation();
     }
-    componentWillRender() {
-        this.setPath();
-    }
-    setPath() {
-        var _a, _b, _c, _d;
-        // Construct icon path from different possible sources
-        const metaBase = (_b = (_a = document.head
-            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-        const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
-        const fileName = `${this.name}.svg`;
-        const filePath = `${fileBase}${fileName}`;
-        this.path = new URL(filePath, window.location.origin).toString();
-    }
     render() {
-        // create inline styles for some properties
-        const svgStyles = Object.entries({
-            '-webkit-mask-image': `url('${this.path}')`,
-            'mask-image': `url('${this.path}')`,
-            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
-        })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-        return (h(Host, { key: '86c61ac92270e1b46ef63e2bb0ff4683a16ca794', "data-version": version }, h("span", { key: 'ad856363b96d303912c9085d9d45cb911cbedfc6', style: svgStyles })));
+        return (h(Host, { key: '34a48ba95a05ab98ccbd7d5c59423f8f261c2a77', "data-version": version }, h("svg", { key: '34a70353c83fba4b8606ee4516cda7982c042ea2', style: this.getStyles() }, h("use", { key: '3241328a9e9b1f7929d79fff89725d98e5e162a0', href: this.getPath() }))));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -229,12 +224,6 @@ export class PostIcon {
             }
         };
     }
-    static get states() {
-        return {
-            "svgStyles": {},
-            "svgOutput": {}
-        };
-    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

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

@@ -47,7 +47,7 @@ export class PostLanguageOption {
     }
     render() {
         const lang = this.code.toLowerCase();
-        return (h(Host, { key: '98b5a47cb7544c23512f1a56bb62d286cbde90ff', "data-version": version, role: "listitem" }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, h("slot", null)))));
+        return (h(Host, { key: 'e52e889c7aee2f5a46d7070a6a12185573db2cb3', "data-version": version, role: "listitem" }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, h("slot", null)))));
     }
     static get is() { return "post-language-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,12 +20,12 @@ export class PostList {
         this.checkTitle();
     }
     checkTitle() {
-        if (!this.titleEl.innerText) {
+        if (!this.titleEl.textContent.trim()) {
             throw new Error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
         }
     }
     render() {
-        return (h(Host, { key: '23875f577fa2cbdeac88596616ddd1d5b924f983', "data-version": version }, h("div", { key: '3fe8da70bc5c0e7b72c5e8b76a37762deb55fffd', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '536bec8ddbed178108a921f0b643d6eeb7b58edc' })), h("div", { key: 'c6b560206740105afc494050fa4b8608ccf4bd15', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '06272c2a9cc18d2f5440ff1fc0b966929b3ab6a0', name: "post-list-item" }))));
+        return (h(Host, { key: '7126a864e6c4d8152c9024bd8d390514bc8c0b7a', "data-version": version }, h("div", { key: 'c3f56a0e41146dc5dbd2c3fc165152e05953956f', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '3de0cd83b48ef3a3201f854842781ccba9bedf29' })), h("div", { key: '4b8a4ac0a9c89451a408cc8de814878dc8da11b7', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '474d87804fc39241a0f3541a82bdfbe1491a4452', name: "post-list-item" }))));
     }
     static get is() { return "post-list"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ export class PostListItem {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: '8336f46e5c7d9b6b921582498e1d7e62086b3d4b', role: "listitem" }, h("slot", { key: '36ca0d6632ca775793f1db91d747894e0037dca2' })));
+        return (h(Host, { key: '25532c40e8f02f335df6b112041cbaf6056576b6', role: "listitem" }, h("slot", { key: '46ddc9e27c71040b271ab6bd59db2ac37fa4a112' })));
     }
     static get is() { return "post-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class PostLogo {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: '9f23dca4f568ecbcf3d90387b2a9cb4fa1e85a98', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: '1b303363d3a4a829d4ab4b38bc40cbd3107b55e9', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: 'de29d53c4bb663053092b905d32f6597bd9a00d5', class: "description" }, h("slot", { key: 'bdfc96e3d9cb9384a61fa8af91c12a4b119f2f3b', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'f2d1e0803c7f2f3a7c425dd5ebd57346c8d967e6', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '554a2d4edb796b01969555eccb3f0f34e74f0121', id: "Logo" }, h("rect", { key: '7596d8684037b02d015e48539bddda3f44dfcadf', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'f79c5e941f7d87de1484a934565cf363b49914d5', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '7c5babc1703e4f74c08b78916a86c553f8cc6edf', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (h(Host, { key: 'd3dd408c30b4e22712b9a293906c7334e7d1852b', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: '4eb08a4d1b4a0ec2557b63678225a16d287c692c', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: 'ab3b1a8da4a7b87aa0a020d47586a7018619e9c3', class: "description" }, h("slot", { key: 'a9c39b1f2f54fd4ceb79a82ab30571c161a29adb', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'af4c3fbdb2a72e0b8518a6c16cefdb795f41244c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '05e25c1522dd4edfc676b04cf9092ed519d95381', id: "Logo" }, h("rect", { key: '12e1b7878e990e110c8ae83ef742bb6fa4c48a2f', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '0e1120c70769c4a23b3711c1157e6f1742e3a75b', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'ccc271be1919898fc6eed78bf2e012e71dd96c48', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
     static get is() { return "post-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class PostMainnavigation {
         this.postToggle.emit();
     }
     render() {
-        return (h(Host, { key: '1c1d1d1c2781f39acc0fd02d3f93f922d801d98f', slot: "post-mainnavigation" }, h("div", { key: '1bc1129c65fc03ec72609438bbf28afe5bc5974b', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '6b1bcc25306f1f959a25b18a6319eb696b0cbc2c', name: "back-button" })), h("nav", { key: '0002b55cb82fbf88a69a886c5ec1ba24168c9979', class: "main-navigation" }, h("slot", { key: '15e4558c1202f8f83e09dad76441d6bf7e3e16ea' }))));
+        return (h(Host, { key: '5006fede681cf581b878c84fd1a6b7fe4830cbd2', slot: "post-mainnavigation" }, h("div", { key: 'a2273bab074eac3f9197961b935c3ba19ecbbb21', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'c42751bee76cecbb076bb227bd0ffcc634b354a2', name: "back-button" })), h("nav", { key: '89541b5efc3500a8feec250a3d10402ea4b1a3a2', class: "main-navigation" }, h("slot", { key: 'f5f5a030325e701aaaca13747131b1f1fa10e849' }))));
     }
     static get is() { return "post-mainnavigation"; }
     static get originalStyleUrls() {

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

@@ -28,7 +28,7 @@ export class PostMegadropdown {
         this.hide();
     }
     render() {
-        return (h(Host, { key: '6b30399852561a911c04a79c7c785bb5cf8e68ff', slot: "post-mainnavigation" }, h("post-popovercontainer", { key: 'caa196c59c0177948a73c43033f7399344068d77', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '7c88bd1ca7fac00b9ab0cb1d73252c6990484fb2', class: "megadropdown" }, h("div", { key: '25073177e9c9a05fca93b3b0abbed18f6b2a075b', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '06a153e974f60476f2796e03afea3ad86c7560ca', name: "back-button" })), h("slot", { key: 'ea95044efbd609894dd96b3aa8662756e14711af' })))));
+        return (h(Host, { key: '96d71da6b3cfcd8980d7e60cb383d545c754d7b3', slot: "post-mainnavigation" }, h("post-popovercontainer", { key: 'ec27bcdae9da77299d59d8869be60c08816eef85', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '0b97d183a5fad18401aa876cf19d3975a1757d18', class: "megadropdown" }, h("div", { key: '4eb9715d7cf88898dddae702f71d430f1e3810af', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'a21d4b50b1d04211ecfb5d0b145452a6bbae0ae0', name: "back-button" })), h("slot", { key: '5a4dd77f0f91bf6a61ef1cf9bdd4371875a52d2e' })))));
     }
     static get is() { return "post-megadropdown"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class PostMegadropdownTrigger {
         this.postToggle.emit();
     }
     render() {
-        return (h(Host, { key: 'af6dbf6cb97c5f98242e2d3fc31f193d00444b26', slot: "post-megadropdown-trigger" }, h("button", { key: '8160075f3dcb5afdd88a375698a61edfdbe8b7a1', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, h("slot", { key: 'f5be082b15802582540d9a3320d4bf19ca3d98c3' }))));
+        return (h(Host, { key: '0b3de3d7d035e7427ff55d5818ce89f3cadd3c57', slot: "post-megadropdown-trigger" }, h("button", { key: '6e5ea2515fcafbf9ed4ea4f0532f85f6c044f2a5', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, h("slot", { key: '60daae26758894fea7576d696d9325fa61f3cc31' }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -135,7 +135,7 @@ export class PostMenu {
         return menuItems;
     }
     render() {
-        return (h(Host, { key: '4447ff6878a1b0f38b533196466b33217f9499d4', "data-version": version }, h("post-popovercontainer", { key: '918e2b8a662cdb64972cb0729b8b077e1bca5e0a', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '40b04b6c0d65cc3c10f6b8b037ec3ff24d1b907b', class: "popover-container" }, h("slot", { key: 'e836fdb9e29961f3b6c6c13261e8eef0f874cfb6' })))));
+        return (h(Host, { key: '80720b7f1d029833de466c84c9fe931460a5b9b1', "data-version": version }, h("post-popovercontainer", { key: 'b1e610ad0c0f33a09ac3fee5954567e957653e76', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'a9cd7f6efcd762b548acb7c8d3bf614ccdedd504', class: "popover-container" }, h("slot", { key: 'e278c4020b70c8bd5f6a1e4a3ac8cbaf37f2b786' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-menu-item/post-menu-item.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 export class PostMenuItem {
     render() {
-        return (h(Host, { key: '7984d6be0ae981f54618b4c0d7a80bfcc71f16a3', role: "menuitem", "data-version": version }, h("slot", { key: '7fbb20f1586676b1c8f933e0f067144bbcca825f' })));
+        return (h(Host, { key: '48720f09bc2ab4a979d215f590dcb80e39422e46', role: "menuitem", "data-version": version }, h("slot", { key: '5a0c1aeb2c96a02c2e4567d3e1e83fd6e3a3aace' })));
     }
     static get is() { return "post-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
-import { checkType } from "../../utils/index";
+import { checkType, getRoot } from "../../utils/index";
 export class PostMenuTrigger {
     constructor() {
         /**
@@ -25,7 +25,7 @@ export class PostMenuTrigger {
         checkType(forValue, 'string', 'The "for" property is required and should be a string.');
     }
     get menu() {
-        const ref = document.getElementById(this.for);
+        const ref = this.root.getElementById(this.for);
         return ref && ref.localName === 'post-menu' ? ref : null;
     }
     handleToggle() {
@@ -40,6 +40,7 @@ export class PostMenuTrigger {
         }
     }
     componentDidLoad() {
+        this.root = getRoot(this.host);
         this.validateControlFor();
         this.slottedButton = this.host.querySelector('button');
         if (this.slottedButton) {
@@ -54,7 +55,7 @@ export class PostMenuTrigger {
         }
     }
     render() {
-        return (h(Host, { key: 'ce2a30260fae6eecae5b2feb0538ac2ce66b989c', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'a69d7dc4a1a798332bd9881cedb216ef82d279ab' })));
+        return (h(Host, { key: '5c07c2a808f5048b870d77f1f65d84bc2007431f', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'ab779f01983e2c88f09707ab8b12eb326ac6946b' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {

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

@@ -1,3 +1,3 @@
 /*!
  * Copyright 2021 by Swiss Post, Information Technology
- */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-close{color:var(--post-contrast-color)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51;display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px}@media(max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}
+ */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:var(--post-gray-40)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{--post-contrast-color: #fff;--post-bg-rgb: 51, 51, 51;display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px;max-width:100%}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}

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

@@ -88,7 +88,7 @@ export class PostPopover {
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (h(Host, { key: '22964a2be347979d1ebaaec468edfd4b079776ff', "data-version": version }, h("post-popovercontainer", { key: 'a108ed03721a453ce73a850913d93b8bfaf83922', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '943f1a914ada58c3f8b085613b47ed4b7c55e591', class: "popover-container" }, h("div", { key: 'a6a8dec53c9190c48d1b3b217c979d78b2f32995', class: "popover-content" }, h("slot", { key: '555bc4537d6bd62b60186db9700588eb3ec38ac2' })), h("button", { key: 'db0826565312bba9bc48a88cd84636a903eeb94f', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'aef92ba6e586e02924a09d459e4d753ad18f72f7', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: 'e716f0b45da8a21c43afba019dbf84a87bc49fab', "data-version": version }, h("post-popovercontainer", { key: '530ffbd07a0f2b2edc26db0c5667c9de372edf01', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '4d7420876786f835aef9decf92030651f5117f52', class: "popover-container" }, h("div", { key: 'e557e3e1f4566fc81b1255ef628e7c58d59fc596', class: "popover-content" }, h("slot", { key: 'ea5e3407ec41868471d388a02cb8a4ba32889d6c' })), h("button", { key: 'af21850867d713f7c5a825d4ac824b12ce40f3e7', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'b2f85d5efd0fd424448efa73ee9ad07c5bab2947', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,9 +137,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: '97a63bfbf098bd3463eb75678e54ddcc9e4790b3', "data-version": version }, this.arrow && (h("span", { key: 'f6eaa7bd6cd3eb63d15e7d91825365661daae7dd', class: "arrow", ref: el => {
+        return (h(Host, { key: '11e3be5293791aa58da291f2a0f17677ad0e0e63', "data-version": version }, this.arrow && (h("span", { key: '00d76dcd41bf267bb50290ae439c49333ade68b3', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '414055000891719b74c2c449fec2c87a60b62047' })));
+            } })), h("slot", { key: '7c579254fc1b76c91ddecf0952945339cf5bc7fd' })));
     }
     static get is() { return "post-popovercontainer"; }
     static get originalStyleUrls() {

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

@@ -64,7 +64,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: '0202a629d68bc85d00fb3ccae63073938fb174d3', "data-version": version }, h("div", { key: '7de2c78d498957dbd988472729fde2ea04162490', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: 'd5bce841329555bdb71e7f861b7d1f74d93dbcbc', "data-version": version }, h("div", { key: '0c81664652bd279c833ffabe63f082e4849e611a', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

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

@@ -1,3 +1,3 @@
-.tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!
+.tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!
  * Copyright 2021 by Swiss Post, Information Technology
  */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}

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

@@ -16,7 +16,7 @@ export class PostTabHeader {
         this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: 'f105dabe8a61308d5aa361a6aeaad2f938cf7656', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '3abc0c8fab0a0ab1dd538e20831980b4672ae79a' })));
+        return (h(Host, { key: '4ca8efb0e3a6a429442be5406eb43f9cd2406b49', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '049d4c8378c42fc31b572d8b073fef523fbc6f37' })));
     }
     static get is() { return "post-tab-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -13,7 +13,7 @@ export class PostTabPanel {
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: '9018d11d85d1ce0b83e74987f8fb96eb1b873a40', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '45e2214fbeb5d4c2b4e5e35eb5ad74d99033a0a3' })));
+        return (h(Host, { key: '8116daf192361e9c9333c1a94afa4d9eb5cce3d1', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '646fc0fa564f76c6f2a1f706cc753f11306ca231' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs.list-bullet>li{margin:0;padding:0}.tabs.list-bullet>li::before{display:none}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-white .tabs-wrapper{background-color:#fff}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-black .tabs-wrapper{background-color:#000}.bg-primary .tabs-wrapper{background-color:#333}.bg-secondary .tabs-wrapper{background-color:#666}.bg-success .tabs-wrapper{background-color:#2c871d}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-error .tabs-wrapper{background-color:#a51728}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}.bg-error-background .tabs-wrapper{background-color:#ffdade}:host{display:block}
+.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-white .tabs-wrapper{background-color:#fff}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-black .tabs-wrapper{background-color:#000}.bg-primary .tabs-wrapper{background-color:#333}.bg-secondary .tabs-wrapper{background-color:#666}.bg-success .tabs-wrapper{background-color:#2c871d}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-error .tabs-wrapper{background-color:#a51728}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}.bg-error-background .tabs-wrapper{background-color:#ffdade}:host{display:block}

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

@@ -142,7 +142,7 @@ export class PostTabs {
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '3c9d7351fa09531238892f0bd05447379f46fdb4', "data-version": version }, h("div", { key: '1eff106f6324302155e809a58cd3367bb7bdbd76', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'fc5917d92b577f99fb19fa80ecd1a863ffeaa4d8', class: "tabs", role: "tablist" }, h("slot", { key: 'af35884271ca9d75dbbd113e05fd052c4691c53e', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '4908774e2306e432af65b94a9dd5e1d257569652', class: "tab-content", part: "content" }, h("slot", { key: 'c0eb44e39b0cffe57c42c51dd74e605e74241f70', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '2a7fe6d86dc18dcebaa25b5466ffc88de96114e6', "data-version": version }, h("div", { key: '71940a2be5c36f591f0948c7f8dedbb26e98736d', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'bd9fa6ba6e2bd037a0a09365d4906b7288f929c6', class: "tabs", role: "tablist" }, h("slot", { key: '72a369206b0f81e88ff9741a69e6b58ba3239f5e', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '9c544b7bae6dc2abb3e297015216c88872a78b8e', class: "tab-content", part: "content" }, h("slot", { key: '2f2e274ecb2bbe19c8f016b8d7a1f7a7038d6646', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class PostTag {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '01f369b7c6803f710fb0b5eae652d6d1beb340ed', "data-version": version }, h("div", { key: 'bba40e4deaa43e64c9bc32c2ad4a3e3515bdf8dd', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '9addb054f9555c9a97d8825a148958b2e2b863a7', class: "tag-text" }, h("slot", { key: '315cf79690fa489c61edd6ce6b304b94a3866b8c' })))));
+        return (h(Host, { key: '52768516080d294eaf20034e18e6a776149fa97e', "data-version": version }, h("div", { key: 'f342d20bfccfdf650f5c6e943065f090a13fd94c', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '5286cb07cbfa5b20e0dfbbd4847a3dda49a19278', class: "tag-text" }, h("slot", { key: '6215a61b4e10d6c0274019f183ef90e46d282114' })))));
     }
     static get is() { return "post-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -93,7 +93,7 @@ export class PostTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the icon `name` inside of the component.\n<span className=\"alert alert-sm alert-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>."
+                    "text": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>."
                 },
                 "attribute": "icon",
                 "reflect": false,

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

@@ -0,0 +1 @@
+:host{cursor:pointer}

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

@@ -0,0 +1,56 @@
+import { Host, h } from "@stencil/core";
+import { version } from "../../../../package";
+/**
+ * @slot toggled - Slot for content displayed when the button is in the "on" state.
+ * @slot untoggled - Slot for content displayed when the button is in the "off" state.
+ */
+export class PostTogglebutton {
+    constructor() {
+        this.handleClick = () => {
+            this.toggled = !this.toggled;
+        };
+        this.handleKeydown = (event) => {
+            if (event.key === 'Enter') {
+                this.toggled = !this.toggled;
+            }
+        };
+        this.toggled = false;
+    }
+    render() {
+        return (h(Host, { key: '253ca4026764e8d2c0979341a617fffb6d0d2e8e', slot: "post-togglebutton", tabindex: "0", "data-version": version, role: "button", "aria-pressed": this.toggled.toString(), onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("span", { key: 'e8c7c7492986993ca1ec6c38743555030b068dbb', hidden: this.toggled }, h("slot", { key: 'd012a64cf1da8acc149ad4c5929cfe3fa31619a3', name: "untoggled" })), h("span", { key: '6603b12b05870348e979a9283ac4a17f15a217c6', hidden: !this.toggled }, h("slot", { key: '1306cb988d645ca297fb32d8b743ae65abfe644b', name: "toggled" }))));
+    }
+    static get is() { return "post-togglebutton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-togglebutton.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-togglebutton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "toggled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the button is in the \"on\" state, otherwise it is in the \"off\" state."
+                },
+                "attribute": "toggled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+}