@lukso/web-components 1.57.0 → 1.58.0

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

@@ -1,11 +1,12 @@
-import { a as TailwindElement, x } from '../../index-df3f9aca.js';
+import { a as TailwindElement, x, A } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
+import { s as se } from '../../index-c55a1069.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
+import '../../style-map-ec917798.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-7a7ca2de.js';
+import '../../index-5e194caf.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -29,11 +30,76 @@ let LuksoNavbar = class extends TailwindElement {
     this.icon = "";
     this.hasMenu = false;
     this.logoUrl = "";
+    this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
     this.defaultLogoUrl = "/assets/images/up-logo.png";
-    this.centerStyles = `justify-center`;
-    this.stickyStyles = `sticky top-0 z-[1000]`;
-    this.transparentStyles = `!bg-transparent !shadow-none`;
+    this.navbarStyles = se({
+      slots: {
+        wrapper: `bg-neutral-100 shadow-pink-drop-shadow h-78 grid items-center`,
+        mobileMenuWrapper: `items-center justify-end pr-6 flex gap-2`,
+        mobileMenuTrigger: `w-[18px] h-[2px] rounded-4 bg-neutral-20 transition-all
+        before:content-[''] before:absolute before:w-[18px] before:h-[2px] before:bg-neutral-20 before:rounded-4 before:transition-all before:-translate-y-[6px]
+        after:content-[''] after:absolute after:w-[18px] after:h-[2px] after:bg-neutral-20 after:rounded-4 after:transition-all after:translate-y-[6px]`,
+        mobileMenuDropdown: `fixed top-[78px] left-0 w-full h-full bg-neutral-100 z-[1000] justify-center items-center flex`,
+        desktopMenuWrapper: `items-center justify-end pr-10 no-underline hidden`,
+        desktopCenterWrapper: `items-center hidden`
+      },
+      variants: {
+        isCenter: {
+          true: {
+            wrapper: `justify-center`
+          },
+          false: {
+            wrapper: `grid-cols-[minmax(max-content,35%)_auto_minmax(max-content,35%)]`
+          }
+        },
+        isSticky: {
+          true: {
+            wrapper: `sticky top-0 z-[1000]`
+          }
+        },
+        isTransparent: {
+          true: {
+            wrapper: `!bg-transparent !shadow-none`
+          }
+        },
+        mobileBreakpoint: {
+          sm: {
+            mobileMenuWrapper: `sm:hidden`,
+            mobileMenuDropdown: `sm:hidden`,
+            desktopMenuWrapper: `sm:flex`,
+            desktopCenterWrapper: `sm:flex`
+          },
+          md: {
+            mobileMenuWrapper: `md:hidden`,
+            mobileMenuDropdown: `md:hidden`,
+            desktopMenuWrapper: `md:flex`,
+            desktopCenterWrapper: `md:flex`
+          },
+          lg: {
+            mobileMenuWrapper: `lg:hidden`,
+            mobileMenuDropdown: `lg:hidden`,
+            desktopMenuWrapper: `lg:flex`,
+            desktopCenterWrapper: `lg:flex`
+          },
+          xl: {
+            mobileMenuWrapper: `xl:hidden`,
+            mobileMenuDropdown: `xl:hidden`,
+            desktopMenuWrapper: `xl:flex`,
+            desktopCenterWrapper: `xl:flex`
+          }
+        },
+        isMenuOpen: {
+          true: {
+            mobileMenuTrigger: `!bg-transparent before:rotate-[45deg] before:!-translate-y-[0px] after:-rotate-[45deg] after:!translate-y-[0px]`,
+            mobileMenuDropdown: `animate-fade-in animation-duration-150`
+          },
+          false: {
+            mobileMenuDropdown: `!hidden`
+          }
+        }
+      }
+    });
   }
   handleBrandClick() {
     const event = new CustomEvent("on-brand-click", {
@@ -58,53 +124,52 @@ let LuksoNavbar = class extends TailwindElement {
     }
   }
   desktopMenuTemplate() {
-    return x`<div
-      class="items-center justify-end pr-10 no-underline hidden md:flex"
-    >
-      <slot name="desktop"></slot>
+    const { desktopMenuWrapper } = this.navbarStyles({
+      mobileBreakpoint: this.mobileBreakpoint
+    });
+    return x` <div class=${desktopMenuWrapper()}>
+      <slot name="desktop-menu"></slot>
+    </div>`;
+  }
+  desktopCenterTemplate() {
+    const { desktopCenterWrapper } = this.navbarStyles({
+      mobileBreakpoint: this.mobileBreakpoint
+    });
+    return x`<div class=${desktopCenterWrapper()}>
+      <slot name="desktop-center"></slot>
     </div>`;
   }
   mobileMenuTemplate() {
-    return x`<div class="items-center justify-end pr-6 flex md:hidden">
-      <div
-        class="flex items-center justify-center w-8 h-8 cursor-pointer"
-        @click=${this.handleMenuToggle}
-      >
+    const { mobileMenuTrigger, mobileMenuDropdown, mobileMenuWrapper } = this.navbarStyles({
+      isMenuOpen: this.isMenuOpen,
+      mobileBreakpoint: this.mobileBreakpoint
+    });
+    return x`<div></div>
+      <div class=${mobileMenuWrapper()}>
+        <div class="flex">
+          <slot name="mobile-icons"></slot>
+        </div>
         <div
-          class="w-[18px] h-[2px] rounded-4 bg-neutral-20 transition-all
-          before:content-[''] before:absolute before:w-[18px] before:h-[2px] before:bg-neutral-20 before:rounded-4 before:transition-all before:-translate-y-[6px]
-          after:content-[''] after:absolute after:w-[18px] after:h-[2px] after:bg-neutral-20 after:rounded-4 after:transition-all after:translate-y-[6px]
-          ${customClassMap({
-      "!bg-transparent before:rotate-[45deg] before:!-translate-y-[0px] after:-rotate-[45deg] after:!translate-y-[0px]": this.isMenuOpen
-    })}
-      "
-        ></div>
-      </div>
-      <div
-        class="fixed top-[78px] left-0 w-full h-full bg-neutral-100 z-[1000] justify-center items-center flex md:hidden
-        ${customClassMap({
-      "animate-fade-in animation-duration-150": this.isMenuOpen,
-      "!hidden": !this.isMenuOpen
-    })}"
-        @click=${this.handleMenuToggle}
-      >
-        <slot name="mobile"></slot>
-      </div>
-    </div>`;
+          class="flex items-center justify-center w-8 h-8 cursor-pointer"
+          @click=${this.handleMenuToggle}
+        >
+          <div class=${mobileMenuTrigger()}></div>
+        </div>
+        <div class=${mobileMenuDropdown()} @click=${this.handleMenuToggle}>
+          <slot name="mobile-menu"></slot>
+        </div>
+      </div>`;
   }
   render() {
+    const { wrapper } = this.navbarStyles({
+      isCenter: this.isCenter,
+      isSticky: this.isSticky,
+      isTransparent: this.isTransparent,
+      mobileBreakpoint: this.mobileBreakpoint
+    });
     return x`
-      <nav
-        data-testid="navbar"
-        class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
-        ${customClassMap({
-      [this.centerStyles]: this.isCenter,
-      ["justify-between"]: !this.isCenter,
-      [this.stickyStyles]: this.isSticky,
-      [this.transparentStyles]: this.isTransparent
-    })}"
-      >
-        <div class="flex items-center px-7 h-full sm:px-10">
+      <nav data-testid="navbar" class=${wrapper()}>
+        <div class="flex items-center px-7 h-[inherit] sm:px-10">
           <div
             class="flex cursor-pointer group"
             @click=${this.handleBrandClick}
@@ -121,7 +186,7 @@ let LuksoNavbar = class extends TailwindElement {
             </div>
             ${this.isTestnet ? x`<lukso-tag background-color="yellow-65" class="ml-2">
                   TESTNET
-                </lukso-tag>` : ""}
+                </lukso-tag>` : A}
           </div>
           ${this.icon ? x`<div
                 class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
@@ -132,9 +197,10 @@ let LuksoNavbar = class extends TailwindElement {
                   color="purple-51"
                   @click=${this.handleIconClick}
                 ></lukso-icon>
-              </div>` : ""}
+              </div>` : A}
         </div>
-        ${this.isCenter ? x`` : this.hasMenu ? x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : x``}
+        ${this.isCenter ? A : this.desktopCenterTemplate()}
+        ${this.isCenter ? A : this.hasMenu ? x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : A}
       </nav>
     `;
   }
@@ -163,6 +229,9 @@ __decorateClass([
 __decorateClass([
   n({ type: String, attribute: "logo-url" })
 ], LuksoNavbar.prototype, "logoUrl", 2);
+__decorateClass([
+  n({ type: String, attribute: "mobile-breakpoint" })
+], LuksoNavbar.prototype, "mobileBreakpoint", 2);
 __decorateClass([
   t()
 ], LuksoNavbar.prototype, "isMenuOpen", 2);

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

@@ -16,4 +16,6 @@ export declare const NavbarWithMenu: any;
 export declare const TestnetNavbar: any;
 /** Example of navbar with custom logo. You set this by adding `logo-url` attribute. */
 export declare const CustomLogoNavbar: any;
+/** Example of navbar with `lukso-search` component. */
+export declare const SearchNavbar: any;
 //# sourceMappingURL=lukso-navbar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-navbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/lukso-navbar.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAE5B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IA8HX,CAAA;AAED,eAAe,IAAI,CAAA;AA0DnB,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAE9C,qGAAqG;AACrG,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,sHAAsH;AACtH,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAMlD,iIAAiI;AACjI,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,+IAA+I;AAC/I,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,2FAA2F;AAC3F,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,KAAoB,CAAA"}
+{"version":3,"file":"lukso-navbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/lukso-navbar.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IA0IX,CAAA;AAED,eAAe,IAAI,CAAA;AA+CnB,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAE9C,qGAAqG;AACrG,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,sHAAsH;AACtH,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAKlD,iIAAiI;AACjI,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,+IAA+I;AAC/I,eAAO,MAAM,cAAc,KAAoB,CAAA;AAmC/C,2FAA2F;AAC3F,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,KAAoB,CAAA;AAMjD,uDAAuD;AACvD,eAAO,MAAM,YAAY,KAAoB,CAAA"}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4e37f431.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-fc150c58.cjs');
+const styleMap = require('../../style-map-0e5b61bc.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-df3f9aca.js';
+import { a as TailwindElement, x } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-7a7ca2de.js';
+import { o } from '../../style-map-ec917798.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4e37f431.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-fc150c58.cjs');
+const styleMap = require('../../style-map-0e5b61bc.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-4ec0bd94.cjs');
 require('../../directive-8278ab14.cjs');

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-df3f9aca.js';
+import { a as TailwindElement, x } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-7a7ca2de.js';
+import { o } from '../../style-map-ec917798.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-616567d4.js';
 import '../../directive-2bb7789e.js';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4e37f431.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 

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

@@ -1,4 +1,4 @@
-import { A, b as T, a as TailwindElement, x } from '../../index-df3f9aca.js';
+import { A, b as T, a as TailwindElement, x } from '../../index-2cbce78e.js';
 import { n, e as e$2 } from '../../query-assigned-elements-5d94572f.js';
 import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4e37f431.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e9668573.cjs');
@@ -10,8 +10,8 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-fc150c58.cjs');
-require('../../index-67517059.cjs');
+require('../../style-map-0e5b61bc.cjs');
+require('../../index-b1813aa6.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}";
 
@@ -58,6 +58,16 @@ 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`;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.handleOutsideDropdownClick.bind(this));
+    window.addEventListener("keydown", this.handleDropdownKeydown.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("click", this.handleOutsideDropdownClick);
+    window.removeEventListener("keydown", this.handleDropdownKeydown);
+  }
   willUpdate(changedProperties) {
     if (changedProperties.has("selected")) {
       const selectedOption = this.shadowRoot?.querySelector(
@@ -86,6 +96,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
         autocomplete=${this.autocomplete}
         id=${this.id || this.name}
         data-testid=${this.name ? `input-${this.name}` : "input"}
+        data-component="lukso-search"
         ?readonly=${this.isReadonly ? true : void 0}
         ?disabled=${this.isDisabled ? true : void 0}
         class=${index.customClassMap({
@@ -230,6 +241,36 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       ></lukso-username>
     </div>`;
   }
+  async handleOutsideDropdownClick(event) {
+    const element = event.target;
+    if (element?.dataset?.component === "lukso-search") {
+      return;
+    }
+    this.results = "";
+  }
+  async handleDropdownKeydown(event) {
+    if (event.key === "ArrowUp" && this.selected && this.selected > 1 && this.resultsParsed?.length) {
+      event.preventDefault();
+      this.selected = this.selected - 1;
+    }
+    if (event.key === "ArrowDown" && this.resultsParsed?.length) {
+      event.preventDefault();
+      if (!this.selected) {
+        this.selected = 1;
+      } else if (this.selected < this.resultsParsed.length) {
+        this.selected = this.selected + 1;
+      }
+    }
+    if (event.key === "Enter" && this.resultsParsed?.length) {
+      if (this.selected) {
+        const selectedResult = this.resultsParsed[this.selected - 1];
+        await this.handleSelect(selectedResult);
+      }
+    }
+    if (event.key === "Escape") {
+      this.results = "";
+    }
+  }
   async handleSelect(result) {
     await this.updateComplete;
     const selectEvent = new CustomEvent("on-select", {
@@ -273,6 +314,7 @@ exports.LuksoSearch = class LuksoSearch extends shared_tailwindElement_index.Tai
       bubbles: false,
       composed: true
     });
+    this.handleSearch(event);
     this.dispatchEvent(clickEvent);
   }
   async searchDebounce(searchTerm) {

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

@@ -39,6 +39,8 @@ export declare class LuksoSearch extends LuksoSearch_base {
     private resultsParsed;
     private searchTerm;
     private defaultInputStyles;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     willUpdate(changedProperties: PropertyValues<this>): void;
     inputTemplate(): TemplateResult<1>;
     labelTemplate(): TemplateResult<1>;
@@ -50,6 +52,8 @@ export declare class LuksoSearch extends LuksoSearch_base {
     dropdownWrapperTemplate(innerTemplate: TemplateResult<1> | TemplateResult<1>[]): TemplateResult<1>;
     resultStringTemplate(result: SearchStringResult, index: number): TemplateResult<1>;
     resultProfileTemplate(result: SearchProfileResult, index: number): TemplateResult<1>;
+    private handleOutsideDropdownClick;
+    private handleDropdownKeydown;
     private handleSelect;
     private handleFocus;
     private handleBlur;

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,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;IAwBlD,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"}
+{"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,iBAAiB;IAKjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwBlD,aAAa;IAsCb,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,0BAA0B;YAU1B,qBAAqB;YAiCrB,YAAY;IAY1B,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,gBAAgB;YAehB,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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-df3f9aca.js';
+import { T as TailwindStyledElement, x, A } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
@@ -6,8 +6,8 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-7a7ca2de.js';
-import '../../index-8a1b283c.js';
+import '../../style-map-ec917798.js';
+import '../../index-61181f2e.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}";
 
@@ -54,6 +54,16 @@ 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`;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.handleOutsideDropdownClick.bind(this));
+    window.addEventListener("keydown", this.handleDropdownKeydown.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("click", this.handleOutsideDropdownClick);
+    window.removeEventListener("keydown", this.handleDropdownKeydown);
+  }
   willUpdate(changedProperties) {
     if (changedProperties.has("selected")) {
       const selectedOption = this.shadowRoot?.querySelector(
@@ -82,6 +92,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
         autocomplete=${this.autocomplete}
         id=${this.id || this.name}
         data-testid=${this.name ? `input-${this.name}` : "input"}
+        data-component="lukso-search"
         ?readonly=${this.isReadonly ? true : void 0}
         ?disabled=${this.isDisabled ? true : void 0}
         class=${customClassMap({
@@ -226,6 +237,36 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       ></lukso-username>
     </div>`;
   }
+  async handleOutsideDropdownClick(event) {
+    const element = event.target;
+    if (element?.dataset?.component === "lukso-search") {
+      return;
+    }
+    this.results = "";
+  }
+  async handleDropdownKeydown(event) {
+    if (event.key === "ArrowUp" && this.selected && this.selected > 1 && this.resultsParsed?.length) {
+      event.preventDefault();
+      this.selected = this.selected - 1;
+    }
+    if (event.key === "ArrowDown" && this.resultsParsed?.length) {
+      event.preventDefault();
+      if (!this.selected) {
+        this.selected = 1;
+      } else if (this.selected < this.resultsParsed.length) {
+        this.selected = this.selected + 1;
+      }
+    }
+    if (event.key === "Enter" && this.resultsParsed?.length) {
+      if (this.selected) {
+        const selectedResult = this.resultsParsed[this.selected - 1];
+        await this.handleSelect(selectedResult);
+      }
+    }
+    if (event.key === "Escape") {
+      this.results = "";
+    }
+  }
   async handleSelect(result) {
     await this.updateComplete;
     const selectEvent = new CustomEvent("on-select", {
@@ -269,6 +310,7 @@ let LuksoSearch = class extends TailwindStyledElement(style) {
       bubbles: false,
       composed: true
     });
+    this.handleSearch(event);
     this.dispatchEvent(clickEvent);
   }
   async searchDebounce(searchTerm) {

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

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4e37f431.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 const state = require('../../state-f73a8b4f.cjs');
 const index = require('../../index-e8741080.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
-require('../../style-map-fc150c58.cjs');
+require('../../style-map-0e5b61bc.cjs');
 require('../../directive-8278ab14.cjs');
 require('../../index-e9668573.cjs');
-require('../../index-67517059.cjs');
+require('../../index-b1813aa6.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}";
 
@@ -289,6 +289,9 @@ exports.LuksoSelect = class LuksoSelect extends shared_tailwindElement_index.Tai
         await this.handleSelect(selectedResult);
       }
     }
+    if (event.key === "Escape") {
+      this.isOpen = false;
+    }
   }
   async handleSelect(option) {
     if (this.isReadonly || this.isDisabled) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-select/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,EAAE,EAAE,MAAM,CAAA;IACV,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,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,MAAY;IAGpB,MAAM,EAAE,OAAO,CAAQ;IAGvB,OAAO,EAAE,OAAO,CAAQ;IAGxB,WAAW,EAAE,OAAO,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAsC;IAEzD,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,qBAAqB,CAQ3B;IAEF,OAAO,CAAC,aAAa,CAWnB;IAEF,OAAO,CAAC,UAAU,CAUhB;IAEF,iBAAiB;IAKjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwClD,aAAa;IAqBb,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAkBf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAiB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;IAiBhE,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAiCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA4BP;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-select/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,EAAE,EAAE,MAAM,CAAA;IACV,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,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,EAAE,SAAK;IAGP,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,OAAO,SAAK;IAGZ,QAAQ,MAAY;IAGpB,MAAM,EAAE,OAAO,CAAQ;IAGvB,OAAO,EAAE,OAAO,CAAQ;IAGxB,WAAW,EAAE,OAAO,CAAQ;IAG5B,OAAO,CAAC,aAAa,CAAqB;IAG1C,OAAO,CAAC,WAAW,CAAsC;IAEzD,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,qBAAqB,CAQ3B;IAEF,OAAO,CAAC,aAAa,CAWnB;IAEF,OAAO,CAAC,UAAU,CAUhB;IAEF,iBAAiB;IAKjB,oBAAoB;IAMpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAwClD,aAAa;IAqBb,aAAa;IAQb,mBAAmB;IAQnB,aAAa;IAMb,eAAe;IAkBf,uBAAuB,CACrB,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE;IASxD,oBAAoB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM;IAiB9D,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM;IAiBhE,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,0BAA0B;YAUpB,qBAAqB;YAqCrB,YAAY;YAiBZ,UAAU;IAcxB,OAAO,CAAC,WAAW;IAQnB,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,14 +1,14 @@
-import { T as TailwindStyledElement, x, A } from '../../index-df3f9aca.js';
+import { T as TailwindStyledElement, x, A } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 import { t } from '../../state-0a779257.js';
 import { s as se } from '../../index-c55a1069.js';
 import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
-import '../../style-map-7a7ca2de.js';
+import '../../style-map-ec917798.js';
 import '../../directive-2bb7789e.js';
 import '../../index-5e194caf.js';
-import '../../index-8a1b283c.js';
+import '../../index-61181f2e.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}";
 
@@ -285,6 +285,9 @@ let LuksoSelect = class extends TailwindStyledElement(style) {
         await this.handleSelect(selectedResult);
       }
     }
+    if (event.key === "Escape") {
+      this.isOpen = false;
+    }
   }
   async handleSelect(option) {
     if (this.isReadonly || this.isDisabled) {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4e37f431.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-df3f9aca.js';
+import { T as TailwindStyledElement, x } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
 
 const style = ":host {\n    display: inline-flex\n}";

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4e37f431.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-fc150c58.cjs');
+const styleMap = require('../../style-map-0e5b61bc.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-df3f9aca.js';
+import { a as TailwindElement, x } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-7a7ca2de.js';
+import { o } from '../../style-map-ec917798.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-4e37f431.cjs');
+const shared_tailwindElement_index = require('../../index-4964f1aa.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-fc150c58.cjs');
+const styleMap = require('../../style-map-0e5b61bc.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

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

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x } from '../../index-df3f9aca.js';
+import { T as TailwindStyledElement, x } from '../../index-2cbce78e.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-7a7ca2de.js';
+import { o } from '../../style-map-ec917798.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';