@smilodon/core 1.4.4 → 1.4.6

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

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,
@@ -1510,11 +1518,11 @@ class SelectOption extends HTMLElement {
       }
       
       .option-container:hover {
-        background-color: var(--select-option-hover-bg, #f0f0f0);
+        background: var(--select-option-hover-bg, #f0f0f0);
       }
       
       .option-container.selected {
-        background-color: var(--select-option-selected-bg, #e3f2fd);
+        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));
@@ -1524,7 +1532,7 @@ class SelectOption extends HTMLElement {
       }
 
       .option-container.selected:hover {
-        background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
+        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)));
@@ -1890,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();
@@ -2103,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);
         }
@@ -2120,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');
@@ -2193,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));
@@ -2326,12 +2405,12 @@ class EnhancedSelect extends HTMLElement {
       }
 
       .option:hover {
-        background-color: var(--select-option-hover-bg, #f3f4f6);
+        background: var(--select-option-hover-bg, #f3f4f6);
         color: var(--select-option-hover-color, #1f2937);
       }
 
       .option.selected {
-        background-color: var(--select-option-selected-bg, #e0e7ff);
+        background: 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));
@@ -2342,7 +2421,7 @@ class EnhancedSelect extends HTMLElement {
       }
 
       .option.selected:hover {
-        background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
+        background: 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)));
@@ -2350,15 +2429,30 @@ class EnhancedSelect extends HTMLElement {
         transform: var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
       }
 
-      .option.active {
-        background-color: var(--select-option-active-bg, #f3f4f6);
+      .option.active:not(.selected) {
+        background: 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 {
-        background-color: var(--select-option-pressed-bg, #e5e7eb);
+      .option.selected.active {
+        background: 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: var(--select-option-pressed-bg, #e5e7eb);
+      }
+
+      .option.selected:active {
+        background: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
       }
       
       .load-more-container {
@@ -2520,12 +2614,23 @@ class EnhancedSelect extends HTMLElement {
           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);
@@ -2610,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;
@@ -2617,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();
             }
@@ -2829,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;
@@ -3006,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}`);
@@ -3261,6 +3382,7 @@ class EnhancedSelect extends HTMLElement {
                 this._inputContainer.insertBefore(badge, this._input);
             });
         }
+        this._syncClearControlState();
     }
     _renderOptionsWithAnimation() {
         // Add fade-out animation
@@ -3509,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
@@ -3535,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');
@@ -3545,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
      */
@@ -4834,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;