@smilodon/core 1.2.1 → 1.2.2

package/dist/index.umd.js

@@ -515,913 +515,968 @@
         }
     }
 
-    class NativeSelectElement extends HTMLElement {
-        static get observedAttributes() {
-            return ['placement', 'strategy', 'portal'];
-        }
-        constructor() {
-            super();
-            this._options = {};
-            this._items = [];
-            // Multi-select & interaction state
-            this._selectedSet = new Set(); // indices
-            this._selectedItems = new Map(); // index -> item
-            this._activeIndex = -1;
-            this._multi = false;
-            this._typeBuffer = '';
-            this._shadow = this.attachShadow({ mode: 'open' });
-            this._listRoot = document.createElement('div');
-            this._listRoot.setAttribute('role', 'listbox');
-            this._listRoot.setAttribute('tabindex', '0');
-            this._shadow.appendChild(this._listRoot);
-            // Live region for screen reader announcements
-            this._liveRegion = document.createElement('div');
-            this._liveRegion.setAttribute('role', 'status');
-            this._liveRegion.setAttribute('aria-live', 'polite');
-            this._liveRegion.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;';
-            this._shadow.appendChild(this._liveRegion);
-            this._helpers = createRendererHelpers((item, index) => this._onSelect(item, index));
-            // Delegated click
-            this._listRoot.addEventListener('click', (e) => {
-                const el = e.target.closest('[data-selectable]');
-                if (!el)
-                    return;
-                const idx = Number(el.dataset.index);
-                const item = this._items[idx];
-                this._onSelect(item, idx);
-            });
-            // Keyboard navigation
-            this._listRoot.addEventListener('keydown', (e) => this._onKeydown(e));
-        }
-        connectedCallback() {
-            // Initialize ARIA roles and open event
-            this._listRoot.setAttribute('role', 'listbox');
-            this._listRoot.setAttribute('aria-label', 'Options list');
-            if (this._multi)
-                this._listRoot.setAttribute('aria-multiselectable', 'true');
-            this._emit('open', {});
+    /**
+     * 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;
         }
-        disconnectedCallback() {
-            this._emit('close', {});
-            // Cleanup: remove listeners if any were added outside constructor
-            if (this._typeTimeout)
-                window.clearTimeout(this._typeTimeout);
+        /**
+         * 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;
         }
-        attributeChangedCallback(name, _oldValue, newValue) {
-            switch (name) {
-                case 'placement':
-                    this._options.placement = (newValue ?? undefined);
-                    break;
-                case 'strategy':
-                    this._options.strategy = (newValue ?? undefined);
-                    break;
-                case 'portal':
-                    this._options.portal = newValue === 'true' ? true : newValue === 'false' ? false : undefined;
+        /**
+         * 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;
+                }
             }
         }
-        set items(items) {
-            this._items = items ?? [];
-            // initialize virtualizer with estimated height (default 48) and buffer
-            this._virtualizer = new Virtualizer(this._listRoot, this._items.length, (i) => this._items[i], { estimatedItemHeight: 48, buffer: 5 });
-            this.render();
-        }
-        get items() {
-            return this._items;
+        /**
+         * 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));
         }
-        set multi(value) {
-            this._multi = value;
-            if (value) {
-                this._listRoot.setAttribute('aria-multiselectable', 'true');
-            }
-            else {
-                this._listRoot.removeAttribute('aria-multiselectable');
+        /**
+         * 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);
             }
         }
-        get multi() {
-            return this._multi;
-        }
-        get selectedIndices() {
-            return Array.from(this._selectedSet);
+        /**
+         * 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 selectedItems() {
-            return Array.from(this._selectedItems.values());
+        /**
+         * Get active component at index
+         *
+         * @param index - The option index
+         * @returns The component instance or undefined
+         */
+        getComponent(index) {
+            return this._activeComponents.get(index);
         }
-        set optionTemplate(template) {
-            this._options.optionTemplate = template;
-            this.render();
+        /**
+         * Clear the entire pool
+         */
+        clear() {
+            this.releaseAll();
+            this._pool.clear();
+            console.log('[CustomOptionPool] Pool cleared');
         }
-        set optionRenderer(renderer) {
-            this._options.optionRenderer = renderer;
-            this.render();
+        /**
+         * 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
+            };
         }
         /**
-         * Public API: setItems() method for compatibility with EnhancedSelect
-         * Accepts an array of items which can be:
-         * - Simple primitives (string, number)
-         * - Objects with {label, value} structure
-         * - Objects with {label, value, optionComponent} for custom rendering (v1.2.0+)
+         * Find an available component in the pool
          */
-        setItems(items) {
-            this.items = items ?? [];
+        _findAvailableComponent(factoryKey) {
+            const pool = this._pool.get(factoryKey);
+            if (!pool)
+                return undefined;
+            return pool.find(p => !p.inUse);
         }
         /**
-         * Public API: setValue() method to programmatically select an item
-         * For single select: clears selection and selects the item matching the value
-         * For multi-select: adds to selection if not already selected
+         * Generate a unique key for a factory function
          */
-        setValue(value) {
-            if (value === null || value === undefined || value === '') {
-                // Clear selection
-                this._selectedSet.clear();
-                this._selectedItems.clear();
-                this._activeIndex = -1;
-                this.render();
-                return;
-            }
-            // Find item by value
-            const index = this._items.findIndex(item => {
-                if (typeof item === 'object' && item !== null && 'value' in item) {
-                    return item.value === value;
-                }
-                return item === value;
-            });
-            if (index >= 0) {
-                const item = this._items[index];
-                if (!this._multi) {
-                    // Single select: clear and set
-                    this._selectedSet.clear();
-                    this._selectedItems.clear();
-                }
-                this._selectedSet.add(index);
-                this._selectedItems.set(index, item);
-                this._activeIndex = index;
-                this.render();
-            }
+        _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);
         }
         /**
-         * Public API: getValue() method to get currently selected value(s)
-         * Returns single value for single-select, array for multi-select
+         * 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
          */
-        getValue() {
-            const values = Array.from(this._selectedItems.values()).map(item => {
-                if (typeof item === 'object' && item !== null && 'value' in item) {
-                    return item.value;
-                }
-                return item;
-            });
-            return this._multi ? values : (values[0] ?? null);
-        }
-        render() {
-            const { optionTemplate, optionRenderer } = this._options;
-            const viewportHeight = this.getBoundingClientRect().height || 300;
-            const scrollTop = this.scrollTop || 0;
-            // Update aria-activedescendant
-            if (this._activeIndex >= 0) {
-                this._listRoot.setAttribute('aria-activedescendant', `option-${this._activeIndex}`);
+        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 {
-                this._listRoot.removeAttribute('aria-activedescendant');
+                return this._renderLightweightOption(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId);
             }
-            if (this._virtualizer) {
-                const { startIndex, endIndex } = this._virtualizer.computeWindow(scrollTop, viewportHeight);
-                this._virtualizer.render(startIndex, endIndex, (node, item, i) => {
-                    this._applyOptionAttrs(node, i);
-                    if (optionRenderer) {
-                        const el = optionRenderer(item, i, this._helpers);
-                        // replace node contents
-                        node.replaceChildren(el);
-                    }
-                    else if (optionTemplate) {
-                        const wrapper = document.createElement('div');
-                        wrapper.innerHTML = optionTemplate(item, i);
-                        const el = wrapper.firstElementChild;
-                        node.replaceChildren(el ?? document.createTextNode(String(item)));
-                    }
-                    else {
-                        // Handle {label, value} objects or primitives
-                        const displayText = (typeof item === 'object' && item !== null && 'label' in item)
-                            ? String(item.label)
-                            : String(item);
-                        node.textContent = displayText;
-                    }
-                });
+        }
+        /**
+         * 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);
             }
-            const frag = document.createDocumentFragment();
-            for (let i = 0; i < this._items.length; i++) {
-                const item = this._items[i];
-                if (optionRenderer) {
-                    const el = optionRenderer(item, i, this._helpers);
-                    if (!el.hasAttribute('data-selectable')) {
-                        el.setAttribute('data-selectable', '');
-                        el.setAttribute('data-index', String(i));
-                    }
-                    this._applyOptionAttrs(el, i);
-                    frag.appendChild(el);
-                }
-                else if (optionTemplate) {
-                    // Fast path: render all via DocumentFragment in one call
-                    renderTemplate(this._listRoot, this._items, optionTemplate);
-                    // Apply ARIA attrs after template render
-                    this._applyAriaToAll();
-                    return; // rendering complete
+            else {
+                // Update lightweight option
+                if (selected) {
+                    element.classList.add('selected');
+                    element.setAttribute('aria-selected', 'true');
                 }
                 else {
-                    const el = document.createElement('div');
-                    // Handle {label, value} objects or primitives
-                    const displayText = (typeof item === 'object' && item !== null && 'label' in item)
-                        ? String(item.label)
-                        : String(item);
-                    el.textContent = displayText;
-                    el.setAttribute('data-selectable', '');
-                    el.setAttribute('data-index', String(i));
-                    this._applyOptionAttrs(el, i);
-                    frag.appendChild(el);
+                    element.classList.remove('selected');
+                    element.setAttribute('aria-selected', 'false');
                 }
             }
-            this._listRoot.replaceChildren(frag);
         }
-        _applyOptionAttrs(node, index) {
-            node.setAttribute('role', 'option');
-            node.id = `option-${index}`;
-            if (this._selectedSet.has(index)) {
-                node.setAttribute('aria-selected', 'true');
+        /**
+         * 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 {
-                node.setAttribute('aria-selected', 'false');
+                // Update lightweight option
+                element.classList.toggle('focused', focused);
             }
         }
-        _applyAriaToAll() {
-            const children = Array.from(this._listRoot.children);
-            for (const child of children) {
-                const idx = Number(child.dataset.index);
-                if (Number.isFinite(idx))
-                    this._applyOptionAttrs(child, idx);
-            }
+        /**
+         * 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);
         }
-        _emit(name, detail) {
-            this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+        /**
+         * Unmount all options
+         */
+        unmountAll() {
+            this._pool.releaseAll();
+            this._mountedElements.clear();
         }
-        // Multi-select and interaction methods
-        _onSelect(item, index) {
-            if (this._multi) {
-                if (this._selectedSet.has(index)) {
-                    this._selectedSet.delete(index);
-                    this._selectedItems.delete(index);
-                }
-                else {
-                    this._selectedSet.add(index);
-                    this._selectedItems.set(index, item);
-                }
+        /**
+         * 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');
             }
-            else {
-                this._selectedSet.clear();
-                this._selectedItems.clear();
-                this._selectedSet.add(index);
-                this._selectedItems.set(index, item);
+            // Click handler
+            if (!isDisabled) {
+                option.addEventListener('click', () => {
+                    this._config.onSelect(index);
+                });
             }
-            this._activeIndex = index;
-            this.render();
-            // Emit with all required fields
-            const selected = this._selectedSet.has(index);
-            const value = item?.value ?? item;
-            const label = item?.label ?? String(item);
-            this._emit('select', {
+            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,
-                selected,
-                multi: this._multi
-            });
-            // Emit 'change' event for better React compatibility
-            this._emit('change', {
-                selectedItems: Array.from(this._selectedItems.values()),
-                selectedValues: Array.from(this._selectedItems.values()).map(i => i?.value ?? i),
-                selectedIndices: Array.from(this._selectedSet)
-            });
-            this._announce(`Selected ${label}`);
-        }
-        _onKeydown(e) {
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    this._moveActive(1);
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    this._moveActive(-1);
-                    break;
-                case 'Home':
-                    e.preventDefault();
-                    this._setActive(0);
-                    break;
-                case 'End':
-                    e.preventDefault();
-                    this._setActive(this._items.length - 1);
-                    break;
-                case 'PageDown':
-                    e.preventDefault();
-                    this._moveActive(10);
-                    break;
-                case 'PageUp':
-                    e.preventDefault();
-                    this._moveActive(-10);
-                    break;
-                case 'Enter':
-                case ' ':
-                    e.preventDefault();
-                    if (this._activeIndex >= 0) {
-                        const item = this._items[this._activeIndex];
-                        this._onSelect(item, this._activeIndex);
+                isSelected,
+                isFocused,
+                isDisabled,
+                onSelect: (idx) => {
+                    if (!isDisabled) {
+                        this._config.onSelect(idx);
                     }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    this._emit('close', {});
-                    break;
-                default:
-                    // Type-ahead buffer
-                    if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
-                        this._onType(e.key);
+                },
+                onCustomEvent: (eventName, data) => {
+                    if (this._config.onCustomEvent) {
+                        this._config.onCustomEvent(index, eventName, data);
                     }
-                    break;
+                }
+            };
+            // 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;
         }
-        _moveActive(delta) {
-            const next = Math.max(0, Math.min(this._items.length - 1, this._activeIndex + delta));
-            this._setActive(next);
+    }
+
+    class NativeSelectElement extends HTMLElement {
+        static get observedAttributes() {
+            return ['placement', 'strategy', 'portal'];
         }
-        _setActive(index) {
-            this._activeIndex = index;
-            this.render();
-            this._scrollToActive();
-            this._announce(`Navigated to ${String(this._items[index])}`);
+        constructor() {
+            super();
+            this._options = {};
+            this._items = [];
+            // Multi-select & interaction state
+            this._selectedSet = new Set(); // indices
+            this._selectedItems = new Map(); // index -> item
+            this._activeIndex = -1;
+            this._multi = false;
+            this._typeBuffer = '';
+            this._shadow = this.attachShadow({ mode: 'open' });
+            this._listRoot = document.createElement('div');
+            this._listRoot.setAttribute('role', 'listbox');
+            this._listRoot.setAttribute('tabindex', '0');
+            this._shadow.appendChild(this._listRoot);
+            // Live region for screen reader announcements
+            this._liveRegion = document.createElement('div');
+            this._liveRegion.setAttribute('role', 'status');
+            this._liveRegion.setAttribute('aria-live', 'polite');
+            this._liveRegion.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;';
+            this._shadow.appendChild(this._liveRegion);
+            this._helpers = createRendererHelpers((item, index) => this._onSelect(item, index));
+            // Delegated click
+            this._listRoot.addEventListener('click', (e) => {
+                const el = e.target.closest('[data-selectable]');
+                if (!el)
+                    return;
+                const idx = Number(el.dataset.index);
+                const item = this._items[idx];
+                this._onSelect(item, idx);
+            });
+            // Keyboard navigation
+            this._listRoot.addEventListener('keydown', (e) => this._onKeydown(e));
         }
-        _scrollToActive() {
-            const el = this._shadow.getElementById(`option-${this._activeIndex}`);
-            el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        connectedCallback() {
+            // Initialize ARIA roles and open event
+            this._listRoot.setAttribute('role', 'listbox');
+            this._listRoot.setAttribute('aria-label', 'Options list');
+            if (this._multi)
+                this._listRoot.setAttribute('aria-multiselectable', 'true');
+            this._initializeOptionRenderer();
+            this._emit('open', {});
         }
-        _onType(char) {
+        disconnectedCallback() {
+            this._emit('close', {});
+            // Cleanup unified renderer
+            if (this._unifiedRenderer) {
+                this._unifiedRenderer.unmountAll();
+            }
+            // Cleanup: remove listeners if any were added outside constructor
             if (this._typeTimeout)
                 window.clearTimeout(this._typeTimeout);
-            this._typeBuffer += char.toLowerCase();
-            this._typeTimeout = window.setTimeout(() => {
-                this._typeBuffer = '';
-            }, 400);
-            // Find first matching item
-            const match = this._items.findIndex((item) => String(item).toLowerCase().startsWith(this._typeBuffer));
-            if (match >= 0) {
-                this._setActive(match);
-            }
         }
-        _announce(msg) {
-            if (this._liveRegion) {
-                this._liveRegion.textContent = msg;
-                setTimeout(() => {
-                    if (this._liveRegion)
-                        this._liveRegion.textContent = '';
-                }, 1000);
+        _initializeOptionRenderer() {
+            const getValue = (item) => item?.value ?? item;
+            const getLabel = (item) => item?.label ?? String(item);
+            const getDisabled = (item) => item?.disabled ?? false;
+            const rendererConfig = {
+                enableRecycling: true,
+                maxPoolSize: 100,
+                getValue,
+                getLabel,
+                getDisabled,
+                onSelect: (index) => {
+                    const item = this._items[index];
+                    this._onSelect(item, index);
+                },
+                onCustomEvent: (index, eventName, data) => {
+                    // Emit custom events from option components
+                    this.dispatchEvent(new CustomEvent('option:custom-event', {
+                        detail: { index, eventName, data },
+                        bubbles: true,
+                        composed: true
+                    }));
+                },
+                onError: (index, error) => {
+                    console.error(`[NativeSelect] Error in option ${index}:`, error);
+                    this.dispatchEvent(new CustomEvent('option:mount-error', {
+                        detail: { index, error },
+                        bubbles: true,
+                        composed: true
+                    }));
+                }
+            };
+            this._unifiedRenderer = new OptionRenderer(rendererConfig);
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'placement':
+                    this._options.placement = (newValue ?? undefined);
+                    break;
+                case 'strategy':
+                    this._options.strategy = (newValue ?? undefined);
+                    break;
+                case 'portal':
+                    this._options.portal = newValue === 'true' ? true : newValue === 'false' ? false : undefined;
+                    break;
             }
         }
-        // Focus management
-        focus() {
-            this._listRoot.focus();
+        set items(items) {
+            this._items = items ?? [];
+            // initialize virtualizer with estimated height (default 48) and buffer
+            this._virtualizer = new Virtualizer(this._listRoot, this._items.length, (i) => this._items[i], { estimatedItemHeight: 48, buffer: 5 });
+            this.render();
         }
-    }
-    customElements.define('smilodon-select', NativeSelectElement);
-
-    /**
-     * Global Configuration System for Select Components
-     * Allows users to define default behaviors that can be overridden at component level
-     */
-    /**
-     * Default global configuration
-     */
-    const defaultConfig = {
-        selection: {
-            mode: 'single',
-            allowDeselect: false,
-            maxSelections: 0,
-            showRemoveButton: true,
-            closeOnSelect: true,
-        },
-        scrollToSelected: {
-            enabled: true,
-            multiSelectTarget: 'first',
-            behavior: 'smooth',
-            block: 'nearest',
-        },
-        loadMore: {
-            enabled: false,
-            itemsPerLoad: 3,
-            threshold: 100,
-            showLoader: true,
-        },
-        busyBucket: {
-            enabled: true,
-            showSpinner: true,
-            message: 'Loading...',
-            minDisplayTime: 200,
-        },
-        styles: {
-            classNames: {},
-        },
-        serverSide: {
-            enabled: false,
-            getValueFromItem: (item) => item?.value ?? item,
-            getLabelFromItem: (item) => item?.label ?? String(item),
-        },
-        infiniteScroll: {
-            enabled: false,
-            pageSize: 20,
-            initialPage: 1,
-            cachePages: true,
-            maxCachedPages: 10,
-            preloadAdjacent: true,
-            scrollRestoration: 'auto',
-        },
-        expandable: {
-            enabled: false,
-            collapsedHeight: '300px',
-            expandedHeight: '500px',
-            expandLabel: 'Show more',
-            collapseLabel: 'Show less',
-        },
-        callbacks: {},
-        enabled: true,
-        searchable: false,
-        placeholder: 'Select an option...',
-        virtualize: true,
-        estimatedItemHeight: 48,
-    };
-    /**
-     * Global configuration instance
-     */
-    class SelectConfigManager {
-        constructor() {
-            this.config = this.deepClone(defaultConfig);
+        get items() {
+            return this._items;
+        }
+        set multi(value) {
+            this._multi = value;
+            if (value) {
+                this._listRoot.setAttribute('aria-multiselectable', 'true');
+            }
+            else {
+                this._listRoot.removeAttribute('aria-multiselectable');
+            }
         }
-        /**
-         * Get current global configuration
-         */
-        getConfig() {
-            return this.config;
+        get multi() {
+            return this._multi;
         }
-        /**
-         * Update global configuration (deep merge)
-         */
-        updateConfig(updates) {
-            this.config = this.deepMerge(this.config, updates);
+        get selectedIndices() {
+            return Array.from(this._selectedSet);
+        }
+        get selectedItems() {
+            return Array.from(this._selectedItems.values());
+        }
+        set optionTemplate(template) {
+            this._options.optionTemplate = template;
+            this.render();
+        }
+        set optionRenderer(renderer) {
+            this._options.optionRenderer = renderer;
+            this.render();
         }
         /**
-         * Reset to default configuration
+         * Public API: setItems() method for compatibility with EnhancedSelect
+         * Accepts an array of items which can be:
+         * - Simple primitives (string, number)
+         * - Objects with {label, value} structure
+         * - Objects with {label, value, optionComponent} for custom rendering (v1.2.0+)
          */
-        resetConfig() {
-            this.config = this.deepClone(defaultConfig);
+        setItems(items) {
+            this.items = items ?? [];
         }
         /**
-         * Merge component-level config with global config
-         * Component-level config takes precedence
+         * Public API: setValue() method to programmatically select an item
+         * For single select: clears selection and selects the item matching the value
+         * For multi-select: adds to selection if not already selected
          */
-        mergeWithComponentConfig(componentConfig) {
-            return this.deepMerge(this.deepClone(this.config), componentConfig);
-        }
-        deepClone(obj) {
-            return JSON.parse(JSON.stringify(obj));
-        }
-        deepMerge(target, source) {
-            const result = { ...target };
-            for (const key in source) {
-                if (source.hasOwnProperty(key)) {
-                    const sourceValue = source[key];
-                    const targetValue = result[key];
-                    if (sourceValue && typeof sourceValue === 'object' && !Array.isArray(sourceValue)) {
-                        result[key] = this.deepMerge(targetValue && typeof targetValue === 'object' ? targetValue : {}, sourceValue);
-                    }
-                    else {
-                        result[key] = sourceValue;
-                    }
+        setValue(value) {
+            if (value === null || value === undefined || value === '') {
+                // Clear selection
+                this._selectedSet.clear();
+                this._selectedItems.clear();
+                this._activeIndex = -1;
+                this.render();
+                return;
+            }
+            // Find item by value
+            const index = this._items.findIndex(item => {
+                if (typeof item === 'object' && item !== null && 'value' in item) {
+                    return item.value === value;
+                }
+                return item === value;
+            });
+            if (index >= 0) {
+                const item = this._items[index];
+                if (!this._multi) {
+                    // Single select: clear and set
+                    this._selectedSet.clear();
+                    this._selectedItems.clear();
                 }
+                this._selectedSet.add(index);
+                this._selectedItems.set(index, item);
+                this._activeIndex = index;
+                this.render();
             }
-            return result;
-        }
-    }
-    /**
-     * Singleton instance
-     */
-    const selectConfig = new SelectConfigManager();
-    /**
-     * Helper function to configure select globally
-     */
-    function configureSelect(config) {
-        selectConfig.updateConfig(config);
-    }
-    /**
-     * Helper function to reset select configuration
-     */
-    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
+         * Public API: getValue() method to get currently selected value(s)
+         * Returns single value for single-select, array for multi-select
          */
-        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}`);
+        getValue() {
+            const values = Array.from(this._selectedItems.values()).map(item => {
+                if (typeof item === 'object' && item !== null && 'value' in item) {
+                    return item.value;
+                }
+                return item;
+            });
+            return this._multi ? values : (values[0] ?? null);
+        }
+        render() {
+            const { optionTemplate, optionRenderer } = this._options;
+            const viewportHeight = this.getBoundingClientRect().height || 300;
+            const scrollTop = this.scrollTop || 0;
+            // Update aria-activedescendant
+            if (this._activeIndex >= 0) {
+                this._listRoot.setAttribute('aria-activedescendant', `option-${this._activeIndex}`);
             }
             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;
+                this._listRoot.removeAttribute('aria-activedescendant');
+            }
+            // Check if any items have custom components
+            const hasCustomComponents = this._items.some(item => typeof item === 'object' && item !== null && 'optionComponent' in item);
+            // Use unified renderer if we have custom components
+            if (hasCustomComponents && this._unifiedRenderer) {
+                this._listRoot.replaceChildren(); // Clear existing content
+                const frag = document.createDocumentFragment();
+                for (let i = 0; i < this._items.length; i++) {
+                    const item = this._items[i];
+                    const isSelected = this._selectedSet.has(i);
+                    const isFocused = this._activeIndex === i;
+                    const optionElement = this._unifiedRenderer.render(item, i, isSelected, isFocused, `native-${this.getAttribute('id') || 'default'}`);
+                    frag.appendChild(optionElement);
                 }
+                this._listRoot.appendChild(frag);
+                return;
             }
-            // Mount the component
-            try {
-                component.mountOption(container, context);
-                this._activeComponents.set(index, component);
+            // Fall back to original rendering logic for lightweight options
+            if (this._virtualizer) {
+                const { startIndex, endIndex } = this._virtualizer.computeWindow(scrollTop, viewportHeight);
+                this._virtualizer.render(startIndex, endIndex, (node, item, i) => {
+                    this._applyOptionAttrs(node, i);
+                    if (optionRenderer) {
+                        const el = optionRenderer(item, i, this._helpers);
+                        // replace node contents
+                        node.replaceChildren(el);
+                    }
+                    else if (optionTemplate) {
+                        const wrapper = document.createElement('div');
+                        wrapper.innerHTML = optionTemplate(item, i);
+                        const el = wrapper.firstElementChild;
+                        node.replaceChildren(el ?? document.createTextNode(String(item)));
+                    }
+                    else {
+                        // Handle {label, value} objects or primitives
+                        const displayText = (typeof item === 'object' && item !== null && 'label' in item)
+                            ? String(item.label)
+                            : String(item);
+                        node.textContent = displayText;
+                    }
+                });
+                return;
             }
-            catch (error) {
-                console.error(`[CustomOptionPool] Failed to mount component at index ${index}:`, error);
-                throw error;
+            const frag = document.createDocumentFragment();
+            for (let i = 0; i < this._items.length; i++) {
+                const item = this._items[i];
+                if (optionRenderer) {
+                    const el = optionRenderer(item, i, this._helpers);
+                    if (!el.hasAttribute('data-selectable')) {
+                        el.setAttribute('data-selectable', '');
+                        el.setAttribute('data-index', String(i));
+                    }
+                    this._applyOptionAttrs(el, i);
+                    frag.appendChild(el);
+                }
+                else if (optionTemplate) {
+                    // Fast path: render all via DocumentFragment in one call
+                    renderTemplate(this._listRoot, this._items, optionTemplate);
+                    // Apply ARIA attrs after template render
+                    this._applyAriaToAll();
+                    return; // rendering complete
+                }
+                else {
+                    const el = document.createElement('div');
+                    // Handle {label, value} objects or primitives
+                    const displayText = (typeof item === 'object' && item !== null && 'label' in item)
+                        ? String(item.label)
+                        : String(item);
+                    el.textContent = displayText;
+                    el.setAttribute('data-selectable', '');
+                    el.setAttribute('data-index', String(i));
+                    this._applyOptionAttrs(el, i);
+                    frag.appendChild(el);
+                }
             }
-            return component;
+            this._listRoot.replaceChildren(frag);
         }
-        /**
-         * 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();
+        _applyOptionAttrs(node, index) {
+            node.setAttribute('role', 'option');
+            node.id = `option-${index}`;
+            if (this._selectedSet.has(index)) {
+                node.setAttribute('aria-selected', 'true');
             }
-            catch (error) {
-                console.error(`[CustomOptionPool] Failed to unmount component at index ${index}:`, error);
+            else {
+                node.setAttribute('aria-selected', 'false');
             }
-            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;
-                }
+        }
+        _applyAriaToAll() {
+            const children = Array.from(this._listRoot.children);
+            for (const child of children) {
+                const idx = Number(child.dataset.index);
+                if (Number.isFinite(idx))
+                    this._applyOptionAttrs(child, idx);
             }
         }
-        /**
-         * 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));
+        _emit(name, detail) {
+            this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
         }
-        /**
-         * 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);
+        // Multi-select and interaction methods
+        _onSelect(item, index) {
+            if (this._multi) {
+                if (this._selectedSet.has(index)) {
+                    this._selectedSet.delete(index);
+                    this._selectedItems.delete(index);
+                }
+                else {
+                    this._selectedSet.add(index);
+                    this._selectedItems.set(index, item);
+                }
+            }
+            else {
+                this._selectedSet.clear();
+                this._selectedItems.clear();
+                this._selectedSet.add(index);
+                this._selectedItems.set(index, item);
             }
+            this._activeIndex = index;
+            this.render();
+            // Emit with all required fields
+            const selected = this._selectedSet.has(index);
+            const value = item?.value ?? item;
+            const label = item?.label ?? String(item);
+            this._emit('select', {
+                item,
+                index,
+                value,
+                label,
+                selected,
+                multi: this._multi
+            });
+            // Emit 'change' event for better React compatibility
+            this._emit('change', {
+                selectedItems: Array.from(this._selectedItems.values()),
+                selectedValues: Array.from(this._selectedItems.values()).map(i => i?.value ?? i),
+                selectedIndices: Array.from(this._selectedSet)
+            });
+            this._announce(`Selected ${label}`);
         }
-        /**
-         * 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);
+        _onKeydown(e) {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this._moveActive(1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this._moveActive(-1);
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    this._setActive(0);
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    this._setActive(this._items.length - 1);
+                    break;
+                case 'PageDown':
+                    e.preventDefault();
+                    this._moveActive(10);
+                    break;
+                case 'PageUp':
+                    e.preventDefault();
+                    this._moveActive(-10);
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (this._activeIndex >= 0) {
+                        const item = this._items[this._activeIndex];
+                        this._onSelect(item, this._activeIndex);
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    this._emit('close', {});
+                    break;
+                default:
+                    // Type-ahead buffer
+                    if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+                        this._onType(e.key);
+                    }
+                    break;
             }
         }
-        /**
-         * Get active component at index
-         *
-         * @param index - The option index
-         * @returns The component instance or undefined
-         */
-        getComponent(index) {
-            return this._activeComponents.get(index);
+        _moveActive(delta) {
+            const next = Math.max(0, Math.min(this._items.length - 1, this._activeIndex + delta));
+            this._setActive(next);
         }
-        /**
-         * Clear the entire pool
-         */
-        clear() {
-            this.releaseAll();
-            this._pool.clear();
-            console.log('[CustomOptionPool] Pool cleared');
+        _setActive(index) {
+            this._activeIndex = index;
+            this.render();
+            this._scrollToActive();
+            this._announce(`Navigated to ${String(this._items[index])}`);
         }
-        /**
-         * 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;
+        _scrollToActive() {
+            const el = this._shadow.getElementById(`option-${this._activeIndex}`);
+            el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+        _onType(char) {
+            if (this._typeTimeout)
+                window.clearTimeout(this._typeTimeout);
+            this._typeBuffer += char.toLowerCase();
+            this._typeTimeout = window.setTimeout(() => {
+                this._typeBuffer = '';
+            }, 400);
+            // Find first matching item
+            const match = this._items.findIndex((item) => String(item).toLowerCase().startsWith(this._typeBuffer));
+            if (match >= 0) {
+                this._setActive(match);
             }
-            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);
+        _announce(msg) {
+            if (this._liveRegion) {
+                this._liveRegion.textContent = msg;
+                setTimeout(() => {
+                    if (this._liveRegion)
+                        this._liveRegion.textContent = '';
+                }, 1000);
+            }
         }
-        /**
-         * 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)}`;
+        // Focus management
+        focus() {
+            this._listRoot.focus();
         }
     }
+    customElements.define('smilodon-select', NativeSelectElement);
 
     /**
-     * Option Renderer
-     *
-     * Unified renderer that handles both lightweight (label/value) and
-     * custom component rendering with consistent performance characteristics.
+     * Global Configuration System for Select Components
+     * Allows users to define default behaviors that can be overridden at component level
+     */
+    /**
+     * Default global configuration
      */
+    const defaultConfig = {
+        selection: {
+            mode: 'single',
+            allowDeselect: false,
+            maxSelections: 0,
+            showRemoveButton: true,
+            closeOnSelect: true,
+        },
+        scrollToSelected: {
+            enabled: true,
+            multiSelectTarget: 'first',
+            behavior: 'smooth',
+            block: 'nearest',
+        },
+        loadMore: {
+            enabled: false,
+            itemsPerLoad: 3,
+            threshold: 100,
+            showLoader: true,
+        },
+        busyBucket: {
+            enabled: true,
+            showSpinner: true,
+            message: 'Loading...',
+            minDisplayTime: 200,
+        },
+        styles: {
+            classNames: {},
+        },
+        serverSide: {
+            enabled: false,
+            getValueFromItem: (item) => item?.value ?? item,
+            getLabelFromItem: (item) => item?.label ?? String(item),
+        },
+        infiniteScroll: {
+            enabled: false,
+            pageSize: 20,
+            initialPage: 1,
+            cachePages: true,
+            maxCachedPages: 10,
+            preloadAdjacent: true,
+            scrollRestoration: 'auto',
+        },
+        expandable: {
+            enabled: false,
+            collapsedHeight: '300px',
+            expandedHeight: '500px',
+            expandLabel: 'Show more',
+            collapseLabel: 'Show less',
+        },
+        callbacks: {},
+        enabled: true,
+        searchable: false,
+        placeholder: 'Select an option...',
+        virtualize: true,
+        estimatedItemHeight: 48,
+    };
     /**
-     * Manages rendering of both lightweight and custom component options
+     * Global configuration instance
      */
-    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');
-                }
-            }
+    class SelectConfigManager {
+        constructor() {
+            this.config = this.deepClone(defaultConfig);
         }
         /**
-         * Update focused state for an option
-         *
-         * @param index - The option index
-         * @param focused - Whether it has keyboard focus
+         * Get current global configuration
          */
-        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);
-            }
+        getConfig() {
+            return this.config;
         }
         /**
-         * Unmount and cleanup an option
-         *
-         * @param index - The option index
+         * Update global configuration (deep merge)
          */
-        unmount(index) {
-            // Release custom component if exists
-            this._pool.release(index);
-            // Remove from mounted elements
-            this._mountedElements.delete(index);
+        updateConfig(updates) {
+            this.config = this.deepMerge(this.config, updates);
         }
         /**
-         * Unmount all options
+         * Reset to default configuration
          */
-        unmountAll() {
-            this._pool.releaseAll();
-            this._mountedElements.clear();
+        resetConfig() {
+            this.config = this.deepClone(defaultConfig);
         }
         /**
-         * Get pool statistics
+         * Merge component-level config with global config
+         * Component-level config takes precedence
          */
-        getStats() {
-            return this._pool.getStats();
+        mergeWithComponentConfig(componentConfig) {
+            return this.deepMerge(this.deepClone(this.config), componentConfig);
         }
-        /**
-         * 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;
+        deepClone(obj) {
+            return JSON.parse(JSON.stringify(obj));
         }
-        /**
-         * 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);
+        deepMerge(target, source) {
+            const result = { ...target };
+            for (const key in source) {
+                if (source.hasOwnProperty(key)) {
+                    const sourceValue = source[key];
+                    const targetValue = result[key];
+                    if (sourceValue && typeof sourceValue === 'object' && !Array.isArray(sourceValue)) {
+                        result[key] = this.deepMerge(targetValue && typeof targetValue === 'object' ? targetValue : {}, sourceValue);
                     }
-                },
-                onCustomEvent: (eventName, data) => {
-                    if (this._config.onCustomEvent) {
-                        this._config.onCustomEvent(index, eventName, data);
+                    else {
+                        result[key] = sourceValue;
                     }
                 }
-            };
-            // 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;
+            return result;
         }
     }
+    /**
+     * Singleton instance
+     */
+    const selectConfig = new SelectConfigManager();
+    /**
+     * Helper function to configure select globally
+     */
+    function configureSelect(config) {
+        selectConfig.updateConfig(config);
+    }
+    /**
+     * Helper function to reset select configuration
+     */
+    function resetSelectConfig() {
+        selectConfig.resetConfig();
+    }
 
     /**
      * Enhanced Select Component