@swisspost/design-system-components 7.2.1 → 7.3.1

package/dist/cjs/{post-collapsible-bf63b152.js → post-collapsible-cd75e40d.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-49177437.js');
-const _package = require('./package-198f981b.js');
-const index$1 = require('./index-a1440961.js');
+const index = require('./index-1cc8e4e1.js');
+const _package = require('./package-53cbf42f.js');
+const index$1 = require('./index-f32e5185.js');
 
 function isMotionReduced() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -26,7 +26,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 {
@@ -35,7 +35,6 @@ const PostCollapsible = class {
         this.postToggle = index.createEvent(this, "postToggle", 7);
         this.isLoaded = false;
         this.isOpen = true;
-        this.id = undefined;
         this.collapsed = false;
     }
     validateCollapsed(newValue = this.collapsed) {
@@ -44,13 +43,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.
@@ -63,15 +60,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 (index.h(index.Host, { key: 'a4c0bed771143ee6aa8683c75296ef1ecdc462dd', id: this.id, "data-version": _package.version }, index.h("div", { key: 'f2e76d252d572b7054d99ff605ce6d9f3b86a395', class: "collapse", id: `${this.id}--collapse`, ref: el => (this.collapsible = el) }, index.h("slot", { key: '94c957e18aaa8a990d5edda77e63226fefe76cd9' }))));
+        return (index.h(index.Host, { key: 'c24a0524427d6ec5a3a57e12300a5af4cc047a71', "data-version": _package.version }, index.h("slot", { key: '4d41b67a18ca43acfa0e9ef208c07fa7882baba2' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {