@lukso/web-components 1.152.0 → 1.154.0

package/dist/base-Cl6v8-BZ.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+export { e };

package/dist/base-NFGX42U4.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+exports.e = e;

package/dist/components/index.cjs

@@ -16,12 +16,12 @@ const components_luksoInput_index = require('./lukso-input/index.cjs');
 const components_luksoModal_index = require('./lukso-modal/index.cjs');
 const components_luksoNavbar_index = require('./lukso-navbar/index.cjs');
 const components_luksoPagination_index = require('./lukso-pagination/index.cjs');
-const components_luksoProfile_index = require('../index-DaUM7s7o.cjs');
+const components_luksoProfile_index = require('../index-U4Y7KwZv.cjs');
 const components_luksoProgress_index = require('./lukso-progress/index.cjs');
 const components_luksoRadio_index = require('./lukso-radio/index.cjs');
 const components_luksoRadioGroup_index = require('./lukso-radio-group/index.cjs');
 const components_luksoSanitize_index = require('./lukso-sanitize/index.cjs');
-const components_luksoSearch_index = require('../index-CIZzn-j8.cjs');
+const components_luksoSearch_index = require('../index-Dg9hcDqR.cjs');
 const components_luksoSelect_index = require('./lukso-select/index.cjs');
 const components_luksoShare_index = require('./lukso-share/index.cjs');
 const components_luksoSwitch_index = require('./lukso-switch/index.cjs');
@@ -29,9 +29,9 @@ const components_luksoTag_index = require('./lukso-tag/index.cjs');
 const components_luksoTerms_index = require('./lukso-terms/index.cjs');
 const components_luksoTextarea_index = require('./lukso-textarea/index.cjs');
 const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
-const components_luksoUsername_index = require('../index-DQWc7SKC.cjs');
+const components_luksoUsername_index = require('../index-fSZGRljb.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-DKXUCmZ9.cjs');
+const shared_tailwindElement_index = require('../index-DkfODalz.cjs');
 require('../cn-CNdKneQ1.cjs');
 
 

package/dist/components/index.js

@@ -12,12 +12,12 @@ export { LuksoInput } from './lukso-input/index.js';
 export { LuksoModal } from './lukso-modal/index.js';
 export { LuksoNavbar } from './lukso-navbar/index.js';
 export { LuksoPagination } from './lukso-pagination/index.js';
-export { L as LuksoProfile } from '../index-DCxKDPzL.js';
+export { L as LuksoProfile } from '../index-CvWyP3CS.js';
 export { LuksoProgress } from './lukso-progress/index.js';
 export { LuksoRadio } from './lukso-radio/index.js';
 export { LuksoRadioGroup } from './lukso-radio-group/index.js';
 export { LuksoSanitize } from './lukso-sanitize/index.js';
-export { L as LuksoSearch } from '../index-ClY4WCoF.js';
+export { L as LuksoSearch } from '../index-DUwutUFV.js';
 export { LuksoSelect } from './lukso-select/index.js';
 export { LuksoShare } from './lukso-share/index.js';
 export { LuksoSwitch } from './lukso-switch/index.js';
@@ -25,7 +25,7 @@ export { LuksoTag } from './lukso-tag/index.js';
 export { LuksoTerms } from './lukso-terms/index.js';
 export { LuksoTextarea } from './lukso-textarea/index.js';
 export { LuksoTooltip } from './lukso-tooltip/index.js';
-export { L as LuksoUsername } from '../index-B8OjQ3J3.js';
+export { L as LuksoUsername } from '../index-6Bz9XVC3.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-LyJ1o9RN.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-C9vH8YlV.js';
 import '../cn-Cu9aP49j.js';

package/dist/components/lukso-button/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-DKXUCmZ9.cjs');
-const property = require('../../property-DEgM7RLm.cjs');
-const state = require('../../state-D5qmKvZx.cjs');
+const shared_tailwindElement_index = require('../../index-DkfODalz.cjs');
+const property = require('../../property-BXmHod5d.cjs');
+const state = require('../../state-CW2YmM3f.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-CNdKneQ1.cjs');

package/dist/components/lukso-button/index.js

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, E, x } from '../../index-LyJ1o9RN.js';
-import { n, t } from '../../property-B4lb2hEb.js';
-import { r } from '../../state-DMM56pp-.js';
+import { T as TailwindStyledElement, E, x } from '../../index-C9vH8YlV.js';
+import { n, t } from '../../property-B4XYi6Sk.js';
+import { r } from '../../state-CkvZ4IP8.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-Cu9aP49j.js';

package/dist/components/lukso-card/index.cjs

@@ -2,30 +2,24 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const components_luksoProfile_index = require('../../index-DaUM7s7o.cjs');
-const shared_tailwindElement_index = require('../../index-DKXUCmZ9.cjs');
-const property = require('../../property-DEgM7RLm.cjs');
-const state = require('../../state-D5qmKvZx.cjs');
-const styleMap = require('../../style-map-DmaHQ6RH.cjs');
+const components_luksoProfile_index = require('../../index-U4Y7KwZv.cjs');
+const shared_tailwindElement_index = require('../../index-DkfODalz.cjs');
+const property = require('../../property-BXmHod5d.cjs');
+const state = require('../../state-CW2YmM3f.cjs');
+const base = require('../../base-NFGX42U4.cjs');
+const styleMap = require('../../style-map-c2S85yDu.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-CNdKneQ1.cjs');
 const isAddress = require('../../isAddress-B3b91Jxf.cjs');
-const index$1 = require('../../index-D6Gca4wb.cjs');
+const index$1 = require('../../index-m3XGqZFz.cjs');
 require('../lukso-image/index.cjs');
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const e=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
-
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function o(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}
+ */function o(o){return (e,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return base.e(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}
 
 const backgroundGradient = (address) => {
   let gradientStart = "#24354210";

package/dist/components/lukso-card/index.js

@@ -1,22 +1,16 @@
-import { m as makeBlockie } from '../../index-DCxKDPzL.js';
-import { T as TailwindStyledElement, x, E } from '../../index-LyJ1o9RN.js';
-import { n, t } from '../../property-B4lb2hEb.js';
-import { r } from '../../state-DMM56pp-.js';
-import { o as o$1 } from '../../style-map-7bFOLcGG.js';
+import { m as makeBlockie } from '../../index-CvWyP3CS.js';
+import { T as TailwindStyledElement, x, E } from '../../index-C9vH8YlV.js';
+import { n, t } from '../../property-B4XYi6Sk.js';
+import { r } from '../../state-CkvZ4IP8.js';
+import { e } from '../../base-Cl6v8-BZ.js';
+import { o as o$1 } from '../../style-map-D1R4wi4h.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-Cu9aP49j.js';
 import { i as isAddress } from '../../isAddress-Dq9UN07g.js';
-import { c as customStyleMap } from '../../index-CJKQ25eW.js';
+import { c as customStyleMap } from '../../index-gJTlTDGh.js';
 import '../lukso-image/index.js';
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const e=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
-
 /**
  * @license
  * Copyright 2021 Google LLC

package/dist/components/lukso-checkbox/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-DKXUCmZ9.cjs');
-const property = require('../../property-DEgM7RLm.cjs');
-const state = require('../../state-D5qmKvZx.cjs');
+const shared_tailwindElement_index = require('../../index-DkfODalz.cjs');
+const property = require('../../property-BXmHod5d.cjs');
+const state = require('../../state-CW2YmM3f.cjs');
 const index = require('../../index-D0nCA-7X.cjs');
 
 var __defProp = Object.defineProperty;

package/dist/components/lukso-checkbox/index.js

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x, E } from '../../index-LyJ1o9RN.js';
-import { n, t } from '../../property-B4lb2hEb.js';
-import { r } from '../../state-DMM56pp-.js';
+import { a as TailwindElement, x, E } from '../../index-C9vH8YlV.js';
+import { n, t } from '../../property-B4XYi6Sk.js';
+import { r } from '../../state-CkvZ4IP8.js';
 import { c as customClassMap } from '../../index-F8ll4iy2.js';
 
 var __defProp = Object.defineProperty;

package/dist/components/lukso-collapse/index.cjs

@@ -2,14 +2,21 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-DKXUCmZ9.cjs');
-const property = require('../../property-DEgM7RLm.cjs');
-const state = require('../../state-D5qmKvZx.cjs');
+const shared_tailwindElement_index = require('../../index-DkfODalz.cjs');
+const property = require('../../property-BXmHod5d.cjs');
+const state = require('../../state-CW2YmM3f.cjs');
+const base = require('../../base-NFGX42U4.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-CNdKneQ1.cjs');
 require('../lukso-icon/index.cjs');
 
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return base.e(n,s,{get(){return o(this)}})}}
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -33,14 +40,21 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
     this.isDisabled = false;
     this.icon = "";
     this.maxHeight = "0px";
+    this.observedHeight = 0;
+    this.onTransitionEnd = (e) => {
+      if (e.propertyName !== "max-height") return;
+      this.dispatchEvent(
+        new CustomEvent(this.isOpen ? "after-enter" : "after-leave")
+      );
+    };
     this.collapseStyles = index.ce({
       slots: {
-        base: "",
-        header: "flex items-center justify-between cursor-pointer px-4 py-3",
+        base: "hover:border-neutral-35 transition transition-all duration-150",
+        header: "flex items-center justify-between cursor-pointer ml-3 py-2",
         label: "text-neutral-45 paragraph-inter-14-semi-bold",
         secondary: "text-neutral-45 paragraph-inter-14-semi-bold",
-        icon: "transition cursor-pointer",
-        content: "overflow-hidden transition-all duration-300 ease-in-out"
+        icon: "transition cursor-pointer mr-3",
+        content: "transition-all duration-250 ease-in-out"
       },
       variants: {
         isOpen: {
@@ -63,27 +77,35 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
     });
   }
   firstUpdated() {
-    if (this.isOpen) {
-      this.updateHeight();
+    if ("ResizeObserver" in window) {
+      this.resizeObserver = new ResizeObserver(() => this.syncHeight());
+      this.resizeObserver.observe(this.contentElement);
     }
+    this.syncHeight(true);
+  }
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect();
+    super.disconnectedCallback();
   }
   updated(changed) {
     if (changed.has("isOpen")) {
-      this.updateHeight();
+      this.syncHeight();
     }
   }
-  updateHeight() {
-    const content = this.renderRoot.querySelector(
-      ".collapse-content"
-    );
+  syncHeight(immediate = false) {
+    const content = this.contentElement;
     if (!content) return;
+    const height = content.scrollHeight;
+    this.observedHeight = height;
     if (this.isOpen) {
-      this.maxHeight = `${content.scrollHeight}px`;
+      if (immediate) {
+        this.maxHeight = `${height}px`;
+      } else {
+        if (this.maxHeight !== `${height}px`) this.maxHeight = `${height}px`;
+      }
     } else {
-      this.maxHeight = `${content.scrollHeight}px`;
-      requestAnimationFrame(() => {
-        this.maxHeight = "0px";
-      });
+      this.maxHeight = `${height}px`;
+      requestAnimationFrame(() => this.maxHeight = "0px");
     }
   }
   toggle() {
@@ -105,7 +127,7 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
           @click=${() => !this.isDisabled && this.toggle()}
         >
           <span class=${label()}>${this.label}</span>
-          <div class="flex items-center space-x-2 mr-2">
+          <div class="flex items-center">
             ${this.secondaryLabel ? shared_tailwindElement_index.x`<span class=${secondary()}>
                   ${this.isOpen ? this.secondaryLabel.close : this.secondaryLabel.open}
                 </span>` : null}
@@ -117,8 +139,14 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
         </div>
 
         <!-- Content -->
-        <div class=${content()} style="max-height:${this.maxHeight};">
-          <div class="collapse-content"><slot></slot></div>
+        <div
+          class=${content()}
+          style="max-height:${this.maxHeight};"
+          @transitionend=${this.onTransitionEnd}
+        >
+          <div class="collapse-content">
+            <slot @slotchange=${() => this.syncHeight()}></slot>
+          </div>
         </div>
       </div>
     `;
@@ -145,6 +173,12 @@ __decorateClass([
 __decorateClass([
   state.r()
 ], exports.LuksoCollapse.prototype, "maxHeight", 2);
+__decorateClass([
+  state.r()
+], exports.LuksoCollapse.prototype, "observedHeight", 2);
+__decorateClass([
+  e(".collapse-content")
+], exports.LuksoCollapse.prototype, "contentElement", 2);
 exports.LuksoCollapse = __decorateClass([
   property.t("lukso-collapse")
 ], exports.LuksoCollapse);

package/dist/components/lukso-collapse/index.d.ts

@@ -10,9 +10,14 @@ export declare class LuksoCollapse extends TailwindElement {
     isDisabled: boolean;
     icon: string;
     private maxHeight;
+    private observedHeight;
+    private contentElement;
+    private resizeObserver?;
     firstUpdated(): void;
+    disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
-    private updateHeight;
+    private syncHeight;
+    private onTransitionEnd;
     private toggle;
     private collapseStyles;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/lukso-collapse/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,yBAAyB,CAAA;AAEhC,qBACa,aAAc,SAAQ,eAAe;IAEhD,KAAK,SAAK;IAGV,cAAc,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAG9C;IAGD,MAAM,UAAQ;IAGd,WAAW,SAAK;IAGhB,UAAU,UAAQ;IAGlB,IAAI,SAAK;IAEA,OAAO,CAAC,SAAS,CAAQ;IAElC,YAAY;IAMZ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,cAAc,CA2BpB;IAEF,MAAM;CAuCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,yBAAyB,CAAA;AAEhC,qBACa,aAAc,SAAQ,eAAe;IAEhD,KAAK,SAAK;IAGV,cAAc,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAG9C;IAGD,MAAM,UAAQ;IAGd,WAAW,SAAK;IAGhB,UAAU,UAAQ;IAGlB,IAAI,SAAK;IAEA,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,cAAc,CAAI;IAEP,OAAO,CAAC,cAAc,CAAc;IAChE,OAAO,CAAC,cAAc,CAAC,CAAgB;IAEvC,YAAY;IAQZ,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,eAAe,CAKtB;IAED,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,cAAc,CA2BpB;IAEF,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

package/dist/components/lukso-collapse/index.js

@@ -1,11 +1,18 @@
-import { a as TailwindElement, x } from '../../index-LyJ1o9RN.js';
-import { n, t } from '../../property-B4lb2hEb.js';
-import { r } from '../../state-DMM56pp-.js';
+import { a as TailwindElement, x } from '../../index-C9vH8YlV.js';
+import { n, t } from '../../property-B4XYi6Sk.js';
+import { r } from '../../state-CkvZ4IP8.js';
+import { e as e$1 } from '../../base-Cl6v8-BZ.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-Cu9aP49j.js';
 import '../lukso-icon/index.js';
 
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -29,14 +36,21 @@ let LuksoCollapse = class extends TailwindElement {
     this.isDisabled = false;
     this.icon = "";
     this.maxHeight = "0px";
+    this.observedHeight = 0;
+    this.onTransitionEnd = (e) => {
+      if (e.propertyName !== "max-height") return;
+      this.dispatchEvent(
+        new CustomEvent(this.isOpen ? "after-enter" : "after-leave")
+      );
+    };
     this.collapseStyles = ce({
       slots: {
-        base: "",
-        header: "flex items-center justify-between cursor-pointer px-4 py-3",
+        base: "hover:border-neutral-35 transition transition-all duration-150",
+        header: "flex items-center justify-between cursor-pointer ml-3 py-2",
         label: "text-neutral-45 paragraph-inter-14-semi-bold",
         secondary: "text-neutral-45 paragraph-inter-14-semi-bold",
-        icon: "transition cursor-pointer",
-        content: "overflow-hidden transition-all duration-300 ease-in-out"
+        icon: "transition cursor-pointer mr-3",
+        content: "transition-all duration-250 ease-in-out"
       },
       variants: {
         isOpen: {
@@ -59,27 +73,35 @@ let LuksoCollapse = class extends TailwindElement {
     });
   }
   firstUpdated() {
-    if (this.isOpen) {
-      this.updateHeight();
+    if ("ResizeObserver" in window) {
+      this.resizeObserver = new ResizeObserver(() => this.syncHeight());
+      this.resizeObserver.observe(this.contentElement);
     }
+    this.syncHeight(true);
+  }
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect();
+    super.disconnectedCallback();
   }
   updated(changed) {
     if (changed.has("isOpen")) {
-      this.updateHeight();
+      this.syncHeight();
     }
   }
-  updateHeight() {
-    const content = this.renderRoot.querySelector(
-      ".collapse-content"
-    );
+  syncHeight(immediate = false) {
+    const content = this.contentElement;
     if (!content) return;
+    const height = content.scrollHeight;
+    this.observedHeight = height;
     if (this.isOpen) {
-      this.maxHeight = `${content.scrollHeight}px`;
+      if (immediate) {
+        this.maxHeight = `${height}px`;
+      } else {
+        if (this.maxHeight !== `${height}px`) this.maxHeight = `${height}px`;
+      }
     } else {
-      this.maxHeight = `${content.scrollHeight}px`;
-      requestAnimationFrame(() => {
-        this.maxHeight = "0px";
-      });
+      this.maxHeight = `${height}px`;
+      requestAnimationFrame(() => this.maxHeight = "0px");
     }
   }
   toggle() {
@@ -101,7 +123,7 @@ let LuksoCollapse = class extends TailwindElement {
           @click=${() => !this.isDisabled && this.toggle()}
         >
           <span class=${label()}>${this.label}</span>
-          <div class="flex items-center space-x-2 mr-2">
+          <div class="flex items-center">
             ${this.secondaryLabel ? x`<span class=${secondary()}>
                   ${this.isOpen ? this.secondaryLabel.close : this.secondaryLabel.open}
                 </span>` : null}
@@ -113,8 +135,14 @@ let LuksoCollapse = class extends TailwindElement {
         </div>
 
         <!-- Content -->
-        <div class=${content()} style="max-height:${this.maxHeight};">
-          <div class="collapse-content"><slot></slot></div>
+        <div
+          class=${content()}
+          style="max-height:${this.maxHeight};"
+          @transitionend=${this.onTransitionEnd}
+        >
+          <div class="collapse-content">
+            <slot @slotchange=${() => this.syncHeight()}></slot>
+          </div>
         </div>
       </div>
     `;
@@ -141,6 +169,12 @@ __decorateClass([
 __decorateClass([
   r()
 ], LuksoCollapse.prototype, "maxHeight", 2);
+__decorateClass([
+  r()
+], LuksoCollapse.prototype, "observedHeight", 2);
+__decorateClass([
+  e(".collapse-content")
+], LuksoCollapse.prototype, "contentElement", 2);
 LuksoCollapse = __decorateClass([
   t("lukso-collapse")
 ], LuksoCollapse);

package/dist/components/lukso-collapse/lukso-collapse.stories.d.ts

@@ -1,9 +1,17 @@
 import { Meta } from '@storybook/web-components-vite';
+/**  Documentation and examples of `lukso-collapse` component. */
 declare const meta: Meta;
 export default meta;
-export declare const DefaultClosed: any;
-export declare const DefaultOpen: any;
-export declare const DefaultDisabled: any;
-export declare const WithCustomClass: any;
-export declare const WithLongContent: any;
+/** Example of `lukso-collapse` */
+export declare const LuksoCollapse: any;
+/** Example of lukso-collapse `open` by default */
+export declare const CollapseOpen: any;
+/** Example of lukso-collapse `disabled` */
+export declare const CollapseDisabled: any;
+/** Example of lukso-collapse with a `custom CSS class` */
+export declare const CollapseWithCustomClass: any;
+/** Example of lukso-collapse with `longer content` */
+export declare const CollapseWithLongContent: any;
+/** Example of lukso-collapse with a `selector` as content */
+export declare const CollapseWithSelector: any;
 //# sourceMappingURL=lukso-collapse.stories.d.ts.map

package/dist/components/lukso-collapse/lukso-collapse.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-collapse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/lukso-collapse.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,SAAS,CAAA;AAEhB,QAAA,MAAM,IAAI,EAAE,IAuFX,CAAA;AAED,eAAe,IAAI,CAAA;AA4BnB,eAAO,MAAM,aAAa,KAAoB,CAAA;AAS9C,eAAO,MAAM,WAAW,KAAoB,CAAA;AAQ5C,eAAO,MAAM,eAAe,KAAoB,CAAA;AAUhD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAOhD,eAAO,MAAM,eAAe,KAAoB,CAAA"}
+{"version":3,"file":"lukso-collapse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/lukso-collapse.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,iEAAiE;AACjE,QAAA,MAAM,IAAI,EAAE,IA+FX,CAAA;AAED,eAAe,IAAI,CAAA;AA4BnB,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAS9C,kDAAkD;AAClD,eAAO,MAAM,YAAY,KAAoB,CAAA;AAa7C,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,KAAoB,CAAA;AAUjD,0DAA0D;AAC1D,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAYxD,sDAAsD;AACtD,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAqBxD,6DAA6D;AAC7D,eAAO,MAAM,oBAAoB,KAAoB,CAAA"}

package/dist/components/lukso-color-picker/index.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-DKXUCmZ9.cjs');
-const property = require('../../property-DEgM7RLm.cjs');
-const state = require('../../state-D5qmKvZx.cjs');
+const shared_tailwindElement_index = require('../../index-DkfODalz.cjs');
+const property = require('../../property-BXmHod5d.cjs');
+const state = require('../../state-CW2YmM3f.cjs');
 const index = require('../../index-CaJky2qL.cjs');
-const styleMap = require('../../style-map-DmaHQ6RH.cjs');
+const styleMap = require('../../style-map-c2S85yDu.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-CNdKneQ1.cjs');
 require('../lukso-icon/index.cjs');

package/dist/components/lukso-color-picker/index.js

@@ -1,8 +1,8 @@
-import { T as TailwindStyledElement, E, x } from '../../index-LyJ1o9RN.js';
-import { n, t } from '../../property-B4lb2hEb.js';
-import { r } from '../../state-DMM56pp-.js';
+import { T as TailwindStyledElement, E, x } from '../../index-C9vH8YlV.js';
+import { n, t } from '../../property-B4XYi6Sk.js';
+import { r } from '../../state-CkvZ4IP8.js';
 import { c as ce } from '../../index-B9iart53.js';
-import { o } from '../../style-map-7bFOLcGG.js';
+import { o } from '../../style-map-D1R4wi4h.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-Cu9aP49j.js';
 import '../lukso-icon/index.js';

package/dist/components/lukso-dropdown/index.cjs

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-DKXUCmZ9.cjs');
-const property = require('../../property-DEgM7RLm.cjs');
+const shared_tailwindElement_index = require('../../index-DkfODalz.cjs');
+const property = require('../../property-BXmHod5d.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../lukso-icon/index.cjs');
-require('../../index-DaUM7s7o.cjs');
-require('../../index-DQWc7SKC.cjs');
+require('../../index-U4Y7KwZv.cjs');
+require('../../index-fSZGRljb.cjs');
 const uniqId = require('../../uniq-id-Cszs24DQ.cjs');
 
 const debounceFunction = (func, timeout = 100) => {

package/dist/components/lukso-dropdown/index.js

@@ -1,9 +1,9 @@
-import { T as TailwindStyledElement, E, x } from '../../index-LyJ1o9RN.js';
-import { n, t } from '../../property-B4lb2hEb.js';
+import { T as TailwindStyledElement, E, x } from '../../index-C9vH8YlV.js';
+import { n, t } from '../../property-B4XYi6Sk.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../lukso-icon/index.js';
-import '../../index-DCxKDPzL.js';
-import '../../index-B8OjQ3J3.js';
+import '../../index-CvWyP3CS.js';
+import '../../index-6Bz9XVC3.js';
 import { u as uniqId } from '../../uniq-id-CGUN-pJV.js';
 
 const debounceFunction = (func, timeout = 100) => {

package/dist/components/lukso-dropdown-option/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-DKXUCmZ9.cjs');
-const property = require('../../property-DEgM7RLm.cjs');
+const shared_tailwindElement_index = require('../../index-DkfODalz.cjs');
+const property = require('../../property-BXmHod5d.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 
 const style = ":host {\n    display: block\n}";

package/dist/components/lukso-dropdown-option/index.js

@@ -1,5 +1,5 @@
-import { T as TailwindStyledElement, x } from '../../index-LyJ1o9RN.js';
-import { n, t } from '../../property-B4lb2hEb.js';
+import { T as TailwindStyledElement, x } from '../../index-C9vH8YlV.js';
+import { n, t } from '../../property-B4XYi6Sk.js';
 import { c as ce } from '../../index-B9iart53.js';
 
 const style = ":host {\n    display: block\n}";

package/dist/components/lukso-footer/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-DKXUCmZ9.cjs');
-const property = require('../../property-DEgM7RLm.cjs');
+const shared_tailwindElement_index = require('../../index-DkfODalz.cjs');
+const property = require('../../property-BXmHod5d.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-footer/index.js

@@ -1,5 +1,5 @@
-import { a as TailwindElement, x } from '../../index-LyJ1o9RN.js';
-import { n, t } from '../../property-B4lb2hEb.js';
+import { a as TailwindElement, x } from '../../index-C9vH8YlV.js';
+import { n, t } from '../../property-B4XYi6Sk.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;