@smilodon/core 1.4.7 → 1.4.10

package/README.md

@@ -646,6 +646,28 @@ enhanced-select.dark-mode {
 --select-dropdown-bg           /* Dropdown background (white) */
 --select-dropdown-border       /* Dropdown border color (#ccc) */
 --select-dropdown-shadow       /* Dropdown shadow */
+--select-empty-padding          /* Empty/no-results container padding */
+--select-empty-color            /* Text color for empty/no-results models */
+--select-empty-font-size        /* Font size */
+--select-empty-bg               /* Background for empty/no-results state */
+--select-empty-min-height       /* Minimum height of empty state box */
+
+/* Arrow/button */
+--select-arrow-size            /* Width & height of SVG icon (16px default) */
+--select-arrow-color           /* Icon color (#667eea) */
+--select-arrow-hover-color     /* Icon color when hovered (#667eea) */
+--select-arrow-hover-bg        /* Background when hover (rgba(102,126,234,0.08)) */
+--select-arrow-width           /* Container width (40px) */
+--select-arrow-border-radius   /* Container border radius */
+
+/* Group headers (when using groupedItems or flat items with `group` property) */
+--select-group-header-padding  /* Padding inside header (8px 12px) */
+--select-group-header-color    /* Text color (#6b7280) */
+--select-group-header-bg       /* Background (#f3f4f6) */
+--select-group-header-font-size
+--select-group-header-text-transform
+--select-group-header-letter-spacing
+--select-group-header-border-bottom
 ```
 
 **Dark Mode (Opt-in)**
@@ -659,6 +681,8 @@ enhanced-select.dark-mode {
 --select-dark-option-bg        /* Dark option background (#1f2937) */
 --select-dark-option-hover-bg  /* Dark hover background (#374151) */
 --select-dark-option-selected-bg /* Dark selected bg (#3730a3) */
+--select-dark-group-header-color /* Dark header text */
+--select-dark-group-header-bg    /* Dark header background */
 ```
 
 **Complete CSS Variables List (60+ variables)**
@@ -698,6 +722,10 @@ enhanced-select {
 **Badge Remove/Delete Button (Multi-Select)**
 The × button that removes selected items in multi-select mode is fully customizable:
 
+**Group Header & No‑Results Parts**
+Both the group header and the no-results message are exposed as shadow parts (`group-header` and `no-results`) so you can target them with `::part()` selectors or CSS variables. This makes it straightforward to match the look of your host framework or UI kit.
+
+
 ```css
 enhanced-select {
   /* Customize badge appearance */

package/dist/index.cjs

@@ -1875,7 +1875,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();
@@ -1934,6 +1949,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
@@ -1952,6 +1969,8 @@ class EnhancedSelect extends HTMLElement {
         }
     }
     disconnectedCallback() {
+        // unregister instance
+        EnhancedSelect._instances.delete(this);
         // Cleanup observers
         this._resizeObserver?.disconnect();
         this._intersectionObserver?.disconnect();
@@ -2237,6 +2256,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;
@@ -2302,9 +2323,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);
@@ -2413,6 +2439,20 @@ class EnhancedSelect extends HTMLElement {
         background: var(--select-options-bg, var(--select-dropdown-bg, var(--select-bg, white)));
       }
 
+      .group-header {
+        padding: var(--select-group-header-padding, 8px 12px);
+        font-weight: var(--select-group-header-weight, 600);
+        color: var(--select-group-header-color, #6b7280);
+        background-color: var(--select-group-header-bg, #f3f4f6);
+        font-size: var(--select-group-header-font-size, 12px);
+        text-transform: var(--select-group-header-text-transform, uppercase);
+        letter-spacing: var(--select-group-header-letter-spacing, 0.05em);
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        border-bottom: var(--select-group-header-border-bottom, 1px solid #e5e7eb);
+      }
+
       .option {
         padding: var(--select-option-padding, 8px 12px);
         cursor: pointer;
@@ -2586,9 +2626,12 @@ class EnhancedSelect extends HTMLElement {
         }
       }
       
-      /* Dark mode - Opt-in via class or data attribute */
+      /* Dark mode - Opt-in via class, data attribute, or ancestor context */
       :host(.dark-mode),
-      :host([data-theme="dark"]) {
+      :host([data-theme="dark"]),
+      :host-context(.dark-mode),
+      :host-context(.dark),
+      :host-context([data-theme="dark"]) {
         .input-container {
           background: var(--select-dark-bg, #1f2937);
           border-color: var(--select-dark-border, #4b5563);
@@ -2641,6 +2684,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));
         }
@@ -2723,19 +2773,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);
@@ -2752,7 +2797,12 @@ class EnhancedSelect extends HTMLElement {
             });
         }
         // Input container click - focus input and open dropdown
+        // Prevent the original pointer event from bubbling/causing default focus behavior
+        // which can interfere with option click handling when opening the dropdown
         this._inputContainer.addEventListener('pointerdown', (e) => {
+            // Prevent propagation to document click listener but do NOT preventDefault.
+            // Allow default so browser events (click) on newly opened options still fire.
+            e.stopPropagation();
             const target = e.target;
             if (!this._config.enabled)
                 return;
@@ -2760,10 +2810,27 @@ class EnhancedSelect extends HTMLElement {
                 return;
             if (target && target.closest('.clear-control-button'))
                 return;
-            if (!this._state.isOpen) {
+            const wasClosed = !this._state.isOpen;
+            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
+            // options container so the subsequent pointerup lands there instead of
+            // staying with the input container (which would swallow the event).
+            if (wasClosed && this._optionsContainer && typeof e.pointerId === 'number') {
+                try {
+                    this._optionsContainer.setPointerCapture(e.pointerId);
+                }
+                catch (_err) {
+                    // Some browsers may throw if element is not yet "connected"; ignore
+                }
+            }
         });
         // Input container click - prevent event from reaching document listener
         this._container.addEventListener('click', (e) => {
@@ -2771,6 +2838,12 @@ class EnhancedSelect extends HTMLElement {
         });
         // Input focus/blur
         this._input.addEventListener('focus', () => this._handleOpen());
+        // When the input loses focus we normally close the dropdown, but
+        // clicking an option will blur the input before the option's click
+        // handler executes. To avoid the blur timer closing the dropdown
+        // prematurely we use a short-lived flag that is set whenever we start
+        // interacting with the options container. The close callback checks this
+        // flag and skips closing if the user is about to click an option.
         this._input.addEventListener('blur', (e) => {
             const related = e.relatedTarget;
             if (related && (this._shadow.contains(related) || this._container.contains(related))) {
@@ -2778,6 +2851,10 @@ class EnhancedSelect extends HTMLElement {
             }
             // Delay to allow option click/focus transitions
             setTimeout(() => {
+                if (this._suppressBlurClose) {
+                    // another pointerdown inside options is in progress; keep open
+                    return;
+                }
                 const active = document.activeElement;
                 if (active && (this._shadow.contains(active) || this._container.contains(active))) {
                     return;
@@ -2792,11 +2869,33 @@ class EnhancedSelect extends HTMLElement {
             const query = e.target.value;
             this._handleSearch(query);
         });
-        // Delegated click listener for improved event handling (smart fallback)
-        this._optionsContainer.addEventListener('click', (e) => {
-            const target = e.target;
-            // Handle option clicks
-            const option = target.closest('[data-sm-selectable], [data-selectable], [data-sm-state]');
+        // If the user presses down inside the options container we should
+        // temporarily suppress blur-based closing until after the click has
+        // been handled. Setting a flag that gets cleared in the next tick is
+        // sufficient.
+        this._optionsContainer.addEventListener('pointerdown', () => {
+            this._suppressBlurClose = true;
+            setTimeout(() => {
+                this._suppressBlurClose = false;
+            }, 0);
+        });
+        // Delegated click listener for improved event handling (robust across shadow DOM)
+        const handleOptionEvent = (e) => {
+            const path = (e.composedPath && e.composedPath()) || [e.target];
+            let option = null;
+            for (const node of path) {
+                if (!(node instanceof Element))
+                    continue;
+                try {
+                    if (node.matches('[data-sm-selectable], [data-selectable], [data-sm-state]')) {
+                        option = node;
+                        break;
+                    }
+                }
+                catch (err) {
+                    continue;
+                }
+            }
             if (option && !option.hasAttribute('aria-disabled')) {
                 const indexStr = option.getAttribute('data-sm-index') ?? option.getAttribute('data-index');
                 const index = Number(indexStr);
@@ -2807,13 +2906,45 @@ class EnhancedSelect extends HTMLElement {
                     });
                 }
             }
-        });
+        };
+        this._optionsContainer.addEventListener('click', handleOptionEvent);
+        // also watch pointerup to catch cases where the pointerdown started outside
+        // (e.g. on the input) and the click never fires
+        this._optionsContainer.addEventListener('pointerup', handleOptionEvent);
         // Keyboard navigation
         this._input.addEventListener('keydown', (e) => this._handleKeydown(e));
-        // Click outside to close
+        // Click outside to close — robust detection across shadow DOM and custom renderers
         document.addEventListener('pointerdown', (e) => {
             const path = (e.composedPath && e.composedPath()) || [];
-            const clickedInside = path.includes(this) || path.includes(this._container) || this._shadow.contains(e.target);
+            let clickedInside = false;
+            for (const node of path) {
+                if (node === this || node === this._container) {
+                    clickedInside = true;
+                    break;
+                }
+                if (node instanceof Node) {
+                    try {
+                        if (this._shadow && this._shadow.contains(node)) {
+                            clickedInside = true;
+                            break;
+                        }
+                    }
+                    catch (err) {
+                        // ignore
+                    }
+                }
+                if (node instanceof Element) {
+                    try {
+                        if (node.matches('[data-sm-selectable], [data-selectable], [data-sm-state], .input-container, .select-container, .dropdown-arrow-container, .clear-control-button')) {
+                            clickedInside = true;
+                            break;
+                        }
+                    }
+                    catch (err) {
+                        // ignore
+                    }
+                }
+            }
             if (!clickedInside) {
                 this._handleClose();
             }
@@ -2862,6 +2993,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';
@@ -3277,13 +3418,14 @@ class EnhancedSelect extends HTMLElement {
         // FIX: Do not rely on this._optionsContainer.children[index] because filtering changes the children
         // Instead, use the index to update state directly
         const item = this._state.loadedItems[index];
+        // Debug: log selection attempt
         if (!item)
             return;
+        const isCurrentlySelected = this._state.selectedIndices.has(index);
         // Keep active/focus styling aligned with the most recently interacted option.
         // Without this, a previously selected item may retain active classes/styles
         // after selecting a different option.
         this._state.activeIndex = index;
-        const isCurrentlySelected = this._state.selectedIndices.has(index);
         if (this._config.selection.mode === 'single') {
             // Single select: clear previous and select new
             const wasSelected = this._state.selectedIndices.has(index);
@@ -3514,6 +3656,7 @@ class EnhancedSelect extends HTMLElement {
         const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
         const selectedValues = selectedItems.map(getValue);
         const selectedIndices = Array.from(this._state.selectedIndices);
+        // Debug: log change payload
         this._emit('change', { selectedItems, selectedValues, selectedIndices });
         this._config.callbacks.onChange?.(selectedItems, selectedValues);
     }
@@ -3833,23 +3976,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;
-                Object.assign(header.style, {
-                    padding: '8px 12px',
-                    fontWeight: '600',
-                    color: '#6b7280',
-                    backgroundColor: '#f3f4f6',
-                    fontSize: '12px',
-                    textTransform: 'uppercase',
-                    letterSpacing: '0.05em',
-                    position: 'sticky',
-                    top: '0',
-                    zIndex: '1',
-                    borderBottom: '1px solid #e5e7eb'
-                });
+            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
@@ -4122,6 +4267,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);