@smilodon/core 1.4.6 → 1.4.9

package/dist/index.umd.js

@@ -1506,6 +1506,31 @@
         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;
@@ -2392,6 +2417,20 @@
         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;
@@ -2565,9 +2604,12 @@
         }
       }
       
-      /* 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);
@@ -2596,12 +2638,12 @@
         }
         
         .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)));
@@ -2610,7 +2652,7 @@
         }
 
         .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)))));
@@ -2731,7 +2773,12 @@
                 });
             }
             // 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;
@@ -2739,10 +2786,23 @@
                     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) => {
@@ -2750,6 +2810,12 @@
             });
             // 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))) {
@@ -2757,6 +2823,10 @@
                 }
                 // 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;
@@ -2771,11 +2841,33 @@
                 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);
@@ -2786,13 +2878,45 @@
                         });
                     }
                 }
-            });
+            };
+            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();
                 }
@@ -3256,13 +3380,14 @@
             // 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);
@@ -3493,6 +3618,7 @@
             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);
         }
@@ -3816,19 +3942,6 @@
                     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