@swisspost/design-system-components 7.2.0 → 7.3.0

package/dist/esm/{post-collapsible-0bb7ca9a.js → post-collapsible-8d4694d4.js}

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9331ff3.js';
-import { v as version } from './package-37b02bc3.js';
-import { d as checkEmptyOrType } from './index-d1eba94c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9ace3232.js';
+import { v as version } from './package-4d20f60f.js';
+import { b as checkEmptyOrType } from './index-29d17d6d.js';
 
 function isMotionReduced() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -24,7 +24,7 @@ const expand = (el) => {
     return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions);
 };
 
-const postCollapsibleCss = ":host{display:block}.collapse{overflow:hidden}";
+const postCollapsibleCss = ":host{display:block;overflow:hidden}";
 const PostCollapsibleStyle0 = postCollapsibleCss;
 
 const PostCollapsible = class {
@@ -33,7 +33,6 @@ const PostCollapsible = class {
         this.postToggle = createEvent(this, "postToggle", 7);
         this.isLoaded = false;
         this.isOpen = true;
-        this.id = undefined;
         this.collapsed = false;
     }
     validateCollapsed(newValue = this.collapsed) {
@@ -42,13 +41,11 @@ const PostCollapsible = class {
     connectedCallback() {
         this.validateCollapsed();
     }
-    componentWillRender() {
-        this.id = this.host.id || `c${crypto.randomUUID()}`;
-    }
     componentDidLoad() {
         if (this.collapsed)
             void this.toggle(false);
         this.isLoaded = true;
+        this.updateTriggers();
     }
     /**
      * Triggers the collapse programmatically.
@@ -61,15 +58,22 @@ const PostCollapsible = class {
         this.isOpen = !this.isOpen;
         if (this.isLoaded)
             this.postToggle.emit(this.isOpen);
-        const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
+        const animation = open ? expand(this.host) : collapse(this.host);
         if (!this.isLoaded || isMotionReduced())
             animation.finish();
         await animation.finished;
         animation.commitStyles();
         return this.isOpen;
     }
+    /**
+     * Update all post-collapsible-trigger elements referring to the collapsible
+     */
+    updateTriggers() {
+        const triggers = document.querySelectorAll(`post-collapsible-trigger[for=${this.host.id}]`);
+        triggers.forEach(trigger => trigger.update());
+    }
     render() {
-        return (h(Host, { key: 'a4c0bed771143ee6aa8683c75296ef1ecdc462dd', id: this.id, "data-version": version }, h("div", { key: 'f2e76d252d572b7054d99ff605ce6d9f3b86a395', class: "collapse", id: `${this.id}--collapse`, ref: el => (this.collapsible = el) }, h("slot", { key: '94c957e18aaa8a990d5edda77e63226fefe76cd9' }))));
+        return (h(Host, { key: 'c24a0524427d6ec5a3a57e12300a5af4cc047a71', "data-version": version }, h("slot", { key: '4d41b67a18ca43acfa0e9ef208c07fa7882baba2' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {