@lukso/web-components 1.151.0 → 1.153.0

package/dist/components/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const components_luksoButton_index = require('./lukso-button/index.cjs');
 const components_luksoCard_index = require('./lukso-card/index.cjs');
 const components_luksoCheckbox_index = require('./lukso-checkbox/index.cjs');
+const components_luksoCollapse_index = require('./lukso-collapse/index.cjs');
 const components_luksoColorPicker_index = require('./lukso-color-picker/index.cjs');
 const components_luksoDropdown_index = require('./lukso-dropdown/index.cjs');
 const components_luksoDropdownOption_index = require('./lukso-dropdown-option/index.cjs');
@@ -15,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-c1uDSwY7.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-C8BtW2E5.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');
@@ -28,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-D04k1aOk.cjs');
+const components_luksoUsername_index = require('../index-fSZGRljb.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-ClAf3gfo.cjs');
+const shared_tailwindElement_index = require('../index-DkfODalz.cjs');
 require('../cn-CNdKneQ1.cjs');
 
 
@@ -47,6 +48,10 @@ Object.defineProperty(exports, "LuksoCheckbox", {
 	enumerable: true,
 	get: () => components_luksoCheckbox_index.LuksoCheckbox
 });
+Object.defineProperty(exports, "LuksoCollapse", {
+	enumerable: true,
+	get: () => components_luksoCollapse_index.LuksoCollapse
+});
 Object.defineProperty(exports, "LuksoColorPicker", {
 	enumerable: true,
 	get: () => components_luksoColorPicker_index.LuksoColorPicker

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './lukso-button/index';
 export * from './lukso-card/index';
 export * from './lukso-checkbox/index';
+export * from './lukso-collapse/index';
 export * from './lukso-color-picker/index';
 export * from './lukso-dropdown/index';
 export * from './lukso-dropdown-option/index';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}

package/dist/components/index.js

@@ -1,6 +1,7 @@
 export { LuksoButton } from './lukso-button/index.js';
 export { LuksoCard } from './lukso-card/index.js';
 export { LuksoCheckbox } from './lukso-checkbox/index.js';
+export { LuksoCollapse } from './lukso-collapse/index.js';
 export { LuksoColorPicker } from './lukso-color-picker/index.js';
 export { LuksoDropdown } from './lukso-dropdown/index.js';
 export { LuksoDropdownOption } from './lukso-dropdown-option/index.js';
@@ -11,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-Dv2LId9u.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-BMuX92jU.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';
@@ -24,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-nQ4LOAB_.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-DFCjzim8.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-ClAf3gfo.cjs');
-const property = require('../../property-4wWsjv_3.cjs');
-const state = require('../../state-CbQ1YSsw.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-DFCjzim8.js';
-import { n, t } from '../../property-D2sYKbRI.js';
-import { r } from '../../state-BO7uqVYX.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,16 +2,16 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const components_luksoProfile_index = require('../../index-c1uDSwY7.cjs');
-const shared_tailwindElement_index = require('../../index-ClAf3gfo.cjs');
-const property = require('../../property-4wWsjv_3.cjs');
-const state = require('../../state-CbQ1YSsw.cjs');
-const styleMap = require('../../style-map-BPcLqFw4.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 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-CmQX7QJh.cjs');
-const index$1 = require('../../index-BowjCXFs.cjs');
+const isAddress = require('../../isAddress-B3b91Jxf.cjs');
+const index$1 = require('../../index-m3XGqZFz.cjs');
 require('../lukso-image/index.cjs');
 
 /**

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

@@ -1,13 +1,13 @@
-import { m as makeBlockie } from '../../index-Dv2LId9u.js';
-import { T as TailwindStyledElement, x, E } from '../../index-DFCjzim8.js';
-import { n, t } from '../../property-D2sYKbRI.js';
-import { r } from '../../state-BO7uqVYX.js';
-import { o as o$1 } from '../../style-map-V1HGVVW5.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 { 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-Dwch1XE4.js';
-import { c as customStyleMap } from '../../index-DhBkXd96.js';
+import { i as isAddress } from '../../isAddress-Dq9UN07g.js';
+import { c as customStyleMap } from '../../index-gJTlTDGh.js';
 import '../lukso-image/index.js';
 
 /**

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-ClAf3gfo.cjs');
-const property = require('../../property-4wWsjv_3.cjs');
-const state = require('../../state-CbQ1YSsw.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-DFCjzim8.js';
-import { n, t } from '../../property-D2sYKbRI.js';
-import { r } from '../../state-BO7uqVYX.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

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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');
+require('../lukso-icon/index.cjs');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.secondaryLabel = {
+      open: "",
+      close: ""
+    };
+    this.isOpen = false;
+    this.customClass = "";
+    this.isDisabled = false;
+    this.icon = "";
+    this.maxHeight = "0px";
+    this.collapseStyles = index.ce({
+      slots: {
+        base: "hover:border-neutral-35 ransition 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 mr-3",
+        content: "transition-all duration-250 ease-in-out"
+      },
+      variants: {
+        isOpen: {
+          true: {
+            icon: "rotate-180",
+            content: "opacity-100"
+          },
+          false: {
+            content: "opacity-0"
+          }
+        },
+        isDisabled: {
+          true: {
+            base: "opacity-60",
+            header: "cursor-not-allowed",
+            icon: "opacity-60 cursor-not-allowed"
+          }
+        }
+      }
+    });
+  }
+  firstUpdated() {
+    if (this.isOpen) {
+      this.updateHeight();
+    }
+  }
+  updated(changed) {
+    if (changed.has("isOpen")) {
+      this.updateHeight();
+    }
+  }
+  updateHeight() {
+    const content = this.renderRoot.querySelector(
+      ".collapse-content"
+    );
+    if (!content) return;
+    if (this.isOpen) {
+      this.maxHeight = `${content.scrollHeight}px`;
+    } else {
+      this.maxHeight = `${content.scrollHeight}px`;
+      requestAnimationFrame(() => {
+        this.maxHeight = "0px";
+      });
+    }
+  }
+  toggle() {
+    this.isOpen = !this.isOpen;
+    this.dispatchEvent(
+      new CustomEvent("toggle", { detail: { open: this.isOpen } })
+    );
+  }
+  render() {
+    const { base, header, label, secondary, icon, content } = this.collapseStyles({
+      isOpen: this.isOpen,
+      isDisabled: this.isDisabled
+    });
+    return shared_tailwindElement_index.x`
+      <div class=${cn.cn(base(), this.customClass)}>
+        <!-- Header -->
+        <div
+          class=${header()}
+          @click=${() => !this.isDisabled && this.toggle()}
+        >
+          <span class=${label()}>${this.label}</span>
+          <div class="flex items-center">
+            ${this.secondaryLabel ? shared_tailwindElement_index.x`<span class=${secondary()}>
+                  ${this.isOpen ? this.secondaryLabel.close : this.secondaryLabel.open}
+                </span>` : null}
+            ${this.icon ? shared_tailwindElement_index.x`<lukso-icon
+                  name=${this.icon}
+                  class=${icon()}
+                ></lukso-icon>` : null}
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class=${content()} style="max-height:${this.maxHeight};">
+          <div class="collapse-content"><slot></slot></div>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property.n({ type: String })
+], exports.LuksoCollapse.prototype, "label", 2);
+__decorateClass([
+  property.n({ type: Object, attribute: "secondary-label" })
+], exports.LuksoCollapse.prototype, "secondaryLabel", 2);
+__decorateClass([
+  property.n({ type: Boolean, attribute: "is-open" })
+], exports.LuksoCollapse.prototype, "isOpen", 2);
+__decorateClass([
+  property.n({ type: String, attribute: "custom-class" })
+], exports.LuksoCollapse.prototype, "customClass", 2);
+__decorateClass([
+  property.n({ type: Boolean, attribute: "is-disabled" })
+], exports.LuksoCollapse.prototype, "isDisabled", 2);
+__decorateClass([
+  property.n({ type: String, attribute: "icon" })
+], exports.LuksoCollapse.prototype, "icon", 2);
+__decorateClass([
+  state.r()
+], exports.LuksoCollapse.prototype, "maxHeight", 2);
+exports.LuksoCollapse = __decorateClass([
+  property.t("lukso-collapse")
+], exports.LuksoCollapse);

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

@@ -0,0 +1,25 @@
+import { TailwindElement } from '../../shared/tailwind-element';
+export declare class LuksoCollapse extends TailwindElement {
+    label: string;
+    secondaryLabel: {
+        open: string;
+        close: string;
+    };
+    isOpen: boolean;
+    customClass: string;
+    isDisabled: boolean;
+    icon: string;
+    private maxHeight;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private updateHeight;
+    private toggle;
+    private collapseStyles;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lukso-collapse': LuksoCollapse;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,148 @@
+import { a as TailwindElement, 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';
+import '../lukso-icon/index.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LuksoCollapse = class extends TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.secondaryLabel = {
+      open: "",
+      close: ""
+    };
+    this.isOpen = false;
+    this.customClass = "";
+    this.isDisabled = false;
+    this.icon = "";
+    this.maxHeight = "0px";
+    this.collapseStyles = ce({
+      slots: {
+        base: "hover:border-neutral-35 ransition 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 mr-3",
+        content: "transition-all duration-250 ease-in-out"
+      },
+      variants: {
+        isOpen: {
+          true: {
+            icon: "rotate-180",
+            content: "opacity-100"
+          },
+          false: {
+            content: "opacity-0"
+          }
+        },
+        isDisabled: {
+          true: {
+            base: "opacity-60",
+            header: "cursor-not-allowed",
+            icon: "opacity-60 cursor-not-allowed"
+          }
+        }
+      }
+    });
+  }
+  firstUpdated() {
+    if (this.isOpen) {
+      this.updateHeight();
+    }
+  }
+  updated(changed) {
+    if (changed.has("isOpen")) {
+      this.updateHeight();
+    }
+  }
+  updateHeight() {
+    const content = this.renderRoot.querySelector(
+      ".collapse-content"
+    );
+    if (!content) return;
+    if (this.isOpen) {
+      this.maxHeight = `${content.scrollHeight}px`;
+    } else {
+      this.maxHeight = `${content.scrollHeight}px`;
+      requestAnimationFrame(() => {
+        this.maxHeight = "0px";
+      });
+    }
+  }
+  toggle() {
+    this.isOpen = !this.isOpen;
+    this.dispatchEvent(
+      new CustomEvent("toggle", { detail: { open: this.isOpen } })
+    );
+  }
+  render() {
+    const { base, header, label, secondary, icon, content } = this.collapseStyles({
+      isOpen: this.isOpen,
+      isDisabled: this.isDisabled
+    });
+    return x`
+      <div class=${cn(base(), this.customClass)}>
+        <!-- Header -->
+        <div
+          class=${header()}
+          @click=${() => !this.isDisabled && this.toggle()}
+        >
+          <span class=${label()}>${this.label}</span>
+          <div class="flex items-center">
+            ${this.secondaryLabel ? x`<span class=${secondary()}>
+                  ${this.isOpen ? this.secondaryLabel.close : this.secondaryLabel.open}
+                </span>` : null}
+            ${this.icon ? x`<lukso-icon
+                  name=${this.icon}
+                  class=${icon()}
+                ></lukso-icon>` : null}
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class=${content()} style="max-height:${this.maxHeight};">
+          <div class="collapse-content"><slot></slot></div>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  n({ type: String })
+], LuksoCollapse.prototype, "label", 2);
+__decorateClass([
+  n({ type: Object, attribute: "secondary-label" })
+], LuksoCollapse.prototype, "secondaryLabel", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-open" })
+], LuksoCollapse.prototype, "isOpen", 2);
+__decorateClass([
+  n({ type: String, attribute: "custom-class" })
+], LuksoCollapse.prototype, "customClass", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-disabled" })
+], LuksoCollapse.prototype, "isDisabled", 2);
+__decorateClass([
+  n({ type: String, attribute: "icon" })
+], LuksoCollapse.prototype, "icon", 2);
+__decorateClass([
+  r()
+], LuksoCollapse.prototype, "maxHeight", 2);
+LuksoCollapse = __decorateClass([
+  t("lukso-collapse")
+], LuksoCollapse);
+
+export { LuksoCollapse };

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

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/web-components-vite';
+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;
+export declare const WithSelector: any;
+//# sourceMappingURL=lukso-collapse.stories.d.ts.map

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

@@ -0,0 +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;AAChB,OAAO,uBAAuB,CAAA;AAE9B,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;AAqBhD,eAAO,MAAM,YAAY,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-ClAf3gfo.cjs');
-const property = require('../../property-4wWsjv_3.cjs');
-const state = require('../../state-CbQ1YSsw.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-BPcLqFw4.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-DFCjzim8.js';
-import { n, t } from '../../property-D2sYKbRI.js';
-import { r } from '../../state-BO7uqVYX.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-V1HGVVW5.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-ClAf3gfo.cjs');
-const property = require('../../property-4wWsjv_3.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-c1uDSwY7.cjs');
-require('../../index-D04k1aOk.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-DFCjzim8.js';
-import { n, t } from '../../property-D2sYKbRI.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-Dv2LId9u.js';
-import '../../index-nQ4LOAB_.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-ClAf3gfo.cjs');
-const property = require('../../property-4wWsjv_3.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-DFCjzim8.js';
-import { n, t } from '../../property-D2sYKbRI.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-ClAf3gfo.cjs');
-const property = require('../../property-4wWsjv_3.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-DFCjzim8.js';
-import { n, t } from '../../property-D2sYKbRI.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;