@smilodon/core 1.4.6 → 1.4.9

package/dist/index.js

@@ -1500,6 +1500,31 @@ class SelectOption extends HTMLElement {
         position: relative;
       }
       
+      /* Allow authors to style selected state from outside the shadow root
+         by setting attributes/classes on the host element. This mirrors the
+         internal .option-container.selected rules but reads the same CSS
+         custom properties so themes can fully control selected appearance. */
+      :host([aria-selected="true"]) .option-container,
+      :host(.smilodon-option--selected) .option-container {
+        background: var(--select-option-selected-bg, #e3f2fd);
+        color: var(--select-option-selected-color, #1976d2);
+        border: var(--select-option-selected-border, var(--select-option-border, none));
+        border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
+        border-radius: var(--select-option-selected-border-radius, var(--select-option-border-radius, 0));
+        box-shadow: var(--select-option-selected-shadow, var(--select-option-shadow, none));
+        transform: var(--select-option-selected-transform, var(--select-option-transform, none));
+      }
+
+      :host([aria-selected="true"]) .option-container:hover,
+      :host(.smilodon-option--selected) .option-container:hover {
+        background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
+        color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #1976d2));
+        border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
+        border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
+        box-shadow: var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
+        transform: var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
+      }
+      
       .option-container {
         display: flex;
         align-items: center;
@@ -2386,6 +2411,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;
@@ -2559,9 +2598,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);
@@ -2590,12 +2632,12 @@ class EnhancedSelect extends HTMLElement {
         }
         
         .option:hover {
-          background-color: var(--select-dark-option-hover-bg, #374151);
+          background: var(--select-dark-option-hover-bg, #374151);
           color: var(--select-dark-option-hover-color, #f9fafb);
         }
         
         .option.selected {
-          background-color: var(--select-dark-option-selected-bg, #3730a3);
+          background: var(--select-dark-option-selected-bg, #3730a3);
           color: var(--select-dark-option-selected-text, #e0e7ff);
           border: var(--select-dark-option-selected-border, var(--select-option-selected-border, var(--select-option-border, none)));
           border-bottom: var(--select-dark-option-selected-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2604,7 +2646,7 @@ class EnhancedSelect extends HTMLElement {
         }
 
         .option.selected:hover {
-          background-color: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
+          background: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
           color: var(--select-dark-option-selected-hover-color, var(--select-dark-option-selected-text, #e0e7ff));
           border: var(--select-dark-option-selected-hover-border, var(--select-dark-option-selected-border, var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)))));
           border-bottom: var(--select-dark-option-selected-hover-border-bottom, var(--select-dark-option-selected-border-bottom, var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)))));
@@ -2725,7 +2767,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;
@@ -2733,10 +2780,23 @@ 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();
             }
+            // 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) => {
@@ -2744,6 +2804,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))) {
@@ -2751,6 +2817,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;
@@ -2765,11 +2835,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);
@@ -2780,13 +2872,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();
             }
@@ -3250,13 +3374,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);
@@ -3487,6 +3612,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);
     }
@@ -3810,19 +3936,6 @@ class EnhancedSelect extends HTMLElement {
                 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._optionsContainer.appendChild(header);
                 group.options.forEach(item => {
                     // Find original index for correct ID generation and selection