@smilodon/core 1.0.0

package/dist/index.cjs

@@ -0,0 +1,3685 @@
+'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.cjs.map