@lukso/web-components 1.163.0 → 1.164.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-form-error/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAA;;AAOnC,qBACa,cAAe,SAAQ,mBAA4B;IAE9D,KAAK,EAAE,MAAM,CAAA;IAEb,MAAM;CAUP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAA;KACnC;CACF"}

package/dist/components/lukso-form-error/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 LuksoFormError = class extends TailwindStyledElement(style) {
+  render() {
+    return this.error ? x`
+          <lukso-sanitize
+            html-content=${this.error ? this.error : E}
+            class="paragraph-inter-12-regular text-red-65 pt-2"
+          ></lukso-sanitize>
+        ` : E;
+  }
+};
+__decorateClass([
+  n({ type: String, reflect: true })
+], LuksoFormError.prototype, "error", 2);
+LuksoFormError = __decorateClass([
+  safeCustomElement("lukso-form-error")
+], LuksoFormError);
+
+export { LuksoFormError };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"lukso-form-error.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-form-error/lukso-form-error.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,oEAAoE;AACpE,QAAA,MAAM,IAAI,EAAE,IAcX,CAAA;AAED,eAAe,IAAI,CAAA;AAKnB,gCAAgC;AAChC,eAAO,MAAM,gBAAgB,KAAoB,CAAA"}

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

@@ -0,0 +1,39 @@
+'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.LuksoFormLabel = class LuksoFormLabel extends shared_tailwindElement_index.TailwindStyledElement(style) {
+  render() {
+    return this.label ? shared_tailwindElement_index.x`
+          <label
+            for=${this.forName ? this.forName : shared_tailwindElement_index.E}
+            class="heading-inter-14-bold text-neutral-20 pb-2 block"
+            >${this.label}</label
+          >
+        ` : shared_tailwindElement_index.E;
+  }
+};
+__decorateClass([
+  safeCustomElement.n({ type: String, reflect: true })
+], exports.LuksoFormLabel.prototype, "label", 2);
+__decorateClass([
+  safeCustomElement.n({ type: String, attribute: "for-name", reflect: true })
+], exports.LuksoFormLabel.prototype, "forName", 2);
+exports.LuksoFormLabel = __decorateClass([
+  safeCustomElement.safeCustomElement("lukso-form-label")
+], exports.LuksoFormLabel);

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-form-label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAA;;AAOnC,qBACa,cAAe,SAAQ,mBAA4B;IAE9D,KAAK,EAAE,MAAM,CAAA;IAGb,OAAO,EAAE,MAAM,CAAA;IAEf,MAAM;CAWP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAA;KACnC;CACF"}

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

@@ -0,0 +1,37 @@
+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 LuksoFormLabel = class extends TailwindStyledElement(style) {
+  render() {
+    return this.label ? x`
+          <label
+            for=${this.forName ? this.forName : E}
+            class="heading-inter-14-bold text-neutral-20 pb-2 block"
+            >${this.label}</label
+          >
+        ` : E;
+  }
+};
+__decorateClass([
+  n({ type: String, reflect: true })
+], LuksoFormLabel.prototype, "label", 2);
+__decorateClass([
+  n({ type: String, attribute: "for-name", reflect: true })
+], LuksoFormLabel.prototype, "forName", 2);
+LuksoFormLabel = __decorateClass([
+  safeCustomElement("lukso-form-label")
+], LuksoFormLabel);
+
+export { LuksoFormLabel };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"lukso-form-label.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-form-label/lukso-form-label.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,oEAAoE;AACpE,QAAA,MAAM,IAAI,EAAE,IA8BX,CAAA;AAED,eAAe,IAAI,CAAA;AAQnB,gCAAgC;AAChC,eAAO,MAAM,gBAAgB,KAAoB,CAAA"}

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-CE4mgetK.cjs');
-const safeCustomElement = require('../../safe-custom-element-CEr2QRTr.cjs');
-const unsafeHtml = require('../../unsafe-html-DA2kPIsd.cjs');
-const styleMap = require('../../style-map-CTRp4AN8.cjs');
+const shared_tailwindElement_index = require('../../index-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.cjs');
+const unsafeHtml = require('../../unsafe-html-e7jKkPJv.cjs');
+const styleMap = require('../../style-map-GvPMWlOB.cjs');
 
 const style = ":host {\n  position: relative;\n  display: inline-flex;\n  line-height: 0;\n}\n:host svg {\n  display: block !important;\n}";
 

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

@@ -1,7 +1,7 @@
-import { x, T as TailwindStyledElement } from '../../index-C4AqmOTg.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
-import { o as o$1 } from '../../unsafe-html-bTQk6t7a.js';
-import { o } from '../../style-map-CNeYTqXM.js';
+import { x, T as TailwindStyledElement } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
+import { o as o$1 } from '../../unsafe-html-kPu9HBX1.js';
+import { o } from '../../style-map-BpMy_EP7.js';
 
 const style = ":host {\n  position: relative;\n  display: inline-flex;\n  line-height: 0;\n}\n:host svg {\n  display: block !important;\n}";
 

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

@@ -2,10 +2,10 @@
 
 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 styleMap = require('../../style-map-CTRp4AN8.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 styleMap = require('../../style-map-GvPMWlOB.cjs');
 const index = require('../../index-CaJky2qL.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,7 +1,7 @@
-import { a as TailwindElement, x } from '../../index-C4AqmOTg.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
-import { r } from '../../state-D-OZ3KEf.js';
-import { o } from '../../style-map-CNeYTqXM.js';
+import { a as TailwindElement, x } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
+import { r } from '../../state-YyDFqXia.js';
+import { o } from '../../style-map-BpMy_EP7.js';
 import { c as ce } from '../../index-B9iart53.js';
 
 var __defProp = Object.defineProperty;

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

@@ -2,12 +2,15 @@
 
 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');
 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');
 require('../../tailwind-config.cjs');
 const axe = require('../../axe-C-H1UVi1.cjs');
 
@@ -27,19 +30,19 @@ const FOCUS_DELAY_MS = 10;
 exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
-    this.value = "";
-    this.name = "";
+    this.value = void 0;
+    this.name = void 0;
     this.type = "text";
-    this.placeholder = "";
-    this.label = "";
+    this.placeholder = void 0;
+    this.label = void 0;
     this.autocomplete = "on";
-    this.id = "";
+    this.id = void 0;
     this.ref = void 0;
     this.accept = void 0;
-    this.description = "";
-    this.error = "";
-    this.unit = "";
-    this.customClass = "";
+    this.description = void 0;
+    this.error = void 0;
+    this.unit = void 0;
+    this.customClass = void 0;
     this.isFullWidth = false;
     this.isReadonly = false;
     this.isDisabled = false;
@@ -48,7 +51,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     this.min = void 0;
     this.borderless = false;
     this.size = "large";
-    this.rightIcon = "";
+    this.rightIcon = void 0;
     this.isRightIconClickable = false;
     this.keepFocusOnEscape = false;
     this.hasFocus = false;
@@ -210,27 +213,6 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       />
     `;
   }
-  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>`;
-  }
   unitTemplate(styles) {
     return shared_tailwindElement_index.x`<div
       class=${styles}
@@ -388,21 +370,26 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
   }
   render() {
     const { wrapper, input, unit, rightIcon } = this.inputStyles({
-      hasError: this.error !== "",
+      hasError: !!this.error,
       hasHighlight: this.hasHighlight,
       borderless: this.borderless,
       isReadonly: this.isReadonly,
       isDisabled: this.isDisabled,
       isFullWidth: this.isFullWidth,
-      hasUnit: this.unit !== "",
+      hasUnit: !!this.unit,
       size: this.size,
-      hasRightIcon: this.rightIcon !== "",
+      hasRightIcon: !!this.rightIcon,
       isRightIconClickable: this.isRightIconClickable
     });
     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()}>
           <div class="relative w-[inherit]">
             ${this.inputTemplate(input())}
@@ -410,7 +397,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
           </div>
           ${this.unit ? this.unitTemplate(unit()) : shared_tailwindElement_index.E}
         </div>
-        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.E}
+        <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
     `;
   }

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

@@ -1,19 +1,19 @@
 import { InputSize } from '../../shared/types';
 declare const LuksoInput_base: typeof import('lit').LitElement;
 export declare class LuksoInput extends LuksoInput_base {
-    value: string;
-    name: string;
+    value: string | undefined;
+    name: string | undefined;
     type: string;
-    placeholder: string;
-    label: string;
+    placeholder: string | undefined;
+    label: string | undefined;
     autocomplete: string;
-    id: string;
+    id: string | undefined;
     ref: string | undefined;
     accept: string | undefined;
-    description: string;
-    error: string;
-    unit: string;
-    customClass: string;
+    description: string | undefined;
+    error: string | undefined;
+    unit: string | undefined;
+    customClass: string | undefined;
     isFullWidth: boolean;
     isReadonly: boolean;
     isDisabled: boolean;
@@ -22,7 +22,7 @@ export declare class LuksoInput extends LuksoInput_base {
     min: number | undefined;
     borderless: boolean;
     size: InputSize;
-    rightIcon: string;
+    rightIcon: string | undefined;
     isRightIconClickable: boolean;
     keepFocusOnEscape: boolean;
     private hasFocus;
@@ -30,9 +30,6 @@ export declare class LuksoInput extends LuksoInput_base {
     private inputStyles;
     connectedCallback(): void;
     inputTemplate(styles: string): import('lit-html').TemplateResult<1>;
-    labelTemplate(): import('lit-html').TemplateResult<1>;
-    descriptionTemplate(): import('lit-html').TemplateResult<1>;
-    errorTemplate(): import('lit-html').TemplateResult<1>;
     unitTemplate(styles: string): import('lit-html').TemplateResult<1>;
     rightIconTemplate(styles: string): import('lit-html').TemplateResult<1>;
     private handleFocus;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAKA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AAKpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,IAAI,SAAS;IAGb,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAO;IAGnB,EAAE,SAAK;IAGP,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAU;IAGzB,SAAS,SAAK;IAGd,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAkHjB;IAEF,iBAAiB;IAYjB,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAUhC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAKA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,+BAA+B,CAAA;AAKtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAGpC,IAAI,SAAS;IAGb,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,YAAY,SAAO;IAGnB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAY;IAGlC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAGpC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAG3C,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAGnC,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAU;IAGzB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAY;IAGzC,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAkHjB;IAEF,iBAAiB;IAYjB,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAUhC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CAkCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -1,9 +1,12 @@
-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 '../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';
 import '../../tailwind-config.js';
 import { c as cn } from '../../axe-BK9JSROP.js';
 
@@ -23,19 +26,19 @@ const FOCUS_DELAY_MS = 10;
 let LuksoInput = class extends TailwindStyledElement(style) {
   constructor() {
     super(...arguments);
-    this.value = "";
-    this.name = "";
+    this.value = void 0;
+    this.name = void 0;
     this.type = "text";
-    this.placeholder = "";
-    this.label = "";
+    this.placeholder = void 0;
+    this.label = void 0;
     this.autocomplete = "on";
-    this.id = "";
+    this.id = void 0;
     this.ref = void 0;
     this.accept = void 0;
-    this.description = "";
-    this.error = "";
-    this.unit = "";
-    this.customClass = "";
+    this.description = void 0;
+    this.error = void 0;
+    this.unit = void 0;
+    this.customClass = void 0;
     this.isFullWidth = false;
     this.isReadonly = false;
     this.isDisabled = false;
@@ -44,7 +47,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
     this.min = void 0;
     this.borderless = false;
     this.size = "large";
-    this.rightIcon = "";
+    this.rightIcon = void 0;
     this.isRightIconClickable = false;
     this.keepFocusOnEscape = false;
     this.hasFocus = false;
@@ -206,27 +209,6 @@ let LuksoInput = class extends TailwindStyledElement(style) {
       />
     `;
   }
-  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>`;
-  }
   unitTemplate(styles) {
     return x`<div
       class=${styles}
@@ -384,21 +366,26 @@ let LuksoInput = class extends TailwindStyledElement(style) {
   }
   render() {
     const { wrapper, input, unit, rightIcon } = this.inputStyles({
-      hasError: this.error !== "",
+      hasError: !!this.error,
       hasHighlight: this.hasHighlight,
       borderless: this.borderless,
       isReadonly: this.isReadonly,
       isDisabled: this.isDisabled,
       isFullWidth: this.isFullWidth,
-      hasUnit: this.unit !== "",
+      hasUnit: !!this.unit,
       size: this.size,
-      hasRightIcon: this.rightIcon !== "",
+      hasRightIcon: !!this.rightIcon,
       isRightIconClickable: this.isRightIconClickable
     });
     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()}>
           <div class="relative w-[inherit]">
             ${this.inputTemplate(input())}
@@ -406,7 +393,7 @@ let LuksoInput = class extends TailwindStyledElement(style) {
           </div>
           ${this.unit ? this.unitTemplate(unit()) : E}
         </div>
-        ${this.error ? this.errorTemplate() : E}
+        <lukso-form-error error=${this.error}></lukso-form-error>
       </div>
     `;
   }

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

@@ -6,18 +6,12 @@ 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;
 /** Example of input with `unit`. */
 export declare const Unit: any;
 /** If you need input to take full width of the parent element add `is-full-width` property. */
 export declare const FullWidth: any;
-/** If you need input to be focused add `autofocus` property. */
-export declare const Autofocus: any;
 /** With `min` and `max` property you can specify minimum or maximum value that can be entered. It works with `number`, `range`, `date`, `datetime-local`, `month`, `time` and `week` input types */
 export declare const MinMaxValue: any;
 /** With `borderless` property you can render input without border. */

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-input.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/lukso-input.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IA0RX,CAAA;AAED,eAAe,IAAI,CAAA;AAiEnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAKhD,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,uDAAuD;AACvD,eAAO,MAAM,mBAAmB,KAAoB,CAAA;AAMpD,qCAAqC;AACrC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAK3C,oCAAoC;AACpC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAKrC,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,gEAAgE;AAChE,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,oMAAoM;AACpM,eAAO,MAAM,WAAW,KAAoB,CAAA;AAO5C,sEAAsE;AACtE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,gDAAgD;AAChD,eAAO,MAAM,SAAS,KAAoB,CAAA"}
+{"version":3,"file":"lukso-input.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/lukso-input.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAiSX,CAAA;AAED,eAAe,IAAI,CAAA;AAiEnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAKhD,wEAAwE;AACxE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAO/C,oCAAoC;AACpC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAKrC,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,oMAAoM;AACpM,eAAO,MAAM,WAAW,KAAoB,CAAA;AAO5C,sEAAsE;AACtE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,gDAAgD;AAChD,eAAO,MAAM,SAAS,KAAoB,CAAA"}

package/dist/components/lukso-markdown/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 components_luksoSanitize_index = require('../../index-CX03Xr6x.cjs');
+const shared_tailwindElement_index = require('../../index-vTOZ4l_5.cjs');
+const safeCustomElement = require('../../safe-custom-element-CtjlIm0J.cjs');
+const components_luksoSanitize_index = require('../../index-DMRL6USt.cjs');
 
 /**
  * marked v16.2.1 - a markdown parser

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x } from '../../index-C4AqmOTg.js';
-import { n, s as safeCustomElement } from '../../safe-custom-element-BuFHdvWD.js';
-import { p as purify, N as NO_HTML_TAGS_OPTIONS } from '../../index-BEawLNoE.js';
+import { T as TailwindStyledElement, x } from '../../index-BzYTn3KQ.js';
+import { n, s as safeCustomElement } from '../../safe-custom-element-Cz4DNr64.js';
+import { p as purify, N as NO_HTML_TAGS_OPTIONS } from '../../index-BOwyGlSA.js';
 
 /**
  * marked v16.2.1 - a markdown parser