@lukso/web-components 1.43.0 → 1.44.0

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

@@ -151,9 +151,10 @@ exports.LuksoCheckbox = class LuksoCheckbox extends shared_tailwindElement_index
       </div>
     `;
   }
-  handleChange(event) {
+  async handleChange(event) {
     const target = event.target;
     this.checked = target.checked;
+    await this.updateComplete;
     this.dispatchEvent(
       new CustomEvent("on-change", {
         detail: {

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":"AAGA,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,CAKyC;IAEtE,mBAAmB,IAAI,OAAO;IAY9B,gBAAgB,IAAI,OAAO;IAqB3B,aAAa;IAqBb,aAAa;IAQb,aAAa;IAiBb,uBAAuB;IAQvB,MAAM;IAoBN,OAAO,CAAC,YAAY;IAiBpB,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":"AAGA,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,CAKyC;IAEtE,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"}

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

@@ -147,9 +147,10 @@ let LuksoCheckbox = class extends TailwindElement {
       </div>
     `;
   }
-  handleChange(event) {
+  async handleChange(event) {
     const target = event.target;
     this.checked = target.checked;
+    await this.updateComplete;
     this.dispatchEvent(
       new CustomEvent("on-change", {
         detail: {

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

@@ -139,9 +139,10 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
       this.hasHighlight = true;
     }
   }
-  handleBlur(event) {
+  async handleBlur(event) {
     this.hasHocus = false;
     this.hasHighlight = false;
+    await this.updateComplete;
     const target = event.target;
     const blurEvent = new CustomEvent("on-blur", {
       detail: {
@@ -153,7 +154,8 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     });
     this.dispatchEvent(blurEvent);
   }
-  handleChange(event) {
+  async handleChange(event) {
+    await this.updateComplete;
     const target = event.target;
     const changeEvent = new CustomEvent("on-change", {
       detail: {
@@ -165,8 +167,10 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     });
     this.dispatchEvent(changeEvent);
   }
-  handleInput(event) {
+  async handleInput(event) {
     const target = event.target;
+    this.value = target.value;
+    await this.updateComplete;
     const changeEvent = new CustomEvent("on-input", {
       detail: {
         value: target.value,
@@ -177,7 +181,8 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     });
     this.dispatchEvent(changeEvent);
   }
-  handleKeyUp(event) {
+  async handleKeyUp(event) {
+    await this.updateComplete;
     const target = event.target;
     const keyEvent = new CustomEvent("on-key-up", {
       detail: {
@@ -189,7 +194,8 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     });
     this.dispatchEvent(keyEvent);
   }
-  handleKeyDown(event) {
+  async handleKeyDown(event) {
+    await this.updateComplete;
     const target = event.target;
     const keyEvent = new CustomEvent("on-key-down", {
       detail: {
@@ -201,7 +207,8 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
     });
     this.dispatchEvent(keyEvent);
   }
-  handleKeyPress(event) {
+  async handleKeyPress(event) {
+    await this.updateComplete;
     const target = event.target;
     const keyEvent = new CustomEvent("on-key-press", {
       detail: {

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":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,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,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,kBAAkB,CAE4C;IAEtE,OAAO,CAAC,iBAAiB,CAGyC;IAGlE,aAAa;IA+Cb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY;IAkBZ,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAavB,MAAM;CAYP;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":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,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,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,kBAAkB,CAE4C;IAEtE,OAAO,CAAC,iBAAiB,CAGyC;IAGlE,aAAa;IA+Cb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,YAAY;IAkBZ,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAcX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAavB,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

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

@@ -135,9 +135,10 @@ let LuksoInput = class extends TailwindElement {
       this.hasHighlight = true;
     }
   }
-  handleBlur(event) {
+  async handleBlur(event) {
     this.hasHocus = false;
     this.hasHighlight = false;
+    await this.updateComplete;
     const target = event.target;
     const blurEvent = new CustomEvent("on-blur", {
       detail: {
@@ -149,7 +150,8 @@ let LuksoInput = class extends TailwindElement {
     });
     this.dispatchEvent(blurEvent);
   }
-  handleChange(event) {
+  async handleChange(event) {
+    await this.updateComplete;
     const target = event.target;
     const changeEvent = new CustomEvent("on-change", {
       detail: {
@@ -161,8 +163,10 @@ let LuksoInput = class extends TailwindElement {
     });
     this.dispatchEvent(changeEvent);
   }
-  handleInput(event) {
+  async handleInput(event) {
     const target = event.target;
+    this.value = target.value;
+    await this.updateComplete;
     const changeEvent = new CustomEvent("on-input", {
       detail: {
         value: target.value,
@@ -173,7 +177,8 @@ let LuksoInput = class extends TailwindElement {
     });
     this.dispatchEvent(changeEvent);
   }
-  handleKeyUp(event) {
+  async handleKeyUp(event) {
+    await this.updateComplete;
     const target = event.target;
     const keyEvent = new CustomEvent("on-key-up", {
       detail: {
@@ -185,7 +190,8 @@ let LuksoInput = class extends TailwindElement {
     });
     this.dispatchEvent(keyEvent);
   }
-  handleKeyDown(event) {
+  async handleKeyDown(event) {
+    await this.updateComplete;
     const target = event.target;
     const keyEvent = new CustomEvent("on-key-down", {
       detail: {
@@ -197,7 +203,8 @@ let LuksoInput = class extends TailwindElement {
     });
     this.dispatchEvent(keyEvent);
   }
-  handleKeyPress(event) {
+  async handleKeyPress(event) {
+    await this.updateComplete;
     const target = event.target;
     const keyEvent = new CustomEvent("on-key-press", {
       detail: {

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

@@ -47,6 +47,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     this.isSearching = false;
     this.noResultsText = "";
     this.showNoResults = false;
+    this.selected = void 0;
     this.hasFocus = false;
     this.hasHighlight = false;
     this.isDebouncing = false;
@@ -56,6 +57,20 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     border-solid h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-150 appearance-none rounded-12`;
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("selected")) {
+      const selectedOption = this.shadowRoot?.querySelector(
+        `[data-index="${changedProperties.get("selected")}"`
+      );
+      if (selectedOption) {
+        selectedOption.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "nearest"
+        });
+      }
+    }
+  }
   inputTemplate() {
     return shared_tailwindElement_index.x`
       <input
@@ -84,6 +99,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
         @focus=${this.handleFocus}
         @input=${this.handleSearch}
         @blur=${this.handleBlur}
+        @click=${this.handleInputClick}
         @mouseenter=${this.handleMouseOver}
         @mouseleave=${this.handleMouseOut}
       />
@@ -114,10 +130,11 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     const resultTemplates = [];
     this.resultsParsed = JSON.parse(this.results);
     for (const result of Object.entries(this.resultsParsed)) {
+      const index = Number(result[0]);
       if ("value" in result[1]) {
-        resultTemplates.push(this.resultStringTemplate(result[1]));
+        resultTemplates.push(this.resultStringTemplate(result[1], index));
       } else if ("address" in result[1]) {
-        resultTemplates.push(this.resultProfileTemplate(result[1]));
+        resultTemplates.push(this.resultProfileTemplate(result[1], index));
       } else {
         console.error("Unknown result type", result);
       }
@@ -169,19 +186,29 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       ${innerTemplate}
     </div>`;
   }
-  resultStringTemplate(result) {
+  resultStringTemplate(result, index$1) {
     return shared_tailwindElement_index.x`<div
       data-id="${result.id}"
-      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2"
+      data-index="${index$1 + 1}"
+      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2 ${index.customClassMap(
+      {
+        ["bg-neutral-98"]: this.selected === index$1 + 1
+      }
+    )}'"
       @click=${() => this.handleSelect(result)}
     >
       ${result.value}
     </div>`;
   }
-  resultProfileTemplate(result) {
+  resultProfileTemplate(result, index$1) {
     return shared_tailwindElement_index.x`<div
       data-id="${result.address}"
-      class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center"
+      data-index="${index$1 + 1}"
+      class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center ${index.customClassMap(
+      {
+        ["bg-neutral-98"]: this.selected === index$1 + 1
+      }
+    )}"
       @click=${() => this.handleSelect(result)}
     >
       <lukso-profile
@@ -199,7 +226,8 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       ></lukso-username>
     </div>`;
   }
-  handleSelect(result) {
+  async handleSelect(result) {
+    await this.updateComplete;
     const selectEvent = new CustomEvent("on-select", {
       detail: {
         value: result
@@ -215,7 +243,8 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       this.hasHighlight = true;
     }
   }
-  handleBlur(event) {
+  async handleBlur(event) {
+    await this.updateComplete;
     this.hasFocus = false;
     this.hasHighlight = false;
     const target = event.target;
@@ -229,7 +258,21 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     });
     this.dispatchEvent(blurEvent);
   }
-  searchDebounce(searchTerm) {
+  async handleInputClick(event) {
+    await this.updateComplete;
+    const target = event.target;
+    const clickEvent = new CustomEvent("on-input-click", {
+      detail: {
+        value: target.value,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(clickEvent);
+  }
+  async searchDebounce(searchTerm) {
+    await this.updateComplete;
     this.value = searchTerm;
     this.debounceTimer = setTimeout(() => {
       const changeEvent = new CustomEvent("on-search", {
@@ -346,6 +389,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.e({ type: Boolean, attribute: "show-no-results" })
 ], exports.LuksoSearch.prototype, "showNoResults", 2);
+__decorateClass([
+  queryAssignedElements.e({ type: Number })
+], exports.LuksoSearch.prototype, "selected", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoSearch.prototype, "hasFocus", 2);

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

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { Address } from '../../shared/types';
 export type SearchStringResult = {
     id?: string;
@@ -31,6 +31,7 @@ export declare class LuksoSearch extends LuksoSearch_base {
     isSearching: boolean;
     noResultsText: string;
     showNoResults: boolean;
+    selected: any;
     private hasFocus;
     private hasHighlight;
     private isDebouncing;
@@ -38,6 +39,7 @@ export declare class LuksoSearch extends LuksoSearch_base {
     private resultsParsed;
     private searchTerm;
     private defaultInputStyles;
+    willUpdate(changedProperties: PropertyValues<this>): void;
     inputTemplate(): TemplateResult<1>;
     labelTemplate(): TemplateResult<1>;
     descriptionTemplate(): TemplateResult<1>;
@@ -46,11 +48,12 @@ export declare class LuksoSearch extends LuksoSearch_base {
     noResultsTemplate(): TemplateResult<1>;
     loadingTemplate(): TemplateResult<1>;
     dropdownWrapperTemplate(innerTemplate: TemplateResult<1> | TemplateResult<1>[]): TemplateResult<1>;
-    resultStringTemplate(result: SearchStringResult): TemplateResult<1>;
-    resultProfileTemplate(result: SearchProfileResult): TemplateResult<1>;
+    resultStringTemplate(result: SearchStringResult, index: number): TemplateResult<1>;
+    resultProfileTemplate(result: SearchProfileResult, index: number): TemplateResult<1>;
     private handleSelect;
     private handleFocus;
     private handleBlur;
+    private handleInputClick;
     private searchDebounce;
     private handleSearch;
     private handleMouseOver;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAA;AAMnD,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAQ;IAGpB,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,WAAW,UAAQ;IAGnB,aAAa,SAAK;IAGlB,aAAa,UAAQ;IAGrB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,kBAAkB,CAEuD;IAEjF,aAAa;IAoCb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAmBf,iBAAiB;IAQjB,eAAe;IAuCf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB;IAU/C,qBAAqB,CAAC,MAAM,EAAE,mBAAmB;IAsBjD,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAA;AAMnE,OAAO,yBAAyB,CAAA;AAChC,OAAO,4BAA4B,CAAA;AACnC,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;;AAEnE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,YAAY,SAAQ;IAGpB,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,SAAM;IAGd,WAAW,UAAQ;IAGnB,aAAa,SAAK;IAGlB,aAAa,UAAQ;IAGrB,QAAQ,MAAY;IAGpB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAgB;IAGrC,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,kBAAkB,CAEuD;IAEjF,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAiBlD,aAAa;IAqCb,aAAa;IAUb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAqBf,iBAAiB;IAQjB,eAAe;IAuCf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAe9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;YA2BlD,YAAY;IAY1B,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,gBAAgB;YAchB,cAAc;IAiB5B,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -43,6 +43,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     this.isSearching = false;
     this.noResultsText = "";
     this.showNoResults = false;
+    this.selected = void 0;
     this.hasFocus = false;
     this.hasHighlight = false;
     this.isDebouncing = false;
@@ -52,6 +53,20 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     border-solid h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-150 appearance-none rounded-12`;
   }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("selected")) {
+      const selectedOption = this.shadowRoot?.querySelector(
+        `[data-index="${changedProperties.get("selected")}"`
+      );
+      if (selectedOption) {
+        selectedOption.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "nearest"
+        });
+      }
+    }
+  }
   inputTemplate() {
     return x`
       <input
@@ -80,6 +95,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
         @focus=${this.handleFocus}
         @input=${this.handleSearch}
         @blur=${this.handleBlur}
+        @click=${this.handleInputClick}
         @mouseenter=${this.handleMouseOver}
         @mouseleave=${this.handleMouseOut}
       />
@@ -110,10 +126,11 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     const resultTemplates = [];
     this.resultsParsed = JSON.parse(this.results);
     for (const result of Object.entries(this.resultsParsed)) {
+      const index = Number(result[0]);
       if ("value" in result[1]) {
-        resultTemplates.push(this.resultStringTemplate(result[1]));
+        resultTemplates.push(this.resultStringTemplate(result[1], index));
       } else if ("address" in result[1]) {
-        resultTemplates.push(this.resultProfileTemplate(result[1]));
+        resultTemplates.push(this.resultProfileTemplate(result[1], index));
       } else {
         console.error("Unknown result type", result);
       }
@@ -165,19 +182,29 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       ${innerTemplate}
     </div>`;
   }
-  resultStringTemplate(result) {
+  resultStringTemplate(result, index) {
     return x`<div
       data-id="${result.id}"
-      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2"
+      data-index="${index + 1}"
+      class="paragraph-inter-14-regular text-neutral-20 cursor-pointer hover:bg-neutral-98 rounded-8 p-2 ${customClassMap(
+      {
+        ["bg-neutral-98"]: this.selected === index + 1
+      }
+    )}'"
       @click=${() => this.handleSelect(result)}
     >
       ${result.value}
     </div>`;
   }
-  resultProfileTemplate(result) {
+  resultProfileTemplate(result, index) {
     return x`<div
       data-id="${result.address}"
-      class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center"
+      data-index="${index + 1}"
+      class="cursor-pointer hover:bg-neutral-98 rounded-8 p-2 flex gap-2 items-center ${customClassMap(
+      {
+        ["bg-neutral-98"]: this.selected === index + 1
+      }
+    )}"
       @click=${() => this.handleSelect(result)}
     >
       <lukso-profile
@@ -195,7 +222,8 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       ></lukso-username>
     </div>`;
   }
-  handleSelect(result) {
+  async handleSelect(result) {
+    await this.updateComplete;
     const selectEvent = new CustomEvent("on-select", {
       detail: {
         value: result
@@ -211,7 +239,8 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       this.hasHighlight = true;
     }
   }
-  handleBlur(event) {
+  async handleBlur(event) {
+    await this.updateComplete;
     this.hasFocus = false;
     this.hasHighlight = false;
     const target = event.target;
@@ -225,7 +254,21 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
     });
     this.dispatchEvent(blurEvent);
   }
-  searchDebounce(searchTerm) {
+  async handleInputClick(event) {
+    await this.updateComplete;
+    const target = event.target;
+    const clickEvent = new CustomEvent("on-input-click", {
+      detail: {
+        value: target.value,
+        event
+      },
+      bubbles: false,
+      composed: true
+    });
+    this.dispatchEvent(clickEvent);
+  }
+  async searchDebounce(searchTerm) {
+    await this.updateComplete;
     this.value = searchTerm;
     this.debounceTimer = setTimeout(() => {
       const changeEvent = new CustomEvent("on-search", {
@@ -342,6 +385,9 @@ __decorateClass([
 __decorateClass([
   e({ type: Boolean, attribute: "show-no-results" })
 ], LuksoSearch.prototype, "showNoResults", 2);
+__decorateClass([
+  e({ type: Number })
+], LuksoSearch.prototype, "selected", 2);
 __decorateClass([
   t()
 ], LuksoSearch.prototype, "hasFocus", 2);

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

@@ -10,4 +10,6 @@ export declare const ProfileSearch: any;
 export declare const SearchingState: any;
 /** To show that search hes no results add `show-no-results` attribute. You can also customize no results text with `no-results-text` attribute. */
 export declare const NoResults: any;
+/** Example of selected option.  */
+export declare const SelectedOption: any;
 //# sourceMappingURL=lukso-search.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-search.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/lukso-search.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,mHAAmH;AACnH,QAAA,MAAM,IAAI,EAAE,IAsOX,CAAA;AAED,eAAe,IAAI,CAAA;AA4EnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAM9C,gDAAgD;AAChD,eAAO,MAAM,aAAa,KAAoB,CAAA;AAsB9C,0FAA0F;AAC1F,eAAO,MAAM,cAAc,KAAoB,CAAA;AAQ/C,mJAAmJ;AACnJ,eAAO,MAAM,SAAS,KAAoB,CAAA"}
+{"version":3,"file":"lukso-search.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-search/lukso-search.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAEhB,mHAAmH;AACnH,QAAA,MAAM,IAAI,EAAE,IA6OX,CAAA;AAED,eAAe,IAAI,CAAA;AA8EnB,+CAA+C;AAC/C,eAAO,MAAM,aAAa,KAAoB,CAAA;AAM9C,gDAAgD;AAChD,eAAO,MAAM,aAAa,KAAoB,CAAA;AAsB9C,0FAA0F;AAC1F,eAAO,MAAM,cAAc,KAAoB,CAAA;AAQ/C,mJAAmJ;AACnJ,eAAO,MAAM,SAAS,KAAoB,CAAA;AAQ1C,mCAAmC;AACnC,eAAO,MAAM,cAAc,KAAoB,CAAA"}

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

@@ -28,9 +28,10 @@ exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.Tai
     this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
     this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
   }
-  handleChange(event) {
-    this.isChecked = !this.isChecked;
+  async handleChange(event) {
     const target = event.target;
+    this.isChecked = target.checked;
+    await this.updateComplete;
     const changeEvent = new CustomEvent("on-change", {
       detail: {
         value: target.checked,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-switch/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAa;IAGlB,OAAO,CAAC,SAAS,CAAQ;IAMzB,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,kBAAkB,CAAsG;IAEhI,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-switch/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAa;IAGlB,OAAO,CAAC,SAAS,CAAQ;IAMzB,OAAO,CAAC,UAAU,CAAQ;YAEZ,YAAY;IAe1B,OAAO,CAAC,kBAAkB,CAAsG;IAEhI,OAAO,CAAC,kBAAkB,CAA0G;IAEpI,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -24,9 +24,10 @@ let LuksoSwitch = class extends TailwindElement {
     this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
     this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
   }
-  handleChange(event) {
-    this.isChecked = !this.isChecked;
+  async handleChange(event) {
     const target = event.target;
+    this.isChecked = target.checked;
+    await this.updateComplete;
     const changeEvent = new CustomEvent("on-change", {
       detail: {
         value: target.checked,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "type": "module",
   "files": [
     "dist",