@swisspost/design-system-components 10.0.0-next.75 → 10.0.0

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

@@ -63,7 +63,7 @@ export class PostFooter {
         return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("h3", null, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: '4ad289dc83c48a62c42decc3d22ef21d91a75a45', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '8d1e75c31949f7f779282b37fde3408554d3da20' }, h("h2", { key: '23aec94a2c98d453c654caad2a548f0c92bf2bbf', class: "visually-hidden" }, this.textFooter), h("div", { key: '9d2673211c6ea2f1f7a81b230b70ea37e1170b49', class: "prefooter" }, h("div", { key: 'b9f6926e3d8715306badc6081b213a734449e360', class: "footer-container" }, h("slot", { key: 'c03ddbd53a0237e30fd70e5ca9efb65d0338a3f2', name: "prefooter" }))), h("div", { key: 'b0cbb8eb866e48938b952ef6a4e834375da41451', class: "footer-main" }, h("div", { key: 'fd4a20fae58bada639828b93cbaae6547088763b', class: "footer-container" }, h("div", { key: '4f93c304cada9d4c4f4923dc01e97a63ec78b574', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '5643a42c547f95deb85b82a46f0862dcdc2ef87a', class: "footer-column" }, h("div", { key: '3825bdc8e71af6a779eda7c1db9b1a0627955d6a', class: "footer-socialmedia" }, h("slot", { key: '5ae0689ee5780ded9c9617edafa1f1890f380046', name: "socialmedia" })), h("div", { key: 'abb7753bea7d39bac02a61be369b5038b5cb157c', class: "footer-app" }, h("slot", { key: 'aa15e19ace09a0b26bab1506ecce666fabe09654', name: "app" }))), h("div", { key: 'd6d064e8e855b34d21dfd0162e4f8d751b917106', class: "footer-businesssectors" }, h("slot", { key: '1455c3077887833904a98768d28d79a3a171c018', name: "businesssectors" })), h("div", { key: 'a6fd59702e790cfcab916f2a64036e9039693f8c', class: "footer-meta" }, h("slot", { key: '1270316794dbd356636fd39b553cc7903a80cfc7', name: "meta" })), h("div", { key: '06790e21f0b72f047f656b96aebb6e76a54349c9', class: "footer-copyright" }, h("slot", { key: '5c1d43a9c3c6efb6b376bff3d9668a871ee69494', name: "copyright" })))))));
+        return (h(Host, { key: '87cf55de334d5e0f43bf466185d78c4786d49492', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '01820a64befabb4b96c731daaef91cada24b59dc' }, h("h2", { key: '1b7b0177206199fe9eb1a16877002718225c5b0f', class: "visually-hidden" }, this.textFooter), h("div", { key: '3252249313ad2ab7059d37ea62f3d0daefb64049', class: "prefooter" }, h("div", { key: 'b3e48c915c0589a6d48da769a23370bff625075d', class: "footer-container" }, h("slot", { key: 'c77d6704a11bb26f2b65824840409c5be1088360', name: "prefooter" }))), h("div", { key: 'c68e4b4ed01a70af29415eca329e026a0428c0be', class: "footer-main" }, h("div", { key: '7996bca4f2d84268dca0bbde8bc4df35eaaa7710', class: "footer-container" }, h("div", { key: '3300d3fbcdffa533f91393a076d04e3fd03ead21', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '03c147ac0aa74c63defdf3d8e8a73b11826f4130', class: "footer-column" }, h("div", { key: '3e90fd4ba3de91a5f93bf18b4ce35bc1fc2533d3', class: "footer-socialmedia" }, h("slot", { key: 'eb0cdffde42c3e3583526480a435ef4f43e85395', name: "socialmedia" })), h("div", { key: '2a861100a8e6421c246a6c1a1ba0270c35941789', class: "footer-app" }, h("slot", { key: 'fc851920dfe073739792ae575d4d7c991d3687a5', name: "app" }))), h("div", { key: '9f849af988b281c3951f5a59d350cba3145fb1fb', class: "footer-businesssectors" }, h("slot", { key: '49afff2a24d9b27afedf2b8a3702209725648ba4', name: "businesssectors" })), h("div", { key: 'e213b2b70acf362f6e5070d256f00a833c4ba09b', class: "footer-meta" }, h("slot", { key: '064b8f8c7b66f23186d9e18e4ae1768ff117eaa0', name: "meta" })), h("div", { key: 'f4ebcebe64a68b504840c7ed6e1e449def977956', class: "footer-copyright" }, h("slot", { key: 'e91e587a3c3babb8e350fbf540c892d2659b6c50', name: "copyright" })))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,8 @@ import { throttle } from "throttle-debounce";
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot global-nav-primary - Holds search button in the global header.
  * @slot global-nav-secondary - Holds an `<ul>` with meta navigation links.
- * @slot language-menu - Should be used with the `<post-language-switch>` component.
+ * @slot language-menu - Should be used with the `<post-language-menu>` component.
+ * @slot side-nav - Should be used with the `<post-side-navigation>` component.
  * @slot title - Holds the application title.
  * @slot main-nav - Has a default slot because it's only meant to be used in the `<post-header>`.
  * @slot audience - Holds the list of buttons to choose the audience.
@@ -310,10 +311,10 @@ export class PostHeader {
     render() {
         const onDesktop = Build.isServer || this.device === 'desktop';
         const onTabletAndMobile = Build.isServer || this.device !== 'desktop';
-        return (h(Host, { key: '66b52c71941f81f60413da798d4484139ce3e1b2', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '0eeb86259a8da253dd94f35d97ea3d8935945fe1' }, h("div", { key: '2c3e770e344798b99b06cf8aaa2fec697ab0c8f5', class: "global-header" }, h("div", { key: 'cef2ff68fd3a5e217277f43fba60a6b38e0f7b26', class: "section" }, h("div", { key: 'a559af58168882c6e57cabc67e0c9c40d6790f69', class: "logo" }, h("slot", { key: '7d4a539769bafa7c42496fd8032bdb5681f3ad10', name: "post-logo" })), h("div", { key: '37e8f7871cac7c23d1d87a5d4dc20dd7babd930e', class: "sliding-controls" }, onDesktop && (h("div", { key: 'a3e04608d2bccd1e939d5c4143d81d8c42837056', class: "audience" }, h("slot", { key: 'b04e2d60f129cb16dff9fcf2950eada8da0a6913', name: "audience" }))), h("slot", { key: '406ad5ed2914a4b11a9ad9b454eea763a90c758f', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
-            h("slot", { key: '0573f2d5327f1a6de11d40b2eddd972defa4b0e6', name: "global-nav-secondary" }),
-            h("slot", { key: '6a3c278831ada8550039400b8bdc5dc9bfa99937', name: "language-menu" }),
-        ], h("slot", { key: 'e5dd9372eab4644e614bc19a98ef10055abd6841', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: 'bf3a90beeb52d94e3ae722b1ae55c9342090b353', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: '9929c7119d4a87a3bb38e37b7113ccd236a26bd5' }, this.textMenu), h("post-icon", { key: '63247760e6b80d332c6c32d17f2e53c1402b810c', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: 'ce380892e5c3f2e68fc6187ea4c1bf0feb703a24', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: '1338029f597fb993dcd9b420cd98bea280f1fc3e', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: 'd14e65de2b78d22e0907d2656cc013ca1fff6458', class: "section" }, h("slot", { key: 'd7aed65dcb8f41003f59630480fbac305583ee1c', name: "title" }), this.hasTitle && h("slot", { key: '3805a85dfed19b326e9cdd05992303c781e8880b', name: "local-nav" }), onDesktop && h("slot", { key: 'abd3f8196bef4bbda2176d4bef3c3e0b8ea2d4a5', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: '55d3aa634eb1fb6165e25ebc1a8a9ecc4878ea1b', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+        return (h(Host, { key: '3a016b6739ecd18aa06908b9afad8687d4a712c1', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '7066f5c25151411f0278fd533b94f58c33639734' }, h("div", { key: '983c81fbf93d290ea922ef096cd3975dbe50f2cf', class: "global-header" }, h("div", { key: '544c383fdaa252e7830ad516817f76c078b5f470', class: "section" }, h("div", { key: 'c40d977c47523dd9e77189e6cdc6bd2244efd494', class: "logo" }, h("slot", { key: 'bbf8224f6175164fcfdbd2a3ff82e716e95f2625', name: "post-logo" })), h("div", { key: '12b86a5d0a1e699bea709843dcc1fc5c337c0f5f', class: "sliding-controls" }, onDesktop && (h("div", { key: 'e61e9dd6d8b71c2dc85585474cd8c706298134f7', class: "audience" }, h("slot", { key: 'cda29d61263c8db64871bbdd024082e7fe85e981', name: "audience" }))), h("slot", { key: '003dcc8c02571ae211ae5533bbf497294742b72d', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
+            h("slot", { key: 'b29102d85a0f072f0180fc31a98926e65e8f5787', name: "global-nav-secondary" }),
+            h("slot", { key: '5b026ad48db5d9cd1965d2fe3738a76643221ae9', name: "language-menu" }),
+        ], h("slot", { key: '689a024322afc2104e904692653aaa29a58f37cb', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: '3abdb29b313a7f87d7a5db4016dbca6c2db245ab', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: 'dbc87e156c0517bbb248a4a64722a390a80fce4f' }, this.textMenu), h("post-icon", { key: 'da8b9e64e10d99a2d6f9228fb2646c03392468e2', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '3122703175ff68eed014a025939a1021fcb39343', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: 'ce46d99d627c827a19b173a566c6000b708c8fc3', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: 'e11916e8674ca5154b3d2926f68f38760ae0a8ed', class: "section" }, h("slot", { key: '001da677105c63d3e491af0ce96d9cb44073addd', name: "side-nav" }), h("slot", { key: '1dd01962688baba6001bb1b0d2e6f12a1bd9ecee', name: "title" }), this.hasTitle && h("slot", { key: 'bf80e01e8559b857a86b6c4a47f890c75881c1ac', name: "local-nav" }), onDesktop && h("slot", { key: '9a23f56489ec5183a30db3556a2dc643681ab6d5', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: '730782e3a41cb80427ef97a1c452f0de588c62e2', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,7 @@ export class PostIcon {
         }).filter(([_key, value]) => value !== null));
     }
     render() {
-        return (h(Host, { key: '405ccfde4206c14f044575d0b23998d93a03ffb6', "data-version": version }, h("span", { key: 'ad70ccf63add4b881ef6096ae460e13fba09f508', style: this.getStyles() })));
+        return (h(Host, { key: 'ce81db69bf77d09a0a331bac48cdaede7ff3cb8e', "data-version": version }, h("span", { key: '211f999da845687289fd991421f4315a090a67ba', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,9 +31,11 @@ export class PostLanguageMenu {
     get description() {
         const activeLanguage = this.activeLang &&
             document.querySelector(`post-language-menu-item[code="${this.activeLang}"]`);
-        return activeLanguage
-            ? this.textCurrentLanguage.replaceAll('#name', activeLanguage.name)
-            : undefined;
+        if (!activeLanguage)
+            return undefined;
+        return this.textCurrentLanguage
+            .replaceAll('{name}', activeLanguage.name)
+            .replaceAll('#name', activeLanguage.name);
     }
     componentDidLoad() {
         // Initially set variants and active language
@@ -131,7 +133,7 @@ export class PostLanguageMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "An accessible description text for the list of language options. The `#name` placeholder is dynamic and will be replaced with the active language name."
+                    "text": "An accessible description text for the list of language options.\nThe `{name}` placeholder is dynamic and will be replaced with the active language name."
                 },
                 "getter": false,
                 "setter": false,
@@ -207,7 +209,7 @@ __decorate([
 ], PostLanguageMenu.prototype, "textChangeLanguage", void 0);
 __decorate([
     Required(),
-    Pattern(/#name\b/)
+    Pattern(/(\{name\}|#name)/)
 ], PostLanguageMenu.prototype, "textCurrentLanguage", void 0);
 __decorate([
     OneOf(SWITCH_VARIANTS)

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

@@ -55,7 +55,7 @@ export class PostLinkarea {
         }
     }
     render() {
-        return (h(Host, { key: 'fc3ddb24df6e4077e99e41f2f7df12ada959806b', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: 'ed83fbafaf9f4807d523c209f15310fd205a1b3f' })));
+        return (h(Host, { key: 'cb2563465ebe024e8e98539c27c7a8d7084229d3', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '68fc1468da418e4ed38e89cbf7ef932f819993dd' })));
     }
     static get is() { return "post-linkarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -129,7 +129,7 @@ export class PostListbox {
         this.updateSelection(event.detail);
     }
     render() {
-        return (h(Host, { key: 'fc476c9f1a3478871604e83c178efd5eb19ef003', "data-version": version, role: "listbox" }, h("post-popovercontainer", { key: '8242a45777bcab5d9afb37133726d85798f9b626', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, this.visibleOptions.length === 0 ? h("slot", { name: "blank-slate" }) : h("slot", null))));
+        return (h(Host, { key: '55f1f7335a5eed38163aa58a43f091f130a9a2ff', "data-version": version, role: "listbox" }, h("post-popovercontainer", { key: '303a6b38d8c5e5fae7b295dd0a58008c7b39a23f', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, this.visibleOptions.length === 0 ? h("slot", { name: "blank-slate" }) : h("slot", null))));
     }
     static get is() { return "post-listbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,9 +9,9 @@ export class PostListboxOption {
         this.highlighted = false;
     }
     render() {
-        return (h(Host, { key: 'c75cfbe7dd678bc79931c65981141df651370325', "data-version": version, role: "option", "aria-selected": `${this.selected}`, "data-active": this.highlighted ? 'true' : null,
+        return (h(Host, { key: 'ff0e773f8a89f9df3996a83cd2be6247c1ab5475', "data-version": version, role: "option", "aria-selected": `${this.selected}`, "data-active": this.highlighted ? 'true' : null,
             /* Prevent focus change from triggering onblur event in post-autocomplete */
-            onPointerDown: (e) => e.preventDefault(), onClick: () => this.postOptionSelected.emit(this.value), id: `post-listbox-option-${this.optionId}` }, h("span", { key: '52f70e122b62c91fed65b4a20174bd1b8b0f2738', class: "option-content" }, this.value, h("span", { key: '32ace82d3a5058b3a3edee55b8b46594c3fca38a', class: "option-description" }, h("slot", { key: '46aab0eeed22f99778924a5d97a92c7d95359939' }))), this.selected && h("post-icon", { key: 'ac64dc0afbec858119ad2e7077712a6dd40fa6c9', "aria-hidden": "true", name: "checkmark" })));
+            onPointerDown: (e) => e.preventDefault(), onClick: () => this.postOptionSelected.emit(this.value), id: `post-listbox-option-${this.optionId}` }, h("span", { key: 'cb43e8bec5f262ae25ddfdcae1b7f9979bdd6858', class: "option-content" }, this.value, h("span", { key: '5b314c41073a357185613a04a07d2020e4eab300', class: "option-description" }, h("slot", { key: 'ac1ed1be98f9a348952c0169d7ec89f8aaa99474' }))), this.selected && h("post-icon", { key: '7691085df732c0c2c5db9824587d54047017adf5', "aria-hidden": "true", name: "checkmark" })));
     }
     static get is() { return "post-listbox-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,7 +26,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: '473c845bef6d123628bf52b7848475b50172e3c0', "data-version": version }, h(LogoTag, { key: '47503ff9c22b613c5041d51a48cfc158d0edebcd', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '52953139bad89e236fc922574a881b7f4b79aee5', class: "description" }, h("slot", { key: '554c681236c4d158d967f97754134af774ec791e', onSlotchange: () => this.checkDescription() })), h("svg", { key: '3d65f3a44c46f8ba3810d0cd3c344577fb43a61e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '03f88fbf5710da7f0bbccafdb95c4faa93e2636a', id: "Logo" }, h("rect", { key: '33f39db4fb799744d25fae33f0b6a921c331531a', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '93c248b53c7493a831d7b1ddf8b3e3d14d804779', 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: 'dbdfa4a5f215e578c9f9cfc65f0cfb5d26b02848', 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: '84ece8e71d7dec66aa634d9a8a37d6bf3197c1b6', "data-version": version }, h(LogoTag, { key: '1531c6e8f32d42e63f5482d2983f18e4c9a23b1a', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'd45d33329e30de0de9de56f2d588995a7f97d01e', class: "description" }, h("slot", { key: 'e8665c8d739dc2a2968bf1193c26ba1d1e731b38', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'bb3f534952e29e2e43816c5a5dd55541d05bee26', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '9ca05c263f6c9f41cc5406ccfd030a713ffe0254', id: "Logo" }, h("rect", { key: '30a59adc0eec11af2d90180da1f5a95b03175d21', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'b1cbe7c575d36cf26a1cc41c9124625c2d1e5ef1', 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: '398027f23c8c9a4cf2bc7f8d7c8aa4ec0466f0be', 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

@@ -129,7 +129,7 @@ export class PostMainnavigation {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (h(Host, { key: '057f526f5b0e931fcb8642e6fa034f441df43020', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: 'c8ce70f6cbeec58c77709c1736b013ffe09ead6f', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '8281914d3380920a5562b468e87c87ca196a4830', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '7720c24a70339ea1c984dedf2faba0de8a6cfc86', ref: el => (this.navbar = el), "aria-label": this.textMain }, h("slot", { key: '3812be77ea739aac2be90cf8e7ac9a7e32bf5fce' })), h("div", { key: 'eda43d3b2e1d8f916275773d9ef93d364e9c1948', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '914d94f91fe1764cf64e73fc22e4f7c5a0e08c2a', "aria-hidden": "true", name: "chevronright" }))));
+        return (h(Host, { key: '2e9f2361426298f620411b1d064e166992ba326e', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: '10103d153e37fd591c2ce062ef7455228adbf5b9', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '8bb9b82626d05c1fe8f4fd1bb9f8e6d6be59ad8a', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '6905afe8c2dfcf0f2411b45237b52d63f187d2c9', ref: el => (this.navbar = el), "aria-label": this.textMain }, h("slot", { key: '2db905e52b1604d9c6097734d055100a58625f09' })), h("div", { key: 'f8ec4f906f1c99fec2198bb350ac1735c2de8469', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: 'afed8c1778691ca5b849d78ee20d51a4b8c02fe6', "aria-hidden": "true", name: "chevronright" }))));
     }
     static get is() { return "post-mainnavigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{background-color:#f0efed;z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{background-color:#fafafa;z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{max-height:calc(100vh - var(--post-header-height) - 3rem);padding:3rem 2.5rem 2.5rem}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block:1.5rem}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);order:-1;width:fit-content;padding-inline:0}.back-button:not(:disabled):hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.back-button{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}.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(a){color:LinkText;border:unset}.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}
+*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{max-height:calc(100vh - var(--post-header-height) - 3rem);background-color:#f0efed;z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{background-color:#fafafa;z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{padding:3rem 2.5rem 2.5rem}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block-start:1.5rem}}@media screen and (max-width: 1023.98px){.section .megadropdown-content{padding-block-end:1.5rem}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);order:-1;width:fit-content;padding-inline:0}.back-button:not(:disabled):hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.back-button{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}.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(a){color:LinkText;border:unset}.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}

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

@@ -295,7 +295,7 @@ export class PostMegadropdown {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: '8c6cd70082c2cdd9c208ad1ef138a21463919547', version: version }, h("div", { key: 'ff9466a7e28e894f56c9ab22d3999f68366a4aee', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '13a7b44deceb6a83842d324b012f34adc6606de6', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: '78cfcb708ad60f12203bc34b58915665b4b5b3ef', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'e78eb79d9806d23fa75184f1ad9f2f7eef318297', class: "megadropdown-content" }, h("slot", { key: 'e7008833f9700059a189665a19371f52b7ab9ed6' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
+        return (h(Host, { key: 'e2f7cac1fd168c54334a7c2584ce07f387457c77', version: version }, h("div", { key: '5bd9e9d856c3038d30246e913b51348097507f21', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '13bf455331b1921f5e12fa0ebac27261bc608e89', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: '75985254f1217f0f6d138fa14aa6af228ee1d0f5', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: '2bb4219a62f7de1236f8208bdd01f22fd00dab00', class: "megadropdown-content" }, h("slot", { key: 'ad3c1b6e6ad5bc07e64f829a68fb933db1fc5016' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
     }
     static get is() { return "post-megadropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class PostMegadropdownTrigger {
         this.megadropdown.toggle();
     }
     render() {
-        return (h(Host, { key: '96f2859be8fab445dab5c62619537777db0bfa44', "data-version": version }, h("button", { key: '0ff54f82520a40978cac57af2adeb23beff3545d', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, h("span", { key: '327b760b66b35e0b4442bc950b202e73842b131e' }, h("span", { key: '265a6fb86a3bf12357ac58cc1887a32738b40710', innerHTML: this.slottedContent }), h("span", { key: '0ddcb317aed396d305b00d6e61a10b98f40ed78b', "aria-hidden": "true" }, h("slot", { key: '458df53ef32b64de8c4e6cb78263423ad59fa18b' }))), h("post-icon", { key: '2da566858b7ffa965da9cac2436dfd38a818eb47', name: "chevrondown" }))));
+        return (h(Host, { key: '40d8afcb6b0ec482c0a13f7b78493a66243e03a5', "data-version": version }, h("button", { key: '6c1362cd4e1af22d26cf9ae74af4092cd083360c', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, h("span", { key: '6bd7d94da2055c1c6fb933402f2478a3cee12cc7' }, h("span", { key: '8109bdcc23c4a0f8c0861b774a974dde75b464f3', innerHTML: this.slottedContent }), h("span", { key: 'edd54adde0d7af4eb9cf7796183d01705d217500', "aria-hidden": "true" }, h("slot", { key: 'dbcc08bb882273f1074dd8963a4b86f67deb0c0a' }))), h("post-icon", { key: '7437573a492181cc3e5ddd59ac3695dc94d43e09', name: "chevrondown" }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,7 +68,8 @@ export class PostMenu {
         this.host.removeEventListener('click', this.handleClick);
     }
     /**
-     * Toggles the menu visibility based on its current state.
+     * Toggles the menu visibility based on its current state,
+     * `target` is the HTML element the menu is anchored to.
      */
     async toggle(target) {
         if (this.popoverRef) {
@@ -79,9 +80,8 @@ export class PostMenu {
         }
     }
     /**
-     * Displays the popover menu, focusing the first menu item.
-     *
-     * @param target - The HTML element relative to which the popover menu should be displayed.
+     * Displays the popover menu, focusing the first menu item,
+     * `target` is the HTML element the menu is anchored to.
      */
     async show(target) {
         if (this.popoverRef) {
@@ -184,7 +184,7 @@ export class PostMenu {
         ]));
     }
     render() {
-        return (h(Host, { key: '8fcf0b2ede074a0a064b788d7db9b31edf1f7930', "data-version": version }, h("post-popovercontainer", { key: '0aef5d7f34e88c3d52e78580574d7b8eab815d2d', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'ec1c4084ecb167bf43cb01dd52ff71e73157527f', part: "post-menu" }, h("slot", { key: '998c1abaa7ee342ef73ad6462acde0230604e4e6', name: "header" }), h("slot", { key: 'ddf3d00d03077de2c5bd5629e811bdeaa975bd4a' })))));
+        return (h(Host, { key: '31142d851d591bc46a43f36b553b6c7abee90674', "data-version": version }, h("post-popovercontainer", { key: '6b4b2a04b25904115fe1c337e73e382a4e162259', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '1284650d5796455201d55e1ecad3507518c7c32c', part: "post-menu" }, h("slot", { key: 'b2dbd125a631c06a591e67c52fd61524bcf037ea', name: "header" }), h("slot", { key: '3b15ec3ad5a25e2e22b6e26e17d9d2d76e9f64fb' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -294,7 +294,7 @@ export class PostMenu {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggles the menu visibility based on its current state.",
+                    "text": "Toggles the menu visibility based on its current state,\n`target` is the HTML element the menu is anchored to.",
                     "tags": []
                 }
             },
@@ -304,7 +304,7 @@ export class PostMenu {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "- The HTML element relative to which the popover menu should be displayed."
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -319,11 +319,8 @@ export class PostMenu {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Displays the popover menu, focusing the first menu item.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target - The HTML element relative to which the popover menu should be displayed."
-                        }]
+                    "text": "Displays the popover menu, focusing the first menu item,\n`target` is the HTML element the menu is anchored to.",
+                    "tags": []
                 }
             },
             "hide": {

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

@@ -65,7 +65,7 @@ export class PostMenuTrigger {
         return null;
     }
     render() {
-        return (h(Host, { key: '3aa1f5576b030765aafe7cd1f4df773b27a91265', "data-version": version }, h("slot", { key: '3d2dbe578601244b1a65960e26a2da3f2a62ecbc' })));
+        return (h(Host, { key: '8f43fe80dd56550141481f157a06caf559494291', "data-version": version }, h("slot", { key: '1b5d220cff9894918aedc54b0585df75095dcb0e' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-number-input/post-number-input.js

@@ -73,6 +73,7 @@ export class PostNumberInput {
                 const stepFn = isIncrementing ? this.input.stepUp : this.input.stepDown;
                 stepFn.call(this.input);
             }
+            this.input.dispatchEvent(new Event('input', { bubbles: true }));
             this.updateStepButtonState();
         });
     }
@@ -88,10 +89,10 @@ export class PostNumberInput {
     }
     render() {
         const areButtonsShown = !!this.input;
-        return (h(Host, { key: '1de11525fae384024130cc17e51f551b1757c418', "data-version": version, class: {
+        return (h(Host, { key: '59cbe12c66b0eabbff15a3110ee847396df2d261', "data-version": version, class: {
                 'number-input-sm': this.small,
                 'disabled': this.isDisabled,
-            } }, areButtonsShown && (h("div", { key: '4a0f759a7f9b734ee938d21ccd84402063a69873', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, h("post-icon", { key: '73ad0f312ca606e856c5c33af3e06f9f9721c0ac', name: "minus" }))), h("div", { key: 'caacae681967a3a59772ad87add6dc47ef963418', class: "input-container" }, h("slot", { key: 'a08988105a441793d0181c1d6c9def6d3741f56c', onSlotchange: () => this.setupInput() })), areButtonsShown && (h("div", { key: '609462bfa8e21f245e44864ac815dc7e0ee37c63', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, h("post-icon", { key: '5da1e4f67d50dfa0bcb893fe8603da8f2532334c', name: "plus" })))));
+            } }, areButtonsShown && (h("div", { key: '43fca97c040104786ab528b04f3e0dd576f29025', "aria-hidden": "true", onPointerDown: () => this.step('down'), class: { 'step-button': true, 'disabled': this.isDecrementDisabled } }, h("post-icon", { key: '1b41c236beb802d98f60776827928335d00599c4', name: "minus" }))), h("div", { key: '8342d335e0a84f78514edac5052ffea081fb40c7', class: "input-container" }, h("slot", { key: 'd2f8eae0656faaab31358cd3582c873d4a491e73', onSlotchange: () => this.setupInput() })), areButtonsShown && (h("div", { key: '0055b317ed6ec64f2451640c436d169bb0b07626', "aria-hidden": "true", onPointerDown: () => this.step('up'), class: { 'step-button': true, 'disabled': this.isIncrementDisabled } }, h("post-icon", { key: 'dafe4a65f6d5d6ba4f54229c55506d5cf14fe126', name: "plus" })))));
     }
     static get is() { return "post-number-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,8 +30,8 @@ export class PostPopover {
         this.arrow = true;
     }
     /**
-     * Programmatically display the popover
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * Programmatically display the popover,
+     * `target` is the HTML element the menu is anchored to.
      */
     async show(target) {
         await this.popoverRef.show(target);
@@ -44,9 +44,8 @@ export class PostPopover {
         this.popoverRef.hide();
     }
     /**
-     * Toggle popover display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
-     * @param force Pass true to always show or false to always hide
+     * Toggle popover display,
+     * `target` is the HTML element the menu is anchored to.
      */
     async toggle(target, force) {
         const isOpen = await this.popoverRef.toggle(target, force);
@@ -62,7 +61,7 @@ export class PostPopover {
         }
     }
     render() {
-        return (h(Host, { key: 'f48f602235071a8621157c99aa86076e8268b5b4', "data-version": version }, h("post-popovercontainer", { key: 'f0be96900bd0e16f2ee8f7937cfa533f510dbd07', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '716b83cad71dbb09dde75c00aa4c8628d7903315', class: "popover-container" }, h("div", { key: '4a15c86977488ba68796ed16175c72ef9ea16a7b', class: "popover-content" }, h("slot", { key: 'afd56e2077ed319e1bfbdaabfc8e19395f4f3959' })), h("post-closebutton", { key: 'd62b6940c68872d8520e4a69c7411479b9698315', onClick: () => this.hide() }, this.textClose)))));
+        return (h(Host, { key: 'f24329a264569794e7108875eda111a1456c5b47', "data-version": version }, h("post-popovercontainer", { key: 'ae8e9498e59de8a515f5bd11ecf79a2be9a513d1', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '76e4e49d302159db19c8e83a7ece60945f003da5', class: "popover-container" }, h("div", { key: '3fb7c1ca533e54b4960bd5d7c54535b0097831d8', class: "popover-content" }, h("slot", { key: '5bdf6a0a75d0c433f88afe0a6e9c6f298bbb64a7' })), h("post-closebutton", { key: '26d7569bb60cdb1aa5479260738f33cf65737df9', onClick: () => this.hide() }, this.textClose)))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -154,7 +153,7 @@ export class PostPopover {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -169,11 +168,8 @@ export class PostPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically display the popover",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
-                        }]
+                    "text": "Programmatically display the popover,\n`target` is the HTML element the menu is anchored to.",
+                    "tags": []
                 }
             },
             "hide": {
@@ -199,11 +195,11 @@ export class PostPopover {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "docs": ""
                         }, {
                             "name": "force",
                             "type": "boolean",
-                            "docs": "Pass true to always show or false to always hide"
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -218,14 +214,8 @@ export class PostPopover {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggle popover display",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
-                        }, {
-                            "name": "param",
-                            "text": "force Pass true to always show or false to always hide"
-                        }]
+                    "text": "Toggle popover display,\n`target` is the HTML element the menu is anchored to.",
+                    "tags": []
                 }
             }
         };

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

@@ -107,7 +107,7 @@ export class PostPopoverTrigger {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: '999ec824514eb6e340fd607ce03d82c76354e102', "data-version": version }, h("slot", { key: '3429ab6e44441c2660c14c40436682b5ac49a1b6', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: '009495ba354321f2b0162c4a0c4fcb1e165074e7', "data-version": version }, h("slot", { key: 'f0e5ef7851b4bc9916382b0910d9500db52668d4', onSlotchange: () => this.setupTrigger() })));
     }
     static get is() { return "post-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,10 +72,10 @@ export class PostPopovercontainer {
     }
     /**
      * Programmatically display the popovercontainer
-     * @param target A focusable element inside the trigger component that controls the popover
+     * @param target The element that invokes the popover and to which it is visually anchored.
      */
     async show(target) {
-        if (this.toggleTimeoutId)
+        if (this.toggleTimeoutId || !target)
             return;
         this.eventTarget = target;
         this.calculatePosition();
@@ -93,10 +93,14 @@ export class PostPopovercontainer {
     }
     /**
      * Toggle popovercontainer display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * @param target The element that invokes the popover and to which it is visually anchored.
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
+        const isOpen = this.host.matches(':where(:popover-open, .popover-open)');
+        const willOpen = force === true || (force === undefined && !isOpen);
+        if (willOpen && !target)
+            return isOpen;
         this.eventTarget = target;
         // Prevent instant double toggle
         if (!this.toggleTimeoutId) {
@@ -344,9 +348,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: '4fc0f306903c914a632d6ee72d9aaa69f9b60140', "data-version": version, popover: "auto" }, h("div", { key: 'd411b6f9dcb622cc1dfc829c19f69c73e9ad57d6', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: 'bf3e926a44c33b1aa7306be289f695e4b0007370', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
+        return (h(Host, { key: 'be9f32a35f247f5b2cb54599b96e715ce1a5a1f1', "data-version": version, popover: "auto" }, h("div", { key: 'ad2616c15dfec83e1e53ad14cb145aee2d625c9a', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '293ba9d1ba2a7b57297cd4aa716ba1369b2f8988', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("span", { key: '1c8256005b2fda27460c961ec6eea3f76075af20', part: "post-popovercontainer-border-mask" }), h("slot", { key: '0463879c1a444bcef8d6e6e48fe036ab764cef73' }))));
+            } })), h("span", { key: '7b9d47b53a4d4a672490eccdc88a7eb0552b5574', part: "post-popovercontainer-border-mask" }), h("slot", { key: '4b4249d6ebe1c247634bbb76b08ec01e73dc7d4b' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get encapsulation() { return "shadow"; }
@@ -560,7 +564,7 @@ export class PostPopovercontainer {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the trigger component that controls the popover"
+                            "docs": "The element that invokes the popover and to which it is visually anchored."
                         }],
                     "references": {
                         "Promise": {
@@ -578,7 +582,7 @@ export class PostPopovercontainer {
                     "text": "Programmatically display the popovercontainer",
                     "tags": [{
                             "name": "param",
-                            "text": "target A focusable element inside the trigger component that controls the popover"
+                            "text": "target The element that invokes the popover and to which it is visually anchored."
                         }]
                 }
             },
@@ -605,7 +609,7 @@ export class PostPopovercontainer {
                     "parameters": [{
                             "name": "target",
                             "type": "HTMLElement",
-                            "docs": "A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "docs": "The element that invokes the popover and to which it is visually anchored."
                         }, {
                             "name": "force",
                             "type": "boolean",
@@ -627,7 +631,7 @@ export class PostPopovercontainer {
                     "text": "Toggle popovercontainer display",
                     "tags": [{
                             "name": "param",
-                            "text": "target A focusable element inside the <post-popover-trigger> component that controls the popover"
+                            "text": "target The element that invokes the popover and to which it is visually anchored."
                         }, {
                             "name": "param",
                             "text": "force Pass true to always show or false to always hide"

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

@@ -43,7 +43,7 @@ export class PostProgressbar {
         const max = this.getEffectiveMax();
         const value = this.getEffectiveValue(min, max);
         const percentage = ((value - min) / (max - min)) * 100;
-        return (h(Host, { key: '3d48615c3f08904f896eb5ebb7d8bfdff882a89b', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'dd8c0d44ba1aeccb3102cb15556517df98b9cf63', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
+        return (h(Host, { key: '26bdbb5219393e8b44e2fe5395d8a4cd8aa7e18a', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '65b81479fac7aa6024556ef6589064f997f4394e', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
     }
     static get is() { return "post-progressbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: 'c037e21b074c9ebc433e325e49d17dbe06d8db43', "data-version": version }, h("div", { key: 'f661eac91003680598c38d54dbc5fa3f482b7ad8', 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} / ${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: 'c793abbf5e0d01bb19dc4464ebd75249959a1717', "data-version": version }, h("div", { key: '357946df40a3d3a85ece2d0ac6ecc761951d9471', 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} / ${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-side-navigation/post-side-navigation.css

@@ -1 +1 @@
-:host{display:flex;background-color:#f0efed}:host dialog{overflow-y:auto;bottom:auto;right:auto;border:none;padding-inline:0;padding-block:40px;height:100vh;background-color:#f0efed}@media screen and (min-width: 1024px){:host{max-width:35ch;width:35ch}}
+:host{--post-side-navigation-padding-block-start: 34px;--post-side-navigation-padding-block-end: 16px;--post-side-navigation-bg: #f0efed;--post-side-navigation-stroke: #b4b3af;display:flex;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke)}:host dialog{overflow:visible;width:var(--post-side-navigation-width);bottom:auto;right:auto;border:none;padding:0;max-height:100dvh;background-color:var(--post-side-navigation-bg);border-inline-end:1px solid var(--post-side-navigation-stroke)}@media screen and (max-width: 1023.98px){:host dialog{box-shadow:var(--post-device-elevation-300)}}:host post-closebutton{transform:translate(50%, 0)}

package/dist/collection/components/post-side-navigation/post-side-navigation.js

@@ -11,13 +11,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h, Host, } from "@stencil/core";
 import { version } from "../../../../package";
 import { breakpoint } from "../../utils/breakpoints";
-import { getFocusableChildren, Required, Type } from "../../utils/index";
+import { getFocusableChildren, OneOf, Required, Type } from "../../utils/index";
+import { SIDE_NAVIGATION_SIZES } from "./side-navigation-styles";
 /**
  * @slot default - Slot for the navigation content (must be a `<nav>` landmark with proper heading)
  */
 export class PostSideNavigation {
     constructor() {
         this.device = breakpoint.get('device');
+        /**
+         * Controls the size of the navigation items.
+         * Choose "small" for deep and long navigation, and "large" (default) for a flat and short navigation.
+         */
+        this.size = 'large';
         this.breakpointChange = (e) => {
             this.device = e.detail;
         };
@@ -108,7 +114,7 @@ export class PostSideNavigation {
             } }, h("slot", null), h("post-closebutton", { onClick: () => this.hide() }, this.textClose)));
     }
     render() {
-        return (h(Host, { key: '63da088aa63d8a0cf6565f3bf01ab287a599ae27', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
+        return (h(Host, { key: '71ecd690876690a72f5c06b1e91856600aa11b90', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
     }
     static get is() { return "post-side-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -142,6 +148,33 @@ export class PostSideNavigation {
                 "setter": false,
                 "reflect": true,
                 "attribute": "text-close"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SideNavigationSize",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {
+                        "SideNavigationSize": {
+                            "location": "import",
+                            "path": "./side-navigation-styles",
+                            "id": "src/components/post-side-navigation/side-navigation-styles.ts::SideNavigationSize",
+                            "referenceLocation": "SideNavigationSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the size of the navigation items.\nChoose \"small\" for deep and long navigation, and \"large\" (default) for a flat and short navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'large'"
             }
         };
     }
@@ -229,3 +262,6 @@ __decorate([
     Required(),
     Type('string')
 ], PostSideNavigation.prototype, "textClose", void 0);
+__decorate([
+    OneOf(SIDE_NAVIGATION_SIZES)
+], PostSideNavigation.prototype, "size", void 0);

package/dist/collection/components/post-side-navigation/side-navigation-styles.js

@@ -0,0 +1 @@
+export const SIDE_NAVIGATION_SIZES = ['large', 'small'];