@duskmoon-dev/el-autocomplete 0.4.0 → 0.6.0

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 // src/el-dm-autocomplete.ts
-import { BaseElement, css as cssTag } from "@duskmoon-dev/el-core";
+import { BaseElement, css as cssTag } from "@duskmoon-dev/el-base";
 import { css } from "@duskmoon-dev/core/components/autocomplete";
 var strippedCss = css.replace(/@layer\s+components\s*\{/, "").replace(/\}[\s]*$/, "");
 var styles = cssTag`
@@ -16,33 +16,44 @@ var styles = cssTag`
   .autocomplete {
     width: 100%;
   }
+
+  /* Popover API styles for dropdown — override core's absolute positioning
+     and visibility rules since the top layer breaks parent-child CSS selectors */
+  .autocomplete-dropdown {
+    position: fixed;
+    margin: 0;
+    border: none;
+    padding: 0;
+    inset: unset;
+    /* Override core's hidden defaults — popover API controls visibility */
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    transition: none;
+  }
+
+  .autocomplete-dropdown:popover-open {
+    display: block;
+  }
 `;
 
 class ElDmAutocomplete extends BaseElement {
   static properties = {
-    value: { type: String, reflect: true, default: "" },
-    options: { type: String, reflect: true, default: "[]" },
-    multiple: { type: Boolean, reflect: true, default: false },
-    disabled: { type: Boolean, reflect: true, default: false },
-    clearable: { type: Boolean, reflect: true, default: false },
-    placeholder: { type: String, reflect: true, default: "" },
-    size: { type: String, reflect: true, default: "md" },
-    loading: { type: Boolean, reflect: true, default: false },
-    noResultsText: { type: String, reflect: true, default: "No results found" }
+    value: { type: String, reflect: true },
+    options: { type: String, reflect: true },
+    multiple: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    clearable: { type: Boolean, reflect: true },
+    placeholder: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    loading: { type: Boolean, reflect: true },
+    noResultsText: { type: String, reflect: true, attribute: "no-results-text" }
   };
-  value;
-  options;
-  multiple;
-  disabled;
-  clearable;
-  placeholder;
-  size;
-  loading;
-  noResultsText;
   _isOpen = false;
   _searchValue = "";
   _highlightedIndex = -1;
   _selectedValues = [];
+  _scrollHandler = null;
   constructor() {
     super();
     this.attachStyles(styles);
@@ -55,6 +66,11 @@ class ElDmAutocomplete extends BaseElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this._handleOutsideClick);
+    if (this._scrollHandler) {
+      window.removeEventListener("scroll", this._scrollHandler, true);
+      window.removeEventListener("resize", this._scrollHandler);
+      this._scrollHandler = null;
+    }
   }
   _handleOutsideClick = (e) => {
     if (!this.contains(e.target)) {
@@ -74,7 +90,7 @@ class ElDmAutocomplete extends BaseElement {
   }
   _getOptions() {
     try {
-      return JSON.parse(this.options);
+      return JSON.parse(this.options || "[]");
     } catch {
       return [];
     }
@@ -92,13 +108,57 @@ class ElDmAutocomplete extends BaseElement {
     this._isOpen = true;
     this._highlightedIndex = -1;
     this.update();
+    const dropdown = this.shadowRoot?.querySelector(".autocomplete-dropdown");
+    const trigger = this.shadowRoot?.querySelector(".autocomplete-input, .autocomplete-tags");
+    if (dropdown && trigger) {
+      try {
+        dropdown.showPopover();
+        this._positionDropdown(dropdown, trigger);
+      } catch {}
+      this._scrollHandler = () => {
+        this._positionDropdown(dropdown, trigger);
+      };
+      window.addEventListener("scroll", this._scrollHandler, true);
+      window.addEventListener("resize", this._scrollHandler);
+    }
   }
   _close() {
+    if (!this._isOpen)
+      return;
     this._isOpen = false;
     this._searchValue = "";
     this._highlightedIndex = -1;
+    if (this._scrollHandler) {
+      window.removeEventListener("scroll", this._scrollHandler, true);
+      window.removeEventListener("resize", this._scrollHandler);
+      this._scrollHandler = null;
+    }
+    const dropdown = this.shadowRoot?.querySelector(".autocomplete-dropdown");
+    if (dropdown) {
+      try {
+        dropdown.hidePopover();
+      } catch {}
+    }
     this.update();
   }
+  _positionDropdown(dropdown, trigger) {
+    const triggerRect = trigger.getBoundingClientRect();
+    const dropdownRect = dropdown.getBoundingClientRect();
+    let top = triggerRect.bottom + 4;
+    let left = triggerRect.left;
+    if (top + dropdownRect.height > window.innerHeight) {
+      top = triggerRect.top - dropdownRect.height - 4;
+    }
+    if (left + triggerRect.width > window.innerWidth) {
+      left = window.innerWidth - triggerRect.width - 8;
+    }
+    if (left < 8) {
+      left = 8;
+    }
+    dropdown.style.top = `${top}px`;
+    dropdown.style.left = `${left}px`;
+    dropdown.style.width = `${triggerRect.width}px`;
+  }
   _toggle() {
     if (this._isOpen) {
       this._close();
@@ -246,7 +306,7 @@ class ElDmAutocomplete extends BaseElement {
     }
     if (filteredOptions.length === 0) {
       return `
-        <div class="autocomplete-no-results">${this.noResultsText}</div>
+        <div class="autocomplete-no-results">${this.noResultsText || "No results found"}</div>
       `;
     }
     const groups = new Map;
@@ -304,10 +364,12 @@ class ElDmAutocomplete extends BaseElement {
     `;
   }
   render() {
-    const sizeClass = this.size !== "md" ? `autocomplete-${this.size}` : "";
+    const size = this.size || "md";
+    const sizeClass = size !== "md" ? `autocomplete-${size}` : "";
     const openClass = this._isOpen ? "autocomplete-open" : "";
     const clearableClass = this.clearable ? "autocomplete-clearable" : "";
     const showClear = this.clearable && this._selectedValues.length > 0 && !this.disabled;
+    const placeholder = this.placeholder || "";
     if (this.multiple) {
       return `
         <div class="autocomplete ${sizeClass} ${openClass} ${clearableClass}">
@@ -316,7 +378,7 @@ class ElDmAutocomplete extends BaseElement {
             <input
               type="text"
               class="autocomplete-tags-input"
-              placeholder="${this._selectedValues.length === 0 ? this.placeholder : ""}"
+              placeholder="${this._selectedValues.length === 0 ? placeholder : ""}"
               value="${this._searchValue}"
               ${this.disabled ? "disabled" : ""}
               role="combobox"
@@ -328,7 +390,7 @@ class ElDmAutocomplete extends BaseElement {
           ${showClear ? `
             <button type="button" class="autocomplete-clear" aria-label="Clear selection">&times;</button>
           ` : ""}
-          <div class="autocomplete-dropdown" role="listbox">
+          <div class="autocomplete-dropdown" role="listbox" popover="manual">
             ${this._renderOptions()}
           </div>
         </div>
@@ -339,7 +401,7 @@ class ElDmAutocomplete extends BaseElement {
         <input
           type="text"
           class="autocomplete-input"
-          placeholder="${this.placeholder}"
+          placeholder="${placeholder}"
           value="${this._isOpen ? this._searchValue : this._getDisplayValue()}"
           ${this.disabled ? "disabled" : ""}
           role="combobox"
@@ -350,7 +412,7 @@ class ElDmAutocomplete extends BaseElement {
         ${showClear ? `
           <button type="button" class="autocomplete-clear" aria-label="Clear selection">&times;</button>
         ` : ""}
-        <div class="autocomplete-dropdown" role="listbox">
+        <div class="autocomplete-dropdown" role="listbox" popover="manual">
           ${this._renderOptions()}
         </div>
       </div>
@@ -359,6 +421,16 @@ class ElDmAutocomplete extends BaseElement {
   update() {
     super.update();
     this._attachEventListeners();
+    if (this._isOpen) {
+      const dropdown = this.shadowRoot?.querySelector(".autocomplete-dropdown");
+      const trigger = this.shadowRoot?.querySelector(".autocomplete-input, .autocomplete-tags");
+      if (dropdown && trigger) {
+        try {
+          dropdown.showPopover();
+          this._positionDropdown(dropdown, trigger);
+        } catch {}
+      }
+    }
   }
   _attachEventListeners() {
     const input = this.shadowRoot?.querySelector(".autocomplete-input, .autocomplete-tags-input");

package/dist/esm/register.js

@@ -1,5 +1,5 @@
 // src/el-dm-autocomplete.ts
-import { BaseElement, css as cssTag } from "@duskmoon-dev/el-core";
+import { BaseElement, css as cssTag } from "@duskmoon-dev/el-base";
 import { css } from "@duskmoon-dev/core/components/autocomplete";
 var strippedCss = css.replace(/@layer\s+components\s*\{/, "").replace(/\}[\s]*$/, "");
 var styles = cssTag`
@@ -16,33 +16,44 @@ var styles = cssTag`
   .autocomplete {
     width: 100%;
   }
+
+  /* Popover API styles for dropdown — override core's absolute positioning
+     and visibility rules since the top layer breaks parent-child CSS selectors */
+  .autocomplete-dropdown {
+    position: fixed;
+    margin: 0;
+    border: none;
+    padding: 0;
+    inset: unset;
+    /* Override core's hidden defaults — popover API controls visibility */
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    transition: none;
+  }
+
+  .autocomplete-dropdown:popover-open {
+    display: block;
+  }
 `;
 
 class ElDmAutocomplete extends BaseElement {
   static properties = {
-    value: { type: String, reflect: true, default: "" },
-    options: { type: String, reflect: true, default: "[]" },
-    multiple: { type: Boolean, reflect: true, default: false },
-    disabled: { type: Boolean, reflect: true, default: false },
-    clearable: { type: Boolean, reflect: true, default: false },
-    placeholder: { type: String, reflect: true, default: "" },
-    size: { type: String, reflect: true, default: "md" },
-    loading: { type: Boolean, reflect: true, default: false },
-    noResultsText: { type: String, reflect: true, default: "No results found" }
+    value: { type: String, reflect: true },
+    options: { type: String, reflect: true },
+    multiple: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    clearable: { type: Boolean, reflect: true },
+    placeholder: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    loading: { type: Boolean, reflect: true },
+    noResultsText: { type: String, reflect: true, attribute: "no-results-text" }
   };
-  value;
-  options;
-  multiple;
-  disabled;
-  clearable;
-  placeholder;
-  size;
-  loading;
-  noResultsText;
   _isOpen = false;
   _searchValue = "";
   _highlightedIndex = -1;
   _selectedValues = [];
+  _scrollHandler = null;
   constructor() {
     super();
     this.attachStyles(styles);
@@ -55,6 +66,11 @@ class ElDmAutocomplete extends BaseElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this._handleOutsideClick);
+    if (this._scrollHandler) {
+      window.removeEventListener("scroll", this._scrollHandler, true);
+      window.removeEventListener("resize", this._scrollHandler);
+      this._scrollHandler = null;
+    }
   }
   _handleOutsideClick = (e) => {
     if (!this.contains(e.target)) {
@@ -74,7 +90,7 @@ class ElDmAutocomplete extends BaseElement {
   }
   _getOptions() {
     try {
-      return JSON.parse(this.options);
+      return JSON.parse(this.options || "[]");
     } catch {
       return [];
     }
@@ -92,13 +108,57 @@ class ElDmAutocomplete extends BaseElement {
     this._isOpen = true;
     this._highlightedIndex = -1;
     this.update();
+    const dropdown = this.shadowRoot?.querySelector(".autocomplete-dropdown");
+    const trigger = this.shadowRoot?.querySelector(".autocomplete-input, .autocomplete-tags");
+    if (dropdown && trigger) {
+      try {
+        dropdown.showPopover();
+        this._positionDropdown(dropdown, trigger);
+      } catch {}
+      this._scrollHandler = () => {
+        this._positionDropdown(dropdown, trigger);
+      };
+      window.addEventListener("scroll", this._scrollHandler, true);
+      window.addEventListener("resize", this._scrollHandler);
+    }
   }
   _close() {
+    if (!this._isOpen)
+      return;
     this._isOpen = false;
     this._searchValue = "";
     this._highlightedIndex = -1;
+    if (this._scrollHandler) {
+      window.removeEventListener("scroll", this._scrollHandler, true);
+      window.removeEventListener("resize", this._scrollHandler);
+      this._scrollHandler = null;
+    }
+    const dropdown = this.shadowRoot?.querySelector(".autocomplete-dropdown");
+    if (dropdown) {
+      try {
+        dropdown.hidePopover();
+      } catch {}
+    }
     this.update();
   }
+  _positionDropdown(dropdown, trigger) {
+    const triggerRect = trigger.getBoundingClientRect();
+    const dropdownRect = dropdown.getBoundingClientRect();
+    let top = triggerRect.bottom + 4;
+    let left = triggerRect.left;
+    if (top + dropdownRect.height > window.innerHeight) {
+      top = triggerRect.top - dropdownRect.height - 4;
+    }
+    if (left + triggerRect.width > window.innerWidth) {
+      left = window.innerWidth - triggerRect.width - 8;
+    }
+    if (left < 8) {
+      left = 8;
+    }
+    dropdown.style.top = `${top}px`;
+    dropdown.style.left = `${left}px`;
+    dropdown.style.width = `${triggerRect.width}px`;
+  }
   _toggle() {
     if (this._isOpen) {
       this._close();
@@ -246,7 +306,7 @@ class ElDmAutocomplete extends BaseElement {
     }
     if (filteredOptions.length === 0) {
       return `
-        <div class="autocomplete-no-results">${this.noResultsText}</div>
+        <div class="autocomplete-no-results">${this.noResultsText || "No results found"}</div>
       `;
     }
     const groups = new Map;
@@ -304,10 +364,12 @@ class ElDmAutocomplete extends BaseElement {
     `;
   }
   render() {
-    const sizeClass = this.size !== "md" ? `autocomplete-${this.size}` : "";
+    const size = this.size || "md";
+    const sizeClass = size !== "md" ? `autocomplete-${size}` : "";
     const openClass = this._isOpen ? "autocomplete-open" : "";
     const clearableClass = this.clearable ? "autocomplete-clearable" : "";
     const showClear = this.clearable && this._selectedValues.length > 0 && !this.disabled;
+    const placeholder = this.placeholder || "";
     if (this.multiple) {
       return `
         <div class="autocomplete ${sizeClass} ${openClass} ${clearableClass}">
@@ -316,7 +378,7 @@ class ElDmAutocomplete extends BaseElement {
             <input
               type="text"
               class="autocomplete-tags-input"
-              placeholder="${this._selectedValues.length === 0 ? this.placeholder : ""}"
+              placeholder="${this._selectedValues.length === 0 ? placeholder : ""}"
               value="${this._searchValue}"
               ${this.disabled ? "disabled" : ""}
               role="combobox"
@@ -328,7 +390,7 @@ class ElDmAutocomplete extends BaseElement {
           ${showClear ? `
             <button type="button" class="autocomplete-clear" aria-label="Clear selection">&times;</button>
           ` : ""}
-          <div class="autocomplete-dropdown" role="listbox">
+          <div class="autocomplete-dropdown" role="listbox" popover="manual">
             ${this._renderOptions()}
           </div>
         </div>
@@ -339,7 +401,7 @@ class ElDmAutocomplete extends BaseElement {
         <input
           type="text"
           class="autocomplete-input"
-          placeholder="${this.placeholder}"
+          placeholder="${placeholder}"
           value="${this._isOpen ? this._searchValue : this._getDisplayValue()}"
           ${this.disabled ? "disabled" : ""}
           role="combobox"
@@ -350,7 +412,7 @@ class ElDmAutocomplete extends BaseElement {
         ${showClear ? `
           <button type="button" class="autocomplete-clear" aria-label="Clear selection">&times;</button>
         ` : ""}
-        <div class="autocomplete-dropdown" role="listbox">
+        <div class="autocomplete-dropdown" role="listbox" popover="manual">
           ${this._renderOptions()}
         </div>
       </div>
@@ -359,6 +421,16 @@ class ElDmAutocomplete extends BaseElement {
   update() {
     super.update();
     this._attachEventListeners();
+    if (this._isOpen) {
+      const dropdown = this.shadowRoot?.querySelector(".autocomplete-dropdown");
+      const trigger = this.shadowRoot?.querySelector(".autocomplete-input, .autocomplete-tags");
+      if (dropdown && trigger) {
+        try {
+          dropdown.showPopover();
+          this._positionDropdown(dropdown, trigger);
+        } catch {}
+      }
+    }
   }
   _attachEventListeners() {
     const input = this.shadowRoot?.querySelector(".autocomplete-input, .autocomplete-tags-input");