@wavelengthusaf/web-components 1.11.0 → 1.13.0

package/dist/cjs/index.cjs

@@ -3183,7 +3183,7 @@ if (!customElements.get("wavelength-progress-bar")) {
 }
 
 // src/web-components/wavelength-input.template.html
-var wavelength_input_template_default = '<style>\n  :host {\n    display: block;\n    width: 100%;\n    font-family: sans-serif;\n    --wavelength-container-background: #f8f8f8;\n    --wavelength-label-background: #ffffff;\n  }\n\n  .field-wrapper {\n    position: relative;\n  }\n\n  .floating-label {\n    position: absolute;\n    top: -0.325rem;\n    left: 12px;\n    font-size: 0.75rem;\n    line-height: 1;\n    color: var(--wavelength-label-color, #666666);\n    padding: 0 4px;\n    z-index: 1;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .floating-label::before,\n  .floating-label::after {\n    content: "";\n    position: absolute;\n    left: 0;\n    width: 100%;\n    z-index: -1;\n  }\n\n  .floating-label::before {\n    top: 0;\n    height: 50%;\n    background: var(--wavelength-container-background, white);\n  }\n\n  .floating-label::after {\n    bottom: 0;\n    height: 50%;\n    background: var(--wavelength-label-background, #ffffff);\n  }\n\n  :host([disabled]) .floating-label::before {\n    opacity: 0;\n  }\n\n  input {\n    font-size: 16px;\n    padding: 16.5px 14px;\n    border: 1px solid var(--wavelength-border-color, #cccccc);\n    border-radius: 8px;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--wavelength-background, #ffffff);\n    transition: border-color 0.2s ease;\n    overflow: auto;\n    font-family: inherit;\n  }\n\n  input:focus {\n    outline: none;\n  }\n\n  input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) .floating-label::after {\n    opacity: 0;\n    cursor: not-allowed;\n  }\n\n  input::placeholder {\n    color: #999999;\n  }\n\n  .helper-message {\n    margin-top: 4px;\n    font-size: 0.75rem;\n    max-width: 100%;\n    word-wrap: break-word;\n    white-space: normal;\n    overflow-wrap: break-word;\n    color: #000000;\n    padding-left: 14px;\n    margin-left: 2px;\n    user-select: none;\n  }\n\n  .required-marker {\n    color: red;\n    font-weight: lighter;\n    font-size: 0.75rem;\n  }\n\n  .clear-button {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1.25 rem;\n    color: #666666;\n    cursor: pointer;\n    opacity: 0.5;\n    user-select: none;\n    transition: opacity 0.2s ease;\n    z-index: 2;\n    display: none;\n    line-height: 1;\n    padding: 0 4px;\n  }\n\n  .clear-button:hover {\n    opacity: 1;\n  }\n\n  :host([disabled]) .clear-button {\n    display: none;\n  }\n</style>\n<div class="field-wrapper">\n  <label class="floating-label" id="floating-label"></label>\n  <div class="input-wrapper"></div>\n  <div class="clear-button" id="clear-button" title="Clear input">\u2715</div>\n</div>\n<div class="helper-message" id="helper"></div>\n';
+var wavelength_input_template_default = '<style>\n  :host {\n    display: block;\n    width: 100%;\n    font-family: sans-serif;\n    --wavelength-container-background: #f8f8f8;\n    --wavelength-label-background: #ffffff;\n  }\n\n  .field-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .input-wrapper {\n    width: 100%;\n    height: 100%;\n  }\n\n  .floating-label {\n    position: absolute;\n    top: -0.325rem;\n    left: 12px;\n    font-size: 0.75rem;\n    line-height: 1;\n    color: var(--wavelength-label-color, #666666);\n    padding: 0 4px;\n    z-index: 1;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .floating-label::before,\n  .floating-label::after {\n    content: "";\n    position: absolute;\n    left: 0;\n    width: 100%;\n    z-index: -1;\n  }\n\n  .floating-label::before {\n    top: 0;\n    height: 50%;\n    background: var(--wavelength-container-background, white);\n  }\n\n  .floating-label::after {\n    bottom: 0;\n    height: 50%;\n    background: var(--wavelength-label-background, #ffffff);\n  }\n\n  :host([disabled]) .floating-label::before {\n    opacity: 0;\n  }\n\n  input {\n    font-size: 16px;\n    padding: 16.5px 14px;\n    border: 1px solid var(--wavelength-border-color, #cccccc);\n    border-radius: 8px;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--wavelength-background, #ffffff);\n    transition: border-color 0.2s ease;\n    overflow: auto;\n    font-family: inherit;\n  }\n\n  input:focus {\n    outline: none;\n  }\n\n  input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) .floating-label::after {\n    opacity: 0;\n    cursor: not-allowed;\n  }\n\n  input::placeholder {\n    color: #999999;\n  }\n\n  .helper-message {\n    margin-top: 4px;\n    font-size: 0.75rem;\n    max-width: 100%;\n    word-wrap: break-word;\n    white-space: normal;\n    overflow-wrap: break-word;\n    color: #000000;\n    padding-left: 14px;\n    margin-left: 2px;\n    user-select: none;\n  }\n\n  .required-marker {\n    color: red;\n    font-weight: lighter;\n    font-size: 0.75rem;\n  }\n\n  .clear-button {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1.25 rem;\n    color: #666666;\n    cursor: pointer;\n    opacity: 0.5;\n    user-select: none;\n    transition: opacity 0.2s ease;\n    z-index: 2;\n    display: none;\n    line-height: 1;\n    padding: 0 4px;\n  }\n\n  .clear-button:hover {\n    opacity: 1;\n  }\n\n  :host([disabled]) .clear-button {\n    display: none;\n  }\n</style>\n<div class="field-wrapper">\n  <label class="floating-label" id="floating-label"></label>\n  <div class="input-wrapper"></div>\n  <div class="clear-button" id="clear-button" title="Clear input">\u2715</div>\n</div>\n<div class="helper-message" id="helper"></div>\n';
 
 // src/web-components/wavelength-input.ts
 function getAncestor(el) {
@@ -3302,7 +3302,9 @@ var BaseWavelengthInput = class extends HTMLElement {
       "max-length",
       "required",
       "force-error",
-      "label"
+      "label",
+      "font-size",
+      "font-family"
     ];
   }
   connectedCallback() {
@@ -3430,6 +3432,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     }
     this.helperEl.innerHTML = htmlMessage;
     this.helperEl.classList.add("error");
+    this.helperEl.style.display = "block";
     this.inputEl.style.borderColor = "red";
     this.helperEl.style.color = "red";
     this.inputEl.setAttribute("aria-invalid", "true");
@@ -3442,6 +3445,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     this.helperEl.textContent = helperText;
     this.helperEl.classList.remove("error");
     this.helperEl.style.color = helperColor;
+    this.helperEl.style.display = helperText ? "block" : "none";
     this.inputEl.style.borderColor = borderColor;
     this.inputEl.setAttribute("aria-invalid", "false");
     this.removeAttribute("data-error");
@@ -3519,6 +3523,12 @@ var BaseWavelengthInput = class extends HTMLElement {
     this.inputEl.style.padding = rawPadding;
     this.inputEl.style.height = this.getAttribute("height") || "";
     this.inputEl.style.borderRadius = this.getAttribute("border-radius") || "8px";
+    if (this.hasAttribute("font-size")) {
+      this.inputEl.style.fontSize = this.getAttribute("font-size");
+    }
+    if (this.hasAttribute("font-family")) {
+      this.inputEl.style.fontFamily = this.getAttribute("font-family");
+    }
     this.helperEl.style.width = helperWidth;
     this.helperEl.style.paddingLeft = `${leftPaddingPx}px`;
   }
@@ -3564,6 +3574,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     if (!hasError) {
       this.helperEl.textContent = helper;
       this.helperEl.style.color = helperColor;
+      this.helperEl.style.display = helper ? "block" : "none";
     }
   }
   _applyAccessibility() {
@@ -3588,7 +3599,10 @@ var BaseWavelengthInput = class extends HTMLElement {
         this.inputEl.name = newValue || "";
         break;
       case "label":
+      case "font-size":
+      case "font-family":
         this._applyContent();
+        this._applyLayout();
         break;
       case "helper-message":
         this._applyValidationHint();
@@ -6506,6 +6520,270 @@ if (!customElements.get("wavelength-pagination")) {
   customElements.define("wavelength-pagination", WavelengthPagination);
 }
 
+// src/web-components/wavelength-search.template.html
+var wavelength_search_template_default = '<style>\n  :host {\n    display: block;\n    --width: 200px;\n    --height: 32px;\n    --border-width: 1px;\n    --mode: automatic;\n    --font-size: 14px;\n    --border-radius: 50px;\n    --border-color: #000;\n    --background-color: #fff;\n    --hover-color: #007bff;\n    --placeholder-color: #999;\n    --placeholder-font: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n    --input-color: #000;\n    --input-font: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  }\n\n  :host([height="small"]) {\n    --height: 32px;\n  }\n\n  :host([height="medium"]) {\n    --height: 48px;\n  }\n\n  :host([height="large"]) {\n    --height: 64px;\n  }\n\n  .flex-container {\n    display: block;\n    flex-direction: column;\n    width: fit-content;\n    height: fit-content;\n    position: relative;\n  }\n\n  .searchbar-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--border-color);\n    background-color: var(--background-color);\n    width: var(--width);\n    height: var(--height);\n    margin: 1px;\n  }\n\n  .searchbar-wrapper:hover {\n    border-color: var(--hover-color);\n  }\n\n  .searchbar-wrapper:focus-within {\n    border-width: calc(var(--border-width) + 1px);\n    border-color: var(--hover-color);\n    margin: 0px;\n  }\n\n  :host([icon-pos="end"]) .searchbar-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  .search-button {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 10px;\n    padding: 0;\n    transition: background-color 0.2s;\n  }\n\n  .search-button:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n\n  .search-icon {\n    width: var(--font-size);\n    height: var(--font-size);\n    fill: currentColor;\n  }\n\n  .input-container {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  .animated-placeholder {\n    position: absolute;\n    left: 14px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--placeholder-color);\n    font-family: var(--placeholder-font);\n    font-size: var(--font-size);\n    pointer-events: none;\n    transition: all 0.2s ease;\n    background-color: transparent;\n    padding: 0 4px;\n    border-radius: 4px;\n    z-index: 5;\n  }\n\n  .input-container.focused .animated-placeholder,\n  .input-container.has-value .animated-placeholder {\n    top: -12px;\n    font-size: calc(var(--font-size) * 0.75);\n    color: var(--placeholder-color);\n    background-color: transparent;\n  }\n\n  .dropdown {\n    position: absolute;\n    font-size: var(--font-size);\n    font-family: var(--input-font);\n    top: calc(100% + 4px);\n    left: 0;\n    max-height: 200px;\n    width: 100%;\n    background: white;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    display: none;\n    z-index: 10;\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  }\n\n  .dropdown-item {\n    padding: 8px 14px;\n    cursor: pointer;\n    border-left: 3px solid transparent;\n    transition:\n      background-color 0.1s,\n      border-color 0.1s;\n  }\n  .dropdown-item:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n  .dropdown-item.highlighted {\n    background-color: rgba(0, 0, 0, 0.08);\n    border-left-color: var(--hover-color);\n  }\n\n  wavelength-input {\n    flex-grow: 1;\n    width: 100%;\n    height: 100%;\n  }\n</style>\n\n<div class="flex-container">\n  <div class="searchbar-wrapper">\n    <button class="search-button search-icon">\n      <svg\n        version="1.1"\n        id="_x32_"\n        xmlns="http://www.w3.org/2000/svg"\n        xmlns:xlink="http://www.w3.org/1999/xlink"\n        viewBox="0 0 512 512"\n        xml:space="preserve"\n        fill="#000000"\n        style="width: 100%; height: 100%"\n      >\n        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>\n        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>\n        <g id="SVGRepo_iconCarrier">\n          <style type="text/css">\n            .st0 {\n              fill: #000000;\n            }\n          </style>\n          <g>\n            <path\n              class="st0"\n              d="M312.069,53.445c-71.26-71.26-187.194-71.26-258.454,0c-71.261,71.26-71.261,187.206,0,258.466 c71.26,71.26,187.194,71.26,258.454,0S383.329,124.705,312.069,53.445z M286.694,286.536 c-57.351,57.34-150.353,57.34-207.704-0.011s-57.351-150.353,0-207.693c57.351-57.351,150.342-57.351,207.693,0 S344.045,229.174,286.694,286.536z"\n            ></path>\n            <path\n              class="st0"\n              d="M101.911,112.531c-29.357,37.725-31.801,89.631-7.321,129.702c1.877,3.087,5.902,4.048,8.978,2.182 c3.065-1.888,4.037-5.903,2.16-8.978c-21.666-35.456-19.506-81.538,6.469-114.876c2.226-2.837,1.713-6.938-1.135-9.154 C108.227,109.193,104.125,109.695,101.911,112.531z"\n            ></path>\n            <path\n              class="st0"\n              d="M498.544,447.722l-132.637-129.2c-7.255-7.07-18.84-6.982-26.008,0.174l-21.033,21.033 c-7.156,7.156-7.234,18.742-0.153,25.986l129.19,132.636c14.346,17.324,35.542,18.35,51.917,1.964 C516.216,483.951,515.857,462.068,498.544,447.722z"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </button>\n    <div class="input-container" id="inputContainer">\n      <label class="animated-placeholder" id="animatedPlaceholder">Search...</label>\n      <wavelength-input\n        focus-color="transparent"\n        background-color="transparent"\n        border-color="transparent"\n        label=""\n        id="searchInput"\n        placeholder=""\n        validation-type="onBlur"\n        min-length="0"\n        clearable\n        height="100%"\n        padding="0 10px"\n      ></wavelength-input>\n      <div id="dropdown" class="dropdown"></div>\n    </div>\n  </div>\n</div>\n';
+
+// src/web-components/wavelength-search.ts
+var WavelengthSearch = class extends HTMLElement {
+  constructor() {
+    super();
+    this.options = [];
+    this.highlightedIndex = -1;
+    this.styleAttributes = [
+      "width",
+      "height",
+      "font-size",
+      "border-width",
+      "border-radius",
+      "border-color",
+      "background-color",
+      "hover-color",
+      "placeholder-color",
+      "placeholder-font",
+      "input-color",
+      "input-font"
+    ];
+    this.handleFocusIn = () => {
+      this.inputContainer.classList.add("focused");
+    };
+    this.handleFocusOut = () => {
+      this.inputContainer.classList.remove("focused");
+    };
+    this.handleInputChange = (e) => {
+      const mode = this.getAttribute("mode") || "automatic";
+      const value = e.detail.value;
+      if (value) {
+        this.inputContainer.classList.add("has-value");
+      } else {
+        this.inputContainer.classList.remove("has-value");
+      }
+      if (mode === "automatic") {
+        if (this.searchTimeout) {
+          clearTimeout(this.searchTimeout);
+        }
+        this.searchTimeout = setTimeout(() => {
+          this.handleSearch(value);
+        }, 300);
+      }
+    };
+    this.handleKeydown = (e) => {
+      const isDropdownVisible = this.dropdown.style.display === "block";
+      const items = this.dropdown.querySelectorAll(".dropdown-item");
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!isDropdownVisible) {
+          this.handleSearch(this.input.value);
+        } else if (items.length > 0) {
+          this.highlightedIndex = (this.highlightedIndex + 1) % items.length;
+          this.updateHighlight(items);
+        }
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (isDropdownVisible && items.length > 0) {
+          this.highlightedIndex = this.highlightedIndex <= 0 ? items.length - 1 : this.highlightedIndex - 1;
+          this.updateHighlight(items);
+        }
+      } else if (e.key === "Escape" || e.key === "Tab") {
+        this.dropdown.style.display = "none";
+        this.highlightedIndex = -1;
+        if (e.key === "Escape") {
+          this.input.focus();
+        }
+      } else if (e.key === "Enter") {
+        if (isDropdownVisible && this.highlightedIndex >= 0 && this.highlightedIndex < items.length) {
+          e.preventDefault();
+          this.selectOption(items[this.highlightedIndex].textContent || "");
+        } else {
+          const value = this.input.value;
+          this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value }, bubbles: true, composed: true }));
+          this.handleSearch(value);
+        }
+      }
+    };
+    this.handleSearchIconClick = () => {
+      const value = this.input.value;
+      this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value }, bubbles: true, composed: true }));
+      this.handleSearch(value);
+    };
+    this.handleDocumentClick = (e) => {
+      if (!this.contains(e.target)) {
+        this.dropdown.style.display = "none";
+        this.highlightedIndex = -1;
+      }
+    };
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_search_template_default;
+  }
+  static get observedAttributes() {
+    return [
+      "width",
+      "height",
+      "mode",
+      "font-size",
+      "border-width",
+      "border-radius",
+      "border-color",
+      "background-color",
+      "hover-color",
+      "options",
+      "placeholder",
+      "icon-pos",
+      "placeholder-color",
+      "placeholder-font",
+      "input-color",
+      "input-font"
+    ];
+  }
+  connectedCallback() {
+    this._syncStyles();
+    this.input = this.shadow.getElementById("searchInput");
+    this.dropdown = this.shadow.getElementById("dropdown");
+    this.inputContainer = this.shadow.getElementById("inputContainer");
+    this.animatedPlaceholder = this.shadow.getElementById("animatedPlaceholder");
+    if (!this.hasAttribute("icon-pos")) {
+      this.setAttribute("icon-pos", "end");
+    }
+    if (!this.hasAttribute("height")) {
+      this.setAttribute("height", "small");
+    }
+    const placeholder = this.getAttribute("placeholder") || "Search...";
+    this.animatedPlaceholder.textContent = placeholder;
+    const searchIcon = this.shadow.querySelector(".search-icon");
+    this.input.addEventListener("focusin", this.handleFocusIn);
+    this.input.addEventListener("focusout", this.handleFocusOut);
+    this.input.addEventListener("inputChange", this.handleInputChange);
+    this.input.addEventListener("keydown", this.handleKeydown);
+    if (searchIcon) {
+      searchIcon.addEventListener("click", this.handleSearchIconClick);
+    }
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+  disconnectedCallback() {
+    this.input.removeEventListener("focusin", this.handleFocusIn);
+    this.input.removeEventListener("focusout", this.handleFocusOut);
+    this.input.removeEventListener("inputChange", this.handleInputChange);
+    this.input.removeEventListener("keydown", this.handleKeydown);
+    const searchIcon = this.shadow.querySelector(".search-icon");
+    if (searchIcon) {
+      searchIcon.removeEventListener("click", this.handleSearchIconClick);
+    }
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (this.styleAttributes.includes(name)) {
+      if (name === "height") {
+        if (["small", "medium", "large"].includes(newValue || "")) {
+          this.style.removeProperty("--height");
+        } else if (newValue !== null) {
+          this.style.setProperty("--height", newValue);
+        } else {
+          this.style.removeProperty("--height");
+        }
+      } else {
+        if (newValue !== null) {
+          this.style.setProperty(`--${name}`, newValue);
+        } else {
+          this.style.removeProperty(`--${name}`);
+        }
+      }
+    }
+    if (name === "options" && newValue) {
+      try {
+        this.options = JSON.parse(newValue);
+      } catch (e) {
+        this.options = newValue.split(",").map((s) => s.trim());
+      }
+    } else if (name === "placeholder" && this.animatedPlaceholder) {
+      this.animatedPlaceholder.textContent = newValue || "Search...";
+    } else if (name === "font-size" && this.input) {
+      this.input.setAttribute("font-size", newValue || "");
+    } else if (name === "input-color" && this.input) {
+      this.input.setAttribute("text-color", newValue || "");
+    } else if (name === "input-font" && this.input) {
+      this.input.setAttribute("font-family", newValue || "");
+    }
+  }
+  handleSearch(query) {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+    if (!query) {
+      this.dropdown.style.display = "none";
+      return;
+    }
+    const results = this.options.filter((option) => option.toLowerCase().includes(query.toLowerCase()));
+    this.highlightedIndex = -1;
+    this.renderDropdown(results);
+  }
+  renderDropdown(results) {
+    if (results.length === 0) {
+      this.dropdown.style.display = "none";
+      return;
+    }
+    this.dropdown.innerHTML = results.map((r) => `<div class="dropdown-item">${r}</div>`).join("");
+    this.dropdown.style.display = "block";
+    const items = this.dropdown.querySelectorAll(".dropdown-item");
+    items.forEach((item, index) => {
+      item.addEventListener("click", () => {
+        this.selectOption(item.textContent || "");
+      });
+      item.addEventListener("mouseenter", () => {
+        this.highlightedIndex = index;
+        this.updateHighlight(items);
+      });
+    });
+    this.updateHighlight(items);
+  }
+  selectOption(value) {
+    this.input.value = value;
+    this.dropdown.style.display = "none";
+    this.highlightedIndex = -1;
+    this.dispatchEvent(new CustomEvent("wavelength-search-select", { detail: { value }, bubbles: true, composed: true }));
+  }
+  // ---- Getters and Setters API ---- //
+  get value() {
+    return this.input.value;
+  }
+  set value(val) {
+    this.input.value = val;
+  }
+  get optionsList() {
+    return this.options;
+  }
+  set optionsList(val) {
+    if (val) {
+      this.options = val;
+      this.setAttribute("options", JSON.stringify(val));
+    }
+  }
+  _syncStyles() {
+    this.styleAttributes.forEach((attr) => {
+      const value = this.getAttribute(attr);
+      if (value) {
+        if (attr === "height" && ["small", "medium", "large"].includes(value)) {
+        } else {
+          this.style.setProperty(`--${attr}`, value);
+        }
+      }
+    });
+  }
+  updateHighlight(items) {
+    items.forEach((item, index) => {
+      const isHighlighted = index === this.highlightedIndex;
+      item.classList.toggle("highlighted", isHighlighted);
+      if (isHighlighted) {
+        item.scrollIntoView({ block: "nearest" });
+      }
+    });
+  }
+};
+if (!customElements.get("wavelength-search")) {
+  customElements.define("wavelength-search", WavelengthSearch);
+}
+
+
 
 
 
@@ -6529,7 +6807,7 @@ if (!customElements.get("wavelength-pagination")) {
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js:

package/dist/cjs/index.d.cts

@@ -2308,4 +2308,36 @@ declare class WavelengthPagination extends HTMLElement {
     private _syncStyles;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };
+declare class WavelengthSearch extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    private input;
+    private dropdown;
+    private inputContainer;
+    private animatedPlaceholder;
+    private options;
+    private highlightedIndex;
+    private styleAttributes;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private handleSearch;
+    private renderDropdown;
+    private selectOption;
+    get value(): string;
+    set value(val: string);
+    get optionsList(): string[] | undefined;
+    set optionsList(val: string[] | undefined);
+    private _syncStyles;
+    private handleFocusIn;
+    private handleFocusOut;
+    private searchTimeout;
+    private handleInputChange;
+    private handleKeydown;
+    private updateHighlight;
+    private handleSearchIconClick;
+    private handleDocumentClick;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSearch, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.d.ts

@@ -2308,4 +2308,36 @@ declare class WavelengthPagination extends HTMLElement {
     private _syncStyles;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };
+declare class WavelengthSearch extends HTMLElement {
+    static get observedAttributes(): string[];
+    private shadow;
+    private input;
+    private dropdown;
+    private inputContainer;
+    private animatedPlaceholder;
+    private options;
+    private highlightedIndex;
+    private styleAttributes;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private handleSearch;
+    private renderDropdown;
+    private selectOption;
+    get value(): string;
+    set value(val: string);
+    get optionsList(): string[] | undefined;
+    set optionsList(val: string[] | undefined);
+    private _syncStyles;
+    private handleFocusIn;
+    private handleFocusOut;
+    private searchTimeout;
+    private handleInputChange;
+    private handleKeydown;
+    private updateHighlight;
+    private handleSearchIconClick;
+    private handleDocumentClick;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthDatePicker, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthProgressBar, WavelengthSearch, WavelengthSnackbar, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.js

@@ -3183,7 +3183,7 @@ if (!customElements.get("wavelength-progress-bar")) {
 }
 
 // src/web-components/wavelength-input.template.html
-var wavelength_input_template_default = '<style>\n  :host {\n    display: block;\n    width: 100%;\n    font-family: sans-serif;\n    --wavelength-container-background: #f8f8f8;\n    --wavelength-label-background: #ffffff;\n  }\n\n  .field-wrapper {\n    position: relative;\n  }\n\n  .floating-label {\n    position: absolute;\n    top: -0.325rem;\n    left: 12px;\n    font-size: 0.75rem;\n    line-height: 1;\n    color: var(--wavelength-label-color, #666666);\n    padding: 0 4px;\n    z-index: 1;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .floating-label::before,\n  .floating-label::after {\n    content: "";\n    position: absolute;\n    left: 0;\n    width: 100%;\n    z-index: -1;\n  }\n\n  .floating-label::before {\n    top: 0;\n    height: 50%;\n    background: var(--wavelength-container-background, white);\n  }\n\n  .floating-label::after {\n    bottom: 0;\n    height: 50%;\n    background: var(--wavelength-label-background, #ffffff);\n  }\n\n  :host([disabled]) .floating-label::before {\n    opacity: 0;\n  }\n\n  input {\n    font-size: 16px;\n    padding: 16.5px 14px;\n    border: 1px solid var(--wavelength-border-color, #cccccc);\n    border-radius: 8px;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--wavelength-background, #ffffff);\n    transition: border-color 0.2s ease;\n    overflow: auto;\n    font-family: inherit;\n  }\n\n  input:focus {\n    outline: none;\n  }\n\n  input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) .floating-label::after {\n    opacity: 0;\n    cursor: not-allowed;\n  }\n\n  input::placeholder {\n    color: #999999;\n  }\n\n  .helper-message {\n    margin-top: 4px;\n    font-size: 0.75rem;\n    max-width: 100%;\n    word-wrap: break-word;\n    white-space: normal;\n    overflow-wrap: break-word;\n    color: #000000;\n    padding-left: 14px;\n    margin-left: 2px;\n    user-select: none;\n  }\n\n  .required-marker {\n    color: red;\n    font-weight: lighter;\n    font-size: 0.75rem;\n  }\n\n  .clear-button {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1.25 rem;\n    color: #666666;\n    cursor: pointer;\n    opacity: 0.5;\n    user-select: none;\n    transition: opacity 0.2s ease;\n    z-index: 2;\n    display: none;\n    line-height: 1;\n    padding: 0 4px;\n  }\n\n  .clear-button:hover {\n    opacity: 1;\n  }\n\n  :host([disabled]) .clear-button {\n    display: none;\n  }\n</style>\n<div class="field-wrapper">\n  <label class="floating-label" id="floating-label"></label>\n  <div class="input-wrapper"></div>\n  <div class="clear-button" id="clear-button" title="Clear input">\u2715</div>\n</div>\n<div class="helper-message" id="helper"></div>\n';
+var wavelength_input_template_default = '<style>\n  :host {\n    display: block;\n    width: 100%;\n    font-family: sans-serif;\n    --wavelength-container-background: #f8f8f8;\n    --wavelength-label-background: #ffffff;\n  }\n\n  .field-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .input-wrapper {\n    width: 100%;\n    height: 100%;\n  }\n\n  .floating-label {\n    position: absolute;\n    top: -0.325rem;\n    left: 12px;\n    font-size: 0.75rem;\n    line-height: 1;\n    color: var(--wavelength-label-color, #666666);\n    padding: 0 4px;\n    z-index: 1;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .floating-label::before,\n  .floating-label::after {\n    content: "";\n    position: absolute;\n    left: 0;\n    width: 100%;\n    z-index: -1;\n  }\n\n  .floating-label::before {\n    top: 0;\n    height: 50%;\n    background: var(--wavelength-container-background, white);\n  }\n\n  .floating-label::after {\n    bottom: 0;\n    height: 50%;\n    background: var(--wavelength-label-background, #ffffff);\n  }\n\n  :host([disabled]) .floating-label::before {\n    opacity: 0;\n  }\n\n  input {\n    font-size: 16px;\n    padding: 16.5px 14px;\n    border: 1px solid var(--wavelength-border-color, #cccccc);\n    border-radius: 8px;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--wavelength-background, #ffffff);\n    transition: border-color 0.2s ease;\n    overflow: auto;\n    font-family: inherit;\n  }\n\n  input:focus {\n    outline: none;\n  }\n\n  input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) .floating-label::after {\n    opacity: 0;\n    cursor: not-allowed;\n  }\n\n  input::placeholder {\n    color: #999999;\n  }\n\n  .helper-message {\n    margin-top: 4px;\n    font-size: 0.75rem;\n    max-width: 100%;\n    word-wrap: break-word;\n    white-space: normal;\n    overflow-wrap: break-word;\n    color: #000000;\n    padding-left: 14px;\n    margin-left: 2px;\n    user-select: none;\n  }\n\n  .required-marker {\n    color: red;\n    font-weight: lighter;\n    font-size: 0.75rem;\n  }\n\n  .clear-button {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1.25 rem;\n    color: #666666;\n    cursor: pointer;\n    opacity: 0.5;\n    user-select: none;\n    transition: opacity 0.2s ease;\n    z-index: 2;\n    display: none;\n    line-height: 1;\n    padding: 0 4px;\n  }\n\n  .clear-button:hover {\n    opacity: 1;\n  }\n\n  :host([disabled]) .clear-button {\n    display: none;\n  }\n</style>\n<div class="field-wrapper">\n  <label class="floating-label" id="floating-label"></label>\n  <div class="input-wrapper"></div>\n  <div class="clear-button" id="clear-button" title="Clear input">\u2715</div>\n</div>\n<div class="helper-message" id="helper"></div>\n';
 
 // src/web-components/wavelength-input.ts
 function getAncestor(el) {
@@ -3302,7 +3302,9 @@ var BaseWavelengthInput = class extends HTMLElement {
       "max-length",
       "required",
       "force-error",
-      "label"
+      "label",
+      "font-size",
+      "font-family"
     ];
   }
   connectedCallback() {
@@ -3430,6 +3432,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     }
     this.helperEl.innerHTML = htmlMessage;
     this.helperEl.classList.add("error");
+    this.helperEl.style.display = "block";
     this.inputEl.style.borderColor = "red";
     this.helperEl.style.color = "red";
     this.inputEl.setAttribute("aria-invalid", "true");
@@ -3442,6 +3445,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     this.helperEl.textContent = helperText;
     this.helperEl.classList.remove("error");
     this.helperEl.style.color = helperColor;
+    this.helperEl.style.display = helperText ? "block" : "none";
     this.inputEl.style.borderColor = borderColor;
     this.inputEl.setAttribute("aria-invalid", "false");
     this.removeAttribute("data-error");
@@ -3519,6 +3523,12 @@ var BaseWavelengthInput = class extends HTMLElement {
     this.inputEl.style.padding = rawPadding;
     this.inputEl.style.height = this.getAttribute("height") || "";
     this.inputEl.style.borderRadius = this.getAttribute("border-radius") || "8px";
+    if (this.hasAttribute("font-size")) {
+      this.inputEl.style.fontSize = this.getAttribute("font-size");
+    }
+    if (this.hasAttribute("font-family")) {
+      this.inputEl.style.fontFamily = this.getAttribute("font-family");
+    }
     this.helperEl.style.width = helperWidth;
     this.helperEl.style.paddingLeft = `${leftPaddingPx}px`;
   }
@@ -3564,6 +3574,7 @@ var BaseWavelengthInput = class extends HTMLElement {
     if (!hasError) {
       this.helperEl.textContent = helper;
       this.helperEl.style.color = helperColor;
+      this.helperEl.style.display = helper ? "block" : "none";
     }
   }
   _applyAccessibility() {
@@ -3588,7 +3599,10 @@ var BaseWavelengthInput = class extends HTMLElement {
         this.inputEl.name = newValue || "";
         break;
       case "label":
+      case "font-size":
+      case "font-family":
         this._applyContent();
+        this._applyLayout();
         break;
       case "helper-message":
         this._applyValidationHint();
@@ -6505,6 +6519,269 @@ var WavelengthPagination = class extends HTMLElement {
 if (!customElements.get("wavelength-pagination")) {
   customElements.define("wavelength-pagination", WavelengthPagination);
 }
+
+// src/web-components/wavelength-search.template.html
+var wavelength_search_template_default = '<style>\n  :host {\n    display: block;\n    --width: 200px;\n    --height: 32px;\n    --border-width: 1px;\n    --mode: automatic;\n    --font-size: 14px;\n    --border-radius: 50px;\n    --border-color: #000;\n    --background-color: #fff;\n    --hover-color: #007bff;\n    --placeholder-color: #999;\n    --placeholder-font: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n    --input-color: #000;\n    --input-font: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  }\n\n  :host([height="small"]) {\n    --height: 32px;\n  }\n\n  :host([height="medium"]) {\n    --height: 48px;\n  }\n\n  :host([height="large"]) {\n    --height: 64px;\n  }\n\n  .flex-container {\n    display: block;\n    flex-direction: column;\n    width: fit-content;\n    height: fit-content;\n    position: relative;\n  }\n\n  .searchbar-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--border-color);\n    background-color: var(--background-color);\n    width: var(--width);\n    height: var(--height);\n    margin: 1px;\n  }\n\n  .searchbar-wrapper:hover {\n    border-color: var(--hover-color);\n  }\n\n  .searchbar-wrapper:focus-within {\n    border-width: calc(var(--border-width) + 1px);\n    border-color: var(--hover-color);\n    margin: 0px;\n  }\n\n  :host([icon-pos="end"]) .searchbar-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  .search-button {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 10px;\n    padding: 0;\n    transition: background-color 0.2s;\n  }\n\n  .search-button:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n\n  .search-icon {\n    width: var(--font-size);\n    height: var(--font-size);\n    fill: currentColor;\n  }\n\n  .input-container {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  .animated-placeholder {\n    position: absolute;\n    left: 14px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--placeholder-color);\n    font-family: var(--placeholder-font);\n    font-size: var(--font-size);\n    pointer-events: none;\n    transition: all 0.2s ease;\n    background-color: transparent;\n    padding: 0 4px;\n    border-radius: 4px;\n    z-index: 5;\n  }\n\n  .input-container.focused .animated-placeholder,\n  .input-container.has-value .animated-placeholder {\n    top: -12px;\n    font-size: calc(var(--font-size) * 0.75);\n    color: var(--placeholder-color);\n    background-color: transparent;\n  }\n\n  .dropdown {\n    position: absolute;\n    font-size: var(--font-size);\n    font-family: var(--input-font);\n    top: calc(100% + 4px);\n    left: 0;\n    max-height: 200px;\n    width: 100%;\n    background: white;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    display: none;\n    z-index: 10;\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  }\n\n  .dropdown-item {\n    padding: 8px 14px;\n    cursor: pointer;\n    border-left: 3px solid transparent;\n    transition:\n      background-color 0.1s,\n      border-color 0.1s;\n  }\n  .dropdown-item:hover {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n  .dropdown-item.highlighted {\n    background-color: rgba(0, 0, 0, 0.08);\n    border-left-color: var(--hover-color);\n  }\n\n  wavelength-input {\n    flex-grow: 1;\n    width: 100%;\n    height: 100%;\n  }\n</style>\n\n<div class="flex-container">\n  <div class="searchbar-wrapper">\n    <button class="search-button search-icon">\n      <svg\n        version="1.1"\n        id="_x32_"\n        xmlns="http://www.w3.org/2000/svg"\n        xmlns:xlink="http://www.w3.org/1999/xlink"\n        viewBox="0 0 512 512"\n        xml:space="preserve"\n        fill="#000000"\n        style="width: 100%; height: 100%"\n      >\n        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>\n        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>\n        <g id="SVGRepo_iconCarrier">\n          <style type="text/css">\n            .st0 {\n              fill: #000000;\n            }\n          </style>\n          <g>\n            <path\n              class="st0"\n              d="M312.069,53.445c-71.26-71.26-187.194-71.26-258.454,0c-71.261,71.26-71.261,187.206,0,258.466 c71.26,71.26,187.194,71.26,258.454,0S383.329,124.705,312.069,53.445z M286.694,286.536 c-57.351,57.34-150.353,57.34-207.704-0.011s-57.351-150.353,0-207.693c57.351-57.351,150.342-57.351,207.693,0 S344.045,229.174,286.694,286.536z"\n            ></path>\n            <path\n              class="st0"\n              d="M101.911,112.531c-29.357,37.725-31.801,89.631-7.321,129.702c1.877,3.087,5.902,4.048,8.978,2.182 c3.065-1.888,4.037-5.903,2.16-8.978c-21.666-35.456-19.506-81.538,6.469-114.876c2.226-2.837,1.713-6.938-1.135-9.154 C108.227,109.193,104.125,109.695,101.911,112.531z"\n            ></path>\n            <path\n              class="st0"\n              d="M498.544,447.722l-132.637-129.2c-7.255-7.07-18.84-6.982-26.008,0.174l-21.033,21.033 c-7.156,7.156-7.234,18.742-0.153,25.986l129.19,132.636c14.346,17.324,35.542,18.35,51.917,1.964 C516.216,483.951,515.857,462.068,498.544,447.722z"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </button>\n    <div class="input-container" id="inputContainer">\n      <label class="animated-placeholder" id="animatedPlaceholder">Search...</label>\n      <wavelength-input\n        focus-color="transparent"\n        background-color="transparent"\n        border-color="transparent"\n        label=""\n        id="searchInput"\n        placeholder=""\n        validation-type="onBlur"\n        min-length="0"\n        clearable\n        height="100%"\n        padding="0 10px"\n      ></wavelength-input>\n      <div id="dropdown" class="dropdown"></div>\n    </div>\n  </div>\n</div>\n';
+
+// src/web-components/wavelength-search.ts
+var WavelengthSearch = class extends HTMLElement {
+  constructor() {
+    super();
+    this.options = [];
+    this.highlightedIndex = -1;
+    this.styleAttributes = [
+      "width",
+      "height",
+      "font-size",
+      "border-width",
+      "border-radius",
+      "border-color",
+      "background-color",
+      "hover-color",
+      "placeholder-color",
+      "placeholder-font",
+      "input-color",
+      "input-font"
+    ];
+    this.handleFocusIn = () => {
+      this.inputContainer.classList.add("focused");
+    };
+    this.handleFocusOut = () => {
+      this.inputContainer.classList.remove("focused");
+    };
+    this.handleInputChange = (e) => {
+      const mode = this.getAttribute("mode") || "automatic";
+      const value = e.detail.value;
+      if (value) {
+        this.inputContainer.classList.add("has-value");
+      } else {
+        this.inputContainer.classList.remove("has-value");
+      }
+      if (mode === "automatic") {
+        if (this.searchTimeout) {
+          clearTimeout(this.searchTimeout);
+        }
+        this.searchTimeout = setTimeout(() => {
+          this.handleSearch(value);
+        }, 300);
+      }
+    };
+    this.handleKeydown = (e) => {
+      const isDropdownVisible = this.dropdown.style.display === "block";
+      const items = this.dropdown.querySelectorAll(".dropdown-item");
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!isDropdownVisible) {
+          this.handleSearch(this.input.value);
+        } else if (items.length > 0) {
+          this.highlightedIndex = (this.highlightedIndex + 1) % items.length;
+          this.updateHighlight(items);
+        }
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (isDropdownVisible && items.length > 0) {
+          this.highlightedIndex = this.highlightedIndex <= 0 ? items.length - 1 : this.highlightedIndex - 1;
+          this.updateHighlight(items);
+        }
+      } else if (e.key === "Escape" || e.key === "Tab") {
+        this.dropdown.style.display = "none";
+        this.highlightedIndex = -1;
+        if (e.key === "Escape") {
+          this.input.focus();
+        }
+      } else if (e.key === "Enter") {
+        if (isDropdownVisible && this.highlightedIndex >= 0 && this.highlightedIndex < items.length) {
+          e.preventDefault();
+          this.selectOption(items[this.highlightedIndex].textContent || "");
+        } else {
+          const value = this.input.value;
+          this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value }, bubbles: true, composed: true }));
+          this.handleSearch(value);
+        }
+      }
+    };
+    this.handleSearchIconClick = () => {
+      const value = this.input.value;
+      this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value }, bubbles: true, composed: true }));
+      this.handleSearch(value);
+    };
+    this.handleDocumentClick = (e) => {
+      if (!this.contains(e.target)) {
+        this.dropdown.style.display = "none";
+        this.highlightedIndex = -1;
+      }
+    };
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.innerHTML = wavelength_search_template_default;
+  }
+  static get observedAttributes() {
+    return [
+      "width",
+      "height",
+      "mode",
+      "font-size",
+      "border-width",
+      "border-radius",
+      "border-color",
+      "background-color",
+      "hover-color",
+      "options",
+      "placeholder",
+      "icon-pos",
+      "placeholder-color",
+      "placeholder-font",
+      "input-color",
+      "input-font"
+    ];
+  }
+  connectedCallback() {
+    this._syncStyles();
+    this.input = this.shadow.getElementById("searchInput");
+    this.dropdown = this.shadow.getElementById("dropdown");
+    this.inputContainer = this.shadow.getElementById("inputContainer");
+    this.animatedPlaceholder = this.shadow.getElementById("animatedPlaceholder");
+    if (!this.hasAttribute("icon-pos")) {
+      this.setAttribute("icon-pos", "end");
+    }
+    if (!this.hasAttribute("height")) {
+      this.setAttribute("height", "small");
+    }
+    const placeholder = this.getAttribute("placeholder") || "Search...";
+    this.animatedPlaceholder.textContent = placeholder;
+    const searchIcon = this.shadow.querySelector(".search-icon");
+    this.input.addEventListener("focusin", this.handleFocusIn);
+    this.input.addEventListener("focusout", this.handleFocusOut);
+    this.input.addEventListener("inputChange", this.handleInputChange);
+    this.input.addEventListener("keydown", this.handleKeydown);
+    if (searchIcon) {
+      searchIcon.addEventListener("click", this.handleSearchIconClick);
+    }
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+  disconnectedCallback() {
+    this.input.removeEventListener("focusin", this.handleFocusIn);
+    this.input.removeEventListener("focusout", this.handleFocusOut);
+    this.input.removeEventListener("inputChange", this.handleInputChange);
+    this.input.removeEventListener("keydown", this.handleKeydown);
+    const searchIcon = this.shadow.querySelector(".search-icon");
+    if (searchIcon) {
+      searchIcon.removeEventListener("click", this.handleSearchIconClick);
+    }
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (this.styleAttributes.includes(name)) {
+      if (name === "height") {
+        if (["small", "medium", "large"].includes(newValue || "")) {
+          this.style.removeProperty("--height");
+        } else if (newValue !== null) {
+          this.style.setProperty("--height", newValue);
+        } else {
+          this.style.removeProperty("--height");
+        }
+      } else {
+        if (newValue !== null) {
+          this.style.setProperty(`--${name}`, newValue);
+        } else {
+          this.style.removeProperty(`--${name}`);
+        }
+      }
+    }
+    if (name === "options" && newValue) {
+      try {
+        this.options = JSON.parse(newValue);
+      } catch (e) {
+        this.options = newValue.split(",").map((s) => s.trim());
+      }
+    } else if (name === "placeholder" && this.animatedPlaceholder) {
+      this.animatedPlaceholder.textContent = newValue || "Search...";
+    } else if (name === "font-size" && this.input) {
+      this.input.setAttribute("font-size", newValue || "");
+    } else if (name === "input-color" && this.input) {
+      this.input.setAttribute("text-color", newValue || "");
+    } else if (name === "input-font" && this.input) {
+      this.input.setAttribute("font-family", newValue || "");
+    }
+  }
+  handleSearch(query) {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+    if (!query) {
+      this.dropdown.style.display = "none";
+      return;
+    }
+    const results = this.options.filter((option) => option.toLowerCase().includes(query.toLowerCase()));
+    this.highlightedIndex = -1;
+    this.renderDropdown(results);
+  }
+  renderDropdown(results) {
+    if (results.length === 0) {
+      this.dropdown.style.display = "none";
+      return;
+    }
+    this.dropdown.innerHTML = results.map((r) => `<div class="dropdown-item">${r}</div>`).join("");
+    this.dropdown.style.display = "block";
+    const items = this.dropdown.querySelectorAll(".dropdown-item");
+    items.forEach((item, index) => {
+      item.addEventListener("click", () => {
+        this.selectOption(item.textContent || "");
+      });
+      item.addEventListener("mouseenter", () => {
+        this.highlightedIndex = index;
+        this.updateHighlight(items);
+      });
+    });
+    this.updateHighlight(items);
+  }
+  selectOption(value) {
+    this.input.value = value;
+    this.dropdown.style.display = "none";
+    this.highlightedIndex = -1;
+    this.dispatchEvent(new CustomEvent("wavelength-search-select", { detail: { value }, bubbles: true, composed: true }));
+  }
+  // ---- Getters and Setters API ---- //
+  get value() {
+    return this.input.value;
+  }
+  set value(val) {
+    this.input.value = val;
+  }
+  get optionsList() {
+    return this.options;
+  }
+  set optionsList(val) {
+    if (val) {
+      this.options = val;
+      this.setAttribute("options", JSON.stringify(val));
+    }
+  }
+  _syncStyles() {
+    this.styleAttributes.forEach((attr) => {
+      const value = this.getAttribute(attr);
+      if (value) {
+        if (attr === "height" && ["small", "medium", "large"].includes(value)) {
+        } else {
+          this.style.setProperty(`--${attr}`, value);
+        }
+      }
+    });
+  }
+  updateHighlight(items) {
+    items.forEach((item, index) => {
+      const isHighlighted = index === this.highlightedIndex;
+      item.classList.toggle("highlighted", isHighlighted);
+      if (isHighlighted) {
+        item.scrollIntoView({ block: "nearest" });
+      }
+    });
+  }
+};
+if (!customElements.get("wavelength-search")) {
+  customElements.define("wavelength-search", WavelengthSearch);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -6526,6 +6803,7 @@ export {
   WavelengthPagination,
   WavelengthPlaneTrail,
   WavelengthProgressBar,
+  WavelengthSearch,
   WavelengthSnackbar,
   WavelengthTitleBar,
   WavelengthToolTip

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/web-components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "Common component library used by Wavelength developers (NATIVE WEB COMPONENTS)",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",