@lukso/web-components 1.163.0 → 1.165.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-Dv9A3Ltm.cjs');
+const components_luksoProfile_index = require('../index-CkTTkTeD.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-CX03Xr6x.cjs');
-const components_luksoSearch_index = require('../index-BHZk9HTM.cjs');
+const components_luksoSanitize_index = require('../index-CMz6XJPf.cjs');
+const components_luksoSearch_index = require('../index-DpwtUacf.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-D1tHxVU9.cjs');
+const components_luksoUsername_index = require('../index-ChJegFbU.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-CE4mgetK.cjs');
+const shared_tailwindElement_index = require('../index-BFw0uWsf.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-1J-jqsT9.js';
+export { L as LuksoProfile } from '../index-0NKskMIT.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-BEawLNoE.js';
-export { L as LuksoSearch } from '../index-OytYtq41.js';
+export { D as DEFAULT_OPTIONS, L as LuksoSanitize, N as NO_HTML_TAGS_OPTIONS } from '../index-CkTJCbU3.js';
+export { L as LuksoSearch } from '../index-U2etlFtC.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-B0BrUQTX.js';
+export { L as LuksoUsername } from '../index-B5hUhsnW.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-C4AqmOTg.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-Dkv1Mrum.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-CE4mgetK.cjs');
-const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
-const state = require('../../state-DE9RNbPD.cjs');
+const shared_tailwindElement_index = require('../../index-BFw0uWsf.cjs');
+const safeCustomElement = require('../../safe-custom-element-DIwjhOfn.cjs');
+const state = require('../../state-ClI2PhsZ.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../../tailwind-config.cjs');
 const axe = require('../../axe-C-H1UVi1.cjs');

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

@@ -1,6 +1,6 @@
-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 { T as TailwindStyledElement, E, x } from '../../index-Dkv1Mrum.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-yBr0IGZ5.js';
+import { r } from '../../state-CL0SNMm6.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../axe-BK9JSROP.js';

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-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 components_luksoProfile_index = require('../../index-CkTTkTeD.cjs');
+const shared_tailwindElement_index = require('../../index-BFw0uWsf.cjs');
+const safeCustomElement = require('../../safe-custom-element-DIwjhOfn.cjs');
+const state = require('../../state-ClI2PhsZ.cjs');
 const base = require('../../base-NFGX42U4.cjs');
-const styleMap = require('../../style-map-CTRp4AN8.cjs');
+const styleMap = require('../../style-map-BL7i-qml.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-BgNWF02P.cjs');
+const index$1 = require('../../index-MKRcSOvg.cjs');
 require('../lukso-image/index.cjs');
 
 /**

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

@@ -1,14 +1,14 @@
-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 { m as makeBlockie } from '../../index-0NKskMIT.js';
+import { T as TailwindStyledElement, x, E } from '../../index-Dkv1Mrum.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-yBr0IGZ5.js';
+import { r } from '../../state-CL0SNMm6.js';
 import { e } from '../../base-Cl6v8-BZ.js';
-import { o as o$1 } from '../../style-map-CNeYTqXM.js';
+import { o as o$1 } from '../../style-map-Dv5q6vhV.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-DSByq2Lm.js';
+import { c as customStyleMap } from '../../index-BvCQKw-t.js';
 import '../lukso-image/index.js';
 
 /**

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

@@ -2,10 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
-const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
-const state = require('../../state-DE9RNbPD.cjs');
+const shared_tailwindElement_index = require('../../index-BFw0uWsf.cjs');
+const safeCustomElement = require('../../safe-custom-element-DIwjhOfn.cjs');
+const state = require('../../state-ClI2PhsZ.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-10 w-[40px]"]: this.size === "medium",
-      ["h-[32px] w-[32px]"]: this.size === "small",
-      ["h-7 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-C4AqmOTg.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
-import { r } from '../../state-D-OZ3KEf.js';
+import { a as TailwindElement, x, E } from '../../index-Dkv1Mrum.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-yBr0IGZ5.js';
+import { r } from '../../state-CL0SNMm6.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-10 w-[40px]"]: this.size === "medium",
-      ["h-[32px] w-[32px]"]: this.size === "small",
-      ["h-7 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"}

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

@@ -2,14 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
-const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
-const state = require('../../state-DE9RNbPD.cjs');
+const shared_tailwindElement_index = require('../../index-BFw0uWsf.cjs');
+const safeCustomElement = require('../../safe-custom-element-DIwjhOfn.cjs');
+const state = require('../../state-ClI2PhsZ.cjs');
 const query = require('../../query-EFiHeHdi.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../../tailwind-config.cjs');
 const axe = require('../../axe-C-H1UVi1.cjs');
 require('../lukso-icon/index.cjs');
+require('../lukso-form-label/index.cjs');
+require('../lukso-form-description/index.cjs');
+require('../lukso-form-error/index.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -24,18 +27,18 @@ var __decorateClass = (decorators, target, key, kind) => {
 exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index.TailwindElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.description = "";
-    this.error = "";
-    this.triggerLabel = "";
+    this.label = void 0;
+    this.description = void 0;
+    this.error = void 0;
+    this.triggerLabel = void 0;
     this.toggleLabel = {
       open: "",
       close: ""
     };
     this.isOpen = false;
-    this.customClass = "";
+    this.customClass = void 0;
     this.isDisabled = false;
-    this.icon = "";
+    this.icon = void 0;
     this.size = "large";
     this.maxHeight = "0px";
     this.observedHeight = 0;
@@ -165,36 +168,19 @@ 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, triggerLabel, toggleLabel, icon, content } = this.collapseStyles({
       isOpen: this.isOpen,
       isDisabled: this.isDisabled,
       size: this.size,
-      hasError: this.error !== ""
+      hasError: !!this.error
     });
     return shared_tailwindElement_index.x`
       <div class="w-[inherit]">
-        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.E}
-        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.E}
+        <lukso-form-label label=${this.label}></lukso-form-label>
+        <lukso-form-description
+          description=${this.description}
+        ></lukso-form-description>
         <div class=${axe.cn(base(), this.customClass)}>
           <!-- Header -->
           <div
@@ -224,7 +210,7 @@ exports.LuksoCollapse = class LuksoCollapse extends shared_tailwindElement_index
             </div>
           </div>
         </div>
-        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.E}
+        <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
     `;
   }

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

@@ -1,18 +1,18 @@
 import { TailwindElement } from '../../shared/tailwind-element';
 import { InputSize } from '../../shared/types';
 export declare class LuksoCollapse extends TailwindElement {
-    label: string;
-    description: string;
-    error: string;
-    triggerLabel: string;
+    label: string | undefined;
+    description: string | undefined;
+    error: string | undefined;
+    triggerLabel: string | undefined;
     toggleLabel: {
         open: string;
         close: string;
     };
     isOpen: boolean;
-    customClass: string;
+    customClass: string | undefined;
     isDisabled: boolean;
-    icon: string;
+    icon: string | undefined;
     size: InputSize;
     private maxHeight;
     private observedHeight;
@@ -25,9 +25,6 @@ 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,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"}
+{"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;AAChC,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,+BAA+B,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,qBACa,aAAc,SAAQ,eAAe;IAEhD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAY;IAG5C,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAG3C;IAGD,MAAM,UAAQ;IAGd,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,UAAU,UAAQ;IAGlB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAGpC,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,MAAM;CAsDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}