@lukso/web-components 1.162.0 → 1.164.0

package/dist/components/index.cjs

@@ -10,6 +10,9 @@ const components_luksoColorPicker_index = require('./lukso-color-picker/index.cj
 const components_luksoDropdown_index = require('./lukso-dropdown/index.cjs');
 const components_luksoDropdownOption_index = require('./lukso-dropdown-option/index.cjs');
 const components_luksoFooter_index = require('./lukso-footer/index.cjs');
+const components_luksoFormDescription_index = require('./lukso-form-description/index.cjs');
+const components_luksoFormError_index = require('./lukso-form-error/index.cjs');
+const components_luksoFormLabel_index = require('./lukso-form-label/index.cjs');
 const components_luksoIcon_index = require('./lukso-icon/index.cjs');
 const components_luksoImage_index = require('./lukso-image/index.cjs');
 const components_luksoInput_index = require('./lukso-input/index.cjs');
@@ -18,12 +21,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-Cke4NczR.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-DMRL6USt.cjs');
+const components_luksoSearch_index = require('../index-DnHJ7FVk.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 +34,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-D_vmwNxA.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-BFqOU6o6.cjs');
+const shared_tailwindElement_index = require('../index-vTOZ4l_5.cjs');
 require('../axe-C-H1UVi1.cjs');
 
 
@@ -70,6 +73,18 @@ Object.defineProperty(exports, "LuksoFooter", {
 	enumerable: true,
 	get: () => components_luksoFooter_index.LuksoFooter
 });
+Object.defineProperty(exports, "LuksoFormDescription", {
+	enumerable: true,
+	get: () => components_luksoFormDescription_index.LuksoFormDescription
+});
+Object.defineProperty(exports, "LuksoFormError", {
+	enumerable: true,
+	get: () => components_luksoFormError_index.LuksoFormError
+});
+Object.defineProperty(exports, "LuksoFormLabel", {
+	enumerable: true,
+	get: () => components_luksoFormLabel_index.LuksoFormLabel
+});
 Object.defineProperty(exports, "LuksoIcon", {
 	enumerable: true,
 	get: () => components_luksoIcon_index.LuksoIcon

package/dist/components/index.d.ts

@@ -6,6 +6,9 @@ export * from './lukso-color-picker/index';
 export * from './lukso-dropdown/index';
 export * from './lukso-dropdown-option/index';
 export * from './lukso-footer/index';
+export * from './lukso-form-description/index';
+export * from './lukso-form-error/index';
+export * from './lukso-form-label/index';
 export * from './lukso-icon/index';
 export * from './lukso-image/index';
 export * from './lukso-input/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,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,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,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,gCAAgC,CAAA;AAC9C,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,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

@@ -6,6 +6,9 @@ export { LuksoColorPicker } from './lukso-color-picker/index.js';
 export { LuksoDropdown } from './lukso-dropdown/index.js';
 export { LuksoDropdownOption } from './lukso-dropdown-option/index.js';
 export { LuksoFooter } from './lukso-footer/index.js';
+export { LuksoFormDescription } from './lukso-form-description/index.js';
+export { LuksoFormError } from './lukso-form-error/index.js';
+export { LuksoFormLabel } from './lukso-form-label/index.js';
 export { LuksoIcon } from './lukso-icon/index.js';
 export { LuksoImage } from './lukso-image/index.js';
 export { LuksoInput } from './lukso-input/index.js';
@@ -14,12 +17,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-JTvbIE4S.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-BOwyGlSA.js';
+export { L as LuksoSearch } from '../index-BbIFBzwC.js';
 export { LuksoSelect } from './lukso-select/index.js';
 export { LuksoShare } from './lukso-share/index.js';
 export { LuksoSwitch } from './lukso-switch/index.js';
@@ -27,7 +30,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-PSjywfTJ.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-BzYTn3KQ.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-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.cjs');
+const state = require('../../state-CAX-E_Ev.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-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
+import { r } from '../../state-YyDFqXia.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-Cke4NczR.cjs');
+const shared_tailwindElement_index = require('../../index-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.cjs');
+const state = require('../../state-CAX-E_Ev.cjs');
 const base = require('../../base-NFGX42U4.cjs');
-const styleMap = require('../../style-map-DhbNG03r.cjs');
+const styleMap = require('../../style-map-GvPMWlOB.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-CQt6teGk.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-JTvbIE4S.js';
+import { T as TailwindStyledElement, x, E } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
+import { r } from '../../state-YyDFqXia.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-BpMy_EP7.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-CiqeQyTr.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,10 +2,12 @@
 
 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-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.cjs');
+const state = require('../../state-CAX-E_Ev.cjs');
 const index = require('../../index-D0nCA-7X.cjs');
+require('../lukso-form-description/index.cjs');
+require('../lukso-form-error/index.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,14 +22,16 @@ var __decorateClass = (decorators, target, key, kind) => {
 exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index.TailwindElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.id = "";
+    this.name = void 0;
+    this.id = void 0;
     this.ref = void 0;
     this.type = "text";
     this.size = "medium";
-    this.error = "";
+    this.label = void 0;
+    this.description = void 0;
+    this.error = void 0;
     this.checked = false;
-    this.customClass = "";
+    this.customClass = void 0;
     this.isReadonly = false;
     this.isDisabled = false;
     this.hasFocus = false;
@@ -68,12 +72,12 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
       <div
         class=${index.customClassMap({
       [this.defaultCheckboxStyles]: true,
-      [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-[32px] w-[32px]"]: this.size === "small",
-      ["h-[28px] w-[28px]"]: this.size === "x-small",
+      [!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-10 w-[40px]": this.size === "medium",
+      "h-[32px] w-[32px]": this.size === "small",
+      "h-7 w-[28px]": this.size === "x-small",
       [this.customClass]: !!this.customClass
     })}
       >
@@ -101,22 +105,15 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
       />
     `;
   }
-  errorTemplate() {
-    return shared_tailwindElement_index.x`
-      <div class="paragraph-inter-12-regular text-red-65 pt-2">
-        ${this.error}
-      </div>
-    `;
-  }
   labelTemplate() {
     return shared_tailwindElement_index.x`
       <span
         class=${index.customClassMap({
       [this.defaultLabelStyles]: true,
-      ["paragraph-inter-16-regular"]: this.size === "medium" || this.size === "small",
-      ["paragraph-inter-12-semi-bold"]: this.size === "x-small",
-      ["text-red-65"]: this.error !== "",
-      ["text-neutral-60"]: this.isDisabled
+      "paragraph-inter-16-regular": this.size === "medium" || this.size === "small",
+      "paragraph-inter-12-semi-bold": this.size === "x-small",
+      "text-red-65": !!this.error,
+      "text-neutral-60": this.isDisabled
     })}
       >
         <slot></slot>
@@ -133,6 +130,10 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
   render() {
     return shared_tailwindElement_index.x`
       <div>
+        <lukso-form-label label=${this.label}></lukso-form-label>
+        <lukso-form-description
+          description=${this.description}
+        ></lukso-form-description>
         <label
           for=${this.name}
           class=${index.customClassMap({
@@ -146,6 +147,7 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
           ${this.type === "text" ? this.labelTemplate() : shared_tailwindElement_index.E}
           ${this.type === "profile" ? this.profileUsernameTemplate() : shared_tailwindElement_index.E}
         </label>
+        <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
     `;
   }
@@ -191,6 +193,12 @@ __decorateClass([
 __decorateClass([
   safeCustomElement.n({ type: String })
 ], exports.LuksoCheckbox.prototype, "size", 2);
+__decorateClass([
+  safeCustomElement.n({ type: String })
+], exports.LuksoCheckbox.prototype, "label", 2);
+__decorateClass([
+  safeCustomElement.n({ type: String })
+], exports.LuksoCheckbox.prototype, "description", 2);
 __decorateClass([
   safeCustomElement.n({ type: String })
 ], exports.LuksoCheckbox.prototype, "error", 2);

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

@@ -2,14 +2,16 @@ import { TailwindElement } from '../../shared/tailwind-element';
 export type CheckboxSize = 'x-small' | 'small' | 'medium';
 export type CheckboxType = 'text' | 'profile';
 export declare class LuksoCheckbox extends TailwindElement {
-    name: string;
-    id: string;
+    name: string | undefined;
+    id: string | undefined;
     ref: string | undefined;
     type: CheckboxType;
     size: CheckboxSize;
-    error: string;
+    label: string | undefined;
+    description: string | undefined;
+    error: string | undefined;
     checked: boolean;
-    customClass: string;
+    customClass: string | undefined;
     isReadonly: boolean;
     isDisabled: boolean;
     private hasFocus;
@@ -21,7 +23,6 @@ export declare class LuksoCheckbox extends TailwindElement {
     checkedIconTemplate(): unknown;
     checkboxTemplate(): unknown;
     inputTemplate(): import('lit-html').TemplateResult<1>;
-    errorTemplate(): import('lit-html').TemplateResult<1>;
     labelTemplate(): import('lit-html').TemplateResult<1>;
     profileUsernameTemplate(): import('lit-html').TemplateResult<1>;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-checkbox/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AACzD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,CAAA;AAE7C,qBACa,aAAc,SAAQ,eAAe;IAEhD,IAAI,SAAK;IAGT,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,IAAI,EAAE,YAAY,CAAS;IAG3B,IAAI,EAAE,YAAY,CAAW;IAG7B,KAAK,SAAK;IAGV,OAAO,EAAE,OAAO,CAAQ;IAGxB,WAAW,SAAK;IAGhB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,sBAAsB,CAG3B;IAEH,OAAO,CAAC,kBAAkB,CAKvB;IAEH,OAAO,CAAC,kBAAkB,CAEvB;IAEH,OAAO,CAAC,qBAAqB,CAKkD;IAE/E,mBAAmB,IAAI,OAAO;IAY9B,gBAAgB,IAAI,OAAO;IAqB3B,aAAa;IAqBb,aAAa;IAQb,aAAa;IAiBb,uBAAuB;IAQvB,MAAM;YAoBQ,YAAY;IAkB1B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;CAKvB;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-checkbox/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,OAAO,qCAAqC,CAAA;AAC5C,OAAO,+BAA+B,CAAA;AAEtC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AACzD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,CAAA;AAE7C,qBACa,aAAc,SAAQ,eAAe;IAEhD,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAGpC,EAAE,EAAE,MAAM,GAAG,SAAS,CAAY;IAGlC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,IAAI,EAAE,YAAY,CAAS;IAG3B,IAAI,EAAE,YAAY,CAAW;IAG7B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,OAAO,EAAE,OAAO,CAAQ;IAGxB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,sBAAsB,CAG3B;IAEH,OAAO,CAAC,kBAAkB,CAKvB;IAEH,OAAO,CAAC,kBAAkB,CAEvB;IAEH,OAAO,CAAC,qBAAqB,CAKkD;IAE/E,mBAAmB,IAAI,OAAO;IAY9B,gBAAgB,IAAI,OAAO;IAqB3B,aAAa;IAqBb,aAAa;IAiBb,uBAAuB;IAQvB,MAAM;YAyBQ,YAAY;IAkB1B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;CAKvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

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

@@ -1,7 +1,9 @@
-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-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
+import { r } from '../../state-YyDFqXia.js';
 import { c as customClassMap } from '../../index-F8ll4iy2.js';
+import '../lukso-form-description/index.js';
+import '../lukso-form-error/index.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -16,14 +18,16 @@ var __decorateClass = (decorators, target, key, kind) => {
 let LuksoCheckbox = class extends TailwindElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.id = "";
+    this.name = void 0;
+    this.id = void 0;
     this.ref = void 0;
     this.type = "text";
     this.size = "medium";
-    this.error = "";
+    this.label = void 0;
+    this.description = void 0;
+    this.error = void 0;
     this.checked = false;
-    this.customClass = "";
+    this.customClass = void 0;
     this.isReadonly = false;
     this.isDisabled = false;
     this.hasFocus = false;
@@ -64,12 +68,12 @@ let LuksoCheckbox = class extends TailwindElement {
       <div
         class=${customClassMap({
       [this.defaultCheckboxStyles]: true,
-      [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-[32px] w-[32px]"]: this.size === "small",
-      ["h-[28px] w-[28px]"]: this.size === "x-small",
+      [!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-10 w-[40px]": this.size === "medium",
+      "h-[32px] w-[32px]": this.size === "small",
+      "h-7 w-[28px]": this.size === "x-small",
       [this.customClass]: !!this.customClass
     })}
       >
@@ -97,22 +101,15 @@ let LuksoCheckbox = class extends TailwindElement {
       />
     `;
   }
-  errorTemplate() {
-    return x`
-      <div class="paragraph-inter-12-regular text-red-65 pt-2">
-        ${this.error}
-      </div>
-    `;
-  }
   labelTemplate() {
     return x`
       <span
         class=${customClassMap({
       [this.defaultLabelStyles]: true,
-      ["paragraph-inter-16-regular"]: this.size === "medium" || this.size === "small",
-      ["paragraph-inter-12-semi-bold"]: this.size === "x-small",
-      ["text-red-65"]: this.error !== "",
-      ["text-neutral-60"]: this.isDisabled
+      "paragraph-inter-16-regular": this.size === "medium" || this.size === "small",
+      "paragraph-inter-12-semi-bold": this.size === "x-small",
+      "text-red-65": !!this.error,
+      "text-neutral-60": this.isDisabled
     })}
       >
         <slot></slot>
@@ -129,6 +126,10 @@ let LuksoCheckbox = class extends TailwindElement {
   render() {
     return x`
       <div>
+        <lukso-form-label label=${this.label}></lukso-form-label>
+        <lukso-form-description
+          description=${this.description}
+        ></lukso-form-description>
         <label
           for=${this.name}
           class=${customClassMap({
@@ -142,6 +143,7 @@ let LuksoCheckbox = class extends TailwindElement {
           ${this.type === "text" ? this.labelTemplate() : E}
           ${this.type === "profile" ? this.profileUsernameTemplate() : E}
         </label>
+        <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
     `;
   }
@@ -187,6 +189,12 @@ __decorateClass([
 __decorateClass([
   n({ type: String })
 ], LuksoCheckbox.prototype, "size", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoCheckbox.prototype, "label", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoCheckbox.prototype, "description", 2);
 __decorateClass([
   n({ type: String })
 ], LuksoCheckbox.prototype, "error", 2);

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

@@ -4,8 +4,8 @@ declare const meta: Meta;
 export default meta;
 /** Example of default input with `value`.  */
 export declare const DefaultInput: any;
-/** Example of input with `error`. */
-export declare const Error: any;
+/** Example with form decorators: `label`, `description` and `error`. */
+export declare const FormDecorators: any;
 export declare const Small: any;
 export declare const XSmall: any;
 export declare const ProfileCheckboxMedium: any;

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-checkbox/lukso-checkbox.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,kEAAkE;AAClE,QAAA,MAAM,IAAI,EAAE,IAoHX,CAAA;AAED,eAAe,IAAI,CAAA;AA4BnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAO7C,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAMtC,eAAO,MAAM,MAAM,KAAoB,CAAA;AA2DvC,eAAO,MAAM,qBAAqB,KAAmC,CAAA;AAOrE,eAAO,MAAM,oBAAoB,KAAmC,CAAA;AAQpE,eAAO,MAAM,qBAAqB,KAAmC,CAAA"}
+{"version":3,"file":"lukso-checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-checkbox/lukso-checkbox.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,kEAAkE;AAClE,QAAA,MAAM,IAAI,EAAE,IAqIX,CAAA;AAED,eAAe,IAAI,CAAA;AAgCnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAM7C,wEAAwE;AACxE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAO/C,eAAO,MAAM,KAAK,KAAoB,CAAA;AAMtC,eAAO,MAAM,MAAM,KAAoB,CAAA;AA2DvC,eAAO,MAAM,qBAAqB,KAAmC,CAAA;AAOrE,eAAO,MAAM,oBAAoB,KAAmC,CAAA;AAQpE,eAAO,MAAM,qBAAqB,KAAmC,CAAA"}