@lukso/web-components 1.88.0 → 1.89.0

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

@@ -0,0 +1,338 @@
+import { T as TailwindStyledElement, x, A } from '../../index-e73db22f.js';
+import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
+import { t } from '../../state-b9ca4e74.js';
+import { c as ce } from '../../index-ca8e900d.js';
+import { o } from '../../style-map-d5d85b80.js';
+import '../../tailwind-config.js';
+import { c as cn } from '../../cn-b54dcc61.js';
+import '../lukso-icon/index.js';
+import '../../bundle-mjs-fbc6e2a8.js';
+import '../../directive-2bb7789e.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}";
+
+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 LuksoColorPicker = class extends TailwindStyledElement(style) {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.name = "";
+    this.placeholder = "#000000";
+    this.label = "";
+    this.id = "";
+    this.description = "";
+    this.error = "";
+    this.customClass = "";
+    this.isFullWidth = false;
+    this.isReadonly = false;
+    this.isDisabled = false;
+    this.autofocus = false;
+    this.size = "medium";
+    this.hasFocus = false;
+    this.hasHighlight = false;
+    this.styles = ce({
+      slots: {
+        wrapper: "group grid border overflow-hidden",
+        input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
+        outline-none transition transition-all duration-150 appearance-none`,
+        color: "border-r border-solid",
+        colorInput: "h-[inherit] w-[inherit] opacity-0"
+      },
+      variants: {
+        hasError: {
+          true: {
+            wrapper: "border-red-85 hover:border-red-65",
+            color: "border-red-85 group-hover:border-red-65"
+          },
+          false: {
+            wrapper: "border-neutral-90",
+            color: "border-neutral-90"
+          }
+        },
+        hasHighlight: {
+          true: {
+            wrapper: "border-neutral-35",
+            color: "border-neutral-35"
+          }
+        },
+        isReadonly: {
+          true: { input: "cursor-not-allowed", colorInput: "cursor-not-allowed" }
+        },
+        isDisabled: {
+          true: {
+            input: "text-neutral-60 cursor-not-allowed",
+            color: "opacity-50",
+            colorInput: "cursor-not-allowed"
+          },
+          false: {
+            wrapper: "hover:border-neutral-35",
+            input: "text-neutral-20",
+            color: "group-hover:border-neutral-35"
+          }
+        },
+        isFullWidth: {
+          true: { wrapper: "w-full" },
+          false: { wrapper: "w-[350px]" }
+        },
+        size: {
+          small: {
+            wrapper: "grid-cols-[28px,auto] rounded-8",
+            input: "h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-r-8",
+            color: "h-[28px] w-[28px]"
+          },
+          medium: {
+            wrapper: "grid-cols-[48px,auto] rounded-12",
+            input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-r-12",
+            color: "h-[48px] w-[48px]"
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          isFullWidth: false,
+          class: { wrapper: "w-[300px]" }
+        },
+        {
+          isFullWidth: false,
+          size: "small",
+          class: { wrapper: "w-[190px]" }
+        },
+        {
+          isFullWidth: false,
+          size: "small",
+          class: { wrapper: "w-[210px]" }
+        },
+        {
+          hasHighlight: true,
+          hasError: true,
+          class: {
+            wrapper: "border-red-65 hover:border-red-65",
+            color: "border-red-65 group-hover:border-red-65"
+          }
+        },
+        {
+          isReadonly: false,
+          isDisabled: false,
+          class: {
+            colorInput: "cursor-pointer"
+          }
+        }
+      ]
+    });
+  }
+  inputTemplate(styles) {
+    return x`
+      <input
+        .value=${this.value}
+        name=${this.name ? this.name : A}
+        type="text"
+        placeholder=${this.placeholder ? this.placeholder : A}
+        ?autofocus=${this.autofocus}
+        autocomplete="off"
+        id=${this.id ? this.id : A}
+        data-testid=${this.name ? `input-${this.name}` : "input"}
+        ?readonly=${this.isReadonly ? true : void 0}
+        ?disabled=${this.isDisabled ? true : void 0}
+        class=${cn(styles, this.customClass)}
+        @focus=${this.handleFocus}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @blur=${this.handleBlur}
+        @keyup=${this.handleKeyUp}
+        @keydown=${this.handleKeyDown}
+      />
+    `;
+  }
+  colorPickerTemplate(styles, colorInputStyles) {
+    return x`<div
+      class=${styles}
+      style=${o({
+      backgroundColor: `${this.value}`
+    })}
+    >
+      <input
+        .value=${this.value}
+        type="color"
+        ?disabled=${this.isDisabled || this.isReadonly ? true : void 0}
+        class=${colorInputStyles}
+        @input=${this.handleInput}
+      />
+    </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">
+        ${this.description ?? A}
+      </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;
+      this.hasHighlight = true;
+    }
+  }
+  async handleBlur(event) {
+    this.hasFocus = false;
+    this.hasHighlight = false;
+    await this.updateComplete;
+    const target = event.target;
+    const blurEvent = new CustomEvent("on-blur", {
+      detail: {
+        value: target?.value,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(blurEvent);
+  }
+  async handleChange(event) {
+    await this.updateComplete;
+    const target = event.target;
+    const changeEvent = new CustomEvent("on-change", {
+      detail: {
+        value: target?.value,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(changeEvent);
+  }
+  async handleInput(event) {
+    await this.updateComplete;
+    const target = event.target;
+    this.value = target?.value;
+    const changeEvent = new CustomEvent("on-input", {
+      detail: {
+        value: target?.value,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(changeEvent);
+  }
+  async handleKeyUp(event) {
+    await this.updateComplete;
+    const target = event.target;
+    const keyEvent = new CustomEvent("on-key-up", {
+      detail: {
+        value: target?.value,
+        event
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(keyEvent);
+  }
+  async handleKeyDown(event) {
+    await this.updateComplete;
+    const target = event.target;
+    const keyEvent = new CustomEvent("on-key-down", {
+      detail: {
+        value: target.value,
+        event
+      },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(keyEvent);
+  }
+  render() {
+    const { wrapper, input, color, colorInput } = this.styles({
+      hasError: this.error !== "",
+      hasHighlight: this.hasHighlight,
+      isReadonly: this.isReadonly,
+      isDisabled: this.isDisabled,
+      isFullWidth: this.isFullWidth,
+      size: this.size
+    });
+    return x`
+      <div class="w-[inherit]">
+        ${this.label ? this.labelTemplate() : A}
+        ${this.description ? this.descriptionTemplate() : A}
+        <div class=${wrapper()}>
+          ${this.colorPickerTemplate(color(), colorInput())}
+          <div class="relative w-full">${this.inputTemplate(input())}</div>
+        </div>
+        ${this.error ? this.errorTemplate() : A}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  n({ type: String })
+], LuksoColorPicker.prototype, "value", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoColorPicker.prototype, "name", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoColorPicker.prototype, "placeholder", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoColorPicker.prototype, "label", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoColorPicker.prototype, "id", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoColorPicker.prototype, "description", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoColorPicker.prototype, "error", 2);
+__decorateClass([
+  n({ type: String, attribute: "custom-class" })
+], LuksoColorPicker.prototype, "customClass", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-full-width" })
+], LuksoColorPicker.prototype, "isFullWidth", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-readonly" })
+], LuksoColorPicker.prototype, "isReadonly", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "is-disabled" })
+], LuksoColorPicker.prototype, "isDisabled", 2);
+__decorateClass([
+  n({ type: Boolean })
+], LuksoColorPicker.prototype, "autofocus", 2);
+__decorateClass([
+  n({ type: String })
+], LuksoColorPicker.prototype, "size", 2);
+__decorateClass([
+  t()
+], LuksoColorPicker.prototype, "hasFocus", 2);
+__decorateClass([
+  t()
+], LuksoColorPicker.prototype, "hasHighlight", 2);
+LuksoColorPicker = __decorateClass([
+  e("lukso-color-picker")
+], LuksoColorPicker);
+
+export { LuksoColorPicker };

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

@@ -0,0 +1,19 @@
+import type { Meta } from '@storybook/web-components';
+/**  Documentation and examples of `lukso-color-picker` component.  */
+declare const meta: Meta;
+export default meta;
+/** Example of default input with `value`.  */
+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;
+/** 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. */
+export declare const Small: any;
+//# sourceMappingURL=lukso-color-picker.stories.d.ts.map

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

@@ -0,0 +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,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAEhB,sEAAsE;AACtE,QAAA,MAAM,IAAI,EAAE,IA+KX,CAAA;AAED,eAAe,IAAI,CAAA;AA2CnB,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,KAAK,KAAoB,CAAA"}

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

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../../index-8322d22b.cjs');
+require('../../index-31c27410.cjs');
 require('../../query-assigned-elements-d5e45650.cjs');
 require('../../state-d9fb972b.cjs');
 require('../../index-1d3f4a5a.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-const components_luksoDropdown_index = require('../../index-8186b19a.cjs');
+const components_luksoDropdown_index = require('../../index-3429e18a.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-272091aa.cjs');
+require('../../style-map-77b74f74.cjs');
 require('../../directive-8278ab14.cjs');
 require('../lukso-image/index.cjs');
-require('../../index-752774b2.cjs');
+require('../../index-bca7ccb0.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-5ceac001.cjs');
 

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

@@ -1,15 +1,15 @@
-import '../../index-14baf4da.js';
+import '../../index-e73db22f.js';
 import '../../query-assigned-elements-1c8c9e90.js';
 import '../../state-b9ca4e74.js';
 import '../../index-ca8e900d.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-export { L as LuksoDropdown } from '../../index-62e802f0.js';
+export { L as LuksoDropdown } from '../../index-c6f49fea.js';
 import '../../bundle-mjs-fbc6e2a8.js';
-import '../../style-map-f7093d93.js';
+import '../../style-map-d5d85b80.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../index-0f429f67.js';
+import '../../index-0b520c6a.js';
 import '../../tailwind-config.js';
 import '../../cn-b54dcc61.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
+const shared_tailwindElement_index = require('../../index-31c27410.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-14baf4da.js';
+import { T as TailwindStyledElement, x } from '../../index-e73db22f.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../../bundle-mjs-fbc6e2a8.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
+const shared_tailwindElement_index = require('../../index-31c27410.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 
 var __defProp = Object.defineProperty;

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-14baf4da.js';
+import { a as TailwindElement, x } from '../../index-e73db22f.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 
 var __defProp = Object.defineProperty;

package/dist/components/lukso-icon/icons/expand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../../../src/components/lukso-icon/icons/expand.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAEnE,eAAO,MAAM,MAAM,YAAa,WAAW,yCAyB1C,CAAA"}
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../../../src/components/lukso-icon/icons/expand.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAEnE,eAAO,MAAM,MAAM,YAAa,WAAW,yCA+C1C,CAAA"}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
+const shared_tailwindElement_index = require('../../index-31c27410.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
-const styleMap = require('../../style-map-272091aa.cjs');
+const styleMap = require('../../style-map-77b74f74.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -960,12 +960,34 @@ const expand = (options) => {
   })}
   >
     <path
-      d="M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z"
+      d="M4 12V7C4 5.34315 5.34315 4 7 4H12M20 12V17C20 18.6569 18.6569 20 17 20H12"
       stroke="var(--${options.color})"
       stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
     />
     <path
-      d="M6 6.00012L18 18.0001"
+      d="M19.9999 8C19.9999 6.17755 20 4 20 4H16"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14 10L20 4"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.00007 16C4.00007 17.8224 4 20 4 20L8 20"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10 14L4 20"
       stroke="var(--${options.color})"
       stroke-width="${options.strokeWidth}"
       stroke-linecap="round"

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

@@ -1,6 +1,6 @@
-import { x, T as TailwindStyledElement } from '../../index-14baf4da.js';
+import { x, T as TailwindStyledElement } from '../../index-e73db22f.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
-import { o } from '../../style-map-f7093d93.js';
+import { o } from '../../style-map-d5d85b80.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -956,12 +956,34 @@ const expand = (options) => {
   })}
   >
     <path
-      d="M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z"
+      d="M4 12V7C4 5.34315 5.34315 4 7 4H12M20 12V17C20 18.6569 18.6569 20 17 20H12"
       stroke="var(--${options.color})"
       stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
     />
     <path
-      d="M6 6.00012L18 18.0001"
+      d="M19.9999 8C19.9999 6.17755 20 4 20 4H16"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14 10L20 4"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.00007 16C4.00007 17.8224 4 20 4 20L8 20"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10 14L4 20"
       stroke="var(--${options.color})"
       stroke-width="${options.strokeWidth}"
       stroke-linecap="round"

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
+const shared_tailwindElement_index = require('../../index-31c27410.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
-const styleMap = require('../../style-map-272091aa.cjs');
+const styleMap = require('../../style-map-77b74f74.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');

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

@@ -1,7 +1,7 @@
-import { a as TailwindElement, x } from '../../index-14baf4da.js';
+import { a as TailwindElement, x } from '../../index-e73db22f.js';
 import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
 import { t } from '../../state-b9ca4e74.js';
-import { o } from '../../style-map-f7093d93.js';
+import { o } from '../../style-map-d5d85b80.js';
 import { c as ce } from '../../index-ca8e900d.js';
 import '../../directive-2bb7789e.js';
 import '../../bundle-mjs-fbc6e2a8.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
+const shared_tailwindElement_index = require('../../index-31c27410.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
 const state = require('../../state-d9fb972b.cjs');
 const index = require('../../index-1d3f4a5a.cjs');
@@ -10,7 +10,7 @@ require('../../tailwind-config.cjs');
 const cn = require('../../cn-5ceac001.cjs');
 require('../lukso-icon/index.cjs');
 require('../../bundle-mjs-d58a83c6.cjs');
-require('../../style-map-272091aa.cjs');
+require('../../style-map-77b74f74.cjs');
 require('../../directive-8278ab14.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}";
@@ -52,7 +52,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     this.size = "medium";
     this.rightIcon = "";
     this.isRightIconClickable = false;
-    this.hasHocus = false;
+    this.hasFocus = false;
     this.hasHighlight = false;
     this.inputStyles = index.ce({
       slots: {
@@ -233,12 +233,12 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
   }
   handleFocus() {
     if (!this.isReadonly && !this.isDisabled) {
-      this.hasHocus = true;
+      this.hasFocus = true;
       this.hasHighlight = true;
     }
   }
   async handleBlur(event) {
-    this.hasHocus = false;
+    this.hasFocus = false;
     this.hasHighlight = false;
     await this.updateComplete;
     const target = event.target;
@@ -324,7 +324,7 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     }
   }
   handleMouseOut() {
-    if (!this.hasHocus) {
+    if (!this.hasFocus) {
       this.hasHighlight = false;
     }
   }
@@ -464,7 +464,7 @@ __decorateClass([
 ], exports.LuksoInput.prototype, "isRightIconClickable", 2);
 __decorateClass([
   state.t()
-], exports.LuksoInput.prototype, "hasHocus", 2);
+], exports.LuksoInput.prototype, "hasFocus", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoInput.prototype, "hasHighlight", 2);

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

@@ -24,7 +24,7 @@ export declare class LuksoInput extends LuksoInput_base {
     size: InputSize;
     rightIcon: string;
     isRightIconClickable: boolean;
-    private hasHocus;
+    private hasFocus;
     private hasHighlight;
     private inputStyles;
     inputTemplate(styles: string): import("lit-html").TemplateResult<1>;