@smilodon/core 1.4.9 → 1.4.10

package/dist/index.js

@@ -1873,7 +1873,22 @@ class EnhancedSelect extends HTMLElement {
     }
     set classMap(map) {
         this._classMap = map;
-        this._setGlobalStylesMirroring(Boolean(this._optionRenderer || map));
+        this._setGlobalStylesMirroring(Boolean(this._optionRenderer || map || this._groupHeaderRenderer));
+        if (!this.isConnected)
+            return;
+        this._renderOptions();
+    }
+    /**
+     * DOM-based renderer for group headers.  When provided, the component will
+     * call this function for each group during rendering.  The returned element
+     * will receive `.group-header` and `part="group-header"` automatically.
+     */
+    get groupHeaderRenderer() {
+        return this._groupHeaderRenderer;
+    }
+    set groupHeaderRenderer(renderer) {
+        this._groupHeaderRenderer = renderer;
+        this._setGlobalStylesMirroring(Boolean(this._optionRenderer || this._classMap || renderer));
         if (!this.isConnected)
             return;
         this._renderOptions();
@@ -1932,6 +1947,8 @@ class EnhancedSelect extends HTMLElement {
         this._initializeObservers();
     }
     connectedCallback() {
+        // register instance
+        EnhancedSelect._instances.add(this);
         // WORKAROUND: Force display style on host element for Angular compatibility
         // Angular's rendering seems to not apply :host styles correctly in some cases
         // Must be done in connectedCallback when element is attached to DOM
@@ -1950,6 +1967,8 @@ class EnhancedSelect extends HTMLElement {
         }
     }
     disconnectedCallback() {
+        // unregister instance
+        EnhancedSelect._instances.delete(this);
         // Cleanup observers
         this._resizeObserver?.disconnect();
         this._intersectionObserver?.disconnect();
@@ -2235,6 +2254,8 @@ class EnhancedSelect extends HTMLElement {
         right: 0;
         bottom: 0;
         width: var(--select-arrow-width, 40px);
+        /* allow explicit height override even though container normally stretches */
+        height: var(--select-arrow-height, auto);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -2300,9 +2321,14 @@ class EnhancedSelect extends HTMLElement {
         background-color: var(--select-arrow-hover-bg, rgba(102, 126, 234, 0.08));
       }
       
+      .dropdown-arrow:hover {
+        /* legacy alias --select-arrow-hover for icon color */
+        color: var(--select-arrow-hover, var(--select-arrow-hover-color, #667eea));
+      }
+      
       .dropdown-arrow {
-        width: var(--select-arrow-size, 16px);
-        height: var(--select-arrow-size, 16px);
+        width: var(--select-arrow-width, var(--select-arrow-size, 16px));
+        height: var(--select-arrow-height, var(--select-arrow-size, 16px));
         color: var(--select-arrow-color, #667eea);
         transition: transform 0.2s ease, color 0.2s ease;
         transform: translateY(0);
@@ -2656,6 +2682,13 @@ class EnhancedSelect extends HTMLElement {
         
         .option.active:not(.selected) {
           background-color: var(--select-dark-option-active-bg, #374151);
+        }
+
+        /* Group header in dark mode */
+        .group-header {
+          color: var(--select-dark-group-header-color, var(--select-group-header-color, #6b7280));
+          background-color: var(--select-dark-group-header-bg, var(--select-group-header-bg, #374151));
+        }
           color: var(--select-dark-option-active-color, #f9fafb);
           outline: var(--select-dark-option-active-outline, 2px solid rgba(129, 140, 248, 0.55));
         }
@@ -2738,19 +2771,14 @@ class EnhancedSelect extends HTMLElement {
             this._boundArrowClick = (e) => {
                 e.stopPropagation();
                 e.preventDefault();
-                const wasOpen = this._state.isOpen;
-                this._state.isOpen = !this._state.isOpen;
-                this._updateDropdownVisibility();
-                this._updateArrowRotation();
-                if (this._state.isOpen && this._config.callbacks.onOpen) {
-                    this._config.callbacks.onOpen();
-                }
-                else if (!this._state.isOpen && this._config.callbacks.onClose) {
-                    this._config.callbacks.onClose();
+                // delegate to the existing open/close helpers so we don't accidentally
+                // drift out of sync with the logic in those methods (focus, events,
+                // scroll-to-selected, etc.)
+                if (this._state.isOpen) {
+                    this._handleClose();
                 }
-                // Scroll to selected when opening
-                if (!wasOpen && this._state.isOpen && this._state.selectedIndices.size > 0) {
-                    setTimeout(() => this._scrollToSelected(), 50);
+                else {
+                    this._handleOpen();
                 }
             };
             this._arrowContainer.addEventListener('click', this._boundArrowClick);
@@ -2784,6 +2812,10 @@ class EnhancedSelect extends HTMLElement {
             if (wasClosed) {
                 this._handleOpen();
             }
+            else {
+                // clicking the input while open should close the dropdown too
+                this._handleClose();
+            }
             // Focus the input (do not prevent default behavior)
             this._input.focus();
             // If we just opened the dropdown, transfer pointer capture to the
@@ -2959,6 +2991,16 @@ class EnhancedSelect extends HTMLElement {
     _handleOpen() {
         if (!this._config.enabled || this._state.isOpen)
             return;
+        // close any other open selects before proceeding
+        EnhancedSelect._instances.forEach(inst => {
+            if (inst !== this)
+                inst._handleClose();
+        });
+        // Always focus the input when opening so callers (arrow click,
+        // programmatic `open()`, etc.) get the keyboard cursor.  This was a
+        // frequent source of confusion in #14 where people opened the dropdown
+        // but the text field never received focus.
+        this._input.focus();
         this._markOpenStart();
         this._state.isOpen = true;
         this._dropdown.style.display = 'block';
@@ -3932,10 +3974,25 @@ class EnhancedSelect extends HTMLElement {
         const query = this._state.searchQuery.toLowerCase();
         // Handle Grouped Items Rendering (when no search query)
         if (this._state.groupedItems.length > 0 && !query) {
-            this._state.groupedItems.forEach(group => {
-                const header = document.createElement('div');
-                header.className = 'group-header';
-                header.textContent = group.label;
+            this._state.groupedItems.forEach((group, groupIndex) => {
+                let header;
+                if (this.groupHeaderRenderer) {
+                    header = this.groupHeaderRenderer(group, groupIndex);
+                    // make sure the returned element has the correct semantics so
+                    // people can style it. we add the class/part even if the renderer
+                    // returned something else to ensure backward compatibility.
+                    if (!(header instanceof HTMLElement)) {
+                        // fall back to default if API is misused
+                        header = document.createElement('div');
+                        header.textContent = String(group.label);
+                    }
+                }
+                else {
+                    header = document.createElement('div');
+                    header.textContent = group.label;
+                }
+                header.classList.add('group-header');
+                header.setAttribute('part', 'group-header');
                 this._optionsContainer.appendChild(header);
                 group.options.forEach(item => {
                     // Find original index for correct ID generation and selection
@@ -4208,6 +4265,8 @@ class EnhancedSelect extends HTMLElement {
         }
     }
 }
+/** live set of all connected instances; used to auto-close siblings */
+EnhancedSelect._instances = new Set();
 // Register custom element
 if (!customElements.get('enhanced-select')) {
     customElements.define('enhanced-select', EnhancedSelect);