@swisspost/design-system-components 9.0.0-next.13 → 9.0.0-next.14

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

@@ -3,6 +3,24 @@ import { version } from "../../../../package";
 export class PostRating {
     hasChanged = false;
     host;
+    hoveredIndex;
+    /**
+     * Defines a hidden label for the component.
+     */
+    label = 'Rating';
+    /**
+     * Defines the total amount of stars rendered in the component.
+     */
+    stars = 5;
+    /**
+     * Defines the rating that the component should show.
+     */
+    currentRating = 0;
+    /**
+     * Defines if the component is readonly or not.
+     * This usually should be used together with the `currentRating` property.
+     */
+    readonly = false;
     /**
      * An event emitted whenever the component's value has changed (on input).
      * The event payload can be used like so: `event.detail.value`.
@@ -14,11 +32,6 @@ export class PostRating {
      */
     postChange;
     constructor() {
-        this.hoveredIndex = undefined;
-        this.label = 'Rating';
-        this.stars = 5;
-        this.currentRating = 0;
-        this.readonly = false;
         this.keydownHandler = this.keydownHandler.bind(this);
         this.blurHandler = this.blurHandler.bind(this);
         this.hoverHandler = this.hoverHandler.bind(this);
@@ -75,7 +88,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: 'bb4ab7c2ae609e8e288c62516be93f0b96926eff', "data-version": version }, h("div", { key: '0176474611f998938aef0b267c118478d6623fbc', 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: '64891ff9f0ef8f7bc2be5df9e989577830b35ffc', "data-version": version }, h("div", { key: 'b4e7050864265e33e08b88fc3d5c8eea3cf6ab0e', 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),
@@ -111,6 +124,8 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines a hidden label for the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Rating'"
@@ -129,6 +144,8 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines the total amount of stars rendered in the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "stars",
                 "reflect": false,
                 "defaultValue": "5"
@@ -147,6 +164,8 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines the rating that the component should show."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "current-rating",
                 "reflect": false,
                 "defaultValue": "0"
@@ -165,6 +184,8 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines if the component is readonly or not.\nThis usually should be used together with the `currentRating` property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -6,11 +6,12 @@ import { nanoid } from "nanoid";
  * @slot default - Slot for the content of the tab header.
  */
 export class PostTabHeader {
-    constructor() {
-        this.tabId = undefined;
-        this.panel = undefined;
-    }
     host;
+    tabId;
+    /**
+     * The name of the panel controlled by the tab header.
+     */
+    panel;
     validateFor(newValue) {
         checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
     }
@@ -18,7 +19,7 @@ export class PostTabHeader {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '9b12878498f63da83113c081f81a749b4ee47ef4', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '3a2e7f3657110d707b49af911e9dd3a4ef323e36' })));
+        return (h(Host, { key: 'f7383136476f3d32a79c39f7cadef8bcde0630f7', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: 'b88f3ce360da891793e31b84c4bfd4f59511d88a' })));
     }
     static get is() { return "post-tab-header"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +54,8 @@ export class PostTabHeader {
                     "tags": [],
                     "text": "The name of the panel controlled by the tab header."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "panel",
                 "reflect": false
             }

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

@@ -5,17 +5,18 @@ import { nanoid } from "nanoid";
  * @slot default - Slot for placing the content of the tab panel.
  */
 export class PostTabPanel {
-    constructor() {
-        this.panelId = undefined;
-        this.name = undefined;
-    }
     host;
+    panelId;
+    /**
+     * The name of the panel, used to associate it with a tab header.
+     */
+    name;
     componentWillLoad() {
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '9e8f9c5dc0c1c3d1b7e63cbb9e9cbb0cf116da9b', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '3ece42346845324cfa0fb9af5721efab2b71e2f1' })));
+        return (h(Host, { key: '9d35c9ceec54f1c2983600342e5e63a49ca93aef', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '8db185ca7a2030343df512962126a91f64840a64' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -45,6 +46,8 @@ export class PostTabPanel {
                     "tags": [],
                     "text": "The name of the panel, used to associate it with a tab header."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             }

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

@@ -9,9 +9,6 @@ import { componentOnReady } from "../../utils/index";
  * @part content - Add custom styles for the tab panel container.
  */
 export class PostTabs {
-    constructor() {
-        this.activePanel = undefined;
-    }
     activeTab;
     showing;
     hiding;
@@ -20,6 +17,13 @@ export class PostTabs {
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
     host;
+    /**
+     * The name of the panel that is initially shown.
+     * If not specified, it defaults to the panel associated with the first tab.
+     *
+     * **Changing this value after initialization has no effect.**
+     */
+    activePanel;
     /**
      * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
      * The payload is the name of the newly shown panel.
@@ -150,7 +154,7 @@ export class PostTabs {
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '697174a68f4eedabd9170bcad93e60539f0dc778', "data-version": version }, h("div", { key: 'ae39c8fd62edd28113dea0f013ffdd3a76bea739', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'a638044b8b6ab2d3c2d6e6b59a2e9a02fd137e0d', class: "tabs", role: "tablist" }, h("slot", { key: '2ea6eb60f7d1edcc59eea994cc2fde91c900c286', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '6900fd1914df01fbe5901378611ed0a359bc13f6', class: "tab-content", part: "content" }, h("slot", { key: '464bb9fa7450ddd22517a0e41f692876d6e8bf5b', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '7c81cd091603a01d960ecc2aed9653d0031dd16e', "data-version": version }, h("div", { key: '716a9f1e05a7ffeca8459e6a88ce4b56364b50ec', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'b41b35b26e0e1ef1e285719975841aefbdc4a8e1', class: "tabs", role: "tablist" }, h("slot", { key: '065b3a6ecfba2710a344b44cc6d5e73beb0655df', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'f30ce2c568071c8f144ba50e62b48a1294207c63', class: "tab-content", part: "content" }, h("slot", { key: 'c71155abdf95343990b2ee85592e7a995f58d05e', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -185,6 +189,8 @@ export class PostTabs {
                     "tags": [],
                     "text": "The name of the panel that is initially shown.\nIf not specified, it defaults to the panel associated with the first tab.\n\n**Changing this value after initialization has no effect.**"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active-panel",
                 "reflect": false
             }

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

@@ -5,11 +5,22 @@ import { version } from "../../../../package";
  */
 export class PostTag {
     host;
+    classes;
+    /**
+     * Defines the color variant of the component.
+     */
+    variant;
+    /**
+     * Defines the size of the component.
+     */
+    size = null;
+    /**
+     * Defines the icon `name` inside of the component.
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     * To learn which icons are available, please visit our <a href="/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs">icon library</a>.
+     */
+    icon = null;
     constructor() {
-        this.classes = undefined;
-        this.variant = undefined;
-        this.size = null;
-        this.icon = null;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
@@ -31,7 +42,7 @@ export class PostTag {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: 'cda93c397ec81e289c843eaae7694bbba6f3c297', "data-version": version }, h("div", { key: '7fa71d9c0ca5393bc188e5e09107ec931943ed66', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '8d36933c00910e9f36759d101f43b628c0fbf185', class: "tag-text" }, h("slot", { key: '49e2e9dd66cb85df4615c512d8dc0d7cad6606b8' })))));
+        return (h(Host, { key: 'fd03781bfdcfaa3776677f8d95e8b1a74de24c1e', "data-version": version }, h("div", { key: '0a22b98ea9c75d4a09680e2abe980bd0e4935172', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'ddda0c15ce644e311b8061283d83619667264ec4', class: "tag-text" }, h("slot", { key: '30fb04c5e80f46e7cb560f9489791d8bcd7b45b0' })))));
     }
     static get is() { return "post-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -61,6 +72,8 @@ export class PostTag {
                     "tags": [],
                     "text": "Defines the color variant of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -78,6 +91,8 @@ export class PostTag {
                     "tags": [],
                     "text": "Defines the size of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "null"
@@ -96,6 +111,8 @@ export class PostTag {
                     "tags": [],
                     "text": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "null"

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

@@ -5,10 +5,11 @@ import { checkType } from "../../utils/index";
  * @slot default - Slot for the content of the button.
  */
 export class PostTogglebutton {
-    constructor() {
-        this.toggled = false;
-    }
     host;
+    /**
+     * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+     */
+    toggled = false;
     validateToggled(value = this.toggled) {
         checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
     }
@@ -29,7 +30,7 @@ export class PostTogglebutton {
         }
     };
     render() {
-        return (h(Host, { key: '461f72ebada75a99921b7a166f67f2547aa6465e', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'cd5f4cc4df687cceacb3ea6c125b7b62f01b2712' })));
+        return (h(Host, { key: 'e4974336def6dbf244b3d63b9aa00e2e7bce1920', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'b1179664b0f0651865e973c7afe951102b048877' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }
@@ -59,6 +60,8 @@ export class PostTogglebutton {
                     "tags": [],
                     "text": "If `true`, the button is in the \"on\" state, otherwise it is in the \"off\" state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "toggled",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -93,14 +93,23 @@ const patchAccessibilityFeatures = (trigger) => {
 // Initialize a mutation observer for patching accessibility features
 const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
 export class PostTooltip {
-    constructor() {
-        this.placement = 'top';
-        this.arrow = true;
-        this.delayed = false;
-    }
     popoverRef;
     wasOpenedByFocus = false;
     host;
+    /**
+     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
+     * towards the viewport if they would overlap edge boundaries.
+     */
+    placement = 'top';
+    /**
+     * Wheter or not to display a little pointer arrow
+     */
+    arrow = true;
+    /**
+     * If `true`, the tooltip is displayed a few milliseconds after it is triggered
+     */
+    delayed = false;
     validateDelayed() {
         checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
     }
@@ -216,7 +225,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '492f3f8b1b323417304ffba6c93f277c18f5b3d8', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '1b25c36c8351f0471e9acdf1fdf3073fa59683da', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '0c1f7d6c81e214155976d1fb6151ec0f97724724' }))));
+        return (h(Host, { key: 'bda6e8f41cc55d14f11bd76d7a5bde9c3d7e8817', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '090506a3d10cafa28d296113b09dfd1a2965dfa5', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '9d8ff88355510ec1a56169158e3cf503a8ef8482' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -252,6 +261,8 @@ export class PostTooltip {
                     "tags": [],
                     "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -270,6 +281,8 @@ export class PostTooltip {
                     "tags": [],
                     "text": "Wheter or not to display a little pointer arrow"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "arrow",
                 "reflect": false,
                 "defaultValue": "true"
@@ -288,6 +301,8 @@ export class PostTooltip {
                     "tags": [],
                     "text": "If `true`, the tooltip is displayed a few milliseconds after it is triggered"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "delayed",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/index.js

@@ -15,6 +15,7 @@ export { PostHeader } from './components/post-header/post-header';
 export { PostIcon } from './components/post-icon/post-icon';
 export { PostLanguageOption } from './components/post-language-option/post-language-option';
 export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
+export { PostLinkarea } from './components/post-linkarea/post-linkarea';
 export { PostList } from './components/post-list/post-list';
 export { PostListItem } from './components/post-list-item/post-list-item';
 export { PostLogo } from './components/post-logo/post-logo';

package/dist/components/index.js

@@ -1,35 +1,36 @@
-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 PostAvatar } from './post-avatar2.js';
-export { P as PostBackToTop } from './post-back-to-top2.js';
-export { P as PostBanner } from './post-banner2.js';
-export { P as PostBreadcrumb } from './post-breadcrumb2.js';
-export { P as PostBreadcrumbItem } from './post-breadcrumb-item2.js';
-export { P as PostCardControl } from './post-card-control2.js';
-export { P as PostClosebutton } from './post-closebutton2.js';
-export { P as PostCollapsible } from './post-collapsible2.js';
-export { P as PostCollapsibleTrigger } from './post-collapsible-trigger2.js';
-export { P as PostFooter } from './post-footer2.js';
-export { P as PostHeader } from './post-header2.js';
-export { P as PostIcon } from './post-icon2.js';
-export { P as PostLanguageOption } from './post-language-option2.js';
-export { P as PostLanguageSwitch } from './post-language-switch2.js';
-export { P as PostList } from './post-list2.js';
-export { P as PostListItem } from './post-list-item2.js';
-export { P as PostLogo } from './post-logo2.js';
-export { P as PostMainnavigation } from './post-mainnavigation2.js';
-export { P as PostMegadropdown } from './post-megadropdown2.js';
-export { P as PostMegadropdownTrigger } from './post-megadropdown-trigger2.js';
-export { P as PostMenu } from './post-menu2.js';
-export { P as PostMenuItem } from './post-menu-item2.js';
-export { P as PostMenuTrigger } from './post-menu-trigger2.js';
-export { P as PostPopover } from './post-popover2.js';
-export { P as PostPopovercontainer } from './post-popovercontainer2.js';
-export { P as PostRating } from './post-rating2.js';
-export { P as PostTabs } from './post-tabs2.js';
-export { P as PostTabHeader } from './post-tab-header2.js';
-export { P as PostTabPanel } from './post-tab-panel2.js';
-export { P as PostTag } from './post-tag2.js';
-export { P as PostTogglebutton } from './post-togglebutton2.js';
-export { P as PostTooltip } from './post-tooltip2.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-3e8554e7.js';
+export { P as PostAccordion } from './p-a3a004e6.js';
+export { P as PostAccordionItem } from './p-68ecd276.js';
+export { P as PostAvatar } from './p-d3fb70af.js';
+export { P as PostBackToTop } from './p-e20366a6.js';
+export { P as PostBanner } from './p-4965cfe1.js';
+export { P as PostBreadcrumb } from './p-146677d1.js';
+export { P as PostBreadcrumbItem } from './p-c7c1d466.js';
+export { P as PostCardControl } from './p-38778a14.js';
+export { P as PostClosebutton } from './p-bf14d264.js';
+export { P as PostCollapsible } from './p-b018d864.js';
+export { P as PostCollapsibleTrigger } from './p-05590ac0.js';
+export { P as PostFooter } from './p-58878996.js';
+export { P as PostHeader } from './p-424d5ea9.js';
+export { P as PostIcon } from './p-91031e3b.js';
+export { P as PostLanguageOption } from './p-d47bb5bf.js';
+export { P as PostLanguageSwitch } from './p-f6d80d76.js';
+export { P as PostLinkarea } from './p-5653923a.js';
+export { P as PostList } from './p-536eba02.js';
+export { P as PostListItem } from './p-9e4b1f10.js';
+export { P as PostLogo } from './p-5f51ec58.js';
+export { P as PostMainnavigation } from './p-1ee1742f.js';
+export { P as PostMegadropdown } from './p-46a6c5ec.js';
+export { P as PostMegadropdownTrigger } from './p-27edc023.js';
+export { P as PostMenu } from './p-91882483.js';
+export { P as PostMenuItem } from './p-ccccf0c3.js';
+export { P as PostMenuTrigger } from './p-8b053fd5.js';
+export { P as PostPopover } from './p-af23f7de.js';
+export { P as PostPopovercontainer } from './p-60cf53cc.js';
+export { P as PostRating } from './p-fc59de7c.js';
+export { P as PostTabs } from './p-ce854a7d.js';
+export { P as PostTabHeader } from './p-75b8b652.js';
+export { P as PostTabPanel } from './p-78e1d893.js';
+export { P as PostTag } from './p-cab43cee.js';
+export { P as PostTogglebutton } from './p-3cee636a.js';
+export { P as PostTooltip } from './p-2d9b46b4.js';

package/dist/components/{post-collapsible-trigger2.js → p-05590ac0.js}

@@ -1,20 +1,23 @@
-import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
-import { d as debounce } from './debounce.js';
-import { g as getRoot } from './get-root.js';
+import { p as proxyCustomElement, H } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { c as checkType } from './p-8562c7dc.js';
+import { c as checkNonEmpty } from './p-b095519d.js';
+import { d as debounce } from './p-e1baac59.js';
+import { g as getRoot } from './p-fc91cbc2.js';
 
-const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends HTMLElement {
+const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollapsibleTrigger extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.for = undefined;
     }
     trigger;
     observer = new MutationObserver(() => this.setTrigger());
     root;
     get host() { return this; }
+    /**
+     * Link the trigger to a post-collapsible with this id
+     */
+    for;
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */

package/dist/components/{post-breadcrumb2.js → p-146677d1.js}

@@ -1,29 +1,35 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkUrl } from './index2.js';
-import { d as debounce } from './debounce.js';
-import { d as defineCustomElement$6 } from './post-breadcrumb-item2.js';
-import { d as defineCustomElement$5 } from './post-icon2.js';
-import { d as defineCustomElement$4 } from './post-menu2.js';
-import { d as defineCustomElement$3 } from './post-menu-item2.js';
-import { d as defineCustomElement$2 } from './post-menu-trigger2.js';
-import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
+import { v as version } from './p-2083ae2c.js';
+import { b as checkUrl } from './p-eabb09ad.js';
+import { d as debounce } from './p-e1baac59.js';
+import { d as defineCustomElement$6 } from './p-c7c1d466.js';
+import { d as defineCustomElement$5 } from './p-91031e3b.js';
+import { d as defineCustomElement$4 } from './p-91882483.js';
+import { d as defineCustomElement$3 } from './p-ccccf0c3.js';
+import { d as defineCustomElement$2 } from './p-8b053fd5.js';
+import { d as defineCustomElement$1 } from './p-60cf53cc.js';
 
 const postBreadcrumbCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:flex;align-items:center}.breadcrumbs-nav{display:flex;align-items:center}.hidden-items{gap:var(--post-device-spacing-gap-inline-4);position:absolute;height:0;overflow:hidden;white-space:nowrap}.breadcrumbs-list{display:flex;flex-wrap:nowrap;position:relative;margin:0;padding:0;list-style:none;align-items:center;height:100%;gap:var(--post-device-spacing-gap-inline-4)}post-icon{display:inline-block;box-sizing:border-box;color:var(--post-scheme-color-interactive-primary-enabled-fg1);height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.breadcrumb-item-icon{padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}li a{display:flex;align-items:center}li a{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}li a: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){li a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){li a: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){li a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}li a:focus{border-radius:var(--post-device-border-radius-focus)}li a .home-icon{padding-block:var(--post-device-spacing-padding-4);padding-inline:var(--post-device-spacing-padding-4)}li a .home-icon:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){li a .home-icon a,li a .home-icon:focus,li a .home-icon:hover{color:CanvasText !important}}.menu-trigger-wrapper{display:flex;align-items:center;gap:var(--post-device-spacing-gap-inline-5)}.actual-menu{display:flex;align-items:center}post-menu-trigger{display:flex;align-items:center;padding-block:var(--post-device-spacing-padding-block-7)}post-menu-trigger{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}post-menu-trigger: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){post-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-trigger: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){post-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-menu-trigger:focus{border-radius:var(--post-device-border-radius-focus)}post-menu-trigger button{background:none;border:none;line-height:150%;font-size:var(--post-device-font-size-6);cursor:pointer;padding:0;color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-menu-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-trigger button a,post-menu-trigger button:focus,post-menu-trigger button:hover{color:LinkText !important}}post-menu::part(popover-container){display:flex;flex-direction:column;align-items:start;padding:.6rem;gap:var(--post-device-spacing-gap-inline-4)}post-menu::part(popover-container) ::slotted(post-menu-item:not(:last-child)){margin-bottom:var(--post-device-spacing-gap-inline-4)}.breadcrumb-item{display:flex;align-items:center;justify-content:center;gap:var(--post-device-spacing-gap-inline-5)}.breadcrumb-item a{text-decoration:none;color:inherit;line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);font-size:var(--post-device-font-size-6)}.breadcrumb-item a{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}.breadcrumb-item a: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){.breadcrumb-item a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item a: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){.breadcrumb-item a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item a:focus-visible{border-radius:var(--post-device-border-radius-focus)}.breadcrumb-item span:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item span:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item a,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}post-breadcrumb-item:last-of-type{pointer-events:none;color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}post-breadcrumb-item:last-of-type:hover{color:var(--post-scheme-color-interactive-primary-selected-fg1);text-decoration:none}.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption){position:absolute !important}";
 const PostBreadcrumbStyle0 = postBreadcrumbCss;
 
-const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb extends HTMLElement {
+const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.homeUrl = undefined;
-        this.homeText = 'Home';
-        this.breadcrumbItems = [];
-        this.isConcatenated = undefined;
-        this.lastWindowWidth = undefined;
     }
     get host() { return this; }
+    /**
+     * The URL for the home breadcrumb item.
+     */
+    homeUrl;
+    /**
+     * The text label for the home breadcrumb item.
+     */
+    homeText = 'Home';
+    breadcrumbItems = [];
+    isConcatenated;
+    lastWindowWidth;
     breadcrumbNavRef;
     lastItem;
     validateUrl() {
@@ -66,10 +72,10 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
     // Determines parent width for concatenation logic
     getParentWidth() {
         let parent = this.host.parentNode;
-        while (parent && !(parent instanceof HTMLElement)) {
+        while (parent && !(parent instanceof H)) {
             parent = parent.parentNode;
         }
-        return parent instanceof HTMLElement ? parent.clientWidth : window.innerWidth;
+        return parent instanceof H ? parent.clientWidth : window.innerWidth;
     }
     checkConcatenation() {
         if (!this.breadcrumbNavRef)
@@ -96,7 +102,7 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: '1baffcf05840127383931baec809e2b94e402e5e', "data-version": version }, h("nav", { key: 'c6725b8aa970f35f15f31ecc56280e7518b2dba9', "aria-label": "Breadcrumb", class: "breadcrumbs-nav", ref: (el) => (this.breadcrumbNavRef = el) }, h("ol", { key: '3166f345dde9f7003b23f5e7a1ddbe587b3fb4be', class: "no-list breadcrumbs-list" }, h("li", { key: '2efcbd6502cc5245ee63fd344a28c8aea4561cde' }, h("a", { key: 'b727c3d880ca9ebb7fc8527263a142662e4d42fd', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: 'd683d05bce032759aa224e7a36ef5d7fb3883187', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'f17d5f56a49f0525d64414c079968d80b0c7eca3', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: (e) => {
+        return (h(Host, { key: 'd24a602e1c84ec7227c44a02ac0bebcfe0358b89', "data-version": version }, h("nav", { key: '7ba77ead7ee58f141da4b3e38b11372312ddccf0', "aria-label": "Breadcrumb", class: "breadcrumbs-nav", ref: (el) => (this.breadcrumbNavRef = el) }, h("ol", { key: '210f747196e7450c25f088b258868adc4809e587', class: "no-list breadcrumbs-list" }, h("li", { key: '66627682df3f2a9879d037c1f1f0ed3633267590' }, h("a", { key: 'eb3f05c7badfb40f91aa8d961b4a3cca15946c6e', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: 'd4295523999fe7b0192d7d110e84f939b93be1a9', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'd77ed3f3b22acefd7675dbe94023a9763e7afac9', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleBreadcrumbItemClick();
@@ -107,7 +113,7 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
                     linkElement?.click();
                     e.preventDefault();
                 }
-            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map((item) => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '674dd84e23c325f874f57b92b0171b47d600d463', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: 'b4131833874403a8166446991510a36003a21aed', class: "hidden-items" }, h("a", { key: 'aa31950651d486afdb97974c24929cc80e0c3f53', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'e9d1f5e225220a5942f8844dc26014f1278f935f', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '493a91739d10c3e536da52d636aca4b305f88273', name: "home", class: "home-icon" })), this.breadcrumbItems.map((item) => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
+            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map((item) => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '602d2071f6077fa61782f87970c8e8756ad8c20d', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: 'e00662dad1d308e9791140acd85dbe34084adf34', class: "hidden-items" }, h("a", { key: '8d71359ec18220eaa83095750a1e0fb82e716238', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'c5231a0e4d392627bbc8df44016bd8336438a1fd', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '449f27766fb18df99f70cba07de7d5e861a25da6', name: "home", class: "home-icon" })), this.breadcrumbItems.map((item) => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
     }
     static get watchers() { return {
         "homeUrl": ["validateUrl"]