@swisspost/design-system-components 10.0.0-next.70 → 10.0.0-next.72

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

@@ -1,107 +1,103 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { componentOnReady, nanoid, Required, Type, Url } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndUrl, debounce, checkRequiredAndType } from "../../utils/index";
+import { h, Host } from "@stencil/core";
+import { throttle } from "throttle-debounce";
 export class PostBreadcrumbs {
     constructor() {
-        this.breadcrumbItems = [];
-        // Waits for breadcrumbs navigation reference to be available
-        this.waitForBreadcrumbsRef = debounce(() => {
-            if (this.breadcrumbsNavRef?.clientWidth > 0) {
-                this.checkConcatenation();
-            }
-            else {
-                this.waitForBreadcrumbsRef();
-            }
-        }, 50);
-        // Handles resizing to check concatenation
-        this.handleResize = () => {
-            if (window.innerWidth === this.lastWindowWidth)
-                return;
-            this.lastWindowWidth = window.innerWidth;
-            this.checkConcatenation();
-        };
-    }
-    validateHomeUrl() {
-        checkRequiredAndUrl(this, 'homeUrl');
+        this.shouldRenderMenu = false;
     }
-    validateTextHome() {
-        checkRequiredAndType(this, 'textHome', 'string');
-    }
-    validateTextBreadcrumbs() {
-        checkRequiredAndType(this, 'textBreadcrumbs', 'string');
-    }
-    validateTextMoreItems() {
-        checkRequiredAndType(this, 'textMoreItems', 'string');
+    componentWillLoad() {
+        this.id = this.host.id || `b${nanoid(6)}`;
     }
     componentDidLoad() {
-        this.validateHomeUrl();
-        this.validateTextHome();
-        this.validateTextBreadcrumbs();
-        this.validateTextMoreItems();
-        window.addEventListener('resize', this.handleResize);
-        this.waitForBreadcrumbsRef();
+        this.createMutationObserver();
+        this.createResizeObserver();
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
+    }
+    createMutationObserver() {
+        this.mutationObserver = new MutationObserver(this.duplicateNavElement.bind(this));
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+        this.duplicateNavElement();
+    }
+    createResizeObserver() {
+        this.resizeObserver = new ResizeObserver(throttle(50, this.checkOverflow.bind(this)));
+        this.resizeObserver.observe(document.body);
+    }
+    /**
+     * To measure overflow, we duplicate the entire breadcrumb so an inline version is always available.
+     */
+    duplicateNavElement() {
+        const shadowRoot = this.host.shadowRoot;
+        const nav = shadowRoot?.querySelector('nav');
+        if (!shadowRoot || !nav)
+            return;
+        this.prepareBreadcrumbItemsForClone();
+        const clone = nav.cloneNode(true);
+        clone.classList.add('invisible');
+        shadowRoot.querySelector('nav.invisible')?.remove();
+        shadowRoot.append(clone);
         requestAnimationFrame(() => {
-            this.updateBreadcrumbItems();
+            this.duplicateSlottedElements(clone, 'slot:not([name])');
+            this.duplicateSlottedElements(clone, 'slot[name="selected"]');
+            this.checkOverflow();
         });
     }
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize);
-    }
-    // Updates breadcrumb items and sets the last item
-    updateBreadcrumbItems() {
-        this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
-            text: item.textContent || '',
-            url: item.getAttribute('url') ?? undefined,
-            description: item.getAttribute('description') ?? undefined,
-            label: item.getAttribute('label') ?? undefined,
-        }));
-        this.lastItem = this.breadcrumbItems.at(-1);
-    }
-    // Determines parent width for concatenation logic
-    getParentWidth() {
-        let parent = this.host.parentNode;
-        while (parent && !(parent instanceof HTMLElement)) {
-            parent = parent.parentNode;
-        }
-        return parent instanceof HTMLElement ? parent.clientWidth : window.innerWidth;
-    }
-    checkConcatenation() {
-        if (!this.breadcrumbsNavRef)
+    duplicateSlottedElements(clone, slotSelector) {
+        const originalSlot = this.host.shadowRoot?.querySelector(slotSelector);
+        const clonedSlot = clone.querySelector(slotSelector);
+        if (!originalSlot || !clonedSlot)
             return;
-        const visibleWidth = this.getParentWidth();
-        // Measure all hidden breadcrumb items
-        const hiddenItems = Array.from(this.host.shadowRoot?.querySelectorAll('.hidden-breadcrumb-item') || []);
-        const totalWidth = hiddenItems.reduce((accum, element) => {
-            const rect = element.getBoundingClientRect();
-            return accum + rect.width;
-        }, 0);
-        this.isConcatenated = totalWidth > visibleWidth;
-    }
-    // Handles breadcrumb item click to open the menu
-    handleBreadcrumbItemClick() {
-        if (this.host.shadowRoot) {
-            const menuTrigger = this.host.shadowRoot
-                ?.querySelector('.menu-trigger-wrapper')
-                ?.querySelector('button');
-            if (menuTrigger) {
-                menuTrigger.click();
-            }
-        }
+        originalSlot.assignedElements().forEach(element => {
+            const cloned = element.cloneNode(true);
+            cloned.dataset.measuring = 'true';
+            clonedSlot.before(cloned);
+        });
+        clonedSlot.remove();
+    }
+    checkOverflow() {
+        const hiddenNav = this.host.shadowRoot?.querySelector('nav.invisible');
+        if (!hiddenNav)
+            return;
+        const breadcrumbItems = Array.from(hiddenNav.querySelectorAll('post-breadcrumb-item'));
+        Promise.all(breadcrumbItems.map(item => componentOnReady(item))).then(() => {
+            this.shouldRenderMenu = hiddenNav.scrollWidth > hiddenNav.clientWidth;
+            this.updateBreadcrumbItemProps();
+        });
+    }
+    prepareBreadcrumbItemsForClone() {
+        this.shouldRenderMenu = false;
+        this.updateBreadcrumbItemProps();
+    }
+    updateBreadcrumbItemProps() {
+        const breadcrumbItems = this.host.querySelectorAll('post-breadcrumb-item');
+        breadcrumbItems.forEach((item, index) => {
+            item.setAttribute('variant', this.shouldRenderMenu ? 'menuitem' : 'listitem');
+            item.setAttribute('selected', String(index === breadcrumbItems.length - 1));
+        });
+    }
+    renderMenu() {
+        const menuId = `${this.id}-menu`;
+        return (h("div", { role: "listitem" }, h("div", { class: "breadcrumb-item" }, h("post-menu-trigger", { for: menuId }, h("button", null, h("span", { class: "visually-hidden" }, this.textMoreItems), h("span", { "aria-hidden": "true" }, "...")))), h("post-menu", { id: menuId, label: this.textMoreItems, placement: "bottom-start" }, h("slot", null))));
     }
     render() {
-        const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: '4c0030c6896fa3bbbb26a26668a3b2cf96a110a9', "data-version": version }, h("nav", { key: '80834fa5581243a5cd081626ba743a29a2498502', "aria-label": this.textBreadcrumbs, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '925aff0f9f19ef04e339ead446f5e4d4449b73ec', class: "no-list breadcrumbs-list" }, h("li", { key: '6dd10b7af11f6a63c27dc018dc49cdc8e85f7dcd' }, h("a", { key: '3c6db30d34a5f4d176b6127bc0ccb8fe733846af', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '9a78ed7042859125d32374885c0ce7426e2ff114', class: "visually-hidden" }, this.textHome), h("post-icon", { key: '096eaf22ab0f381de0b4a93a65972718101b2d4e', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("li", { class: "menu-trigger-wrapper" }, h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this.handleBreadcrumbItemClick();
-                }
-            } }, h("button", { class: "btn", tabIndex: -1 }, "...")), h("post-menu", { id: "breadcrumb-menu", label: this.textMoreItems }, visibleItems.map(item => (h("post-menu-item", { key: item.url || item.text, class: "breadcrumb-item", onKeyDown: e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    const linkElement = e.currentTarget.querySelector('a');
-                    linkElement?.click();
-                    e.preventDefault();
-                }
-            } }, item.url ? (h("a", { href: item.url, "aria-label": item.label, "aria-description": item.description }, item.text)) : (h("span", null, item.text))))))))) : (visibleItems.map(item => (h("li", null, h("post-breadcrumb-item", { url: item.url, label: item.label, description: item.description, key: item.url || item.text }, item.text))))), this.lastItem && (h("li", { key: '57d4678e05401a248e31559eef7562a1608c0d58', "aria-current": "page" }, h("post-breadcrumb-item", { key: 'b1be2e79473288d0755a65a0819eb2a2301a89f2', url: this.lastItem.url, label: this.lastItem.label, description: this.lastItem.description, tabindex: -1 }, this.lastItem.text)))), h("div", { key: '9eaa408234c3497176bfc116ab02f8280ff1cce7', class: "hidden-items" }, h("a", { key: 'c19fab9c610fe33b0fb980e24fe6395ee4bed8c6', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '9d42d66632535330307f87fdad5ba6e983b4448a', class: "visually-hidden" }, this.textHome), h("post-icon", { key: 'b7cc4122d01930d5736f6eb929a46bcd32c547e4', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, label: item.label, description: item.description, class: "hidden-breadcrumb-item" }, item.text)))))));
+        return (h(Host, { key: '7ad91a47dac5999eba506744321eb59a27970687', "data-version": version }, h("nav", { key: '3d84a12495ccd27df028cae550b319a2191f8721', "aria-label": this.textBreadcrumbs }, h("div", { key: '291436db8b8f171ca070f0b4fb6e24a6fd831e8d', role: "list" }, h("div", { key: 'cd5aeeee11626fde17bf384ebe7f1f1f701f2a86', class: "breadcrumb-item home", role: "listitem" }, h("a", { key: '9583685d73837b3971a575307621cb364c934d4e', href: this.homeUrl }, h("span", { key: '4896caee6c56016ee7e0ded0363bd5ead8f672bc', class: "visually-hidden" }, this.textHome), h("post-icon", { key: '8390117bb7e8527a813e3d306e16312fa1912ce6', "aria-hidden": "true", name: "home" }))), this.shouldRenderMenu ? this.renderMenu() : h("slot", null), h("slot", { key: '314d304f3f1d1cc09af197eea221d26a9bf1c0fe', name: "selected" })))));
     }
     static get is() { return "post-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -129,7 +125,7 @@ export class PostBreadcrumbs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The URL for the home breadcrumb item."
+                    "text": "The URL for the root (home) breadcrumb item."
                 },
                 "getter": false,
                 "setter": false,
@@ -148,7 +144,7 @@ export class PostBreadcrumbs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The text label for the home breadcrumb item."
+                    "text": "An accessible label for the root (home) breadcrumb item."
                 },
                 "getter": false,
                 "setter": false,
@@ -167,7 +163,7 @@ export class PostBreadcrumbs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The accessible label for the breadcrumb component."
+                    "text": "An accessible label for the breadcrumb navigation."
                 },
                 "getter": false,
                 "setter": false,
@@ -186,7 +182,7 @@ export class PostBreadcrumbs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The accessible label for the breadcrumb menu when breadcrumb items are concatenated."
+                    "text": "An accessible label for the overflow menu that contains collapsed breadcrumb items."
                 },
                 "getter": false,
                 "setter": false,
@@ -197,25 +193,25 @@ export class PostBreadcrumbs {
     }
     static get states() {
         return {
-            "breadcrumbItems": {},
-            "isConcatenated": {},
-            "lastWindowWidth": {}
+            "shouldRenderMenu": {},
+            "id": {}
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "homeUrl",
-                "methodName": "validateHomeUrl"
-            }, {
-                "propName": "textHome",
-                "methodName": "validateTextHome"
-            }, {
-                "propName": "textBreadcrumbs",
-                "methodName": "validateTextBreadcrumbs"
-            }, {
-                "propName": "textMoreItems",
-                "methodName": "validateTextMoreItems"
-            }];
-    }
 }
+__decorate([
+    Required(),
+    Url()
+], PostBreadcrumbs.prototype, "homeUrl", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostBreadcrumbs.prototype, "textHome", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostBreadcrumbs.prototype, "textBreadcrumbs", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostBreadcrumbs.prototype, "textMoreItems", void 0);

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

@@ -1,6 +1,16 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { OneOf, Required } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkEmptyOrOneOf, checkRequiredAndOneOf } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 import { BUTTON_TYPES, PLACEMENT, SIZE } from "./types";
 /**
  * @slot default - Slot for placing visually hidden label in the close button.
@@ -21,15 +31,6 @@ export class PostClosebutton {
          */
         this.size = 'default';
     }
-    validateButtonType() {
-        checkEmptyOrOneOf(this, 'buttonType', BUTTON_TYPES);
-    }
-    validatePlacement() {
-        checkRequiredAndOneOf(this, 'placement', PLACEMENT);
-    }
-    validateSize() {
-        checkRequiredAndOneOf(this, 'size', SIZE);
-    }
     componentDidLoad() {
         this.checkContent();
     }
@@ -46,15 +47,12 @@ export class PostClosebutton {
         }
     }
     checkContent() {
-        this.validateButtonType();
-        this.validatePlacement();
-        this.validateSize();
         if (!this.host.querySelector('.visually-hidden').textContent) {
             console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
         }
     }
     render() {
-        return (h(Host, { key: '33c801f2e342363d6361f19e65793a4164d45f81', "data-version": version }, h("button", { key: '2fa8ae3a3e57cc971a99648d66612e13bc526e92', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: '5ac2821cdd342115e73b13f692bd7180edab82a8', "aria-hidden": "true", name: "closex" }), h("span", { key: '5eb97879647ef8c866bfdf6cd0819477a13907bc', class: "visually-hidden" }, h("slot", { key: '80eac1979c78526078d57a8398e04824420b7983' })))));
+        return (h(Host, { key: 'a685b0c1dbf08de1253d7c232800b28aa445edeb', "data-version": version }, h("button", { key: 'e36535683023bd1cbcf560491a87ddab60f23d1c', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: '405d5ca3761bd8ee56bdd9734a2550cbbbd81f0d', "aria-hidden": "true", name: "closex" }), h("span", { key: '2caa490891d922dc69ef4e6ebe8e5de813426d30', class: "visually-hidden" }, h("slot", { key: 'fd38d8c6da378058ea93c5c08f9f96d0b7be7813' })))));
     }
     static get is() { return "post-closebutton"; }
     static get originalStyleUrls() {
@@ -153,16 +151,15 @@ export class PostClosebutton {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "buttonType",
-                "methodName": "validateButtonType"
-            }, {
-                "propName": "placement",
-                "methodName": "validatePlacement"
-            }, {
-                "propName": "size",
-                "methodName": "validateSize"
-            }];
-    }
 }
+__decorate([
+    OneOf(BUTTON_TYPES)
+], PostClosebutton.prototype, "buttonType", void 0);
+__decorate([
+    Required(),
+    OneOf(PLACEMENT)
+], PostClosebutton.prototype, "placement", void 0);
+__decorate([
+    Required(),
+    OneOf(SIZE)
+], PostClosebutton.prototype, "size", void 0);

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

@@ -1,7 +1,17 @@
-import { h, Host, Build, } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { collapse, collapsedKeyframe, expand } from "../../animations/collapse";
+import { Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { collapsedKeyframe, collapse, expand } from "../../animations/collapse";
-import { checkEmptyOrType } from "../../utils/index";
+import { Build, h, Host, } from "@stencil/core";
 /**
  * @slot default - Slot for placing content within the collapsible element.
  */
@@ -12,14 +22,10 @@ export class PostCollapsible {
          */
         this.collapsed = false;
     }
-    collapsedChange() {
-        checkEmptyOrType(this, 'collapsed', 'boolean');
-    }
     get isExpanded() {
         return !this.collapsed;
     }
     componentDidLoad() {
-        this.collapsedChange();
         this.updateTriggers();
     }
     /**
@@ -46,14 +52,21 @@ export class PostCollapsible {
         return isExpanded;
     }
     /**
-     * Update all post-collapsible-trigger elements referring to the collapsible
+     * Update all post-collapsible-trigger elements referring to or wrapping the collapsible
      */
     updateTriggers() {
-        const triggers = document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`);
+        const triggers = this.host.id
+            ? Array.from(document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`))
+            : [];
+        // also update an ancestor trigger when the collapsible is nested inside one
+        const nestedTrigger = this.host.closest('post-collapsible-trigger');
+        if (nestedTrigger && !triggers.includes(nestedTrigger)) {
+            triggers.push(nestedTrigger);
+        }
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: '79ec1a3eb11225a93f5e5b6da7334d20d5e4b565', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: 'baff34fc9b45aec4c3fb0f74ad676ea1237c7d23' })));
+        return (h(Host, { key: '5683b1c0346d1ed8aa6aa5ef8583654511ff0638', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '3271677498e00e964ee17733aa2871a12e57858c' })));
     }
     static get is() { return "post-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -135,10 +148,7 @@ export class PostCollapsible {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "collapsed",
-                "methodName": "collapsedChange"
-            }];
-    }
 }
+__decorate([
+    Type('boolean')
+], PostCollapsible.prototype, "collapsed", void 0);

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

@@ -8,16 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from "@stencil/core";
+import { EventFrom, getRoot, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType, EventFrom, getRoot } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 export class PostCollapsibleTrigger {
-    /**
-     * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
-     */
-    validateAriaAttributes() {
-        checkRequiredAndType(this, 'for', 'string');
-    }
     constructor() {
         this.observer = new MutationObserver(() => this.setTrigger());
         this.handlePostToggle = this.handlePostToggle.bind(this);
@@ -34,7 +28,10 @@ export class PostCollapsibleTrigger {
         this.setTrigger();
         if (!this.trigger)
             console.warn('The post-collapsible-trigger must contain a button.');
-        this.validateAriaAttributes();
+        if (!this.collapsible) {
+            const target = this.for ? `with id "${this.for}"` : 'nested inside <post-collapsible-trigger>';
+            console.warn(`No post-collapsible found ${target}. Either nest a post-collapsible inside the trigger or set the "for" attribute to the id of the collapsible.`);
+        }
     }
     disconnectedCallback() {
         this.observer.disconnect();
@@ -56,18 +53,21 @@ export class PostCollapsibleTrigger {
         }
     }
     updateAriaAttributes() {
-        if (!this.trigger)
+        const collapsible = this.collapsible;
+        if (!this.trigger || !collapsible)
             return;
-        // add the provided id to the aria-controls list
+        // a nested collapsible may have no id, but aria-controls needs one to reference
+        collapsible.id || (collapsible.id = `collapsible-${crypto.randomUUID()}`);
+        const collapsibleId = collapsible.id;
+        // add the controlled collapsible's id to the aria-controls list
         const ariaControls = this.trigger.getAttribute('aria-controls');
-        if (!ariaControls?.includes(this.for)) {
-            const newAriaControls = ariaControls ? `${ariaControls} ${this.for}` : this.for;
-            this.trigger.setAttribute('aria-controls', newAriaControls);
+        const tokens = ariaControls ? ariaControls.split(/\s+/) : [];
+        if (!tokens.includes(collapsibleId)) {
+            tokens.push(collapsibleId);
+            this.trigger.setAttribute('aria-controls', tokens.join(' '));
         }
-        // set the aria-expanded to `false` if the controlled collapsible is collapsed or undefined, set it to `true` otherwise
-        const isCollapsed = this.collapsible?.collapsed;
-        const newAriaExpanded = isCollapsed !== undefined ? !isCollapsed : undefined;
-        this.trigger.setAttribute('aria-expanded', `${newAriaExpanded}`);
+        // set aria-expanded to `true` if expanded, `false` if collapsed (collapsed defaults to false)
+        this.trigger.setAttribute('aria-expanded', `${!collapsible.collapsed}`);
     }
     /**
      * Toggle the post-collapsible controlled by the trigger
@@ -79,7 +79,9 @@ export class PostCollapsibleTrigger {
      * Retrieve the post-collapsible controlled by the trigger
      */
     get collapsible() {
-        const ref = this.root.getElementById(this.for);
+        // prefer a nested post-collapsible, fall back to an id reference via `for`
+        const ref = this.host.querySelector('post-collapsible') ??
+            (this.for ? this.root?.getElementById(this.for) ?? null : null);
         if (ref && ref.localName === 'post-collapsible') {
             return ref;
         }
@@ -89,7 +91,12 @@ export class PostCollapsibleTrigger {
      * Find the button and add the proper event listener and ARIA attributes to it
      */
     setTrigger() {
-        const trigger = this.host.querySelector('button');
+        // skip buttons that belong to a nested collapsible's content
+        const trigger = Array.from(this.host.querySelectorAll('button')).find(button => {
+            const collapsible = button.closest('post-collapsible');
+            const isInsidePanel = !!collapsible && this.host.contains(collapsible);
+            return !isInsidePanel;
+        });
         if (!trigger || (this.trigger && trigger.isEqualNode(this.trigger)))
             return;
         this.trigger = trigger;
@@ -97,7 +104,7 @@ export class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: 'a4d1613dc3cbcfa627f920275eb3508939b63609', "data-version": version }, h("slot", { key: 'baa22c46a7a982afcd09253daa95f68f1709d509' })));
+        return (h(Host, { key: '40cfa7d940136d4bce5de0c2b37fca91187110f8', "data-version": version }, h("slot", { key: 'b8853f5be4361e59537b00d6fd60e6e42b7ea64d' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -111,11 +118,11 @@ export class PostCollapsibleTrigger {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Link the trigger to a post-collapsible with this id"
+                    "text": "Link the trigger to a post-collapsible by its ID.\nIf omitted, a post-collapsible nested directly inside this element is used instead."
                 },
                 "getter": false,
                 "setter": false,
@@ -146,13 +153,10 @@ export class PostCollapsibleTrigger {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "for",
-                "methodName": "validateAriaAttributes"
-            }];
-    }
 }
+__decorate([
+    Type('string')
+], PostCollapsibleTrigger.prototype, "for", void 0);
 __decorate([
     EventFrom('post-collapsible')
 ], PostCollapsibleTrigger.prototype, "handlePostToggle", null);