@wavelengthusaf/web-components 1.20.0 → 1.21.1

package/dist/cjs/index.cjs

@@ -4044,38 +4044,69 @@ var wavelength_manyplanes_template_default = '<style>\n  :host {\n    display: b
 
 // src/web-components/wavelength-manyplanes.ts
 var WavelengthManyPlanes = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["number-of-planes", "trail-dir", "opacity", "color", "gradient", "spaced"];
-  }
   constructor() {
     super();
+    this._numberOfPlanes = 5;
+    this._spaced = true;
     this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.innerHTML = wavelength_manyplanes_template_default;
   }
+  static get observedAttributes() {
+    return ["number-of-planes", "trail-dir", "opacity", "color", "gradient", "spaced"];
+  }
+  get numberOfPlanes() {
+    return this._numberOfPlanes;
+  }
+  set numberOfPlanes(val) {
+    if (this._numberOfPlanes !== val) {
+      this._numberOfPlanes = val;
+      this.setAttribute("number-of-planes", val.toString());
+      this.updateComponent();
+    }
+  }
+  get spaced() {
+    return this._spaced;
+  }
+  set spaced(val) {
+    if (this._spaced !== val) {
+      this._spaced = val;
+      this.setAttribute("spaced", val.toString());
+      this.updateComponent();
+    }
+  }
   connectedCallback() {
     this.updateComponent();
   }
-  attributeChangedCallback() {
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "number-of-planes") {
+      const parsed = Number(newValue);
+      if (!isNaN(parsed)) {
+        this._numberOfPlanes = parsed;
+      }
+    } else if (name === "spaced") {
+      this._spaced = newValue === "true";
+    }
     this.updateComponent();
   }
   updateComponent() {
-    const numberOfPlanes = this.getAttribute("number-of-planes") || "5";
+    const numberOfPlanes = this._numberOfPlanes;
     const trailDir = this.getAttribute("trail-dir") || "right";
     const opacity = this.getAttribute("opacity") || "1";
     const color = this.getAttribute("color") || "#00308F";
     const gradient = this.getAttribute("gradient") || "false";
-    const spaced = this.getAttribute("spaced") || "true";
+    const spaced = this._spaced;
     const planeContainer = this.shadow.getElementById("plane-container");
     if (planeContainer === null) {
       return;
     }
     planeContainer.replaceChildren();
     planeContainer.style.flexDirection = trailDir === "right" ? "row" : "row-reverse";
-    planeContainer.style.justifyContent = spaced === "true" ? "space-between" : "flex-end";
-    for (let i = 0; i < parseInt(numberOfPlanes); i++) {
+    planeContainer.style.justifyContent = spaced ? "space-between" : "flex-end";
+    for (let i = 0; i < numberOfPlanes; i++) {
       let currentPlaneOpacity = opacity;
       if (gradient === "true") {
-        currentPlaneOpacity = (parseFloat(opacity) * ((i + 1) / parseInt(numberOfPlanes))).toString();
+        currentPlaneOpacity = (parseFloat(opacity) * ((i + 1) / numberOfPlanes)).toString();
       }
       planeContainer.appendChild(this.createPlane(currentPlaneOpacity, color, trailDir === "right" ? false : true));
     }
@@ -4459,7 +4490,7 @@ var wavelength_search_template_default = '<style>\n  :host {\n    display: block
 var WavelengthSearch = class extends HTMLElement {
   constructor() {
     super();
-    this.options = [];
+    this._options = [];
     this.highlightedIndex = -1;
     this.styleAttributes = [
       "width",
@@ -4477,14 +4508,15 @@ var WavelengthSearch = class extends HTMLElement {
     ];
     this.handleFocusIn = () => {
       this.inputContainer.classList.add("focused");
+      this.handleSearch(this.input.value || "");
     };
     this.handleFocusOut = () => {
       this.inputContainer.classList.remove("focused");
     };
     this.handleInputChange = (e) => {
       const mode = this.getAttribute("mode") || "automatic";
-      const value = e.detail.value;
-      if (value) {
+      const currentQueryText = e.detail.value;
+      if (currentQueryText) {
         this.inputContainer.classList.add("has-value");
       } else {
         this.inputContainer.classList.remove("has-value");
@@ -4494,7 +4526,7 @@ var WavelengthSearch = class extends HTMLElement {
           clearTimeout(this.searchTimeout);
         }
         this.searchTimeout = setTimeout(() => {
-          this.handleSearch(value);
+          this.handleSearch(currentQueryText);
         }, 300);
       }
     };
@@ -4524,18 +4556,22 @@ var WavelengthSearch = class extends HTMLElement {
       } else if (e.key === "Enter") {
         if (isDropdownVisible && this.highlightedIndex >= 0 && this.highlightedIndex < items.length) {
           e.preventDefault();
-          this.selectOption(items[this.highlightedIndex].textContent || "");
+          const id = items[this.highlightedIndex].getAttribute("data-id");
+          const selected = this._options.find((o) => String(o.id) === id);
+          if (selected) {
+            this.selectOption(selected);
+          }
         } else {
-          const value = this.input.value;
-          this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value }, bubbles: true, composed: true }));
-          this.handleSearch(value);
+          const submittedQuery = this.input.value;
+          this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value: submittedQuery }, bubbles: true, composed: true }));
+          this.handleSearch(submittedQuery);
         }
       }
     };
     this.handleSearchIconClick = () => {
-      const value = this.input.value;
-      this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value }, bubbles: true, composed: true }));
-      this.handleSearch(value);
+      const submittedQuery = this.input.value;
+      this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value: submittedQuery }, bubbles: true, composed: true }));
+      this.handleSearch(submittedQuery);
     };
     this.handleDocumentClick = (e) => {
       if (!this.contains(e.target)) {
@@ -4622,9 +4658,12 @@ var WavelengthSearch = class extends HTMLElement {
     }
     if (name === "options" && newValue) {
       try {
-        this.options = JSON.parse(newValue);
+        const parsed = JSON.parse(newValue);
+        if (Array.isArray(parsed)) {
+          this._options = parsed.map((item, index) => typeof item === "string" ? { id: index, title: item } : item);
+        }
       } catch (e) {
-        this.options = newValue.split(",").map((s) => s.trim());
+        this._options = newValue.split(",").map((s, index) => ({ id: index, title: s.trim() }));
       }
     } else if (name === "placeholder" && this.animatedPlaceholder) {
       this.animatedPlaceholder.textContent = newValue || "Search...";
@@ -4641,11 +4680,7 @@ var WavelengthSearch = class extends HTMLElement {
       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()));
+    const results = query ? this._options.filter((option) => option.title && option.title.toLowerCase().includes(query.toLowerCase())) : this._options;
     this.highlightedIndex = -1;
     this.renderDropdown(results);
   }
@@ -4654,12 +4689,17 @@ var WavelengthSearch = class extends HTMLElement {
       this.dropdown.style.display = "none";
       return;
     }
-    this.dropdown.innerHTML = results.map((r) => `<div class="dropdown-item">${r}</div>`).join("");
+    this.dropdown.innerHTML = results.map(
+      (r) => `<div class="dropdown-item" data-id="${r.id}">
+      <div class="search-result-title">${r.title}</div>
+      ${r.subtitle ? `<div class="search-result-subtitle">${r.subtitle}</div>` : ""}
+    </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 || "");
+        this.selectOption(results[index]);
       });
       item.addEventListener("mouseenter", () => {
         this.highlightedIndex = index;
@@ -4668,44 +4708,43 @@ var WavelengthSearch = class extends HTMLElement {
     });
     this.updateHighlight(items);
   }
-  selectOption(value) {
-    this.input.value = value;
+  selectOption(selectedItem) {
+    this.input.value = selectedItem.title;
     this.dropdown.style.display = "none";
     this.highlightedIndex = -1;
-    this.dispatchEvent(new CustomEvent("wavelength-search-select", { detail: { value }, bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent("wavelength-search-select", { detail: { value: selectedItem }, bubbles: true, composed: true }));
   }
   // ---- Getters and Setters API ---- //
   get value() {
     return this.input.value;
   }
-  set value(val) {
-    this.input.value = val;
+  set value(searchQueryText) {
+    this.input.value = searchQueryText;
   }
-  get optionsList() {
-    return this.options;
+  get options() {
+    return this._options;
   }
-  set optionsList(val) {
-    if (val) {
-      this.options = val;
-      this.setAttribute("options", JSON.stringify(val));
+  set options(val) {
+    if (Array.isArray(val)) {
+      this._options = val;
     }
   }
   _syncStyles() {
     this.styleAttributes.forEach((attr) => {
-      const value = this.getAttribute(attr);
-      if (value) {
-        if (attr === "height" && ["small", "medium", "large"].includes(value)) {
+      const attrValue = this.getAttribute(attr);
+      if (attrValue) {
+        if (attr === "height" && ["small", "medium", "large"].includes(attrValue)) {
         } else {
-          this.style.setProperty(`--${attr}`, value);
+          this.style.setProperty(`--${attr}`, attrValue);
         }
       }
     });
   }
-  updateHighlight(items) {
+  updateHighlight(items, preventScroll = false) {
     items.forEach((item, index) => {
       const isHighlighted = index === this.highlightedIndex;
       item.classList.toggle("highlighted", isHighlighted);
-      if (isHighlighted) {
+      if (isHighlighted && !preventScroll) {
         item.scrollIntoView({ block: "nearest" });
       }
     });

package/dist/cjs/index.d.cts

@@ -2307,9 +2307,15 @@ declare class WavelengthPlaneTrail extends WavelengthPlaneTrail_base {
 declare class WavelengthManyPlanes extends HTMLElement {
     static get observedAttributes(): string[];
     private shadow;
+    private _numberOfPlanes;
+    private _spaced;
+    get numberOfPlanes(): number;
+    set numberOfPlanes(val: number);
+    get spaced(): boolean;
+    set spaced(val: boolean);
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     updateComponent(): void;
     createPlane(opacity: string, color: string, flipped: boolean): SVGSVGElement;
 }
@@ -2367,6 +2373,11 @@ declare class WavelengthPagination extends HTMLElement {
     private _syncStyles;
 }
 
+interface SearchResult {
+    id: number | string;
+    title: string;
+    subtitle?: string;
+}
 declare class WavelengthSearch extends HTMLElement {
     static get observedAttributes(): string[];
     private shadow;
@@ -2374,7 +2385,7 @@ declare class WavelengthSearch extends HTMLElement {
     private dropdown;
     private inputContainer;
     private animatedPlaceholder;
-    private options;
+    private _options;
     private highlightedIndex;
     private styleAttributes;
     constructor();
@@ -2385,9 +2396,9 @@ declare class WavelengthSearch extends HTMLElement {
     private renderDropdown;
     private selectOption;
     get value(): string;
-    set value(val: string);
-    get optionsList(): string[] | undefined;
-    set optionsList(val: string[] | undefined);
+    set value(searchQueryText: string);
+    get options(): SearchResult[];
+    set options(val: SearchResult[]);
     private _syncStyles;
     private handleFocusIn;
     private handleFocusOut;
@@ -2918,4 +2929,4 @@ declare class WavelengthCommentDisplay extends HTMLElement {
     private updateSelectedState;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBadge, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, type WavelengthConfirmationModalElements, WavelengthDatePicker, WavelengthDialog, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip };
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, type SearchResult, WavelengthBadge, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, type WavelengthConfirmationModalElements, WavelengthDatePicker, WavelengthDialog, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.d.ts

@@ -2307,9 +2307,15 @@ declare class WavelengthPlaneTrail extends WavelengthPlaneTrail_base {
 declare class WavelengthManyPlanes extends HTMLElement {
     static get observedAttributes(): string[];
     private shadow;
+    private _numberOfPlanes;
+    private _spaced;
+    get numberOfPlanes(): number;
+    set numberOfPlanes(val: number);
+    get spaced(): boolean;
+    set spaced(val: boolean);
     constructor();
     connectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     updateComponent(): void;
     createPlane(opacity: string, color: string, flipped: boolean): SVGSVGElement;
 }
@@ -2367,6 +2373,11 @@ declare class WavelengthPagination extends HTMLElement {
     private _syncStyles;
 }
 
+interface SearchResult {
+    id: number | string;
+    title: string;
+    subtitle?: string;
+}
 declare class WavelengthSearch extends HTMLElement {
     static get observedAttributes(): string[];
     private shadow;
@@ -2374,7 +2385,7 @@ declare class WavelengthSearch extends HTMLElement {
     private dropdown;
     private inputContainer;
     private animatedPlaceholder;
-    private options;
+    private _options;
     private highlightedIndex;
     private styleAttributes;
     constructor();
@@ -2385,9 +2396,9 @@ declare class WavelengthSearch extends HTMLElement {
     private renderDropdown;
     private selectOption;
     get value(): string;
-    set value(val: string);
-    get optionsList(): string[] | undefined;
-    set optionsList(val: string[] | undefined);
+    set value(searchQueryText: string);
+    get options(): SearchResult[];
+    set options(val: SearchResult[]);
     private _syncStyles;
     private handleFocusIn;
     private handleFocusOut;
@@ -2918,4 +2929,4 @@ declare class WavelengthCommentDisplay extends HTMLElement {
     private updateSelectedState;
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, WavelengthBadge, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, type WavelengthConfirmationModalElements, WavelengthDatePicker, WavelengthDialog, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip };
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, type CheckboxElements, ChildDataTable, SampleComponent, type SearchResult, WavelengthBadge, WavelengthBanner, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, type WavelengthConfirmationModalElements, WavelengthDatePicker, WavelengthDialog, WavelengthDropdown, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthPagination, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSwitch, WavelengthTitleBar, WavelengthToolTip };

package/dist/esm/index.js

@@ -4044,38 +4044,69 @@ var wavelength_manyplanes_template_default = '<style>\n  :host {\n    display: b
 
 // src/web-components/wavelength-manyplanes.ts
 var WavelengthManyPlanes = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["number-of-planes", "trail-dir", "opacity", "color", "gradient", "spaced"];
-  }
   constructor() {
     super();
+    this._numberOfPlanes = 5;
+    this._spaced = true;
     this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.innerHTML = wavelength_manyplanes_template_default;
   }
+  static get observedAttributes() {
+    return ["number-of-planes", "trail-dir", "opacity", "color", "gradient", "spaced"];
+  }
+  get numberOfPlanes() {
+    return this._numberOfPlanes;
+  }
+  set numberOfPlanes(val) {
+    if (this._numberOfPlanes !== val) {
+      this._numberOfPlanes = val;
+      this.setAttribute("number-of-planes", val.toString());
+      this.updateComponent();
+    }
+  }
+  get spaced() {
+    return this._spaced;
+  }
+  set spaced(val) {
+    if (this._spaced !== val) {
+      this._spaced = val;
+      this.setAttribute("spaced", val.toString());
+      this.updateComponent();
+    }
+  }
   connectedCallback() {
     this.updateComponent();
   }
-  attributeChangedCallback() {
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "number-of-planes") {
+      const parsed = Number(newValue);
+      if (!isNaN(parsed)) {
+        this._numberOfPlanes = parsed;
+      }
+    } else if (name === "spaced") {
+      this._spaced = newValue === "true";
+    }
     this.updateComponent();
   }
   updateComponent() {
-    const numberOfPlanes = this.getAttribute("number-of-planes") || "5";
+    const numberOfPlanes = this._numberOfPlanes;
     const trailDir = this.getAttribute("trail-dir") || "right";
     const opacity = this.getAttribute("opacity") || "1";
     const color = this.getAttribute("color") || "#00308F";
     const gradient = this.getAttribute("gradient") || "false";
-    const spaced = this.getAttribute("spaced") || "true";
+    const spaced = this._spaced;
     const planeContainer = this.shadow.getElementById("plane-container");
     if (planeContainer === null) {
       return;
     }
     planeContainer.replaceChildren();
     planeContainer.style.flexDirection = trailDir === "right" ? "row" : "row-reverse";
-    planeContainer.style.justifyContent = spaced === "true" ? "space-between" : "flex-end";
-    for (let i = 0; i < parseInt(numberOfPlanes); i++) {
+    planeContainer.style.justifyContent = spaced ? "space-between" : "flex-end";
+    for (let i = 0; i < numberOfPlanes; i++) {
       let currentPlaneOpacity = opacity;
       if (gradient === "true") {
-        currentPlaneOpacity = (parseFloat(opacity) * ((i + 1) / parseInt(numberOfPlanes))).toString();
+        currentPlaneOpacity = (parseFloat(opacity) * ((i + 1) / numberOfPlanes)).toString();
       }
       planeContainer.appendChild(this.createPlane(currentPlaneOpacity, color, trailDir === "right" ? false : true));
     }
@@ -4459,7 +4490,7 @@ var wavelength_search_template_default = '<style>\n  :host {\n    display: block
 var WavelengthSearch = class extends HTMLElement {
   constructor() {
     super();
-    this.options = [];
+    this._options = [];
     this.highlightedIndex = -1;
     this.styleAttributes = [
       "width",
@@ -4477,14 +4508,15 @@ var WavelengthSearch = class extends HTMLElement {
     ];
     this.handleFocusIn = () => {
       this.inputContainer.classList.add("focused");
+      this.handleSearch(this.input.value || "");
     };
     this.handleFocusOut = () => {
       this.inputContainer.classList.remove("focused");
     };
     this.handleInputChange = (e) => {
       const mode = this.getAttribute("mode") || "automatic";
-      const value = e.detail.value;
-      if (value) {
+      const currentQueryText = e.detail.value;
+      if (currentQueryText) {
         this.inputContainer.classList.add("has-value");
       } else {
         this.inputContainer.classList.remove("has-value");
@@ -4494,7 +4526,7 @@ var WavelengthSearch = class extends HTMLElement {
           clearTimeout(this.searchTimeout);
         }
         this.searchTimeout = setTimeout(() => {
-          this.handleSearch(value);
+          this.handleSearch(currentQueryText);
         }, 300);
       }
     };
@@ -4524,18 +4556,22 @@ var WavelengthSearch = class extends HTMLElement {
       } else if (e.key === "Enter") {
         if (isDropdownVisible && this.highlightedIndex >= 0 && this.highlightedIndex < items.length) {
           e.preventDefault();
-          this.selectOption(items[this.highlightedIndex].textContent || "");
+          const id = items[this.highlightedIndex].getAttribute("data-id");
+          const selected = this._options.find((o) => String(o.id) === id);
+          if (selected) {
+            this.selectOption(selected);
+          }
         } else {
-          const value = this.input.value;
-          this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value }, bubbles: true, composed: true }));
-          this.handleSearch(value);
+          const submittedQuery = this.input.value;
+          this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value: submittedQuery }, bubbles: true, composed: true }));
+          this.handleSearch(submittedQuery);
         }
       }
     };
     this.handleSearchIconClick = () => {
-      const value = this.input.value;
-      this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value }, bubbles: true, composed: true }));
-      this.handleSearch(value);
+      const submittedQuery = this.input.value;
+      this.dispatchEvent(new CustomEvent("wavelength-search-submit", { detail: { value: submittedQuery }, bubbles: true, composed: true }));
+      this.handleSearch(submittedQuery);
     };
     this.handleDocumentClick = (e) => {
       if (!this.contains(e.target)) {
@@ -4622,9 +4658,12 @@ var WavelengthSearch = class extends HTMLElement {
     }
     if (name === "options" && newValue) {
       try {
-        this.options = JSON.parse(newValue);
+        const parsed = JSON.parse(newValue);
+        if (Array.isArray(parsed)) {
+          this._options = parsed.map((item, index) => typeof item === "string" ? { id: index, title: item } : item);
+        }
       } catch (e) {
-        this.options = newValue.split(",").map((s) => s.trim());
+        this._options = newValue.split(",").map((s, index) => ({ id: index, title: s.trim() }));
       }
     } else if (name === "placeholder" && this.animatedPlaceholder) {
       this.animatedPlaceholder.textContent = newValue || "Search...";
@@ -4641,11 +4680,7 @@ var WavelengthSearch = class extends HTMLElement {
       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()));
+    const results = query ? this._options.filter((option) => option.title && option.title.toLowerCase().includes(query.toLowerCase())) : this._options;
     this.highlightedIndex = -1;
     this.renderDropdown(results);
   }
@@ -4654,12 +4689,17 @@ var WavelengthSearch = class extends HTMLElement {
       this.dropdown.style.display = "none";
       return;
     }
-    this.dropdown.innerHTML = results.map((r) => `<div class="dropdown-item">${r}</div>`).join("");
+    this.dropdown.innerHTML = results.map(
+      (r) => `<div class="dropdown-item" data-id="${r.id}">
+      <div class="search-result-title">${r.title}</div>
+      ${r.subtitle ? `<div class="search-result-subtitle">${r.subtitle}</div>` : ""}
+    </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 || "");
+        this.selectOption(results[index]);
       });
       item.addEventListener("mouseenter", () => {
         this.highlightedIndex = index;
@@ -4668,44 +4708,43 @@ var WavelengthSearch = class extends HTMLElement {
     });
     this.updateHighlight(items);
   }
-  selectOption(value) {
-    this.input.value = value;
+  selectOption(selectedItem) {
+    this.input.value = selectedItem.title;
     this.dropdown.style.display = "none";
     this.highlightedIndex = -1;
-    this.dispatchEvent(new CustomEvent("wavelength-search-select", { detail: { value }, bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent("wavelength-search-select", { detail: { value: selectedItem }, bubbles: true, composed: true }));
   }
   // ---- Getters and Setters API ---- //
   get value() {
     return this.input.value;
   }
-  set value(val) {
-    this.input.value = val;
+  set value(searchQueryText) {
+    this.input.value = searchQueryText;
   }
-  get optionsList() {
-    return this.options;
+  get options() {
+    return this._options;
   }
-  set optionsList(val) {
-    if (val) {
-      this.options = val;
-      this.setAttribute("options", JSON.stringify(val));
+  set options(val) {
+    if (Array.isArray(val)) {
+      this._options = val;
     }
   }
   _syncStyles() {
     this.styleAttributes.forEach((attr) => {
-      const value = this.getAttribute(attr);
-      if (value) {
-        if (attr === "height" && ["small", "medium", "large"].includes(value)) {
+      const attrValue = this.getAttribute(attr);
+      if (attrValue) {
+        if (attr === "height" && ["small", "medium", "large"].includes(attrValue)) {
         } else {
-          this.style.setProperty(`--${attr}`, value);
+          this.style.setProperty(`--${attr}`, attrValue);
         }
       }
     });
   }
-  updateHighlight(items) {
+  updateHighlight(items, preventScroll = false) {
     items.forEach((item, index) => {
       const isHighlighted = index === this.highlightedIndex;
       item.classList.toggle("highlighted", isHighlighted);
-      if (isHighlighted) {
+      if (isHighlighted && !preventScroll) {
         item.scrollIntoView({ block: "nearest" });
       }
     });

package/package.json

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