@smilodon/core 1.1.8 → 1.2.0

package/dist/index.cjs

@@ -948,6 +948,404 @@ function resetSelectConfig() {
     selectConfig.resetConfig();
 }
 
+/**
+ * Custom Option Component Pool
+ *
+ * Manages lifecycle and recycling of custom option components for optimal performance.
+ * Uses object pooling pattern to minimize allocation/deallocation overhead.
+ */
+/**
+ * Manages a pool of reusable custom option component instances
+ */
+class CustomOptionPool {
+    constructor(maxPoolSize = 50) {
+        this._pool = new Map();
+        this._activeComponents = new Map();
+        this._maxPoolSize = maxPoolSize;
+    }
+    /**
+     * Get or create a component instance for the given index
+     *
+     * @param factory - Factory function to create new instances
+     * @param item - The data item
+     * @param index - The option index
+     * @param context - Context for mounting
+     * @param container - DOM container for mounting
+     * @returns Component instance
+     */
+    acquire(factory, item, index, context, container) {
+        const factoryKey = this._getFactoryKey(factory);
+        // Try to find an available component in the pool
+        const pooled = this._findAvailableComponent(factoryKey);
+        let component;
+        if (pooled) {
+            // Reuse pooled component
+            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) {
+                    pool.push({
+                        instance: component,
+                        inUse: true,
+                        lastUsedIndex: index
+                    });
+                    this._pool.set(factoryKey, pool);
+                }
+            }
+            catch (error) {
+                console.error(`[CustomOptionPool] Failed to create component:`, error);
+                throw error;
+            }
+        }
+        // Mount the component
+        try {
+            component.mountOption(container, context);
+            this._activeComponents.set(index, component);
+        }
+        catch (error) {
+            console.error(`[CustomOptionPool] Failed to mount component at index ${index}:`, error);
+            throw error;
+        }
+        return component;
+    }
+    /**
+     * Release a component back to the pool
+     *
+     * @param index - The index of the component to release
+     */
+    release(index) {
+        const component = this._activeComponents.get(index);
+        if (!component)
+            return;
+        try {
+            component.unmountOption();
+        }
+        catch (error) {
+            console.error(`[CustomOptionPool] Failed to unmount component at index ${index}:`, error);
+        }
+        this._activeComponents.delete(index);
+        // Mark as available in pool
+        for (const pool of this._pool.values()) {
+            const pooled = pool.find(p => p.instance === component);
+            if (pooled) {
+                pooled.inUse = false;
+                console.log(`[CustomOptionPool] Released component from index ${index}`);
+                break;
+            }
+        }
+    }
+    /**
+     * 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));
+    }
+    /**
+     * Update selection state for a component
+     *
+     * @param index - The index of the component
+     * @param selected - Whether it's selected
+     */
+    updateSelection(index, selected) {
+        const component = this._activeComponents.get(index);
+        if (component) {
+            component.updateSelected(selected);
+        }
+    }
+    /**
+     * Update focused state for a component
+     *
+     * @param index - The index of the component
+     * @param focused - Whether it has keyboard focus
+     */
+    updateFocused(index, focused) {
+        const component = this._activeComponents.get(index);
+        if (component && component.updateFocused) {
+            component.updateFocused(focused);
+        }
+    }
+    /**
+     * Get active component at index
+     *
+     * @param index - The option index
+     * @returns The component instance or undefined
+     */
+    getComponent(index) {
+        return this._activeComponents.get(index);
+    }
+    /**
+     * Clear the entire pool
+     */
+    clear() {
+        this.releaseAll();
+        this._pool.clear();
+        console.log('[CustomOptionPool] Pool cleared');
+    }
+    /**
+     * Get pool statistics for debugging
+     */
+    getStats() {
+        let totalPooled = 0;
+        let availableComponents = 0;
+        for (const pool of this._pool.values()) {
+            totalPooled += pool.length;
+            availableComponents += pool.filter(p => !p.inUse).length;
+        }
+        return {
+            totalPooled,
+            activeComponents: this._activeComponents.size,
+            availableComponents
+        };
+    }
+    /**
+     * Find an available component in the pool
+     */
+    _findAvailableComponent(factoryKey) {
+        const pool = this._pool.get(factoryKey);
+        if (!pool)
+            return undefined;
+        return pool.find(p => !p.inUse);
+    }
+    /**
+     * Generate a unique key for a factory function
+     */
+    _getFactoryKey(factory) {
+        // Use function name or create a symbol
+        return factory.name || `factory_${factory.toString().slice(0, 50)}`;
+    }
+}
+
+/**
+ * Option Renderer
+ *
+ * Unified renderer that handles both lightweight (label/value) and
+ * custom component rendering with consistent performance characteristics.
+ */
+/**
+ * Manages rendering of both lightweight and custom component options
+ */
+class OptionRenderer {
+    constructor(config) {
+        this._mountedElements = new Map();
+        this._config = config;
+        this._pool = new CustomOptionPool(config.maxPoolSize);
+    }
+    /**
+     * Render an option (lightweight or custom component)
+     *
+     * @param item - The data item
+     * @param index - The option index
+     * @param isSelected - Whether the option is selected
+     * @param isFocused - Whether the option has keyboard focus
+     * @param uniqueId - Unique ID for the select instance
+     * @returns The rendered DOM element
+     */
+    render(item, index, isSelected, isFocused, uniqueId) {
+        const extendedItem = item;
+        const value = this._config.getValue(item);
+        const label = this._config.getLabel(item);
+        const isDisabled = this._config.getDisabled ? this._config.getDisabled(item) : false;
+        // Determine if this is a custom component or lightweight option
+        const hasCustomComponent = extendedItem.optionComponent && typeof extendedItem.optionComponent === 'function';
+        if (hasCustomComponent) {
+            return this._renderCustomComponent(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId, extendedItem.optionComponent);
+        }
+        else {
+            return this._renderLightweightOption(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId);
+        }
+    }
+    /**
+     * Update selection state for an option
+     *
+     * @param index - The option index
+     * @param selected - Whether it's selected
+     */
+    updateSelection(index, selected) {
+        const element = this._mountedElements.get(index);
+        if (!element)
+            return;
+        // Check if this is a custom component
+        const component = this._pool.getComponent(index);
+        if (component) {
+            component.updateSelected(selected);
+        }
+        else {
+            // Update lightweight option
+            if (selected) {
+                element.classList.add('selected');
+                element.setAttribute('aria-selected', 'true');
+            }
+            else {
+                element.classList.remove('selected');
+                element.setAttribute('aria-selected', 'false');
+            }
+        }
+    }
+    /**
+     * Update focused state for an option
+     *
+     * @param index - The option index
+     * @param focused - Whether it has keyboard focus
+     */
+    updateFocused(index, focused) {
+        const element = this._mountedElements.get(index);
+        if (!element)
+            return;
+        // Check if this is a custom component
+        const component = this._pool.getComponent(index);
+        if (component) {
+            if (component.updateFocused) {
+                component.updateFocused(focused);
+            }
+            // Also update the element's focused class for styling
+            element.classList.toggle('focused', focused);
+        }
+        else {
+            // Update lightweight option
+            element.classList.toggle('focused', focused);
+        }
+    }
+    /**
+     * Unmount and cleanup an option
+     *
+     * @param index - The option index
+     */
+    unmount(index) {
+        // Release custom component if exists
+        this._pool.release(index);
+        // Remove from mounted elements
+        this._mountedElements.delete(index);
+    }
+    /**
+     * Unmount all options
+     */
+    unmountAll() {
+        this._pool.releaseAll();
+        this._mountedElements.clear();
+    }
+    /**
+     * Get pool statistics
+     */
+    getStats() {
+        return this._pool.getStats();
+    }
+    /**
+     * Render a lightweight option (traditional label/value)
+     */
+    _renderLightweightOption(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId) {
+        const option = document.createElement('div');
+        option.className = 'option';
+        if (isSelected)
+            option.classList.add('selected');
+        if (isFocused)
+            option.classList.add('focused');
+        if (isDisabled)
+            option.classList.add('disabled');
+        option.id = `${uniqueId}-option-${index}`;
+        option.textContent = label;
+        option.dataset.value = String(value);
+        option.dataset.index = String(index);
+        option.dataset.mode = 'lightweight';
+        option.setAttribute('role', 'option');
+        option.setAttribute('aria-selected', String(isSelected));
+        if (isDisabled) {
+            option.setAttribute('aria-disabled', 'true');
+        }
+        // Click handler
+        if (!isDisabled) {
+            option.addEventListener('click', () => {
+                this._config.onSelect(index);
+            });
+        }
+        this._mountedElements.set(index, option);
+        console.log(`[OptionRenderer] Rendered lightweight option ${index}: ${label}`);
+        return option;
+    }
+    /**
+     * Render a custom component option
+     */
+    _renderCustomComponent(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId, factory) {
+        // Create wrapper container for the custom component
+        const wrapper = document.createElement('div');
+        wrapper.className = 'option option-custom';
+        if (isSelected)
+            wrapper.classList.add('selected');
+        if (isFocused)
+            wrapper.classList.add('focused');
+        if (isDisabled)
+            wrapper.classList.add('disabled');
+        wrapper.id = `${uniqueId}-option-${index}`;
+        wrapper.dataset.value = String(value);
+        wrapper.dataset.index = String(index);
+        wrapper.dataset.mode = 'component';
+        wrapper.setAttribute('role', 'option');
+        wrapper.setAttribute('aria-selected', String(isSelected));
+        wrapper.setAttribute('aria-label', label); // Accessibility fallback
+        if (isDisabled) {
+            wrapper.setAttribute('aria-disabled', 'true');
+        }
+        // Create context for the custom component
+        const context = {
+            item,
+            index,
+            value,
+            label,
+            isSelected,
+            isFocused,
+            isDisabled,
+            onSelect: (idx) => {
+                if (!isDisabled) {
+                    this._config.onSelect(idx);
+                }
+            },
+            onCustomEvent: (eventName, data) => {
+                if (this._config.onCustomEvent) {
+                    this._config.onCustomEvent(index, eventName, data);
+                }
+            }
+        };
+        // Acquire component from pool and mount it
+        try {
+            const component = this._pool.acquire(factory, item, index, context, wrapper);
+            // Get the component's root element and attach click handler to wrapper
+            const componentElement = component.getElement();
+            if (!isDisabled) {
+                // Use event delegation on the wrapper
+                wrapper.addEventListener('click', (e) => {
+                    // Only trigger if clicking within the component
+                    if (wrapper.contains(e.target)) {
+                        this._config.onSelect(index);
+                    }
+                });
+            }
+            console.log(`[OptionRenderer] Rendered custom component option ${index}: ${label}`);
+        }
+        catch (error) {
+            console.error(`[OptionRenderer] Failed to render custom component at index ${index}:`, error);
+            // Fallback to lightweight rendering on error
+            wrapper.innerHTML = '';
+            wrapper.textContent = label;
+            wrapper.classList.add('component-error');
+            if (this._config.onError) {
+                this._config.onError(index, error);
+            }
+        }
+        this._mountedElements.set(index, wrapper);
+        return wrapper;
+    }
+}
+
 /**
  * Enhanced Select Component
  * Implements all advanced features: infinite scroll, load more, busy state,
@@ -1006,6 +1404,9 @@ class EnhancedSelect extends HTMLElement {
         // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
         this._initializeStyles();
         console.log('[EnhancedSelect] Styles initialized');
+        // Initialize option renderer
+        this._initializeOptionRenderer();
+        console.log('[EnhancedSelect] Option renderer initialized');
         this._assembleDOM();
         console.log('[EnhancedSelect] DOM assembled');
         this._attachEventListeners();
@@ -1042,6 +1443,11 @@ class EnhancedSelect extends HTMLElement {
             clearTimeout(this._typeTimeout);
         if (this._searchTimeout)
             clearTimeout(this._searchTimeout);
+        // Cleanup option renderer
+        if (this._optionRenderer) {
+            this._optionRenderer.unmountAll();
+            console.log('[EnhancedSelect] Option renderer cleaned up');
+        }
         // Cleanup arrow click listener
         if (this._boundArrowClick && this._arrowContainer) {
             this._arrowContainer.removeEventListener('click', this._boundArrowClick);
@@ -1581,6 +1987,40 @@ class EnhancedSelect extends HTMLElement {
             }, { threshold: 0.1 });
         }
     }
+    _initializeOptionRenderer() {
+        const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
+        const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
+        const getDisabled = (item) => item?.disabled ?? false;
+        const rendererConfig = {
+            enableRecycling: true,
+            maxPoolSize: 100,
+            getValue,
+            getLabel,
+            getDisabled,
+            onSelect: (index) => {
+                this._selectOption(index);
+            },
+            onCustomEvent: (index, eventName, data) => {
+                console.log(`[EnhancedSelect] Custom event from option ${index}: ${eventName}`, data);
+                // Emit as a generic event since these aren't in the standard event map
+                this.dispatchEvent(new CustomEvent('option:custom-event', {
+                    detail: { index, eventName, data },
+                    bubbles: true,
+                    composed: true
+                }));
+            },
+            onError: (index, error) => {
+                console.error(`[EnhancedSelect] Error in option ${index}:`, error);
+                this.dispatchEvent(new CustomEvent('option:mount-error', {
+                    detail: { index, error },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+        };
+        this._optionRenderer = new OptionRenderer(rendererConfig);
+        console.log('[EnhancedSelect] Option renderer initialized with config:', rendererConfig);
+    }
     async _loadInitialSelectedItems() {
         if (!this._config.serverSide.fetchSelectedItems || !this._config.serverSide.initialSelectedValues) {
             return;
@@ -2301,6 +2741,11 @@ class EnhancedSelect extends HTMLElement {
         if (this._loadMoreTrigger && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this._loadMoreTrigger);
         }
+        // Cleanup all rendered options (including custom components)
+        if (this._optionRenderer) {
+            this._optionRenderer.unmountAll();
+            console.log('[EnhancedSelect] Unmounted all option components');
+        }
         // Clear options container
         console.log('[EnhancedSelect] Clearing options container, previous children:', this._optionsContainer.children.length);
         this._optionsContainer.innerHTML = '';
@@ -2417,28 +2862,23 @@ class EnhancedSelect extends HTMLElement {
         console.log('[EnhancedSelect] _renderOptions complete, optionsContainer children:', this._optionsContainer.children.length);
     }
     _renderSingleOption(item, index, getValue, getLabel) {
-        const option = document.createElement('div');
-        option.className = 'option';
-        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
-        // Check if selected using selectedItems map
-        const isSelected = this._state.selectedIndices.has(index);
-        if (isSelected) {
-            option.classList.add('selected');
-            option.setAttribute('aria-selected', 'true');
-        }
-        else {
-            option.setAttribute('aria-selected', 'false');
+        if (!this._optionRenderer) {
+            console.error('[EnhancedSelect] Option renderer not initialized');
+            return;
         }
-        option.addEventListener('click', () => {
-            this._selectOption(index);
+        // Check if selected
+        const isSelected = this._state.selectedIndices.has(index);
+        const isFocused = this._state.activeIndex === index;
+        console.log('[EnhancedSelect] Rendering option', index, ':', {
+            value: getValue(item),
+            label: getLabel(item),
+            isSelected,
+            isFocused,
+            hasCustomComponent: !!item.optionComponent
         });
-        this._optionsContainer.appendChild(option);
+        // Use the OptionRenderer to render both lightweight and custom component options
+        const optionElement = this._optionRenderer.render(item, index, isSelected, isFocused, this._uniqueId);
+        this._optionsContainer.appendChild(optionElement);
         console.log('[EnhancedSelect] Option', index, 'appended to optionsContainer');
     }
     _addLoadMoreTrigger() {
@@ -2476,920 +2916,6 @@ if (!customElements.get('enhanced-select')) {
     customElements.define('enhanced-select', EnhancedSelect);
 }
 
-/**
- * Angular-Optimized Enhanced Select Component
- *
- * This is a specialized variant that uses light DOM instead of shadow DOM
- * to ensure perfect compatibility with Angular's rendering pipeline and
- * view encapsulation system.
- *
- * Key differences from standard EnhancedSelect:
- * - Uses light DOM with scoped CSS classes
- * - Integrates seamlessly with Angular's change detection
- * - Maintains all core features (virtualization, accessibility, performance)
- * - Uses unique class prefixes to avoid style conflicts
- *
- * @performance Optimized for Angular's zone.js and rendering cycle
- * @accessibility Full WCAG 2.1 AAA compliance maintained
- */
-/**
- * Angular-Enhanced Select Web Component
- * Uses light DOM for Angular compatibility
- */
-class AngularEnhancedSelect extends HTMLElement {
-    constructor() {
-        super();
-        this._pageCache = {};
-        this._typeBuffer = '';
-        this._hasError = false;
-        this._errorMessage = '';
-        this._boundArrowClick = null;
-        this._isReady = false;
-        // Unique class prefix to avoid conflicts
-        this.PREFIX = 'smilodon-ang-';
-        console.log('[AngularEnhancedSelect] Constructor called');
-        this._uniqueId = `angular-select-${Math.random().toString(36).substr(2, 9)}`;
-        // Merge global config
-        this._config = selectConfig.getConfig();
-        // Initialize state
-        this._state = {
-            isOpen: false,
-            isBusy: false,
-            isSearching: false,
-            currentPage: this._config.infiniteScroll.initialPage || 1,
-            totalPages: 1,
-            selectedIndices: new Set(),
-            selectedItems: new Map(),
-            activeIndex: -1,
-            searchQuery: '',
-            loadedItems: [],
-            groupedItems: [],
-            preserveScrollPosition: false,
-            lastScrollPosition: 0,
-            lastNotifiedQuery: null,
-            lastNotifiedResultCount: 0,
-            isExpanded: false,
-        };
-        // Create DOM structure in light DOM
-        this._initializeStyles();
-        this._container = this._createContainer();
-        this._inputContainer = this._createInputContainer();
-        this._input = this._createInput();
-        this._arrowContainer = this._createArrowContainer();
-        this._dropdown = this._createDropdown();
-        this._optionsContainer = this._createOptionsContainer();
-        this._liveRegion = this._createLiveRegion();
-        this._assembleDOM();
-        this._attachEventListeners();
-        this._initializeObservers();
-    }
-    connectedCallback() {
-        console.log('[AngularEnhancedSelect] connectedCallback called');
-        // Ensure host has proper layout
-        if (!this.style.display) {
-            this.style.display = 'block';
-        }
-        if (!this.style.position) {
-            this.style.position = 'relative';
-        }
-        // Load initial data if server-side is enabled
-        if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
-            this._loadInitialSelectedItems();
-        }
-        // Mark element as ready
-        this._isReady = true;
-        console.log('[AngularEnhancedSelect] Element is now ready');
-    }
-    disconnectedCallback() {
-        // Cleanup observers
-        this._resizeObserver?.disconnect();
-        this._intersectionObserver?.disconnect();
-        if (this._busyTimeout)
-            clearTimeout(this._busyTimeout);
-        if (this._typeTimeout)
-            clearTimeout(this._typeTimeout);
-        if (this._searchTimeout)
-            clearTimeout(this._searchTimeout);
-        // Cleanup arrow click listener
-        if (this._boundArrowClick && this._arrowContainer) {
-            this._arrowContainer.removeEventListener('click', this._boundArrowClick);
-        }
-        // Remove style element
-        if (this._styleElement && this._styleElement.parentNode) {
-            this._styleElement.parentNode.removeChild(this._styleElement);
-        }
-    }
-    _initializeStyles() {
-        // Check if styles already exist for this component type
-        const existingStyle = document.head.querySelector('style[data-component="angular-enhanced-select-shared"]');
-        if (existingStyle) {
-            // Styles already injected, reuse the existing one
-            this._styleElement = existingStyle;
-            return;
-        }
-        // Create scoped styles for this component type (shared across all instances)
-        this._styleElement = document.createElement('style');
-        this._styleElement.setAttribute('data-component', 'angular-enhanced-select-shared');
-        const p = this.PREFIX; // shorthand
-        this._styleElement.textContent = `
-      /* Host styles - applied to <angular-enhanced-select> */
-      angular-enhanced-select {
-        display: block;
-        position: relative;
-        width: 100%;
-        min-height: 44px;
-        box-sizing: border-box;
-      }
-      
-      /* Container */
-      .${p}container {
-        position: relative;
-        width: 100%;
-        min-height: 44px;
-        box-sizing: border-box;
-      }
-      
-      /* Input Container */
-      .${p}input-container {
-        position: relative;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 6px;
-        padding: 6px 52px 6px 8px;
-        min-height: 44px;
-        background: white;
-        border: 1px solid #d1d5db;
-        border-radius: 6px;
-        box-sizing: border-box;
-        transition: all 0.2s ease;
-      }
-      
-      .${p}input-container:focus-within {
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-      }
-      
-      /* Gradient separator before arrow */
-      .${p}input-container::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 40px;
-        transform: translateY(-50%);
-        width: 1px;
-        height: 60%;
-        background: 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;
-      }
-      
-      /* Dropdown Arrow Container */
-      .${p}arrow-container {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-        border-radius: 0 4px 4px 0;
-        z-index: 2;
-      }
-      
-      .${p}arrow-container:hover {
-        background-color: rgba(102, 126, 234, 0.08);
-      }
-      
-      .${p}arrow {
-        width: 16px;
-        height: 16px;
-        color: #667eea;
-        transition: transform 0.2s ease, color 0.2s ease;
-        transform: translateY(0);
-      }
-      
-      .${p}arrow-container:hover .${p}arrow {
-        color: #667eea;
-      }
-      
-      .${p}arrow.${p}open {
-        transform: rotate(180deg);
-      }
-      
-      /* Input */
-      .${p}input {
-        flex: 1;
-        min-width: 120px;
-        padding: 4px;
-        border: none;
-        font-size: 14px;
-        line-height: 1.5;
-        color: #1f2937;
-        background: transparent;
-        box-sizing: border-box;
-        outline: none;
-      }
-      
-      .${p}input::placeholder {
-        color: #9ca3af;
-      }
-      
-      /* Selection Badges */
-      .${p}badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 8px;
-        margin: 2px;
-        background: #667eea;
-        color: white;
-        border-radius: 4px;
-        font-size: 13px;
-        line-height: 1;
-      }
-      
-      .${p}badge-remove {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 16px;
-        height: 16px;
-        padding: 0;
-        margin-left: 4px;
-        background: rgba(255, 255, 255, 0.3);
-        border: none;
-        border-radius: 50%;
-        color: white;
-        font-size: 16px;
-        line-height: 1;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-      
-      .${p}badge-remove:hover {
-        background: rgba(255, 255, 255, 0.5);
-      }
-      
-      /* Dropdown */
-      .${p}dropdown {
-        position: absolute;
-        scroll-behavior: smooth;
-        top: 100%;
-        left: 0;
-        right: 0;
-        margin-top: 4px;
-        max-height: 300px;
-        overflow: hidden;
-        background: white;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        z-index: 1000;
-        box-sizing: border-box;
-      }
-      
-      .${p}dropdown[style*="display: none"] {
-        display: none !important;
-      }
-      
-      /* Options Container */
-      .${p}options-container {
-        position: relative;
-        max-height: 300px;
-        overflow: auto;
-        transition: opacity 0.2s ease-in-out;
-      }
-
-      /* Option */
-      .${p}option {
-        padding: 8px 12px;
-        cursor: pointer;
-        color: inherit;
-        transition: background-color 0.15s ease;
-        user-select: none;
-      }
-
-      .${p}option:hover {
-        background-color: #f3f4f6;
-      }
-
-      .${p}option.${p}selected {
-        background-color: #e0e7ff;
-        color: #4338ca;
-        font-weight: 500;
-      }
-
-      .${p}option.${p}active {
-        background-color: #f3f4f6;
-      }
-      
-      /* Load More */
-      .${p}load-more-container {
-        padding: 12px;
-        text-align: center;
-        border-top: 1px solid #e0e0e0;
-      }
-      
-      .${p}load-more-button {
-        padding: 8px 16px;
-        border: 1px solid #1976d2;
-        background: white;
-        color: #1976d2;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.2s ease;
-      }
-      
-      .${p}load-more-button:hover {
-        background: #1976d2;
-        color: white;
-      }
-      
-      .${p}load-more-button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      
-      /* Busy State */
-      .${p}busy-bucket {
-        padding: 16px;
-        text-align: center;
-        color: #666;
-      }
-      
-      .${p}spinner {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border: 2px solid #ccc;
-        border-top-color: #1976d2;
-        border-radius: 50%;
-        animation: ${p}spin 0.6s linear infinite;
-      }
-      
-      @keyframes ${p}spin {
-        to { transform: rotate(360deg); }
-      }
-      
-      /* Empty State */
-      .${p}empty-state {
-        padding: 24px;
-        text-align: center;
-        color: #999;
-      }
-      
-      /* Searching State */
-      .${p}searching-state {
-        padding: 24px;
-        text-align: center;
-        color: #667eea;
-        font-style: italic;
-        animation: ${p}pulse 1.5s ease-in-out infinite;
-      }
-      
-      @keyframes ${p}pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
-      }
-      
-      /* Error states */
-      .${p}input[aria-invalid="true"] {
-        border-color: #dc2626;
-      }
-      
-      .${p}input[aria-invalid="true"]:focus {
-        border-color: #dc2626;
-        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
-        outline-color: #dc2626;
-      }
-      
-      /* Live Region (Screen reader only) */
-      .${p}live-region {
-        position: absolute;
-        left: -10000px;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-      }
-      
-      /* Accessibility: Reduced motion */
-      @media (prefers-reduced-motion: reduce) {
-        .${p}arrow,
-        .${p}badge-remove,
-        .${p}option,
-        .${p}dropdown {
-          animation-duration: 0.01ms !important;
-          animation-iteration-count: 1 !important;
-          transition-duration: 0.01ms !important;
-        }
-      }
-      
-      /* Touch targets (WCAG 2.5.5) */
-      .${p}load-more-button,
-      .${p}option {
-        min-height: 44px;
-      }
-    `;
-        // Safely append to document head (check if document is ready and not already appended)
-        if (document.head && !this._styleElement.parentNode) {
-            try {
-                document.head.appendChild(this._styleElement);
-            }
-            catch (e) {
-                console.warn('[AngularEnhancedSelect] Could not inject styles:', e);
-                // Fallback: inject after a delay
-                setTimeout(() => {
-                    try {
-                        if (this._styleElement && !this._styleElement.parentNode) {
-                            document.head.appendChild(this._styleElement);
-                        }
-                    }
-                    catch (err) {
-                        console.error('[AngularEnhancedSelect] Style injection failed:', err);
-                    }
-                }, 0);
-            }
-        }
-    }
-    _createContainer() {
-        const container = document.createElement('div');
-        container.className = `${this.PREFIX}container`;
-        return container;
-    }
-    _createInputContainer() {
-        const container = document.createElement('div');
-        container.className = `${this.PREFIX}input-container`;
-        return container;
-    }
-    _createInput() {
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.className = `${this.PREFIX}input`;
-        input.placeholder = this.getAttribute('placeholder') || 'Select an option...';
-        input.setAttribute('readonly', '');
-        input.setAttribute('role', 'combobox');
-        input.setAttribute('aria-expanded', 'false');
-        input.setAttribute('aria-haspopup', 'listbox');
-        input.setAttribute('aria-autocomplete', 'none');
-        input.setAttribute('aria-controls', `${this._uniqueId}-listbox`);
-        input.setAttribute('aria-owns', `${this._uniqueId}-listbox`);
-        input.tabIndex = 0;
-        return input;
-    }
-    _createArrowContainer() {
-        const container = document.createElement('div');
-        container.className = `${this.PREFIX}arrow-container`;
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', `${this.PREFIX}arrow`);
-        svg.setAttribute('width', '16');
-        svg.setAttribute('height', '16');
-        svg.setAttribute('viewBox', '0 0 16 16');
-        svg.setAttribute('fill', 'none');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M4 6l4 4 4-4');
-        path.setAttribute('stroke', 'currentColor');
-        path.setAttribute('stroke-width', '2');
-        path.setAttribute('stroke-linecap', 'round');
-        path.setAttribute('stroke-linejoin', 'round');
-        svg.appendChild(path);
-        container.appendChild(svg);
-        return container;
-    }
-    _createDropdown() {
-        const dropdown = document.createElement('div');
-        dropdown.id = `${this._uniqueId}-listbox`;
-        dropdown.className = `${this.PREFIX}dropdown`;
-        dropdown.style.display = 'none';
-        dropdown.setAttribute('role', 'listbox');
-        return dropdown;
-    }
-    _createOptionsContainer() {
-        const container = document.createElement('div');
-        container.className = `${this.PREFIX}options-container`;
-        return container;
-    }
-    _createLiveRegion() {
-        const region = document.createElement('div');
-        region.className = `${this.PREFIX}live-region`;
-        region.setAttribute('role', 'status');
-        region.setAttribute('aria-live', 'polite');
-        region.setAttribute('aria-atomic', 'true');
-        return region;
-    }
-    _assembleDOM() {
-        // Assemble in light DOM
-        this._inputContainer.appendChild(this._input);
-        this._inputContainer.appendChild(this._arrowContainer);
-        this._container.appendChild(this._inputContainer);
-        this._dropdown.appendChild(this._optionsContainer);
-        this._container.appendChild(this._dropdown);
-        this._container.appendChild(this._liveRegion);
-        this.appendChild(this._container);
-    }
-    _attachEventListeners() {
-        // Arrow click handler
-        if (this._arrowContainer) {
-            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();
-                }
-                if (!wasOpen && this._state.isOpen && this._state.selectedIndices.size > 0) {
-                    setTimeout(() => this._scrollToSelected(), 50);
-                }
-            };
-            this._arrowContainer.addEventListener('click', this._boundArrowClick);
-        }
-        // Input focus handler
-        this._input.addEventListener('focus', () => {
-            if (!this._state.isOpen) {
-                this._state.isOpen = true;
-                this._updateDropdownVisibility();
-                this._updateArrowRotation();
-                if (this._config.callbacks.onOpen) {
-                    this._config.callbacks.onOpen();
-                }
-            }
-        });
-        // Input keyboard handler
-        this._input.addEventListener('keydown', (e) => this._handleKeydown(e));
-        // Click outside to close
-        document.addEventListener('click', (e) => {
-            if (!this.contains(e.target) && this._state.isOpen) {
-                this._state.isOpen = false;
-                this._updateDropdownVisibility();
-                this._updateArrowRotation();
-                if (this._config.callbacks.onClose) {
-                    this._config.callbacks.onClose();
-                }
-            }
-        });
-        // Search handler
-        if (this.hasAttribute('searchable')) {
-            this._input.removeAttribute('readonly');
-            this._input.addEventListener('input', (e) => {
-                const query = e.target.value;
-                this._handleSearch(query);
-            });
-        }
-    }
-    _initializeObservers() {
-        // Resize observer for dropdown positioning
-        if (typeof ResizeObserver !== 'undefined') {
-            this._resizeObserver = new ResizeObserver(() => {
-                if (this._state.isOpen) {
-                    this._updateDropdownPosition();
-                }
-            });
-            this._resizeObserver.observe(this);
-        }
-    }
-    _updateDropdownVisibility() {
-        if (this._state.isOpen) {
-            this._dropdown.style.display = 'block';
-            this._input.setAttribute('aria-expanded', 'true');
-            this._updateDropdownPosition();
-        }
-        else {
-            this._dropdown.style.display = 'none';
-            this._input.setAttribute('aria-expanded', 'false');
-        }
-    }
-    _updateDropdownPosition() {
-        // Ensure dropdown is positioned correctly relative to input
-        const rect = this._inputContainer.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const spaceBelow = viewportHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        // Auto placement
-        if (spaceBelow < 300 && spaceAbove > spaceBelow) {
-            // Open upward
-            this._dropdown.style.top = 'auto';
-            this._dropdown.style.bottom = '100%';
-            this._dropdown.style.marginTop = '0';
-            this._dropdown.style.marginBottom = '4px';
-        }
-        else {
-            // Open downward (default)
-            this._dropdown.style.top = '100%';
-            this._dropdown.style.bottom = 'auto';
-            this._dropdown.style.marginTop = '4px';
-            this._dropdown.style.marginBottom = '0';
-        }
-    }
-    _updateArrowRotation() {
-        const arrow = this._arrowContainer?.querySelector(`.${this.PREFIX}arrow`);
-        if (arrow) {
-            if (this._state.isOpen) {
-                arrow.classList.add(`${this.PREFIX}open`);
-            }
-            else {
-                arrow.classList.remove(`${this.PREFIX}open`);
-            }
-        }
-    }
-    _handleKeydown(e) {
-        // Implement keyboard navigation
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!this._state.isOpen) {
-                    this._state.isOpen = true;
-                    this._updateDropdownVisibility();
-                    this._updateArrowRotation();
-                }
-                else {
-                    this._moveActive(1);
-                }
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                if (this._state.isOpen) {
-                    this._moveActive(-1);
-                }
-                break;
-            case 'Enter':
-                e.preventDefault();
-                if (this._state.isOpen && this._state.activeIndex >= 0) {
-                    this._selectByIndex(this._state.activeIndex);
-                }
-                else {
-                    this._state.isOpen = true;
-                    this._updateDropdownVisibility();
-                    this._updateArrowRotation();
-                }
-                break;
-            case 'Escape':
-                e.preventDefault();
-                if (this._state.isOpen) {
-                    this._state.isOpen = false;
-                    this._updateDropdownVisibility();
-                    this._updateArrowRotation();
-                }
-                break;
-            case 'Tab':
-                if (this._state.isOpen) {
-                    this._state.isOpen = false;
-                    this._updateDropdownVisibility();
-                    this._updateArrowRotation();
-                }
-                break;
-        }
-    }
-    _moveActive(direction) {
-        const options = this._optionsContainer.querySelectorAll(`.${this.PREFIX}option`);
-        if (options.length === 0)
-            return;
-        let newIndex = this._state.activeIndex + direction;
-        if (newIndex < 0)
-            newIndex = 0;
-        if (newIndex >= options.length)
-            newIndex = options.length - 1;
-        this._state.activeIndex = newIndex;
-        // Update visual active state
-        options.forEach((opt, idx) => {
-            if (idx === newIndex) {
-                opt.classList.add(`${this.PREFIX}active`);
-                opt.scrollIntoView({ block: 'nearest' });
-            }
-            else {
-                opt.classList.remove(`${this.PREFIX}active`);
-            }
-        });
-    }
-    _selectByIndex(index) {
-        const item = this._state.loadedItems[index];
-        if (!item)
-            return;
-        const isMultiple = this.hasAttribute('multiple');
-        if (isMultiple) {
-            // Toggle selection
-            if (this._state.selectedIndices.has(index)) {
-                this._state.selectedIndices.delete(index);
-                this._state.selectedItems.delete(index);
-            }
-            else {
-                this._state.selectedIndices.add(index);
-                this._state.selectedItems.set(index, item);
-            }
-        }
-        else {
-            // Single selection
-            this._state.selectedIndices.clear();
-            this._state.selectedItems.clear();
-            this._state.selectedIndices.add(index);
-            this._state.selectedItems.set(index, item);
-            // Close dropdown
-            this._state.isOpen = false;
-            this._updateDropdownVisibility();
-            this._updateArrowRotation();
-        }
-        this._updateInputDisplay();
-        this._renderOptions();
-        this._emitChangeEvent();
-    }
-    _updateInputDisplay() {
-        const selectedItems = Array.from(this._state.selectedItems.values());
-        const isMultiple = this.hasAttribute('multiple');
-        if (isMultiple) {
-            // Clear input, show badges
-            this._input.value = '';
-            // Remove existing badges
-            this._inputContainer.querySelectorAll(`.${this.PREFIX}badge`).forEach(badge => badge.remove());
-            // Add new badges
-            selectedItems.forEach((item, idx) => {
-                const badge = document.createElement('span');
-                badge.className = `${this.PREFIX}badge`;
-                badge.textContent = item.label;
-                const removeBtn = document.createElement('button');
-                removeBtn.className = `${this.PREFIX}badge-remove`;
-                removeBtn.textContent = '×';
-                removeBtn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const itemIndex = Array.from(this._state.selectedItems.keys())[idx];
-                    this._state.selectedIndices.delete(itemIndex);
-                    this._state.selectedItems.delete(itemIndex);
-                    this._updateInputDisplay();
-                    this._renderOptions();
-                    this._emitChangeEvent();
-                });
-                badge.appendChild(removeBtn);
-                this._inputContainer.insertBefore(badge, this._input);
-            });
-        }
-        else {
-            // Single selection - show label in input
-            if (selectedItems.length > 0) {
-                this._input.value = selectedItems[0].label;
-            }
-            else {
-                this._input.value = '';
-            }
-        }
-    }
-    _renderOptions() {
-        // Clear existing options
-        this._optionsContainer.innerHTML = '';
-        const items = this._state.loadedItems;
-        if (items.length === 0) {
-            const emptyDiv = document.createElement('div');
-            emptyDiv.className = `${this.PREFIX}empty-state`;
-            emptyDiv.textContent = 'No options available';
-            this._optionsContainer.appendChild(emptyDiv);
-            return;
-        }
-        // Render options
-        items.forEach((item, index) => {
-            const optionDiv = document.createElement('div');
-            optionDiv.className = `${this.PREFIX}option`;
-            optionDiv.textContent = item.label;
-            optionDiv.setAttribute('role', 'option');
-            optionDiv.setAttribute('data-index', String(index));
-            if (this._state.selectedIndices.has(index)) {
-                optionDiv.classList.add(`${this.PREFIX}selected`);
-                optionDiv.setAttribute('aria-selected', 'true');
-            }
-            if (item.disabled) {
-                optionDiv.style.opacity = '0.5';
-                optionDiv.style.cursor = 'not-allowed';
-            }
-            else {
-                optionDiv.addEventListener('click', () => {
-                    this._selectByIndex(index);
-                });
-            }
-            this._optionsContainer.appendChild(optionDiv);
-        });
-    }
-    _handleSearch(query) {
-        this._state.searchQuery = query;
-        // Filter items based on search
-        const allItems = this._state.loadedItems;
-        const filtered = allItems.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
-        // Temporarily replace loaded items with filtered
-        this._state.loadedItems;
-        this._state.loadedItems = filtered;
-        this._renderOptions();
-        // Emit search event
-        this.dispatchEvent(new CustomEvent('search', {
-            detail: { query },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _emitChangeEvent() {
-        const selectedItems = Array.from(this._state.selectedItems.values());
-        const selectedValues = selectedItems.map(item => item.value);
-        const selectedIndices = Array.from(this._state.selectedIndices);
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: { selectedItems, selectedValues, selectedIndices },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _scrollToSelected() {
-        const firstSelected = this._optionsContainer.querySelector(`.${this.PREFIX}selected`);
-        if (firstSelected) {
-            firstSelected.scrollIntoView({ block: 'nearest' });
-        }
-    }
-    _loadInitialSelectedItems() {
-        // Placeholder for server-side data loading
-    }
-    _announce(message) {
-        if (this._liveRegion) {
-            this._liveRegion.textContent = message;
-            setTimeout(() => {
-                if (this._liveRegion)
-                    this._liveRegion.textContent = '';
-            }, 1000);
-        }
-    }
-    // Public API methods
-    isReady() {
-        return this._isReady;
-    }
-    setItems(items) {
-        this._state.loadedItems = items;
-        this._renderOptions();
-    }
-    setGroupedItems(groups) {
-        this._state.groupedItems = groups;
-        // Flatten for now
-        const items = [];
-        groups.forEach(group => {
-            if (group.items) {
-                items.push(...group.items);
-            }
-        });
-        this.setItems(items);
-    }
-    setSelectedValues(values) {
-        this._state.selectedIndices.clear();
-        this._state.selectedItems.clear();
-        values.forEach(value => {
-            const index = this._state.loadedItems.findIndex(item => item.value === value);
-            if (index >= 0) {
-                this._state.selectedIndices.add(index);
-                this._state.selectedItems.set(index, this._state.loadedItems[index]);
-            }
-        });
-        this._updateInputDisplay();
-        this._renderOptions();
-    }
-    getSelectedValues() {
-        return Array.from(this._state.selectedItems.values()).map(item => item.value);
-    }
-    updateConfig(config) {
-        this._config = { ...this._config, ...config };
-    }
-    setError(message) {
-        this._hasError = true;
-        this._errorMessage = message;
-        this._input.setAttribute('aria-invalid', 'true');
-        this._announce(`Error: ${message}`);
-    }
-    clearError() {
-        this._hasError = false;
-        this._errorMessage = '';
-        this._input.removeAttribute('aria-invalid');
-    }
-}
-// Register the custom element
-console.log('[AngularEnhancedSelect] Attempting to register custom element...');
-console.log('[AngularEnhancedSelect] customElements available:', typeof customElements !== 'undefined');
-console.log('[AngularEnhancedSelect] Already registered:', customElements?.get('angular-enhanced-select'));
-if (typeof customElements !== 'undefined' && !customElements.get('angular-enhanced-select')) {
-    customElements.define('angular-enhanced-select', AngularEnhancedSelect);
-    console.log('[AngularEnhancedSelect] Successfully registered custom element');
-}
-else if (customElements?.get('angular-enhanced-select')) {
-    console.log('[AngularEnhancedSelect] Custom element already registered');
-}
-
 /**
  * Independent Option Component
  * High cohesion, low coupling - handles its own selection state and events
@@ -4652,12 +4178,13 @@ function warnCSPViolation(feature, fallback) {
     }
 }
 
-exports.AngularEnhancedSelect = AngularEnhancedSelect;
 exports.CSPFeatures = CSPFeatures;
+exports.CustomOptionPool = CustomOptionPool;
 exports.DOMPool = DOMPool;
 exports.EnhancedSelect = EnhancedSelect;
 exports.FenwickTree = FenwickTree;
 exports.NativeSelectElement = NativeSelectElement;
+exports.OptionRenderer = OptionRenderer;
 exports.PerformanceTelemetry = PerformanceTelemetry;
 exports.SelectOption = SelectOption;
 exports.Virtualizer = Virtualizer;