@smilodon/core 1.4.9 → 1.4.11

package/README.md

@@ -610,6 +610,11 @@ Dark mode is **opt-in only** and can be enabled by adding a class or data attrib
 
 <!-- Using data attribute -->
 <enhanced-select data-theme="dark"></enhanced-select>
+
+<!-- Also supported (attribute aliases) -->
+<enhanced-select dark-mode></enhanced-select>
+<enhanced-select darkmode></enhanced-select>
+<enhanced-select theme="dark"></enhanced-select>
 ```
 
 ```css
@@ -631,6 +636,8 @@ enhanced-select.dark-mode {
 **Light Mode (Default)**
 ```css
 --select-options-bg           /* Options container background (white) */
+--select-width                /* Host width (100% default) */
+--select-height               /* Host height (auto default) */
 --select-option-color          /* Option text color (#1f2937) */
 --select-option-bg             /* Option background (white) */
 --select-option-padding        /* Option padding (8px 12px) */
@@ -643,9 +650,41 @@ enhanced-select.dark-mode {
 --select-option-selected-hover-border /* Selected+hover border (inherits selected border by default) */
 --select-option-active-bg      /* Active background (#f3f4f6) */
 --select-option-active-color   /* Active text color (#1f2937) */
+--select-input-width           /* Input field width */
+--select-input-height          /* Input container height */
 --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-align /* Header text alignment (left default) */
+--select-group-header-text-transform
+--select-group-header-letter-spacing
+--select-group-header-border-bottom
+
+/* Option content and checkmark hooks */
+--select-option-content-overflow
+--select-option-content-text-overflow
+--select-option-content-white-space
+--select-checkmark-margin-left
+--select-checkmark-color
 ```
 
 **Dark Mode (Opt-in)**
@@ -659,6 +698,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)**
@@ -693,11 +734,26 @@ enhanced-select {
     transparent 100%
   );
 }
+
+/* Typo-compatible aliases are also accepted */
+enhanced-select {
+  --select-seperator-width: 2px;
+  --select-seperator-height: 80%;
+  --select-seperator-position: 40px;
+  --select-seperator-gradient: linear-gradient(to bottom, transparent 0%, #3b82f6 20%, #3b82f6 80%, transparent 100%);
+}
 ```
 
+**Gradient Dropdown + Hover/Selected States**
+If your dropdown uses a gradient background (for example via `--select-dropdown-bg`), option hover/selected colors still work as expected. The component intentionally uses the `background` shorthand for hover/selected option states so any inherited `background-image` layers are cleared correctly.
+
 **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

@@ -1534,6 +1534,8 @@ class SelectOption extends HTMLElement {
         padding: var(--select-option-padding, 8px 12px);
         cursor: pointer;
         user-select: none;
+        color: var(--select-option-color, var(--select-text-color, #1f2937));
+        background: var(--select-option-bg, var(--select-dropdown-bg, var(--select-bg, white)));
         transition: var(--select-option-transition, background-color 0.2s ease);
         border: var(--select-option-border, none);
         border-bottom: var(--select-option-border-bottom, none);
@@ -1578,9 +1580,20 @@ class SelectOption extends HTMLElement {
       
       .option-content {
         flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        overflow: var(--select-option-content-overflow, hidden);
+        text-overflow: var(--select-option-content-text-overflow, ellipsis);
+        white-space: var(--select-option-content-white-space, nowrap);
+      }
+
+      .checkmark-icon {
+        display: none;
+        margin-left: var(--select-checkmark-margin-left, 8px);
+        color: var(--select-checkmark-color, currentColor);
+      }
+
+      :host([aria-selected="true"]) .checkmark-icon,
+      .option-container.selected .checkmark-icon {
+        display: inline-flex;
       }
       
       .remove-button {
@@ -1708,16 +1721,6 @@ class SelectOption extends HTMLElement {
             <path d="M4 8.5L6.5 11L12 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         `;
-            // Visibility control via CSS or inline style
-            // We set it to display: none unless selected.
-            // User can override this behavior via part styling if they want transitions
-            if (!selected) {
-                checkmark.style.display = 'none';
-            }
-            else {
-                checkmark.style.marginLeft = '8px';
-                checkmark.style.color = 'currentColor';
-            }
             this._container.appendChild(checkmark);
         }
         // Data Attributes Contract on Host
@@ -1875,7 +1878,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,11 +1952,12 @@ 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
         this.style.display = 'block';
-        this.style.width = '100%';
         if (this._optionRenderer) {
             this._setGlobalStylesMirroring(true);
         }
@@ -1952,6 +1971,8 @@ class EnhancedSelect extends HTMLElement {
         }
     }
     disconnectedCallback() {
+        // unregister instance
+        EnhancedSelect._instances.delete(this);
         // Cleanup observers
         this._resizeObserver?.disconnect();
         this._intersectionObserver?.disconnect();
@@ -2179,7 +2200,8 @@ class EnhancedSelect extends HTMLElement {
       :host {
         display: block;
         position: relative;
-        width: 100%;
+        width: var(--select-width, 100%);
+        height: var(--select-height, auto);
       }
       
       .select-container {
@@ -2195,6 +2217,7 @@ class EnhancedSelect extends HTMLElement {
         flex-wrap: wrap;
         gap: var(--select-input-gap, 6px);
         padding: var(--select-input-padding, 6px 52px 6px 8px);
+        height: var(--select-input-height, auto);
         min-height: var(--select-input-min-height, 44px);
         max-height: var(--select-input-max-height, 160px);
         overflow-y: var(--select-input-overflow-y, auto);
@@ -2216,17 +2239,17 @@ class EnhancedSelect extends HTMLElement {
         content: '';
         position: absolute;
         top: 50%;
-        right: var(--select-separator-position, 40px);
+        right: var(--select-separator-position, var(--select-seperator-position, 40px));
         transform: translateY(-50%);
-        width: var(--select-separator-width, 1px);
-        height: var(--select-separator-height, 60%);
-        background: var(--select-separator-bg, var(--select-separator-gradient, linear-gradient(
+        width: var(--select-separator-width, var(--select-seperator-width, 1px));
+        height: var(--select-separator-height, var(--select-seperator-height, 60%));
+        background: var(--select-separator-bg, var(--select-seperator-bg, var(--select-separator-gradient, var(--select-seperator-gradient, linear-gradient(
           to bottom,
           transparent 0%,
           rgba(0, 0, 0, 0.1) 20%,
           rgba(0, 0, 0, 0.1) 80%,
           transparent 100%
-        )));
+        ))));
         pointer-events: none;
         z-index: 1;
       }
@@ -2237,6 +2260,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;
@@ -2251,7 +2276,7 @@ class EnhancedSelect extends HTMLElement {
       }
 
       .input-container.has-clear-control::after {
-        right: var(--select-separator-position-with-clear, 72px);
+        right: var(--select-separator-position-with-clear, var(--select-seperator-position-with-clear, 72px));
       }
 
       .dropdown-arrow-container.with-clear-control {
@@ -2302,9 +2327,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);
@@ -2324,6 +2354,7 @@ class EnhancedSelect extends HTMLElement {
       
       .select-input {
         flex: 1;
+        width: var(--select-input-width, auto);
         min-width: var(--select-input-min-width, 120px);
         padding: var(--select-input-field-padding, 4px);
         border: none;
@@ -2418,6 +2449,7 @@ class EnhancedSelect extends HTMLElement {
         font-weight: var(--select-group-header-weight, 600);
         color: var(--select-group-header-color, #6b7280);
         background-color: var(--select-group-header-bg, #f3f4f6);
+        text-align: var(--select-group-header-text-align, left);
         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);
@@ -2602,10 +2634,25 @@ class EnhancedSelect extends HTMLElement {
       
       /* Dark mode - Opt-in via class, data attribute, or ancestor context */
       :host(.dark-mode),
+      :host([dark-mode]),
+      :host([darkmode]),
       :host([data-theme="dark"]),
+      :host([theme="dark"]),
       :host-context(.dark-mode),
       :host-context(.dark),
-      :host-context([data-theme="dark"]) {
+      :host-context([dark-mode]),
+      :host-context([darkmode]),
+      :host-context([data-theme="dark"]),
+      :host-context([theme="dark"]) {
+        /* map dark tokens to base option tokens so nested <select-option>
+           components also pick up dark mode via inherited CSS variables */
+        --select-option-bg: var(--select-dark-option-bg, #1f2937);
+        --select-option-color: var(--select-dark-option-color, #f9fafb);
+        --select-option-hover-bg: var(--select-dark-option-hover-bg, #374151);
+        --select-option-hover-color: var(--select-dark-option-hover-color, #f9fafb);
+        --select-option-selected-bg: var(--select-dark-option-selected-bg, #3730a3);
+        --select-option-selected-color: var(--select-dark-option-selected-text, #e0e7ff);
+
         .input-container {
           background: var(--select-dark-bg, #1f2937);
           border-color: var(--select-dark-border, #4b5563);
@@ -2662,6 +2709,12 @@ class EnhancedSelect extends HTMLElement {
           outline: var(--select-dark-option-active-outline, 2px solid rgba(129, 140, 248, 0.55));
         }
 
+        /* 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));
+        }
+
         .option.selected.active {
           background-color: var(--select-dark-option-selected-active-bg, var(--select-dark-option-selected-bg, #3730a3));
           color: var(--select-dark-option-selected-active-color, var(--select-dark-option-selected-text, #e0e7ff));
@@ -2740,19 +2793,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);
@@ -2786,6 +2834,16 @@ class EnhancedSelect extends HTMLElement {
             if (wasClosed) {
                 this._handleOpen();
             }
+            else {
+                // Keep open while interacting directly with the input so users can
+                // place cursor/type without accidental collapse.
+                if (target === this._input) {
+                    this._input.focus();
+                    return;
+                }
+                // clicking other parts of the input container while open toggles close
+                this._handleClose();
+            }
             // Focus the input (do not prevent default behavior)
             this._input.focus();
             // If we just opened the dropdown, transfer pointer capture to the
@@ -2961,6 +3019,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';
@@ -3934,10 +4002,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
@@ -4210,6 +4293,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);