@lukso/web-components 1.163.0 → 1.164.0

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

@@ -1,11 +1,14 @@
-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, E, x } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
+import { r } from '../../state-YyDFqXia.js';
 import { e } from '../../query-CHb9Ft_d.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../axe-BK9JSROP.js';
 import '../lukso-icon/index.js';
+import '../lukso-form-label/index.js';
+import '../lukso-form-description/index.js';
+import '../lukso-form-error/index.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,18 +23,18 @@ var __decorateClass = (decorators, target, key, kind) => {
 let LuksoCollapse = class extends 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;
@@ -161,36 +164,19 @@ let LuksoCollapse = class extends TailwindElement {
       new CustomEvent("toggle", { detail: { open: this.isOpen } })
     );
   }
-  labelTemplate() {
-    return x`
-      <label class="heading-inter-14-bold text-neutral-20 pb-2 block"
-        >${this.label}</label
-      >
-    `;
-  }
-  descriptionTemplate() {
-    return x`
-      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
-        <lukso-sanitize html-content=${this.description}></lukso-sanitize>
-      </div>
-    `;
-  }
-  errorTemplate() {
-    return 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 x`
       <div class="w-[inherit]">
-        ${this.label ? this.labelTemplate() : E}
-        ${this.description ? this.descriptionTemplate() : E}
+        <lukso-form-label label=${this.label}></lukso-form-label>
+        <lukso-form-description
+          description=${this.description}
+        ></lukso-form-description>
         <div class=${cn(base(), this.customClass)}>
           <!-- Header -->
           <div
@@ -220,7 +206,7 @@ let LuksoCollapse = class extends TailwindElement {
             </div>
           </div>
         </div>
-        ${this.error ? this.errorTemplate() : E}
+        <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
     `;
   }

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

@@ -12,12 +12,8 @@ export declare const CollapseLarge: any;
 export declare const CollapseXLarge: any;
 /** Example of custom labels and icon */
 export declare const CustomLabels: any;
-/** Example of collapse with `label` */
-export declare const CollapseLabel: any;
-/** Example of collapse with `description` */
-export declare const CollapseDescription: any;
-/** Example of collapse with `error` */
-export declare const CollapseError: any;
+/** Example with form decorators: `label`, `description` and `error`. */
+export declare const FormDecorators: any;
 /** Example of lukso-collapse `open` by default */
 export declare const CollapseOpen: any;
 /** Example of lukso-collapse `disabled` */

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-collapse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/lukso-collapse.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,iEAAiE;AACjE,QAAA,MAAM,IAAI,EAAE,IA2HX,CAAA;AAED,eAAe,IAAI,CAAA;AAiCnB,8BAA8B;AAC9B,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,+BAA+B;AAC/B,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,8BAA8B;AAC9B,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,gCAAgC;AAChC,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,wCAAwC;AACxC,eAAO,MAAM,YAAY,KAAoB,CAAA;AAO7C,uCAAuC;AACvC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,6CAA6C;AAC7C,eAAO,MAAM,mBAAmB,KAAoB,CAAA;AAKpD,uCAAuC;AACvC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,kDAAkD;AAClD,eAAO,MAAM,YAAY,KAAoB,CAAA;AAU7C,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,KAAoB,CAAA;AAKjD,0DAA0D;AAC1D,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAUxD,sDAAsD;AACtD,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAkBxD,6DAA6D;AAC7D,eAAO,MAAM,oBAAoB,KAAoB,CAAA"}
+{"version":3,"file":"lukso-collapse.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-collapse/lukso-collapse.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAC1D,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAE9B,iEAAiE;AACjE,QAAA,MAAM,IAAI,EAAE,IA2HX,CAAA;AAED,eAAe,IAAI,CAAA;AAiCnB,8BAA8B;AAC9B,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,+BAA+B;AAC/B,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,8BAA8B;AAC9B,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,gCAAgC;AAChC,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,wCAAwC;AACxC,eAAO,MAAM,YAAY,KAAoB,CAAA;AAO7C,wEAAwE;AACxE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAO/C,kDAAkD;AAClD,eAAO,MAAM,YAAY,KAAoB,CAAA;AAU7C,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,KAAoB,CAAA;AAKjD,0DAA0D;AAC1D,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAUxD,sDAAsD;AACtD,eAAO,MAAM,uBAAuB,KAAoB,CAAA;AAkBxD,6DAA6D;AAC7D,eAAO,MAAM,oBAAoB,KAAoB,CAAA"}

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

@@ -2,15 +2,18 @@
 
 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-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');
-const styleMap = require('../../style-map-CTRp4AN8.cjs');
+const styleMap = require('../../style-map-GvPMWlOB.cjs');
 require('../../tailwind-config.cjs');
 const axe = require('../../axe-C-H1UVi1.cjs');
 require('../lukso-icon/index.cjs');
-require('../../index-CX03Xr6x.cjs');
+require('../../index-DMRL6USt.cjs');
+require('../lukso-form-label/index.cjs');
+require('../lukso-form-description/index.cjs');
+require('../lukso-form-error/index.cjs');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -28,14 +31,14 @@ const FOCUS_DELAY_MS = 10;
 exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement_index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
-    this.value = "";
-    this.name = "";
+    this.value = void 0;
+    this.name = void 0;
     this.placeholder = "#000000";
-    this.label = "";
-    this.id = "";
-    this.description = "";
-    this.error = "";
-    this.customClass = "";
+    this.label = void 0;
+    this.id = void 0;
+    this.description = void 0;
+    this.error = void 0;
+    this.customClass = void 0;
     this.isFullWidth = false;
     this.isReadonly = false;
     this.isDisabled = false;
@@ -190,27 +193,6 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
       />
     </div>`;
   }
-  labelTemplate() {
-    return shared_tailwindElement_index.x`
-      <label
-        for=${this.name}
-        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>`;
-  }
   handleFocus() {
     if (!this.isReadonly && !this.isDisabled) {
       this.hasFocus = true;
@@ -290,7 +272,7 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
   }
   render() {
     const { wrapper, input, color, colorInput } = this.styles({
-      hasError: this.error !== "",
+      hasError: !!this.error,
       hasHighlight: this.hasHighlight,
       isReadonly: this.isReadonly,
       isDisabled: this.isDisabled,
@@ -299,13 +281,18 @@ exports.LuksoColorPicker = class LuksoColorPicker extends shared_tailwindElement
     });
     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
+          for-name=${this.name}
+          label=${this.label}
+        ></lukso-form-label>
+        <lukso-form-description
+          description=${this.description}
+        ></lukso-form-description>
         <div class=${wrapper()}>
           ${this.colorPickerTemplate(color(), colorInput())}
           <div class="relative w-full">${this.inputTemplate(input())}</div>
         </div>
-        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.E}
+        <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
     `;
   }

package/dist/components/lukso-color-picker/index.d.ts

@@ -1,14 +1,14 @@
 import { InputSize } from '../../shared/types';
 declare const LuksoColorPicker_base: typeof import('lit').LitElement;
 export declare class LuksoColorPicker extends LuksoColorPicker_base {
-    value: string;
-    name: string;
+    value: string | undefined;
+    name: string | undefined;
     placeholder: string;
-    label: string;
-    id: string;
-    description: string;
-    error: string;
-    customClass: string;
+    label: string | undefined;
+    id: string | undefined;
+    description: string | undefined;
+    error: string | undefined;
+    customClass: string | undefined;
     isFullWidth: boolean;
     isReadonly: boolean;
     isDisabled: boolean;
@@ -21,9 +21,6 @@ export declare class LuksoColorPicker extends LuksoColorPicker_base {
     connectedCallback(): void;
     inputTemplate(styles: string): import('lit-html').TemplateResult<1>;
     colorPickerTemplate(styles: string, colorInputStyles: string): import('lit-html').TemplateResult<1>;
-    labelTemplate(): import('lit-html').TemplateResult<1>;
-    descriptionTemplate(): import('lit-html').TemplateResult<1>;
-    errorTemplate(): import('lit-html').TemplateResult<1>;
     private handleFocus;
     private handleBlur;
     private handleChange;

package/dist/components/lukso-color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-color-picker/index.ts"],"names":[],"mappings":"AAQA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AAGpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,gBAAiB,SAAQ,qBAA4B;IAEhE,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAY;IAGvB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,MAAM,CA8FZ;IAEF,iBAAiB;IAajB,aAAa,CAAC,MAAM,EAAE,MAAM;IAwB5B,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM;IAiB5D,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;IAe3B,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAA;KACvC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-color-picker/index.ts"],"names":[],"mappings":"AAQA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,+BAA+B,CAAA;AAGtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,gBAAiB,SAAQ,qBAA4B;IAEhE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAGpC,WAAW,SAAY;IAGvB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,EAAE,EAAE,MAAM,GAAG,SAAS,CAAY;IAGlC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,iBAAiB,UAAQ;IAGzB,IAAI,EAAE,SAAS,CAAW;IAG1B,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,MAAM,CA8FZ;IAEF,iBAAiB;IAajB,aAAa,CAAC,MAAM,EAAE,MAAM;IAwB5B,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM;IAiB5D,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;IAe3B,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAA;KACvC;CACF"}

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

@@ -1,12 +1,15 @@
-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-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 { o } from '../../style-map-CNeYTqXM.js';
+import { o } from '../../style-map-BpMy_EP7.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../axe-BK9JSROP.js';
 import '../lukso-icon/index.js';
-import '../../index-BEawLNoE.js';
+import '../../index-BOwyGlSA.js';
+import '../lukso-form-label/index.js';
+import '../lukso-form-description/index.js';
+import '../lukso-form-error/index.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 
@@ -24,14 +27,14 @@ const FOCUS_DELAY_MS = 10;
 let LuksoColorPicker = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
-    this.value = "";
-    this.name = "";
+    this.value = void 0;
+    this.name = void 0;
     this.placeholder = "#000000";
-    this.label = "";
-    this.id = "";
-    this.description = "";
-    this.error = "";
-    this.customClass = "";
+    this.label = void 0;
+    this.id = void 0;
+    this.description = void 0;
+    this.error = void 0;
+    this.customClass = void 0;
     this.isFullWidth = false;
     this.isReadonly = false;
     this.isDisabled = false;
@@ -186,27 +189,6 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
       />
     </div>`;
   }
-  labelTemplate() {
-    return x`
-      <label
-        for=${this.name}
-        class="heading-inter-14-bold text-neutral-20 pb-2 block"
-        >${this.label}</label
-      >
-    `;
-  }
-  descriptionTemplate() {
-    return x`
-      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
-        <lukso-sanitize html-content=${this.description}></lukso-sanitize>
-      </div>
-    `;
-  }
-  errorTemplate() {
-    return x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
-      ${this.error}
-    </div>`;
-  }
   handleFocus() {
     if (!this.isReadonly && !this.isDisabled) {
       this.hasFocus = true;
@@ -286,7 +268,7 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
   }
   render() {
     const { wrapper, input, color, colorInput } = this.styles({
-      hasError: this.error !== "",
+      hasError: !!this.error,
       hasHighlight: this.hasHighlight,
       isReadonly: this.isReadonly,
       isDisabled: this.isDisabled,
@@ -295,13 +277,18 @@ let LuksoColorPicker = class extends TailwindStyledElement(style) {
     });
     return x`
       <div class="w-[inherit]">
-        ${this.label ? this.labelTemplate() : E}
-        ${this.description ? this.descriptionTemplate() : E}
+        <lukso-form-label
+          for-name=${this.name}
+          label=${this.label}
+        ></lukso-form-label>
+        <lukso-form-description
+          description=${this.description}
+        ></lukso-form-description>
         <div class=${wrapper()}>
           ${this.colorPickerTemplate(color(), colorInput())}
           <div class="relative w-full">${this.inputTemplate(input())}</div>
         </div>
-        ${this.error ? this.errorTemplate() : E}
+        <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
     `;
   }

package/dist/components/lukso-color-picker/lukso-color-picker.stories.d.ts

@@ -6,12 +6,8 @@ export default meta;
 export declare const DefaultInput: any;
 /** Example of input with `placeholder` text. */
 export declare const PlaceholderText: any;
-/** Example of input with `label`. */
-export declare const Label: any;
-/** Example of input with `label` and `description`. */
-export declare const LabelAndDescription: any;
-/** Example of input with `error`. */
-export declare const ErrorInput: any;
+/** Example with form decorators: `label`, `description` and `error`. */
+export declare const FormDecorators: any;
 /** If you need input to take full width of the parent element add `is-full-width` property. */
 export declare const FullWidth: any;
 /** Example of `small` size input. */

package/dist/components/lukso-color-picker/lukso-color-picker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-color-picker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-color-picker/lukso-color-picker.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,sEAAsE;AACtE,QAAA,MAAM,IAAI,EAAE,IAuLX,CAAA;AAED,eAAe,IAAI,CAAA;AA6CnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAE7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAMhD,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,uDAAuD;AACvD,eAAO,MAAM,mBAAmB,KAAoB,CAAA;AAMpD,qCAAqC;AACrC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAO3C,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,qCAAqC;AACrC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,sCAAsC;AACtC,eAAO,MAAM,UAAU,KAAoB,CAAA"}
+{"version":3,"file":"lukso-color-picker.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-color-picker/lukso-color-picker.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,sEAAsE;AACtE,QAAA,MAAM,IAAI,EAAE,IAwLX,CAAA;AAED,eAAe,IAAI,CAAA;AA6CnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAE7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAMhD,wEAAwE;AACxE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAO/C,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,qCAAqC;AACrC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,sCAAsC;AACtC,eAAO,MAAM,UAAU,KAAoB,CAAA"}

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

@@ -2,12 +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 shared_tailwindElement_index = require('../../index-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 require('../lukso-icon/index.cjs');
-require('../../index-Dv9A3Ltm.cjs');
-require('../../index-D1tHxVU9.cjs');
+require('../../index-Cke4NczR.cjs');
+require('../../index-D_vmwNxA.cjs');
 const uniqId = require('../../uniq-id-Cszs24DQ.cjs');
 
 const debounceFunction = (func, timeout = 100) => {
@@ -47,9 +47,9 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
     this.maxHeight = void 0;
     this.styles = index.ce({
       slots: {
-        wrapper: "absolute z-50",
+        wrapper: "absolute z-50 w-full",
         dropdown: `bg-neutral-100 border border-neutral-90 shadow-1xl
-        flex flex-col gap-1 overflow-y-auto w-[max-content] animate-fade-in animation-duration-200`
+        flex flex-col gap-1 overflow-y-auto w-full animate-fade-in animation-duration-200`
       },
       variants: {
         openTop: {
@@ -75,7 +75,7 @@ exports.LuksoDropdown = class LuksoDropdown extends shared_tailwindElement_index
           }
         },
         isFullWidth: {
-          true: { wrapper: "w-full", dropdown: "w-full" }
+          true: { wrapper: "w-full", dropdown: "max-w-full" }
         },
         hasMaxHeight: {
           true: {}

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

@@ -1,9 +1,9 @@
-import { T as TailwindStyledElement, E, x } from '../../index-C4AqmOTg.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { T as TailwindStyledElement, E, x } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
 import { c as ce } from '../../index-B9iart53.js';
 import '../lukso-icon/index.js';
-import '../../index-1J-jqsT9.js';
-import '../../index-B0BrUQTX.js';
+import '../../index-JTvbIE4S.js';
+import '../../index-PSjywfTJ.js';
 import { u as uniqId } from '../../uniq-id-CGUN-pJV.js';
 
 const debounceFunction = (func, timeout = 100) => {
@@ -43,9 +43,9 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
     this.maxHeight = void 0;
     this.styles = ce({
       slots: {
-        wrapper: "absolute z-50",
+        wrapper: "absolute z-50 w-full",
         dropdown: `bg-neutral-100 border border-neutral-90 shadow-1xl
-        flex flex-col gap-1 overflow-y-auto w-[max-content] animate-fade-in animation-duration-200`
+        flex flex-col gap-1 overflow-y-auto w-full animate-fade-in animation-duration-200`
       },
       variants: {
         openTop: {
@@ -71,7 +71,7 @@ let LuksoDropdown = class extends TailwindStyledElement(style) {
           }
         },
         isFullWidth: {
-          true: { wrapper: "w-full", dropdown: "w-full" }
+          true: { wrapper: "w-full", dropdown: "max-w-full" }
         },
         hasMaxHeight: {
           true: {}

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-CE4mgetK.cjs');
-const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const shared_tailwindElement_index = require('../../index-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.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-C4AqmOTg.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { T as TailwindStyledElement, x } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.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-CE4mgetK.cjs');
-const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
+const shared_tailwindElement_index = require('../../index-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.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-C4AqmOTg.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
+import { a as TailwindElement, x } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-form-description/index.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.cjs');
+
+const style = ":host {\n    display: flex\n}";
+
+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.LuksoFormDescription = class LuksoFormDescription extends shared_tailwindElement_index.TailwindStyledElement(style) {
+  render() {
+    return this.description ? shared_tailwindElement_index.x`
+          <lukso-sanitize
+            html-content=${this.description ? this.description : shared_tailwindElement_index.E}
+            class="paragraph-inter-12-regular text-neutral-20 pb-2"
+          ></lukso-sanitize>
+        ` : shared_tailwindElement_index.E;
+  }
+};
+__decorateClass([
+  safeCustomElement.n({ type: String, reflect: true })
+], exports.LuksoFormDescription.prototype, "description", 2);
+exports.LuksoFormDescription = __decorateClass([
+  safeCustomElement.safeCustomElement("lukso-form-description")
+], exports.LuksoFormDescription);

package/dist/components/lukso-form-description/index.d.ts

@@ -0,0 +1,13 @@
+import { nothing } from 'lit';
+declare const LuksoFormDescription_base: typeof import('lit').LitElement;
+export declare class LuksoFormDescription extends LuksoFormDescription_base {
+    description: string;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lukso-form-description': LuksoFormDescription;
+    }
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/lukso-form-description/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-form-description/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAA;;AAOnC,qBACa,oBAAqB,SAAQ,yBAA4B;IAEpE,WAAW,EAAE,MAAM,CAAA;IAEnB,MAAM;CAUP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAA;KAC/C;CACF"}

package/dist/components/lukso-form-description/index.js

@@ -0,0 +1,33 @@
+import { T as TailwindStyledElement, E, x } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
+
+const style = ":host {\n    display: flex\n}";
+
+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 LuksoFormDescription = class extends TailwindStyledElement(style) {
+  render() {
+    return this.description ? x`
+          <lukso-sanitize
+            html-content=${this.description ? this.description : E}
+            class="paragraph-inter-12-regular text-neutral-20 pb-2"
+          ></lukso-sanitize>
+        ` : E;
+  }
+};
+__decorateClass([
+  n({ type: String, reflect: true })
+], LuksoFormDescription.prototype, "description", 2);
+LuksoFormDescription = __decorateClass([
+  safeCustomElement("lukso-form-description")
+], LuksoFormDescription);
+
+export { LuksoFormDescription };

package/dist/components/lukso-form-description/lukso-form-description.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/web-components-vite';
+/**  Documentation and examples of `lukso-form-description` component.  */
+declare const meta: Meta;
+export default meta;
+/** Example of default description  */
+export declare const DefaultFormDescription: any;
+//# sourceMappingURL=lukso-form-description.stories.d.ts.map

package/dist/components/lukso-form-description/lukso-form-description.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lukso-form-description.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-form-description/lukso-form-description.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,0EAA0E;AAC1E,QAAA,MAAM,IAAI,EAAE,IAcX,CAAA;AAED,eAAe,IAAI,CAAA;AAOnB,sCAAsC;AACtC,eAAO,MAAM,sBAAsB,KAAoB,CAAA"}

package/dist/components/lukso-form-error/index.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.cjs');
+
+const style = ":host {\n    display: flex\n}";
+
+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.LuksoFormError = class LuksoFormError extends shared_tailwindElement_index.TailwindStyledElement(style) {
+  render() {
+    return this.error ? shared_tailwindElement_index.x`
+          <lukso-sanitize
+            html-content=${this.error ? this.error : shared_tailwindElement_index.E}
+            class="paragraph-inter-12-regular text-red-65 pt-2"
+          ></lukso-sanitize>
+        ` : shared_tailwindElement_index.E;
+  }
+};
+__decorateClass([
+  safeCustomElement.n({ type: String, reflect: true })
+], exports.LuksoFormError.prototype, "error", 2);
+exports.LuksoFormError = __decorateClass([
+  safeCustomElement.safeCustomElement("lukso-form-error")
+], exports.LuksoFormError);