@smilodon/core 1.4.3 → 1.4.5

package/README.md

@@ -136,6 +136,31 @@ See the [main documentation](https://github.com/navidrezadoost/smilodon#readme)
 
 ## API Reference
 
+### Clear Control (Selection/Search Reset)
+
+```javascript
+const select = document.querySelector('enhanced-select');
+
+select.updateConfig({
+  clearControl: {
+    enabled: true,
+    clearSelection: true,
+    clearSearch: true,
+    hideWhenEmpty: true,
+    ariaLabel: 'Clear selected and searched values',
+    icon: '✕',
+  }
+});
+
+select.addEventListener('clear', (e) => {
+  console.log(e.detail); // { clearedSelection: boolean, clearedSearch: boolean }
+});
+```
+
+Style hooks:
+- Parts: `::part(clear-button)`, `::part(clear-icon)`
+- Tokens: `--select-clear-button-*`, `--select-clear-icon-*`, `--select-input-padding-with-clear`
+
 ### Properties
 
 ```typescript
@@ -560,6 +585,9 @@ enhanced-select {
   /* Selected state */
   --select-option-selected-bg: #e0e7ff;
   --select-option-selected-color: #4338ca;
+  --select-option-selected-border: 1px solid #4338ca;
+  --select-option-selected-hover-bg: #c7d2fe;
+  --select-option-selected-hover-border: 1px solid #3730a3;
   
   /* Active/focused state */
   --select-option-active-bg: #f3f4f6;
@@ -610,6 +638,9 @@ enhanced-select.dark-mode {
 --select-option-hover-color    /* Hover text color (#1f2937) */
 --select-option-selected-bg    /* Selected background (#e0e7ff) */
 --select-option-selected-color /* Selected text color (#4338ca) */
+--select-option-selected-border /* Selected border (inherits option border by default) */
+--select-option-selected-hover-bg /* Selected+hover background (inherits selected bg by default) */
+--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-dropdown-bg           /* Dropdown background (white) */

package/dist/index.cjs

@@ -1394,6 +1394,14 @@ const defaultConfig = {
         expandLabel: 'Show more',
         collapseLabel: 'Show less',
     },
+    clearControl: {
+        enabled: false,
+        clearSelection: true,
+        clearSearch: true,
+        hideWhenEmpty: true,
+        ariaLabel: 'Clear selection and search',
+        icon: '×',
+    },
     callbacks: {},
     enabled: true,
     searchable: false,
@@ -1498,10 +1506,15 @@ class SelectOption extends HTMLElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 8px 12px;
+        padding: var(--select-option-padding, 8px 12px);
         cursor: pointer;
         user-select: none;
-        transition: background-color 0.2s ease;
+        transition: var(--select-option-transition, background-color 0.2s ease);
+        border: var(--select-option-border, none);
+        border-bottom: var(--select-option-border-bottom, none);
+        border-radius: var(--select-option-border-radius, 0);
+        box-shadow: var(--select-option-shadow, none);
+        transform: var(--select-option-transform, none);
       }
       
       .option-container:hover {
@@ -1511,6 +1524,20 @@ class SelectOption extends HTMLElement {
       .option-container.selected {
         background-color: 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));
+      }
+
+      .option-container.selected:hover {
+        background-color: 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.active {
@@ -1818,6 +1845,16 @@ if (!customElements.get('select-option')) {
  * server-side selection, and full customization
  */
 class EnhancedSelect extends HTMLElement {
+    get classMap() {
+        return this._classMap;
+    }
+    set classMap(map) {
+        this._classMap = map;
+        this._setGlobalStylesMirroring(Boolean(this._optionRenderer || map));
+        if (!this.isConnected)
+            return;
+        this._renderOptions();
+    }
     constructor() {
         super();
         this._pageCache = {};
@@ -1861,6 +1898,7 @@ class EnhancedSelect extends HTMLElement {
         this._inputContainer = this._createInputContainer();
         this._input = this._createInput();
         this._arrowContainer = this._createArrowContainer();
+        this._clearControl = this._createClearControl();
         this._dropdown = this._createDropdown();
         this._optionsContainer = this._createOptionsContainer();
         this._liveRegion = this._createLiveRegion();
@@ -2074,8 +2112,25 @@ class EnhancedSelect extends HTMLElement {
     `;
         return container;
     }
+    _createClearControl() {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'clear-control-button';
+        button.setAttribute('part', 'clear-button');
+        const icon = document.createElement('span');
+        icon.className = 'clear-control-icon';
+        icon.setAttribute('part', 'clear-icon');
+        icon.textContent = this._config.clearControl.icon || '×';
+        button.setAttribute('aria-label', this._config.clearControl.ariaLabel || 'Clear selection and search');
+        button.appendChild(icon);
+        this._clearControlIcon = icon;
+        return button;
+    }
     _assembleDOM() {
         this._inputContainer.appendChild(this._input);
+        if (this._clearControl) {
+            this._inputContainer.appendChild(this._clearControl);
+        }
         if (this._arrowContainer) {
             this._inputContainer.appendChild(this._arrowContainer);
         }
@@ -2091,6 +2146,7 @@ class EnhancedSelect extends HTMLElement {
         this._dropdown.id = listboxId;
         this._input.setAttribute('aria-controls', listboxId);
         this._input.setAttribute('aria-owns', listboxId);
+        this._syncClearControlState();
     }
     _initializeStyles() {
         const style = document.createElement('style');
@@ -2164,6 +2220,58 @@ class EnhancedSelect extends HTMLElement {
         border-radius: var(--select-arrow-border-radius, 0 4px 4px 0);
         z-index: 2;
       }
+
+      .input-container.has-clear-control {
+        padding: var(--select-input-padding-with-clear, 6px 84px 6px 8px);
+      }
+
+      .input-container.has-clear-control::after {
+        right: var(--select-separator-position-with-clear, 72px);
+      }
+
+      .dropdown-arrow-container.with-clear-control {
+        right: var(--select-arrow-right-with-clear, 32px);
+      }
+
+      .clear-control-button {
+        position: absolute;
+        top: 50%;
+        right: var(--select-clear-button-right, 6px);
+        transform: translateY(-50%);
+        width: var(--select-clear-button-size, 24px);
+        height: var(--select-clear-button-size, 24px);
+        border: var(--select-clear-button-border, none);
+        border-radius: var(--select-clear-button-radius, 999px);
+        background: var(--select-clear-button-bg, transparent);
+        color: var(--select-clear-button-color, #6b7280);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 3;
+        transition: var(--select-clear-button-transition, all 0.2s ease);
+      }
+
+      .clear-control-button:hover {
+        background: var(--select-clear-button-hover-bg, rgba(0, 0, 0, 0.06));
+        color: var(--select-clear-button-hover-color, #111827);
+      }
+
+      .clear-control-button:focus-visible {
+        outline: var(--select-clear-button-focus-outline, 2px solid rgba(102, 126, 234, 0.55));
+        outline-offset: 1px;
+      }
+
+      .clear-control-button[hidden] {
+        display: none;
+      }
+
+      .clear-control-icon {
+        font-size: var(--select-clear-icon-size, 16px);
+        line-height: 1;
+        font-weight: var(--select-clear-icon-weight, 500);
+        pointer-events: none;
+      }
       
       .dropdown-arrow-container:hover {
         background-color: var(--select-arrow-hover-bg, rgba(102, 126, 234, 0.08));
@@ -2291,6 +2399,9 @@ class EnhancedSelect extends HTMLElement {
         line-height: var(--select-option-line-height, 1.5);
         border: var(--select-option-border, none);
         border-bottom: var(--select-option-border-bottom, none);
+        border-radius: var(--select-option-border-radius, 0);
+        box-shadow: var(--select-option-shadow, none);
+        transform: var(--select-option-transform, none);
       }
 
       .option:hover {
@@ -2302,18 +2413,47 @@ class EnhancedSelect extends HTMLElement {
         background-color: var(--select-option-selected-bg, #e0e7ff);
         color: var(--select-option-selected-color, #4338ca);
         font-weight: var(--select-option-selected-weight, 500);
+        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));
+      }
+
+      .option.selected:hover {
+        background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
+        color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #4338ca));
+        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.active {
+      .option.active:not(.selected) {
         background-color: var(--select-option-active-bg, #f3f4f6);
         color: var(--select-option-active-color, #1f2937);
         outline: var(--select-option-active-outline, 2px solid rgba(99, 102, 241, 0.45));
         outline-offset: -2px;
       }
 
-      .option:active {
+      .option.selected.active {
+        background-color: var(--select-option-selected-active-bg, var(--select-option-selected-bg, #e0e7ff));
+        color: var(--select-option-selected-active-color, var(--select-option-selected-color, #4338ca));
+        border: var(--select-option-selected-active-border, var(--select-option-selected-border, var(--select-option-border, none)));
+        border-bottom: var(--select-option-selected-active-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
+        box-shadow: var(--select-option-selected-active-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
+        transform: var(--select-option-selected-active-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
+        outline: var(--select-option-selected-active-outline, var(--select-option-active-outline, 2px solid rgba(99, 102, 241, 0.45)));
+        outline-offset: -2px;
+      }
+
+      .option:active:not(.selected) {
         background-color: var(--select-option-pressed-bg, #e5e7eb);
       }
+
+      .option.selected:active {
+        background-color: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
+      }
       
       .load-more-container {
         padding: var(--select-load-more-padding, 12px);
@@ -2459,14 +2599,38 @@ class EnhancedSelect extends HTMLElement {
         .option.selected {
           background-color: 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)));
+          box-shadow: var(--select-dark-option-selected-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
+          transform: var(--select-dark-option-selected-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
+        }
+
+        .option.selected:hover {
+          background-color: 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)))));
+          box-shadow: var(--select-dark-option-selected-hover-shadow, var(--select-dark-option-selected-shadow, var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)))));
+          transform: var(--select-dark-option-selected-hover-transform, var(--select-dark-option-selected-transform, var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)))));
         }
         
-        .option.active {
+        .option.active:not(.selected) {
           background-color: var(--select-dark-option-active-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));
         }
 
+        .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));
+          border: var(--select-dark-option-selected-active-border, var(--select-dark-option-selected-border, var(--select-option-selected-active-border, var(--select-option-selected-border, var(--select-option-border, none)))));
+          border-bottom: var(--select-dark-option-selected-active-border-bottom, var(--select-dark-option-selected-border-bottom, var(--select-option-selected-active-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)))));
+          box-shadow: var(--select-dark-option-selected-active-shadow, var(--select-dark-option-selected-shadow, var(--select-option-selected-active-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)))));
+          transform: var(--select-dark-option-selected-active-transform, var(--select-dark-option-selected-transform, var(--select-option-selected-active-transform, var(--select-option-selected-transform, var(--select-option-transform, none)))));
+          outline: var(--select-dark-option-selected-active-outline, var(--select-dark-option-active-outline, var(--select-option-selected-active-outline, var(--select-option-active-outline, 2px solid rgba(129, 140, 248, 0.55)))));
+          outline-offset: -2px;
+        }
+
         .selection-badge {
           background: var(--select-dark-badge-bg, #4f46e5);
           color: var(--select-dark-badge-color, #eef2ff);
@@ -2551,6 +2715,17 @@ class EnhancedSelect extends HTMLElement {
             };
             this._arrowContainer.addEventListener('click', this._boundArrowClick);
         }
+        if (this._clearControl) {
+            this._clearControl.addEventListener('pointerdown', (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            });
+            this._clearControl.addEventListener('click', (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                this._handleClearControlClick();
+            });
+        }
         // Input container click - focus input and open dropdown
         this._inputContainer.addEventListener('pointerdown', (e) => {
             const target = e.target;
@@ -2558,6 +2733,8 @@ class EnhancedSelect extends HTMLElement {
                 return;
             if (target && target.closest('.dropdown-arrow-container'))
                 return;
+            if (target && target.closest('.clear-control-button'))
+                return;
             if (!this._state.isOpen) {
                 this._handleOpen();
             }
@@ -2770,6 +2947,7 @@ class EnhancedSelect extends HTMLElement {
     }
     _handleSearch(query) {
         this._state.searchQuery = query;
+        this._syncClearControlState();
         if (query.length > 0) {
             this._perfMark('smilodon-search-input-last');
             this._pendingSearchRenderMark = true;
@@ -2947,7 +3125,9 @@ class EnhancedSelect extends HTMLElement {
                 option.classList.add('smilodon-option--active');
                 option.setAttribute('aria-selected', 'true');
             }
-            option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            if (typeof option.scrollIntoView === 'function') {
+                option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
             // Announce position for screen readers
             const total = options.length;
             this._announce(`Item ${index + 1} of ${total}`);
@@ -3074,6 +3254,10 @@ class EnhancedSelect extends HTMLElement {
         const item = this._state.loadedItems[index];
         if (!item)
             return;
+        // 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
@@ -3198,6 +3382,7 @@ class EnhancedSelect extends HTMLElement {
                 this._inputContainer.insertBefore(badge, this._input);
             });
         }
+        this._syncClearControlState();
     }
     _renderOptionsWithAnimation() {
         // Add fade-out animation
@@ -3313,7 +3498,7 @@ class EnhancedSelect extends HTMLElement {
     }
     set optionRenderer(renderer) {
         this._optionRenderer = renderer;
-        this._setGlobalStylesMirroring(Boolean(renderer));
+        this._setGlobalStylesMirroring(Boolean(renderer || this._classMap));
         this._renderOptions();
     }
     /**
@@ -3446,6 +3631,21 @@ class EnhancedSelect extends HTMLElement {
         this._renderOptions();
         this._updateInputDisplay();
         this._emitChange();
+        this._syncClearControlState();
+    }
+    /**
+     * Clear search query and restore full option list
+     */
+    clearSearch() {
+        this._state.searchQuery = '';
+        if (this._config.searchable) {
+            this._input.value = '';
+            if (this._state.selectedIndices.size > 0) {
+                this._updateInputDisplay();
+            }
+        }
+        this._renderOptions();
+        this._syncClearControlState();
     }
     /**
      * Open dropdown
@@ -3472,6 +3672,12 @@ class EnhancedSelect extends HTMLElement {
                 this._input.placeholder = this._config.placeholder || 'Select an option...';
             }
         }
+        if (this._clearControl) {
+            this._clearControl.setAttribute('aria-label', this._config.clearControl.ariaLabel || 'Clear selection and search');
+        }
+        if (this._clearControlIcon) {
+            this._clearControlIcon.textContent = this._config.clearControl.icon || '×';
+        }
         if (this._dropdown) {
             if (this._config.selection.mode === 'multi') {
                 this._dropdown.setAttribute('aria-multiselectable', 'true');
@@ -3482,8 +3688,47 @@ class EnhancedSelect extends HTMLElement {
         }
         // Re-initialize observers in case infinite scroll was enabled/disabled
         this._initializeObservers();
+        this._syncClearControlState();
         this._renderOptions();
     }
+    _handleClearControlClick() {
+        const shouldClearSelection = this._config.clearControl.clearSelection !== false;
+        const shouldClearSearch = this._config.clearControl.clearSearch !== false;
+        const hadSelection = this._state.selectedIndices.size > 0;
+        const hadSearch = this._state.searchQuery.length > 0;
+        if (shouldClearSelection && hadSelection) {
+            this.clear();
+        }
+        if (shouldClearSearch && hadSearch) {
+            this.clearSearch();
+        }
+        this._emit('clear', {
+            clearedSelection: shouldClearSelection && hadSelection,
+            clearedSearch: shouldClearSearch && hadSearch,
+        });
+        this._config.callbacks.onClear?.({
+            clearedSelection: shouldClearSelection && hadSelection,
+            clearedSearch: shouldClearSearch && hadSearch,
+        });
+        this._input.focus();
+    }
+    _syncClearControlState() {
+        if (!this._clearControl || !this._inputContainer || !this._arrowContainer)
+            return;
+        const enabled = this._config.clearControl.enabled === true;
+        const hasSelection = this._state.selectedIndices.size > 0;
+        const hasSearch = this._state.searchQuery.length > 0;
+        const clearSelection = this._config.clearControl.clearSelection !== false;
+        const clearSearch = this._config.clearControl.clearSearch !== false;
+        const hasSomethingToClear = (clearSelection && hasSelection) || (clearSearch && hasSearch);
+        const hideWhenEmpty = this._config.clearControl.hideWhenEmpty !== false;
+        const visible = enabled && (!hideWhenEmpty || hasSomethingToClear);
+        this._inputContainer.classList.toggle('has-clear-control', enabled);
+        this._arrowContainer.classList.toggle('with-clear-control', enabled);
+        this._clearControl.hidden = !visible;
+        this._clearControl.disabled = !hasSomethingToClear;
+        this._clearControl.setAttribute('aria-hidden', String(!visible));
+    }
     /**
      * Set error state
      */
@@ -4771,10 +5016,17 @@ const shadowDOMStyles = `
   color: var(--ns-item-selected-color, #0066cc);
 }
 
-.ns-item[data-active="true"] {
+.ns-item[data-active="true"]:not([aria-selected="true"]) {
   background: var(--ns-item-active-bg, rgba(0, 102, 204, 0.2));
 }
 
+.ns-item[aria-selected="true"][data-active="true"] {
+  background: var(--ns-item-selected-active-bg, var(--ns-item-selected-bg, rgba(0, 102, 204, 0.1)));
+  color: var(--ns-item-selected-active-color, var(--ns-item-selected-color, #0066cc));
+  outline: var(--ns-item-selected-active-outline, 2px solid #0066cc);
+  outline-offset: -2px;
+}
+
 .ns-item[aria-disabled="true"] {
   opacity: 0.5;
   cursor: not-allowed;