@smilodon/core 1.3.9 → 1.3.10

package/dist/index.umd.js

@@ -1443,7 +1443,7 @@
         deepMerge(target, source) {
             const result = { ...target };
             for (const key in source) {
-                if (source.hasOwnProperty(key)) {
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
                     const sourceValue = source[key];
                     const targetValue = result[key];
                     if (sourceValue && typeof sourceValue === 'object' && !Array.isArray(sourceValue)) {
@@ -1475,182 +1475,20 @@
     }
 
     /**
-     * Enhanced Select Component
-     * Implements all advanced features: infinite scroll, load more, busy state,
-     * server-side selection, and full customization
+     * Independent Option Component
+     * High cohesion, low coupling - handles its own selection state and events
      */
-    class EnhancedSelect extends HTMLElement {
-        constructor() {
+    class SelectOption extends HTMLElement {
+        constructor(config) {
             super();
-            this._pageCache = {};
-            this._typeBuffer = '';
-            this._hasError = false;
-            this._errorMessage = '';
-            this._boundArrowClick = null;
+            this._config = config;
             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,
-                isExpanded: false,
-            };
-            // 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();
-            // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
+            this._container = document.createElement('div');
+            this._container.className = 'option-container';
             this._initializeStyles();
-            this._assembleDOM();
+            this._render();
             this._attachEventListeners();
-            this._initializeObservers();
-        }
-        connectedCallback() {
-            // WORKAROUND: Force display style on host element for Angular compatibility
-            // Angular's rendering seems to not apply :host styles correctly in some cases
-            // Must be done in connectedCallback when element is attached to DOM
-            this.style.display = 'block';
-            this.style.width = '100%';
-            // 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" 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');
@@ -1658,1618 +1496,2075 @@
       :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: var(--select-input-gap, 6px);
-        padding: var(--select-input-padding, 6px 52px 6px 8px);
-        min-height: var(--select-input-min-height, 44px);
-        background: var(--select-input-bg, white);
-        border: var(--select-input-border, 1px solid #d1d5db);
-        border-radius: var(--select-input-border-radius, 6px);
-        box-sizing: border-box;
-        transition: all 0.2s ease;
-      }
-      
-      .input-container:focus-within {
-        border-color: var(--select-input-focus-border, #667eea);
-        box-shadow: var(--select-input-focus-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
-      }
-      
-      /* Gradient separator before arrow */
-      .input-container::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: var(--select-separator-position, 40px);
-        transform: translateY(-50%);
-        width: var(--select-separator-width, 1px);
-        height: var(--select-separator-height, 60%);
-        background: var(--select-separator-bg, var(--select-separator-gradient, 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: var(--select-arrow-width, 40px);
+      .option-container {
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: space-between;
+        padding: 8px 12px;
         cursor: pointer;
+        user-select: none;
         transition: background-color 0.2s ease;
-        border-radius: var(--select-arrow-border-radius, 0 4px 4px 0);
-        z-index: 2;
       }
       
-      .dropdown-arrow-container:hover {
-        background-color: var(--select-arrow-hover-bg, rgba(102, 126, 234, 0.08));
+      .option-container:hover {
+        background-color: var(--select-option-hover-bg, #f0f0f0);
       }
       
-      .dropdown-arrow {
-        width: var(--select-arrow-size, 16px);
-        height: var(--select-arrow-size, 16px);
-        color: var(--select-arrow-color, #667eea);
-        transition: transform 0.2s ease, color 0.2s ease;
-        transform: translateY(0);
+      .option-container.selected {
+        background-color: var(--select-option-selected-bg, #e3f2fd);
+        color: var(--select-option-selected-color, #1976d2);
       }
       
-      .dropdown-arrow path {
-        stroke-width: var(--select-arrow-stroke-width, 2);
+      .option-container.active {
+        outline: 2px solid var(--select-option-active-outline, #1976d2);
+        outline-offset: -2px;
       }
       
-      .dropdown-arrow-container:hover .dropdown-arrow {
-        color: var(--select-arrow-hover-color, #667eea);
-      }
-      
-      .dropdown-arrow.open {
-        transform: rotate(180deg);
-      }
-      
-      .select-input {
-        flex: 1;
-        min-width: var(--select-input-min-width, 120px);
-        padding: var(--select-input-field-padding, 4px);
-        border: none;
-        font-size: var(--select-input-font-size, 14px);
-        line-height: var(--select-input-line-height, 1.5);
-        color: var(--select-input-color, #1f2937);
-        background: transparent;
-        box-sizing: border-box;
-        outline: none;
-        font-family: var(--select-font-family, inherit);
-      }
-      
-      .select-input::placeholder {
-        color: var(--select-input-placeholder-color, #9ca3af);
-      }
-      
-      .selection-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--select-badge-gap, 4px);
-        padding: var(--select-badge-padding, 4px 8px);
-        margin: var(--select-badge-margin, 2px);
-        background: var(--select-badge-bg, #667eea);
-        color: var(--select-badge-color, white);
-        border-radius: var(--select-badge-border-radius, 4px);
-        font-size: var(--select-badge-font-size, 13px);
-        line-height: 1;
-      }
-      
-      .badge-remove {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: var(--select-badge-remove-size, 16px);
-        height: var(--select-badge-remove-size, 16px);
-        padding: 0;
-        margin-left: 4px;
-        background: var(--select-badge-remove-bg, rgba(255, 255, 255, 0.3));
-        border: none;
-        border-radius: 50%;
-        color: var(--select-badge-remove-color, white);
-        font-size: var(--select-badge-remove-font-size, 16px);
-        line-height: 1;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-      
-      .badge-remove:hover {
-        background: var(--select-badge-remove-hover-bg, rgba(255, 255, 255, 0.5));
-      }
-      
-      .select-input:disabled {
-        background-color: var(--select-disabled-bg, #f5f5f5);
+      .option-container.disabled {
+        opacity: 0.5;
         cursor: not-allowed;
+        pointer-events: none;
       }
       
-      .select-dropdown {
-        position: absolute;
-        scroll-behavior: smooth;
-        top: 100%;
-        left: 0;
-        right: 0;
-        margin-top: var(--select-dropdown-margin-top, 4px);
-        max-height: var(--select-dropdown-max-height, 300px);
+      .option-content {
+        flex: 1;
         overflow: hidden;
-        background: var(--select-dropdown-bg, white);
-        border: var(--select-dropdown-border, 1px solid #ccc);
-        border-radius: var(--select-dropdown-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;
-        max-height: var(--select-options-max-height, 300px);
-        overflow: auto;
-        transition: opacity 0.2s ease-in-out;
-        background: var(--select-options-bg, white);
-      }
-
-      .option {
-        padding: var(--select-option-padding, 8px 12px);
-        cursor: pointer;
-        color: var(--select-option-color, #1f2937);
-        background: var(--select-option-bg, white);
-        transition: var(--select-option-transition, background-color 0.15s ease);
-        user-select: none;
-        font-size: var(--select-option-font-size, 14px);
-        line-height: var(--select-option-line-height, 1.5);
-        border: var(--select-option-border, none);
-        border-bottom: var(--select-option-border-bottom, none);
-      }
-
-      .option:hover {
-        background-color: var(--select-option-hover-bg, #f3f4f6);
-        color: var(--select-option-hover-color, #1f2937);
-      }
-
-      .option.selected {
-        background-color: var(--select-option-selected-bg, #e0e7ff);
-        color: var(--select-option-selected-color, #4338ca);
-        font-weight: var(--select-option-selected-weight, 500);
-      }
-
-      .option.active {
-        background-color: var(--select-option-active-bg, #f3f4f6);
-        color: var(--select-option-active-color, #1f2937);
-      }
-      
-      .load-more-container {
-        padding: var(--select-load-more-padding, 12px);
-        text-align: center;
-        border-top: var(--select-divider-border, 1px solid #e0e0e0);
-        background: var(--select-load-more-bg, white);
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       
-      .load-more-button {
-        padding: var(--select-button-padding, 8px 16px);
-        border: var(--select-button-border, 1px solid #1976d2);
-        background: var(--select-button-bg, white);
-        color: var(--select-button-color, #1976d2);
-        border-radius: var(--select-button-border-radius, 4px);
+      .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;
-        font-size: var(--select-button-font-size, 14px);
-        font-family: var(--select-font-family, inherit);
+        border-radius: 3px;
+        font-size: 16px;
+        line-height: 1;
         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: var(--select-button-disabled-opacity, 0.5);
-        cursor: not-allowed;
-      }
-      
-      .busy-bucket {
-        padding: var(--select-busy-padding, 16px);
-        text-align: center;
-        color: var(--select-busy-color, #666);
-        background: var(--select-busy-bg, white);
-        font-size: var(--select-busy-font-size, 14px);
-      }
-      
-      .spinner {
-        display: inline-block;
-        width: var(--select-spinner-size, 20px);
-        height: var(--select-spinner-size, 20px);
-        border: var(--select-spinner-border, 2px solid #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: var(--select-empty-padding, 24px);
-        text-align: center;
-        color: var(--select-empty-color, #999);
-        font-size: var(--select-empty-font-size, 14px);
-        background: var(--select-empty-bg, white);
-      }
-      
-      .searching-state {
-        padding: var(--select-searching-padding, 24px);
-        text-align: center;
-        color: var(--select-searching-color, #667eea);
-        font-size: var(--select-searching-font-size, 14px);
-        font-style: italic;
-        background: var(--select-searching-bg, white);
-        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);
+      .remove-button:hover {
+        background-color: var(--select-remove-btn-hover-bg, #ffebee);
+        color: var(--select-remove-btn-hover-color, #c62828);
       }
       
-      /* Accessibility: Reduced motion */
-      @media (prefers-reduced-motion: reduce) {
-        * {
-          animation-duration: 0.01ms !important;
-          animation-iteration-count: 1 !important;
-          transition-duration: 0.01ms !important;
-        }
+      .remove-button:focus {
+        outline: 2px solid var(--select-remove-btn-focus-outline, #1976d2);
+        outline-offset: 2px;
       }
-      
-      /* Dark mode - Opt-in via class or data attribute */
-      :host(.dark-mode),
-      :host([data-theme="dark"]) {
-        .input-container {
-          background: var(--select-dark-bg, #1f2937);
-          border-color: var(--select-dark-border, #4b5563);
-        }
-        
-        .select-input {
-          color: var(--select-dark-text, #f9fafb);
-        }
-        
-        .select-input::placeholder {
-          color: var(--select-dark-placeholder, #6b7280);
-        }
-        
-        .select-dropdown {
-          background: var(--select-dark-dropdown-bg, #1f2937);
-          border-color: var(--select-dark-dropdown-border, #4b5563);
-        }
-        
-        .options-container {
-          background: var(--select-dark-options-bg, #1f2937);
-        }
-        
-        .option {
-          color: var(--select-dark-option-color, #f9fafb);
-          background: var(--select-dark-option-bg, #1f2937);
-        }
-        
-        .option:hover {
-          background-color: var(--select-dark-option-hover-bg, #374151);
-          color: var(--select-dark-option-hover-color, #f9fafb);
+    `;
+            this._shadow.appendChild(style);
         }
-        
-        .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);
-          color: var(--select-dark-option-active-color, #f9fafb);
-        }
-        
-        .busy-bucket,
-        .empty-state {
-          color: var(--select-dark-busy-color, #9ca3af);
-        }
-        
-        .input-container::after {
-          background: linear-gradient(
-            to bottom,
-            transparent 0%,
-            rgba(255, 255, 255, 0.1) 20%,
-            rgba(255, 255, 255, 0.1) 80%,
-            transparent 100%
-          );
-        }
-      }
-      
-      /* Accessibility: High contrast mode */
-      @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;
-      }
-    `;
-            // Insert as first child to ensure styles are processed first
-            if (this._shadow.firstChild) {
-                this._shadow.insertBefore(style, this._shadow.firstChild);
+        _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 {
-                this._shadow.appendChild(style);
+                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 = this._config.id || `select-option-${index}`;
         }
         _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
+            // Click handler for selection
             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)
+                // Don't trigger selection if clicking remove button
+                if (e.target === this._removeButton) {
                     return;
-                const query = e.target.value;
-                this._handleSearch(query);
+                }
+                if (!this._config.disabled) {
+                    this._handleSelect();
+                }
             });
-            // 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();
+            // 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();
+                    }
                 }
             });
         }
-        _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) {
-                            if (!this._state.isBusy) {
-                                this._loadMoreItems();
-                            }
-                        }
-                    });
-                }, { threshold: 0.1 });
-            }
+        _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,
+            }));
         }
-        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);
+        _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;
         }
-        _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.
+        _getLabel() {
+            if (this._config.getLabel) {
+                return this._config.getLabel(this._config.item);
             }
-            // Render options when opening
-            this._renderOptions();
-            this._emit('open', {});
-            this._config.callbacks.onOpen?.();
-            // Scroll to selected if configured
-            if (this._config.scrollToSelected.enabled) {
-                // Use requestAnimationFrame for better timing after render
-                requestAnimationFrame(() => {
-                    // Double RAF to ensure layout is complete
-                    requestAnimationFrame(() => {
-                        this._scrollToSelected();
-                    });
-                });
+            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);
+    }
+
+    /**
+     * 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._pendingFirstRenderMark = false;
+            this._pendingSearchRenderMark = false;
+            this._rangeAnchorIndex = null;
+            this._shadow = this.attachShadow({ mode: 'open' });
+            this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
+            this._rendererHelpers = this._buildRendererHelpers();
+            // 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,
+                isExpanded: false,
+            };
+            // 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();
+            // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
+            this._initializeStyles();
+            this._assembleDOM();
+            this._attachEventListeners();
+            this._initializeObservers();
+        }
+        connectedCallback() {
+            // WORKAROUND: Force display style on host element for Angular compatibility
+            // Angular's rendering seems to not apply :host styles correctly in some cases
+            // Must be done in connectedCallback when element is attached to DOM
+            this.style.display = 'block';
+            this.style.width = '100%';
+            // 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();
             }
         }
-        _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?.();
+        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);
+            }
         }
-        _updateDropdownVisibility() {
-            if (this._state.isOpen) {
-                this._dropdown.style.display = 'block';
-                this._input.setAttribute('aria-expanded', 'true');
+        _createContainer() {
+            const container = document.createElement('div');
+            container.className = 'select-container';
+            if (this._config.styles.classNames?.container) {
+                container.className += ' ' + this._config.styles.classNames.container;
             }
-            else {
-                this._dropdown.style.display = 'none';
-                this._input.setAttribute('aria-expanded', 'false');
+            if (this._config.styles.container) {
+                Object.assign(container.style, this._config.styles.container);
             }
+            return container;
         }
-        _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');
-                    }
+        _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.id = `${this._uniqueId}-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;
         }
-        _handleSearch(query) {
-            this._state.searchQuery = query;
-            // Clear previous search timeout
-            if (this._searchTimeout) {
-                clearTimeout(this._searchTimeout);
+        _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;
             }
-            // 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) {
-                this._handleOpen();
+            if (this._config.styles.dropdown) {
+                Object.assign(dropdown.style, this._config.styles.dropdown);
             }
-            else {
-                // Filter and render options immediately
-                this._renderOptions();
+            dropdown.setAttribute('role', 'listbox');
+            dropdown.setAttribute('aria-labelledby', `${this._uniqueId}-input`);
+            if (this._config.selection.mode === 'multi') {
+                dropdown.setAttribute('aria-multiselectable', 'true');
             }
-            // 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;
-            // Announce search results for accessibility
-            if (searchQuery) {
-                this._announce(`${count} result${count !== 1 ? 's' : ''} found for "${query}"`);
+            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" 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: var(--select-input-gap, 6px);
+        padding: var(--select-input-padding, 6px 52px 6px 8px);
+        min-height: var(--select-input-min-height, 44px);
+        max-height: var(--select-input-max-height, 160px);
+        overflow-y: var(--select-input-overflow-y, auto);
+        align-content: flex-start;
+        background: var(--select-input-bg, white);
+        border: var(--select-input-border, 1px solid #d1d5db);
+        border-radius: var(--select-input-border-radius, 6px);
+        box-sizing: border-box;
+        transition: all 0.2s ease;
+      }
+      
+      .input-container:focus-within {
+        border-color: var(--select-input-focus-border, #667eea);
+        box-shadow: var(--select-input-focus-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
+      }
+      
+      /* Gradient separator before arrow */
+      .input-container::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: var(--select-separator-position, 40px);
+        transform: translateY(-50%);
+        width: var(--select-separator-width, 1px);
+        height: var(--select-separator-height, 60%);
+        background: var(--select-separator-bg, var(--select-separator-gradient, 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: var(--select-arrow-width, 40px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        border-radius: var(--select-arrow-border-radius, 0 4px 4px 0);
+        z-index: 2;
+      }
+      
+      .dropdown-arrow-container:hover {
+        background-color: var(--select-arrow-hover-bg, rgba(102, 126, 234, 0.08));
+      }
+      
+      .dropdown-arrow {
+        width: var(--select-arrow-size, 16px);
+        height: var(--select-arrow-size, 16px);
+        color: var(--select-arrow-color, #667eea);
+        transition: transform 0.2s ease, color 0.2s ease;
+        transform: translateY(0);
+      }
+      
+      .dropdown-arrow path {
+        stroke-width: var(--select-arrow-stroke-width, 2);
+      }
+      
+      .dropdown-arrow-container:hover .dropdown-arrow {
+        color: var(--select-arrow-hover-color, #667eea);
+      }
+      
+      .dropdown-arrow.open {
+        transform: rotate(180deg);
+      }
+      
+      .select-input {
+        flex: 1;
+        min-width: var(--select-input-min-width, 120px);
+        padding: var(--select-input-field-padding, 4px);
+        border: none;
+        font-size: var(--select-input-font-size, 14px);
+        line-height: var(--select-input-line-height, 1.5);
+        color: var(--select-input-color, #1f2937);
+        background: transparent;
+        box-sizing: border-box;
+        outline: none;
+        font-family: var(--select-font-family, inherit);
+      }
+      
+      .select-input::placeholder {
+        color: var(--select-input-placeholder-color, #9ca3af);
+      }
+      
+      .selection-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--select-badge-gap, 4px);
+        padding: var(--select-badge-padding, 4px 8px);
+        margin: var(--select-badge-margin, 2px);
+        background: var(--select-badge-bg, #667eea);
+        color: var(--select-badge-color, white);
+        border-radius: var(--select-badge-border-radius, 4px);
+        font-size: var(--select-badge-font-size, 13px);
+        line-height: 1;
+        max-width: var(--select-badge-max-width, 100%);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .badge-remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--select-badge-remove-size, 16px);
+        height: var(--select-badge-remove-size, 16px);
+        padding: 0;
+        margin-left: 4px;
+        background: var(--select-badge-remove-bg, rgba(255, 255, 255, 0.3));
+        border: none;
+        border-radius: 50%;
+        color: var(--select-badge-remove-color, white);
+        font-size: var(--select-badge-remove-font-size, 16px);
+        line-height: 1;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      
+      .badge-remove:hover {
+        background: var(--select-badge-remove-hover-bg, rgba(255, 255, 255, 0.5));
+      }
+
+      .badge-remove:focus-visible {
+        outline: 2px solid var(--select-badge-remove-focus-outline, rgba(255, 255, 255, 0.8));
+        outline-offset: 2px;
+      }
+      
+      .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: var(--select-dropdown-margin-top, 4px);
+        max-height: var(--select-dropdown-max-height, 300px);
+        overflow: hidden;
+        background: var(--select-dropdown-bg, white);
+        border: var(--select-dropdown-border, 1px solid #ccc);
+        border-radius: var(--select-dropdown-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;
+        max-height: var(--select-options-max-height, 300px);
+        overflow: auto;
+        transition: opacity 0.2s ease-in-out;
+        background: var(--select-options-bg, white);
+      }
+
+      .option {
+        padding: var(--select-option-padding, 8px 12px);
+        cursor: pointer;
+        color: var(--select-option-color, #1f2937);
+        background: var(--select-option-bg, white);
+        transition: var(--select-option-transition, background-color 0.15s ease);
+        user-select: none;
+        font-size: var(--select-option-font-size, 14px);
+        line-height: var(--select-option-line-height, 1.5);
+        border: var(--select-option-border, none);
+        border-bottom: var(--select-option-border-bottom, none);
+      }
+
+      .option:hover {
+        background-color: var(--select-option-hover-bg, #f3f4f6);
+        color: var(--select-option-hover-color, #1f2937);
+      }
+
+      .option.selected {
+        background-color: var(--select-option-selected-bg, #e0e7ff);
+        color: var(--select-option-selected-color, #4338ca);
+        font-weight: var(--select-option-selected-weight, 500);
+      }
+
+      .option.active {
+        background-color: var(--select-option-active-bg, #f3f4f6);
+        color: var(--select-option-active-color, #1f2937);
+        outline: var(--select-option-active-outline, 2px solid rgba(99, 102, 241, 0.45));
+        outline-offset: -2px;
+      }
+
+      .option:active {
+        background-color: var(--select-option-pressed-bg, #e5e7eb);
+      }
+      
+      .load-more-container {
+        padding: var(--select-load-more-padding, 12px);
+        text-align: center;
+        border-top: var(--select-divider-border, 1px solid #e0e0e0);
+        background: var(--select-load-more-bg, white);
+      }
+      
+      .load-more-button {
+        padding: var(--select-button-padding, 8px 16px);
+        border: var(--select-button-border, 1px solid #1976d2);
+        background: var(--select-button-bg, white);
+        color: var(--select-button-color, #1976d2);
+        border-radius: var(--select-button-border-radius, 4px);
+        cursor: pointer;
+        font-size: var(--select-button-font-size, 14px);
+        font-family: var(--select-font-family, inherit);
+        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: var(--select-button-disabled-opacity, 0.5);
+        cursor: not-allowed;
+      }
+      
+      .busy-bucket {
+        padding: var(--select-busy-padding, 16px);
+        text-align: center;
+        color: var(--select-busy-color, #666);
+        background: var(--select-busy-bg, white);
+        font-size: var(--select-busy-font-size, 14px);
+      }
+      
+      .spinner {
+        display: inline-block;
+        width: var(--select-spinner-size, 20px);
+        height: var(--select-spinner-size, 20px);
+        border: var(--select-spinner-border, 2px solid #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: var(--select-empty-padding, 24px);
+        text-align: center;
+        color: var(--select-empty-color, #6b7280);
+        font-size: var(--select-empty-font-size, 14px);
+        background: var(--select-empty-bg, white);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        min-height: var(--select-empty-min-height, 72px);
+      }
+      
+      .searching-state {
+        padding: var(--select-searching-padding, 24px);
+        text-align: center;
+        color: var(--select-searching-color, #667eea);
+        font-size: var(--select-searching-font-size, 14px);
+        font-style: italic;
+        background: var(--select-searching-bg, white);
+        animation: pulse 1.5s ease-in-out infinite;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        min-height: var(--select-searching-min-height, 72px);
+      }
+      
+      @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;
+        }
+      }
+      
+      /* Dark mode - Opt-in via class or data attribute */
+      :host(.dark-mode),
+      :host([data-theme="dark"]) {
+        .input-container {
+          background: var(--select-dark-bg, #1f2937);
+          border-color: var(--select-dark-border, #4b5563);
+        }
+        
+        .select-input {
+          color: var(--select-dark-text, #f9fafb);
+        }
+        
+        .select-input::placeholder {
+          color: var(--select-dark-placeholder, #6b7280);
+        }
+        
+        .select-dropdown {
+          background: var(--select-dark-dropdown-bg, #1f2937);
+          border-color: var(--select-dark-dropdown-border, #4b5563);
+        }
+        
+        .options-container {
+          background: var(--select-dark-options-bg, #1f2937);
+        }
+        
+        .option {
+          color: var(--select-dark-option-color, #f9fafb);
+          background: var(--select-dark-option-bg, #1f2937);
+        }
+        
+        .option:hover {
+          background-color: var(--select-dark-option-hover-bg, #374151);
+          color: var(--select-dark-option-hover-color, #f9fafb);
+        }
+        
+        .option.selected {
+          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);
+          color: var(--select-dark-option-active-color, #f9fafb);
+          outline: var(--select-dark-option-active-outline, 2px solid rgba(129, 140, 248, 0.55));
+        }
+
+        .selection-badge {
+          background: var(--select-dark-badge-bg, #4f46e5);
+          color: var(--select-dark-badge-color, #eef2ff);
+        }
+
+        .badge-remove {
+          background: var(--select-dark-badge-remove-bg, rgba(255, 255, 255, 0.15));
+          color: var(--select-dark-badge-remove-color, #e5e7eb);
+        }
+
+        .badge-remove:hover {
+          background: var(--select-dark-badge-remove-hover-bg, rgba(255, 255, 255, 0.3));
+        }
+        
+        .busy-bucket,
+        .empty-state {
+          color: var(--select-dark-busy-color, #9ca3af);
+          background: var(--select-dark-empty-bg, #111827);
+        }
+
+        .searching-state {
+          background: var(--select-dark-searching-bg, #111827);
+        }
+        
+        .input-container::after {
+          background: linear-gradient(
+            to bottom,
+            transparent 0%,
+            rgba(255, 255, 255, 0.1) 20%,
+            rgba(255, 255, 255, 0.1) 80%,
+            transparent 100%
+          );
+        }
+      }
+      
+      /* Accessibility: High contrast mode */
+      @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;
+      }
+    `;
+            // Insert as first child to ensure styles are processed first
+            if (this._shadow.firstChild) {
+                this._shadow.insertBefore(style, this._shadow.firstChild);
             }
-            // 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);
+            else {
+                this._shadow.appendChild(style);
             }
         }
-        _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':
+        _attachEventListeners() {
+            // Arrow click handler
+            if (this._arrowContainer) {
+                this._boundArrowClick = (e) => {
+                    e.stopPropagation();
                     e.preventDefault();
-                    if (this._state.activeIndex >= 0) {
-                        this._selectOption(this._state.activeIndex);
+                    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();
                     }
-                    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();
+                    else if (!this._state.isOpen && this._config.callbacks.onClose) {
+                        this._config.callbacks.onClose();
                     }
-                    break;
-                default:
-                    // Type-ahead search
-                    if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
-                        this._handleTypeAhead(e.key);
+                    // Scroll to selected when opening
+                    if (!wasOpen && this._state.isOpen && this._state.selectedIndices.size > 0) {
+                        setTimeout(() => this._scrollToSelected(), 50);
                     }
-                    break;
+                };
+                this._arrowContainer.addEventListener('click', this._boundArrowClick);
             }
-        }
-        _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]) {
-                const prevOption = options[this._state.activeIndex];
-                // Check if it's a custom SelectOption or a lightweight DOM element
-                if ('setActive' in prevOption && typeof prevOption.setActive === 'function') {
-                    prevOption.setActive(false);
+            // 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) => {
+                const related = e.relatedTarget;
+                if (related && (this._shadow.contains(related) || this._container.contains(related))) {
+                    return;
                 }
-                else {
-                    // Lightweight option - remove active class
-                    prevOption.classList.remove('smilodon-option--active');
-                    prevOption.setAttribute('aria-selected', 'false');
+                // Delay to allow option click/focus transitions
+                setTimeout(() => {
+                    const active = document.activeElement;
+                    if (active && (this._shadow.contains(active) || this._container.contains(active))) {
+                        return;
+                    }
+                    this._handleClose();
+                }, 0);
+            });
+            // Input search
+            this._input.addEventListener('input', (e) => {
+                if (!this._config.searchable)
+                    return;
+                const query = e.target.value;
+                this._handleSearch(query);
+            });
+            // Keyboard navigation
+            this._input.addEventListener('keydown', (e) => this._handleKeydown(e));
+            // Click outside to close
+            document.addEventListener('pointerdown', (e) => {
+                const path = (e.composedPath && e.composedPath()) || [];
+                const clickedInside = path.includes(this) || path.includes(this._container) || this._shadow.contains(e.target);
+                if (!clickedInside) {
+                    this._handleClose();
                 }
+            });
+        }
+        _initializeObservers() {
+            // Disconnect existing observer if any
+            if (this._intersectionObserver) {
+                this._intersectionObserver.disconnect();
+                this._intersectionObserver = undefined;
             }
-            this._state.activeIndex = index;
-            // Set new active state
-            if (options[index]) {
-                const option = options[index];
-                // Check if it's a custom SelectOption or a lightweight DOM element
-                if ('setActive' in option && typeof option.setActive === 'function') {
-                    option.setActive(true);
-                }
-                else {
-                    // Lightweight option - add active class
-                    option.classList.add('smilodon-option--active');
-                    option.setAttribute('aria-selected', 'true');
-                }
-                option.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);
+            // Intersection observer for infinite scroll
+            if (this._config.infiniteScroll.enabled) {
+                this._intersectionObserver = new IntersectionObserver((entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.isIntersecting) {
+                            if (!this._state.isBusy) {
+                                this._loadMoreItems();
+                            }
+                        }
+                    });
+                }, { threshold: 0.1 });
             }
         }
-        _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);
+        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);
             }
         }
-        _selectAll() {
-            if (this._config.selection.mode !== 'multi')
+        _handleOpen() {
+            if (!this._config.enabled || this._state.isOpen)
                 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)) {
-                    // Check if it's a custom SelectOption or a lightweight DOM element
-                    if ('getConfig' in option && typeof option.getConfig === 'function') {
-                        const config = option.getConfig();
-                        this._state.selectedIndices.add(index);
-                        this._state.selectedItems.set(index, config.item);
-                        option.setSelected(true);
-                    }
-                    else {
-                        // Lightweight option - get item from data attribute or state
-                        const item = this._state.loadedItems[index];
-                        if (item) {
-                            this._state.selectedIndices.add(index);
-                            this._state.selectedItems.set(index, item);
-                            option.classList.add('smilodon-option--selected');
-                            option.setAttribute('aria-selected', '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);
+            this._markOpenStart();
+            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._setInitialActiveOption();
+            this._emit('open', {});
+            this._config.callbacks.onOpen?.();
+            this._announce('Options expanded');
+            // Scroll to selected if configured
+            if (this._config.scrollToSelected.enabled) {
+                // Use requestAnimationFrame for better timing after render
+                requestAnimationFrame(() => {
+                    // Double RAF to ensure layout is complete
+                    requestAnimationFrame(() => {
+                        this._scrollToSelected();
+                    });
+                });
             }
         }
-        _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)
+        _handleClose() {
+            if (!this._state.isOpen)
                 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();
-                }
+            this._state.isOpen = false;
+            this._dropdown.style.display = 'none';
+            this._input.setAttribute('aria-expanded', 'false');
+            this._input.removeAttribute('aria-activedescendant');
+            this._updateArrowRotation();
+            this._emit('close', {});
+            this._config.callbacks.onClose?.();
+            this._announce('Options collapsed');
+        }
+        _updateDropdownVisibility() {
+            if (this._state.isOpen) {
+                this._dropdown.style.display = 'block';
+                this._input.setAttribute('aria-expanded', 'true');
             }
             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._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');
                     }
-                    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)
+        _isPerfEnabled() {
+            return typeof globalThis !== 'undefined'
+                && globalThis.__SMILODON_DEV__ === true
+                && typeof performance !== 'undefined'
+                && typeof performance.mark === 'function'
+                && typeof performance.measure === 'function';
+        }
+        _perfMark(name) {
+            if (!this._isPerfEnabled())
                 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 });
+            performance.mark(name);
         }
-        _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());
+        _perfMeasure(name, start, end) {
+            if (!this._isPerfEnabled())
+                return;
+            performance.measure(name, start, end);
+        }
+        _markOpenStart() {
+            if (!this._isPerfEnabled())
+                return;
+            this._pendingFirstRenderMark = true;
+            this._perfMark('smilodon-dropdown-open-start');
+        }
+        _finalizePerfMarks() {
+            if (!this._isPerfEnabled()) {
+                this._pendingFirstRenderMark = false;
+                this._pendingSearchRenderMark = false;
+                return;
             }
-            else if (this._config.selection.mode === 'single') {
-                this._input.value = getLabel(selectedItems[0]);
+            if (this._pendingFirstRenderMark) {
+                this._pendingFirstRenderMark = false;
+                this._perfMark('smilodon-first-render-complete');
+                this._perfMeasure('smilodon-dropdown-to-first-render', 'smilodon-dropdown-open-start', 'smilodon-first-render-complete');
             }
-            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);
-                });
+            if (this._pendingSearchRenderMark) {
+                this._pendingSearchRenderMark = false;
+                this._perfMark('smilodon-search-render-complete');
+                this._perfMeasure('smilodon-search-to-render', 'smilodon-search-input-last', 'smilodon-search-render-complete');
             }
         }
-        _renderOptionsWithAnimation() {
-            // Add fade-out animation
-            this._optionsContainer.style.opacity = '0';
-            this._optionsContainer.style.transition = 'opacity 0.15s ease-out';
-            setTimeout(() => {
+        _handleSearch(query) {
+            this._state.searchQuery = query;
+            if (query.length > 0) {
+                this._perfMark('smilodon-search-input-last');
+                this._pendingSearchRenderMark = true;
+            }
+            else {
+                this._pendingSearchRenderMark = false;
+            }
+            // 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) {
+                this._handleOpen();
+            }
+            else {
+                // Filter and render options immediately
                 this._renderOptions();
-                // Fade back in
-                this._optionsContainer.style.opacity = '1';
-                this._optionsContainer.style.transition = 'opacity 0.2s ease-in';
-            }, 150);
+            }
+            // 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;
+            // 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);
+            }
         }
-        _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);
-            // For multi-select, find the closest selected item to the current scroll position
-            let targetIndex;
-            if (this._config.selection.mode === 'multi' && indices.length > 1) {
-                // Calculate which selected item is closest to the center of the viewport
-                const dropdownRect = this._dropdown.getBoundingClientRect();
-                const viewportCenter = this._dropdown.scrollTop + (dropdownRect.height / 2);
-                // Find the selected item closest to viewport center
-                let closestIndex = indices[0];
-                let closestDistance = Infinity;
-                for (const index of indices) {
-                    const optionId = `${this._uniqueId}-option-${index}`;
-                    const option = this._optionsContainer.querySelector(`[id="${optionId}"]`);
-                    if (option) {
-                        const optionTop = option.offsetTop;
-                        const distance = Math.abs(optionTop - viewportCenter);
-                        if (distance < closestDistance) {
-                            closestDistance = distance;
-                            closestIndex = index;
+        _handleKeydown(e) {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this._state.isOpen) {
+                        this._handleOpen();
+                    }
+                    else {
+                        this._moveActive(1, { shiftKey: e.shiftKey, toggleKey: e.ctrlKey || e.metaKey });
+                    }
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this._state.isOpen) {
+                        this._handleOpen();
+                    }
+                    else {
+                        this._moveActive(-1, { shiftKey: e.shiftKey, toggleKey: e.ctrlKey || e.metaKey });
+                    }
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    if (this._state.isOpen) {
+                        this._setActive(0);
+                        if (this._config.selection.mode === 'multi' && e.shiftKey) {
+                            this._selectRange(this._rangeAnchorIndex ?? 0, 0, { clear: !(e.ctrlKey || e.metaKey) });
+                        }
+                    }
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    if (this._state.isOpen) {
+                        const options = Array.from(this._optionsContainer.children);
+                        const lastIndex = Math.max(0, options.length - 1);
+                        this._setActive(lastIndex);
+                        if (this._config.selection.mode === 'multi' && e.shiftKey) {
+                            this._selectRange(this._rangeAnchorIndex ?? lastIndex, lastIndex, { clear: !(e.ctrlKey || e.metaKey) });
                         }
                     }
-                }
-                targetIndex = closestIndex;
-            }
-            else {
-                // For single select or only one selected item, use the configured target
-                targetIndex = target === 'first' ? indices[0] : indices[indices.length - 1];
-            }
-            // Find and scroll to the target option
-            const optionId = `${this._uniqueId}-option-${targetIndex}`;
-            const option = this._optionsContainer.querySelector(`[id="${optionId}"]`);
-            if (option) {
-                // Use smooth scrolling with center alignment for better UX
-                option.scrollIntoView({
-                    block: this._config.scrollToSelected.block || 'center',
-                    behavior: 'smooth',
-                });
-                // Also set it as active for keyboard navigation
-                this._setActive(targetIndex);
+                    break;
+                case 'PageDown':
+                    e.preventDefault();
+                    if (this._state.isOpen) {
+                        this._moveActive(10, { shiftKey: e.shiftKey, toggleKey: e.ctrlKey || e.metaKey });
+                    }
+                    break;
+                case 'PageUp':
+                    e.preventDefault();
+                    if (this._state.isOpen) {
+                        this._moveActive(-10, { shiftKey: e.shiftKey, toggleKey: e.ctrlKey || e.metaKey });
+                    }
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this._state.activeIndex >= 0) {
+                        this._selectOption(this._state.activeIndex, { shiftKey: e.shiftKey, toggleKey: e.ctrlKey || e.metaKey });
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    this._handleClose();
+                    break;
+                case 'Tab':
+                    if (this._state.isOpen) {
+                        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;
             }
         }
-        async _loadMoreItems() {
-            if (this._state.isBusy)
-                return;
-            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++;
-                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
+        _moveActive(delta, opts) {
+            const options = Array.from(this._optionsContainer.children);
+            const next = Math.max(0, Math.min(options.length - 1, this._state.activeIndex + delta));
+            this._setActive(next);
+            if (this._config.selection.mode === 'multi' && opts?.shiftKey) {
+                const anchor = this._rangeAnchorIndex ?? this._state.activeIndex;
+                const anchorIndex = anchor >= 0 ? anchor : next;
+                if (this._rangeAnchorIndex === null) {
+                    this._rangeAnchorIndex = anchorIndex;
+                }
+                this._selectRange(anchorIndex, next, { clear: !opts?.toggleKey });
             }
         }
-        _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;
-                // Only clear loading if we actually got more items
-                if (newLength > previousLength) {
-                    this._state.isBusy = false;
+        _setActive(index) {
+            const options = Array.from(this._optionsContainer.children);
+            // Clear previous active state
+            if (this._state.activeIndex >= 0 && options[this._state.activeIndex]) {
+                const prevOption = options[this._state.activeIndex];
+                // Check if it's a custom SelectOption or a lightweight DOM element
+                if ('setActive' in prevOption && typeof prevOption.setActive === 'function') {
+                    prevOption.setActive(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;
-                    }
-                });
-                // Only clear preserveScrollPosition if we got new items
-                if (newLength > previousLength) {
-                    this._state.preserveScrollPosition = false;
+                else {
+                    // Lightweight option - remove active class
+                    prevOption.classList.remove('smilodon-option--active');
+                    prevOption.setAttribute('aria-selected', 'false');
                 }
             }
-            else {
-                // Normal update - just render normally
-                this._state.isBusy = false;
-                this._renderOptions();
+            this._state.activeIndex = index;
+            // Set new active state
+            if (options[index]) {
+                const option = options[index];
+                // Check if it's a custom SelectOption or a lightweight DOM element
+                if ('setActive' in option && typeof option.setActive === 'function') {
+                    option.setActive(true);
+                }
+                else {
+                    // Lightweight option - add active class
+                    option.classList.add('smilodon-option--active');
+                    option.setAttribute('aria-selected', 'true');
+                }
+                option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                // Announce position for screen readers
+                const total = options.length;
+                this._announce(`Item ${index + 1} of ${total}`);
+                // Update aria-activedescendant using the actual option id when available
+                const optionId = option.id || `${this._uniqueId}-option-${index}`;
+                this._input.setAttribute('aria-activedescendant', optionId);
             }
         }
-        /**
-         * 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;
+        _getOptionElementByIndex(index) {
+            return this._optionsContainer.querySelector(`[data-index="${index}"]`);
         }
-        /**
-         * Get currently selected values
-         */
-        getSelectedValues() {
-            const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
-            return this.getSelectedItems().map(getValue);
+        _buildRendererHelpers() {
+            return {
+                onSelect: (_item, index) => this._selectOption(index),
+                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) => {
+                    this._setActive(index);
+                    const el = this._getOptionElementByIndex(index);
+                    el?.focus?.();
+                },
+            };
         }
-        /**
-         * Set selected items by value
-         */
-        async setSelectedValues(values) {
-            if (this._config.serverSide.enabled && this._config.serverSide.fetchSelectedItems) {
-                await this._loadSelectedItemsByValues(values);
+        _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);
             }
-            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))) {
+        }
+        _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)) {
+                    // Check if it's a custom SelectOption or a lightweight DOM element
+                    if ('getConfig' in option && typeof option.getConfig === 'function') {
+                        const config = option.getConfig();
                         this._state.selectedIndices.add(index);
-                        this._state.selectedItems.set(index, item);
+                        this._state.selectedItems.set(index, config.item);
+                        option.setSelected(true);
                     }
-                });
-                this._renderOptions();
-                this._updateInputDisplay();
-                this._emitChange();
-            }
+                    else {
+                        // Lightweight option - get item from data attribute or state
+                        const item = this._state.loadedItems[index];
+                        if (item) {
+                            this._state.selectedIndices.add(index);
+                            this._state.selectedItems.set(index, item);
+                            option.classList.add('smilodon-option--selected');
+                            option.setAttribute('aria-selected', 'true');
+                        }
+                    }
+                }
+            });
+            this._updateInputDisplay();
+            this._emitChange();
+            this._announce(`Selected all ${options.length} items`);
         }
-        /**
-         * Load and select items by their values (for infinite scroll scenario)
-         */
-        async _loadSelectedItemsByValues(values) {
-            if (!this._config.serverSide.fetchSelectedItems)
+        _selectRange(start, end, opts) {
+            if (this._config.selection.mode !== 'multi')
                 return;
-            this._setBusy(true);
-            try {
-                const items = await this._config.serverSide.fetchSelectedItems(values);
+            const maxSelections = this._config.selection.maxSelections || 0;
+            const [min, max] = start < end ? [start, end] : [end, start];
+            if (opts?.clear) {
                 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);
+            for (let i = min; i <= max; i += 1) {
+                if (maxSelections > 0 && this._state.selectedIndices.size >= maxSelections)
+                    break;
+                const item = this._state.loadedItems[i];
+                if (!item)
+                    continue;
+                this._state.selectedIndices.add(i);
+                this._state.selectedItems.set(i, item);
             }
-        }
-        /**
-         * Clear all selections
-         */
-        clear() {
-            this._state.selectedIndices.clear();
-            this._state.selectedItems.clear();
             this._renderOptions();
             this._updateInputDisplay();
             this._emitChange();
+            this._announce(`${this._state.selectedIndices.size} items selected`);
         }
-        /**
-         * 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');
+        _setInitialActiveOption() {
+            const options = Array.from(this._optionsContainer.children);
+            if (options.length === 0)
+                return;
+            const selected = Array.from(this._state.selectedIndices).sort((a, b) => a - b);
+            if (this._config.selection.mode === 'multi' && selected.length === 0) {
+                this._state.activeIndex = -1;
+                this._input.removeAttribute('aria-activedescendant');
+                return;
             }
+            const target = selected.length > 0 ? selected[0] : 0;
+            this._setActive(Math.min(target, options.length - 1));
         }
-        /**
-         * 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;
+        _announce(message) {
+            if (this._liveRegion) {
+                this._liveRegion.textContent = message;
+                setTimeout(() => {
+                    if (this._liveRegion)
+                        this._liveRegion.textContent = '';
+                }, 1000);
             }
-            this.clearError();
-            return true;
         }
-        /**
-         * Render options based on current state
-         */
-        _renderOptions() {
-            // 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);
+        _selectOption(index, opts) {
+            // 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 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 => {
-                        // Find original index for correct ID generation and selection
-                        const index = this._state.loadedItems.indexOf(item);
-                        if (index !== -1) {
-                            this._renderSingleOption(item, index, getValue, getLabel);
-                        }
-                    });
-                });
+            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 {
-                // Normal rendering (flat list or filtered)
-                let hasRenderedItems = false;
-                this._state.loadedItems.forEach((item, index) => {
-                    // Apply filter if query exists
-                    if (query) {
-                        try {
-                            const label = String(getLabel(item)).toLowerCase();
-                            if (!label.includes(query))
-                                return;
-                        }
-                        catch (e) {
-                            return;
-                        }
-                    }
-                    hasRenderedItems = true;
-                    this._renderSingleOption(item, index, getValue, getLabel);
-                });
-                if (!hasRenderedItems && !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);
+                const toggleKey = Boolean(opts?.toggleKey);
+                const shiftKey = Boolean(opts?.shiftKey);
+                if (shiftKey) {
+                    const anchor = this._rangeAnchorIndex ?? index;
+                    this._selectRange(anchor, index, { clear: !toggleKey });
+                    this._rangeAnchorIndex = anchor;
+                    return;
                 }
-            }
-            // 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);
+                // 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);
                 }
-                if (this._config.busyBucket.message) {
-                    const message = document.createElement('div');
-                    message.textContent = this._config.busyBucket.message;
-                    busyBucket.appendChild(message);
+                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);
                 }
-                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();
+                // Re-render to update styles (safer than trying to find the element in filtered list)
+                this._renderOptions();
             }
-        }
-        _renderSingleOption(item, index, getValue, getLabel) {
-            const option = document.createElement('div');
-            option.className = 'option';
-            option.id = `${this._uniqueId}-option-${index}`;
-            const value = getValue(item);
+            this._rangeAnchorIndex = index;
+            this._updateInputDisplay();
+            this._emitChange();
+            const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
+            const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
             const label = getLabel(item);
-            option.textContent = label;
-            option.dataset.value = String(value);
-            option.dataset.index = String(index); // Also useful for debugging/selectors
-            // Check if selected using selectedItems map
-            const isSelected = this._state.selectedIndices.has(index);
-            if (isSelected) {
-                option.classList.add('selected');
-                option.setAttribute('aria-selected', 'true');
+            if (this._config.selection.mode === 'single') {
+                this._announce(`Selected ${label}`);
             }
             else {
-                option.setAttribute('aria-selected', 'false');
+                const selectedCount = this._state.selectedIndices.size;
+                const action = isCurrentlySelected ? 'Deselected' : 'Selected';
+                this._announce(`${action} ${label}. ${selectedCount} selected`);
             }
-            option.addEventListener('click', () => {
-                this._selectOption(index);
+            this._config.callbacks.onSelect?.({
+                item: item,
+                index,
+                value: getValue(item),
+                label: getLabel(item),
+                selected: this._state.selectedIndices.has(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);
+        _handleOptionRemove(index) {
+            const option = this._getOptionElementByIndex(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 {
-                // 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);
+            else if (this._config.selection.mode === 'single') {
+                this._input.value = getLabel(selectedItems[0]);
             }
-            this._optionsContainer.appendChild(container);
-            // Setup intersection observer for auto-load
-            if (this._intersectionObserver && this._loadMoreTrigger) {
-                this._intersectionObserver.observe(this._loadMoreTrigger);
+            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);
+                });
             }
         }
-    }
-    // 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);
+        _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);
         }
-        _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);
+        _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);
+            // For multi-select, find the closest selected item to the current scroll position
+            let targetIndex;
+            if (this._config.selection.mode === 'multi' && indices.length > 1) {
+                // Calculate which selected item is closest to the center of the viewport
+                const dropdownRect = this._dropdown.getBoundingClientRect();
+                const viewportCenter = this._dropdown.scrollTop + (dropdownRect.height / 2);
+                // Find the selected item closest to viewport center
+                let closestIndex = indices[0];
+                let closestDistance = Infinity;
+                for (const index of indices) {
+                    const option = this._getOptionElementByIndex(index);
+                    if (option) {
+                        const optionTop = option.offsetTop;
+                        const distance = Math.abs(optionTop - viewportCenter);
+                        if (distance < closestDistance) {
+                            closestDistance = distance;
+                            closestIndex = index;
+                        }
+                    }
+                }
+                targetIndex = closestIndex;
+            }
+            else {
+                // For single select or only one selected item, use the configured target
+                targetIndex = target === 'first' ? indices[0] : indices[indices.length - 1];
+            }
+            // Find and scroll to the target option
+            const option = this._getOptionElementByIndex(targetIndex);
+            if (option) {
+                // Use smooth scrolling with center alignment for better UX
+                option.scrollIntoView({
+                    block: this._config.scrollToSelected.block || 'center',
+                    behavior: 'smooth',
+                });
+                // Also set it as active for keyboard navigation
+                this._setActive(targetIndex);
+            }
         }
-        _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;
+        async _loadMoreItems() {
+            if (this._state.isBusy)
+                return;
+            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;
             }
-            // Apply custom styles
-            if (this._config.style) {
-                Object.assign(this._container.style, this._config.style);
+            try {
+                // Emit event for parent to handle
+                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.
             }
-            // 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);
-                }
+            catch (error) {
+                this._handleError(error);
+                this._setBusy(false); // Only clear on error
             }
-            else {
-                const label = this._getLabel();
-                contentDiv.textContent = label;
+        }
+        _setBusy(busy) {
+            this._state.isBusy = busy;
+            if (busy) {
+                this._dropdown.setAttribute('aria-busy', 'true');
             }
-            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);
+            else {
+                this._dropdown.removeAttribute('aria-busy');
             }
-            // 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}`;
+            // Trigger re-render to show/hide busy indicator
+            // We use _renderOptions to handle the UI update
+            this._renderOptions();
         }
-        _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();
-                });
+        _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
+        get optionRenderer() {
+            return this._optionRenderer;
+        }
+        set optionRenderer(renderer) {
+            this._optionRenderer = renderer;
+            this._renderOptions();
+        }
+        /**
+         * 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);
             }
-            // Keyboard handler
-            this.addEventListener('keydown', (e) => {
-                if (this._config.disabled)
-                    return;
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this._handleSelect();
+            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;
+                // Only clear loading if we actually got more items
+                if (newLength > previousLength) {
+                    this._state.isBusy = false;
                 }
-                else if (e.key === 'Delete' || e.key === 'Backspace') {
-                    if (this._config.selected && this._config.showRemoveButton) {
-                        e.preventDefault();
-                        this._handleRemove();
+                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;
                     }
+                });
+                // 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();
+            }
         }
-        _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,
-            }));
+        /**
+         * Set grouped items
+         */
+        setGroupedItems(groupedItems) {
+            this._state.groupedItems = groupedItems;
+            this._state.loadedItems = groupedItems.flatMap(group => group.options);
+            this._renderOptions();
         }
-        _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,
-            }));
+        /**
+         * Get currently selected items
+         */
+        getSelectedItems() {
+            return Array.from(this._state.selectedItems.values());
         }
-        _getValue() {
-            if (this._config.getValue) {
-                return this._config.getValue(this._config.item);
+        /**
+         * 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();
             }
-            return this._config.item?.value ?? this._config.item;
         }
-        _getLabel() {
-            if (this._config.getLabel) {
-                return this._config.getLabel(this._config.item);
+        /**
+         * 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();
+                }
             }
-            return this._config.item?.label ?? String(this._config.item);
+            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();
         }
         /**
-         * Update option configuration and re-render
+         * Close dropdown
          */
-        updateConfig(updates) {
-            this._config = { ...this._config, ...updates };
-            this._render();
-            this._attachEventListeners();
+        close() {
+            this._handleClose();
         }
         /**
-         * Get current configuration
+         * Update component configuration
          */
-        getConfig() {
-            return this._config;
+        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');
+                if (this._state.selectedIndices.size === 0) {
+                    this._input.placeholder = this._config.placeholder || 'Select an option...';
+                }
+            }
+            if (this._dropdown) {
+                if (this._config.selection.mode === 'multi') {
+                    this._dropdown.setAttribute('aria-multiselectable', 'true');
+                }
+                else {
+                    this._dropdown.removeAttribute('aria-multiselectable');
+                }
+            }
+            // Re-initialize observers in case infinite scroll was enabled/disabled
+            this._initializeObservers();
+            this._renderOptions();
         }
         /**
-         * Get option value
+         * Set error state
          */
-        getValue() {
-            return this._getValue();
+        setError(message) {
+            this._hasError = true;
+            this._errorMessage = message;
+            this._input.setAttribute('aria-invalid', 'true');
+            this._announce(`Error: ${message}`);
         }
         /**
-         * Get option label
+         * Clear error state
          */
-        getLabel() {
-            return this._getLabel();
+        clearError() {
+            this._hasError = false;
+            this._errorMessage = '';
+            this._input.removeAttribute('aria-invalid');
         }
         /**
-         * Set selected state
+         * Set required state
          */
-        setSelected(selected) {
-            this._config.selected = selected;
-            this._render();
+        setRequired(required) {
+            if (required) {
+                this._input.setAttribute('aria-required', 'true');
+                this._input.setAttribute('required', '');
+            }
+            else {
+                this._input.removeAttribute('aria-required');
+                this._input.removeAttribute('required');
+            }
         }
         /**
-         * Set active state
+         * Validate selection (for required fields)
          */
-        setActive(active) {
-            this._config.active = active;
-            this._render();
+        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;
         }
         /**
-         * Set disabled state
+         * Render options based on current state
          */
-        setDisabled(disabled) {
-            this._config.disabled = disabled;
-            this._render();
+        _renderOptions() {
+            // 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 => {
+                        // Find original index for correct ID generation and selection
+                        const index = this._state.loadedItems.indexOf(item);
+                        if (index !== -1) {
+                            this._renderSingleOption(item, index, getValue, getLabel);
+                        }
+                    });
+                });
+            }
+            else {
+                // Normal rendering (flat list or filtered)
+                let hasRenderedItems = false;
+                this._state.loadedItems.forEach((item, index) => {
+                    // Apply filter if query exists
+                    if (query) {
+                        try {
+                            const label = String(getLabel(item)).toLowerCase();
+                            if (!label.includes(query))
+                                return;
+                        }
+                        catch (e) {
+                            return;
+                        }
+                    }
+                    hasRenderedItems = true;
+                    this._renderSingleOption(item, index, getValue, getLabel);
+                });
+                if (!hasRenderedItems && !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);
+                }
+            }
+            // 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();
+            }
+            this._finalizePerfMarks();
+        }
+        _renderSingleOption(item, index, getValue, getLabel) {
+            const isSelected = this._state.selectedIndices.has(index);
+            const isDisabled = Boolean(item?.disabled);
+            const optionId = `${this._uniqueId}-option-${index}`;
+            if (this._optionRenderer) {
+                const rendered = this._optionRenderer(item, index, this._rendererHelpers);
+                const optionElement = this._normalizeCustomOptionElement(rendered, {
+                    index,
+                    value: getValue(item),
+                    label: getLabel(item),
+                    selected: isSelected,
+                    active: this._state.activeIndex === index,
+                    disabled: isDisabled,
+                    id: optionId,
+                });
+                this._optionsContainer.appendChild(optionElement);
+                return;
+            }
+            const option = new SelectOption({
+                item,
+                index,
+                id: optionId,
+                selected: isSelected,
+                disabled: isDisabled,
+                active: this._state.activeIndex === index,
+                getValue,
+                getLabel,
+                showRemoveButton: this._config.selection.mode === 'multi' && this._config.selection.showRemoveButton,
+            });
+            option.dataset.index = String(index);
+            option.dataset.value = String(getValue(item));
+            option.id = option.id || optionId;
+            option.addEventListener('click', (e) => {
+                const mouseEvent = e;
+                this._selectOption(index, {
+                    shiftKey: mouseEvent.shiftKey,
+                    toggleKey: mouseEvent.ctrlKey || mouseEvent.metaKey,
+                });
+            });
+            option.addEventListener('optionRemove', (event) => {
+                const detail = event.detail;
+                const targetIndex = detail?.index ?? index;
+                this._handleOptionRemove(targetIndex);
+            });
+            this._optionsContainer.appendChild(option);
+        }
+        _normalizeCustomOptionElement(element, meta) {
+            const optionEl = element instanceof HTMLElement ? element : document.createElement('div');
+            optionEl.classList.add('smilodon-option');
+            optionEl.classList.toggle('smilodon-option--selected', meta.selected);
+            optionEl.classList.toggle('smilodon-option--active', meta.active);
+            optionEl.classList.toggle('smilodon-option--disabled', meta.disabled);
+            if (!optionEl.hasAttribute('data-selectable')) {
+                optionEl.setAttribute('data-selectable', '');
+            }
+            optionEl.dataset.index = String(meta.index);
+            optionEl.dataset.value = String(meta.value);
+            optionEl.id = optionEl.id || meta.id;
+            if (!optionEl.getAttribute('role')) {
+                optionEl.setAttribute('role', 'option');
+            }
+            if (!optionEl.getAttribute('aria-label')) {
+                optionEl.setAttribute('aria-label', meta.label);
+            }
+            optionEl.setAttribute('aria-selected', String(meta.selected));
+            if (meta.disabled) {
+                optionEl.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                optionEl.removeAttribute('aria-disabled');
+            }
+            if (!optionEl.hasAttribute('tabindex')) {
+                optionEl.tabIndex = -1;
+            }
+            if (!meta.disabled) {
+                optionEl.addEventListener('click', (e) => {
+                    const mouseEvent = e;
+                    this._selectOption(meta.index, {
+                        shiftKey: mouseEvent.shiftKey,
+                        toggleKey: mouseEvent.ctrlKey || mouseEvent.metaKey,
+                    });
+                });
+                optionEl.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this._selectOption(meta.index, {
+                            shiftKey: e.shiftKey,
+                            toggleKey: e.ctrlKey || e.metaKey,
+                        });
+                    }
+                });
+            }
+            return optionEl;
+        }
+        _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) {
+                this._intersectionObserver.observe(this._loadMoreTrigger);
+            }
         }
     }
     // Register custom element
-    if (!customElements.get('select-option')) {
-        customElements.define('select-option', SelectOption);
+    if (!customElements.get('enhanced-select')) {
+        customElements.define('enhanced-select', EnhancedSelect);
     }
 
     /**