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

package/dist/cjs/{post-megadropdown-trigger-da912fed.js → post-megadropdown-trigger-9b9f1036.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 const index$1 = require('./index-824d2b71.js');
 const checkNonEmpty = require('./check-non-empty-eeaa8f77.js');
 const checkType = require('./check-type-64af82a9.js');
@@ -16,7 +16,7 @@ const PostClosebutton = class {
     get host() { return index.getElement(this); }
 };
 
-const postIconCss = ":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)}}";
+const postIconCss = ":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)}}";
 const PostIconStyle0 = postIconCss;
 
 const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
@@ -32,8 +32,6 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
 const PostIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.svgStyles = undefined;
-        this.svgOutput = undefined;
         this.animation = null;
         this.base = null;
         this.flipH = false;
@@ -65,6 +63,25 @@ const PostIcon = class {
     validateScale(newValue = this.scale) {
         index$1.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();
@@ -74,30 +91,8 @@ const PostIcon = class {
         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 (index.h(index.Host, { key: '86c61ac92270e1b46ef63e2bb0ff4683a16ca794', "data-version": _package.version }, index.h("span", { key: 'ad856363b96d303912c9085d9d45cb911cbedfc6', style: svgStyles })));
+        return (index.h(index.Host, { key: '34a48ba95a05ab98ccbd7d5c59423f8f261c2a77', "data-version": _package.version }, index.h("svg", { key: '34a70353c83fba4b8606ee4516cda7982c042ea2', style: this.getStyles() }, index.h("use", { key: '3241328a9e9b1f7929d79fff89725d98e5e162a0', href: this.getPath() }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -135,7 +130,7 @@ const PostLogo = class {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (index.h(index.Host, { key: '9f23dca4f568ecbcf3d90387b2a9cb4fa1e85a98', "data-version": _package.version, slot: "post-logo" }, index.h(LogoTag, Object.assign({ key: '1b303363d3a4a829d4ab4b38bc40cbd3107b55e9', class: "logo" }, (logoLink ? { href: logoLink } : {})), index.h("span", { key: 'de29d53c4bb663053092b905d32f6597bd9a00d5', class: "description" }, index.h("slot", { key: 'bdfc96e3d9cb9384a61fa8af91c12a4b119f2f3b', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'f2d1e0803c7f2f3a7c425dd5ebd57346c8d967e6', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: '554a2d4edb796b01969555eccb3f0f34e74f0121', id: "Logo" }, index.h("rect", { key: '7596d8684037b02d015e48539bddda3f44dfcadf', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.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" }), index.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 (index.h(index.Host, { key: 'd3dd408c30b4e22712b9a293906c7334e7d1852b', "data-version": _package.version, slot: "post-logo" }, index.h(LogoTag, Object.assign({ key: '4eb08a4d1b4a0ec2557b63678225a16d287c692c', class: "logo" }, (logoLink ? { href: logoLink } : {})), index.h("span", { key: 'ab3b1a8da4a7b87aa0a020d47586a7018619e9c3', class: "description" }, index.h("slot", { key: 'a9c39b1f2f54fd4ceb79a82ab30571c161a29adb', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'af4c3fbdb2a72e0b8518a6c16cefdb795f41244c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: '05e25c1522dd4edfc676b04cf9092ed519d95381', id: "Logo" }, index.h("rect", { key: '12e1b7878e990e110c8ae83ef742bb6fa4c48a2f', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.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" }), index.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" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -2318,9 +2313,9 @@ const PostPopovercontainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '97a63bfbf098bd3463eb75678e54ddcc9e4790b3', "data-version": _package.version }, this.arrow && (index.h("span", { key: 'f6eaa7bd6cd3eb63d15e7d91825365661daae7dd', class: "arrow", ref: el => {
+        return (index.h(index.Host, { key: '11e3be5293791aa58da291f2a0f17677ad0e0e63', "data-version": _package.version }, this.arrow && (index.h("span", { key: '00d76dcd41bf267bb50290ae439c49333ade68b3', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), index.h("slot", { key: '414055000891719b74c2c449fec2c87a60b62047' })));
+            } })), index.h("slot", { key: '7c579254fc1b76c91ddecf0952945339cf5bc7fd' })));
     }
     get host() { return index.getElement(this); }
 };
@@ -2346,12 +2341,12 @@ const PostList = class {
         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 (index.h(index.Host, { key: '23875f577fa2cbdeac88596616ddd1d5b924f983', "data-version": _package.version }, index.h("div", { key: '3fe8da70bc5c0e7b72c5e8b76a37762deb55fffd', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '536bec8ddbed178108a921f0b643d6eeb7b58edc' })), index.h("div", { key: 'c6b560206740105afc494050fa4b8608ccf4bd15', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: '06272c2a9cc18d2f5440ff1fc0b966929b3ab6a0', name: "post-list-item" }))));
+        return (index.h(index.Host, { key: '7126a864e6c4d8152c9024bd8d390514bc8c0b7a', "data-version": _package.version }, index.h("div", { key: 'c3f56a0e41146dc5dbd2c3fc165152e05953956f', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '3de0cd83b48ef3a3201f854842781ccba9bedf29' })), index.h("div", { key: '4b8a4ac0a9c89451a408cc8de814878dc8da11b7', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: '474d87804fc39241a0f3541a82bdfbe1491a4452', name: "post-list-item" }))));
     }
     get host() { return index.getElement(this); }
 };
@@ -2368,7 +2363,7 @@ const PostListItem = class {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (index.h(index.Host, { key: '8336f46e5c7d9b6b921582498e1d7e62086b3d4b', role: "listitem" }, index.h("slot", { key: '36ca0d6632ca775793f1db91d747894e0037dca2' })));
+        return (index.h(index.Host, { key: '25532c40e8f02f335df6b112041cbaf6056576b6', role: "listitem" }, index.h("slot", { key: '46ddc9e27c71040b271ab6bd59db2ac37fa4a112' })));
     }
     get host() { return index.getElement(this); }
 };
@@ -2581,7 +2576,7 @@ const PostHeader = class {
         if (this.mobileMenuExtended) {
             mainNavClasses.push('extended');
         }
-        return (index.h(index.Host, { key: '5a05f890e66ec97d54fd17ca26436392a4e78e9b', version: _package.version }, index.h("div", { key: '8f9b79cb289d0c613f6d000cf969ce5bf0b3d62a', class: "global-header" }, index.h("div", { key: '0a482fc3153e29917ed2df1fcbf39492a18918ef', class: "global-sub" }, index.h("div", { key: '3d25cc42a1fac21906cb2c487d90de84a9f1d029', class: "logo" }, index.h("slot", { key: '5a14eb7b8f9927083a56e37d53bc4aed3311b6c8', name: "post-logo" })), this.device === 'desktop' && index.h("slot", { key: '21bc41d4a09536a33ee3d7a98424a00d3969718f', name: "audience-navigation" })), index.h("div", { key: '6c8fdc5acc99c165bda366e872ceb32d6918b515', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '88f681de4d63517d73decd436b7084fca410f021', name: "meta-navigation" }), index.h("slot", { key: 'b6e5c1143fb89e2940f464bac95277bc2741a5c8', name: "global-controls" }), this.device === 'desktop' && index.h("slot", { key: '2edb30a148ffaae9f864e9babc03228c63a46314', name: "post-language-switch" }), index.h("div", { key: 'cc0633f19bd9b948fb2456fdc44431984e3a10eb', onClick: () => this.handleMobileMenuToggle(), class: "mobile-toggle" }, index.h("slot", { key: '26fa9aa29cab7e4048c387ee6c49216dc911f209', name: "post-togglebutton" })))), index.h("div", { key: '772afbe63ac2f0ae0527e25c6feac75b02365689', class: "title-header d-flex space-between align-center" }, index.h("slot", { key: '32bf212b1e16df0a2fd7cec6b21a7649458e7660', name: "title" }), index.h("div", { key: '13bf9f2443fa9c48c6f25a0159896995e170b4dc', class: "global-sub" }, index.h("slot", { key: 'a20c9414619c9508600c25ef31d5c14f6178f520', name: "local-controls" }), index.h("slot", { key: 'a87beb7500f4e07396bf4a91ee299a4bebd751bd' }))), index.h("div", { key: '008c9d1a0acf59a9b54facec5e6aec2f483f8ed7', class: mainNavClasses.join(' ') }, (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: 'e8013ae7c0fe3883a4be405409fd3b35e236cf8c', name: "audience-navigation" })), index.h("slot", { key: '90412d08f0a835714de0a6c635f82aae90abeac2', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: '31fb4b34ddabda5f87f65a6c841b64f4a9802d50', name: "meta-navigation" })), (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: 'cfd212a052d0b736d049084f492c614131ae7a32', name: "post-language-switch" })))));
+        return (index.h(index.Host, { key: '85b0f7c1d14b96947497cc6d1cdf059430eb9ab6', version: _package.version }, index.h("div", { key: '740ed42365e2e71215d4b8174cf98d8f8385fe9a', class: "global-header" }, index.h("div", { key: '0a0b0a3bdb527c6988992e23a3401f9c51b02d51', class: "global-sub" }, index.h("div", { key: '983bc0dacdc9f7f96a8aefdd3e17f31d0fbe1ef8', class: "logo" }, index.h("slot", { key: 'e9b97b26cfdbe836147493c50a98986791d8ce85', name: "post-logo" })), this.device === 'desktop' && index.h("slot", { key: '8a6d9c3c9d3f72de6d9ef0dbd2ecde3fd4982de6', name: "audience-navigation" })), index.h("div", { key: 'a85add260edc38024612e7bc1f2e7d19a2b11fdf', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: 'ffac0efc9078819711471067b6a85feaa807c9c9', name: "meta-navigation" }), index.h("slot", { key: 'c8270ebb6c57bbba4db4e2799e69e33ea0a2c094', name: "global-controls" }), this.device === 'desktop' && index.h("slot", { key: 'ac209cb8acd66dcaeb300c17994f0bae201cc0f8', name: "post-language-switch" }), index.h("div", { key: '210a5220eb97155138422a032a850d13992ac9a2', onClick: () => this.handleMobileMenuToggle(), class: "mobile-toggle" }, index.h("slot", { key: '42fb06418bc617252c80bab4ae64c64a74265723', name: "post-togglebutton" })))), index.h("div", { key: '62e1859020d65a54b86d53882a4452f6005589e9', class: "title-header d-flex space-between align-center" }, index.h("slot", { key: 'b285ac31f54fb3011813aab9f7c8ae1e9d64e8c2', name: "title" }), index.h("div", { key: 'b529d4b6d01bc39c9344bd2ed15f698d0637fe35', class: "global-sub" }, index.h("slot", { key: 'da20b42e70bd715c89ef4e6c7419f115bb1bfb45', name: "local-controls" }), index.h("slot", { key: 'd27c3b97b6597df51811913c74ae2ec157939563' }))), index.h("div", { key: '7d80d02dd4794598828d6c05779714d874818bbe', class: mainNavClasses.join(' ') }, (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: 'dc02044dec14c3b716dd20209c5fb775d75d583f', name: "audience-navigation" })), index.h("slot", { key: '3f5a09fb4f69bb21924db2e236d554036a559d54', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: 'f50c0ce8631109041c25200c4e4b3f57502cf434', name: "meta-navigation" })), (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: 'fc87fa82fd01021eb629bacc168f2d0a537409eb', name: "post-language-switch" })))));
     }
     get host() { return index.getElement(this); }
 };
@@ -2613,7 +2608,7 @@ const PostMainnavigation = class {
         this.postToggle.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '1c1d1d1c2781f39acc0fd02d3f93f922d801d98f', slot: "post-mainnavigation" }, index.h("div", { key: '1bc1129c65fc03ec72609438bbf28afe5bc5974b', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: '6b1bcc25306f1f959a25b18a6319eb696b0cbc2c', name: "back-button" })), index.h("nav", { key: '0002b55cb82fbf88a69a886c5ec1ba24168c9979', class: "main-navigation" }, index.h("slot", { key: '15e4558c1202f8f83e09dad76441d6bf7e3e16ea' }))));
+        return (index.h(index.Host, { key: '5006fede681cf581b878c84fd1a6b7fe4830cbd2', slot: "post-mainnavigation" }, index.h("div", { key: 'a2273bab074eac3f9197961b935c3ba19ecbbb21', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: 'c42751bee76cecbb076bb227bd0ffcc634b354a2', name: "back-button" })), index.h("nav", { key: '89541b5efc3500a8feec250a3d10402ea4b1a3a2', class: "main-navigation" }, index.h("slot", { key: 'f5f5a030325e701aaaca13747131b1f1fa10e849' }))));
     }
 };
 PostMainnavigation.style = PostMainnavigationStyle0;
@@ -2653,7 +2648,7 @@ const PostMegadropdown = class {
         this.hide();
     }
     render() {
-        return (index.h(index.Host, { key: '6b30399852561a911c04a79c7c785bb5cf8e68ff', slot: "post-mainnavigation" }, index.h("post-popovercontainer", { key: 'caa196c59c0177948a73c43033f7399344068d77', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, index.h("div", { key: '7c88bd1ca7fac00b9ab0cb1d73252c6990484fb2', class: "megadropdown" }, index.h("div", { key: '25073177e9c9a05fca93b3b0abbed18f6b2a075b', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: '06a153e974f60476f2796e03afea3ad86c7560ca', name: "back-button" })), index.h("slot", { key: 'ea95044efbd609894dd96b3aa8662756e14711af' })))));
+        return (index.h(index.Host, { key: '96d71da6b3cfcd8980d7e60cb383d545c754d7b3', slot: "post-mainnavigation" }, index.h("post-popovercontainer", { key: 'ec27bcdae9da77299d59d8869be60c08816eef85', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, index.h("div", { key: '0b97d183a5fad18401aa876cf19d3975a1757d18', class: "megadropdown" }, index.h("div", { key: '4eb9715d7cf88898dddae702f71d430f1e3810af', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: 'a21d4b50b1d04211ecfb5d0b145452a6bbae0ae0', name: "back-button" })), index.h("slot", { key: '5a4dd77f0f91bf6a61ef1cf9bdd4371875a52d2e' })))));
     }
 };
 PostMegadropdown.style = PostMegadropdownStyle0;
@@ -2672,7 +2667,7 @@ const PostMegadropdownTrigger = class {
         this.postToggle.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'af6dbf6cb97c5f98242e2d3fc31f193d00444b26', slot: "post-megadropdown-trigger" }, index.h("button", { key: '8160075f3dcb5afdd88a375698a61edfdbe8b7a1', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, index.h("slot", { key: 'f5be082b15802582540d9a3320d4bf19ca3d98c3' }))));
+        return (index.h(index.Host, { key: '0b3de3d7d035e7427ff55d5818ce89f3cadd3c57', slot: "post-megadropdown-trigger" }, index.h("button", { key: '6e5ea2515fcafbf9ed4ea4f0532f85f6c044f2a5', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, index.h("slot", { key: '60daae26758894fea7576d696d9325fa61f3cc31' }))));
     }
 };
 PostMegadropdownTrigger.style = PostMegadropdownTriggerStyle0;

package/dist/cjs/{post-menu-54fa65d3.js → post-menu-5a71a6fe.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 
 const focusableSelector = `:where(${[
     'button',
@@ -167,7 +167,7 @@ const PostMenu = class {
         return menuItems;
     }
     render() {
-        return (index.h(index.Host, { key: '4447ff6878a1b0f38b533196466b33217f9499d4', "data-version": _package.version }, index.h("post-popovercontainer", { key: '918e2b8a662cdb64972cb0729b8b077e1bca5e0a', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '40b04b6c0d65cc3c10f6b8b037ec3ff24d1b907b', class: "popover-container" }, index.h("slot", { key: 'e836fdb9e29961f3b6c6c13261e8eef0f874cfb6' })))));
+        return (index.h(index.Host, { key: '80720b7f1d029833de466c84c9fe931460a5b9b1', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'b1e610ad0c0f33a09ac3fee5954567e957653e76', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: 'a9cd7f6efcd762b548acb7c8d3bf614ccdedd504', class: "popover-container" }, index.h("slot", { key: 'e278c4020b70c8bd5f6a1e4a3ac8cbaf37f2b786' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{post-menu-item-8c3090b1.js → post-menu-item-5c5c1aaf.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 
 const postMenuItemCss = ":host{display:block}";
 const PostMenuItemStyle0 = postMenuItemCss;
@@ -11,7 +11,7 @@ const PostMenuItem = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7984d6be0ae981f54618b4c0d7a80bfcc71f16a3', role: "menuitem", "data-version": _package.version }, index.h("slot", { key: '7fbb20f1586676b1c8f933e0f067144bbcca825f' })));
+        return (index.h(index.Host, { key: '48720f09bc2ab4a979d215f590dcb80e39422e46', role: "menuitem", "data-version": _package.version }, index.h("slot", { key: '5a0c1aeb2c96a02c2e4567d3e1e83fd6e3a3aace' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-menu-item.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postMenuItem = require('./post-menu-item-8c3090b1.js');
+const postMenuItem = require('./post-menu-item-5c5c1aaf.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 
 
 

package/dist/cjs/{post-menu-trigger-71449876.js → post-menu-trigger-02d128c4.js}

@@ -1,8 +1,9 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 const checkType = require('./check-type-64af82a9.js');
+const getRoot = require('./get-root-7a3498ef.js');
 
 const postMenuTriggerCss = ":host{display:inline-block}";
 const PostMenuTriggerStyle0 = postMenuTriggerCss;
@@ -32,7 +33,7 @@ const PostMenuTrigger = class {
         checkType.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() {
@@ -47,6 +48,7 @@ const PostMenuTrigger = class {
         }
     }
     componentDidLoad() {
+        this.root = getRoot.getRoot(this.host);
         this.validateControlFor();
         this.slottedButton = this.host.querySelector('button');
         if (this.slottedButton) {
@@ -61,7 +63,7 @@ const PostMenuTrigger = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ce2a30260fae6eecae5b2feb0538ac2ce66b989c', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: 'a69d7dc4a1a798332bd9881cedb216ef82d279ab' })));
+        return (index.h(index.Host, { key: '5c07c2a808f5048b870d77f1f65d84bc2007431f', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: 'ab779f01983e2c88f09707ab8b12eb326ac6946b' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-menu-trigger.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postMenuTrigger = require('./post-menu-trigger-71449876.js');
+const postMenuTrigger = require('./post-menu-trigger-02d128c4.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 require('./check-type-64af82a9.js');
+require('./get-root-7a3498ef.js');
 
 
 

package/dist/cjs/post-menu.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postMenu = require('./post-menu-54fa65d3.js');
+const postMenu = require('./post-menu-5a71a6fe.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 
 
 

package/dist/cjs/{post-popover-5f639e4f.js → post-popover-91a83e9d.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 const attributeObserver = require('./attribute-observer-10f08c04.js');
 
-const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.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}";
+const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.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}";
 const PostPopoverStyle0 = postPopoverCss;
 
 /**
@@ -95,7 +95,7 @@ const PostPopover = class {
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (index.h(index.Host, { key: '22964a2be347979d1ebaaec468edfd4b079776ff', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'a108ed03721a453ce73a850913d93b8bfaf83922', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '943f1a914ada58c3f8b085613b47ed4b7c55e591', class: "popover-container" }, index.h("div", { key: 'a6a8dec53c9190c48d1b3b217c979d78b2f32995', class: "popover-content" }, index.h("slot", { key: '555bc4537d6bd62b60186db9700588eb3ec38ac2' })), index.h("button", { key: 'db0826565312bba9bc48a88cd84636a903eeb94f', class: "btn-close", onClick: () => this.hide() }, index.h("span", { key: 'aef92ba6e586e02924a09d459e4d753ad18f72f7', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (index.h(index.Host, { key: 'e716f0b45da8a21c43afba019dbf84a87bc49fab', "data-version": _package.version }, index.h("post-popovercontainer", { key: '530ffbd07a0f2b2edc26db0c5667c9de372edf01', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '4d7420876786f835aef9decf92030651f5117f52', class: "popover-container" }, index.h("div", { key: 'e557e3e1f4566fc81b1255ef628e7c58d59fc596', class: "popover-content" }, index.h("slot", { key: 'ea5e3407ec41868471d388a02cb8a4ba32889d6c' })), index.h("button", { key: 'af21850867d713f7c5a825d4ac824b12ce40f3e7', class: "btn-close", onClick: () => this.hide() }, index.h("span", { key: 'b2f85d5efd0fd424448efa73ee9ad07c5bab2947', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-popover.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postPopover = require('./post-popover-5f639e4f.js');
+const postPopover = require('./post-popover-91a83e9d.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 require('./attribute-observer-10f08c04.js');
 
 

package/dist/cjs/{post-rating-3d166fed.js → post-rating-57fcf949.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 
 const postRatingCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 -0.25rem;border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:2px;outline:2px solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
 const PostRatingStyle0 = postRatingCss;
@@ -73,7 +73,7 @@ const PostRating = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0202a629d68bc85d00fb3ccae63073938fb174d3', "data-version": _package.version }, index.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) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: 'd5bce841329555bdb71e7f861b7d1f74d93dbcbc', "data-version": _package.version }, index.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) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/dist/cjs/post-rating.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postRating = require('./post-rating-3d166fed.js');
+const postRating = require('./post-rating-57fcf949.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 
 
 

package/dist/cjs/post-tab-header-ce56b760.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-bc44930e.js');
+const checkNonEmpty = require('./check-non-empty-eeaa8f77.js');
+
+const postTabHeaderCss = ".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)}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */: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}";
+const PostTabHeaderStyle0 = postTabHeaderCss;
+
+const PostTabHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabId = undefined;
+        this.panel = undefined;
+    }
+    validateFor(newValue) {
+        checkNonEmpty.checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
+    }
+    render() {
+        return (index.h(index.Host, { key: '4ca8efb0e3a6a429442be5406eb43f9cd2406b49', id: this.tabId, role: "tab", "data-version": _package.version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, index.h("slot", { key: '049d4c8378c42fc31b572d8b073fef523fbc6f37' })));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "panel": ["validateFor"]
+    }; }
+};
+PostTabHeader.style = PostTabHeaderStyle0;
+
+exports.PostTabHeader = PostTabHeader;

package/dist/cjs/post-tab-header.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabHeader = require('./post-tab-header-03b20f24.js');
+const postTabHeader = require('./post-tab-header-ce56b760.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 require('./check-non-empty-eeaa8f77.js');
 require('./constants-238701d3.js');
 

package/dist/cjs/{post-tab-panel-e5685f3d.js → post-tab-panel-70e49260.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
@@ -17,7 +17,7 @@ const PostTabPanel = class {
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (index.h(index.Host, { key: '9018d11d85d1ce0b83e74987f8fb96eb1b873a40', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '45e2214fbeb5d4c2b4e5e35eb5ad74d99033a0a3' })));
+        return (index.h(index.Host, { key: '8116daf192361e9c9333c1a94afa4d9eb5cce3d1', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '646fc0fa564f76c6f2a1f706cc753f11306ca231' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tab-panel.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabPanel = require('./post-tab-panel-e5685f3d.js');
+const postTabPanel = require('./post-tab-panel-70e49260.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 
 
 

package/dist/cjs/{post-tabs-e871c911.js → post-tabs-39262e55.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 const fade = require('./fade-35a3633a.js');
 
 /**
@@ -25,7 +25,7 @@ const customOnReady = (callback) => {
     return setTimeout(callback);
 };
 
-const postTabsCss = ".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}";
+const postTabsCss = ".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}";
 const PostTabsStyle0 = postTabsCss;
 
 const PostTabs = class {
@@ -164,7 +164,7 @@ const PostTabs = class {
         nextTab.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '3c9d7351fa09531238892f0bd05447379f46fdb4', "data-version": _package.version }, index.h("div", { key: '1eff106f6324302155e809a58cd3367bb7bdbd76', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: 'fc5917d92b577f99fb19fa80ecd1a863ffeaa4d8', class: "tabs", role: "tablist" }, index.h("slot", { key: 'af35884271ca9d75dbbd113e05fd052c4691c53e', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: '4908774e2306e432af65b94a9dd5e1d257569652', class: "tab-content", part: "content" }, index.h("slot", { key: 'c0eb44e39b0cffe57c42c51dd74e605e74241f70', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (index.h(index.Host, { key: '2a7fe6d86dc18dcebaa25b5466ffc88de96114e6', "data-version": _package.version }, index.h("div", { key: '71940a2be5c36f591f0948c7f8dedbb26e98736d', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: 'bd9fa6ba6e2bd037a0a09365d4906b7288f929c6', class: "tabs", role: "tablist" }, index.h("slot", { key: '72a369206b0f81e88ff9741a69e6b58ba3239f5e', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: '9c544b7bae6dc2abb3e297015216c88872a78b8e', class: "tab-content", part: "content" }, index.h("slot", { key: '2f2e274ecb2bbe19c8f016b8d7a1f7a7038d6646', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tabs.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabs = require('./post-tabs-e871c911.js');
+const postTabs = require('./post-tabs-39262e55.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 require('./fade-35a3633a.js');
 
 

package/dist/cjs/{post-tag-62f31d0e.js → post-tag-b6bc5785.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-53892d3d.js');
+const _package = require('./package-bc44930e.js');
 
 const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:.25rem;padding:0 .5rem;max-width:100%;background-color:var(--post-tag-bg);border:1px solid rgba(0,0,0,0);border-radius:.25rem;font-size:1rem;line-height:1.875rem;white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:1.5rem}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:var(--post-contrast-color)}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
 const PostTagStyle0 = postTagCss;
@@ -34,7 +34,7 @@ const PostTag = class {
         this.setClasses();
     }
     render() {
-        return (index.h(index.Host, { key: '01f369b7c6803f710fb0b5eae652d6d1beb340ed', "data-version": _package.version }, index.h("div", { key: 'bba40e4deaa43e64c9bc32c2ad4a3e3515bdf8dd', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '9addb054f9555c9a97d8825a148958b2e2b863a7', class: "tag-text" }, index.h("slot", { key: '315cf79690fa489c61edd6ce6b304b94a3866b8c' })))));
+        return (index.h(index.Host, { key: '52768516080d294eaf20034e18e6a776149fa97e', "data-version": _package.version }, index.h("div", { key: 'f342d20bfccfdf650f5c6e943065f090a13fd94c', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '5286cb07cbfa5b20e0dfbbd4847a3dda49a19278', class: "tag-text" }, index.h("slot", { key: '6215a61b4e10d6c0274019f183ef90e46d282114' })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tag.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTag = require('./post-tag-62f31d0e.js');
+const postTag = require('./post-tag-b6bc5785.js');
 require('./index-e1f32cce.js');
-require('./package-53892d3d.js');
+require('./package-bc44930e.js');
 
 
 

package/dist/cjs/post-togglebutton-2f39442e.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-bc44930e.js');
+
+const postTogglebuttonCss = ":host{cursor:pointer}";
+const PostTogglebuttonStyle0 = postTogglebuttonCss;
+
+const PostTogglebutton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.handleClick = () => {
+            this.toggled = !this.toggled;
+        };
+        this.handleKeydown = (event) => {
+            if (event.key === 'Enter') {
+                this.toggled = !this.toggled;
+            }
+        };
+        this.toggled = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '253ca4026764e8d2c0979341a617fffb6d0d2e8e', slot: "post-togglebutton", tabindex: "0", "data-version": _package.version, role: "button", "aria-pressed": this.toggled.toString(), onClick: this.handleClick, onKeyDown: this.handleKeydown }, index.h("span", { key: 'e8c7c7492986993ca1ec6c38743555030b068dbb', hidden: this.toggled }, index.h("slot", { key: 'd012a64cf1da8acc149ad4c5929cfe3fa31619a3', name: "untoggled" })), index.h("span", { key: '6603b12b05870348e979a9283ac4a17f15a217c6', hidden: !this.toggled }, index.h("slot", { key: '1306cb988d645ca297fb32d8b743ae65abfe644b', name: "toggled" }))));
+    }
+};
+PostTogglebutton.style = PostTogglebuttonStyle0;
+
+exports.PostTogglebutton = PostTogglebutton;

package/dist/cjs/post-togglebutton.cjs.entry.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const postTogglebutton = require('./post-togglebutton-2f39442e.js');
+require('./index-e1f32cce.js');
+require('./package-bc44930e.js');
+
+
+
+exports.post_togglebutton = postTogglebutton.PostTogglebutton;