@smilodon/core 1.4.12 → 1.5.0

package/dist/index.cjs

@@ -1350,7 +1350,20 @@ const defaultConfig = {
         allowDeselect: false,
         maxSelections: 0,
         showRemoveButton: true,
+        removeButtonIcon: '×',
         closeOnSelect: true,
+        toggleOnTriggerClick: true,
+    },
+    direction: 'ltr',
+    dropdownPlacement: {
+        mode: 'bottom',
+    },
+    multiSelectDisplay: {
+        mode: 'wrap',
+        maxHeight: '160px',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        dragScroll: true,
     },
     scrollToSelected: {
         enabled: true,
@@ -1512,6 +1525,8 @@ class SelectOption extends HTMLElement {
       :host {
         display: block;
         position: relative;
+        font: inherit;
+        color: inherit;
       }
       
       /* Allow authors to style selected state from outside the shadow root
@@ -1543,7 +1558,7 @@ class SelectOption extends HTMLElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: var(--select-option-padding, 8px 12px);
+        padding: var(--select-option-padding, 10px 14px);
         cursor: pointer;
         user-select: none;
         color: var(--select-option-color, var(--select-text-color, #1f2937));
@@ -1551,13 +1566,19 @@ class SelectOption extends HTMLElement {
         transition: var(--select-option-transition, background-color 0.2s ease);
         border: var(--select-option-border, none);
         border-bottom: var(--select-option-border-bottom, none);
-        border-radius: var(--select-option-border-radius, 0);
+        border-radius: var(--select-option-border-radius, var(--select-radius-sm, 6px));
         box-shadow: var(--select-option-shadow, none);
         transform: var(--select-option-transform, none);
+        font: inherit;
       }
       
       .option-container:hover {
         background: var(--select-option-hover-bg, #f0f0f0);
+        color: var(--select-option-hover-color, var(--select-option-color, var(--select-text-color, #1f2937)));
+        border: var(--select-option-hover-border, var(--select-option-border, none));
+        border-bottom: var(--select-option-hover-border-bottom, var(--select-option-border-bottom, none));
+        box-shadow: var(--select-option-hover-shadow, var(--select-option-shadow, none));
+        transform: var(--select-option-hover-transform, var(--select-option-transform, none));
       }
       
       .option-container.selected {
@@ -1580,13 +1601,22 @@ class SelectOption extends HTMLElement {
       }
       
       .option-container.active {
-        outline: 2px solid var(--select-option-active-outline, #1976d2);
-        outline-offset: -2px;
+        background: var(--select-option-active-bg, var(--select-option-hover-bg, #f0f0f0));
+        color: var(--select-option-active-color, var(--select-option-hover-color, var(--select-option-color, var(--select-text-color, #1f2937))));
+        border: var(--select-option-active-border, var(--select-option-hover-border, var(--select-option-border, none)));
+        box-shadow: var(--select-option-active-shadow, var(--select-option-shadow, none));
+        transform: var(--select-option-active-transform, var(--select-option-transform, none));
+        outline: var(--select-option-active-outline, 2px solid #1976d2);
+        outline-offset: var(--select-option-active-outline-offset, -2px);
       }
       
       .option-container.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+        background: var(--select-option-disabled-bg, var(--select-option-bg, var(--select-dropdown-bg, var(--select-bg, white))));
+        color: var(--select-option-disabled-color, var(--select-option-color, var(--select-text-color, #1f2937)));
+        border: var(--select-option-disabled-border, var(--select-option-border, none));
+        border-bottom: var(--select-option-disabled-border-bottom, var(--select-option-border-bottom, none));
+        opacity: var(--select-option-disabled-opacity, 0.5);
+        cursor: var(--select-option-disabled-cursor, not-allowed);
         pointer-events: none;
       }
       
@@ -1603,6 +1633,12 @@ class SelectOption extends HTMLElement {
         color: var(--select-checkmark-color, currentColor);
       }
 
+      :host([dir="rtl"]) .checkmark-icon,
+      :host-context([dir="rtl"]) .checkmark-icon {
+        margin-left: 0;
+        margin-right: var(--select-checkmark-margin-left, 8px);
+      }
+
       :host([aria-selected="true"]) .checkmark-icon,
       .option-container.selected .checkmark-icon {
         display: inline-flex;
@@ -1610,20 +1646,49 @@ class SelectOption extends HTMLElement {
       
       .remove-button {
         margin-left: 8px;
-        padding: 2px 6px;
+        width: var(--select-badge-remove-size, 18px);
+        height: var(--select-badge-remove-size, 18px);
+        min-width: var(--select-badge-remove-min-width, var(--select-badge-remove-size, 18px));
+        min-height: var(--select-badge-remove-min-height, var(--select-badge-remove-size, 18px));
+        padding: 0;
         border: none;
-        background-color: var(--select-remove-btn-bg, transparent);
-        color: var(--select-remove-btn-color, #666);
+        background-color: var(--select-badge-remove-bg, rgba(255, 255, 255, 0.2));
+        color: var(--select-badge-remove-color, currentColor);
         cursor: pointer;
-        border-radius: 3px;
-        font-size: 16px;
+        border-radius: var(--select-badge-remove-radius, 50%);
+        font-size: var(--select-badge-remove-font-size, 0.7333em);
+        font-weight: var(--select-badge-remove-font-weight, 600);
         line-height: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         transition: all 0.2s ease;
       }
+
+      :host([dir="rtl"]) .remove-button,
+      :host-context([dir="rtl"]) .remove-button {
+        margin-left: 0;
+        margin-right: 8px;
+      }
+
+      .remove-button-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--select-badge-remove-icon-size, 10px);
+        height: var(--select-badge-remove-icon-size, 10px);
+        pointer-events: none;
+      }
+
+      .remove-button-icon svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
       
       .remove-button:hover {
-        background-color: var(--select-remove-btn-hover-bg, #ffebee);
-        color: var(--select-remove-btn-hover-color, #c62828);
+        background-color: var(--select-badge-remove-hover-bg, #ffebee);
+        color: var(--select-badge-remove-hover-color, #c62828);
       }
       
       .remove-button:focus {
@@ -1710,10 +1775,22 @@ class SelectOption extends HTMLElement {
         if (showRemoveButton && selected) {
             this._removeButton = document.createElement('button');
             this._removeButton.className = 'remove-button';
-            this._removeButton.innerHTML = '×';
             this._removeButton.setAttribute('part', 'chip-remove');
             this._removeButton.setAttribute('aria-label', 'Remove option');
             this._removeButton.setAttribute('type', 'button');
+            const removeIcon = document.createElement('span');
+            removeIcon.className = 'remove-button-icon';
+            removeIcon.setAttribute('part', 'chip-remove-icon');
+            const iconMarkup = this._config.removeButtonIcon && this._config.removeButtonIcon.trim()
+                ? this._config.removeButtonIcon
+                : '×';
+            if (iconMarkup.trim().startsWith('<')) {
+                removeIcon.innerHTML = iconMarkup;
+            }
+            else {
+                removeIcon.textContent = iconMarkup;
+            }
+            this._removeButton.appendChild(removeIcon);
             this._container.appendChild(this._removeButton);
         }
         // Set ARIA attributes and State attributes on Host
@@ -1883,6 +1960,8 @@ if (!customElements.get('select-option')) {
  * Enhanced Select Component
  * Implements all advanced features: infinite scroll, load more, busy state,
  * server-side selection, and full customization
+ *
+ * ✨ Redesigned with formal elegance, refined microinteractions, and polished UX
  */
 class EnhancedSelect extends HTMLElement {
     get classMap() {
@@ -1930,6 +2009,18 @@ class EnhancedSelect extends HTMLElement {
         this._globalStylesObserver = null;
         this._globalStylesContainer = null;
         this._tracking = { events: [], styles: [], limitations: [] };
+        this._suppressBlurClose = false;
+        this._renderCycleId = 0;
+        this._suppressNextOpenClick = false;
+        this._resolvedDropdownPlacement = 'bottom';
+        this._multiScrollDrag = {
+            active: false,
+            moved: false,
+            pointerId: -1,
+            startX: 0,
+            startScrollLeft: 0,
+        };
+        this._liftedAncestors = [];
         this._shadow = this.attachShadow({ mode: 'open' });
         this._uniqueId = `enhanced-select-${Math.random().toString(36).substr(2, 9)}`;
         this._rendererHelpers = this._buildRendererHelpers();
@@ -1957,6 +2048,7 @@ class EnhancedSelect extends HTMLElement {
         // Create DOM structure
         this._container = this._createContainer();
         this._inputContainer = this._createInputContainer();
+        this._inputContent = this._createInputContent();
         this._input = this._createInput();
         this._arrowContainer = this._createArrowContainer();
         this._clearControl = this._createClearControl();
@@ -1965,6 +2057,8 @@ class EnhancedSelect extends HTMLElement {
         this._liveRegion = this._createLiveRegion();
         // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
         this._initializeStyles();
+        this._syncStyleConfigVariables();
+        this._syncDirectionConfig();
         this._assembleDOM();
         this._attachEventListeners();
         this._initializeObservers();
@@ -2000,10 +2094,12 @@ class EnhancedSelect extends HTMLElement {
             clearTimeout(this._typeTimeout);
         if (this._searchTimeout)
             clearTimeout(this._searchTimeout);
+        this._endMultiScrollDrag();
         // Cleanup arrow click listener
         if (this._boundArrowClick && this._arrowContainer) {
             this._arrowContainer.removeEventListener('click', this._boundArrowClick);
         }
+        this._renderCycleId += 1;
         this._teardownGlobalStylesMirroring();
     }
     _setGlobalStylesMirroring(enabled) {
@@ -2107,8 +2203,360 @@ class EnhancedSelect extends HTMLElement {
         const container = document.createElement('div');
         container.className = 'input-container';
         container.setAttribute('part', 'button');
+        const inputStyles = this._config.styles.input;
+        if (inputStyles && !this._config.styles.container) {
+            const shellStyleKeys = [
+                'background',
+                'backgroundColor',
+                'border',
+                'borderColor',
+                'borderStyle',
+                'borderWidth',
+                'borderRadius',
+                'boxShadow',
+                'padding',
+                'height',
+                'minHeight',
+                'maxHeight',
+            ];
+            for (const key of shellStyleKeys) {
+                const value = inputStyles[key];
+                if (value != null && value !== '') {
+                    container.style[key] = value;
+                }
+            }
+        }
         return container;
     }
+    _createInputContent() {
+        const content = document.createElement('div');
+        content.className = 'input-content';
+        return content;
+    }
+    _setCssVariable(name, value) {
+        if (value == null || value === '') {
+            this.style.removeProperty(name);
+            return;
+        }
+        this.style.setProperty(name, String(value));
+    }
+    _applyStyleVariableMap(styleConfig, variableMap) {
+        Object.entries(variableMap).forEach(([styleKey, variableName]) => {
+            this._setCssVariable(variableName, styleConfig?.[styleKey]);
+        });
+    }
+    _syncStyleConfigVariables() {
+        const styles = this._config.styles;
+        this._applyStyleVariableMap(styles.option, {
+            background: '--select-option-bg',
+            backgroundColor: '--select-option-bg',
+            color: '--select-option-color',
+            border: '--select-option-border',
+            borderBottom: '--select-option-border-bottom',
+            borderRadius: '--select-option-border-radius',
+            boxShadow: '--select-option-shadow',
+            transform: '--select-option-transform',
+            padding: '--select-option-padding',
+            margin: '--select-option-margin',
+            fontSize: '--select-option-font-size',
+            fontWeight: '--select-option-font-weight',
+            lineHeight: '--select-option-line-height',
+            textAlign: '--select-option-text-align',
+        });
+        this._applyStyleVariableMap(styles.selectedOption, {
+            background: '--select-option-selected-bg',
+            backgroundColor: '--select-option-selected-bg',
+            color: '--select-option-selected-color',
+            border: '--select-option-selected-border',
+            borderBottom: '--select-option-selected-border-bottom',
+            borderRadius: '--select-option-selected-border-radius',
+            boxShadow: '--select-option-selected-shadow',
+            transform: '--select-option-selected-transform',
+            fontWeight: '--select-option-selected-weight',
+        });
+        this._applyStyleVariableMap(styles.hoverOption, {
+            background: '--select-option-hover-bg',
+            backgroundColor: '--select-option-hover-bg',
+            color: '--select-option-hover-color',
+            border: '--select-option-hover-border',
+            borderBottom: '--select-option-hover-border-bottom',
+            boxShadow: '--select-option-hover-shadow',
+            transform: '--select-option-hover-transform',
+        });
+        this._applyStyleVariableMap(styles.activeOption, {
+            background: '--select-option-active-bg',
+            backgroundColor: '--select-option-active-bg',
+            color: '--select-option-active-color',
+            border: '--select-option-active-border',
+            outline: '--select-option-active-outline',
+            outlineOffset: '--select-option-active-outline-offset',
+            boxShadow: '--select-option-active-shadow',
+            transform: '--select-option-active-transform',
+        });
+        this._applyStyleVariableMap(styles.disabledOption, {
+            background: '--select-option-disabled-bg',
+            backgroundColor: '--select-option-disabled-bg',
+            color: '--select-option-disabled-color',
+            border: '--select-option-disabled-border',
+            borderBottom: '--select-option-disabled-border-bottom',
+            opacity: '--select-option-disabled-opacity',
+            cursor: '--select-option-disabled-cursor',
+        });
+        this._applyStyleVariableMap(styles.badge, {
+            width: '--select-badge-width',
+            minWidth: '--select-badge-min-width',
+            maxWidth: '--select-badge-max-width',
+            height: '--select-badge-height',
+            minHeight: '--select-badge-min-height',
+            padding: '--select-badge-padding',
+            margin: '--select-badge-margin',
+            gap: '--select-badge-gap',
+            background: '--select-badge-bg',
+            backgroundColor: '--select-badge-bg',
+            color: '--select-badge-color',
+            border: '--select-badge-border',
+            borderRadius: '--select-badge-border-radius',
+            boxShadow: '--select-badge-shadow',
+            fontSize: '--select-badge-font-size',
+            fontWeight: '--select-badge-font-weight',
+            lineHeight: '--select-badge-line-height',
+            letterSpacing: '--select-badge-letter-spacing',
+        });
+        this._applyStyleVariableMap(styles.badgeHover, {
+            background: '--select-badge-hover-bg',
+            backgroundColor: '--select-badge-hover-bg',
+            color: '--select-badge-hover-color',
+            border: '--select-badge-hover-border',
+            boxShadow: '--select-badge-hover-shadow',
+            transform: '--select-badge-hover-transform',
+        });
+        this._applyStyleVariableMap(styles.badgeActive, {
+            background: '--select-badge-active-bg',
+            backgroundColor: '--select-badge-active-bg',
+            color: '--select-badge-active-color',
+            border: '--select-badge-active-border',
+            boxShadow: '--select-badge-active-shadow',
+            transform: '--select-badge-active-transform',
+        });
+        this._applyStyleVariableMap(styles.badgeLabel, {
+            color: '--select-badge-label-color',
+            fontSize: '--select-badge-label-font-size',
+            fontWeight: '--select-badge-label-font-weight',
+            lineHeight: '--select-badge-label-line-height',
+            letterSpacing: '--select-badge-label-letter-spacing',
+            textAlign: '--select-badge-label-text-align',
+        });
+        this._applyStyleVariableMap(styles.badgeRemove, {
+            width: '--select-badge-remove-size',
+            height: '--select-badge-remove-size',
+            minWidth: '--select-badge-remove-min-width',
+            minHeight: '--select-badge-remove-min-height',
+            marginLeft: '--select-badge-remove-margin-left',
+            background: '--select-badge-remove-bg',
+            backgroundColor: '--select-badge-remove-bg',
+            border: '--select-badge-remove-border',
+            borderRadius: '--select-badge-remove-radius',
+            color: '--select-badge-remove-color',
+            fontSize: '--select-badge-remove-font-size',
+            fontWeight: '--select-badge-remove-font-weight',
+        });
+        this._applyStyleVariableMap(styles.badgeRemoveHover, {
+            background: '--select-badge-remove-hover-bg',
+            backgroundColor: '--select-badge-remove-hover-bg',
+            color: '--select-badge-remove-hover-color',
+            border: '--select-badge-remove-hover-border',
+            boxShadow: '--select-badge-remove-hover-shadow',
+            transform: '--select-badge-remove-hover-transform',
+        });
+        this._applyStyleVariableMap(styles.badgeRemoveActive, {
+            background: '--select-badge-remove-active-bg',
+            backgroundColor: '--select-badge-remove-active-bg',
+            color: '--select-badge-remove-active-color',
+            border: '--select-badge-remove-active-border',
+            boxShadow: '--select-badge-remove-active-shadow',
+            transform: '--select-badge-remove-active-transform',
+        });
+        this._applyStyleVariableMap(styles.groupHeader, {
+            padding: '--select-group-header-padding',
+            margin: '--select-group-header-margin',
+            color: '--select-group-header-color',
+            background: '--select-group-header-bg',
+            backgroundColor: '--select-group-header-bg',
+            border: '--select-group-header-border',
+            borderBottom: '--select-group-header-border-bottom',
+            borderRadius: '--select-group-header-border-radius',
+            boxShadow: '--select-group-header-shadow',
+            textAlign: '--select-group-header-text-align',
+            fontSize: '--select-group-header-font-size',
+            fontWeight: '--select-group-header-weight',
+            textTransform: '--select-group-header-text-transform',
+            letterSpacing: '--select-group-header-letter-spacing',
+        });
+    }
+    _resolveDropdownPlacement() {
+        const placementMode = this._config.dropdownPlacement?.mode ?? 'bottom';
+        if (placementMode === 'bottom' || placementMode === 'top') {
+            return placementMode;
+        }
+        const hostRect = this._container.getBoundingClientRect();
+        const availableBelow = window.innerHeight - hostRect.bottom;
+        const computedDropdown = window.getComputedStyle(this._dropdown);
+        const maxHeight = Number.parseFloat(computedDropdown.maxHeight || '0');
+        const desiredHeight = Number.isFinite(maxHeight) && maxHeight > 0
+            ? Math.min(this._dropdown.scrollHeight, maxHeight)
+            : this._dropdown.scrollHeight;
+        return availableBelow >= desiredHeight ? 'bottom' : 'top';
+    }
+    _syncDropdownPlacement() {
+        if (!this._dropdown)
+            return;
+        this._resolvedDropdownPlacement = this._resolveDropdownPlacement();
+        this._dropdown.setAttribute('data-placement', this._resolvedDropdownPlacement);
+    }
+    _syncDirectionConfig() {
+        this.setAttribute('dir', this._config.direction ?? 'ltr');
+    }
+    _setIconContent(target, markup, fallback) {
+        const content = markup && markup.trim() ? markup : fallback;
+        target.innerHTML = '';
+        if (content.trim().startsWith('<')) {
+            target.innerHTML = content;
+            return;
+        }
+        target.textContent = content;
+    }
+    _syncInputContainerMode() {
+        if (!this._inputContainer || !this._input)
+            return;
+        const isMulti = this._config.selection.mode === 'multi';
+        this._inputContainer.classList.toggle('input-container--multi', isMulti);
+        this._inputContainer.classList.toggle('input-container--single', !isMulti);
+        if (isMulti) {
+            this._input.style.flex = '1 0 var(--select-multi-input-min-width, 96px)';
+            this._input.style.width = 'auto';
+            this._input.style.minWidth = 'var(--select-multi-input-min-width, 96px)';
+        }
+        else {
+            this._input.style.flex = '1 1 auto';
+            this._input.style.width = '100%';
+            this._input.style.minWidth = '0';
+        }
+        this._syncMultiSelectDisplayConfig();
+    }
+    _syncMultiSelectDisplayConfig() {
+        if (!this._inputContainer || !this._input)
+            return;
+        const isMulti = this._config.selection.mode === 'multi';
+        const mode = this._config.multiSelectDisplay?.mode ?? 'wrap';
+        const dragEnabled = this._config.multiSelectDisplay?.dragScroll !== false;
+        if (!isMulti) {
+            this._inputContainer.removeAttribute('data-multi-scroll-mode');
+            this._inputContainer.removeAttribute('data-drag-scroll');
+            this._inputContainer.classList.remove('is-dragging-scroll');
+            this._inputContainer.style.removeProperty('--select-multi-input-max-height');
+            this._inputContainer.style.removeProperty('--select-multi-input-overflow-x');
+            this._inputContainer.style.removeProperty('--select-multi-input-overflow-y');
+            this._inputContainer.style.removeProperty('--select-multi-input-flex-wrap');
+            this._inputContainer.style.removeProperty('--select-multi-input-align-content');
+            return;
+        }
+        const maxHeight = this._config.multiSelectDisplay?.maxHeight ?? '160px';
+        const overflowX = this._config.multiSelectDisplay?.overflowX ?? (mode === 'horizontal' ? 'auto' : 'hidden');
+        const overflowY = this._config.multiSelectDisplay?.overflowY ?? (mode === 'horizontal' ? 'hidden' : 'auto');
+        const flexWrap = mode === 'horizontal' ? 'nowrap' : 'wrap';
+        const alignContent = mode === 'horizontal' ? 'center' : 'flex-start';
+        this._inputContainer.setAttribute('data-multi-scroll-mode', mode);
+        this._inputContainer.setAttribute('data-drag-scroll', String(dragEnabled && mode === 'horizontal'));
+        this._inputContainer.style.setProperty('--select-multi-input-max-height', maxHeight);
+        this._inputContainer.style.setProperty('--select-multi-input-overflow-x', overflowX);
+        this._inputContainer.style.setProperty('--select-multi-input-overflow-y', overflowY);
+        this._inputContainer.style.setProperty('--select-multi-input-flex-wrap', flexWrap);
+        this._inputContainer.style.setProperty('--select-multi-input-align-content', alignContent);
+    }
+    _canUseHorizontalMultiScroll(target) {
+        if (this._config.selection.mode !== 'multi')
+            return false;
+        if ((this._config.multiSelectDisplay?.mode ?? 'wrap') !== 'horizontal')
+            return false;
+        if (this._config.multiSelectDisplay?.dragScroll === false)
+            return false;
+        if (!target)
+            return true;
+        if (target.closest('.dropdown-arrow-container, .clear-control-button, .badge-remove'))
+            return false;
+        if (target.matches('.select-input'))
+            return false;
+        return true;
+    }
+    _isScrollableMultiSelectMode() {
+        if (this._config.selection.mode !== 'multi')
+            return false;
+        const mode = this._config.multiSelectDisplay?.mode ?? 'wrap';
+        return mode === 'vertical' || mode === 'horizontal';
+    }
+    _isPointerOnInputScrollbar(event) {
+        if (!this._isScrollableMultiSelectMode())
+            return false;
+        const rect = this._inputContent.getBoundingClientRect();
+        const verticalScrollbarWidth = this._inputContent.offsetWidth - this._inputContent.clientWidth;
+        const horizontalScrollbarHeight = this._inputContent.offsetHeight - this._inputContent.clientHeight;
+        if (verticalScrollbarWidth > 0
+            && event.clientX >= rect.right - verticalScrollbarWidth
+            && event.clientX <= rect.right
+            && event.clientY >= rect.top
+            && event.clientY <= rect.bottom) {
+            return true;
+        }
+        if (horizontalScrollbarHeight > 0
+            && event.clientY >= rect.bottom - horizontalScrollbarHeight
+            && event.clientY <= rect.bottom
+            && event.clientX >= rect.left
+            && event.clientX <= rect.right) {
+            return true;
+        }
+        return false;
+    }
+    _beginMultiScrollDrag(e) {
+        const scrollHost = this._inputContent;
+        this._multiScrollDrag.active = true;
+        this._multiScrollDrag.moved = false;
+        this._multiScrollDrag.pointerId = e.pointerId;
+        this._multiScrollDrag.startX = e.clientX;
+        this._multiScrollDrag.startScrollLeft = scrollHost.scrollLeft;
+        this._inputContainer.classList.add('is-dragging-scroll');
+        try {
+            scrollHost.setPointerCapture(e.pointerId);
+        }
+        catch (_error) {
+            // ignore pointer capture issues
+        }
+    }
+    _updateMultiScrollDrag(e) {
+        if (!this._multiScrollDrag.active || this._multiScrollDrag.pointerId !== e.pointerId)
+            return;
+        const deltaX = e.clientX - this._multiScrollDrag.startX;
+        if (Math.abs(deltaX) > 3) {
+            this._multiScrollDrag.moved = true;
+        }
+        this._inputContent.scrollLeft = this._multiScrollDrag.startScrollLeft - deltaX;
+    }
+    _endMultiScrollDrag(pointerId) {
+        if (!this._multiScrollDrag.active)
+            return;
+        if (pointerId != null && this._multiScrollDrag.pointerId !== pointerId)
+            return;
+        try {
+            if (this._multiScrollDrag.pointerId >= 0) {
+                this._inputContent.releasePointerCapture(this._multiScrollDrag.pointerId);
+            }
+        }
+        catch (_error) {
+            // ignore pointer capture issues
+        }
+        this._multiScrollDrag.active = false;
+        this._multiScrollDrag.pointerId = -1;
+        this._inputContainer.classList.remove('is-dragging-scroll');
+    }
     _createInput() {
         const input = document.createElement('input');
         input.setAttribute('part', 'input');
@@ -2118,6 +2566,35 @@ class EnhancedSelect extends HTMLElement {
         input.placeholder = this._config.placeholder || 'Select an option...';
         input.disabled = !this._config.enabled;
         input.readOnly = !this._config.searchable;
+        // Apply a direct inline reset so the input is only the writable text layer,
+        // while the `.input-container` remains the sole visible control shell.
+        input.style.all = 'unset';
+        input.style.display = 'block';
+        input.style.flex = '1 1 auto';
+        input.style.width = '100%';
+        input.style.maxWidth = '100%';
+        input.style.minWidth = '0';
+        input.style.minInlineSize = '0';
+        input.style.minHeight = '0';
+        input.style.padding = '0';
+        input.style.margin = '0';
+        input.style.border = '0';
+        input.style.background = 'transparent';
+        input.style.boxSizing = 'border-box';
+        input.style.outline = 'none';
+        input.style.font = 'inherit';
+        input.style.fontFamily = 'inherit';
+        input.style.lineHeight = 'inherit';
+        input.style.color = 'inherit';
+        input.style.alignSelf = 'center';
+        input.style.appearance = 'none';
+        input.style.webkitAppearance = 'none';
+        input.style.boxShadow = 'none';
+        input.style.borderRadius = '0';
+        input.style.overflow = 'hidden';
+        input.style.textOverflow = 'ellipsis';
+        input.style.whiteSpace = 'nowrap';
+        input.style.cursor = this._config.searchable ? 'text' : 'default';
         // Update readonly when input is focused if searchable
         input.addEventListener('focus', () => {
             if (this._config.searchable) {
@@ -2128,7 +2605,22 @@ class EnhancedSelect extends HTMLElement {
             input.className += ' ' + this._config.styles.classNames.input;
         }
         if (this._config.styles.input) {
-            Object.assign(input.style, this._config.styles.input);
+            const inputStyles = { ...this._config.styles.input };
+            // Route shell-like styling to .input-container so the control appears as
+            // a single styled input instead of two visually separate layers.
+            delete inputStyles.background;
+            delete inputStyles.backgroundColor;
+            delete inputStyles.border;
+            delete inputStyles.borderColor;
+            delete inputStyles.borderStyle;
+            delete inputStyles.borderWidth;
+            delete inputStyles.borderRadius;
+            delete inputStyles.boxShadow;
+            delete inputStyles.padding;
+            delete inputStyles.height;
+            delete inputStyles.minHeight;
+            delete inputStyles.maxHeight;
+            Object.assign(input.style, inputStyles);
         }
         input.setAttribute('role', 'combobox');
         input.setAttribute('aria-expanded', 'false');
@@ -2172,7 +2664,7 @@ class EnhancedSelect extends HTMLElement {
         container.className = 'dropdown-arrow-container';
         container.innerHTML = `
       <svg class="dropdown-arrow" part="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"/>
+        <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     `;
         return container;
@@ -2185,14 +2677,15 @@ class EnhancedSelect extends HTMLElement {
         const icon = document.createElement('span');
         icon.className = 'clear-control-icon';
         icon.setAttribute('part', 'clear-icon');
-        icon.textContent = this._config.clearControl.icon || '×';
+        icon.innerHTML = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
         button.setAttribute('aria-label', this._config.clearControl.ariaLabel || 'Clear selection and search');
         button.appendChild(icon);
         this._clearControlIcon = icon;
         return button;
     }
     _assembleDOM() {
-        this._inputContainer.appendChild(this._input);
+        this._inputContent.appendChild(this._input);
+        this._inputContainer.appendChild(this._inputContent);
         if (this._clearControl) {
             this._inputContainer.appendChild(this._clearControl);
         }
@@ -2211,18 +2704,324 @@ class EnhancedSelect extends HTMLElement {
         this._dropdown.id = listboxId;
         this._input.setAttribute('aria-controls', listboxId);
         this._input.setAttribute('aria-owns', listboxId);
+        this._syncInputContainerMode();
         this._syncClearControlState();
     }
     _initializeStyles() {
         const style = document.createElement('style');
         style.textContent = `
+      /* ═══════════════════════════════════════════════════════════════════════════
+         ELEGANT SELECT COMPONENT — Refined Design System
+         Formal aesthetics with sophisticated microinteractions
+       ═══════════════════════════════════════════════════════════════════════════ */
+      
       :host {
+        --select-primary: #1a1a2e;
+        --select-primary-light: #16213e;
+        --select-accent: #0f3460;
+        --select-accent-hover: #e94560;
+        --select-surface: #ffffff;
+        --select-surface-elevated: #fafbfc;
+        --select-border: #e1e5eb;
+        --select-border-focus: #0f3460;
+        --select-text: #1a1a2e;
+        --select-text-muted: #6b7280;
+        --select-text-placeholder: #9ca3af;
+        --select-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+        --select-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+        --select-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+        --select-shadow-focus: 0 0 0 3px rgba(15, 52, 96, 0.12);
+        --select-radius-sm: 6px;
+        --select-radius-md: 10px;
+        --select-radius-lg: 14px;
+        --select-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        --select-transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+        --select-transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        --select-badge-animation: badgeEnter 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+        --select-badge-enter-from-opacity: 0;
+        --select-badge-enter-from-transform: scale(0.8) translateY(-4px);
+        --select-badge-enter-to-opacity: 1;
+        --select-badge-enter-to-transform: scale(1) translateY(0);
+        --select-badge-active-transform: scale(0.98);
+        --select-badge-hover-transform: scale(1.02);
+        --select-badge-letter-spacing: 0.01em;
+        --select-badge-hover-shadow: var(--select-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+        --select-badge-remove-icon-size: 10px;
+        --select-badge-remove-focus-outline: 2px solid rgba(255, 255, 255, 0.5);
+        --select-badge-remove-focus-offset: 1px;
+        --select-badge-remove-hover-transform: scale(1.15) rotate(90deg);
+        --select-badge-remove-active-transform: scale(0.95) rotate(90deg);
+        --select-input-hover-border: var(--select-border-focus);
+        --select-input-hover-shadow: var(--select-shadow-sm), 0 0 0 1px rgba(15, 52, 96, 0.05);
+        --select-input-font-weight: 450;
+        --select-input-letter-spacing: 0.01em;
+        --select-input-disabled-opacity: 0.6;
+        --select-input-overflow-x: hidden;
+        --select-input-align-items: center;
+        --select-input-align-content: center;
+        --select-input-align-self: center;
+        --select-multi-input-max-height: 160px;
+        --select-multi-input-overflow-x: hidden;
+        --select-multi-input-overflow-y: auto;
+        --select-multi-input-flex-wrap: wrap;
+        --select-multi-input-align-content: flex-start;
+        --select-multi-input-horizontal-input-flex: 0 0 var(--select-multi-input-min-width, 96px);
+        --select-multi-input-horizontal-cursor: grab;
+        --select-multi-input-horizontal-active-cursor: grabbing;
+        --select-multi-separator-inset-block: 10px;
+        --select-multi-action-surface-bg: var(--select-input-bg, var(--select-surface));
+        --select-multi-action-divider: 1px solid var(--select-border);
+        --select-separator-opacity: 0.6;
+        --select-separator-active-opacity: 1;
+        --select-separator-position: var(--select-arrow-width, 42px);
+        --select-separator-position-with-clear: calc(var(--select-arrow-right-with-clear, 34px) + var(--select-arrow-width, 42px));
+        --select-separator-dark-bg: linear-gradient(
+          to bottom,
+          transparent 0%,
+          var(--select-border) 20%,
+          var(--select-border) 80%,
+          transparent 100%
+        );
+        --select-arrow-open-transform: rotate(180deg);
+        --select-clear-button-hover-transform: translateY(-50%) scale(1.1);
+        --select-clear-button-active-transform: translateY(-50%) scale(0.95);
+        --select-clear-button-focus-offset: 2px;
+        --select-clear-icon-size: 14px;
+        --select-dropdown-top: calc(100% + 6px);
+        --select-dropdown-bottom: calc(100% + 6px);
+        --select-dropdown-animation: dropdownEnter 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        --select-dropdown-enter-from-opacity: 0;
+        --select-dropdown-enter-from-transform: translateY(-8px) scale(0.98);
+        --select-dropdown-enter-to-opacity: 1;
+        --select-dropdown-enter-to-transform: translateY(0) scale(1);
+        --select-dropdown-top-transform-origin: bottom center;
+        --select-dropdown-top-enter-from-transform: translateY(8px) scale(0.98);
+        --select-dropdown-padding: 6px;
+        --select-dropdown-scroll-behavior: smooth;
+        --select-dropdown-transform-origin: top center;
+        --select-scrollbar-width: 6px;
+        --select-scrollbar-thumb-radius: 3px;
+        --select-option-hover-transform: translateX(2px);
+        --select-option-font-weight: 450;
+        --select-option-margin: 2px 0;
+        --select-option-disabled-opacity: 0.5;
+        --select-option-disabled-cursor: not-allowed;
+        --select-option-active-outline-offset: -2px;
+        --select-option-selected-active-outline-offset: -2px;
+        --select-option-selected-indicator-width: 3px;
+        --select-option-selected-indicator-height: 60%;
+        --select-option-selected-indicator-bg: var(--select-accent);
+        --select-option-selected-indicator-radius: 0 2px 2px 0;
+        --select-option-selected-indicator-left: 0;
+        --select-option-selected-indicator-top: 50%;
+        --select-option-selected-indicator-transform: translateY(-50%);
+        --select-option-selected-indicator-animation: selectedIndicator 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+        --select-option-selected-indicator-from-height: 0;
+        --select-option-selected-indicator-to-height: 60%;
+        --select-option-selected-indicator-from-opacity: 0;
+        --select-option-selected-indicator-to-opacity: 1;
+        --select-option-pressed-transform: translateX(2px) scale(0.99);
+        --select-option-selected-pressed-transform: scale(0.99);
+        --select-button-hover-transform: translateY(-1px);
+        --select-button-active-transform: translateY(0) scale(0.98);
+        --select-button-font-weight: 550;
+        --select-button-letter-spacing: 0.02em;
+        --select-spinner-animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+        --select-searching-spinner-active-color: var(--select-accent);
+        --select-badge-remove-margin-left: 2px;
+        --select-badge-remove-radius: 50%;
+        --select-badge-remove-font-weight: 600;
+        --select-empty-gap: 8px;
+        --select-searching-gap: 8px;
+        --select-searching-spinner-size: 24px;
+        --select-searching-spinner-border: 2px solid var(--select-border);
+        --select-searching-spinner-animation: var(--select-spinner-animation);
+        --select-group-header-separator-margin-top: 8px;
+        --select-group-header-separator-padding-top: 14px;
+        --select-group-header-separator-border-top: 1px solid var(--select-border);
+        --select-reduced-motion-duration: 0.01ms;
+        --select-reduced-motion-iteration-count: 1;
+        --select-high-contrast-border-width: 2px;
+        --select-high-contrast-indicator-width: 4px;
+        --select-high-contrast-focus-outline-width: 3px;
+        --select-high-contrast-focus-outline-color: Highlight;
+        --select-touch-target-min-height: 44px;
+        --select-badge-dark-bg: linear-gradient(135deg, var(--select-accent) 0%, #4f46e5 100%);
+        --select-host-z-index: auto;
+        --select-host-open-z-index: var(--select-dropdown-z-index, 1000);
+        --select-ancestor-open-z-index: var(--select-host-open-z-index, var(--select-dropdown-z-index, 1000));
+        
         display: block;
         position: relative;
+        z-index: var(--select-host-z-index, auto);
         width: var(--select-width, 100%);
         height: var(--select-height, auto);
+        font-family: var(--select-font-family, inherit);
+        font-size: var(--select-font-size, inherit);
+        line-height: var(--select-line-height, inherit);
+        color: var(--select-color, inherit);
+      }
+
+      :host([data-open="true"]) {
+        z-index: var(--select-host-open-z-index, var(--select-dropdown-z-index, 1000));
+      }
+
+      :host([dir="ltr"]) {
+        direction: ltr;
+      }
+
+      :host([dir="rtl"]) {
+        direction: rtl;
+      }
+
+      /* ─────────────────────────────────────────────────────────────────────────
+         Selection Badges — Refined pill design with elegant interactions
+       ───────────────────────────────────────────────────────────────────────── */
+      
+      .selection-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--select-badge-gap, 6px);
+        flex: 0 1 auto;
+        width: var(--select-badge-width, auto);
+        min-width: var(--select-badge-min-width, 0);
+        height: var(--select-badge-height, auto);
+        min-height: var(--select-badge-min-height, 26px);
+        padding: var(--select-badge-padding, 4px 10px 4px 12px);
+        margin: var(--select-badge-margin, 3px);
+        background: var(--select-badge-bg, linear-gradient(135deg, var(--select-accent) 0%, var(--select-primary-light) 100%));
+        color: var(--select-badge-color, #ffffff);
+        border: var(--select-badge-border, none);
+        border-radius: var(--select-badge-border-radius, 999px);
+        box-shadow: var(--select-badge-shadow, var(--select-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.1));
+        box-sizing: border-box;
+        font-size: var(--select-badge-font-size, 0.8667em);
+        font-weight: var(--select-badge-font-weight, 500);
+        line-height: var(--select-badge-line-height, 1.2);
+        letter-spacing: var(--select-badge-letter-spacing);
+        max-width: var(--select-badge-max-width, 100%);
+        overflow: hidden;
+        transform: scale(1);
+        transition: 
+          transform var(--select-transition-bounce),
+          box-shadow var(--select-transition-fast),
+          background var(--select-transition-fast);
+        animation: var(--select-badge-animation);
+      }
+      
+      @keyframes badgeEnter {
+        0% {
+          opacity: var(--select-badge-enter-from-opacity);
+          transform: var(--select-badge-enter-from-transform);
+        }
+        100% {
+          opacity: var(--select-badge-enter-to-opacity);
+          transform: var(--select-badge-enter-to-transform);
+        }
       }
       
+      .selection-badge:hover {
+        background: var(--select-badge-hover-bg, var(--select-badge-bg, linear-gradient(135deg, var(--select-accent) 0%, var(--select-primary-light) 100%)));
+        color: var(--select-badge-hover-color, var(--select-badge-color, #ffffff));
+        border: var(--select-badge-hover-border, var(--select-badge-border, none));
+        box-shadow: var(--select-badge-hover-shadow);
+        transform: var(--select-badge-hover-transform);
+      }
+
+      .selection-badge:active {
+        background: var(--select-badge-active-bg, var(--select-badge-hover-bg, var(--select-badge-bg, linear-gradient(135deg, var(--select-accent) 0%, var(--select-primary-light) 100%))));
+        color: var(--select-badge-active-color, var(--select-badge-hover-color, var(--select-badge-color, #ffffff)));
+        border: var(--select-badge-active-border, var(--select-badge-hover-border, var(--select-badge-border, none)));
+        box-shadow: var(--select-badge-active-shadow, var(--select-badge-hover-shadow));
+        transform: var(--select-badge-active-transform);
+      }
+
+      .selection-badge-label {
+        display: block;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--select-badge-label-color, inherit);
+        font-size: var(--select-badge-label-font-size, inherit);
+        font-weight: var(--select-badge-label-font-weight, inherit);
+        line-height: var(--select-badge-label-line-height, var(--select-badge-line-height, 1.2));
+        letter-spacing: var(--select-badge-label-letter-spacing, inherit);
+        text-align: var(--select-badge-label-text-align, start);
+      }
+
+      .badge-remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--select-badge-remove-size, 18px);
+        height: var(--select-badge-remove-size, 18px);
+        min-width: var(--select-badge-remove-min-width, var(--select-badge-remove-size, 18px));
+        min-height: var(--select-badge-remove-min-height, var(--select-badge-remove-size, 18px));
+        padding: 0;
+        margin-left: var(--select-badge-remove-margin-left);
+        background: var(--select-badge-remove-bg, rgba(255, 255, 255, 0.2));
+        border: var(--select-badge-remove-border, none);
+        border-radius: var(--select-badge-remove-radius);
+        color: var(--select-badge-remove-color, #ffffff);
+        font-size: var(--select-badge-remove-font-size, 0.7333em);
+        font-weight: var(--select-badge-remove-font-weight);
+        line-height: 1;
+        cursor: pointer;
+        flex: 0 0 auto;
+        transition: 
+          background var(--select-transition-fast),
+          color var(--select-transition-fast),
+          border-color var(--select-transition-fast),
+          box-shadow var(--select-transition-fast),
+          transform var(--select-transition-bounce);
+      }
+
+      .badge-remove-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--select-badge-remove-icon-size, 10px);
+        height: var(--select-badge-remove-icon-size, 10px);
+        pointer-events: none;
+      }
+
+      .badge-remove-icon svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      
+      .badge-remove:hover {
+        background: var(--select-badge-remove-hover-bg, rgba(233, 69, 96, 0.9));
+        color: var(--select-badge-remove-hover-color, var(--select-badge-remove-color, #ffffff));
+        border: var(--select-badge-remove-hover-border, var(--select-badge-remove-border, none));
+        box-shadow: var(--select-badge-remove-hover-shadow, none);
+        transform: var(--select-badge-remove-hover-transform);
+      }
+
+      .badge-remove:focus-visible {
+        outline: var(--select-badge-remove-focus-outline);
+        outline-offset: var(--select-badge-remove-focus-offset);
+      }
+      
+      .badge-remove:active {
+        background: var(--select-badge-remove-active-bg, var(--select-badge-remove-hover-bg, rgba(233, 69, 96, 0.9)));
+        color: var(--select-badge-remove-active-color, var(--select-badge-remove-hover-color, var(--select-badge-remove-color, #ffffff)));
+        border: var(--select-badge-remove-active-border, var(--select-badge-remove-hover-border, var(--select-badge-remove-border, none)));
+        box-shadow: var(--select-badge-remove-active-shadow, var(--select-badge-remove-hover-shadow, none));
+        transform: var(--select-badge-remove-active-transform);
+      }
+
+      :host([dir="rtl"]) .badge-remove {
+        margin-left: 0;
+        margin-right: var(--select-badge-remove-margin-left);
+      }
+      
+      /* ─────────────────────────────────────────────────────────────────────────
+         Input Container — Sophisticated control shell
+       ───────────��───────────────────────────────────────────────────────────── */
+      
       .select-container {
         position: relative;
         width: 100%;
@@ -2232,364 +3031,644 @@ class EnhancedSelect extends HTMLElement {
         position: relative;
         width: 100%;
         display: flex;
-        align-items: center;
-        flex-wrap: wrap;
+        align-items: var(--select-input-align-items, center);
+        flex-wrap: nowrap;
+        justify-content: var(--select-input-justify-content, flex-start);
         gap: var(--select-input-gap, 6px);
-        padding: var(--select-input-padding, 6px 52px 6px 8px);
+        padding: var(--select-input-padding, 10px 52px 10px 14px);
         height: var(--select-input-height, auto);
-        min-height: var(--select-input-min-height, 44px);
+        min-height: var(--select-input-min-height, 48px);
         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, var(--select-bg, white));
-        border: var(--select-input-border, 1px solid var(--select-border-color, #d1d5db));
-        border-radius: var(--select-input-border-radius, 6px);
+        overflow: hidden;
+        align-content: var(--select-input-align-content, center);
+        text-align: var(--select-input-text-align, start);
+        background: var(--select-input-bg, var(--select-surface));
+        border: var(--select-input-border, 1.5px solid var(--select-border));
+        border-radius: var(--select-input-border-radius, var(--select-radius-md));
+        box-shadow: var(--select-shadow-sm);
+        box-sizing: border-box;
+        transition: 
+          border-color var(--select-transition-fast),
+          box-shadow var(--select-transition-smooth),
+          transform var(--select-transition-fast);
+      }
+
+      .input-content {
+        position: relative;
+        display: flex;
+        flex: 1 1 auto;
+        width: 100%;
+        min-width: 0;
+        min-height: 0;
+        align-self: stretch;
+        align-items: var(--select-input-align-items, center);
+        align-content: var(--select-input-align-content, center);
+        justify-content: var(--select-input-justify-content, flex-start);
+        flex-wrap: nowrap;
+        gap: var(--select-input-gap, 6px);
+        overflow-x: var(--select-input-overflow-x, hidden);
+        overflow-y: var(--select-input-overflow-y, hidden);
+        scrollbar-width: thin;
         box-sizing: border-box;
-        transition: all 0.2s ease;
+      }
+      
+      .input-container:hover {
+        border-color: var(--select-input-hover-border);
+        box-shadow: var(--select-input-hover-shadow);
+      }
+
+      .input-container.input-container--single {
+        flex-wrap: nowrap;
+        align-content: center;
+      }
+
+      .input-container.input-container--multi {
+        max-height: var(--select-multi-input-max-height, var(--select-input-max-height, 160px));
+      }
+
+      .input-container.input-container--multi .input-content {
+        flex-wrap: var(--select-multi-input-flex-wrap, wrap);
+        align-content: var(--select-multi-input-align-content, flex-start);
+        overflow-x: var(--select-multi-input-overflow-x, hidden);
+        overflow-y: var(--select-multi-input-overflow-y, auto);
+      }
+
+      .input-container.input-container--multi::after {
+        top: var(--select-multi-separator-inset-block, 10px);
+        bottom: var(--select-multi-separator-inset-block, 10px);
+        height: auto;
+        transform: none;
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] {
+        align-items: stretch;
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .input-content {
+        cursor: var(--select-multi-input-horizontal-cursor, grab);
+        overflow-y: hidden;
+        overscroll-behavior-x: contain;
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"]::after {
+        display: none;
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"].is-dragging-scroll .input-content {
+        cursor: var(--select-multi-input-horizontal-active-cursor, grabbing);
+        user-select: none;
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .input-content .selection-badge {
+        flex: 0 0 auto;
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .input-content > .select-input,
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .input-content > input.select-input,
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .input-content > .select-input[type="text"] {
+        flex: var(--select-multi-input-horizontal-input-flex, 0 0 var(--select-multi-input-min-width, 96px));
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .dropdown-arrow-container {
+        background: var(--select-multi-action-surface-bg, var(--select-input-bg, var(--select-surface)));
+        border-left: var(--select-multi-action-divider, 1px solid var(--select-border));
+        z-index: 4;
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .dropdown-arrow-container.with-clear-control {
+        right: var(--select-arrow-right-with-clear, 34px);
+      }
+
+      :host([dir="rtl"]) .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .dropdown-arrow-container {
+        border-left: none;
+        border-right: var(--select-multi-action-divider, 1px solid var(--select-border));
+      }
+
+      :host([dir="rtl"]) .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .dropdown-arrow-container.with-clear-control {
+        right: auto;
+        left: var(--select-arrow-right-with-clear, 34px);
+      }
+
+      .input-container.input-container--multi[data-multi-scroll-mode="horizontal"] .clear-control-button {
+        background: var(--select-multi-action-surface-bg, var(--select-input-bg, var(--select-surface)));
+        z-index: 4;
       }
       
       .input-container:focus-within {
-        border-color: var(--select-input-focus-border, var(--select-border-focus-color, #667eea));
-        box-shadow: var(--select-input-focus-shadow, 0 0 0 3px rgba(102, 126, 234, 0.1));
+        border-color: var(--select-input-focus-border, var(--select-border-focus));
+        box-shadow: var(--select-shadow-focus), var(--select-shadow-sm);
       }
       
-      /* Gradient separator before arrow */
+      /* Elegant separator line before arrow */
       .input-container::after {
         content: '';
         position: absolute;
         top: 50%;
-        right: var(--select-separator-position, var(--select-seperator-position, 40px));
+        right: var(--select-separator-position, var(--select-arrow-width, 42px));
         transform: translateY(-50%);
-        width: var(--select-separator-width, var(--select-seperator-width, 1px));
-        height: var(--select-separator-height, var(--select-seperator-height, 60%));
-        background: var(--select-separator-bg, var(--select-seperator-bg, var(--select-separator-gradient, var(--select-seperator-gradient, linear-gradient(
+        width: var(--select-separator-width, 1px);
+        height: var(--select-separator-height, 50%);
+        background: var(--select-separator-bg, linear-gradient(
           to bottom,
           transparent 0%,
-          rgba(0, 0, 0, 0.1) 20%,
-          rgba(0, 0, 0, 0.1) 80%,
+          var(--select-border) 20%,
+          var(--select-border) 80%,
           transparent 100%
-        ))));
+        ));
         pointer-events: none;
         z-index: 1;
+        opacity: var(--select-separator-opacity);
+        transition: opacity var(--select-transition-fast);
+      }
+      
+      .input-container:hover::after,
+      .input-container:focus-within::after {
+        opacity: var(--select-separator-active-opacity);
+      }
+
+      :host([dir="rtl"]) .input-container::after {
+        right: auto;
+        left: var(--select-separator-position, var(--select-arrow-width, 42px));
       }
       
+      /* ─────────────────────────────────────────────────────────────────────────
+         Dropdown Arrow — Smooth rotation with refined styling
+       ───────────────────────────────────────────────────────────────────────── */
+      
       .dropdown-arrow-container {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
-        width: var(--select-arrow-width, 40px);
-        /* allow explicit height override even though container normally stretches */
+        width: var(--select-arrow-width, 42px);
         height: var(--select-arrow-height, auto);
         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);
+        border-radius: var(--select-arrow-border-radius, 0 var(--select-radius-md) var(--select-radius-md) 0);
         z-index: 2;
+        transition: background-color var(--select-transition-fast);
       }
 
       .input-container.has-clear-control {
-        padding: var(--select-input-padding-with-clear, 6px 84px 6px 8px);
+        padding: var(--select-input-padding-with-clear, 10px 84px 10px 14px);
       }
 
       .input-container.has-clear-control::after {
-        right: var(--select-separator-position-with-clear, var(--select-seperator-position-with-clear, 72px));
+        right: var(--select-separator-position-with-clear, calc(var(--select-arrow-right-with-clear, 34px) + var(--select-arrow-width, 42px)));
       }
 
       .dropdown-arrow-container.with-clear-control {
-        right: var(--select-arrow-right-with-clear, 32px);
+        right: var(--select-arrow-right-with-clear, 34px);
+      }
+
+      :host([dir="rtl"]) .dropdown-arrow-container {
+        right: auto;
+        left: 0;
+        border-radius: var(--select-arrow-border-radius-rtl, var(--select-radius-md) 0 0 var(--select-radius-md));
+      }
+
+      :host([dir="rtl"]) .input-container.has-clear-control::after {
+        right: auto;
+        left: var(--select-separator-position-with-clear, calc(var(--select-arrow-right-with-clear, 34px) + var(--select-arrow-width, 42px)));
       }
 
+      :host([dir="rtl"]) .dropdown-arrow-container.with-clear-control {
+        right: auto;
+        left: var(--select-arrow-right-with-clear, 34px);
+      }
+
+      /* ─────────────────────────────────────────────────────────────────────────
+         Clear Control — Minimal and elegant dismiss button
+       ───────────────────────────────────────────────────────────────────────── */
+
       .clear-control-button {
         position: absolute;
         top: 50%;
-        right: var(--select-clear-button-right, 6px);
+        right: var(--select-clear-button-right, 8px);
         transform: translateY(-50%);
-        width: var(--select-clear-button-size, 24px);
-        height: var(--select-clear-button-size, 24px);
+        width: var(--select-clear-button-size, 26px);
+        height: var(--select-clear-button-size, 26px);
         border: var(--select-clear-button-border, none);
-        border-radius: var(--select-clear-button-radius, 999px);
+        border-radius: var(--select-clear-button-radius, 50%);
         background: var(--select-clear-button-bg, transparent);
-        color: var(--select-clear-button-color, #6b7280);
+        color: var(--select-clear-button-color, var(--select-text-muted));
         display: inline-flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         z-index: 3;
-        transition: var(--select-clear-button-transition, all 0.2s ease);
+        transition: 
+          background var(--select-transition-fast),
+          color var(--select-transition-fast),
+          transform var(--select-transition-bounce);
       }
 
       .clear-control-button:hover {
-        background: var(--select-clear-button-hover-bg, rgba(0, 0, 0, 0.06));
-        color: var(--select-clear-button-hover-color, #111827);
+        background: var(--select-clear-button-hover-bg, rgba(233, 69, 96, 0.1));
+        color: var(--select-clear-button-hover-color, var(--select-accent-hover));
+        transform: var(--select-clear-button-hover-transform);
+      }
+      
+      .clear-control-button:active {
+        transform: var(--select-clear-button-active-transform);
       }
 
       .clear-control-button:focus-visible {
-        outline: var(--select-clear-button-focus-outline, 2px solid rgba(102, 126, 234, 0.55));
-        outline-offset: 1px;
+        outline: var(--select-clear-button-focus-outline, 2px solid var(--select-border-focus));
+        outline-offset: var(--select-clear-button-focus-offset);
       }
 
       .clear-control-button[hidden] {
         display: none;
       }
 
+      :host([dir="rtl"]) .clear-control-button {
+        right: auto;
+        left: var(--select-clear-button-right, 8px);
+      }
+
       .clear-control-icon {
-        font-size: var(--select-clear-icon-size, 16px);
-        line-height: 1;
-        font-weight: var(--select-clear-icon-weight, 500);
+        width: var(--select-clear-icon-size);
+        height: var(--select-clear-icon-size);
         pointer-events: none;
       }
       
-      .dropdown-arrow-container:hover {
-        background-color: var(--select-arrow-hover-bg, rgba(102, 126, 234, 0.08));
+      .clear-control-icon svg {
+        width: 100%;
+        height: 100%;
       }
       
-      .dropdown-arrow:hover {
-        /* legacy alias --select-arrow-hover for icon color */
-        color: var(--select-arrow-hover, var(--select-arrow-hover-color, #667eea));
+      .dropdown-arrow-container:hover {
+        background-color: var(--select-arrow-hover-bg, rgba(15, 52, 96, 0.05));
       }
       
       .dropdown-arrow {
-        width: var(--select-arrow-width, var(--select-arrow-size, 16px));
-        height: var(--select-arrow-height, var(--select-arrow-size, 16px));
-        color: var(--select-arrow-color, #667eea);
-        transition: transform 0.2s ease, color 0.2s ease;
-        transform: translateY(0);
+        width: var(--select-arrow-size, 18px);
+        height: var(--select-arrow-size, 18px);
+        color: var(--select-arrow-color, var(--select-text-muted));
+        transition: 
+          transform var(--select-transition-smooth),
+          color var(--select-transition-fast);
+        transform-origin: center;
       }
       
       .dropdown-arrow path {
-        stroke-width: var(--select-arrow-stroke-width, 2);
+        stroke-width: var(--select-arrow-stroke-width, 1.5);
       }
       
       .dropdown-arrow-container:hover .dropdown-arrow {
-        color: var(--select-arrow-hover-color, #667eea);
+        color: var(--select-arrow-hover-color, var(--select-accent));
       }
       
       .dropdown-arrow.open {
-        transform: rotate(180deg);
+        transform: var(--select-arrow-open-transform);
       }
       
-      .select-input {
-        flex: 1;
-        width: var(--select-input-width, auto);
-        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);
+      /* ─────────────────────────────────────────────────────────────────────────
+         Input Field — Clean text entry
+       ───────────────────────────────────────────────────────────────────────── */
+      
+      .input-container > .select-input,
+      input.select-input,
+      .select-input[type="text"] {
+        display: block;
+        flex: 1 1 auto;
+        width: var(--select-input-width, 100%);
+        max-width: 100%;
+        min-width: var(--select-input-min-width, 0);
+        min-inline-size: 0;
+        min-height: 0;
+        padding: var(--select-input-field-padding, 0) !important;
+        margin: 0 !important;
+        border: 0 !important;
+        font-size: var(--select-input-font-size, inherit);
         line-height: var(--select-input-line-height, 1.5);
-        color: var(--select-input-color, var(--select-text-color, #1f2937));
-        background: transparent;
+        color: var(--select-input-color, var(--select-text));
+        background: transparent !important;
         box-sizing: border-box;
-        outline: none;
-        font-family: var(--select-font-family, inherit);
-      }
-      
-      .select-input::placeholder {
-        color: var(--select-input-placeholder-color, var(--select-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;
+        outline: none !important;
+        font-weight: var(--select-input-font-weight);
+        letter-spacing: var(--select-input-letter-spacing);
+        font-family: var(--select-input-font-family, inherit);
+        font-style: var(--select-input-font-style, normal);
+        align-self: var(--select-input-align-self, center);
+        appearance: none !important;
+        -webkit-appearance: none !important;
+        box-shadow: none !important;
+        border-radius: 0 !important;
         overflow: hidden;
         text-overflow: ellipsis;
+        text-align: var(--select-input-text-align, inherit);
+        white-space: nowrap;
       }
       
-      .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;
+      .select-input::placeholder {
+        color: var(--select-input-placeholder-color, var(--select-text-placeholder));
+        font-weight: 400;
       }
-      
-      .badge-remove:hover {
-        background: var(--select-badge-remove-hover-bg, rgba(255, 255, 255, 0.5));
+
+      :host([dir="rtl"]) .input-container {
+        padding: var(--select-input-padding-rtl, 10px 14px 10px 52px);
+      }
+
+      :host([dir="rtl"]) .input-container.has-clear-control {
+        padding: var(--select-input-padding-with-clear-rtl, 10px 14px 10px 84px);
       }
 
-      .badge-remove:focus-visible {
-        outline: 2px solid var(--select-badge-remove-focus-outline, rgba(255, 255, 255, 0.8));
-        outline-offset: 2px;
+      .input-container.input-container--multi > .select-input,
+      .input-container.input-container--multi > input.select-input,
+      .input-container.input-container--multi > .select-input[type="text"] {
+        width: auto;
+        min-width: var(--select-multi-input-min-width, 96px);
+        flex: 1 0 var(--select-multi-input-min-width, 96px);
+      }
+
+      .input-container.input-container--single > .select-input,
+      .input-container.input-container--single > input.select-input,
+      .input-container.input-container--single > .select-input[type="text"] {
+        width: var(--select-input-width, 100%);
+        min-width: 0;
+        flex: 1 1 auto;
       }
       
       .select-input:disabled {
         background-color: var(--select-disabled-bg, #f5f5f5);
         cursor: not-allowed;
+        opacity: var(--select-input-disabled-opacity);
       }
       
+      /* ─────────────────────────────────────────────────────────────────────────
+         Dropdown Panel — Elegant floating container
+       ───────────────────────────────────────────────────────────────────────── */
+      
       .select-dropdown {
         position: absolute;
-        scroll-behavior: smooth;
-        top: 100%;
+        scroll-behavior: var(--select-dropdown-scroll-behavior);
+        top: var(--select-dropdown-top);
+        bottom: auto;
         left: 0;
         right: 0;
-        margin-top: var(--select-dropdown-margin-top, 4px);
-        max-height: var(--select-dropdown-max-height, 300px);
+        max-height: var(--select-dropdown-max-height, 320px);
         overflow: hidden;
-        background: var(--select-dropdown-bg, var(--select-bg, white));
-        border: 1px solid var(--select-dropdown-border, #ccc);
-        border-radius: var(--select-dropdown-border-radius, 4px);
-        box-shadow: var(--select-dropdown-shadow, 0 4px 6px rgba(0,0,0,0.1));
+        box-sizing: border-box;
+        background: var(--select-dropdown-bg, var(--select-surface));
+        border: 1px solid var(--select-dropdown-border, var(--select-border));
+        border-radius: var(--select-dropdown-border-radius, var(--select-radius-lg));
+        box-shadow: var(--select-dropdown-shadow, var(--select-shadow-lg));
         z-index: var(--select-dropdown-z-index, 1000);
+        transform-origin: var(--select-dropdown-transform-origin);
+        animation: var(--select-dropdown-animation);
+      }
+
+      .select-dropdown[data-placement="top"] {
+        top: auto;
+        bottom: var(--select-dropdown-bottom, calc(100% + 6px));
+        transform-origin: var(--select-dropdown-top-transform-origin, bottom center);
+      }
+
+      .select-dropdown[data-placement="top"] {
+        --select-dropdown-enter-from-transform: var(--select-dropdown-top-enter-from-transform, translateY(8px) scale(0.98));
+      }
+      
+      @keyframes dropdownEnter {
+        0% {
+          opacity: var(--select-dropdown-enter-from-opacity);
+          transform: var(--select-dropdown-enter-from-transform);
+        }
+        100% {
+          opacity: var(--select-dropdown-enter-to-opacity);
+          transform: var(--select-dropdown-enter-to-transform);
+        }
       }
       
       .options-container {
         position: relative;
-        max-height: var(--select-options-max-height, 300px);
+        max-height: var(--select-options-max-height, 320px);
         overflow: auto;
-        transition: opacity 0.2s ease-in-out;
-        background: var(--select-options-bg, var(--select-dropdown-bg, var(--select-bg, white)));
+        box-sizing: border-box;
+        padding: var(--select-options-padding, var(--select-dropdown-padding, 6px));
+        background: var(--select-options-bg, var(--select-dropdown-bg, var(--select-surface)));
+        
+        /* Custom scrollbar styling */
+        scrollbar-width: thin;
+        scrollbar-color: var(--select-border) transparent;
       }
+      
+      .options-container::-webkit-scrollbar {
+        width: var(--select-scrollbar-width);
+      }
+      
+      .options-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      
+      .options-container::-webkit-scrollbar-thumb {
+        background: var(--select-border);
+        border-radius: var(--select-scrollbar-thumb-radius);
+      }
+      
+      .options-container::-webkit-scrollbar-thumb:hover {
+        background: var(--select-text-muted);
+      }
+
+      /* ─────────────────────────────────────────────────────────────────────────
+         Group Headers — Refined section dividers
+       ───────────────────────────────────────────────────────────────────────── */
 
       .group-header {
-        padding: var(--select-group-header-padding, 8px 12px);
+        padding: var(--select-group-header-padding, 10px 12px 6px);
+        margin: var(--select-group-header-margin, 0);
         font-weight: var(--select-group-header-weight, 600);
-        color: var(--select-group-header-color, #6b7280);
-        background-color: var(--select-group-header-bg, #f3f4f6);
+        color: var(--select-group-header-color, var(--select-text-muted));
+        background-color: var(--select-group-header-bg, var(--select-surface));
         text-align: var(--select-group-header-text-align, left);
-        font-size: var(--select-group-header-font-size, 12px);
+        font-size: var(--select-group-header-font-size, 0.7333em);
         text-transform: var(--select-group-header-text-transform, uppercase);
-        letter-spacing: var(--select-group-header-letter-spacing, 0.05em);
+        letter-spacing: var(--select-group-header-letter-spacing, 0.08em);
         position: sticky;
         top: 0;
         z-index: 1;
-        border-bottom: var(--select-group-header-border-bottom, 1px solid #e5e7eb);
+        border: var(--select-group-header-border, none);
+        border-bottom: var(--select-group-header-border-bottom, none);
+        border-radius: var(--select-group-header-border-radius, 0);
+        box-shadow: var(--select-group-header-shadow, none);
+      }
+      
+      .group-header:not(:first-child) {
+        margin-top: var(--select-group-header-separator-margin-top);
+        padding-top: var(--select-group-header-separator-padding-top);
+        border-top: var(--select-group-header-separator-border-top);
       }
 
+      /* ─────────────────────────────────────────────────────────────────────────
+         Options — Elegant hover and selection states
+       ───────────────────────────────────────────────────────────────────────── */
+
       .option {
-        padding: var(--select-option-padding, 8px 12px);
+        position: relative;
+        padding: var(--select-option-padding, 10px 14px);
         cursor: pointer;
-        color: var(--select-option-color, var(--select-text-color, #1f2937));
-        background: var(--select-option-bg, var(--select-dropdown-bg, var(--select-bg, white)));
-        transition: var(--select-option-transition, background-color 0.15s ease);
+        color: var(--select-option-color, var(--select-text));
+        background: var(--select-option-bg, transparent);
+        border: var(--select-option-border, none);
+        text-align: var(--select-option-text-align, start);
+        transition: 
+          background var(--select-transition-fast),
+          color var(--select-transition-fast),
+          border-color var(--select-transition-fast),
+          transform var(--select-transition-fast),
+          box-shadow var(--select-transition-fast);
         user-select: none;
-        font-size: var(--select-option-font-size, 14px);
+        font-size: var(--select-option-font-size, inherit);
+        font-weight: var(--select-option-font-weight);
         line-height: var(--select-option-line-height, 1.5);
-        border: var(--select-option-border, none);
-        border-bottom: var(--select-option-border-bottom, none);
-        border-radius: var(--select-option-border-radius, 0);
-        box-shadow: var(--select-option-shadow, none);
-        transform: var(--select-option-transform, none);
+        border-radius: var(--select-option-border-radius, var(--select-radius-sm));
+        margin: var(--select-option-margin);
       }
 
       .option:hover {
-        background: var(--select-option-hover-bg, #f3f4f6);
-        color: var(--select-option-hover-color, #1f2937);
+        background: var(--select-option-hover-bg, var(--select-surface-elevated));
+        border: var(--select-option-hover-border, var(--select-option-border, none));
+        color: var(--select-option-hover-color, var(--select-text));
+        transform: var(--select-option-hover-transform);
       }
 
       .option.selected {
-        background: var(--select-option-selected-bg, #e0e7ff);
-        color: var(--select-option-selected-color, #4338ca);
-        font-weight: var(--select-option-selected-weight, 500);
+        background: var(--select-option-selected-bg, linear-gradient(135deg, rgba(15, 52, 96, 0.08) 0%, rgba(15, 52, 96, 0.04) 100%));
         border: var(--select-option-selected-border, var(--select-option-border, none));
-        border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
-        border-radius: var(--select-option-selected-border-radius, var(--select-option-border-radius, 0));
-        box-shadow: var(--select-option-selected-shadow, var(--select-option-shadow, none));
-        transform: var(--select-option-selected-transform, var(--select-option-transform, none));
+        color: var(--select-option-selected-color, var(--select-accent));
+        font-weight: var(--select-option-selected-weight, 550);
+      }
+      
+      .option.selected::before {
+        content: '';
+        position: absolute;
+        left: var(--select-option-selected-indicator-left);
+        top: var(--select-option-selected-indicator-top);
+        transform: var(--select-option-selected-indicator-transform);
+        width: var(--select-option-selected-indicator-width);
+        height: var(--select-option-selected-indicator-height);
+        background: var(--select-option-selected-indicator-bg);
+        border-radius: var(--select-option-selected-indicator-radius);
+        animation: var(--select-option-selected-indicator-animation);
+      }
+
+      :host([dir="rtl"]) .option.selected::before {
+        left: auto;
+        right: var(--select-option-selected-indicator-right, var(--select-option-selected-indicator-left));
+        border-radius: var(--select-option-selected-indicator-radius-rtl, 2px 0 0 2px);
+      }
+      
+      @keyframes selectedIndicator {
+        0% {
+          height: var(--select-option-selected-indicator-from-height);
+          opacity: var(--select-option-selected-indicator-from-opacity);
+        }
+        100% {
+          height: var(--select-option-selected-indicator-to-height);
+          opacity: var(--select-option-selected-indicator-to-opacity);
+        }
       }
 
       .option.selected:hover {
-        background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
-        color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #4338ca));
-        border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
-        border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
-        box-shadow: var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
-        transform: var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
+        background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, linear-gradient(135deg, rgba(15, 52, 96, 0.12) 0%, rgba(15, 52, 96, 0.06) 100%)));
+        border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-hover-border, var(--select-option-border, none))));
+        color: var(--select-option-selected-hover-color, var(--select-option-selected-color, var(--select-accent)));
       }
 
       .option.active:not(.selected) {
-        background: 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;
+        background: var(--select-option-active-bg, var(--select-surface-elevated));
+        color: var(--select-option-active-color, var(--select-option-hover-color, var(--select-option-color, var(--select-text))));
+        border: var(--select-option-active-border, var(--select-option-hover-border, var(--select-option-border, none)));
+        outline: var(--select-option-active-outline, 2px solid rgba(15, 52, 96, 0.3));
+        outline-offset: var(--select-option-active-outline-offset);
+        box-shadow: var(--select-option-active-shadow, none);
+        transform: var(--select-option-active-transform, none);
       }
 
       .option.selected.active {
-        background: var(--select-option-selected-active-bg, var(--select-option-selected-bg, #e0e7ff));
-        color: var(--select-option-selected-active-color, var(--select-option-selected-color, #4338ca));
-        border: var(--select-option-selected-active-border, var(--select-option-selected-border, var(--select-option-border, none)));
-        border-bottom: var(--select-option-selected-active-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
-        box-shadow: var(--select-option-selected-active-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
-        transform: var(--select-option-selected-active-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
-        outline: var(--select-option-selected-active-outline, var(--select-option-active-outline, 2px solid rgba(99, 102, 241, 0.45)));
-        outline-offset: -2px;
+        outline: var(--select-option-selected-active-outline, 2px solid rgba(15, 52, 96, 0.4));
+        outline-offset: var(--select-option-selected-active-outline-offset);
+      }
+
+      .option.disabled {
+        background: var(--select-option-disabled-bg, var(--select-option-bg, transparent));
+        color: var(--select-option-disabled-color, var(--select-text-muted));
+        border: var(--select-option-disabled-border, var(--select-option-border, none));
+        opacity: var(--select-option-disabled-opacity, 0.5);
+        cursor: var(--select-option-disabled-cursor, not-allowed);
       }
 
       .option:active:not(.selected) {
-        background: var(--select-option-pressed-bg, #e5e7eb);
+        background: var(--select-option-pressed-bg, rgba(15, 52, 96, 0.08));
+        transform: var(--select-option-pressed-transform);
       }
 
       .option.selected:active {
-        background: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
+        transform: var(--select-option-selected-pressed-transform);
       }
       
+      /* ─────────────────────────────────────────────────────────────────────────
+         Load More & Busy States — Refined feedback indicators
+       ───────────────────────────────────────────────────────────────────────── */
+      
       .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);
+        padding: var(--select-button-padding, 10px 20px);
+        border: var(--select-button-border, 1.5px solid var(--select-border));
+        background: var(--select-button-bg, transparent);
+        color: var(--select-button-color, var(--select-accent));
+        border-radius: var(--select-button-border-radius, var(--select-radius-md));
         cursor: pointer;
-        font-size: var(--select-button-font-size, 14px);
-        font-family: var(--select-font-family, inherit);
-        transition: all 0.2s ease;
+        font-size: var(--select-button-font-size, 0.8667em);
+        font-weight: var(--select-button-font-weight);
+        letter-spacing: var(--select-button-letter-spacing);
+        transition: 
+          background var(--select-transition-fast),
+          border-color var(--select-transition-fast),
+          color var(--select-transition-fast),
+          transform var(--select-transition-bounce);
       }
       
       .load-more-button:hover {
-        background: var(--select-button-hover-bg, #1976d2);
+        background: var(--select-button-hover-bg, var(--select-accent));
+        border-color: var(--select-accent);
         color: var(--select-button-hover-color, white);
+        transform: var(--select-button-hover-transform);
+      }
+      
+      .load-more-button:active {
+        transform: var(--select-button-active-transform);
       }
       
       .load-more-button:disabled {
         opacity: var(--select-button-disabled-opacity, 0.5);
         cursor: not-allowed;
+        transform: none;
       }
       
       .busy-bucket {
-        padding: var(--select-busy-padding, 16px);
+        padding: var(--select-busy-padding, 20px);
         text-align: center;
-        color: var(--select-busy-color, #666);
-        background: var(--select-busy-bg, white);
-        font-size: var(--select-busy-font-size, 14px);
+        color: var(--select-busy-color, var(--select-text-muted));
+        background: var(--select-busy-bg, transparent);
+        font-size: var(--select-busy-font-size, 0.8667em);
       }
       
       .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);
+        width: var(--select-spinner-size, 22px);
+        height: var(--select-spinner-size, 22px);
+        border: var(--select-spinner-border, 2px solid var(--select-border));
+        border-top-color: var(--select-spinner-active-color, var(--select-accent));
         border-radius: 50%;
-        animation: spin 0.6s linear infinite;
+        animation: var(--select-spinner-animation);
       }
       
       @keyframes spin {
@@ -2597,61 +3676,97 @@ class EnhancedSelect extends HTMLElement {
       }
       
       .empty-state {
-        padding: var(--select-empty-padding, 24px);
+        padding: var(--select-empty-padding, 32px 24px);
         text-align: center;
-        color: var(--select-empty-color, #6b7280);
-        font-size: var(--select-empty-font-size, 14px);
-        background: var(--select-empty-bg, white);
+        color: var(--select-empty-color, var(--select-text-muted));
+        font-size: var(--select-empty-font-size, 0.9333em);
+        background: var(--select-empty-bg, transparent);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 6px;
-        min-height: var(--select-empty-min-height, 72px);
+        gap: var(--select-empty-gap);
       }
       
       .searching-state {
-        padding: var(--select-searching-padding, 24px);
+        padding: var(--select-searching-padding, 32px 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;
+        color: var(--select-searching-color, var(--select-accent));
+        font-size: var(--select-searching-font-size, 0.9333em);
+        background: var(--select-searching-bg, transparent);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 6px;
-        min-height: var(--select-searching-min-height, 72px);
+        gap: var(--select-searching-gap);
       }
       
-      @keyframes pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
+      .searching-state::before {
+        content: '';
+        width: var(--select-searching-spinner-size);
+        height: var(--select-searching-spinner-size);
+        border: var(--select-searching-spinner-border);
+        border-top-color: var(--select-searching-spinner-active-color);
+        border-radius: 50%;
+        animation: var(--select-searching-spinner-animation);
       }
       
-      /* Error states */
+      /* ─────────────────────────────────────────────────────────────────────────
+         Error States — Clear visual feedback
+       ───────────────────────────────────────────────────────────────────────── */
+      
       .select-input[aria-invalid="true"] {
-        border-color: var(--select-error-border, #dc2626);
+        border-color: var(--select-error-border, #e94560);
       }
       
       .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);
+        border-color: var(--select-error-border, #e94560);
+        box-shadow: 0 0 0 3px var(--select-error-shadow, rgba(233, 69, 96, 0.15));
       }
       
-      /* Accessibility: Reduced motion */
+      /* ──────────────────────────────────────────────────��──────────────────────
+         Accessibility — Reduced motion & High contrast
+       ───────────────────────────────────────────────────────────────────────── */
+      
       @media (prefers-reduced-motion: reduce) {
-        * {
-          animation-duration: 0.01ms !important;
-          animation-iteration-count: 1 !important;
-          transition-duration: 0.01ms !important;
+        *,
+        *::before,
+        *::after {
+          animation-duration: var(--select-reduced-motion-duration) !important;
+          animation-iteration-count: var(--select-reduced-motion-iteration-count) !important;
+          transition-duration: var(--select-reduced-motion-duration) !important;
+        }
+        
+        .dropdown-arrow.open {
+          transform: var(--select-arrow-open-transform);
+        }
+      }
+      
+      @media (prefers-contrast: high) {
+        .select-input:focus {
+          outline-width: var(--select-high-contrast-focus-outline-width);
+          outline-color: var(--select-high-contrast-focus-outline-color);
+        }
+        
+        .input-container {
+          border-width: var(--select-high-contrast-border-width);
         }
+        
+        .option.selected::before {
+          width: var(--select-high-contrast-indicator-width);
+        }
+      }
+      
+      /* Touch targets (WCAG 2.5.5) */
+      .load-more-button,
+      select-option {
+        min-height: var(--select-touch-target-min-height);
       }
       
-      /* Dark mode - Opt-in via class, data attribute, or ancestor context */
+      /* ─────────────────────────────────────────────────────────────────────────
+         Dark Mode — Elegant dark theme
+       ───────────────────────────────────────────────────────────────────────── */
+      
       :host(.dark-mode),
       :host([dark-mode]),
       :host([darkmode]),
@@ -2663,139 +3778,133 @@ class EnhancedSelect extends HTMLElement {
       :host-context([darkmode]),
       :host-context([data-theme="dark"]),
       :host-context([theme="dark"]) {
-        /* map dark tokens to base option tokens so nested <select-option>
-           components also pick up dark mode via inherited CSS variables */
-        --select-option-bg: var(--select-dark-option-bg, #1f2937);
-        --select-option-color: var(--select-dark-option-color, #f9fafb);
-        --select-option-hover-bg: var(--select-dark-option-hover-bg, #374151);
-        --select-option-hover-color: var(--select-dark-option-hover-color, #f9fafb);
-        --select-option-selected-bg: var(--select-dark-option-selected-bg, #3730a3);
-        --select-option-selected-color: var(--select-dark-option-selected-text, #e0e7ff);
-
-        .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: var(--select-dark-option-hover-bg, #374151);
-          color: var(--select-dark-option-hover-color, #f9fafb);
-        }
-        
-        .option.selected {
-          background: var(--select-dark-option-selected-bg, #3730a3);
-          color: var(--select-dark-option-selected-text, #e0e7ff);
-          border: var(--select-dark-option-selected-border, var(--select-option-selected-border, var(--select-option-border, none)));
-          border-bottom: var(--select-dark-option-selected-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
-          box-shadow: var(--select-dark-option-selected-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
-          transform: var(--select-dark-option-selected-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
-        }
+        --select-primary: #e5e5e5;
+        --select-primary-light: #2a2a3e;
+        --select-accent: #6366f1;
+        --select-accent-hover: #f43f5e;
+        --select-surface: var(--select-dark-bg, #1a1a2e);
+        --select-surface-elevated: #252540;
+        --select-border: var(--select-dark-border, #3f3f5a);
+        --select-border-focus: #6366f1;
+        --select-text: var(--select-dark-text, #f5f5f5);
+        --select-text-muted: #9ca3af;
+        --select-text-placeholder: #6b7280;
+        --select-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+        --select-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+        --select-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+        --select-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25);
 
-        .option.selected:hover {
-          background: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
-          color: var(--select-dark-option-selected-hover-color, var(--select-dark-option-selected-text, #e0e7ff));
-          border: var(--select-dark-option-selected-hover-border, var(--select-dark-option-selected-border, var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)))));
-          border-bottom: var(--select-dark-option-selected-hover-border-bottom, var(--select-dark-option-selected-border-bottom, var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)))));
-          box-shadow: var(--select-dark-option-selected-hover-shadow, var(--select-dark-option-selected-shadow, var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)))));
-          transform: var(--select-dark-option-selected-hover-transform, var(--select-dark-option-selected-transform, var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)))));
-        }
+        --select-dropdown-bg: var(--select-dark-dropdown-bg, var(--select-surface));
         
-        .option.active:not(.selected) {
-          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));
-        }
-
-        /* Group header in dark mode */
-        .group-header {
-          color: var(--select-dark-group-header-color, var(--select-group-header-color, #6b7280));
-          background-color: var(--select-dark-group-header-bg, var(--select-group-header-bg, #374151));
-        }
+        --select-option-bg: var(--select-dark-option-bg, transparent);
+        --select-option-color: var(--select-dark-option-color, var(--select-text));
+        --select-option-hover-bg: var(--select-dark-option-hover-bg, var(--select-surface-elevated));
+        --select-option-hover-color: var(--select-dark-option-hover-color, var(--select-text));
+        --select-option-selected-bg: var(--select-dark-option-selected-bg, linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%));
+        --select-option-selected-color: var(--select-dark-option-selected-color, #a5b4fc);
+        --select-option-selected-hover-bg: var(--select-dark-option-selected-hover-bg, var(--select-option-selected-bg));
+        --select-option-selected-hover-color: var(--select-dark-option-selected-hover-color, var(--select-option-selected-color));
+      }
 
-        .option.selected.active {
-          background-color: var(--select-dark-option-selected-active-bg, var(--select-dark-option-selected-bg, #3730a3));
-          color: var(--select-dark-option-selected-active-color, var(--select-dark-option-selected-text, #e0e7ff));
-          border: var(--select-dark-option-selected-active-border, var(--select-dark-option-selected-border, var(--select-option-selected-active-border, var(--select-option-selected-border, var(--select-option-border, none)))));
-          border-bottom: var(--select-dark-option-selected-active-border-bottom, var(--select-dark-option-selected-border-bottom, var(--select-option-selected-active-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)))));
-          box-shadow: var(--select-dark-option-selected-active-shadow, var(--select-dark-option-selected-shadow, var(--select-option-selected-active-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)))));
-          transform: var(--select-dark-option-selected-active-transform, var(--select-dark-option-selected-transform, var(--select-option-selected-active-transform, var(--select-option-selected-transform, var(--select-option-transform, none)))));
-          outline: var(--select-dark-option-selected-active-outline, var(--select-dark-option-active-outline, var(--select-option-selected-active-outline, var(--select-option-active-outline, 2px solid rgba(129, 140, 248, 0.55)))));
-          outline-offset: -2px;
-        }
+      :host(.dark-mode) .input-container,
+      :host([dark-mode]) .input-container,
+      :host([darkmode]) .input-container,
+      :host([data-theme="dark"]) .input-container,
+      :host([theme="dark"]) .input-container,
+      :host-context(.dark-mode) .input-container,
+      :host-context(.dark) .input-container,
+      :host-context([dark-mode]) .input-container,
+      :host-context([darkmode]) .input-container,
+      :host-context([data-theme="dark"]) .input-container,
+      :host-context([theme="dark"]) .input-container {
+        background: var(--select-surface);
+        border-color: var(--select-border);
+      }
 
-        .selection-badge {
-          background: var(--select-dark-badge-bg, #4f46e5);
-          color: var(--select-dark-badge-color, #eef2ff);
-        }
+      :host(.dark-mode) .input-container::after,
+      :host([dark-mode]) .input-container::after,
+      :host([darkmode]) .input-container::after,
+      :host([data-theme="dark"]) .input-container::after,
+      :host([theme="dark"]) .input-container::after,
+      :host-context(.dark-mode) .input-container::after,
+      :host-context(.dark) .input-container::after,
+      :host-context([dark-mode]) .input-container::after,
+      :host-context([darkmode]) .input-container::after,
+      :host-context([data-theme="dark"]) .input-container::after,
+      :host-context([theme="dark"]) .input-container::after {
+        background: var(--select-separator-dark-bg);
+      }
 
-        .badge-remove {
-          background: var(--select-dark-badge-remove-bg, rgba(255, 255, 255, 0.15));
-          color: var(--select-dark-badge-remove-color, #e5e7eb);
-        }
+      :host(.dark-mode) .select-dropdown,
+      :host([dark-mode]) .select-dropdown,
+      :host([darkmode]) .select-dropdown,
+      :host([data-theme="dark"]) .select-dropdown,
+      :host([theme="dark"]) .select-dropdown,
+      :host-context(.dark-mode) .select-dropdown,
+      :host-context(.dark) .select-dropdown,
+      :host-context([dark-mode]) .select-dropdown,
+      :host-context([darkmode]) .select-dropdown,
+      :host-context([data-theme="dark"]) .select-dropdown,
+      :host-context([theme="dark"]) .select-dropdown {
+        background: var(--select-dropdown-bg, var(--select-surface));
+        border-color: var(--select-border);
+      }
 
-        .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);
-        }
+      :host(.dark-mode) .options-container,
+      :host([dark-mode]) .options-container,
+      :host([darkmode]) .options-container,
+      :host([data-theme="dark"]) .options-container,
+      :host([theme="dark"]) .options-container,
+      :host-context(.dark-mode) .options-container,
+      :host-context(.dark) .options-container,
+      :host-context([dark-mode]) .options-container,
+      :host-context([darkmode]) .options-container,
+      :host-context([data-theme="dark"]) .options-container,
+      :host-context([theme="dark"]) .options-container {
+        background: var(--select-dropdown-bg, var(--select-surface));
+        scrollbar-color: var(--select-border) transparent;
+      }
 
-        .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%
-          );
-        }
+      :host(.dark-mode) .selection-badge,
+      :host([dark-mode]) .selection-badge,
+      :host([darkmode]) .selection-badge,
+      :host([data-theme="dark"]) .selection-badge,
+      :host([theme="dark"]) .selection-badge,
+      :host-context(.dark-mode) .selection-badge,
+      :host-context(.dark) .selection-badge,
+      :host-context([dark-mode]) .selection-badge,
+      :host-context([darkmode]) .selection-badge,
+      :host-context([data-theme="dark"]) .selection-badge,
+      :host-context([theme="dark"]) .selection-badge {
+        background: var(--select-badge-dark-bg);
       }
-      
-      /* Accessibility: High contrast mode */
-      @media (prefers-contrast: high) {
-        .select-input:focus {
-          outline-width: 3px;
-          outline-color: Highlight;
-        }
-        
-        .select-input {
-          border-width: 2px;
-        }
+
+      :host(.dark-mode) .group-header:not(:first-child),
+      :host([dark-mode]) .group-header:not(:first-child),
+      :host([darkmode]) .group-header:not(:first-child),
+      :host([data-theme="dark"]) .group-header:not(:first-child),
+      :host([theme="dark"]) .group-header:not(:first-child),
+      :host-context(.dark-mode) .group-header:not(:first-child),
+      :host-context(.dark) .group-header:not(:first-child),
+      :host-context([dark-mode]) .group-header:not(:first-child),
+      :host-context([darkmode]) .group-header:not(:first-child),
+      :host-context([data-theme="dark"]) .group-header:not(:first-child),
+      :host-context([theme="dark"]) .group-header:not(:first-child) {
+        border-top-color: var(--select-border);
       }
-      
-      /* Touch targets (WCAG 2.5.5) */
-      .load-more-button,
-      select-option {
-        min-height: 44px;
+
+      :host(.dark-mode) .option.selected::before,
+      :host([dark-mode]) .option.selected::before,
+      :host([darkmode]) .option.selected::before,
+      :host([data-theme="dark"]) .option.selected::before,
+      :host([theme="dark"]) .option.selected::before,
+      :host-context(.dark-mode) .option.selected::before,
+      :host-context(.dark) .option.selected::before,
+      :host-context([dark-mode]) .option.selected::before,
+      :host-context([darkmode]) .option.selected::before,
+      :host-context([data-theme="dark"]) .option.selected::before,
+      :host-context([theme="dark"]) .option.selected::before {
+        background: var(--select-accent);
       }
     `;
         // Insert as first child to ensure styles are processed first
@@ -2815,10 +3924,10 @@ class EnhancedSelect extends HTMLElement {
                 // delegate to the existing open/close helpers so we don't accidentally
                 // drift out of sync with the logic in those methods (focus, events,
                 // scroll-to-selected, etc.)
-                if (this._state.isOpen) {
+                if (this._state.isOpen && this._config.selection.toggleOnTriggerClick !== false) {
                     this._handleClose();
                 }
-                else {
+                else if (!this._state.isOpen) {
                     this._handleOpen();
                 }
             };
@@ -2841,7 +3950,7 @@ class EnhancedSelect extends HTMLElement {
         this._inputContainer.addEventListener('pointerdown', (e) => {
             // Prevent propagation to document click listener but do NOT preventDefault.
             // Allow default so browser events (click) on newly opened options still fire.
-            e.stopPropagation();
+            // e.stopPropagation(); // BUG: By stopping propagation here, the document click listener doesn't see it, which is fine for not closing it. But be very careful.
             const target = e.target;
             if (!this._config.enabled)
                 return;
@@ -2849,21 +3958,38 @@ class EnhancedSelect extends HTMLElement {
                 return;
             if (target && target.closest('.clear-control-button'))
                 return;
+            if (this._isPointerOnInputScrollbar(e)) {
+                this._suppressNextOpenClick = true;
+                return;
+            }
+            const isHorizontalMultiMode = this._config.selection.mode === 'multi'
+                && (this._config.multiSelectDisplay?.mode ?? 'wrap') === 'horizontal';
+            const enableHorizontalDrag = this._canUseHorizontalMultiScroll(target);
+            if (enableHorizontalDrag && e.button === 0) {
+                this._beginMultiScrollDrag(e);
+                this._suppressNextOpenClick = false;
+                e.preventDefault();
+                return;
+            }
+            // If we clicked the container, but not the input itself, we must prevent default
+            // otherwise the browser moves focus from our input to the body, immediately triggering blur.
+            if (target && !target.matches('.select-input')) {
+                e.preventDefault();
+            }
+            const clickedInput = Boolean(target && target.matches('.select-input'));
+            if (this._state.isOpen &&
+                this._config.selection.toggleOnTriggerClick !== false &&
+                !isHorizontalMultiMode &&
+                !enableHorizontalDrag &&
+                !(clickedInput && this._config.searchable)) {
+                this._handleClose();
+                return;
+            }
             const wasClosed = !this._state.isOpen;
             if (wasClosed) {
                 this._handleOpen();
             }
-            else {
-                // Keep open while interacting directly with the input so users can
-                // place cursor/type without accidental collapse.
-                if (target === this._input) {
-                    this._input.focus();
-                    return;
-                }
-                // clicking other parts of the input container while open toggles close
-                this._handleClose();
-            }
-            // Focus the input (do not prevent default behavior)
+            // Focus the input (do not prevent default behavior for input itself)
             this._input.focus();
             // If we just opened the dropdown, transfer pointer capture to the
             // options container so the subsequent pointerup lands there instead of
@@ -2877,6 +4003,47 @@ class EnhancedSelect extends HTMLElement {
                 }
             }
         });
+        this._inputContainer.addEventListener('click', (e) => {
+            const target = e.target;
+            const isHorizontalMultiMode = this._config.selection.mode === 'multi'
+                && (this._config.multiSelectDisplay?.mode ?? 'wrap') === 'horizontal';
+            if (!this._config.enabled || !isHorizontalMultiMode) {
+                this._suppressNextOpenClick = false;
+                this._multiScrollDrag.moved = false;
+                return;
+            }
+            if (target && target.closest('.dropdown-arrow-container, .clear-control-button')) {
+                this._suppressNextOpenClick = false;
+                this._multiScrollDrag.moved = false;
+                return;
+            }
+            if (this._suppressNextOpenClick || this._multiScrollDrag.moved || this._isPointerOnInputScrollbar(e)) {
+                this._suppressNextOpenClick = false;
+                this._multiScrollDrag.moved = false;
+                return;
+            }
+            this._suppressNextOpenClick = false;
+            this._multiScrollDrag.moved = false;
+            if (!this._state.isOpen) {
+                this._handleOpen();
+            }
+            this._input.focus();
+        });
+        this._inputContent.addEventListener('pointermove', (e) => {
+            this._updateMultiScrollDrag(e);
+        });
+        this._inputContent.addEventListener('pointerup', (e) => {
+            this._endMultiScrollDrag(e.pointerId);
+        });
+        this._inputContent.addEventListener('pointercancel', (e) => {
+            this._endMultiScrollDrag(e.pointerId);
+        });
+        this._inputContent.addEventListener('wheel', (e) => {
+            if (this._config.selection.mode === 'multi'
+                && (this._config.multiSelectDisplay?.mode ?? 'wrap') === 'horizontal') {
+                e.preventDefault();
+            }
+        }, { passive: false });
         // Input container click - prevent event from reaching document listener
         this._container.addEventListener('click', (e) => {
             e.stopPropagation();
@@ -2905,7 +4072,7 @@ class EnhancedSelect extends HTMLElement {
                     return;
                 }
                 this._handleClose();
-            }, 0);
+            }, 150);
         });
         // Input search
         this._input.addEventListener('input', (e) => {
@@ -2922,7 +4089,7 @@ class EnhancedSelect extends HTMLElement {
             this._suppressBlurClose = true;
             setTimeout(() => {
                 this._suppressBlurClose = false;
-            }, 0);
+            }, 150); // Increased timeout to ensure click finishes before blur checks
         });
         // Delegated click listener for improved event handling (robust across shadow DOM)
         const handleOptionEvent = (e) => {
@@ -2953,9 +4120,6 @@ class EnhancedSelect extends HTMLElement {
             }
         };
         this._optionsContainer.addEventListener('click', handleOptionEvent);
-        // also watch pointerup to catch cases where the pointerdown started outside
-        // (e.g. on the input) and the click never fires
-        this._optionsContainer.addEventListener('pointerup', handleOptionEvent);
         // Keyboard navigation
         this._input.addEventListener('keydown', (e) => this._handleKeydown(e));
         // Click outside to close — robust detection across shadow DOM and custom renderers
@@ -3050,22 +4214,14 @@ class EnhancedSelect extends HTMLElement {
         this._input.focus();
         this._markOpenStart();
         this._state.isOpen = true;
+        this.setAttribute('data-open', 'true');
+        this._liftStackingAncestors();
         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._syncDropdownPlacement();
         this._setInitialActiveOption();
         this._emit('open', {});
         this._config.callbacks.onOpen?.();
@@ -3085,7 +4241,10 @@ class EnhancedSelect extends HTMLElement {
         if (!this._state.isOpen)
             return;
         this._state.isOpen = false;
+        this.removeAttribute('data-open');
+        this._restoreLiftedAncestors();
         this._dropdown.style.display = 'none';
+        this._dropdown.setAttribute('data-placement', this._resolvedDropdownPlacement);
         this._input.setAttribute('aria-expanded', 'false');
         this._input.removeAttribute('aria-activedescendant');
         this._updateArrowRotation();
@@ -3095,14 +4254,76 @@ class EnhancedSelect extends HTMLElement {
     }
     _updateDropdownVisibility() {
         if (this._state.isOpen) {
+            this.setAttribute('data-open', 'true');
+            this._liftStackingAncestors();
             this._dropdown.style.display = 'block';
+            this._syncDropdownPlacement();
             this._input.setAttribute('aria-expanded', 'true');
         }
         else {
+            this.removeAttribute('data-open');
+            this._restoreLiftedAncestors();
             this._dropdown.style.display = 'none';
             this._input.setAttribute('aria-expanded', 'false');
         }
     }
+    _liftStackingAncestors() {
+        this._restoreLiftedAncestors();
+        let ancestor = this.parentElement;
+        while (ancestor && ancestor !== document.body) {
+            if (this._createsStackingContext(ancestor)) {
+                const hadMarker = ancestor.hasAttribute('data-smilodon-open-ancestor');
+                this._liftedAncestors.push({
+                    element: ancestor,
+                    position: ancestor.style.position,
+                    zIndex: ancestor.style.zIndex,
+                    hadMarker,
+                });
+                if (getComputedStyle(ancestor).position === 'static') {
+                    ancestor.style.position = 'relative';
+                }
+                ancestor.style.zIndex = 'var(--select-ancestor-open-z-index, var(--select-host-open-z-index, var(--select-dropdown-z-index, 1000)))';
+                ancestor.setAttribute('data-smilodon-open-ancestor', 'true');
+            }
+            ancestor = ancestor.parentElement;
+        }
+    }
+    _restoreLiftedAncestors() {
+        for (const lifted of this._liftedAncestors) {
+            lifted.element.style.position = lifted.position;
+            lifted.element.style.zIndex = lifted.zIndex;
+            if (!lifted.hadMarker) {
+                lifted.element.removeAttribute('data-smilodon-open-ancestor');
+            }
+        }
+        this._liftedAncestors = [];
+    }
+    _createsStackingContext(element) {
+        const style = getComputedStyle(element);
+        if (style.position === 'fixed' || style.position === 'sticky')
+            return true;
+        if (style.zIndex !== 'auto' && style.position !== 'static')
+            return true;
+        if (style.opacity !== '1')
+            return true;
+        if (style.transform !== 'none')
+            return true;
+        if (style.filter !== 'none')
+            return true;
+        if (style.backdropFilter && style.backdropFilter !== 'none')
+            return true;
+        if (style.perspective !== 'none')
+            return true;
+        if (style.mixBlendMode !== 'normal')
+            return true;
+        if (style.isolation === 'isolate')
+            return true;
+        if (style.contain.includes('paint') || style.contain.includes('layout'))
+            return true;
+        if (style.willChange.includes('transform') || style.willChange.includes('opacity') || style.willChange.includes('filter'))
+            return true;
+        return false;
+    }
     _updateArrowRotation() {
         if (this._arrowContainer) {
             const arrow = this._arrowContainer.querySelector('.dropdown-arrow');
@@ -3309,24 +4530,24 @@ class EnhancedSelect extends HTMLElement {
         }
     }
     _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);
-            }
-            else {
-                // Lightweight option - remove active class
-                prevOption.classList.remove('smilodon-option--active');
-                prevOption.setAttribute('aria-selected', 'false');
+        if (this._state.activeIndex >= 0) {
+            const prevOption = this._getOptionElementByIndex(this._state.activeIndex);
+            if (prevOption) {
+                // Check if it's a custom SelectOption or a lightweight DOM element
+                if ('setActive' in prevOption && typeof prevOption.setActive === 'function') {
+                    prevOption.setActive(false);
+                }
+                else {
+                    // Lightweight option - remove active class
+                    prevOption.classList.remove('smilodon-option--active');
+                }
             }
         }
         this._state.activeIndex = index;
         // Set new active state
-        if (options[index]) {
-            const option = options[index];
+        const option = this._getOptionElementByIndex(index);
+        if (option) {
             // Check if it's a custom SelectOption or a lightweight DOM element
             if ('setActive' in option && typeof option.setActive === 'function') {
                 option.setActive(true);
@@ -3334,13 +4555,13 @@ class EnhancedSelect extends HTMLElement {
             else {
                 // Lightweight option - add active class
                 option.classList.add('smilodon-option--active');
-                option.setAttribute('aria-selected', 'true');
             }
             if (typeof option.scrollIntoView === 'function') {
+                // Don't scroll wildly when just opening with pre-selections
                 option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
             }
             // Announce position for screen readers
-            const total = options.length;
+            const total = this._state.loadedItems.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}`;
@@ -3463,9 +4684,9 @@ class EnhancedSelect extends HTMLElement {
         // 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];
-        // Debug: log selection attempt
-        if (!item)
+        if (!item) {
             return;
+        }
         const isCurrentlySelected = this._state.selectedIndices.has(index);
         // Keep active/focus styling aligned with the most recently interacted option.
         // Without this, a previously selected item may retain active classes/styles
@@ -3476,7 +4697,7 @@ class EnhancedSelect extends HTMLElement {
             const wasSelected = this._state.selectedIndices.has(index);
             this._state.selectedIndices.clear();
             this._state.selectedItems.clear();
-            if (!wasSelected) {
+            if (!wasSelected || !this._config.selection.allowDeselect) {
                 // Select this option
                 this._state.selectedIndices.add(index);
                 this._state.selectedItems.set(index, item);
@@ -3538,16 +4759,34 @@ class EnhancedSelect extends HTMLElement {
         });
     }
     _handleOptionRemove(index) {
+        const item = this._state.selectedItems.get(index);
         const option = this._getOptionElementByIndex(index);
-        if (!option)
-            return;
         this._state.selectedIndices.delete(index);
         this._state.selectedItems.delete(index);
-        option.setSelected(false);
+        if (option && 'setSelected' in option && typeof option.setSelected === 'function') {
+            option.setSelected(false);
+        }
+        else if (option) {
+            option.classList.remove('selected', 'sm-selected', 'smilodon-option--selected');
+            option.setAttribute('aria-selected', 'false');
+            const stateTokens = (option.dataset.smState || '')
+                .split(' ')
+                .map(token => token.trim())
+                .filter(token => token && token !== 'selected');
+            if (stateTokens.length > 0) {
+                option.dataset.smState = stateTokens.join(' ');
+            }
+            else {
+                delete option.dataset.smState;
+            }
+        }
         this._updateInputDisplay();
+        this._renderOptions();
         this._emitChange();
-        const config = option.getConfig();
-        this._emit('remove', { item: config.item, index });
+        const config = option && 'getConfig' in option && typeof option.getConfig === 'function'
+            ? option.getConfig()
+            : undefined;
+        this._emit('remove', { item: config?.item ?? item, index });
     }
     _updateInputDisplay() {
         const selectedItems = Array.from(this._state.selectedItems.values());
@@ -3556,7 +4795,7 @@ class EnhancedSelect extends HTMLElement {
             this._input.value = '';
             this._input.placeholder = this._config.placeholder || 'Select an option...';
             // Clear any badges
-            const existingBadges = this._inputContainer.querySelectorAll('.selection-badge');
+            const existingBadges = this._inputContent.querySelectorAll('.selection-badge');
             existingBadges.forEach(badge => badge.remove());
         }
         else if (this._config.selection.mode === 'single') {
@@ -3567,31 +4806,55 @@ class EnhancedSelect extends HTMLElement {
             this._input.value = '';
             this._input.placeholder = '';
             // Clear existing badges
-            const existingBadges = this._inputContainer.querySelectorAll('.selection-badge');
+            const existingBadges = this._inputContent.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';
+                if (this._config.styles.classNames?.badge) {
+                    badge.classList.add(...this._config.styles.classNames.badge.split(' ').filter(Boolean));
+                }
                 badge.setAttribute('part', 'chip');
-                badge.textContent = getLabel(item);
+                const badgeLabel = document.createElement('span');
+                badgeLabel.className = 'selection-badge-label';
+                if (this._config.styles.classNames?.badgeLabel) {
+                    badgeLabel.classList.add(...this._config.styles.classNames.badgeLabel.split(' ').filter(Boolean));
+                }
+                badgeLabel.setAttribute('part', 'chip-label');
+                badgeLabel.textContent = getLabel(item);
+                badge.appendChild(badgeLabel);
                 // Add remove button to badge
-                const removeBtn = document.createElement('button');
-                removeBtn.className = 'badge-remove';
-                removeBtn.setAttribute('part', 'chip-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._config.selection.showRemoveButton !== false) {
+                    const removeBtn = document.createElement('button');
+                    removeBtn.type = 'button';
+                    removeBtn.className = 'badge-remove';
+                    if (this._config.styles.classNames?.removeButton) {
+                        removeBtn.classList.add(...this._config.styles.classNames.removeButton.split(' ').filter(Boolean));
+                    }
+                    if (this._config.styles.classNames?.badgeRemove) {
+                        removeBtn.classList.add(...this._config.styles.classNames.badgeRemove.split(' ').filter(Boolean));
+                    }
+                    removeBtn.setAttribute('part', 'chip-remove');
+                    removeBtn.setAttribute('aria-label', `Remove ${getLabel(item)}`);
+                    const removeIcon = document.createElement('span');
+                    removeIcon.className = 'badge-remove-icon';
+                    removeIcon.setAttribute('part', 'chip-remove-icon');
+                    this._setIconContent(removeIcon, this._config.selection.removeButtonIcon, '×');
+                    removeBtn.appendChild(removeIcon);
+                    removeBtn.addEventListener('pointerdown', (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    });
+                    removeBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        this._handleOptionRemove(index);
+                    });
+                    badge.appendChild(removeBtn);
+                }
+                this._inputContent.insertBefore(badge, this._input);
             });
         }
         this._syncClearControlState();
@@ -3642,10 +4905,12 @@ class EnhancedSelect extends HTMLElement {
         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',
-            });
+            if (typeof option.scrollIntoView === 'function') {
+                option.scrollIntoView({
+                    block: this._config.scrollToSelected.block || 'center',
+                    behavior: 'smooth',
+                });
+            }
             // Also set it as active for keyboard navigation
             this._setActive(targetIndex);
         }
@@ -3857,7 +5122,6 @@ class EnhancedSelect extends HTMLElement {
         const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
         const selectedValues = selectedItems.map(getValue);
         const selectedIndices = Array.from(this._state.selectedIndices);
-        // Debug: log change payload
         this._emit('change', { selectedItems, selectedValues, selectedIndices });
         this._config.callbacks.onChange?.(selectedItems, selectedValues);
     }
@@ -4061,8 +5325,9 @@ class EnhancedSelect extends HTMLElement {
             this._clearControl.setAttribute('aria-label', this._config.clearControl.ariaLabel || 'Clear selection and search');
         }
         if (this._clearControlIcon) {
-            this._clearControlIcon.textContent = this._config.clearControl.icon || '×';
+            this._clearControlIcon.innerHTML = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
         }
+        this._syncStyleConfigVariables();
         if (this._dropdown) {
             if (this._config.selection.mode === 'multi') {
                 this._dropdown.setAttribute('aria-multiselectable', 'true');
@@ -4071,9 +5336,14 @@ class EnhancedSelect extends HTMLElement {
                 this._dropdown.removeAttribute('aria-multiselectable');
             }
         }
+        this._syncDirectionConfig();
+        this._syncInputContainerMode();
+        this._syncMultiSelectDisplayConfig();
+        this._syncDropdownPlacement();
         // Re-initialize observers in case infinite scroll was enabled/disabled
         this._initializeObservers();
         this._syncClearControlState();
+        this._updateInputDisplay();
         this._renderOptions();
     }
     _mergeConfig(target, source) {
@@ -4176,6 +5446,8 @@ class EnhancedSelect extends HTMLElement {
      * Render options based on current state
      */
     _renderOptions() {
+        this._renderCycleId += 1;
+        const renderCycleId = this._renderCycleId;
         // Cleanup observer
         if (this._loadMoreTrigger && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this._loadMoreTrigger);
@@ -4227,6 +5499,9 @@ class EnhancedSelect extends HTMLElement {
                     header.textContent = group.label;
                 }
                 header.classList.add('group-header');
+                if (this._config.styles.classNames?.groupHeader) {
+                    header.classList.add(...this._config.styles.classNames.groupHeader.split(' ').filter(Boolean));
+                }
                 header.setAttribute('part', 'group-header');
                 this._optionsContainer.appendChild(header);
                 group.options.forEach(item => {
@@ -4240,23 +5515,21 @@ class EnhancedSelect extends HTMLElement {
         }
         else {
             // Normal rendering (flat list or filtered)
-            let hasRenderedItems = false;
+            const filteredIndices = [];
             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) {
+                    catch (_e) {
                         return;
                     }
                 }
-                hasRenderedItems = true;
-                this._renderSingleOption(item, index, getValue, getLabel);
+                filteredIndices.push(index);
             });
-            if (!hasRenderedItems && !this._state.isBusy) {
+            if (filteredIndices.length === 0 && !this._state.isBusy) {
                 const empty = document.createElement('div');
                 empty.setAttribute('part', 'no-results');
                 empty.className = 'empty-state';
@@ -4268,6 +5541,54 @@ class EnhancedSelect extends HTMLElement {
                 }
                 this._optionsContainer.appendChild(empty);
             }
+            else {
+                const shouldIncrementalRender = this._config.virtualize !== false
+                    && this._state.groupedItems.length === 0
+                    && filteredIndices.length > 300;
+                if (shouldIncrementalRender) {
+                    const chunkSize = 80;
+                    let cursor = 0;
+                    let maxRenderTarget = 0;
+                    if (this._state.selectedIndices.size > 0 && this._config.scrollToSelected.enabled) {
+                        const indices = Array.from(this._state.selectedIndices).sort((a, b) => a - b);
+                        const targetIndex = this._config.scrollToSelected.multiSelectTarget === 'first' ? indices[0] : indices[indices.length - 1];
+                        const filteredPos = filteredIndices.indexOf(targetIndex);
+                        if (filteredPos !== -1) {
+                            maxRenderTarget = filteredPos + 20; // Ensure we render up to the selection
+                        }
+                    }
+                    const renderChunk = () => {
+                        if (renderCycleId !== this._renderCycleId)
+                            return;
+                        const fragment = document.createDocumentFragment();
+                        const chunkEnd = Math.min(Math.max(cursor + chunkSize, maxRenderTarget), filteredIndices.length);
+                        maxRenderTarget = 0; // Reset after fast-forwarding
+                        for (; cursor < chunkEnd; cursor += 1) {
+                            const itemIndex = filteredIndices[cursor];
+                            const item = this._state.loadedItems[itemIndex];
+                            this._renderSingleOption(item, itemIndex, getValue, getLabel, fragment);
+                        }
+                        this._optionsContainer.appendChild(fragment);
+                        if (cursor < filteredIndices.length) {
+                            requestAnimationFrame(renderChunk);
+                        }
+                        else {
+                            if (renderCycleId !== this._renderCycleId)
+                                return;
+                            if (!this._state.isBusy && (this._config.loadMore.enabled || this._config.infiniteScroll.enabled) && this._state.loadedItems.length > 0) {
+                                this._addLoadMoreTrigger();
+                            }
+                            this._finalizePerfMarks();
+                        }
+                    };
+                    renderChunk();
+                    return;
+                }
+                filteredIndices.forEach((itemIndex) => {
+                    const item = this._state.loadedItems[itemIndex];
+                    this._renderSingleOption(item, itemIndex, getValue, getLabel);
+                });
+            }
         }
         // Append Busy Indicator if busy
         if (this._state.isBusy && this._config.busyBucket.enabled) {
@@ -4292,7 +5613,7 @@ class EnhancedSelect extends HTMLElement {
         }
         this._finalizePerfMarks();
     }
-    _renderSingleOption(item, index, getValue, getLabel) {
+    _renderSingleOption(item, index, getValue, getLabel, targetContainer = this._optionsContainer) {
         const isSelected = this._state.selectedIndices.has(index);
         const isDisabled = Boolean(item?.disabled);
         const optionId = `${this._uniqueId}-option-${index}`;
@@ -4308,7 +5629,8 @@ class EnhancedSelect extends HTMLElement {
                 disabled: isDisabled,
                 id: optionId,
             });
-            this._optionsContainer.appendChild(optionElement);
+            optionElement.setAttribute('dir', this._config.direction ?? 'ltr');
+            targetContainer.appendChild(optionElement);
             return;
         }
         const option = new SelectOption({
@@ -4321,8 +5643,23 @@ class EnhancedSelect extends HTMLElement {
             getValue,
             getLabel,
             showRemoveButton: this._config.selection.mode === 'multi' && this._config.selection.showRemoveButton,
+            removeButtonIcon: this._config.selection.removeButtonIcon,
             classMap: this.classMap,
+            className: this._config.styles.classNames?.option,
         });
+        if (this._config.styles.classNames?.option) {
+            option.classList.add(...this._config.styles.classNames.option.split(' ').filter(Boolean));
+        }
+        option.setAttribute('dir', this._config.direction ?? 'ltr');
+        if (isSelected && this._config.styles.classNames?.selectedOption) {
+            option.classList.add(...this._config.styles.classNames.selectedOption.split(' ').filter(Boolean));
+        }
+        if (this._state.activeIndex === index && this._config.styles.classNames?.activeOption) {
+            option.classList.add(...this._config.styles.classNames.activeOption.split(' ').filter(Boolean));
+        }
+        if (isDisabled && this._config.styles.classNames?.disabledOption) {
+            option.classList.add(...this._config.styles.classNames.disabledOption.split(' ').filter(Boolean));
+        }
         // Valid part attribute on the web component host itself
         option.setAttribute('part', 'option');
         option.dataset.index = String(index);
@@ -4337,20 +5674,16 @@ class EnhancedSelect extends HTMLElement {
             option.dataset.smValue = String(val);
         }
         option.id = option.id || optionId;
-        option.addEventListener('click', (e) => {
-            e.stopPropagation(); // Prevent duplicate handling by delegation
-            const mouseEvent = e;
-            this._selectOption(index, {
-                shiftKey: mouseEvent.shiftKey,
-                toggleKey: mouseEvent.ctrlKey || mouseEvent.metaKey,
-            });
-        });
+        // Do NOT bind a native click listener here for SelectOption elements.
+        // Like custom rendered options, they are fully handled by the `handleOptionEvent` delegator 
+        // on `this._optionsContainer` (line 1221).
+        // Adding this listener causes the double-click toggle bug since both fire on selection!
         option.addEventListener('optionRemove', (event) => {
             const detail = event.detail;
             const targetIndex = detail?.index ?? index;
             this._handleOptionRemove(targetIndex);
         });
-        this._optionsContainer.appendChild(option);
+        targetContainer.appendChild(option);
     }
     _normalizeCustomOptionElement(element, meta) {
         const optionEl = element instanceof HTMLElement ? element : document.createElement('div');
@@ -4360,6 +5693,9 @@ class EnhancedSelect extends HTMLElement {
         }
         // Add both semantic namespaced classes and the legacy internal classes that CSS uses
         optionEl.classList.add('smilodon-option', 'option');
+        if (this._config.styles.classNames?.option) {
+            optionEl.classList.add(...this._config.styles.classNames.option.split(' ').filter(Boolean));
+        }
         // Toggle state classes using classMap if available
         const isSelected = meta.selected;
         const isActive = meta.active;
@@ -4371,26 +5707,44 @@ class EnhancedSelect extends HTMLElement {
         if (isSelected) {
             optionEl.classList.add(...selectedClasses);
             optionEl.classList.add('smilodon-option--selected');
+            if (this._config.styles.classNames?.selectedOption) {
+                optionEl.classList.add(...this._config.styles.classNames.selectedOption.split(' ').filter(Boolean));
+            }
         }
         else {
             optionEl.classList.remove(...selectedClasses);
             optionEl.classList.remove('smilodon-option--selected');
+            if (this._config.styles.classNames?.selectedOption) {
+                optionEl.classList.remove(...this._config.styles.classNames.selectedOption.split(' ').filter(Boolean));
+            }
         }
         if (isActive) {
             optionEl.classList.add(...activeClasses);
             optionEl.classList.add('smilodon-option--active');
+            if (this._config.styles.classNames?.activeOption) {
+                optionEl.classList.add(...this._config.styles.classNames.activeOption.split(' ').filter(Boolean));
+            }
         }
         else {
             optionEl.classList.remove(...activeClasses);
             optionEl.classList.remove('smilodon-option--active');
+            if (this._config.styles.classNames?.activeOption) {
+                optionEl.classList.remove(...this._config.styles.classNames.activeOption.split(' ').filter(Boolean));
+            }
         }
         if (isDisabled) {
             optionEl.classList.add(...disabledClasses);
             optionEl.classList.add('smilodon-option--disabled');
+            if (this._config.styles.classNames?.disabledOption) {
+                optionEl.classList.add(...this._config.styles.classNames.disabledOption.split(' ').filter(Boolean));
+            }
         }
         else {
             optionEl.classList.remove(...disabledClasses);
             optionEl.classList.remove('smilodon-option--disabled');
+            if (this._config.styles.classNames?.disabledOption) {
+                optionEl.classList.remove(...this._config.styles.classNames.disabledOption.split(' ').filter(Boolean));
+            }
         }
         // Data Attributes Contract
         const state = [];
@@ -4437,35 +5791,9 @@ class EnhancedSelect extends HTMLElement {
             optionEl.tabIndex = -1;
         }
         if (!this._customOptionBoundElements.has(optionEl)) {
-            optionEl.addEventListener('click', (e) => {
-                e.stopPropagation();
-                const current = e.currentTarget;
-                if (current.getAttribute('aria-disabled') === 'true')
-                    return;
-                const parsedIndex = Number(current.dataset.index);
-                if (!Number.isFinite(parsedIndex))
-                    return;
-                const mouseEvent = e;
-                this._selectOption(parsedIndex, {
-                    shiftKey: mouseEvent.shiftKey,
-                    toggleKey: mouseEvent.ctrlKey || mouseEvent.metaKey,
-                });
-            });
-            optionEl.addEventListener('keydown', (e) => {
-                if (e.key !== 'Enter' && e.key !== ' ')
-                    return;
-                const current = e.currentTarget;
-                if (current.getAttribute('aria-disabled') === 'true')
-                    return;
-                const parsedIndex = Number(current.dataset.index);
-                if (!Number.isFinite(parsedIndex))
-                    return;
-                e.preventDefault();
-                this._selectOption(parsedIndex, {
-                    shiftKey: e.shiftKey,
-                    toggleKey: e.ctrlKey || e.metaKey,
-                });
-            });
+            // Intentionally NOT binding native option click listeners for custom options! 
+            // All option interactions are globally handled by _optionsContainer.addEventListener('click', handleOptionEvent);
+            // Re-attaching here causes the double-click toggle bug if a child component fails to stopPropagation.
             this._customOptionBoundElements.add(optionEl);
         }
         return optionEl;