@lukso/web-components 1.162.0 → 1.163.0

package/dist/components/index.cjs

@@ -18,12 +18,12 @@ const components_luksoMarkdownEditor_index = require('./lukso-markdown-editor/in
 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-BYDwEmQd.cjs');
+const components_luksoProfile_index = require('../index-Dv9A3Ltm.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('../index-0s--O024.cjs');
-const components_luksoSearch_index = require('../index-CeucSkmf.cjs');
+const components_luksoSanitize_index = require('../index-CX03Xr6x.cjs');
+const components_luksoSearch_index = require('../index-BHZk9HTM.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');
@@ -31,9 +31,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-GXU76s80.cjs');
+const components_luksoUsername_index = require('../index-D1tHxVU9.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-BFqOU6o6.cjs');
+const shared_tailwindElement_index = require('../index-CE4mgetK.cjs');
 require('../axe-C-H1UVi1.cjs');
 
 

package/dist/components/index.js

@@ -14,12 +14,12 @@ export { LuksoMarkdownEditor } from './lukso-markdown-editor/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-DvdeX3K2.js';
+export { L as LuksoProfile } from '../index-1J-jqsT9.js';
 export { LuksoProgress } from './lukso-progress/index.js';
 export { LuksoRadio } from './lukso-radio/index.js';
 export { LuksoRadioGroup } from './lukso-radio-group/index.js';
-export { D as DEFAULT_OPTIONS, L as LuksoSanitize, N as NO_HTML_TAGS_OPTIONS } from '../index-DZXmXufN.js';
-export { L as LuksoSearch } from '../index-bObYWb9Y.js';
+export { D as DEFAULT_OPTIONS, L as LuksoSanitize, N as NO_HTML_TAGS_OPTIONS } from '../index-BEawLNoE.js';
+export { L as LuksoSearch } from '../index-OytYtq41.js';
 export { LuksoSelect } from './lukso-select/index.js';
 export { LuksoShare } from './lukso-share/index.js';
 export { LuksoSwitch } from './lukso-switch/index.js';
@@ -27,7 +27,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-CIvb8Rdb.js';
+export { L as LuksoUsername } from '../index-B0BrUQTX.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-CQq_Eyeu.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-C4AqmOTg.js';
 import '../axe-BK9JSROP.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-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
-const state = require('../../state-ClR8ink7.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const state = require('../../state-DE9RNbPD.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../../tailwind-config.cjs');
 const axe = require('../../axe-C-H1UVi1.cjs');
@@ -73,8 +73,8 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
             active:text-neutral-35 active:scale-100
             disabled:text-neutral-90`,
           link: "bg-transparent border-none active:!scale-100 underline text-purple-51 hover:text-purple-41",
-          "nav-button": "nav-apax-12-medium-uppercase text-purple-41 !text-12",
-          "nav-text": "bg-transparent border-none nav-apax-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition",
+          "nav-button": "nav-inter-12-medium-uppercase text-purple-41 !text-12",
+          "nav-text": "bg-transparent border-none nav-inter-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition",
           success: `bg-green-54 border-green-54 text-neutral-100
             disabled:hover:!bg-green-54 disabled:hover:!border-green-54
             hover:bg-green-63 hover:border-green-63 before:bg-green-54`,

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, E, x } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
-import { r } from '../../state-n75qAK0V.js';
+import { T as TailwindStyledElement, E, x } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { r } from '../../state-D-OZ3KEf.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../axe-BK9JSROP.js';
@@ -69,8 +69,8 @@ let LuksoButton = class extends TailwindStyledElement(style) {
             active:text-neutral-35 active:scale-100
             disabled:text-neutral-90`,
           link: "bg-transparent border-none active:!scale-100 underline text-purple-51 hover:text-purple-41",
-          "nav-button": "nav-apax-12-medium-uppercase text-purple-41 !text-12",
-          "nav-text": "bg-transparent border-none nav-apax-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition",
+          "nav-button": "nav-inter-12-medium-uppercase text-purple-41 !text-12",
+          "nav-text": "bg-transparent border-none nav-inter-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition",
           success: `bg-green-54 border-green-54 text-neutral-100
             disabled:hover:!bg-green-54 disabled:hover:!border-green-54
             hover:bg-green-63 hover:border-green-63 before:bg-green-54`,

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const components_luksoProfile_index = require('../../index-BYDwEmQd.cjs');
-const shared_tailwindElement_index = require('../../index-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
-const state = require('../../state-ClR8ink7.cjs');
+const components_luksoProfile_index = require('../../index-Dv9A3Ltm.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const state = require('../../state-DE9RNbPD.cjs');
 const base = require('../../base-NFGX42U4.cjs');
-const styleMap = require('../../style-map-DhbNG03r.cjs');
+const styleMap = require('../../style-map-CTRp4AN8.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../../tailwind-config.cjs');
 const axe = require('../../axe-C-H1UVi1.cjs');
 const isAddress = require('../../isAddress-DYM3mZP7.cjs');
-const index$1 = require('../../index-Zriuvita.cjs');
+const index$1 = require('../../index-BgNWF02P.cjs');
 require('../lukso-image/index.cjs');
 
 /**
@@ -207,7 +207,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
             class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-3"
           >
             <div
-              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
+              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-12"
             ></div>
           </div>
           <slot name="content"></slot>
@@ -270,7 +270,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
               class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
             >
               <div
-                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-12"
               ></div>
             </div>
             <slot name="content"></slot>
@@ -306,7 +306,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${axe.cn(
-      "min-h-[40px] bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
+      "min-h-10 bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
       this.headerClass
     )}
         >

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

@@ -1,14 +1,14 @@
-import { m as makeBlockie } from '../../index-DvdeX3K2.js';
-import { T as TailwindStyledElement, x, E } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
-import { r } from '../../state-n75qAK0V.js';
+import { m as makeBlockie } from '../../index-1J-jqsT9.js';
+import { T as TailwindStyledElement, x, E } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { r } from '../../state-D-OZ3KEf.js';
 import { e } from '../../base-Cl6v8-BZ.js';
-import { o as o$1 } from '../../style-map-BBz25umN.js';
+import { o as o$1 } from '../../style-map-CNeYTqXM.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../axe-BK9JSROP.js';
 import { i as isAddress } from '../../isAddress-ZNhN82OL.js';
-import { c as customStyleMap } from '../../index-BOWftFAY.js';
+import { c as customStyleMap } from '../../index-DSByq2Lm.js';
 import '../lukso-image/index.js';
 
 /**
@@ -203,7 +203,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
             class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-3"
           >
             <div
-              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
+              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-12"
             ></div>
           </div>
           <slot name="content"></slot>
@@ -266,7 +266,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
               class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
             >
               <div
-                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-12"
               ></div>
             </div>
             <slot name="content"></slot>
@@ -302,7 +302,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
       backgroundImage: backgroundGradient(this.profileAddress)
     })}
           class=${cn(
-      "min-h-[40px] bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
+      "min-h-10 bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
       this.headerClass
     )}
         >

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
-const state = require('../../state-ClR8ink7.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const state = require('../../state-DE9RNbPD.cjs');
 const index = require('../../index-D0nCA-7X.cjs');
 
 var __defProp = Object.defineProperty;
@@ -71,9 +71,9 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
       [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
       ["border-neutral-60"]: this.isDisabled,
-      ["h-[40px] w-[40px]"]: this.size === "medium",
+      ["h-10 w-[40px]"]: this.size === "medium",
       ["h-[32px] w-[32px]"]: this.size === "small",
-      ["h-[28px] w-[28px]"]: this.size === "x-small",
+      ["h-7 w-[28px]"]: this.size === "x-small",
       [this.customClass]: !!this.customClass
     })}
       >

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x, E } from '../../index-CQq_Eyeu.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BODySN1j.js';
-import { r } from '../../state-n75qAK0V.js';
+import { a as TailwindElement, x, E } from '../../index-C4AqmOTg.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { r } from '../../state-D-OZ3KEf.js';
 import { c as customClassMap } from '../../index-F8ll4iy2.js';
 
 var __defProp = Object.defineProperty;
@@ -67,9 +67,9 @@ let LuksoCheckbox = class extends TailwindElement {
       [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
       [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
       ["border-neutral-60"]: this.isDisabled,
-      ["h-[40px] w-[40px]"]: this.size === "medium",
+      ["h-10 w-[40px]"]: this.size === "medium",
       ["h-[32px] w-[32px]"]: this.size === "small",
-      ["h-[28px] w-[28px]"]: this.size === "x-small",
+      ["h-7 w-[28px]"]: this.size === "x-small",
       [this.customClass]: !!this.customClass
     })}
       >

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-BFqOU6o6.cjs');
-const safeCustomElement = require('../../safe-custom-element-DTADBI4I.cjs');
-const state = require('../../state-ClR8ink7.cjs');
+const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
+const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const state = require('../../state-DE9RNbPD.cjs');
 const query = require('../../query-EFiHeHdi.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../../tailwind-config.cjs');
@@ -25,7 +25,10 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
   constructor() {
     super(...arguments);
     this.label = "";
-    this.secondaryLabel = {
+    this.description = "";
+    this.error = "";
+    this.triggerLabel = "";
+    this.toggleLabel = {
       open: "",
       close: ""
     };
@@ -33,6 +36,7 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
     this.customClass = "";
     this.isDisabled = false;
     this.icon = "";
+    this.size = "large";
     this.maxHeight = "0px";
     this.observedHeight = 0;
     this.onTransitionEnd = (e) => {
@@ -43,11 +47,11 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
     };
     this.collapseStyles = index.ce({
       slots: {
-        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 mr-3",
+        base: "transition transition-all duration-150 border bg-neutral-100",
+        header: "flex items-center justify-between cursor-pointer overflow-hidden",
+        triggerLabel: "",
+        toggleLabel: "",
+        icon: "transition cursor-pointer",
         content: "transition-all duration-250 ease-in-out"
       },
       variants: {
@@ -66,8 +70,59 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
             header: "cursor-not-allowed",
             icon: "opacity-60 cursor-not-allowed"
           }
+        },
+        size: {
+          small: {
+            base: "rounded-8",
+            header: "h-7 pl-2",
+            triggerLabel: "paragraph-inter-12-semi-bold",
+            toggleLabel: "paragraph-inter-12-semi-bold",
+            icon: "mr-1"
+          },
+          medium: {
+            base: "rounded-10",
+            header: "h-10 pl-3",
+            triggerLabel: "paragraph-inter-14-semi-bold",
+            toggleLabel: "paragraph-inter-14-semi-bold",
+            icon: "mr-2"
+          },
+          large: {
+            base: "rounded-12",
+            header: "h-12 pl-4",
+            triggerLabel: "paragraph-inter-14-semi-bold",
+            toggleLabel: "paragraph-inter-14-semi-bold",
+            icon: "mr-3"
+          },
+          "x-large": {
+            base: "rounded-14",
+            header: "h-17 pl-5",
+            triggerLabel: "paragraph-inter-16-semi-bold",
+            toggleLabel: "paragraph-inter-16-semi-bold",
+            icon: "mr-4"
+          }
+        },
+        hasError: {
+          true: {
+            base: "border-red-85 hover:border-red-65",
+            triggerLabel: "text-red-65",
+            toggleLabel: "text-red-65"
+          },
+          false: {
+            base: "border-neutral-90",
+            triggerLabel: "text-neutral-45",
+            toggleLabel: "text-neutral-45"
+          }
         }
-      }
+      },
+      compoundVariants: [
+        {
+          isDisabled: false,
+          hasError: false,
+          class: {
+            base: "hover:border-neutral-35"
+          }
+        }
+      ]
     });
   }
   firstUpdated() {
@@ -99,7 +154,9 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
       }
     } else {
       this.maxHeight = `${height}px`;
-      requestAnimationFrame(() => this.maxHeight = "0px");
+      requestAnimationFrame(() => {
+        this.maxHeight = "0px";
+      });
     }
   }
   toggle() {
@@ -108,40 +165,66 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
       new CustomEvent("toggle", { detail: { open: this.isOpen } })
     );
   }
+  labelTemplate() {
+    return shared_tailwindElement_index.x`
+      <label class="heading-inter-14-bold text-neutral-20 pb-2 block"
+        >${this.label}</label
+      >
+    `;
+  }
+  descriptionTemplate() {
+    return shared_tailwindElement_index.x`
+      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
+        <lukso-sanitize html-content=${this.description}></lukso-sanitize>
+      </div>
+    `;
+  }
+  errorTemplate() {
+    return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
+      ${this.error}
+    </div>`;
+  }
   render() {
-    const { base, header, label, secondary, icon, content } = this.collapseStyles({
+    const { base, header, triggerLabel, toggleLabel, icon, content } = this.collapseStyles({
       isOpen: this.isOpen,
-      isDisabled: this.isDisabled
+      isDisabled: this.isDisabled,
+      size: this.size,
+      hasError: this.error !== ""
     });
     return shared_tailwindElement_index.x`
-      <div class=${axe.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 class="w-[inherit]">
+        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.E}
+        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.E}
+        <div class=${axe.cn(base(), this.customClass)}>
+          <!-- Header -->
+          <div
+            class=${header()}
+            @click=${() => !this.isDisabled && this.toggle()}
+          >
+            <span class=${triggerLabel()}>${this.triggerLabel}</span>
+            <div class="flex items-center">
+              ${this.toggleLabel ? shared_tailwindElement_index.x`<span class=${toggleLabel()}>
+                    ${this.isOpen ? this.toggleLabel?.close : this.toggleLabel?.open}
+                  </span>` : shared_tailwindElement_index.E}
+              ${this.icon ? shared_tailwindElement_index.x`<lukso-icon
+                    name=${this.icon}
+                    class=${icon()}
+                  ></lukso-icon>` : shared_tailwindElement_index.E}
+            </div>
           </div>
-        </div>
 
-        <!-- Content -->
-        <div
-          class=${content()}
-          style="max-height:${this.maxHeight};"
-          @transitionend=${this.onTransitionEnd}
-        >
-          <div class="collapse-content">
-            <slot @slotchange=${() => this.syncHeight()}></slot>
+          <!-- Content -->
+          <div
+            class=${content()}
+            style="max-height:${this.maxHeight};"
+            @transitionend=${this.onTransitionEnd}
+          >
+            <div class="collapse-content">
+              <slot @slotchange=${() => this.syncHeight()}></slot>
+            </div>
           </div>
         </div>
+        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.E}
       </div>
     `;
   }
@@ -150,8 +233,17 @@ __decorateClass([
   safeCustomElement.n({ type: String })
 ], exports.LuksoCollapse.prototype, "label", 2);
 __decorateClass([
-  safeCustomElement.n({ type: Object, attribute: "secondary-label" })
-], exports.LuksoCollapse.prototype, "secondaryLabel", 2);
+  safeCustomElement.n({ type: String })
+], exports.LuksoCollapse.prototype, "description", 2);
+__decorateClass([
+  safeCustomElement.n({ type: String })
+], exports.LuksoCollapse.prototype, "error", 2);
+__decorateClass([
+  safeCustomElement.n({ type: String, attribute: "trigger-label" })
+], exports.LuksoCollapse.prototype, "triggerLabel", 2);
+__decorateClass([
+  safeCustomElement.n({ type: Object, attribute: "toggle-label" })
+], exports.LuksoCollapse.prototype, "toggleLabel", 2);
 __decorateClass([
   safeCustomElement.n({ type: Boolean, attribute: "is-open" })
 ], exports.LuksoCollapse.prototype, "isOpen", 2);
@@ -164,6 +256,9 @@ __decorateClass([
 __decorateClass([
   safeCustomElement.n({ type: String, attribute: "icon" })
 ], exports.LuksoCollapse.prototype, "icon", 2);
+__decorateClass([
+  safeCustomElement.n({ type: String })
+], exports.LuksoCollapse.prototype, "size", 2);
 __decorateClass([
   state.r()
 ], exports.LuksoCollapse.prototype, "maxHeight", 2);

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

@@ -1,7 +1,11 @@
 import { TailwindElement } from '../../shared/tailwind-element';
+import { InputSize } from '../../shared/types';
 export declare class LuksoCollapse extends TailwindElement {
     label: string;
-    secondaryLabel: {
+    description: string;
+    error: string;
+    triggerLabel: string;
+    toggleLabel: {
         open: string;
         close: string;
     };
@@ -9,6 +13,7 @@ export declare class LuksoCollapse extends TailwindElement {
     customClass: string;
     isDisabled: boolean;
     icon: string;
+    size: InputSize;
     private maxHeight;
     private observedHeight;
     private contentElement;
@@ -20,6 +25,9 @@ export declare class LuksoCollapse extends TailwindElement {
     private onTransitionEnd;
     private toggle;
     private collapseStyles;
+    labelTemplate(): import('lit-html').TemplateResult<1>;
+    descriptionTemplate(): import('lit-html').TemplateResult<1>;
+    errorTemplate(): import('lit-html').TemplateResult<1>;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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":"AAKA,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,qBACa,aAAc,SAAQ,eAAe;IAEhD,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAK;IAGjB,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAG3C;IAGD,MAAM,UAAQ;IAGd,WAAW,SAAK;IAGhB,UAAU,UAAQ;IAGlB,IAAI,SAAK;IAGT,IAAI,EAAE,SAAS,CAAU;IAEhB,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;IAqBlB,OAAO,CAAC,eAAe,CAKtB;IAED,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,cAAc,CA+EpB;IAEF,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,MAAM;CAoDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}