@lukso/web-components 1.40.0 → 1.42.0

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const state = require('../../state-a62a7d5d.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const state = require('../../state-51b50a6b.cjs');
+const index = require('../../index-e9668573.cjs');
+require('../../directive-8278ab14.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -248,64 +249,64 @@ exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.Tailw
   }
 };
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "value", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "name", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "type", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "placeholder", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "label", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "autocomplete", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "id", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "ref", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "accept", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "description", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "error", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoInput.prototype, "unit", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "custom-class" })
+  queryAssignedElements.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoInput.prototype, "customClass", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-full-width" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoInput.prototype, "isFullWidth", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-readonly" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoInput.prototype, "isReadonly", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-disabled" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoInput.prototype, "isDisabled", 2);
 __decorateClass([
-  directive.e({ type: Boolean })
+  queryAssignedElements.e({ type: Boolean })
 ], exports.LuksoInput.prototype, "autofocus", 2);
 __decorateClass([
-  directive.e({ type: Number })
+  queryAssignedElements.e({ type: Number })
 ], exports.LuksoInput.prototype, "max", 2);
 __decorateClass([
-  directive.e({ type: Number })
+  queryAssignedElements.e({ type: Number })
 ], exports.LuksoInput.prototype, "min", 2);
 __decorateClass([
-  directive.e({ type: Boolean })
+  queryAssignedElements.e({ type: Boolean })
 ], exports.LuksoInput.prototype, "borderless", 2);
 __decorateClass([
   state.t()
@@ -314,5 +315,5 @@ __decorateClass([
   state.t()
 ], exports.LuksoInput.prototype, "hasHighlight", 2);
 exports.LuksoInput = __decorateClass([
-  directive.e$1("lukso-input")
+  queryAssignedElements.e$1("lukso-input")
 ], exports.LuksoInput);

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

@@ -1,7 +1,8 @@
-import { a as TailwindElement, x, A } from '../../index-211c8050.js';
-import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { t } from '../../state-7fde94d1.js';
-import { c as customClassMap } from '../../index-714323c9.js';
+import { a as TailwindElement, x, A } from '../../index-ed87f41b.js';
+import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
+import { t } from '../../state-02a92ffa.js';
+import { c as customClassMap } from '../../index-5e194caf.js';
+import '../../directive-2bb7789e.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const index = require('../../index-e9668573.cjs');
+require('../../directive-8278ab14.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -60,11 +61,11 @@ exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.Tailw
   }
 };
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-open" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-open" })
 ], exports.LuksoModal.prototype, "isOpen", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoModal.prototype, "size", 2);
 exports.LuksoModal = __decorateClass([
-  directive.e$1("lukso-modal")
+  queryAssignedElements.e$1("lukso-modal")
 ], exports.LuksoModal);

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

@@ -1,6 +1,7 @@
-import { a as TailwindElement, x } from '../../index-211c8050.js';
-import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { c as customClassMap } from '../../index-714323c9.js';
+import { a as TailwindElement, x } from '../../index-ed87f41b.js';
+import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
+import { c as customClassMap } from '../../index-5e194caf.js';
+import '../../directive-2bb7789e.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const state = require('../../state-a62a7d5d.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const state = require('../../state-51b50a6b.cjs');
+const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
-require('../../style-map-cc5b37cd.cjs');
+require('../../directive-8278ab14.cjs');
+require('../../style-map-3b9af808.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -125,32 +126,32 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
   }
 };
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoNavbar.prototype, "title", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-center" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-center" })
 ], exports.LuksoNavbar.prototype, "isCenter", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-sticky" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-sticky" })
 ], exports.LuksoNavbar.prototype, "isSticky", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-transparent" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-transparent" })
 ], exports.LuksoNavbar.prototype, "isTransparent", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-testnet" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-testnet" })
 ], exports.LuksoNavbar.prototype, "isTestnet", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoNavbar.prototype, "icon", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "has-menu" })
+  queryAssignedElements.e({ type: Boolean, attribute: "has-menu" })
 ], exports.LuksoNavbar.prototype, "hasMenu", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "logo-url" })
+  queryAssignedElements.e({ type: String, attribute: "logo-url" })
 ], exports.LuksoNavbar.prototype, "logoUrl", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoNavbar.prototype, "isMenuOpen", 2);
 exports.LuksoNavbar = __decorateClass([
-  directive.e$1("lukso-navbar")
+  queryAssignedElements.e$1("lukso-navbar")
 ], exports.LuksoNavbar);

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

@@ -1,10 +1,11 @@
-import { a as TailwindElement, x } from '../../index-211c8050.js';
-import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { t } from '../../state-7fde94d1.js';
-import { c as customClassMap } from '../../index-714323c9.js';
+import { a as TailwindElement, x } from '../../index-ed87f41b.js';
+import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
+import { t } from '../../state-02a92ffa.js';
+import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
-import '../../style-map-1398bfd6.js';
+import '../../directive-2bb7789e.js';
+import '../../style-map-5daca6c4.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-cc5b37cd.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const styleMap = require('../../style-map-3b9af808.cjs');
+const index = require('../../index-e9668573.cjs');
+require('../../directive-8278ab14.cjs');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -540,17 +541,17 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
   }
 };
 __decorateClass([
-  directive.e({ type: String, attribute: "profile-url" })
+  queryAssignedElements.e({ type: String, attribute: "profile-url" })
 ], exports.LuksoProfile.prototype, "profileUrl", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "profile-address" })
+  queryAssignedElements.e({ type: String, attribute: "profile-address" })
 ], exports.LuksoProfile.prototype, "profileAddress", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "has-identicon" })
+  queryAssignedElements.e({ type: Boolean, attribute: "has-identicon" })
 ], exports.LuksoProfile.prototype, "hasIdenticon", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoProfile.prototype, "size", 2);
 exports.LuksoProfile = __decorateClass([
-  directive.e$1("lukso-profile")
+  queryAssignedElements.e$1("lukso-profile")
 ], exports.LuksoProfile);

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

@@ -1,7 +1,8 @@
-import { a as TailwindElement, x } from '../../index-211c8050.js';
-import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-1398bfd6.js';
-import { c as customClassMap } from '../../index-714323c9.js';
+import { a as TailwindElement, x } from '../../index-ed87f41b.js';
+import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
+import { o } from '../../style-map-5daca6c4.js';
+import { c as customClassMap } from '../../index-5e194caf.js';
+import '../../directive-2bb7789e.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const styleMap = require('../../style-map-cc5b37cd.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const styleMap = require('../../style-map-3b9af808.cjs');
+const index = require('../../index-e9668573.cjs');
+require('../../directive-8278ab14.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -53,17 +54,17 @@ exports.LuksoProgress = class LuksoProgress extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  directive.e({ type: Number })
+  queryAssignedElements.e({ type: Number })
 ], exports.LuksoProgress.prototype, "min", 2);
 __decorateClass([
-  directive.e({ type: Number })
+  queryAssignedElements.e({ type: Number })
 ], exports.LuksoProgress.prototype, "max", 2);
 __decorateClass([
-  directive.e({ type: Number })
+  queryAssignedElements.e({ type: Number })
 ], exports.LuksoProgress.prototype, "current", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoProgress.prototype, "variant", 2);
 exports.LuksoProgress = __decorateClass([
-  directive.e$1("lukso-progress")
+  queryAssignedElements.e$1("lukso-progress")
 ], exports.LuksoProgress);

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

@@ -1,7 +1,8 @@
-import { a as TailwindElement, x } from '../../index-211c8050.js';
-import { e, a as e$1 } from '../../directive-9ec64c08.js';
-import { o } from '../../style-map-1398bfd6.js';
-import { c as customClassMap } from '../../index-714323c9.js';
+import { a as TailwindElement, x } from '../../index-ed87f41b.js';
+import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
+import { o } from '../../style-map-5daca6c4.js';
+import { c as customClassMap } from '../../index-5e194caf.js';
+import '../../directive-2bb7789e.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
+const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const directive = require('../../directive-8278ab14.cjs');
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class e extends directive.i{constructor(i){if(super(i),this.et=shared_tailwindElement_index.A$1,i.type!==directive.t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===shared_tailwindElement_index.A$1||null==r)return this.ft=void 0,this.et=r;if(r===shared_tailwindElement_index.T)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=directive.e$2(e);
+ */class e extends directive.i{constructor(i){if(super(i),this.et=shared_tailwindElement_index.A$1,i.type!==directive.t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===shared_tailwindElement_index.A$1||null==r)return this.ft=void 0,this.et=r;if(r===shared_tailwindElement_index.T)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=directive.e(e);
 
 /*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
 
@@ -1667,11 +1668,11 @@ exports.LuksoSanitize = class LuksoSanitize extends shared_tailwindElement_index
   }
 };
 __decorateClass([
-  directive.e({ type: String, attribute: "html-content" })
+  queryAssignedElements.e({ type: String, attribute: "html-content" })
 ], exports.LuksoSanitize.prototype, "htmlContent", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-pre" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-pre" })
 ], exports.LuksoSanitize.prototype, "isPre", 2);
 exports.LuksoSanitize = __decorateClass([
-  directive.e$1("lukso-sanitize")
+  queryAssignedElements.e$1("lukso-sanitize")
 ], exports.LuksoSanitize);

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

@@ -1,5 +1,6 @@
-import { c as A, b as T, a as TailwindElement, x } from '../../index-211c8050.js';
-import { i, t, b as e$1, e as e$2, a as e$3 } from '../../directive-9ec64c08.js';
+import { c as A, b as T, a as TailwindElement, x } from '../../index-ed87f41b.js';
+import { e as e$2, a as e$3 } from '../../query-assigned-elements-e36df787.js';
+import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
 
 /**
  * @license

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-b3762a1f.cjs');
-const directive = require('../../directive-db00f5fb.cjs');
-const state = require('../../state-a62a7d5d.cjs');
-const index = require('../../index-7dc05ee5.cjs');
+const shared_tailwindElement_index = require('../../index-930f6cf2.cjs');
+const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
+const state = require('../../state-51b50a6b.cjs');
+const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-require('../../style-map-cc5b37cd.cjs');
+require('../../directive-8278ab14.cjs');
+require('../../style-map-3b9af808.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}";
 
@@ -44,9 +45,12 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     this.borderless = false;
     this.results = "";
     this.debounce = 700;
-    this.hasHocus = false;
-    this.hasHighlight = false;
     this.isSearching = false;
+    this.noResultsText = "";
+    this.showNoResults = false;
+    this.hasFocus = false;
+    this.hasHighlight = false;
+    this.isDebouncing = false;
     this.defaultInputStyles = `bg-neutral-100 paragraph-inter-14-regular px-4 py-3 pr-10
     border-solid h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-150 appearance-none rounded-12`;
@@ -106,26 +110,35 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     </div>`;
   }
   resultsTemplate() {
-    if (this.results === "") {
+    const resultTemplates = [];
+    if (this.results === "" && !this.showNoResults || this.showNoResults && !this.noResultsText) {
       return shared_tailwindElement_index.x``;
     }
-    const resultTemplates = [];
-    const results = JSON.parse(this.results);
-    for (const result of Object.entries(results)) {
-      if ("value" in result[1]) {
-        resultTemplates.push(this.resultStringTemplate(result[1]));
-      } else if ("address" in result[1]) {
-        resultTemplates.push(this.resultProfileTemplate(result[1]));
-      } else {
-        console.error("Unknown result type", result);
+    if (this.showNoResults) {
+      resultTemplates.push(this.resultEmptyTemplate());
+    } else {
+      const results = JSON.parse(this.results);
+      for (const result of Object.entries(results)) {
+        if ("value" in result[1]) {
+          resultTemplates.push(this.resultStringTemplate(result[1]));
+        } else if ("address" in result[1]) {
+          resultTemplates.push(this.resultProfileTemplate(result[1]));
+        } else {
+          console.error("Unknown result type", result);
+        }
       }
     }
     return shared_tailwindElement_index.x`<div
-      class="bg-neutral-100 border border-neutral-90 shadow-1xl rounded-12 p-3 mt-2 z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-60 scroll"
+      class="bg-neutral-100 border border-neutral-90 shadow-1xl rounded-12 p-3 mt-2 z-50 flex absolute w-full flex-col gap-1 overflow-y-auto max-h-64"
     >
       ${resultTemplates}
     </div>`;
   }
+  resultEmptyTemplate() {
+    return shared_tailwindElement_index.x`<div class="paragraph-inter-14-semi-bold text-neutral-20 pl-1">
+      ${this.noResultsText}
+    </div>`;
+  }
   resultStringTemplate(result) {
     return shared_tailwindElement_index.x`<div
       data-id="${result.id}"
@@ -168,12 +181,12 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
   }
   handleFocus() {
     if (!this.isReadonly && !this.isDisabled) {
-      this.hasHocus = true;
+      this.hasFocus = true;
       this.hasHighlight = true;
     }
   }
   handleBlur() {
-    this.hasHocus = false;
+    this.hasFocus = false;
     this.hasHighlight = false;
   }
   searchDebounce(searchTerm) {
@@ -186,14 +199,14 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
         composed: true
       });
       this.dispatchEvent(changeEvent);
-      this.isSearching = false;
+      this.isDebouncing = false;
     }, this.debounce);
   }
   handleSearch(event) {
-    if (this.isSearching) {
+    if (this.isDebouncing) {
       clearTimeout(this.debounceTimer);
     }
-    this.isSearching = true;
+    this.isDebouncing = true;
     const target = event.target;
     this.searchDebounce(target.value);
   }
@@ -203,7 +216,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
     }
   }
   handleMouseOut() {
-    if (!this.hasHocus) {
+    if (!this.hasFocus) {
       this.hasHighlight = false;
     }
   }
@@ -215,82 +228,93 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
         <div class="flex relative items-center">
           ${this.inputTemplate()}
           <lukso-icon
-            name="search"
+            name="${this.isSearching || this.isDebouncing ? "spinner" : "search"}"
             class="absolute right-0 mr-3 ${index.customClassMap({
       ["opacity-60 cursor-not-allowed"]: this.isDisabled,
-      ["cursor-not-allowed"]: this.isReadonly
+      ["cursor-not-allowed"]: this.isReadonly,
+      ["animate-spin"]: this.isSearching || this.isDebouncing
     })}"
             @mouseenter=${this.handleMouseOver}
           ></lukso-icon>
         </div>
-        ${this.resultsTemplate()} ${this.error ? this.errorTemplate() : shared_tailwindElement_index.A}
+        ${this.results || this.showNoResults && this.hasFocus ? this.resultsTemplate() : shared_tailwindElement_index.A}
+        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.A}
       </div>
     `;
   }
 };
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "value", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "name", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "type", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "placeholder", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "label", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "autocomplete", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "id", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "description", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "error", 2);
 __decorateClass([
-  directive.e({ type: String, attribute: "custom-class" })
+  queryAssignedElements.e({ type: String, attribute: "custom-class" })
 ], exports.LuksoSearch.prototype, "customClass", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-full-width" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-full-width" })
 ], exports.LuksoSearch.prototype, "isFullWidth", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-readonly" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-readonly" })
 ], exports.LuksoSearch.prototype, "isReadonly", 2);
 __decorateClass([
-  directive.e({ type: Boolean, attribute: "is-disabled" })
+  queryAssignedElements.e({ type: Boolean, attribute: "is-disabled" })
 ], exports.LuksoSearch.prototype, "isDisabled", 2);
 __decorateClass([
-  directive.e({ type: Boolean })
+  queryAssignedElements.e({ type: Boolean })
 ], exports.LuksoSearch.prototype, "autofocus", 2);
 __decorateClass([
-  directive.e({ type: Boolean })
+  queryAssignedElements.e({ type: Boolean })
 ], exports.LuksoSearch.prototype, "borderless", 2);
 __decorateClass([
-  directive.e({ type: String })
+  queryAssignedElements.e({ type: String })
 ], exports.LuksoSearch.prototype, "results", 2);
 __decorateClass([
-  directive.e({ type: Number })
+  queryAssignedElements.e({ type: Number })
 ], exports.LuksoSearch.prototype, "debounce", 2);
+__decorateClass([
+  queryAssignedElements.e({ type: Boolean, attribute: "is-searching" })
+], exports.LuksoSearch.prototype, "isSearching", 2);
+__decorateClass([
+  queryAssignedElements.e({ type: String, attribute: "no-results-text" })
+], exports.LuksoSearch.prototype, "noResultsText", 2);
+__decorateClass([
+  queryAssignedElements.e({ type: Boolean, attribute: "show-no-results" })
+], exports.LuksoSearch.prototype, "showNoResults", 2);
 __decorateClass([
   state.t()
-], exports.LuksoSearch.prototype, "hasHocus", 2);
+], exports.LuksoSearch.prototype, "hasFocus", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoSearch.prototype, "hasHighlight", 2);
 __decorateClass([
   state.t()
-], exports.LuksoSearch.prototype, "isSearching", 2);
+], exports.LuksoSearch.prototype, "isDebouncing", 2);
 __decorateClass([
   state.t()
 ], exports.LuksoSearch.prototype, "debounceTimer", 2);
 exports.LuksoSearch = __decorateClass([
-  directive.e$1("lukso-search")
+  queryAssignedElements.e$1("lukso-search")
 ], exports.LuksoSearch);