@smilodon/core 1.4.4 → 1.4.5

package/dist/index.umd.js

@@ -1398,6 +1398,14 @@
             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,
@@ -1894,6 +1902,7 @@
             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();
@@ -2107,8 +2116,25 @@
     `;
             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);
             }
@@ -2124,6 +2150,7 @@
             this._dropdown.id = listboxId;
             this._input.setAttribute('aria-controls', listboxId);
             this._input.setAttribute('aria-owns', listboxId);
+            this._syncClearControlState();
         }
         _initializeStyles() {
             const style = document.createElement('style');
@@ -2197,6 +2224,58 @@
         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));
@@ -2354,16 +2433,31 @@
         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);
@@ -2524,12 +2618,23 @@
           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);
@@ -2614,6 +2719,17 @@
                 };
                 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;
@@ -2621,6 +2737,8 @@
                     return;
                 if (target && target.closest('.dropdown-arrow-container'))
                     return;
+                if (target && target.closest('.clear-control-button'))
+                    return;
                 if (!this._state.isOpen) {
                     this._handleOpen();
                 }
@@ -2833,6 +2951,7 @@
         }
         _handleSearch(query) {
             this._state.searchQuery = query;
+            this._syncClearControlState();
             if (query.length > 0) {
                 this._perfMark('smilodon-search-input-last');
                 this._pendingSearchRenderMark = true;
@@ -3010,7 +3129,9 @@
                     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}`);
@@ -3265,6 +3386,7 @@
                     this._inputContainer.insertBefore(badge, this._input);
                 });
             }
+            this._syncClearControlState();
         }
         _renderOptionsWithAnimation() {
             // Add fade-out animation
@@ -3513,6 +3635,21 @@
             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
@@ -3539,6 +3676,12 @@
                     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');
@@ -3549,8 +3692,47 @@
             }
             // 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
          */
@@ -4838,10 +5020,17 @@
   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;