@smilodon/core 1.3.2 → 1.3.4

package/dist/index.cjs

@@ -546,13 +546,11 @@ class CustomOptionPool {
             component = pooled.instance;
             pooled.inUse = true;
             pooled.lastUsedIndex = index;
-            console.log(`[CustomOptionPool] Reusing component for index ${index}`);
         }
         else {
             // Create new component
             try {
                 component = factory(item, index);
-                console.log(`[CustomOptionPool] Created new component for index ${index}`);
                 // Add to pool if under limit
                 const pool = this._pool.get(factoryKey) || [];
                 if (pool.length < this._maxPoolSize) {
@@ -601,7 +599,6 @@ class CustomOptionPool {
             const pooled = pool.find(p => p.instance === component);
             if (pooled) {
                 pooled.inUse = false;
-                console.log(`[CustomOptionPool] Released component from index ${index}`);
                 break;
             }
         }
@@ -610,7 +607,6 @@ class CustomOptionPool {
      * Release all active components
      */
     releaseAll() {
-        console.log(`[CustomOptionPool] Releasing ${this._activeComponents.size} active components`);
         const indices = Array.from(this._activeComponents.keys());
         indices.forEach(index => this.release(index));
     }
@@ -653,7 +649,6 @@ class CustomOptionPool {
     clear() {
         this.releaseAll();
         this._pool.clear();
-        console.log('[CustomOptionPool] Pool cleared');
     }
     /**
      * Get pool statistics for debugging
@@ -832,7 +827,6 @@ class OptionRenderer {
             });
         }
         this._mountedElements.set(index, option);
-        console.log(`[OptionRenderer] Rendered lightweight option ${index}: ${label}`);
         return option;
     }
     /**
@@ -892,7 +886,6 @@ class OptionRenderer {
                     }
                 });
             }
-            console.log(`[OptionRenderer] Rendered custom component option ${index}: ${label}`);
         }
         catch (error) {
             console.error(`[OptionRenderer] Failed to render custom component at index ${index}:`, error);
@@ -1490,13 +1483,10 @@ class EnhancedSelect extends HTMLElement {
         this._hasError = false;
         this._errorMessage = '';
         this._boundArrowClick = null;
-        console.log('[EnhancedSelect] Constructor called');
         this._shadow = this.attachShadow({ mode: 'open' });
-        console.log('[EnhancedSelect] Shadow root attached:', this._shadow);
         this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
         // Merge global config with component-level config
         this._config = selectConfig.getConfig();
-        console.log('[EnhancedSelect] Config loaded');
         // Initialize state
         this._state = {
             isOpen: false,
@@ -1516,41 +1506,26 @@ class EnhancedSelect extends HTMLElement {
             lastNotifiedResultCount: 0,
             isExpanded: false,
         };
-        console.log('[EnhancedSelect] State initialized');
         // Create DOM structure
         this._container = this._createContainer();
-        console.log('[EnhancedSelect] Container created:', this._container);
         this._inputContainer = this._createInputContainer();
-        console.log('[EnhancedSelect] Input container created');
         this._input = this._createInput();
-        console.log('[EnhancedSelect] Input created:', this._input);
         this._arrowContainer = this._createArrowContainer();
-        console.log('[EnhancedSelect] Arrow container created');
         this._dropdown = this._createDropdown();
-        console.log('[EnhancedSelect] Dropdown created');
         this._optionsContainer = this._createOptionsContainer();
-        console.log('[EnhancedSelect] Options container created');
         this._liveRegion = this._createLiveRegion();
-        console.log('[EnhancedSelect] Live region created');
         // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
         this._initializeStyles();
-        console.log('[EnhancedSelect] Styles initialized');
         this._assembleDOM();
-        console.log('[EnhancedSelect] DOM assembled');
         this._attachEventListeners();
-        console.log('[EnhancedSelect] Event listeners attached');
         this._initializeObservers();
-        console.log('[EnhancedSelect] Observers initialized');
-        console.log('[EnhancedSelect] Constructor complete, shadow DOM children:', this._shadow.children.length);
     }
     connectedCallback() {
-        console.log('[EnhancedSelect] connectedCallback called');
         // 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%';
-        console.log('[EnhancedSelect] Forced host display styles');
         // Load initial data if server-side is enabled
         if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
             this._loadInitialSelectedItems();
@@ -1559,7 +1534,6 @@ class EnhancedSelect extends HTMLElement {
         if (this._config.callbacks.onOpen) {
             this._config.callbacks.onOpen();
         }
-        console.log('[EnhancedSelect] connectedCallback complete');
     }
     disconnectedCallback() {
         // Cleanup observers
@@ -1657,43 +1631,22 @@ class EnhancedSelect extends HTMLElement {
         return container;
     }
     _assembleDOM() {
-        console.log('[EnhancedSelect] _assembleDOM: Starting DOM assembly');
-        console.log('[EnhancedSelect] _assembleDOM: Elements to assemble:', {
-            inputContainer: !!this._inputContainer,
-            input: !!this._input,
-            arrowContainer: !!this._arrowContainer,
-            container: !!this._container,
-            dropdown: !!this._dropdown,
-            optionsContainer: !!this._optionsContainer,
-            shadow: !!this._shadow,
-            liveRegion: !!this._liveRegion
-        });
         this._inputContainer.appendChild(this._input);
-        console.log('[EnhancedSelect] _assembleDOM: Appended input to inputContainer');
         if (this._arrowContainer) {
             this._inputContainer.appendChild(this._arrowContainer);
-            console.log('[EnhancedSelect] _assembleDOM: Appended arrowContainer to inputContainer');
         }
         this._container.appendChild(this._inputContainer);
-        console.log('[EnhancedSelect] _assembleDOM: Appended inputContainer to container');
         this._dropdown.appendChild(this._optionsContainer);
-        console.log('[EnhancedSelect] _assembleDOM: Appended optionsContainer to dropdown');
         this._container.appendChild(this._dropdown);
-        console.log('[EnhancedSelect] _assembleDOM: Appended dropdown to container');
         this._shadow.appendChild(this._container);
-        console.log('[EnhancedSelect] _assembleDOM: Appended container to shadow root');
         if (this._liveRegion) {
             this._shadow.appendChild(this._liveRegion);
-            console.log('[EnhancedSelect] _assembleDOM: Appended liveRegion to shadow root');
         }
-        console.log('[EnhancedSelect] _assembleDOM: Shadow root children count:', this._shadow.children.length);
-        console.log('[EnhancedSelect] _assembleDOM: Shadow root HTML length:', this._shadow.innerHTML.length);
         // Set ARIA relationships
         const listboxId = `${this._uniqueId}-listbox`;
         this._dropdown.id = listboxId;
         this._input.setAttribute('aria-controls', listboxId);
         this._input.setAttribute('aria-owns', listboxId);
-        console.log('[EnhancedSelect] _assembleDOM: Set ARIA relationships with listboxId:', listboxId);
     }
     _initializeStyles() {
         const style = document.createElement('style');
@@ -1863,28 +1816,32 @@ class EnhancedSelect extends HTMLElement {
         max-height: 300px;
         overflow: auto;
         transition: opacity 0.2s ease-in-out;
+        background: var(--select-options-bg, white);
       }
 
       .option {
-        padding: 8px 12px;
+        padding: var(--select-option-padding, 8px 12px);
         cursor: pointer;
-        color: inherit;
+        color: var(--select-option-color, #1f2937);
+        background: var(--select-option-bg, white);
         transition: background-color 0.15s ease;
         user-select: none;
       }
 
       .option:hover {
-        background-color: #f3f4f6;
+        background-color: var(--select-option-hover-bg, #f3f4f6);
+        color: var(--select-option-hover-color, #1f2937);
       }
 
       .option.selected {
-        background-color: #e0e7ff;
-        color: #4338ca;
+        background-color: var(--select-option-selected-bg, #e0e7ff);
+        color: var(--select-option-selected-color, #4338ca);
         font-weight: 500;
       }
 
       .option.active {
-        background-color: #f3f4f6;
+        background-color: var(--select-option-active-bg, #f3f4f6);
+        color: var(--select-option-active-color, #1f2937);
       }
       
       .load-more-container {
@@ -1973,22 +1930,39 @@ class EnhancedSelect extends HTMLElement {
         }
       }
       
-      /* Accessibility: Dark mode */
-      @media (prefers-color-scheme: dark) {
-        .select-input {
+      /* Dark mode - Opt-in via class or data attribute */
+      :host(.dark-mode),
+      :host([data-theme="dark"]) {
+        .input-container {
           background: var(--select-dark-bg, #1f2937);
-          color: var(--select-dark-text, #f9fafb);
           border-color: var(--select-dark-border, #4b5563);
         }
         
+        .select-input {
+          color: var(--select-dark-text, #f9fafb);
+        }
+        
+        .select-input::placeholder {
+          color: var(--select-dark-placeholder, #6b7280);
+        }
+        
         .select-dropdown {
           background: var(--select-dark-dropdown-bg, #1f2937);
           border-color: var(--select-dark-dropdown-border, #4b5563);
-          color: var(--select-dark-text, #f9fafb);
+        }
+        
+        .options-container {
+          background: var(--select-dark-options-bg, #1f2937);
+        }
+        
+        .option {
+          color: var(--select-dark-option-color, #f9fafb);
+          background: var(--select-dark-option-bg, #1f2937);
         }
         
         .option:hover {
           background-color: var(--select-dark-option-hover-bg, #374151);
+          color: var(--select-dark-option-hover-color, #f9fafb);
         }
         
         .option.selected {
@@ -1998,11 +1972,23 @@ class EnhancedSelect extends HTMLElement {
         
         .option.active {
           background-color: var(--select-dark-option-active-bg, #374151);
+          color: var(--select-dark-option-active-color, #f9fafb);
         }
         
-        .busy-bucket {
+        .busy-bucket,
+        .empty-state {
           color: var(--select-dark-busy-color, #9ca3af);
         }
+        
+        .input-container::after {
+          background: linear-gradient(
+            to bottom,
+            transparent 0%,
+            rgba(255, 255, 255, 0.1) 20%,
+            rgba(255, 255, 255, 0.1) 80%,
+            transparent 100%
+          );
+        }
       }
       
       /* Accessibility: High contrast mode */
@@ -2023,8 +2009,6 @@ class EnhancedSelect extends HTMLElement {
         min-height: 44px;
       }
     `;
-        console.log('[EnhancedSelect] _initializeStyles: Created style element, content length:', style.textContent?.length || 0);
-        console.log('[EnhancedSelect] _initializeStyles: Shadow root children BEFORE:', this._shadow.children.length);
         // Insert as first child to ensure styles are processed first
         if (this._shadow.firstChild) {
             this._shadow.insertBefore(style, this._shadow.firstChild);
@@ -2032,9 +2016,6 @@ class EnhancedSelect extends HTMLElement {
         else {
             this._shadow.appendChild(style);
         }
-        console.log('[EnhancedSelect] _initializeStyles: Style inserted, shadow root children AFTER:', this._shadow.children.length);
-        console.log('[EnhancedSelect] _initializeStyles: Shadow root has style element:', !!this._shadow.querySelector('style'));
-        console.log('[EnhancedSelect] _initializeStyles: Style sheet rules:', style.sheet?.cssRules?.length || 'NOT PARSED');
     }
     _attachEventListeners() {
         // Arrow click handler
@@ -2641,27 +2622,21 @@ class EnhancedSelect extends HTMLElement {
      * Set items to display in the select
      */
     setItems(items) {
-        console.log('[EnhancedSelect] setItems called with', items?.length || 0, 'items');
-        console.log('[EnhancedSelect] Items:', items);
         const previousLength = this._state.loadedItems.length;
         this._state.loadedItems = items;
         // If grouped items exist, flatten them to items
         if (this._state.groupedItems.length > 0) {
             this._state.loadedItems = this._state.groupedItems.flatMap(group => group.options);
-            console.log('[EnhancedSelect] Flattened grouped items to', this._state.loadedItems.length, 'items');
         }
         const newLength = this._state.loadedItems.length;
-        console.log('[EnhancedSelect] State.loadedItems updated:', previousLength, '→', newLength);
         // When infinite scroll is active (preserveScrollPosition = true),
         // we need to maintain scroll position during the update
         if (this._state.preserveScrollPosition && this._dropdown) {
             const targetScrollTop = this._state.lastScrollPosition;
-            console.log('[EnhancedSelect] Preserving scroll position:', targetScrollTop);
             // Only clear loading if we actually got more items
             if (newLength > previousLength) {
                 this._state.isBusy = false;
             }
-            console.log('[EnhancedSelect] Calling _renderOptions (with scroll preservation)...');
             this._renderOptions();
             // Restore the exact scrollTop we had before loading
             // so the previously visible items stay in place and
@@ -2681,10 +2656,8 @@ class EnhancedSelect extends HTMLElement {
         else {
             // Normal update - just render normally
             this._state.isBusy = false;
-            console.log('[EnhancedSelect] Calling _renderOptions (normal)...');
             this._renderOptions();
         }
-        console.log('[EnhancedSelect] setItems complete');
     }
     /**
      * Set grouped items
@@ -2848,21 +2821,11 @@ class EnhancedSelect extends HTMLElement {
      * Render options based on current state
      */
     _renderOptions() {
-        console.log('[EnhancedSelect] _renderOptions called');
-        console.log('[EnhancedSelect] State:', {
-            loadedItems: this._state.loadedItems.length,
-            groupedItems: this._state.groupedItems.length,
-            isOpen: this._state.isOpen,
-            isSearching: this._state.isSearching,
-            searchQuery: this._state.searchQuery,
-            isBusy: this._state.isBusy
-        });
         // Cleanup observer
         if (this._loadMoreTrigger && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this._loadMoreTrigger);
         }
         // Clear options container
-        console.log('[EnhancedSelect] Clearing options container, previous children:', this._optionsContainer.children.length);
         this._optionsContainer.innerHTML = '';
         // Ensure dropdown only contains options container (cleanup legacy direct children)
         // We need to preserve optionsContainer, so we can't just clear dropdown.innerHTML
@@ -2875,7 +2838,6 @@ class EnhancedSelect extends HTMLElement {
         // Ensure dropdown is visible if we are rendering options
         if (this._state.isOpen && this._dropdown.style.display === 'none') {
             this._dropdown.style.display = 'block';
-            console.log('[EnhancedSelect] Dropdown display set to block');
         }
         // Show searching state (exclusive state)
         if (this._state.isSearching) {
@@ -2883,7 +2845,6 @@ class EnhancedSelect extends HTMLElement {
             searching.className = 'searching-state';
             searching.textContent = 'Searching...';
             this._optionsContainer.appendChild(searching);
-            console.log('[EnhancedSelect] Added searching state');
             return;
         }
         const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
@@ -2892,7 +2853,6 @@ 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) {
-            console.log('[EnhancedSelect] Rendering grouped items:', this._state.groupedItems.length, 'groups');
             this._state.groupedItems.forEach(group => {
                 const header = document.createElement('div');
                 header.className = 'group-header';
@@ -2922,7 +2882,6 @@ class EnhancedSelect extends HTMLElement {
         }
         else {
             // Normal rendering (flat list or filtered)
-            console.log('[EnhancedSelect] Rendering flat list:', this._state.loadedItems.length, 'items');
             let hasRenderedItems = false;
             this._state.loadedItems.forEach((item, index) => {
                 // Apply filter if query exists
@@ -2939,7 +2898,6 @@ class EnhancedSelect extends HTMLElement {
                 hasRenderedItems = true;
                 this._renderSingleOption(item, index, getValue, getLabel);
             });
-            console.log('[EnhancedSelect] Rendered', hasRenderedItems ? 'items' : 'no items');
             if (!hasRenderedItems && !this._state.isBusy) {
                 const empty = document.createElement('div');
                 empty.className = 'empty-state';
@@ -2950,7 +2908,6 @@ class EnhancedSelect extends HTMLElement {
                     empty.textContent = 'No options available';
                 }
                 this._optionsContainer.appendChild(empty);
-                console.log('[EnhancedSelect] Added empty state');
             }
         }
         // Append Busy Indicator if busy
@@ -2968,13 +2925,11 @@ class EnhancedSelect extends HTMLElement {
                 busyBucket.appendChild(message);
             }
             this._optionsContainer.appendChild(busyBucket);
-            console.log('[EnhancedSelect] Added busy bucket');
         }
         // Append Load More Trigger (Button or Sentinel) if enabled and not busy
         else if ((this._config.loadMore.enabled || this._config.infiniteScroll.enabled) && this._state.loadedItems.length > 0) {
             this._addLoadMoreTrigger();
         }
-        console.log('[EnhancedSelect] _renderOptions complete, optionsContainer children:', this._optionsContainer.children.length);
     }
     _renderSingleOption(item, index, getValue, getLabel) {
         const option = document.createElement('div');
@@ -2982,7 +2937,6 @@ class EnhancedSelect extends HTMLElement {
         option.id = `${this._uniqueId}-option-${index}`;
         const value = getValue(item);
         const label = getLabel(item);
-        console.log('[EnhancedSelect] Rendering option', index, ':', { value, label });
         option.textContent = label;
         option.dataset.value = String(value);
         option.dataset.index = String(index); // Also useful for debugging/selectors
@@ -2999,7 +2953,6 @@ class EnhancedSelect extends HTMLElement {
             this._selectOption(index);
         });
         this._optionsContainer.appendChild(option);
-        console.log('[EnhancedSelect] Option', index, 'appended to optionsContainer');
     }
     _addLoadMoreTrigger() {
         const container = document.createElement('div');
@@ -3832,7 +3785,6 @@ async function measureAsync(label, fn) {
     const start = performance.now();
     const result = await fn();
     const duration = performance.now() - start;
-    console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
     return { result, duration };
 }
 /**
@@ -3842,7 +3794,6 @@ function measureSync(label, fn) {
     const start = performance.now();
     const result = fn();
     const duration = performance.now() - start;
-    console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
     return { result, duration };
 }