@swisspost/design-system-components 9.0.0-next.6 → 9.0.0-next.8

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

@@ -49,7 +49,7 @@ export class PostCollapsible {
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'a24e6d781135a558657a23355eb2da4d2ba71066', "data-version": version }, h("slot", { key: 'de655cf8f55f41532447bc0ac3c7a4aa6a807dae' })));
+        return (h(Host, { key: '5b3622ee79d02725071a6d7a2d9f72d0d5305619', "data-version": version }, h("slot", { key: '9db4642e4e5b4867c7880964070ee5d774455fd2' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }

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: 'a09985740ff01e4f38e7bbe5e0b9012d77e7cba2', version: version }, h("div", { key: 'c612b90e757d916036bee002d7bba8abfeb19073', class: "global-header" }, h("div", { key: 'd11c51f756d1c7a8c0b4f3b9625cfbe8cae88435', class: "global-sub" }, h("div", { key: '43fb63bfe0350ffca0e44fd611bb6bbe6c3eef0c', class: "logo" }, h("slot", { key: '8d90d7f20b0fd6a7cbc93e5dd95ad8200c027822', name: "post-logo" }))), h("div", { key: 'b1bc83b4fcb3a0af6ffd99976af4acf454b3d29d', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'bbe38f3e0d070bfd84e1656e7dd631816df0101c', name: "meta-navigation" }), h("slot", { key: 'b1483eea11ecdc9cddf122077cf0746d88f69239', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '785f557f30bffc5cd282a0505e9ffc7e3e6e1029', name: "post-language-switch" }), h("div", { key: 'f088ddb3df417929525b22a09fa3be113042e48f', onClick: () => this.handleMobileMenuToggle(), class: "mobile-toggle" }, h("slot", { key: 'de65884a443290e057ed911289818d5a323f5a9c', name: "post-togglebutton" })))), h("div", { key: '56ebdec46003a6ead4f3710dc9c0f60e9a86ed8d', class: "title-header d-flex space-between align-center" }, h("slot", { key: '8e61e4711ea8018e51fd11c5b5faa30a1ad9445c', name: "title" }), h("div", { key: '4d762d1f4d3f45470d52af167c7f4a71651e7970', class: "global-sub" }, h("slot", { key: 'c8c5b73b1fa0e665a7133ae8db0212ef8948ba29', name: "local-controls" }), h("slot", { key: '212640155af85dfab34182ab236bfe72456e77b1' }))), h("div", { key: 'c4004d443fd546fac8a2651482725fae99c2db6c', class: mainNavClasses.join(' ') }, h("slot", { key: '783787f85d25d9e42d96213ae77f6c689f872b70', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: '04cfd7d09d03ab85ac9c12f9c3d6cb31fbb65fc2', name: "meta-navigation" })), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: '117e76f18fdc93493115428e1cd0d6a119c7a652', 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: '1a04eea6f1039329937a9f58d64778c272088018', "data-version": version }, h("svg", { key: '843d95a54a58f839bfa1031d2aa834c70fbc6f9e', style: this.getStyles() }, h("use", { key: 'e93c6a6fd50ebd4757c92c1ee02f9c8cd65a65b7', 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: '0a80e062fecb20c7277b89f49a4d774fda80a18e', "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

@@ -25,7 +25,7 @@ export class PostList {
         }
     }
     render() {
-        return (h(Host, { key: '6c8341a8a31aff079726fb3414cd83017d297ed2', "data-version": version }, h("div", { key: '90a24e049565179ae20becefac3a4edf43b9c975', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '81489d927ad208988da2282b129eec660e2f0bd0' })), h("div", { key: '3aa8ec588c4063d396e32a20097714495421609b', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '0ae0aeb3e0330582d9025a36d37319ec71b0e7b1', name: "post-list-item" }))));
+        return (h(Host, { key: '017f05c43fa95bb93c856bbeddd5d26cbc2f4cfa', "data-version": version }, h("div", { key: '71fd7d32c761cecf7b4d5d5f39cedb3bf668a0cb', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: 'fe0e03d5d25f6a975e04be00549facae49a0970b' })), h("div", { key: 'bb717e4338396c86fa28dbf8236f5f185823f9be', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '7fd25cab433f5fbbafaa7ca01f42774823cbf579', 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: 'bbf12424f2997b7d2e7cd9e272def0bf2838f94f', role: "listitem" }, h("slot", { key: '2ce4e71879485f16ad90dfddbd1b79512107bdb0' })));
     }
     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: 'ec5f82baaa08c75a03808a6cda7a9971152a54d6', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: 'ce6aeff4dfab0612376e4c6aa14c74c438213b5d', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: 'fa6f8ecaf3c3a4a8e60a8c8e2171dbd25d585ede', class: "description" }, h("slot", { key: '2dcff76129e8e054e58244b2aa77a5b51e059b6b', onSlotchange: () => this.checkDescription() })), h("svg", { key: '468282e3c21fb6cfc97fccee64298abe43542da5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'd3f4e0a6a7372991ccef5be9fad206cab2f553e7', id: "Logo" }, h("rect", { key: '3f17ddd240131ce23faf1e73a76ca4f702b029d7', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '1b714023d9e587a57571fd86a9515701ec77f993', 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: 'b4064875cbad1263ac2278613fdf5db8d1697c2a', 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: '7179d087e93ab9e14dc21e16b52beaf965c53cd3', slot: "post-mainnavigation" }, h("div", { key: '2aede886c29972bf1dfebbe4513c4acf2e47c6ea', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '4697ec520be78fccee832a358b349f68081b2f54', name: "back-button" })), h("nav", { key: '5bae57025152af07b9d68a19a07b61d0149d31dc', class: "main-navigation" }, h("slot", { key: 'e2a73a4b814a39a7cb1f7733f87c3c588f484006' }))));
     }
     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: '9b8e17f4120259f55ed3dbce4780559cb8876540', slot: "post-mainnavigation" }, h("post-popovercontainer", { key: 'ac48d1fffbcdff5aa20d9f2f6fed9beb4dd3be23', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: 'af02d9fd35973b6d889b639f1d856dd3d9921ae1', class: "megadropdown" }, h("div", { key: '445aa9b1a04e63c0d2b17466c610a30662f3db0e', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '8d8f4cad3d5860fdfc1c615e7122ab5dd2ca5ed3', name: "back-button" })), h("slot", { key: 'c9ba8c0941f86fd29a44153e186cd679bcd678f5' })))));
     }
     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: 'd139b405fe28c7334c01eec4846a6f8b5bf1e261', slot: "post-megadropdown-trigger" }, h("button", { key: 'd3aee53488359a79764974d440d7a058d5d96873', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, h("slot", { key: '7012055defbb7c8058481db5c4129919847010c6' }))));
     }
     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: 'c3fa319c92cc36b562590df18b6585b1bc18f133', "data-version": version }, h("post-popovercontainer", { key: '7d297b7598fecb01f46c3f1b999b6017ee878d06', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '3ae32950348ae8910094cddd34afef060ca517f1', class: "popover-container" }, h("slot", { key: '7faa98f2f4c50ef1ac424387a6c3890dcf09adce' })))));
     }
     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: '8e20fdee0faff826319440bed6ec7be0c56e6d06', role: "menuitem", "data-version": version }, h("slot", { key: '69e2be9dec334ade8e84ccb268c7d4955dd2fefb' })));
     }
     static get is() { return "post-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,7 +55,7 @@ export class PostMenuTrigger {
         }
     }
     render() {
-        return (h(Host, { key: '5601a98503141e6297683f6a384f81d8c270a1d1', "data-version": version, "tab-index": "-1" }, h("slot", { key: '79d9986eb5189f7389e1c317fac09b1644acfa7f' })));
+        return (h(Host, { key: 'd6b5619d0b4035887eaffdcc3c153eb0a5fe4ceb', "data-version": version, "tab-index": "-1" }, h("slot", { key: '5d87c80dae6188470b10207993822d92adc714b1' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {

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: 'e73d0edf5c6992db8c8c6e162a9c50e95a335d79', "data-version": version }, h("post-popovercontainer", { key: '206cbec19db4af9772899c1ec4cc870c362f590e', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '8d744d6784d892313b137ee03dd9967ea4b77184', class: "popover-container" }, h("div", { key: 'aa78aee830e853945f0049d0708710f8fad90d36', class: "popover-content" }, h("slot", { key: '50a5aeae0c0db36e5c0aa2495f3d95474bed13fc' })), h("button", { key: '4389f79f9e1b2a0977a0ecb177b385f049cc8484', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'e302e17cef666fc280a547ebc3caeedacdc544b0', 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: 'b8be8594adfd503c47f85872508d5bbd3473cc5a', "data-version": version }, this.arrow && (h("span", { key: 'f046737966eb3b801af1e888555178543ea015eb', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '414055000891719b74c2c449fec2c87a60b62047' })));
+            } })), h("slot", { key: '5d478472a83442d47e4f16ff8121782c8e6a524b' })));
     }
     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: '98459f7f5e2406577857571fb6ececd8198a4cdb', "data-version": version }, h("div", { key: '2880d40e1623e49c8cae64b70e0057713f5f5cfd', 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.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: 'af78e7b118f13ce64c76947af5dc3a6ed5ed09a0', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '99a8257992b974f9c3503eb1f67652c50bbf0671' })));
     }
     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: 'b4d8a6dac8662fc442ba4b75c7f89bb630b1a0ad', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '3253ed0b5efe32b0c49fc97e46de31ee3dbbd813' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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: '8e6ef1f64dd41d18cbb87d23ae27ed198dba420f', "data-version": version }, h("div", { key: '3e08dbfa502935737040e54f71c5cdba55838ac5', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '57c2c50ec3ca3ee38a69f3c46f0bd6cfb3649178', class: "tabs", role: "tablist" }, h("slot", { key: 'c7ce48bec67f02abf47fa2d152a786f2f7f912fe', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'daf2d7e9d51ad3831a68ed8cd6498d9042bc017f', class: "tab-content", part: "content" }, h("slot", { key: 'ee2c3619a2c262a416b34b65843f10e4baa62e38', 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: 'af54c80202bf8ff05e16e9cbd872b40159d5bc20', "data-version": version }, h("div", { key: '120bdeb4cf8c7031d2d168e11a060f05c4694ad7', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'f637f3f303724c0f676149d7f634981b5f2ee908', class: "tag-text" }, h("slot", { key: 'fe95dcc9967ccb654dedead3701f909bb61d9674' })))));
+        return (h(Host, { key: 'e2d95e10853f66d7b05768b80a0350e0bc05051d', "data-version": version }, h("div", { key: '72bac44cca9c4197e9042e6a4896f235d057a5c9', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '1b54b8a89320306aa09fe1e50dffd453b44fc587', class: "tag-text" }, h("slot", { key: '52f4f5b2d62f8ae245c7b472cdbc9f5202b554c1' })))));
     }
     static get is() { return "post-tag"; }
     static get encapsulation() { return "shadow"; }

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: '82fc4126d97650255d1d5fd041208b3d11cf0ded', slot: "post-togglebutton", tabindex: "0", "data-version": version, role: "button", "aria-pressed": this.toggled.toString(), onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("span", { key: '0364e8b63cc2c7955282f62533683c3627aa6626', hidden: this.toggled }, h("slot", { key: '11ccb62855497ddf395276e7f7e88a8409fa36e4', name: "untoggled" })), h("span", { key: '463f4571ceecc51063a4d4495d22063b6b75d0df', hidden: !this.toggled }, h("slot", { key: '7d41e35a64deefd22087524bc57530603aae18fa', 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"
+            }
+        };
+    }
+}

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

@@ -3,7 +3,7 @@ import { version } from "../../../../package";
 import isFocusable from "ally.js/is/focusable";
 import "long-press-event";
 import { getAttributeObserver } from "../../utils/attribute-observer";
-import { checkEmptyOrType, timeout } from "../../utils/index";
+import { checkEmptyOrType } from "../../utils/index";
 const OPEN_DELAY = 650; // matches HTML title delay
 /**
  * @slot default - Slot for the content of the tooltip.
@@ -15,6 +15,8 @@ let tooltipInstances = 0;
 let hideTooltipTimeout = null;
 const tooltipTargetAttribute = 'data-tooltip-target';
 const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
+let globalCurrentTarget;
+let tooltipTimeout = null;
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
  * async will still work without the need to set listeners on the element itself
@@ -27,8 +29,11 @@ const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
  */
 const globalInterestHandler = (e) => {
     const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    if (!targetElement || !('getAttribute' in targetElement))
+    globalCurrentTarget = targetElement;
+    if (!targetElement || !('getAttribute' in targetElement)) {
+        clearTimeout(tooltipTimeout);
         return;
+    }
     const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
@@ -152,18 +157,29 @@ export class PostTooltip {
      * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
      */
     async show(target, triggeredByFocus = false) {
-        if (this.delayed)
-            await timeout(OPEN_DELAY);
-        // Determine if the tooltip was opened by a focus event
-        this.wasOpenedByFocus = triggeredByFocus;
-        // Disable pointer events if triggered by focus, otherwise enable them
-        if (this.wasOpenedByFocus) {
-            this.host.style.pointerEvents = 'none';
+        const showTooltip = () => {
+            // If focus or pointer event is not on the button anymore, don't show the tooltip
+            if (globalCurrentTarget !== target)
+                return;
+            // Determine if the tooltip was opened by a focus event
+            this.wasOpenedByFocus = triggeredByFocus;
+            // Disable pointer events if triggered by focus, otherwise enable them
+            if (this.wasOpenedByFocus) {
+                this.host.style.pointerEvents = 'none';
+            }
+            else {
+                this.host.style.pointerEvents = 'auto';
+            }
+            this.popoverRef.show(target);
+        };
+        if (this.delayed) {
+            tooltipTimeout = setTimeout(() => {
+                showTooltip();
+            }, OPEN_DELAY);
         }
         else {
-            this.host.style.pointerEvents = 'auto';
+            showTooltip();
         }
-        this.popoverRef.show(target);
     }
     /**
      * Programmatically hide this tooltip
@@ -198,7 +214,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '8e2bd1f11a44a0d39ad797f12b880338d59ea006', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'ff4fdbf72ca4b95d5f4e925fedbfbcf7e281410f', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '770a98cff11b963ec37559683a27a216250e8bde' }))));
+        return (h(Host, { key: 'accf9ab04bcac0d6ed46818dc00e9110f936e593', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'e31610624b6833e78de7cb6ec52fb3fc5ca02d49', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '206925925cc51d3b0eb4f2c0b1e8ca65ab3fd8c4' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -1,6 +1,7 @@
 // Export every single component so it gets included in the dist output
 export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
+export { PostBackToTop } from './components/post-back-to-top/post-back-to-top';
 export { PostBanner } from './components/post-banner/post-banner';
 export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
 export { PostAvatar } from './components/post-avatar/post-avatar';
@@ -22,6 +23,7 @@ export { PostTabHeader } from './components/post-tab-header/post-tab-header';
 export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
 export { PostTooltip } from './components/post-tooltip/post-tooltip';
 export { PostTag } from './components/post-tag/post-tag';
+export { PostTogglebutton } from './components/post-togglebutton/post-togglebutton';
 export { PostList } from './components/post-list/post-list';
 export { PostListItem } from './components/post-list-item/post-list-item';
 export { PostHeader } from './components/post-header/post-header';

package/dist/components/index.js

@@ -1,6 +1,7 @@
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { P as PostAccordion } from './post-accordion2.js';
 export { P as PostAccordionItem } from './post-accordion-item2.js';
+export { P as PostBackToTop } from './post-back-to-top2.js';
 export { P as PostBanner } from './post-banner2.js';
 export { P as PostBreadcrumbItem } from './post-breadcrumb-item2.js';
 export { P as PostAvatar } from './post-avatar2.js';
@@ -22,6 +23,7 @@ export { P as PostTabHeader } from './post-tab-header2.js';
 export { P as PostTabPanel } from './post-tab-panel2.js';
 export { P as PostTooltip } from './post-tooltip2.js';
 export { P as PostTag } from './post-tag2.js';
+export { P as PostTogglebutton } from './post-togglebutton2.js';
 export { P as PostList } from './post-list2.js';
 export { P as PostListItem } from './post-list-item2.js';
 export { P as PostHeader } from './post-header2.js';

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "9.0.0-next.6";
+const version = "9.0.0-next.8";
 
 export { version as v };