@smilodon/core 1.0.0

package/dist/index.umd.js

@@ -0,0 +1,3691 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NativeSelect = {}));
+})(this, (function (exports) { 'use strict';
+
+    const createRendererHelpers = (onSelect) => ({
+        onSelect,
+        getIndex: (node) => {
+            const el = node?.closest?.('[data-selectable]');
+            if (!el)
+                return null;
+            const idx = Number(el.dataset.index);
+            return Number.isFinite(idx) ? idx : null;
+        },
+        keyboardFocus: (index) => {
+            const el = document.querySelector(`[data-selectable][data-index="${index}"]`);
+            el?.focus?.();
+        }
+    });
+    // Fast template render path: string -> DOM via DocumentFragment, with delegation markers
+    function renderTemplate(container, items, optionTemplate) {
+        const frag = document.createDocumentFragment();
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            const wrapper = document.createElement('div');
+            wrapper.innerHTML = optionTemplate(item, i);
+            let el = wrapper.firstElementChild;
+            if (!el) {
+                // Edge case: template produced multiple or zero root nodes; wrap children
+                const wrap = document.createElement('div');
+                wrap.setAttribute('data-selectable', '');
+                wrap.setAttribute('data-index', String(i));
+                while (wrapper.firstChild)
+                    wrap.appendChild(wrapper.firstChild);
+                frag.appendChild(wrap);
+                continue;
+            }
+            // Allow override if developer sets data-smilodon-handled="true"
+            if (!el.hasAttribute('data-smilodon-handled')) {
+                el.setAttribute('data-selectable', '');
+                el.setAttribute('data-index', String(i));
+            }
+            frag.appendChild(el);
+        }
+        container.replaceChildren(frag);
+    }
+
+    /**
+     * Fenwick Tree (Binary Indexed Tree) for O(log n) prefix sum queries and updates.
+     * Used for cumulative height calculations in variable-height virtualization.
+     *
+     * Space: O(n)
+     * Time: O(log n) for both query and update
+     *
+     * @see https://en.wikipedia.org/wiki/Fenwick_tree
+     */
+    class FenwickTree {
+        constructor(size) {
+            this.size = size;
+            // 1-indexed for cleaner bit manipulation
+            this.tree = new Float64Array(size + 1);
+        }
+        /**
+         * Add delta to index i (0-indexed input)
+         * Complexity: O(log n)
+         */
+        add(index, delta) {
+            // Convert to 1-indexed
+            let i = index + 1;
+            while (i <= this.size) {
+                this.tree[i] += delta;
+                // Move to next relevant index: i + LSB(i)
+                i += i & -i;
+            }
+        }
+        /**
+         * Get prefix sum from 0 to index (inclusive, 0-indexed input)
+         * Complexity: O(log n)
+         */
+        sum(index) {
+            if (index < 0)
+                return 0;
+            // Convert to 1-indexed
+            let i = index + 1;
+            let result = 0;
+            while (i > 0) {
+                result += this.tree[i];
+                // Move to parent: i - LSB(i)
+                i -= i & -i;
+            }
+            return result;
+        }
+        /**
+         * Get sum in range [left, right] (inclusive, 0-indexed)
+         * Complexity: O(log n)
+         */
+        rangeSum(left, right) {
+            if (left > right)
+                return 0;
+            return this.sum(right) - (left > 0 ? this.sum(left - 1) : 0);
+        }
+        /**
+         * Update value at index to newValue (handles delta internally)
+         * Requires tracking current values externally or use add() directly
+         * Complexity: O(log n)
+         */
+        update(index, oldValue, newValue) {
+            this.add(index, newValue - oldValue);
+        }
+        /**
+         * Binary search to find the smallest index where sum(index) >= target
+         * Useful for finding scroll position -> item index mapping
+         * Complexity: O(log² n) or O(log n) with optimization
+         *
+         * @returns index (0-indexed) or -1 if not found
+         */
+        lowerBound(target) {
+            if (target <= 0)
+                return 0;
+            // Optimized binary search on Fenwick tree structure
+            let pos = 0;
+            let sum = 0;
+            // Start from highest power of 2 <= size
+            let bit = 1 << Math.floor(Math.log2(this.size));
+            while (bit > 0) {
+                if (pos + bit <= this.size) {
+                    const nextSum = sum + this.tree[pos + bit];
+                    if (nextSum < target) {
+                        pos += bit;
+                        sum = nextSum;
+                    }
+                }
+                bit >>= 1;
+            }
+            // Convert back to 0-indexed
+            return pos;
+        }
+        /**
+         * Reset all values to 0
+         * Complexity: O(n)
+         */
+        reset() {
+            this.tree.fill(0);
+        }
+        /**
+         * Resize the tree (useful for dynamic item lists)
+         * Complexity: O(n)
+         */
+        resize(newSize) {
+            if (newSize === this.size)
+                return;
+            const oldTree = this.tree;
+            const oldSize = this.size;
+            this.size = newSize;
+            this.tree = new Float64Array(newSize + 1);
+            // Copy existing values up to min(oldSize, newSize)
+            const copySize = Math.min(oldSize, newSize);
+            for (let i = 1; i <= copySize; i++) {
+                this.tree[i] = oldTree[i];
+            }
+        }
+        /**
+         * Get current size
+         */
+        getSize() {
+            return this.size;
+        }
+        /**
+         * Export state for serialization (e.g., to SharedArrayBuffer)
+         */
+        exportState() {
+            return {
+                size: this.size,
+                tree: Array.from(this.tree),
+            };
+        }
+        /**
+         * Import state from serialization
+         */
+        static fromState(state) {
+            const ft = new FenwickTree(state.size);
+            ft.tree = new Float64Array(state.tree);
+            return ft;
+        }
+    }
+
+    /**
+     * DOM Node Pool with LRU eviction and aggressive cleanup.
+     * Reuses nodes to minimize GC pressure and layout thrashing.
+     *
+     * Features:
+     * - LRU eviction when pool exceeds maxSize
+     * - Style reset to avoid style pollution
+     * - Event listener cleanup
+     * - Performance telemetry integration
+     */
+    class DOMPool {
+        constructor(options) {
+            this.pool = [];
+            // Telemetry
+            this.hits = 0;
+            this.misses = 0;
+            this.evictions = 0;
+            this.factory = options.factory;
+            this.reset = options.reset || this.defaultReset.bind(this);
+            this.maxSize = options.maxSize || 64;
+            this.telemetry = options.telemetry || false;
+        }
+        /**
+         * Acquire a node from pool or create new one
+         * Complexity: O(n) for LRU scan, amortized O(1) for small pools
+         */
+        acquire() {
+            const now = performance.now();
+            // Find first available node
+            for (let i = 0; i < this.pool.length; i++) {
+                const poolNode = this.pool[i];
+                if (!poolNode.inUse) {
+                    poolNode.inUse = true;
+                    poolNode.lastUsed = now;
+                    this.reset(poolNode.node);
+                    if (this.telemetry)
+                        this.hits++;
+                    return poolNode.node;
+                }
+            }
+            // No available nodes, create new one
+            const node = this.factory();
+            this.pool.push({
+                node,
+                lastUsed: now,
+                inUse: true,
+            });
+            if (this.telemetry)
+                this.misses++;
+            // Evict if pool too large
+            if (this.pool.length > this.maxSize) {
+                this.evictLRU();
+            }
+            return node;
+        }
+        /**
+         * Release node back to pool
+         * Complexity: O(n) to find node
+         */
+        release(node) {
+            const poolNode = this.pool.find(p => p.node === node);
+            if (poolNode) {
+                poolNode.inUse = false;
+                poolNode.lastUsed = performance.now();
+                // Aggressive cleanup
+                this.reset(poolNode.node);
+            }
+        }
+        /**
+         * Evict least recently used node
+         * Complexity: O(n)
+         */
+        evictLRU() {
+            // Find LRU node that's not in use
+            let lruIndex = -1;
+            let oldestTime = Infinity;
+            for (let i = 0; i < this.pool.length; i++) {
+                const poolNode = this.pool[i];
+                if (!poolNode.inUse && poolNode.lastUsed < oldestTime) {
+                    lruIndex = i;
+                    oldestTime = poolNode.lastUsed;
+                }
+            }
+            if (lruIndex >= 0) {
+                const evicted = this.pool.splice(lruIndex, 1)[0];
+                // Full cleanup before GC
+                this.deepCleanup(evicted.node);
+                if (this.telemetry)
+                    this.evictions++;
+            }
+        }
+        /**
+         * Default reset: clear content, remove inline styles, remove attributes
+         */
+        defaultReset(node) {
+            // Clear content
+            node.textContent = '';
+            // Remove inline styles
+            node.removeAttribute('style');
+            // Remove data attributes (preserve data-index, data-selectable for delegation)
+            const attrs = Array.from(node.attributes);
+            for (const attr of attrs) {
+                if (attr.name.startsWith('data-') &&
+                    attr.name !== 'data-index' &&
+                    attr.name !== 'data-selectable') {
+                    node.removeAttribute(attr.name);
+                }
+            }
+            // Remove ARIA attributes that might pollute reuse
+            const ariaAttrs = ['aria-selected', 'aria-checked', 'aria-disabled'];
+            ariaAttrs.forEach(attr => node.removeAttribute(attr));
+        }
+        /**
+         * Deep cleanup before eviction/destruction
+         */
+        deepCleanup(node) {
+            // Remove all event listeners by cloning (nuclear option)
+            const clone = node.cloneNode(true);
+            node.parentNode?.replaceChild(clone, node);
+            // Clear references
+            node.textContent = '';
+        }
+        /**
+         * Clear entire pool
+         */
+        clear() {
+            for (const poolNode of this.pool) {
+                this.deepCleanup(poolNode.node);
+            }
+            this.pool = [];
+            this.resetTelemetry();
+        }
+        /**
+         * Adjust max pool size dynamically
+         */
+        setMaxSize(size) {
+            this.maxSize = size;
+            // Evict excess nodes
+            while (this.pool.length > this.maxSize) {
+                this.evictLRU();
+            }
+        }
+        /**
+         * Get pool statistics
+         */
+        getStats() {
+            const available = this.pool.filter(p => !p.inUse).length;
+            const hitRate = this.hits + this.misses > 0
+                ? this.hits / (this.hits + this.misses)
+                : 0;
+            return {
+                total: this.pool.length,
+                available,
+                inUse: this.pool.length - available,
+                maxSize: this.maxSize,
+                hits: this.hits,
+                misses: this.misses,
+                evictions: this.evictions,
+                hitRate,
+            };
+        }
+        /**
+         * Reset telemetry counters
+         */
+        resetTelemetry() {
+            this.hits = 0;
+            this.misses = 0;
+            this.evictions = 0;
+        }
+    }
+
+    class Virtualizer {
+        constructor(container, itemsLength, itemGetter, options) {
+            this.measuredHeights = new Map();
+            this.activeNodes = new Map(); // index -> node mapping
+            this.container = container;
+            this.itemsLength = itemsLength;
+            this.itemGetter = itemGetter;
+            this.options = options;
+            this.averageHeight = options.estimatedItemHeight;
+            // Initialize DOM pool with LRU eviction
+            const maxPoolSize = Math.ceil((options.buffer * 2 + 10) * 1.5) + (options.maxPoolExtra ?? 32);
+            this.pool = new DOMPool({
+                maxSize: maxPoolSize,
+                factory: () => {
+                    const div = document.createElement('div');
+                    div.setAttribute('data-selectable', '');
+                    return div;
+                },
+                reset: (node) => {
+                    // Clear content but preserve data-selectable
+                    node.textContent = '';
+                    node.removeAttribute('style');
+                    // Remove aria attributes
+                    node.removeAttribute('aria-selected');
+                    node.removeAttribute('aria-checked');
+                },
+                telemetry: options.enableTelemetry || false,
+            });
+            // Use Fenwick tree for large lists (>5000 items)
+            if (itemsLength > 5000) {
+                this.fenwick = new FenwickTree(itemsLength);
+                // Initialize with estimated heights
+                for (let i = 0; i < itemsLength; i++) {
+                    this.fenwick.add(i, options.estimatedItemHeight);
+                }
+            }
+            this.container.style.willChange = 'transform';
+        }
+        computeWindow(scrollTop, viewportHeight) {
+            const { buffer } = this.options;
+            const startIndex = Math.max(Math.floor(scrollTop / this.averageHeight) - buffer, 0);
+            const endIndex = Math.min(Math.ceil((scrollTop + viewportHeight) / this.averageHeight) + buffer, this.itemsLength - 1);
+            const windowSize = Math.max(0, endIndex - startIndex + 1);
+            // Adjust pool size dynamically based on window
+            const newPoolSize = windowSize + (this.options.maxPoolExtra ?? 32);
+            this.pool.setMaxSize(newPoolSize);
+            return { startIndex, endIndex, windowSize };
+        }
+        cumulativeOffset(index) {
+            if (index <= 0)
+                return 0;
+            // Use Fenwick tree for O(log n) prefix sum
+            if (this.fenwick) {
+                return this.fenwick.sum(index - 1);
+            }
+            // Fallback: approximate using average height with sparse adjustments
+            let total = 0;
+            for (let i = 0; i < index; i++) {
+                total += this.measuredHeights.get(i) ?? this.averageHeight;
+            }
+            return total;
+        }
+        acquireNode(index) {
+            // Check if we already have this node active (reuse)
+            const existing = this.activeNodes.get(index);
+            if (existing)
+                return existing;
+            const node = this.pool.acquire();
+            node.setAttribute('data-index', String(index));
+            this.activeNodes.set(index, node);
+            return node;
+        }
+        releaseNode(index) {
+            const node = this.activeNodes.get(index);
+            if (node) {
+                this.pool.release(node);
+                this.activeNodes.delete(index);
+            }
+        }
+        releaseExcess(activeIndices) {
+            // Release nodes not in active set
+            for (const [index, node] of this.activeNodes) {
+                if (!activeIndices.has(index)) {
+                    this.pool.release(node);
+                    this.activeNodes.delete(index);
+                }
+            }
+        }
+        render(startIndex, endIndex, updateNode) {
+            const frag = document.createDocumentFragment();
+            const activeIndices = new Set();
+            for (let i = startIndex; i <= endIndex; i++) {
+                const node = this.acquireNode(i);
+                updateNode(node, this.itemGetter(i), i);
+                frag.appendChild(node);
+                activeIndices.add(i);
+                // Measure on appear (deferred)
+                queueMicrotask(() => this.measureOnAppear(node, i));
+            }
+            // Translate container by cumulative offset of startIndex
+            const topOffset = this.cumulativeOffset(startIndex);
+            this.container.style.transform = `translate3d(0, ${Math.round(topOffset * 100) / 100}px, 0)`;
+            this.container.replaceChildren(frag);
+            // Recycle nodes not in use
+            requestAnimationFrame(() => this.releaseExcess(activeIndices));
+        }
+        measureOnAppear(node, index) {
+            const h = node.offsetHeight;
+            const prev = this.measuredHeights.get(index);
+            const threshold = this.options.measurementThreshold ?? 5;
+            if (prev === undefined || Math.abs(prev - h) > threshold) {
+                const oldValue = prev ?? this.averageHeight;
+                this.measuredHeights.set(index, h);
+                // Update Fenwick tree with new measurement
+                if (this.fenwick) {
+                    this.fenwick.update(index, oldValue, h);
+                }
+                // Update running average (weighted by measured count)
+                const count = this.measuredHeights.size;
+                const total = Array.from(this.measuredHeights.values()).reduce((a, b) => a + b, 0);
+                this.averageHeight = Math.round((total / count) * 100) / 100;
+            }
+        }
+        /**
+         * Get pool statistics (if telemetry enabled)
+         */
+        getPoolStats() {
+            return this.pool.getStats();
+        }
+        /**
+         * Update items length and resize Fenwick tree if needed
+         */
+        setItemsLength(newLength) {
+            this.itemsLength = newLength;
+            if (this.fenwick) {
+                this.fenwick.resize(newLength);
+            }
+            else if (newLength > 5000 && !this.fenwick) {
+                // Activate Fenwick tree when crossing threshold
+                this.fenwick = new FenwickTree(newLength);
+                // Populate with existing measurements
+                for (const [index, height] of this.measuredHeights) {
+                    this.fenwick.update(index, this.averageHeight, height);
+                }
+            }
+        }
+        /**
+         * Cleanup resources
+         */
+        destroy() {
+            this.pool.clear();
+            this.activeNodes.clear();
+            this.measuredHeights.clear();
+            if (this.fenwick) {
+                this.fenwick.reset();
+            }
+        }
+    }
+
+    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', {});
+        }
+        disconnectedCallback() {
+            this._emit('close', {});
+            // Cleanup: remove listeners if any were added outside constructor
+            if (this._typeTimeout)
+                window.clearTimeout(this._typeTimeout);
+        }
+        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;
+            }
+        }
+        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;
+        }
+        set multi(value) {
+            this._multi = value;
+            if (value) {
+                this._listRoot.setAttribute('aria-multiselectable', 'true');
+            }
+            else {
+                this._listRoot.removeAttribute('aria-multiselectable');
+            }
+        }
+        get multi() {
+            return this._multi;
+        }
+        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();
+        }
+        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 {
+                this._listRoot.removeAttribute('aria-activedescendant');
+            }
+            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 {
+                        node.textContent = String(item);
+                    }
+                });
+                return;
+            }
+            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');
+                    el.textContent = String(item);
+                    el.setAttribute('data-selectable', '');
+                    el.setAttribute('data-index', String(i));
+                    this._applyOptionAttrs(el, i);
+                    frag.appendChild(el);
+                }
+            }
+            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');
+            }
+            else {
+                node.setAttribute('aria-selected', 'false');
+            }
+        }
+        _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);
+            }
+        }
+        _emit(name, detail) {
+            this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+        }
+        // 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);
+            this._emit('select', {
+                item,
+                index,
+                value: item?.value ?? item,
+                label: item?.label ?? String(item),
+                selected,
+                multi: this._multi
+            });
+            this._announce(`Selected ${String(item)}`);
+        }
+        _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;
+            }
+        }
+        _moveActive(delta) {
+            const next = Math.max(0, Math.min(this._items.length - 1, this._activeIndex + delta));
+            this._setActive(next);
+        }
+        _setActive(index) {
+            this._activeIndex = index;
+            this.render();
+            this._scrollToActive();
+            this._announce(`Navigated to ${String(this._items[index])}`);
+        }
+        _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);
+            }
+        }
+        _announce(msg) {
+            if (this._liveRegion) {
+                this._liveRegion.textContent = msg;
+                setTimeout(() => {
+                    if (this._liveRegion)
+                        this._liveRegion.textContent = '';
+                }, 1000);
+            }
+        }
+        // Focus management
+        focus() {
+            this._listRoot.focus();
+        }
+    }
+    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',
+        },
+        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 current global configuration
+         */
+        getConfig() {
+            return this.config;
+        }
+        /**
+         * Update global configuration (deep merge)
+         */
+        updateConfig(updates) {
+            this.config = this.deepMerge(this.config, updates);
+        }
+        /**
+         * Reset to default configuration
+         */
+        resetConfig() {
+            this.config = this.deepClone(defaultConfig);
+        }
+        /**
+         * Merge component-level config with global config
+         * Component-level config takes precedence
+         */
+        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;
+                    }
+                }
+            }
+            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
+     * Implements all advanced features: infinite scroll, load more, busy state,
+     * server-side selection, and full customization
+     */
+    class EnhancedSelect extends HTMLElement {
+        constructor() {
+            super();
+            this._pageCache = {};
+            this._typeBuffer = '';
+            this._hasError = false;
+            this._errorMessage = '';
+            this._boundArrowClick = null;
+            this._shadow = this.attachShadow({ mode: 'open' });
+            this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
+            // Merge global config with component-level 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,
+            };
+            // Create DOM structure
+            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._initializeStyles();
+            this._attachEventListeners();
+            this._initializeObservers();
+        }
+        connectedCallback() {
+            // Load initial data if server-side is enabled
+            if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
+                this._loadInitialSelectedItems();
+            }
+            // Emit open event if configured to start open
+            if (this._config.callbacks.onOpen) {
+                this._config.callbacks.onOpen();
+            }
+        }
+        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);
+            }
+        }
+        _createContainer() {
+            const container = document.createElement('div');
+            container.className = 'select-container';
+            if (this._config.styles.classNames?.container) {
+                container.className += ' ' + this._config.styles.classNames.container;
+            }
+            if (this._config.styles.container) {
+                Object.assign(container.style, this._config.styles.container);
+            }
+            return container;
+        }
+        _createInputContainer() {
+            const container = document.createElement('div');
+            container.className = 'input-container';
+            return container;
+        }
+        _createInput() {
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.className = 'select-input';
+            input.placeholder = this._config.placeholder || 'Select an option...';
+            input.disabled = !this._config.enabled;
+            input.readOnly = !this._config.searchable;
+            // Update readonly when input is focused if searchable
+            input.addEventListener('focus', () => {
+                if (this._config.searchable) {
+                    input.readOnly = false;
+                }
+            });
+            if (this._config.styles.classNames?.input) {
+                input.className += ' ' + this._config.styles.classNames.input;
+            }
+            if (this._config.styles.input) {
+                Object.assign(input.style, this._config.styles.input);
+            }
+            input.setAttribute('role', 'combobox');
+            input.setAttribute('aria-expanded', 'false');
+            input.setAttribute('aria-haspopup', 'listbox');
+            input.setAttribute('aria-autocomplete', this._config.searchable ? 'list' : 'none');
+            return input;
+        }
+        _createDropdown() {
+            const dropdown = document.createElement('div');
+            dropdown.className = 'select-dropdown';
+            dropdown.style.display = 'none';
+            if (this._config.styles.classNames?.dropdown) {
+                dropdown.className += ' ' + this._config.styles.classNames.dropdown;
+            }
+            if (this._config.styles.dropdown) {
+                Object.assign(dropdown.style, this._config.styles.dropdown);
+            }
+            dropdown.setAttribute('role', 'listbox');
+            if (this._config.selection.mode === 'multi') {
+                dropdown.setAttribute('aria-multiselectable', 'true');
+            }
+            return dropdown;
+        }
+        _createOptionsContainer() {
+            const container = document.createElement('div');
+            container.className = 'options-container';
+            return container;
+        }
+        _createLiveRegion() {
+            const liveRegion = document.createElement('div');
+            liveRegion.setAttribute('role', 'status');
+            liveRegion.setAttribute('aria-live', 'polite');
+            liveRegion.setAttribute('aria-atomic', 'true');
+            liveRegion.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;';
+            return liveRegion;
+        }
+        _createArrowContainer() {
+            const container = document.createElement('div');
+            container.className = 'dropdown-arrow-container';
+            container.innerHTML = `
+      <svg class="dropdown-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
+            return container;
+        }
+        _assembleDOM() {
+            this._inputContainer.appendChild(this._input);
+            if (this._arrowContainer) {
+                this._inputContainer.appendChild(this._arrowContainer);
+            }
+            this._container.appendChild(this._inputContainer);
+            this._dropdown.appendChild(this._optionsContainer);
+            this._container.appendChild(this._dropdown);
+            this._shadow.appendChild(this._container);
+            if (this._liveRegion) {
+                this._shadow.appendChild(this._liveRegion);
+            }
+            // Set ARIA relationships
+            const listboxId = `${this._uniqueId}-listbox`;
+            this._dropdown.id = listboxId;
+            this._input.setAttribute('aria-controls', listboxId);
+            this._input.setAttribute('aria-owns', listboxId);
+        }
+        _initializeStyles() {
+            const style = document.createElement('style');
+            style.textContent = `
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+      }
+      
+      .select-container {
+        position: relative;
+        width: 100%;
+      }
+      
+      .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;
+      }
+      
+      .input-container:focus-within {
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+      }
+      
+      /* Gradient separator before arrow */
+      .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 {
+        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;
+      }
+      
+      .dropdown-arrow-container:hover {
+        background-color: rgba(102, 126, 234, 0.08);
+      }
+      
+      .dropdown-arrow {
+        width: 16px;
+        height: 16px;
+        color: #667eea;
+        transition: transform 0.2s ease, color 0.2s ease;
+        transform: translateY(0);
+      }
+      
+      .dropdown-arrow-container:hover .dropdown-arrow {
+        color: #667eea;
+      }
+      
+      .dropdown-arrow.open {
+        transform: rotate(180deg);
+      }
+      
+      .select-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;
+      }
+      
+      .select-input::placeholder {
+        color: #9ca3af;
+      }
+      
+      .selection-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;
+      }
+      
+      .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;
+      }
+      
+      .badge-remove:hover {
+        background: rgba(255, 255, 255, 0.5);
+      }
+      
+      .select-input:disabled {
+        background-color: var(--select-disabled-bg, #f5f5f5);
+        cursor: not-allowed;
+      }
+      
+      .select-dropdown {
+        position: absolute;
+        scroll-behavior: smooth;
+        top: 100%;
+        left: 0;
+        right: 0;
+        margin-top: 4px;
+        max-height: 300px;
+        overflow-y: auto;
+        background: var(--select-dropdown-bg, white);
+        border: 1px solid var(--select-dropdown-border, #ccc);
+        border-radius: var(--select-border-radius, 4px);
+        box-shadow: var(--select-dropdown-shadow, 0 4px 6px rgba(0,0,0,0.1));
+        z-index: var(--select-dropdown-z-index, 1000);
+      }
+      
+      .options-container {
+        position: relative;
+        transition: opacity 0.2s ease-in-out;
+      }
+
+      .option {
+        padding: 8px 12px;
+        cursor: pointer;
+        color: inherit;
+        transition: background-color 0.15s ease;
+        user-select: none;
+      }
+
+      .option:hover {
+        background-color: #f3f4f6;
+      }
+
+      .option.selected {
+        background-color: #e0e7ff;
+        color: #4338ca;
+        font-weight: 500;
+      }
+
+      .option.active {
+        background-color: #f3f4f6;
+      }
+      
+      .load-more-container {
+        padding: 12px;
+        text-align: center;
+        border-top: 1px solid var(--select-divider-color, #e0e0e0);
+      }
+      
+      .load-more-button {
+        padding: 8px 16px;
+        border: 1px solid var(--select-button-border, #1976d2);
+        background: var(--select-button-bg, white);
+        color: var(--select-button-color, #1976d2);
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.2s ease;
+      }
+      
+      .load-more-button:hover {
+        background: var(--select-button-hover-bg, #1976d2);
+        color: var(--select-button-hover-color, white);
+      }
+      
+      .load-more-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      
+      .busy-bucket {
+        padding: 16px;
+        text-align: center;
+        color: var(--select-busy-color, #666);
+      }
+      
+      .spinner {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--select-spinner-color, #ccc);
+        border-top-color: var(--select-spinner-active-color, #1976d2);
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+      }
+      
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+      
+      .empty-state {
+        padding: 24px;
+        text-align: center;
+        color: var(--select-empty-color, #999);
+      }
+      
+      .searching-state {
+        padding: 24px;
+        text-align: center;
+        color: #667eea;
+        font-style: italic;
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+      
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+      
+      /* Error states */
+      .select-input[aria-invalid="true"] {
+        border-color: var(--select-error-border, #dc2626);
+      }
+      
+      .select-input[aria-invalid="true"]:focus {
+        border-color: var(--select-error-border, #dc2626);
+        box-shadow: 0 0 0 2px var(--select-error-shadow, rgba(220, 38, 38, 0.1));
+        outline-color: var(--select-error-border, #dc2626);
+      }
+      
+      /* Accessibility: Reduced motion */
+      @media (prefers-reduced-motion: reduce) {
+        * {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+      
+      /* Accessibility: Dark mode */
+      @media (prefers-color-scheme: dark) {
+        .select-input {
+          background: var(--select-dark-bg, #1f2937);
+          color: var(--select-dark-text, #f9fafb);
+          border-color: var(--select-dark-border, #4b5563);
+        }
+        
+        .select-dropdown {
+          background: var(--select-dark-dropdown-bg, #1f2937);
+          border-color: var(--select-dark-dropdown-border, #4b5563);
+          color: var(--select-dark-text, #f9fafb);
+        }
+        
+        .option:hover {
+          background-color: var(--select-dark-option-hover-bg, #374151);
+        }
+        
+        .option.selected {
+          background-color: var(--select-dark-option-selected-bg, #3730a3);
+          color: var(--select-dark-option-selected-text, #e0e7ff);
+        }
+        
+        .option.active {
+          background-color: var(--select-dark-option-active-bg, #374151);
+        }
+        
+        .busy-bucket {
+          color: var(--select-dark-busy-color, #9ca3af);
+        }
+      }
+      
+      /* Accessibility: High contrast mode */
+      @media (prefers-contrast: high) {
+        .select-input:focus {
+          outline-width: 3px;
+          outline-color: Highlight;
+        }
+        
+        .select-input {
+          border-width: 2px;
+        }
+      }
+      
+      /* Touch targets (WCAG 2.5.5) */
+      .load-more-button,
+      select-option {
+        min-height: 44px;
+      }
+    `;
+            this._shadow.appendChild(style);
+        }
+        _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();
+                    }
+                    // Scroll to selected when opening
+                    if (!wasOpen && this._state.isOpen && this._state.selectedIndices.size > 0) {
+                        setTimeout(() => this._scrollToSelected(), 50);
+                    }
+                };
+                this._arrowContainer.addEventListener('click', this._boundArrowClick);
+            }
+            // Input container click - prevent event from reaching document listener
+            this._container.addEventListener('click', (e) => {
+                e.stopPropagation();
+            });
+            // Input focus/blur
+            this._input.addEventListener('focus', () => this._handleOpen());
+            this._input.addEventListener('blur', (e) => {
+                // Delay to allow option click
+                setTimeout(() => {
+                    if (!this._dropdown.contains(document.activeElement)) {
+                        this._handleClose();
+                    }
+                }, 200);
+            });
+            // Input search
+            this._input.addEventListener('input', (e) => {
+                if (!this._config.searchable)
+                    return;
+                console.log('[EnhancedSelect] Input event fired', e.target.value);
+                const query = e.target.value;
+                this._handleSearch(query);
+            });
+            // Keyboard navigation
+            this._input.addEventListener('keydown', (e) => this._handleKeydown(e));
+            // Click outside to close
+            document.addEventListener('click', (e) => {
+                const target = e.target;
+                // Check if click is outside shadow root
+                if (!this._shadow.contains(target) && !this._container.contains(target)) {
+                    this._handleClose();
+                }
+            });
+        }
+        _initializeObservers() {
+            // Disconnect existing observer if any
+            if (this._intersectionObserver) {
+                this._intersectionObserver.disconnect();
+                this._intersectionObserver = undefined;
+            }
+            // Intersection observer for infinite scroll
+            if (this._config.infiniteScroll.enabled) {
+                this._intersectionObserver = new IntersectionObserver((entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.isIntersecting) {
+                            console.log('[InfiniteScroll] Sentinel intersected. isBusy:', this._state.isBusy);
+                            if (!this._state.isBusy) {
+                                this._loadMoreItems();
+                            }
+                        }
+                    });
+                }, { threshold: 0.1 });
+            }
+        }
+        async _loadInitialSelectedItems() {
+            if (!this._config.serverSide.fetchSelectedItems || !this._config.serverSide.initialSelectedValues) {
+                return;
+            }
+            this._setBusy(true);
+            try {
+                const items = await this._config.serverSide.fetchSelectedItems(this._config.serverSide.initialSelectedValues);
+                // Add to state
+                items.forEach((item, index) => {
+                    this._state.selectedItems.set(index, item);
+                    this._state.selectedIndices.add(index);
+                });
+                this._updateInputDisplay();
+            }
+            catch (error) {
+                this._handleError(error);
+            }
+            finally {
+                this._setBusy(false);
+            }
+        }
+        _handleOpen() {
+            if (!this._config.enabled || this._state.isOpen)
+                return;
+            this._state.isOpen = true;
+            this._dropdown.style.display = 'block';
+            this._input.setAttribute('aria-expanded', 'true');
+            this._updateArrowRotation();
+            // Clear search query when opening to show all options
+            // This ensures we can scroll to selected item
+            if (this._config.searchable) {
+                this._state.searchQuery = '';
+                // Don't clear input value if it represents selection
+                // But if we want to search, we might want to clear it?
+                // Standard behavior: input keeps value (label), but dropdown shows all options
+                // until user types.
+                // However, our filtering logic uses _state.searchQuery.
+                // So clearing it here resets the filter.
+            }
+            // Render options when opening
+            this._renderOptions();
+            this._emit('open', {});
+            this._config.callbacks.onOpen?.();
+            // Scroll to selected if configured
+            if (this._config.scrollToSelected.enabled) {
+                // Use setTimeout to allow render to complete
+                setTimeout(() => this._scrollToSelected(), 0);
+            }
+        }
+        _handleClose() {
+            if (!this._state.isOpen)
+                return;
+            this._state.isOpen = false;
+            this._dropdown.style.display = 'none';
+            this._input.setAttribute('aria-expanded', 'false');
+            this._updateArrowRotation();
+            this._emit('close', {});
+            this._config.callbacks.onClose?.();
+        }
+        _updateDropdownVisibility() {
+            if (this._state.isOpen) {
+                this._dropdown.style.display = 'block';
+                this._input.setAttribute('aria-expanded', 'true');
+            }
+            else {
+                this._dropdown.style.display = 'none';
+                this._input.setAttribute('aria-expanded', 'false');
+            }
+        }
+        _updateArrowRotation() {
+            if (this._arrowContainer) {
+                const arrow = this._arrowContainer.querySelector('.dropdown-arrow');
+                if (arrow) {
+                    if (this._state.isOpen) {
+                        arrow.classList.add('open');
+                    }
+                    else {
+                        arrow.classList.remove('open');
+                    }
+                }
+            }
+        }
+        _handleSearch(query) {
+            console.log('[EnhancedSelect] _handleSearch called with:', JSON.stringify(query));
+            this._state.searchQuery = query;
+            // Clear previous search timeout
+            if (this._searchTimeout) {
+                clearTimeout(this._searchTimeout);
+            }
+            // Search immediately - no debouncing for better responsiveness
+            // Users expect instant feedback as they type
+            this._state.isSearching = false;
+            // Ensure dropdown is open when searching
+            if (!this._state.isOpen) {
+                console.log('[EnhancedSelect] Opening dropdown for search');
+                this._handleOpen();
+            }
+            else {
+                // Filter and render options immediately
+                console.log('[EnhancedSelect] Dropdown already open, re-rendering options');
+                this._renderOptions();
+            }
+            // Get filtered items based on search query - searches ENTIRE phrase
+            const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
+            // FIX: Do not trim query to allow searching for phrases with spaces
+            const searchQuery = query.toLowerCase();
+            const filteredItems = searchQuery
+                ? this._state.loadedItems.filter((item) => {
+                    try {
+                        const label = String(getLabel(item)).toLowerCase();
+                        // Match the entire search phrase
+                        return label.includes(searchQuery);
+                    }
+                    catch (e) {
+                        return false;
+                    }
+                })
+                : this._state.loadedItems;
+            const count = filteredItems.length;
+            console.log(`[EnhancedSelect] Search results: ${count} items found for query "${searchQuery}"`);
+            // Announce search results for accessibility
+            if (searchQuery) {
+                this._announce(`${count} result${count !== 1 ? 's' : ''} found for "${query}"`);
+            }
+            // Only notify if query or result count changed to prevent infinite loops
+            if (query !== this._state.lastNotifiedQuery || count !== this._state.lastNotifiedResultCount) {
+                this._state.lastNotifiedQuery = query;
+                this._state.lastNotifiedResultCount = count;
+                // Use setTimeout to avoid synchronous state updates during render
+                setTimeout(() => {
+                    this._emit('search', { query, results: filteredItems, count });
+                    this._config.callbacks.onSearch?.(query);
+                }, 0);
+            }
+        }
+        _handleKeydown(e) {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this._state.isOpen) {
+                        this._handleOpen();
+                    }
+                    else {
+                        this._moveActive(1);
+                    }
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this._state.isOpen) {
+                        this._handleOpen();
+                    }
+                    else {
+                        this._moveActive(-1);
+                    }
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    if (this._state.isOpen) {
+                        this._setActive(0);
+                    }
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    if (this._state.isOpen) {
+                        const options = Array.from(this._optionsContainer.children);
+                        this._setActive(options.length - 1);
+                    }
+                    break;
+                case 'PageDown':
+                    e.preventDefault();
+                    if (this._state.isOpen) {
+                        this._moveActive(10);
+                    }
+                    break;
+                case 'PageUp':
+                    e.preventDefault();
+                    if (this._state.isOpen) {
+                        this._moveActive(-10);
+                    }
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this._state.activeIndex >= 0) {
+                        this._selectOption(this._state.activeIndex);
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    this._handleClose();
+                    break;
+                case 'a':
+                case 'A':
+                    if ((e.ctrlKey || e.metaKey) && this._config.selection.mode === 'multi') {
+                        e.preventDefault();
+                        this._selectAll();
+                    }
+                    break;
+                default:
+                    // Type-ahead search
+                    if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+                        this._handleTypeAhead(e.key);
+                    }
+                    break;
+            }
+        }
+        _moveActive(delta) {
+            const options = Array.from(this._optionsContainer.children);
+            const next = Math.max(0, Math.min(options.length - 1, this._state.activeIndex + delta));
+            this._setActive(next);
+        }
+        _setActive(index) {
+            const options = Array.from(this._optionsContainer.children);
+            // Clear previous active state
+            if (this._state.activeIndex >= 0 && options[this._state.activeIndex]) {
+                options[this._state.activeIndex].setActive(false);
+            }
+            this._state.activeIndex = index;
+            // Set new active state
+            if (options[index]) {
+                options[index].setActive(true);
+                options[index].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                // Announce position for screen readers
+                const total = options.length;
+                this._announce(`Item ${index + 1} of ${total}`);
+                // Update aria-activedescendant
+                const optionId = `${this._uniqueId}-option-${index}`;
+                this._input.setAttribute('aria-activedescendant', optionId);
+            }
+        }
+        _handleTypeAhead(char) {
+            if (this._typeTimeout)
+                clearTimeout(this._typeTimeout);
+            this._typeBuffer += char.toLowerCase();
+            this._typeTimeout = window.setTimeout(() => {
+                this._typeBuffer = '';
+            }, 500);
+            // Find first matching option
+            const getValue = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
+            const matchIndex = this._state.loadedItems.findIndex((item) => getValue(item).toLowerCase().startsWith(this._typeBuffer));
+            if (matchIndex >= 0) {
+                this._setActive(matchIndex);
+            }
+        }
+        _selectAll() {
+            if (this._config.selection.mode !== 'multi')
+                return;
+            const options = Array.from(this._optionsContainer.children);
+            const maxSelections = this._config.selection.maxSelections || 0;
+            options.forEach((option, index) => {
+                if (maxSelections > 0 && this._state.selectedIndices.size >= maxSelections) {
+                    return;
+                }
+                if (!this._state.selectedIndices.has(index)) {
+                    const config = option.getConfig();
+                    this._state.selectedIndices.add(index);
+                    this._state.selectedItems.set(index, config.item);
+                    option.setSelected(true);
+                }
+            });
+            this._updateInputDisplay();
+            this._emitChange();
+            this._announce(`Selected all ${options.length} items`);
+        }
+        _announce(message) {
+            if (this._liveRegion) {
+                this._liveRegion.textContent = message;
+                setTimeout(() => {
+                    if (this._liveRegion)
+                        this._liveRegion.textContent = '';
+                }, 1000);
+            }
+        }
+        _selectOption(index) {
+            // FIX: Do not rely on this._optionsContainer.children[index] because filtering changes the children
+            // Instead, use the index to update state directly
+            const item = this._state.loadedItems[index];
+            if (!item)
+                return;
+            const isCurrentlySelected = this._state.selectedIndices.has(index);
+            if (this._config.selection.mode === 'single') {
+                // Single select: clear previous and select new
+                const wasSelected = this._state.selectedIndices.has(index);
+                this._state.selectedIndices.clear();
+                this._state.selectedItems.clear();
+                if (!wasSelected) {
+                    // Select this option
+                    this._state.selectedIndices.add(index);
+                    this._state.selectedItems.set(index, item);
+                }
+                // Re-render to update all option styles
+                this._renderOptions();
+                if (this._config.selection.closeOnSelect) {
+                    this._handleClose();
+                }
+            }
+            else {
+                // Multi select with toggle
+                const maxSelections = this._config.selection.maxSelections || 0;
+                if (isCurrentlySelected) {
+                    // Deselect (toggle off)
+                    this._state.selectedIndices.delete(index);
+                    this._state.selectedItems.delete(index);
+                }
+                else {
+                    // Select (toggle on)
+                    if (maxSelections > 0 && this._state.selectedIndices.size >= maxSelections) {
+                        this._announce(`Maximum ${maxSelections} selections allowed`);
+                        return; // Max selections reached
+                    }
+                    this._state.selectedIndices.add(index);
+                    this._state.selectedItems.set(index, item);
+                }
+                // Re-render to update styles (safer than trying to find the element in filtered list)
+                this._renderOptions();
+            }
+            this._updateInputDisplay();
+            this._emitChange();
+            // Call user callback
+            const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
+            const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
+            this._config.callbacks.onSelect?.({
+                item: item,
+                index,
+                value: getValue(item),
+                label: getLabel(item),
+                selected: this._state.selectedIndices.has(index),
+            });
+        }
+        _handleOptionRemove(index) {
+            const option = this._optionsContainer.children[index];
+            if (!option)
+                return;
+            this._state.selectedIndices.delete(index);
+            this._state.selectedItems.delete(index);
+            option.setSelected(false);
+            this._updateInputDisplay();
+            this._emitChange();
+            const config = option.getConfig();
+            this._emit('remove', { item: config.item, index });
+        }
+        _updateInputDisplay() {
+            const selectedItems = Array.from(this._state.selectedItems.values());
+            const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
+            if (selectedItems.length === 0) {
+                this._input.value = '';
+                this._input.placeholder = this._config.placeholder || 'Select an option...';
+                // Clear any badges
+                const existingBadges = this._inputContainer.querySelectorAll('.selection-badge');
+                existingBadges.forEach(badge => badge.remove());
+            }
+            else if (this._config.selection.mode === 'single') {
+                this._input.value = getLabel(selectedItems[0]);
+            }
+            else {
+                // Multi-select: show badges instead of text in input
+                this._input.value = '';
+                this._input.placeholder = '';
+                // Clear existing badges
+                const existingBadges = this._inputContainer.querySelectorAll('.selection-badge');
+                existingBadges.forEach(badge => badge.remove());
+                // Create badges for each selected item
+                const selectedEntries = Array.from(this._state.selectedItems.entries());
+                selectedEntries.forEach(([index, item]) => {
+                    const badge = document.createElement('span');
+                    badge.className = 'selection-badge';
+                    badge.textContent = getLabel(item);
+                    // Add remove button to badge
+                    const removeBtn = document.createElement('button');
+                    removeBtn.className = 'badge-remove';
+                    removeBtn.innerHTML = '×';
+                    removeBtn.setAttribute('aria-label', `Remove ${getLabel(item)}`);
+                    removeBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        this._state.selectedIndices.delete(index);
+                        this._state.selectedItems.delete(index);
+                        this._updateInputDisplay();
+                        this._renderOptions();
+                        this._emitChange();
+                    });
+                    badge.appendChild(removeBtn);
+                    this._inputContainer.insertBefore(badge, this._input);
+                });
+            }
+        }
+        _renderOptionsWithAnimation() {
+            // Add fade-out animation
+            this._optionsContainer.style.opacity = '0';
+            this._optionsContainer.style.transition = 'opacity 0.15s ease-out';
+            setTimeout(() => {
+                this._renderOptions();
+                // Fade back in
+                this._optionsContainer.style.opacity = '1';
+                this._optionsContainer.style.transition = 'opacity 0.2s ease-in';
+            }, 150);
+        }
+        _scrollToSelected() {
+            if (this._state.selectedIndices.size === 0)
+                return;
+            const target = this._config.scrollToSelected.multiSelectTarget;
+            const indices = Array.from(this._state.selectedIndices).sort((a, b) => a - b);
+            const targetIndex = target === 'first' ? indices[0] : indices[indices.length - 1];
+            // FIX: Find the option element by ID instead of index in children
+            // because children list might be filtered or reordered
+            const optionId = `${this._uniqueId}-option-${targetIndex}`;
+            // We need to search in shadow root or options container
+            // Since options are custom elements, we can find them by ID if we set it (we do)
+            // But wait, we set ID on the element instance, but is it in the DOM?
+            // If filtered out, it won't be in the DOM.
+            // If we are searching, we might not want to scroll to selected if it's not visible
+            // But if we just opened the dropdown, we usually want to see the selected item.
+            // If the selected item is filtered out, we can't scroll to it.
+            // Try to find the element in the options container
+            // Note: querySelector on shadowRoot works if we set the ID attribute
+            // In _renderOptions we set: option.id = ...
+            const option = this._optionsContainer.querySelector(`[id="${optionId}"]`);
+            if (option) {
+                option.scrollIntoView({
+                    block: this._config.scrollToSelected.block || 'center',
+                    behavior: 'smooth',
+                });
+            }
+        }
+        async _loadMoreItems() {
+            if (this._state.isBusy)
+                return;
+            console.log('[InfiniteScroll] _loadMoreItems triggered');
+            this._setBusy(true);
+            // Save scroll position before loading
+            if (this._dropdown) {
+                this._state.lastScrollPosition = this._dropdown.scrollTop;
+                this._state.preserveScrollPosition = true;
+                // Update dropdown to show loading indicator but keep the
+                // same scrollTop so the visible items don't move.
+                this._renderOptions();
+                this._dropdown.scrollTop = this._state.lastScrollPosition;
+            }
+            try {
+                // Emit event for parent to handle
+                this._state.currentPage++;
+                console.log(`[InfiniteScroll] Emitting loadMore event for page ${this._state.currentPage}`);
+                this._emit('loadMore', { page: this._state.currentPage, items: [] });
+                this._config.callbacks.onLoadMore?.(this._state.currentPage);
+                // NOTE: We do NOT set isBusy = false here.
+                // The parent component MUST call setItems() or similar to clear the busy state.
+                // This prevents the sentinel from reappearing before new items are loaded.
+            }
+            catch (error) {
+                this._handleError(error);
+                this._setBusy(false); // Only clear on error
+            }
+        }
+        _setBusy(busy) {
+            this._state.isBusy = busy;
+            // Trigger re-render to show/hide busy indicator
+            // We use _renderOptions to handle the UI update
+            this._renderOptions();
+        }
+        _showBusyBucket() {
+            // Deprecated: Logic moved to _renderOptions
+        }
+        _hideBusyBucket() {
+            // Deprecated: Logic moved to _renderOptions
+        }
+        _handleError(error) {
+            this._emit('error', { message: error.message, cause: error });
+            this._config.callbacks.onError?.(error);
+        }
+        _emit(name, detail) {
+            this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+        }
+        _emitChange() {
+            const selectedItems = Array.from(this._state.selectedItems.values());
+            const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
+            const selectedValues = selectedItems.map(getValue);
+            const selectedIndices = Array.from(this._state.selectedIndices);
+            this._emit('change', { selectedItems, selectedValues, selectedIndices });
+            this._config.callbacks.onChange?.(selectedItems, selectedValues);
+        }
+        // Public API
+        /**
+         * Set items to display in the select
+         */
+        setItems(items) {
+            const previousLength = this._state.loadedItems.length;
+            this._state.loadedItems = items;
+            // If grouped items exist, flatten them to items
+            if (this._state.groupedItems.length > 0) {
+                this._state.loadedItems = this._state.groupedItems.flatMap(group => group.options);
+            }
+            const newLength = this._state.loadedItems.length;
+            // When infinite scroll is active (preserveScrollPosition = true),
+            // we need to maintain scroll position during the update
+            if (this._state.preserveScrollPosition && this._dropdown) {
+                const targetScrollTop = this._state.lastScrollPosition;
+                console.log('[InfiniteScroll] setItems: before render', {
+                    previousLength,
+                    newLength,
+                    lastScrollPosition: this._state.lastScrollPosition,
+                    scrollTop: this._dropdown.scrollTop,
+                    scrollHeight: this._dropdown.scrollHeight,
+                    clientHeight: this._dropdown.clientHeight
+                });
+                // Only clear loading if we actually got more items
+                if (newLength > previousLength) {
+                    this._state.isBusy = false;
+                }
+                this._renderOptions();
+                // Restore the exact scrollTop we had before loading
+                // so the previously visible items stay in place and
+                // new ones simply appear below.
+                this._dropdown.scrollTop = targetScrollTop;
+                // Ensure it sticks after layout
+                requestAnimationFrame(() => {
+                    if (this._dropdown) {
+                        this._dropdown.scrollTop = targetScrollTop;
+                        console.log('[InfiniteScroll] setItems: after render', {
+                            newLength,
+                            lastScrollPosition: this._state.lastScrollPosition,
+                            scrollTop: this._dropdown.scrollTop,
+                            scrollHeight: this._dropdown.scrollHeight,
+                            clientHeight: this._dropdown.clientHeight
+                        });
+                    }
+                });
+                // Only clear preserveScrollPosition if we got new items
+                if (newLength > previousLength) {
+                    this._state.preserveScrollPosition = false;
+                }
+            }
+            else {
+                // Normal update - just render normally
+                this._state.isBusy = false;
+                this._renderOptions();
+            }
+        }
+        /**
+         * Set grouped items
+         */
+        setGroupedItems(groupedItems) {
+            this._state.groupedItems = groupedItems;
+            this._state.loadedItems = groupedItems.flatMap(group => group.options);
+            this._renderOptions();
+        }
+        /**
+         * Get currently selected items
+         */
+        getSelectedItems() {
+            return Array.from(this._state.selectedItems.values());
+        }
+        /**
+         * Get all loaded items
+         */
+        get loadedItems() {
+            return this._state.loadedItems;
+        }
+        /**
+         * Get currently selected values
+         */
+        getSelectedValues() {
+            const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
+            return this.getSelectedItems().map(getValue);
+        }
+        /**
+         * Set selected items by value
+         */
+        async setSelectedValues(values) {
+            if (this._config.serverSide.enabled && this._config.serverSide.fetchSelectedItems) {
+                await this._loadSelectedItemsByValues(values);
+            }
+            else {
+                // Select from loaded items
+                const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
+                this._state.selectedIndices.clear();
+                this._state.selectedItems.clear();
+                this._state.loadedItems.forEach((item, index) => {
+                    if (values.includes(getValue(item))) {
+                        this._state.selectedIndices.add(index);
+                        this._state.selectedItems.set(index, item);
+                    }
+                });
+                this._renderOptions();
+                this._updateInputDisplay();
+                this._emitChange();
+            }
+        }
+        /**
+         * Load and select items by their values (for infinite scroll scenario)
+         */
+        async _loadSelectedItemsByValues(values) {
+            if (!this._config.serverSide.fetchSelectedItems)
+                return;
+            this._setBusy(true);
+            try {
+                const items = await this._config.serverSide.fetchSelectedItems(values);
+                this._state.selectedIndices.clear();
+                this._state.selectedItems.clear();
+                items.forEach((item, index) => {
+                    this._state.selectedIndices.add(index);
+                    this._state.selectedItems.set(index, item);
+                });
+                this._renderOptions();
+                this._updateInputDisplay();
+                this._emitChange();
+                // Scroll to selected if configured
+                if (this._config.scrollToSelected.enabled) {
+                    this._scrollToSelected();
+                }
+            }
+            catch (error) {
+                this._handleError(error);
+            }
+            finally {
+                this._setBusy(false);
+            }
+        }
+        /**
+         * Clear all selections
+         */
+        clear() {
+            this._state.selectedIndices.clear();
+            this._state.selectedItems.clear();
+            this._renderOptions();
+            this._updateInputDisplay();
+            this._emitChange();
+        }
+        /**
+         * Open dropdown
+         */
+        open() {
+            this._handleOpen();
+        }
+        /**
+         * Close dropdown
+         */
+        close() {
+            this._handleClose();
+        }
+        /**
+         * Update component configuration
+         */
+        updateConfig(config) {
+            this._config = selectConfig.mergeWithComponentConfig(config);
+            // Update input state based on new config
+            if (this._input) {
+                this._input.readOnly = !this._config.searchable;
+                this._input.setAttribute('aria-autocomplete', this._config.searchable ? 'list' : 'none');
+            }
+            // Re-initialize observers in case infinite scroll was enabled/disabled
+            this._initializeObservers();
+            this._renderOptions();
+        }
+        /**
+         * Set error state
+         */
+        setError(message) {
+            this._hasError = true;
+            this._errorMessage = message;
+            this._input.setAttribute('aria-invalid', 'true');
+            this._announce(`Error: ${message}`);
+        }
+        /**
+         * Clear error state
+         */
+        clearError() {
+            this._hasError = false;
+            this._errorMessage = '';
+            this._input.removeAttribute('aria-invalid');
+        }
+        /**
+         * Set required state
+         */
+        setRequired(required) {
+            if (required) {
+                this._input.setAttribute('aria-required', 'true');
+                this._input.setAttribute('required', '');
+            }
+            else {
+                this._input.removeAttribute('aria-required');
+                this._input.removeAttribute('required');
+            }
+        }
+        /**
+         * Validate selection (for required fields)
+         */
+        validate() {
+            const isRequired = this._input.hasAttribute('required');
+            if (isRequired && this._state.selectedIndices.size === 0) {
+                this.setError('Selection is required');
+                return false;
+            }
+            this.clearError();
+            return true;
+        }
+        /**
+         * Render options based on current state
+         */
+        _renderOptions() {
+            console.log('[EnhancedSelect] _renderOptions called');
+            // Cleanup observer
+            if (this._loadMoreTrigger && this._intersectionObserver) {
+                this._intersectionObserver.unobserve(this._loadMoreTrigger);
+            }
+            // Clear options container
+            this._optionsContainer.innerHTML = '';
+            // Ensure dropdown only contains options container (cleanup legacy direct children)
+            // We need to preserve optionsContainer, so we can't just clear dropdown.innerHTML
+            // But we can check if there are other children and remove them
+            Array.from(this._dropdown.children).forEach(child => {
+                if (child !== this._optionsContainer) {
+                    this._dropdown.removeChild(child);
+                }
+            });
+            // Ensure dropdown is visible if we are rendering options
+            if (this._state.isOpen && this._dropdown.style.display === 'none') {
+                this._dropdown.style.display = 'block';
+            }
+            // Show searching state (exclusive state)
+            if (this._state.isSearching) {
+                const searching = document.createElement('div');
+                searching.className = 'searching-state';
+                searching.textContent = 'Searching...';
+                this._optionsContainer.appendChild(searching);
+                return;
+            }
+            const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
+            const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
+            // Filter items by search query
+            const query = this._state.searchQuery.toLowerCase();
+            // Handle Grouped Items Rendering (when no search query)
+            if (this._state.groupedItems.length > 0 && !query) {
+                this._state.groupedItems.forEach(group => {
+                    const header = document.createElement('div');
+                    header.className = 'group-header';
+                    header.textContent = group.label;
+                    Object.assign(header.style, {
+                        padding: '8px 12px',
+                        fontWeight: '600',
+                        color: '#6b7280',
+                        backgroundColor: '#f3f4f6',
+                        fontSize: '12px',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                        position: 'sticky',
+                        top: '0',
+                        zIndex: '1',
+                        borderBottom: '1px solid #e5e7eb'
+                    });
+                    this._optionsContainer.appendChild(header);
+                    group.options.forEach(item => {
+                        this._renderSingleOption(item, getValue, getLabel);
+                    });
+                });
+            }
+            else {
+                // Normal rendering (flat list or filtered)
+                const itemsToRender = query
+                    ? this._state.loadedItems.filter((item) => {
+                        try {
+                            const label = String(getLabel(item)).toLowerCase();
+                            return label.includes(query);
+                        }
+                        catch (e) {
+                            return false;
+                        }
+                    })
+                    : this._state.loadedItems;
+                if (itemsToRender.length === 0 && !this._state.isBusy) {
+                    const empty = document.createElement('div');
+                    empty.className = 'empty-state';
+                    if (query) {
+                        empty.textContent = `No results found for "${this._state.searchQuery}"`;
+                    }
+                    else {
+                        empty.textContent = 'No options available';
+                    }
+                    this._optionsContainer.appendChild(empty);
+                }
+                else {
+                    itemsToRender.forEach((item) => {
+                        this._renderSingleOption(item, getValue, getLabel);
+                    });
+                }
+            }
+            // Append Busy Indicator if busy
+            if (this._state.isBusy && this._config.busyBucket.enabled) {
+                const busyBucket = document.createElement('div');
+                busyBucket.className = 'busy-bucket';
+                if (this._config.busyBucket.showSpinner) {
+                    const spinner = document.createElement('div');
+                    spinner.className = 'spinner';
+                    busyBucket.appendChild(spinner);
+                }
+                if (this._config.busyBucket.message) {
+                    const message = document.createElement('div');
+                    message.textContent = this._config.busyBucket.message;
+                    busyBucket.appendChild(message);
+                }
+                this._optionsContainer.appendChild(busyBucket);
+            }
+            // Append Load More Trigger (Button or Sentinel) if enabled and not busy
+            else if ((this._config.loadMore.enabled || this._config.infiniteScroll.enabled) && this._state.loadedItems.length > 0) {
+                this._addLoadMoreTrigger();
+            }
+        }
+        _renderSingleOption(item, getValue, getLabel) {
+            const option = document.createElement('div');
+            option.className = 'option';
+            const value = getValue(item);
+            const label = getLabel(item);
+            option.textContent = label;
+            option.dataset.value = String(value);
+            // Check if selected using selectedItems map
+            const isSelected = Array.from(this._state.selectedItems.values()).some(selectedItem => {
+                const selectedValue = getValue(selectedItem);
+                return selectedValue === value;
+            });
+            if (isSelected) {
+                option.classList.add('selected');
+            }
+            option.addEventListener('click', () => {
+                const index = this._state.loadedItems.indexOf(item);
+                if (index !== -1) {
+                    this._selectOption(index);
+                }
+            });
+            this._optionsContainer.appendChild(option);
+        }
+        _addLoadMoreTrigger() {
+            const container = document.createElement('div');
+            container.className = 'load-more-container';
+            if (this._config.infiniteScroll.enabled) {
+                // Infinite Scroll: Render an invisible sentinel
+                // It must have some height to be intersected
+                const sentinel = document.createElement('div');
+                sentinel.className = 'infinite-scroll-sentinel';
+                sentinel.style.height = '10px';
+                sentinel.style.width = '100%';
+                sentinel.style.opacity = '0'; // Invisible
+                this._loadMoreTrigger = sentinel;
+                container.appendChild(sentinel);
+            }
+            else {
+                // Manual Load More: Render a button
+                const button = document.createElement('button');
+                button.className = 'load-more-button';
+                button.textContent = `Load ${this._config.loadMore.itemsPerLoad} more`;
+                button.addEventListener('click', () => this._loadMoreItems());
+                this._loadMoreTrigger = button;
+                container.appendChild(button);
+            }
+            this._optionsContainer.appendChild(container);
+            // Setup intersection observer for auto-load
+            if (this._intersectionObserver && this._loadMoreTrigger) {
+                console.log('[InfiniteScroll] Observing sentinel');
+                this._intersectionObserver.observe(this._loadMoreTrigger);
+            }
+        }
+    }
+    // Register custom element
+    if (!customElements.get('enhanced-select')) {
+        customElements.define('enhanced-select', EnhancedSelect);
+    }
+
+    /**
+     * Independent Option Component
+     * High cohesion, low coupling - handles its own selection state and events
+     */
+    class SelectOption extends HTMLElement {
+        constructor(config) {
+            super();
+            this._config = config;
+            this._shadow = this.attachShadow({ mode: 'open' });
+            this._container = document.createElement('div');
+            this._container.className = 'option-container';
+            this._initializeStyles();
+            this._render();
+            this._attachEventListeners();
+            this._shadow.appendChild(this._container);
+        }
+        _initializeStyles() {
+            const style = document.createElement('style');
+            style.textContent = `
+      :host {
+        display: block;
+        position: relative;
+      }
+      
+      .option-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        cursor: pointer;
+        user-select: none;
+        transition: background-color 0.2s ease;
+      }
+      
+      .option-container:hover {
+        background-color: var(--select-option-hover-bg, #f0f0f0);
+      }
+      
+      .option-container.selected {
+        background-color: var(--select-option-selected-bg, #e3f2fd);
+        color: var(--select-option-selected-color, #1976d2);
+      }
+      
+      .option-container.active {
+        outline: 2px solid var(--select-option-active-outline, #1976d2);
+        outline-offset: -2px;
+      }
+      
+      .option-container.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+      
+      .option-content {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      
+      .remove-button {
+        margin-left: 8px;
+        padding: 2px 6px;
+        border: none;
+        background-color: var(--select-remove-btn-bg, transparent);
+        color: var(--select-remove-btn-color, #666);
+        cursor: pointer;
+        border-radius: 3px;
+        font-size: 16px;
+        line-height: 1;
+        transition: all 0.2s ease;
+      }
+      
+      .remove-button:hover {
+        background-color: var(--select-remove-btn-hover-bg, #ffebee);
+        color: var(--select-remove-btn-hover-color, #c62828);
+      }
+      
+      .remove-button:focus {
+        outline: 2px solid var(--select-remove-btn-focus-outline, #1976d2);
+        outline-offset: 2px;
+      }
+    `;
+            this._shadow.appendChild(style);
+        }
+        _render() {
+            const { item, index, selected, disabled, active, render, showRemoveButton } = this._config;
+            // Clear container
+            this._container.innerHTML = '';
+            // Apply state classes
+            this._container.classList.toggle('selected', selected);
+            this._container.classList.toggle('disabled', disabled || false);
+            this._container.classList.toggle('active', active || false);
+            // Custom class name
+            if (this._config.className) {
+                this._container.className += ' ' + this._config.className;
+            }
+            // Apply custom styles
+            if (this._config.style) {
+                Object.assign(this._container.style, this._config.style);
+            }
+            // Render content
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'option-content';
+            if (render) {
+                const rendered = render(item, index);
+                if (typeof rendered === 'string') {
+                    contentDiv.innerHTML = rendered;
+                }
+                else {
+                    contentDiv.appendChild(rendered);
+                }
+            }
+            else {
+                const label = this._getLabel();
+                contentDiv.textContent = label;
+            }
+            this._container.appendChild(contentDiv);
+            // Add remove button if needed
+            if (showRemoveButton && selected) {
+                this._removeButton = document.createElement('button');
+                this._removeButton.className = 'remove-button';
+                this._removeButton.innerHTML = '×';
+                this._removeButton.setAttribute('aria-label', 'Remove option');
+                this._removeButton.setAttribute('type', 'button');
+                this._container.appendChild(this._removeButton);
+            }
+            // Set ARIA attributes
+            this.setAttribute('role', 'option');
+            this.setAttribute('aria-selected', String(selected));
+            if (disabled)
+                this.setAttribute('aria-disabled', 'true');
+            this.id = `select-option-${index}`;
+        }
+        _attachEventListeners() {
+            // Click handler for selection
+            this._container.addEventListener('click', (e) => {
+                // Don't trigger selection if clicking remove button
+                if (e.target === this._removeButton) {
+                    return;
+                }
+                if (!this._config.disabled) {
+                    this._handleSelect();
+                }
+            });
+            // Remove button handler
+            if (this._removeButton) {
+                this._removeButton.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._handleRemove();
+                });
+            }
+            // Keyboard handler
+            this.addEventListener('keydown', (e) => {
+                if (this._config.disabled)
+                    return;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this._handleSelect();
+                }
+                else if (e.key === 'Delete' || e.key === 'Backspace') {
+                    if (this._config.selected && this._config.showRemoveButton) {
+                        e.preventDefault();
+                        this._handleRemove();
+                    }
+                }
+            });
+        }
+        _handleSelect() {
+            const detail = {
+                item: this._config.item,
+                index: this._config.index,
+                value: this._getValue(),
+                label: this._getLabel(),
+                selected: !this._config.selected,
+            };
+            this.dispatchEvent(new CustomEvent('optionSelect', {
+                detail,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        _handleRemove() {
+            const detail = {
+                item: this._config.item,
+                index: this._config.index,
+                value: this._getValue(),
+                label: this._getLabel(),
+                selected: false,
+            };
+            this.dispatchEvent(new CustomEvent('optionRemove', {
+                detail,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        _getValue() {
+            if (this._config.getValue) {
+                return this._config.getValue(this._config.item);
+            }
+            return this._config.item?.value ?? this._config.item;
+        }
+        _getLabel() {
+            if (this._config.getLabel) {
+                return this._config.getLabel(this._config.item);
+            }
+            return this._config.item?.label ?? String(this._config.item);
+        }
+        /**
+         * Update option configuration and re-render
+         */
+        updateConfig(updates) {
+            this._config = { ...this._config, ...updates };
+            this._render();
+            this._attachEventListeners();
+        }
+        /**
+         * Get current configuration
+         */
+        getConfig() {
+            return this._config;
+        }
+        /**
+         * Get option value
+         */
+        getValue() {
+            return this._getValue();
+        }
+        /**
+         * Get option label
+         */
+        getLabel() {
+            return this._getLabel();
+        }
+        /**
+         * Set selected state
+         */
+        setSelected(selected) {
+            this._config.selected = selected;
+            this._render();
+        }
+        /**
+         * Set active state
+         */
+        setActive(active) {
+            this._config.active = active;
+            this._render();
+        }
+        /**
+         * Set disabled state
+         */
+        setDisabled(disabled) {
+            this._config.disabled = disabled;
+            this._render();
+        }
+    }
+    // Register custom element
+    if (!customElements.get('select-option')) {
+        customElements.define('select-option', SelectOption);
+    }
+
+    /**
+     * Web Worker protocol types for off-main-thread processing.
+     * Supports heavy transforms, fuzzy search, and data processing.
+     */
+    /**
+     * Worker manager for handling off-main-thread processing.
+     * Automatically falls back if workers not available or blocked by COOP/COEP.
+     */
+    class WorkerManager {
+        constructor() {
+            this.worker = null;
+            this.pending = new Map();
+            this.supportsWorkers = false;
+            this.supportsSharedArrayBuffer = false;
+            this.nextId = 0;
+            this.detectFeatures();
+            this.initWorker();
+        }
+        /**
+         * Detect browser capabilities
+         */
+        detectFeatures() {
+            this.supportsWorkers = typeof Worker !== 'undefined';
+            this.supportsSharedArrayBuffer = typeof SharedArrayBuffer !== 'undefined';
+        }
+        /**
+         * Initialize worker (inline blob URL for simplicity)
+         */
+        initWorker() {
+            if (!this.supportsWorkers)
+                return;
+            try {
+                const workerCode = this.generateWorkerCode();
+                const blob = new Blob([workerCode], { type: 'application/javascript' });
+                const url = URL.createObjectURL(blob);
+                this.worker = new Worker(url);
+                this.worker.onmessage = this.handleMessage.bind(this);
+                this.worker.onerror = this.handleError.bind(this);
+                // Cleanup blob URL after worker loads
+                URL.revokeObjectURL(url);
+            }
+            catch (err) {
+                console.warn('Worker initialization failed, falling back to main thread', err);
+                this.worker = null;
+            }
+        }
+        /**
+         * Generate worker code as string
+         */
+        generateWorkerCode() {
+            return `
+      // Worker code
+      self.onmessage = function(e) {
+        const start = performance.now();
+        const { id, type, payload } = e.data;
+        
+        try {
+          let result;
+          
+          switch (type) {
+            case 'transform':
+              result = handleTransform(payload);
+              break;
+            case 'search':
+              result = handleSearch(payload);
+              break;
+            case 'filter':
+              result = handleFilter(payload);
+              break;
+            case 'sort':
+              result = handleSort(payload);
+              break;
+            default:
+              throw new Error('Unknown operation: ' + type);
+          }
+          
+          const duration = performance.now() - start;
+          self.postMessage({
+            id,
+            success: true,
+            data: result,
+            duration,
+          });
+        } catch (error) {
+          self.postMessage({
+            id,
+            success: false,
+            error: error.message,
+          });
+        }
+      };
+      
+      function handleTransform({ items, transformer }) {
+        const fn = new Function('item', 'index', 'return (' + transformer + ')(item, index)');
+        return items.map((item, i) => fn(item, i));
+      }
+      
+      function handleSearch({ items, query, fuzzy, maxResults }) {
+        const lowerQuery = query.toLowerCase();
+        const results = [];
+        
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          const text = String(item).toLowerCase();
+          
+          if (fuzzy) {
+            if (fuzzyMatch(text, lowerQuery)) {
+              results.push({ item, index: i, score: fuzzyScore(text, lowerQuery) });
+            }
+          } else {
+            if (text.includes(lowerQuery)) {
+              results.push({ item, index: i });
+            }
+          }
+          
+          if (maxResults && results.length >= maxResults) break;
+        }
+        
+        if (fuzzy) {
+          results.sort((a, b) => b.score - a.score);
+        }
+        
+        return results;
+      }
+      
+      function handleFilter({ items, predicate }) {
+        const fn = new Function('item', 'index', 'return (' + predicate + ')(item, index)');
+        return items.filter((item, i) => fn(item, i));
+      }
+      
+      function handleSort({ items, comparator }) {
+        const fn = new Function('a', 'b', 'return (' + comparator + ')(a, b)');
+        return [...items].sort(fn);
+      }
+      
+      // Simple fuzzy matching (Levenshtein-inspired)
+      function fuzzyMatch(text, query) {
+        let qi = 0;
+        for (let ti = 0; ti < text.length && qi < query.length; ti++) {
+          if (text[ti] === query[qi]) qi++;
+        }
+        return qi === query.length;
+      }
+      
+      function fuzzyScore(text, query) {
+        let score = 0;
+        let qi = 0;
+        for (let ti = 0; ti < text.length && qi < query.length; ti++) {
+          if (text[ti] === query[qi]) {
+            score += 100 - ti; // Earlier matches score higher
+            qi++;
+          }
+        }
+        return score;
+      }
+    `;
+        }
+        /**
+         * Handle worker message
+         */
+        handleMessage(e) {
+            const { id, success, data, error } = e.data;
+            const pending = this.pending.get(id);
+            if (!pending)
+                return;
+            clearTimeout(pending.timeout);
+            this.pending.delete(id);
+            if (success) {
+                pending.resolve(data);
+            }
+            else {
+                pending.reject(new Error(error || 'Worker error'));
+            }
+        }
+        /**
+         * Handle worker error
+         */
+        handleError(err) {
+            console.error('Worker error:', err);
+            // Reject all pending requests
+            for (const [id, pending] of this.pending) {
+                clearTimeout(pending.timeout);
+                pending.reject(new Error('Worker crashed'));
+            }
+            this.pending.clear();
+        }
+        /**
+         * Execute operation (worker or fallback)
+         */
+        async execute(type, payload, timeout = 5000) {
+            // Fallback to main thread if no worker
+            if (!this.worker) {
+                return this.executeFallback(type, payload);
+            }
+            const id = `req_${this.nextId++}`;
+            return new Promise((resolve, reject) => {
+                const timeoutId = setTimeout(() => {
+                    this.pending.delete(id);
+                    reject(new Error('Worker timeout'));
+                }, timeout);
+                this.pending.set(id, { resolve, reject, timeout: timeoutId });
+                this.worker.postMessage({ id, type, payload });
+            });
+        }
+        /**
+         * Fallback to main thread execution
+         */
+        async executeFallback(type, payload) {
+            // Simple synchronous fallback implementations
+            switch (type) {
+                case 'transform': {
+                    const { items, transformer } = payload;
+                    const fn = new Function('item', 'index', `return (${transformer})(item, index)`);
+                    return items.map((item, i) => fn(item, i));
+                }
+                case 'search': {
+                    const { items, query, fuzzy } = payload;
+                    const lowerQuery = query.toLowerCase();
+                    const results = [];
+                    items.forEach((item, index) => {
+                        const itemStr = String(item).toLowerCase();
+                        if (fuzzy) {
+                            // Simple fuzzy match - check if all query chars appear in order
+                            let queryIndex = 0;
+                            for (let i = 0; i < itemStr.length && queryIndex < lowerQuery.length; i++) {
+                                if (itemStr[i] === lowerQuery[queryIndex]) {
+                                    queryIndex++;
+                                }
+                            }
+                            if (queryIndex === lowerQuery.length) {
+                                results.push({ item, index });
+                            }
+                        }
+                        else {
+                            // Exact substring match
+                            if (itemStr.includes(lowerQuery)) {
+                                results.push({ item, index });
+                            }
+                        }
+                    });
+                    return results;
+                }
+                case 'filter': {
+                    const { items, predicate } = payload;
+                    const fn = new Function('item', 'index', `return (${predicate})(item, index)`);
+                    return items.filter((item, i) => fn(item, i));
+                }
+                case 'sort': {
+                    const { items, comparator } = payload;
+                    const fn = new Function('a', 'b', `return (${comparator})(a, b)`);
+                    return [...items].sort(fn);
+                }
+                default:
+                    throw new Error(`Unknown operation: ${type}`);
+            }
+        }
+        /**
+         * Transform items with custom function
+         */
+        async transform(items, transformer) {
+            return this.execute('transform', {
+                items,
+                transformer: transformer.toString(),
+            });
+        }
+        /**
+         * Search items with optional fuzzy matching
+         */
+        async search(items, query, fuzzy = false) {
+            return this.execute('search', { items, query, fuzzy });
+        }
+        /**
+         * Filter items with predicate
+         */
+        async filter(items, predicate) {
+            return this.execute('filter', {
+                items,
+                predicate: predicate.toString(),
+            });
+        }
+        /**
+         * Sort items with comparator
+         */
+        async sort(items, comparator) {
+            return this.execute('sort', {
+                items,
+                comparator: comparator.toString(),
+            });
+        }
+        /**
+         * Check if workers are supported
+         */
+        get hasWorkerSupport() {
+            return this.supportsWorkers && this.worker !== null;
+        }
+        /**
+         * Check if SharedArrayBuffer is supported
+         */
+        get hasSharedArrayBuffer() {
+            return this.supportsSharedArrayBuffer;
+        }
+        /**
+         * Terminate worker
+         */
+        destroy() {
+            if (this.worker) {
+                // Reject all pending
+                for (const [id, pending] of this.pending) {
+                    clearTimeout(pending.timeout);
+                    pending.reject(new Error('Worker terminated'));
+                }
+                this.pending.clear();
+                this.worker.terminate();
+                this.worker = null;
+            }
+        }
+    }
+    /**
+     * Singleton instance
+     */
+    let workerManager = null;
+    function getWorkerManager() {
+        if (!workerManager) {
+            workerManager = new WorkerManager();
+        }
+        return workerManager;
+    }
+
+    /**
+     * Performance telemetry module for tracking frame timing and performance metrics.
+     * Uses PerformanceObserver for precise measurements.
+     *
+     * Tracks:
+     * - Frame time (should be < 16.67ms for 60fps)
+     * - Main thread work per frame (target < 8ms, ideal 4-6ms)
+     * - Long tasks (> 50ms blocks)
+     * - Memory usage (if available)
+     */
+    class PerformanceTelemetry {
+        constructor() {
+            this.frameTimes = [];
+            this.longTasks = 0;
+            this.lastFrameTime = 0;
+            this.rafId = 0;
+            this.measuring = false;
+            this.observer = null;
+            this.workTimes = [];
+            /**
+             * Measure frame timing via requestAnimationFrame
+             */
+            this.measureFrame = () => {
+                if (!this.measuring)
+                    return;
+                const now = performance.now();
+                const frameTime = now - this.lastFrameTime;
+                this.frameTimes.push(frameTime);
+                // Keep last 60 frames (1 second at 60fps)
+                if (this.frameTimes.length > 60) {
+                    this.frameTimes.shift();
+                }
+                this.lastFrameTime = now;
+                this.rafId = requestAnimationFrame(this.measureFrame);
+            };
+            this.setupObserver();
+        }
+        /**
+         * Setup PerformanceObserver for long tasks
+         */
+        setupObserver() {
+            if (typeof PerformanceObserver === 'undefined')
+                return;
+            try {
+                this.observer = new PerformanceObserver((list) => {
+                    for (const entry of list.getEntries()) {
+                        if (entry.entryType === 'longtask' && entry.duration > 50) {
+                            this.longTasks++;
+                        }
+                        if (entry.entryType === 'measure') {
+                            this.workTimes.push(entry.duration);
+                        }
+                    }
+                });
+                // Observe long tasks if supported
+                try {
+                    this.observer.observe({ entryTypes: ['longtask', 'measure'] });
+                }
+                catch {
+                    // Fallback to just measure if longtask not supported
+                    this.observer.observe({ entryTypes: ['measure'] });
+                }
+            }
+            catch (err) {
+                console.warn('PerformanceObserver not available', err);
+            }
+        }
+        /**
+         * Start measuring frame performance
+         */
+        start() {
+            if (this.measuring)
+                return;
+            this.measuring = true;
+            this.frameTimes = [];
+            this.workTimes = [];
+            this.longTasks = 0;
+            this.lastFrameTime = performance.now();
+            this.measureFrame();
+        }
+        /**
+         * Stop measuring
+         */
+        stop() {
+            this.measuring = false;
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = 0;
+            }
+        }
+        /**
+         * Mark start of work for custom measurement
+         */
+        markStart(label) {
+            performance.mark(`${label}-start`);
+        }
+        /**
+         * Mark end of work and measure duration
+         */
+        markEnd(label) {
+            performance.mark(`${label}-end`);
+            performance.measure(label, `${label}-start`, `${label}-end`);
+            const measure = performance.getEntriesByName(label, 'measure')[0];
+            return measure ? measure.duration : 0;
+        }
+        /**
+         * Get current metrics snapshot
+         */
+        getMetrics() {
+            const avgFrameTime = this.frameTimes.length > 0
+                ? this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length
+                : 0;
+            const fps = avgFrameTime > 0 ? 1000 / avgFrameTime : 0;
+            const longFrames = this.frameTimes.filter(t => t > 16.67).length;
+            const droppedFrames = this.frameTimes.filter(t => t > 33.33).length; // > 2 frames
+            const avgMainThreadWork = this.workTimes.length > 0
+                ? this.workTimes.reduce((a, b) => a + b, 0) / this.workTimes.length
+                : 0;
+            const metrics = {
+                frames: {
+                    frameTime: avgFrameTime,
+                    fps,
+                    longTasks: longFrames,
+                    droppedFrames,
+                },
+                mainThreadWork: avgMainThreadWork,
+                longTaskCount: this.longTasks,
+            };
+            // Add memory info if available
+            if ('memory' in performance && performance.memory) {
+                const mem = performance.memory;
+                metrics.memory = {
+                    usedJSHeapSize: mem.usedJSHeapSize,
+                    totalJSHeapSize: mem.totalJSHeapSize,
+                    jsHeapSizeLimit: mem.jsHeapSizeLimit,
+                };
+            }
+            return metrics;
+        }
+        /**
+         * Check if performance is acceptable
+         */
+        isPerformanceGood() {
+            const metrics = this.getMetrics();
+            // Target: 60fps (16.67ms), < 8ms main thread work, minimal long tasks
+            return (metrics.frames.fps >= 55 && // Allow some variance
+                metrics.mainThreadWork < 8 &&
+                metrics.frames.longTasks < 3 // Max 5% long frames
+            );
+        }
+        /**
+         * Get detailed report as string
+         */
+        getReport() {
+            const metrics = this.getMetrics();
+            let report = '=== Performance Report ===\n';
+            report += `FPS: ${metrics.frames.fps.toFixed(2)}\n`;
+            report += `Avg Frame Time: ${metrics.frames.frameTime.toFixed(2)}ms\n`;
+            report += `Long Frames (>16.67ms): ${metrics.frames.longTasks}\n`;
+            report += `Dropped Frames (>33ms): ${metrics.frames.droppedFrames}\n`;
+            report += `Avg Main Thread Work: ${metrics.mainThreadWork.toFixed(2)}ms\n`;
+            report += `Long Tasks (>50ms): ${metrics.longTaskCount}\n`;
+            if (metrics.memory) {
+                const usedMB = (metrics.memory.usedJSHeapSize / 1024 / 1024).toFixed(2);
+                const limitMB = (metrics.memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2);
+                report += `Memory: ${usedMB}MB / ${limitMB}MB\n`;
+            }
+            report += `Status: ${this.isPerformanceGood() ? '✓ GOOD' : '✗ POOR'}\n`;
+            return report;
+        }
+        /**
+         * Reset all metrics
+         */
+        reset() {
+            this.frameTimes = [];
+            this.workTimes = [];
+            this.longTasks = 0;
+        }
+        /**
+         * Cleanup
+         */
+        destroy() {
+            this.stop();
+            if (this.observer) {
+                this.observer.disconnect();
+                this.observer = null;
+            }
+        }
+    }
+    /**
+     * Singleton instance
+     */
+    let telemetry = null;
+    function getTelemetry() {
+        if (!telemetry) {
+            telemetry = new PerformanceTelemetry();
+        }
+        return telemetry;
+    }
+    /**
+     * Helper to measure async function execution
+     */
+    async function measureAsync(label, fn) {
+        const start = performance.now();
+        const result = await fn();
+        const duration = performance.now() - start;
+        console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
+        return { result, duration };
+    }
+    /**
+     * Helper to measure sync function execution
+     */
+    function measureSync(label, fn) {
+        const start = performance.now();
+        const result = fn();
+        const duration = performance.now() - start;
+        console.log(`[Perf] ${label}: ${duration.toFixed(2)}ms`);
+        return { result, duration };
+    }
+
+    /**
+     * Security utilities for CSP-compliant environments.
+     * All utilities are opt-in and do not run by default.
+     */
+    /**
+     * No-op sanitizer - DOES NOT sanitize HTML.
+     * Used by default to avoid forcing a dependency on sanitizer libraries.
+     * Developers using untrusted data MUST provide a real sanitizer.
+     */
+    class NoOpSanitizer {
+        sanitize(html) {
+            return html;
+        }
+    }
+    /**
+     * Registry for custom sanitizer implementation.
+     * Defaults to no-op - developers must explicitly set a sanitizer.
+     */
+    let globalSanitizer = new NoOpSanitizer();
+    /**
+     * Set a custom HTML sanitizer (e.g., DOMPurify).
+     *
+     * @example
+     * import DOMPurify from 'dompurify';
+     * setHTMLSanitizer({
+     *   sanitize: (html) => DOMPurify.sanitize(html)
+     * });
+     */
+    function setHTMLSanitizer(sanitizer) {
+        globalSanitizer = sanitizer;
+    }
+    /**
+     * Get the current HTML sanitizer.
+     */
+    function getHTMLSanitizer() {
+        return globalSanitizer;
+    }
+    /**
+     * Sanitize HTML using the registered sanitizer.
+     * WARNING: Default is no-op! Set a real sanitizer for untrusted content.
+     *
+     * @param html - HTML string to sanitize
+     * @returns Sanitized HTML string
+     */
+    function sanitizeHTML(html) {
+        return globalSanitizer.sanitize(html);
+    }
+    /**
+     * Create a text node (CSP-safe alternative to innerHTML for text content).
+     *
+     * @param text - Text content
+     * @returns Text node
+     */
+    function createTextNode(text) {
+        return document.createTextNode(text);
+    }
+    /**
+     * Set text content safely (CSP-compliant).
+     *
+     * @param element - Target element
+     * @param text - Text content
+     */
+    function setTextContent(element, text) {
+        element.textContent = text;
+    }
+    /**
+     * Create an element with attributes (CSP-safe).
+     * No inline styles or event handlers.
+     *
+     * @param tagName - HTML tag name
+     * @param attributes - Element attributes (excluding style and on* handlers)
+     * @param textContent - Optional text content
+     * @returns Created element
+     */
+    function createElement(tagName, attributes, textContent) {
+        const el = document.createElement(tagName);
+        if (attributes) {
+            for (const [key, value] of Object.entries(attributes)) {
+                // Block dangerous attributes
+                if (key.startsWith('on') || key === 'style') {
+                    console.warn(`[NativeSelect Security] Blocked attribute: ${key}`);
+                    continue;
+                }
+                el.setAttribute(key, value);
+            }
+        }
+        if (textContent !== undefined) {
+            el.textContent = textContent;
+        }
+        return el;
+    }
+    /**
+     * Set CSS custom properties (CSP-safe way to style elements).
+     *
+     * @param element - Target element
+     * @param properties - CSS custom properties (e.g., { '--color': 'red' })
+     */
+    function setCSSProperties(element, properties) {
+        for (const [key, value] of Object.entries(properties)) {
+            if (!key.startsWith('--')) {
+                console.warn(`[NativeSelect Security] CSS property must start with --: ${key}`);
+                continue;
+            }
+            element.style.setProperty(key, value);
+        }
+    }
+    /**
+     * Feature detection utilities for CSP-restricted environments.
+     */
+    const CSPFeatures = {
+        /**
+         * Check if inline scripts are allowed (CSP: script-src 'unsafe-inline').
+         */
+        hasInlineScripts() {
+            try {
+                // Try to create a function (blocked by CSP: script-src without 'unsafe-eval')
+                new Function('return true');
+                return true;
+            }
+            catch {
+                return false;
+            }
+        },
+        /**
+         * Check if eval is allowed (CSP: script-src 'unsafe-eval').
+         */
+        hasEval() {
+            try {
+                eval('true');
+                return true;
+            }
+            catch {
+                return false;
+            }
+        },
+        /**
+         * Check if SharedArrayBuffer is available.
+         * Required for some Worker features, blocked without COOP/COEP headers.
+         */
+        hasSharedArrayBuffer() {
+            return typeof SharedArrayBuffer !== 'undefined';
+        },
+        /**
+         * Check if Web Workers are available and functional.
+         */
+        hasWorkers() {
+            try {
+                return typeof Worker !== 'undefined';
+            }
+            catch {
+                return false;
+            }
+        },
+        /**
+         * Check if we're in a sandboxed iframe.
+         */
+        isSandboxed() {
+            try {
+                // Sandboxed iframes may not have access to parent
+                return window !== window.parent && !window.parent;
+            }
+            catch {
+                return true;
+            }
+        },
+        /**
+         * Check CSP policy via meta tag or SecurityPolicyViolationEvent.
+         */
+        getCSPDirectives() {
+            const metaTags = document.querySelectorAll('meta[http-equiv="Content-Security-Policy"]');
+            const directives = [];
+            metaTags.forEach((meta) => {
+                const content = meta.getAttribute('content');
+                if (content) {
+                    directives.push(content);
+                }
+            });
+            return directives;
+        }
+    };
+    /**
+     * Detect environment capabilities once at initialization.
+     */
+    function detectEnvironment() {
+        return {
+            canUseWorkers: CSPFeatures.hasWorkers(),
+            canUseSharedArrayBuffer: CSPFeatures.hasSharedArrayBuffer(),
+            canUseInlineScripts: CSPFeatures.hasInlineScripts(),
+            canUseEval: CSPFeatures.hasEval(),
+            isSandboxed: CSPFeatures.isSandboxed(),
+            cspDirectives: CSPFeatures.getCSPDirectives()
+        };
+    }
+    /**
+     * Validation for untrusted HTML in templates.
+     * Logs warning if no sanitizer is configured.
+     */
+    function validateTemplate(html, source) {
+        if (globalSanitizer instanceof NoOpSanitizer) {
+            console.warn(`[NativeSelect Security] Template from "${source}" contains HTML but no sanitizer is configured. ` +
+                `This may be unsafe if the content is untrusted. ` +
+                `Call setHTMLSanitizer() with a sanitizer like DOMPurify.`);
+        }
+        return sanitizeHTML(html);
+    }
+    /**
+     * Check if a string looks like it might contain executable code.
+     */
+    function containsSuspiciousPatterns(str) {
+        const patterns = [
+            /<script/i,
+            /javascript:/i,
+            /on\w+\s*=/i, // event handlers like onclick=
+            /eval\s*\(/i,
+            /Function\s*\(/i,
+            /setTimeout\s*\(/i,
+            /setInterval\s*\(/i
+        ];
+        return patterns.some(pattern => pattern.test(str));
+    }
+    /**
+     * Escape HTML entities for text content.
+     */
+    function escapeHTML(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    /**
+     * Escape attribute values.
+     */
+    function escapeAttribute(attr) {
+        return attr
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+
+    /**
+     * CSP-compliant styling utilities.
+     * No inline styles or runtime style tag injection.
+     * Uses CSS custom properties and class names only.
+     */
+    /**
+     * Apply CSS classes to an element (CSP-safe).
+     */
+    function applyClasses(element, classes) {
+        element.className = classes.filter(Boolean).join(' ');
+    }
+    /**
+     * Toggle a CSS class (CSP-safe).
+     */
+    function toggleClass(element, className, force) {
+        element.classList.toggle(className, force);
+    }
+    /**
+     * Set CSS custom properties (CSP-safe dynamic styling).
+     * All properties must start with -- (CSS variables).
+     *
+     * @example
+     * setCustomProperties(element, {
+     *   '--item-height': '48px',
+     *   '--selected-bg': '#0066cc'
+     * });
+     */
+    function setCustomProperties(element, properties) {
+        for (const [key, value] of Object.entries(properties)) {
+            if (!key.startsWith('--')) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.warn(`[NativeSelect CSP] Custom property must start with --: "${key}". Skipping.`);
+                }
+                continue;
+            }
+            element.style.setProperty(key, value);
+        }
+    }
+    /**
+     * Get a CSS custom property value.
+     */
+    function getCustomProperty(element, propertyName) {
+        return getComputedStyle(element).getPropertyValue(propertyName).trim();
+    }
+    /**
+     * Remove a CSS custom property.
+     */
+    function removeCustomProperty(element, propertyName) {
+        element.style.removeProperty(propertyName);
+    }
+    /**
+     * Predefined theme as CSS custom properties.
+     * Can be overridden by consumers via CSS.
+     */
+    const defaultTheme = {
+        '--ns-item-height': '40px',
+        '--ns-item-padding': '8px 12px',
+        '--ns-item-bg': 'transparent',
+        '--ns-item-hover-bg': 'rgba(0, 0, 0, 0.05)',
+        '--ns-item-selected-bg': 'rgba(0, 102, 204, 0.1)',
+        '--ns-item-active-bg': 'rgba(0, 102, 204, 0.2)',
+        '--ns-item-color': 'inherit',
+        '--ns-item-selected-color': '#0066cc',
+        '--ns-border-color': '#ccc',
+        '--ns-border-radius': '4px',
+        '--ns-focus-outline': '2px solid #0066cc',
+        '--ns-font-size': '14px',
+        '--ns-font-family': 'system-ui, -apple-system, sans-serif'
+    };
+    /**
+     * Apply the default theme to an element.
+     */
+    function applyDefaultTheme(element) {
+        setCustomProperties(element, defaultTheme);
+    }
+    /**
+     * Static CSS for shadow DOM (no runtime injection).
+     * This CSS is CSP-safe because it's defined at build time as a string constant,
+     * not generated at runtime.
+     */
+    const shadowDOMStyles = `
+:host {
+  display: block;
+  box-sizing: border-box;
+  font-family: var(--ns-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--ns-font-size, 14px);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.ns-list {
+  position: relative;
+  overflow: auto;
+  max-height: var(--ns-max-height, 300px);
+  border: 1px solid var(--ns-border-color, #ccc);
+  border-radius: var(--ns-border-radius, 4px);
+  background: var(--ns-bg, white);
+  outline: none;
+}
+
+.ns-list:focus {
+  outline: var(--ns-focus-outline, 2px solid #0066cc);
+  outline-offset: -2px;
+}
+
+.ns-item {
+  padding: var(--ns-item-padding, 8px 12px);
+  min-height: var(--ns-item-height, 40px);
+  color: var(--ns-item-color, inherit);
+  background: var(--ns-item-bg, transparent);
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.15s ease;
+}
+
+.ns-item:hover {
+  background: var(--ns-item-hover-bg, rgba(0, 0, 0, 0.05));
+}
+
+.ns-item[aria-selected="true"] {
+  background: var(--ns-item-selected-bg, rgba(0, 102, 204, 0.1));
+  color: var(--ns-item-selected-color, #0066cc);
+}
+
+.ns-item[data-active="true"] {
+  background: var(--ns-item-active-bg, rgba(0, 102, 204, 0.2));
+}
+
+.ns-item[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ns-viewport {
+  position: relative;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.ns-spacer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  pointer-events: none;
+}
+
+/* Screen reader only */
+.ns-sr-only {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+/* Portal mode (teleported outside shadow DOM) */
+.ns-portal {
+  position: fixed;
+  z-index: var(--ns-portal-z-index, 9999);
+}
+
+/* CSP warning banner (only shown in development) */
+.ns-csp-warning {
+  padding: 8px;
+  background: #fff3cd;
+  border: 1px solid #ffc107;
+  border-radius: 4px;
+  color: #856404;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+`;
+    /**
+     * Inject static styles into shadow root (CSP-safe).
+     * Only called once during component initialization.
+     */
+    function injectShadowStyles(shadowRoot) {
+        const style = document.createElement('style');
+        style.textContent = shadowDOMStyles;
+        shadowRoot.appendChild(style);
+    }
+    /**
+     * Check if element has overflow:hidden ancestors (portal fallback detection).
+     */
+    function hasOverflowHiddenAncestor(element) {
+        let current = element.parentElement;
+        while (current && current !== document.body) {
+            const overflow = getComputedStyle(current).overflow;
+            if (overflow === 'hidden' || overflow === 'clip') {
+                return true;
+            }
+            current = current.parentElement;
+        }
+        return false;
+    }
+    /**
+     * Runtime warning for CSP violations (development only).
+     */
+    function warnCSPViolation(feature, fallback) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn(`[NativeSelect CSP] Feature "${feature}" blocked by Content Security Policy. ` +
+                `Falling back to "${fallback}".`);
+        }
+    }
+
+    exports.CSPFeatures = CSPFeatures;
+    exports.DOMPool = DOMPool;
+    exports.EnhancedSelect = EnhancedSelect;
+    exports.FenwickTree = FenwickTree;
+    exports.NativeSelectElement = NativeSelectElement;
+    exports.PerformanceTelemetry = PerformanceTelemetry;
+    exports.SelectOption = SelectOption;
+    exports.Virtualizer = Virtualizer;
+    exports.WorkerManager = WorkerManager;
+    exports.applyClasses = applyClasses;
+    exports.applyDefaultTheme = applyDefaultTheme;
+    exports.configureSelect = configureSelect;
+    exports.containsSuspiciousPatterns = containsSuspiciousPatterns;
+    exports.createElement = createElement;
+    exports.createRendererHelpers = createRendererHelpers;
+    exports.createTextNode = createTextNode;
+    exports.defaultTheme = defaultTheme;
+    exports.detectEnvironment = detectEnvironment;
+    exports.escapeAttribute = escapeAttribute;
+    exports.escapeHTML = escapeHTML;
+    exports.getCustomProperty = getCustomProperty;
+    exports.getHTMLSanitizer = getHTMLSanitizer;
+    exports.getTelemetry = getTelemetry;
+    exports.getWorkerManager = getWorkerManager;
+    exports.hasOverflowHiddenAncestor = hasOverflowHiddenAncestor;
+    exports.injectShadowStyles = injectShadowStyles;
+    exports.measureAsync = measureAsync;
+    exports.measureSync = measureSync;
+    exports.removeCustomProperty = removeCustomProperty;
+    exports.renderTemplate = renderTemplate;
+    exports.resetSelectConfig = resetSelectConfig;
+    exports.sanitizeHTML = sanitizeHTML;
+    exports.selectConfig = selectConfig;
+    exports.setCSSProperties = setCSSProperties;
+    exports.setCustomProperties = setCustomProperties;
+    exports.setHTMLSanitizer = setHTMLSanitizer;
+    exports.setTextContent = setTextContent;
+    exports.shadowDOMStyles = shadowDOMStyles;
+    exports.toggleClass = toggleClass;
+    exports.validateTemplate = validateTemplate;
+    exports.warnCSPViolation = warnCSPViolation;
+
+}));
+//# sourceMappingURL=index.umd.js.map