@keenthemes/ktui 1.0.12 → 1.0.13

package/dist/ktui.js

@@ -2453,7 +2453,7 @@ var KTComponent = /** @class */ (function () {
         if (config === void 0) { config = {}; }
         if (!this._element)
             return;
-        this._config = __assign(__assign(__assign(__assign(__assign({}, this._defaultConfig), this._getGlobalConfig()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), dom_1.default.getDataAttributesByJson(this._element, this._dataOptionPrefix + this._name + '-config')), config);
+        this._config = __assign(__assign(__assign(__assign({}, this._defaultConfig), this._getGlobalConfig()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), config);
     };
     KTComponent.prototype.dispose = function () {
         if (!this._element)
@@ -5653,6 +5653,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTSelectOption = void 0;
 var component_1 = __webpack_require__(2658);
@@ -5665,39 +5676,61 @@ var KTSelectOption = /** @class */ (function (_super) {
         _this._dataOptionPrefix = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
         // Always initialize a new option instance
         _this._init(element);
-        _this._buildConfig();
         _this._globalConfig = config;
+        _this._buildConfig();
         // Clean the config
         _this._config = _this._config[''] || {};
         // Add the option config to the global config
-        _this._globalConfig.optionsConfig = _this._globalConfig.optionsConfig || {};
-        _this._globalConfig.optionsConfig[element.value] = _this._config;
+        // Ensure optionsConfig is initialized
+        if (_this._globalConfig) {
+            _this._globalConfig.optionsConfig = _this._globalConfig.optionsConfig || {};
+            _this._globalConfig.optionsConfig[element.value] = _this._config;
+        }
+        else {
+            // Handle case where _globalConfig might be undefined, though constructor expects it.
+            // This might indicate a need to ensure config is always passed or has a default.
+            console.warn('KTSelectOption: _globalConfig is undefined during constructor.');
+        }
         // Don't store in KTData to avoid Singleton pattern issues
         // Each option should be a unique instance
         element.instance = _this;
         return _this;
     }
+    Object.defineProperty(KTSelectOption.prototype, "id", {
+        get: function () {
+            return this.getHTMLOptionElement().value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(KTSelectOption.prototype, "title", {
+        get: function () {
+            return this.getHTMLOptionElement().textContent || '';
+        },
+        enumerable: false,
+        configurable: true
+    });
     KTSelectOption.prototype.getHTMLOptionElement = function () {
         return this._element;
     };
+    /**
+     * Gathers all necessary data for rendering this option,
+     * including standard HTML attributes and custom data-kt-* attributes.
+     */
+    KTSelectOption.prototype.getOptionDataForTemplate = function () {
+        var el = this.getHTMLOptionElement();
+        var text = el.textContent || '';
+        return __assign(__assign({}, this._config), { 
+            // Standard HTMLOptionElement properties
+            value: el.value, text: text, selected: el.selected, disabled: el.disabled, 
+            // Provide 'content' for convenience in templates, defaulting to text.
+            // User's optionTemplate can then use {{content}} or specific fields like {{text}}, {{icon}}, etc.
+            content: text });
+    };
     KTSelectOption.prototype.render = function () {
-        var _this = this;
-        var optionElement = this.getHTMLOptionElement();
-        // Get the original template
-        var originalTemplate = this._globalConfig.optionTemplate;
-        if (this._globalConfig.optionTemplate) {
-            // Replace all {{varname}} in option.innerHTML with values from _config
-            Object.entries(this._config || {}).forEach(function (_a) {
-                var key = _a[0], value = _a[1];
-                if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-                    _this._globalConfig.optionTemplate = _this._globalConfig.optionTemplate.replace(new RegExp("{{".concat(key, "}}"), 'g'), String(value));
-                }
-            });
-        }
-        var template = templates_1.defaultTemplates.option(optionElement, this._globalConfig);
-        // Restore the original template
-        this._globalConfig.optionTemplate = originalTemplate;
-        return template;
+        // 'this' is the KTSelectOption instance.
+        // defaultTemplates.option will handle using this instance's data along with _globalConfig.
+        return templates_1.defaultTemplates.option(this, this._globalConfig);
     };
     return KTSelectOption;
 }(component_1.default));
@@ -6515,52 +6548,35 @@ Object.defineProperty(exports, "KTScrollspy", ({ enumerable: true, get: function
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.KTSelectCombobox = void 0;
 var utils_1 = __webpack_require__(9011);
+var templates_1 = __webpack_require__(9069);
 /**
  * KTSelectCombobox - Handles combobox-specific functionality for KTSelect
  */
 var KTSelectCombobox = /** @class */ (function () {
     function KTSelectCombobox(select) {
         var _this = this;
-        var _a;
         this._select = select;
         this._config = select.getConfig();
-        // Get the display element (could be the input directly or a parent div)
-        var displayElement = select.getValueDisplayElement();
-        // Find the input element - either it's the display element itself or a child
-        this._searchInputElement =
-            displayElement.tagName === 'INPUT'
-                ? displayElement
-                : displayElement.querySelector('input[data-kt-select-search]');
-        // Find the clear button robustly
-        var clearButtonContainer = null;
-        if (displayElement.tagName === 'DIV') {
-            clearButtonContainer = displayElement;
-        }
-        else if (displayElement.tagName === 'INPUT') {
-            clearButtonContainer = displayElement.parentElement;
-        }
-        this._clearButtonElement = clearButtonContainer
-            ? clearButtonContainer.querySelector('[data-kt-select-clear-button]')
-            : null;
-        this._valuesContainerElement = (_a = displayElement === null || displayElement === void 0 ? void 0 : displayElement.closest('[data-kt-select-combobox]')) === null || _a === void 0 ? void 0 : _a.querySelector('[data-kt-select-combobox-values]');
-        // Create bound handler references to allow proper cleanup
+        var displayElement = select.getDisplayElement(); // KTSelect's main display element for combobox
+        this._searchInputElement = displayElement.querySelector('input[data-kt-select-search]');
+        this._clearButtonElement = displayElement.querySelector('[data-kt-select-clear-button]');
+        this._valuesContainerElement = displayElement.querySelector('[data-kt-select-combobox-values]');
         this._boundInputHandler = this._handleComboboxInput.bind(this);
         this._boundClearHandler = this._handleClearButtonClick.bind(this);
-        // Attach event listeners
         this._attachEventListeners();
-        // Reset combobox search state when dropdown closes
         this._select.getElement().addEventListener('dropdown.close', function () {
-            _this._searchInputElement.value = '';
-            // this._toggleClearButtonVisibility('');
-            _this._select.showAllOptions();
+            // When dropdown closes, if not multi-select and not using displayTemplate,
+            // ensure input shows the selected value or placeholder.
+            if (!_this._config.multiple && !_this._config.displayTemplate) {
+                _this.updateDisplay(_this._select.getSelectedOptions());
+            }
+            else {
+                // For tags or displayTemplate, the input should be clear for typing.
+                _this._searchInputElement.value = '';
+            }
+            _this._toggleClearButtonVisibility(_this._searchInputElement.value);
+            // this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
         });
-        // When selection changes, update the input value to the selected option's text
-        // this._select.getElement().addEventListener('change', () => {
-        // 	// Only update the input value, do not reset the filter or show all options
-        // 	const selectedValues = this._select.getSelectedOptions();
-        // 	const content = this._select.renderDisplayTemplateForSelected(selectedValues);
-        // 	this._valuesContainerElement?.append(stringToElement(content));
-        // });
         if (this._config.debug)
             console.log('KTSelectCombobox initialized');
     }
@@ -6568,16 +6584,13 @@ var KTSelectCombobox = /** @class */ (function () {
      * Attach event listeners specific to combobox
      */
     KTSelectCombobox.prototype._attachEventListeners = function () {
-        // First remove any existing listeners to prevent duplicates
         this._removeEventListeners();
-        // Add input event handler to filter options as user types
-        this._searchInputElement.addEventListener('input', this._boundInputHandler);
-        // Add clear button click event listener
+        if (this._searchInputElement) { // Ensure element exists
+            this._searchInputElement.addEventListener('input', this._boundInputHandler);
+        }
         if (this._clearButtonElement) {
             this._clearButtonElement.addEventListener('click', this._boundClearHandler);
         }
-        if (this._config.debug)
-            console.log('Combobox event listeners attached to:', this._searchInputElement);
     };
     /**
      * Remove event listeners to prevent memory leaks or duplicates
@@ -6595,16 +6608,21 @@ var KTSelectCombobox = /** @class */ (function () {
      */
     KTSelectCombobox.prototype._handleComboboxInput = function (event) {
         var inputElement = event.target;
-        var query = inputElement.value.toLowerCase();
-        if (this._config.debug)
-            console.log('Combobox input event, query:', query);
-        // Toggle clear button visibility based on input value
-        // this._toggleClearButtonVisibility(query);
-        // If dropdown isn't open, open it when user starts typing
-        if (!this._select._dropdownIsOpen) {
+        var query = inputElement.value;
+        this._toggleClearButtonVisibility(query);
+        if (!this._select.isDropdownOpen()) { // Use public getter
             this._select.openDropdown();
         }
-        // Filter options based on input
+        // For single select without displayTemplate, if user types, they are essentially clearing the previous selection text
+        // The actual selection state isn't cleared until they pick a new option or clear explicitly.
+        // For multi-select or with displayTemplate, the input is purely for search.
+        if (this._config.multiple || this._config.displayTemplate) {
+            // Values are in _valuesContainerElement, input is for search
+        }
+        else {
+            // Single select, no displayTemplate: If user types, it implies they might be changing selection.
+            // We don't clear the actual _select state here, just the visual in input.
+        }
         this._filterOptionsForCombobox(query);
     };
     /**
@@ -6613,29 +6631,25 @@ var KTSelectCombobox = /** @class */ (function () {
     KTSelectCombobox.prototype._handleClearButtonClick = function (event) {
         event.preventDefault();
         event.stopPropagation();
-        // Clear the input
         this._searchInputElement.value = '';
-        // Hide the clear button
-        // this._toggleClearButtonVisibility('');
-        // Show all options and open dropdown
-        this._select.showAllOptions();
-        this._select.openDropdown();
-        // Clear the current selection
-        this._select.clearSelection();
-        // Clear the combobox values container if present (for displayTemplate)
+        this._toggleClearButtonVisibility('');
         if (this._valuesContainerElement) {
             this._valuesContainerElement.innerHTML = '';
         }
-        // Focus on the input
+        this._select.clearSelection(); // This will also trigger updateSelectedOptionDisplay
+        this._select.showAllOptions(); // Show all options after clearing
+        this._select.openDropdown();
         this._searchInputElement.focus();
     };
     /**
-     * Toggle clear button visibility based on input value
+     * Toggle clear button visibility based on input value and selection state.
+     * Clear button should be visible if there's text in input OR if there are selected items (for multi/displayTemplate modes).
      */
-    KTSelectCombobox.prototype._toggleClearButtonVisibility = function (value) {
+    KTSelectCombobox.prototype._toggleClearButtonVisibility = function (inputValue) {
         if (!this._clearButtonElement)
             return;
-        if (value.length > 0) {
+        var hasSelectedItems = this._select.getSelectedOptions().length > 0;
+        if (inputValue.length > 0 || (hasSelectedItems && (this._config.multiple || this._config.displayTemplate))) {
             this._clearButtonElement.classList.remove('hidden');
         }
         else {
@@ -6646,11 +6660,65 @@ var KTSelectCombobox = /** @class */ (function () {
      * Filter options for combobox based on input query
      */
     KTSelectCombobox.prototype._filterOptionsForCombobox = function (query) {
-        // Use the same filter logic as KTSelectSearch
         var options = Array.from(this._select.getOptionsElement());
         var config = this._select.getConfig();
         var dropdownElement = this._select.getDropdownElement();
         (0, utils_1.filterOptions)(options, query, config, dropdownElement);
+        // After filtering, focusManager in KTSelectSearch (if search is also enabled there)
+        // or the main FocusManager should adjust focus if needed.
+        // For combobox, this filtering is the primary search mechanism.
+        // We might need to tell select's focus manager to focus first option.
+        this._select._focusManager.focusFirst(); // Consider if this is always right
+    };
+    /**
+     * Updates the combobox display (input field or values container) based on selection.
+     */
+    KTSelectCombobox.prototype.updateDisplay = function (selectedOptions) {
+        var _this = this;
+        if (!this._searchInputElement)
+            return;
+        // Always clear the values container first if it exists
+        if (this._valuesContainerElement) {
+            this._valuesContainerElement.innerHTML = '';
+        }
+        if (this._config.tags && this._valuesContainerElement) { // Combobox + Tags
+            selectedOptions.forEach(function (value) {
+                // Ensure value is properly escaped for querySelector
+                var optionElement = _this._select.getElement().querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
+                if (optionElement) {
+                    var tagElement = templates_1.defaultTemplates.tag(optionElement, _this._config);
+                    _this._valuesContainerElement.appendChild(tagElement);
+                }
+            });
+            this._searchInputElement.value = ''; // Input field is for typing new searches
+            this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
+        }
+        else if (this._config.displayTemplate && this._valuesContainerElement) { // Combobox + DisplayTemplate (no tags)
+            this._valuesContainerElement.innerHTML = this._select.renderDisplayTemplateForSelected(selectedOptions);
+            this._searchInputElement.value = ''; // Input field is for typing new searches
+            this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
+        }
+        else if (this._config.multiple && this._valuesContainerElement) { // Combobox + Multiple (no tags, no display template)
+            // For simplicity, join text. A proper tag implementation would be more complex here.
+            this._valuesContainerElement.innerHTML = selectedOptions.map(function (value) {
+                var optionEl = _this._select.getElement().querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
+                return optionEl ? optionEl.textContent : '';
+            }).join(', '); // Basic comma separation
+            this._searchInputElement.value = '';
+            this._searchInputElement.placeholder = selectedOptions.length > 0 ? '' : (this._config.placeholder || 'Select...');
+        }
+        else if (!this._config.multiple && selectedOptions.length > 0) { // Single select combobox: display selected option's text in the input
+            var selectedValue = selectedOptions[0];
+            var optionElement = this._select.getElement().querySelector("option[value=\"".concat(CSS.escape(selectedValue), "\"]"));
+            this._searchInputElement.value = optionElement ? optionElement.textContent || '' : '';
+            // placeholder is implicitly handled by input value for single select
+        }
+        else { // No selection or not fitting above categories (e.g. single select, no items)
+            this._searchInputElement.value = '';
+            this._searchInputElement.placeholder = this._config.placeholder || 'Select...';
+            // _valuesContainerElement is already cleared if it exists
+        }
+        this._toggleClearButtonVisibility(this._searchInputElement.value);
     };
     /**
      * Destroy the combobox component and clean up event listeners
@@ -7895,7 +7963,7 @@ var KTDataTable = /** @class */ (function (_super) {
         // Set search value
         if (searchElement) {
             searchElement.value =
-                typeof search === 'string' ? search : String(search);
+                search === undefined || search === null ? '' : typeof search === 'string' ? search : String(search);
         }
         if (searchElement) {
             // Check if a debounced search function already exists
@@ -9217,7 +9285,7 @@ var utils_1 = __webpack_require__(9011);
  *
  * A specialized dropdown implementation for the KTSelect component.
  * This module handles the dropdown functionality for the select component,
- * including positioning, showing/hiding, and keyboard navigation.
+ * including positioning and showing/hiding.
  */
 var KTSelectDropdown = /** @class */ (function (_super) {
     __extends(KTSelectDropdown, _super);
@@ -9228,7 +9296,7 @@ var KTSelectDropdown = /** @class */ (function (_super) {
      * @param dropdownElement The dropdown content element
      * @param config The configuration options
      */
-    function KTSelectDropdown(element, toggleElement, dropdownElement, config) {
+    function KTSelectDropdown(element, toggleElement, dropdownElement, config, ktSelectInstance) {
         var _this = _super.call(this) || this;
         _this._name = 'select-dropdown';
         // State
@@ -9239,6 +9307,7 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         _this._toggleElement = toggleElement;
         _this._dropdownElement = dropdownElement;
         _this._config = config;
+        _this._ktSelectInstance = ktSelectInstance; // Assign instance
         _this._eventManager = new utils_1.EventManager();
         _this._focusManager = new utils_1.FocusManager(dropdownElement, '[data-kt-select-option]', config);
         _this._setupEventListeners();
@@ -9259,7 +9328,18 @@ var KTSelectDropdown = /** @class */ (function (_super) {
     KTSelectDropdown.prototype._handleToggleClick = function (event) {
         event.preventDefault();
         event.stopPropagation();
-        this.toggle();
+        if (this._config.disabled) {
+            if (this._config.debug)
+                console.log('KTSelectDropdown._handleToggleClick: select is disabled');
+            return;
+        }
+        // Call KTSelect's methods
+        if (this._ktSelectInstance.isDropdownOpen()) {
+            this._ktSelectInstance.closeDropdown();
+        }
+        else {
+            this._ktSelectInstance.openDropdown();
+        }
     };
     /**
      * Handle clicks outside the dropdown
@@ -9270,7 +9350,8 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         var target = event.target;
         if (!this._element.contains(target) &&
             !this._dropdownElement.contains(target)) {
-            this.close();
+            // Call KTSelect's closeDropdown method
+            this._ktSelectInstance.closeDropdown();
         }
     };
     /**
@@ -9372,29 +9453,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
             this._popperInstance.update();
         }
     };
-    /**
-     * Toggle the dropdown
-     */
-    KTSelectDropdown.prototype.toggle = function () {
-        if (this._config.disabled) {
-            if (this._config.debug)
-                console.log('KTSelectDropdown.toggle: select is disabled, not toggling');
-            return;
-        }
-        if (this._config.debug)
-            console.log('KTSelectDropdown.toggle called - isOpen:', this._isOpen);
-        if (this._isTransitioning) {
-            if (this._config.debug)
-                console.log('KTSelectDropdown.toggle - ignoring during transition');
-            return;
-        }
-        if (this._isOpen) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    };
     /**
      * Open the dropdown
      */
@@ -9407,71 +9465,41 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         }
         if (this._isOpen || this._isTransitioning)
             return;
-        // Fire before show event
-        var beforeShowEvent = new CustomEvent('kt.select.dropdown.show', {
-            bubbles: true,
-            cancelable: true,
-        });
-        this._element.dispatchEvent(beforeShowEvent);
-        if (beforeShowEvent.defaultPrevented)
-            return;
         // Begin opening transition
         this._isTransitioning = true;
-        // Set initial styles - remove display: block and use class toggling instead
+        // Set initial styles
         this._dropdownElement.classList.remove('hidden');
         this._dropdownElement.style.opacity = '0';
         // Set dropdown width
         this._setDropdownWidth();
-        // Make sure the element is visible for transitioning
+        // Reflow
         dom_1.default.reflow(this._dropdownElement);
-        // Apply z-index if configured
+        // Apply z-index
         if (this._config.dropdownZindex) {
             this._dropdownElement.style.zIndex =
                 this._config.dropdownZindex.toString();
         }
         else {
-            // Auto-calculate z-index
             var parentZindex = dom_1.default.getHighestZindex(this._element);
             if (parentZindex) {
                 this._dropdownElement.style.zIndex = (parentZindex + 1).toString();
             }
         }
-        // Initialize popper for positioning
+        // Initialize popper
         this._initPopper();
-        // Add active classes
+        // Add active classes for visual state
         this._dropdownElement.classList.add('open');
         this._toggleElement.classList.add('active');
-        this._toggleElement.setAttribute('aria-expanded', 'true');
+        // ARIA attributes will be handled by KTSelect
         // Start transition
         this._dropdownElement.style.opacity = '1';
         // Handle transition end
         dom_1.default.transitionEnd(this._dropdownElement, function () {
             _this._isTransitioning = false;
             _this._isOpen = true;
-            // Focus the first item if search is enabled
-            if (_this._config.enableSearch) {
-                var searchInput = _this._dropdownElement.querySelector('input[type="search"]');
-                if (searchInput) {
-                    searchInput.focus();
-                }
-            }
-            // Fire after show event
-            var afterShowEvent = new CustomEvent('kt.select.dropdown.shown', {
-                bubbles: true,
-            });
-            _this._element.dispatchEvent(afterShowEvent);
+            // Focus and events will be handled by KTSelect
         });
     };
-    /**
-     * Focus the first option in the dropdown
-     */
-    KTSelectDropdown.prototype._focusFirstOption = function () {
-        var firstOption = this._focusManager.getVisibleOptions()[0];
-        if (firstOption) {
-            this._focusManager.applyFocus(firstOption);
-            this._focusManager.scrollIntoView(firstOption);
-        }
-    };
     /**
      * Close the dropdown
      */
@@ -9484,34 +9512,19 @@ var KTSelectDropdown = /** @class */ (function (_super) {
                 console.log('KTSelectDropdown.close - early return: dropdown not open or is transitioning');
             return;
         }
-        // Fire before hide event
-        var beforeHideEvent = new CustomEvent('kt.select.dropdown.hide', {
-            bubbles: true,
-            cancelable: true,
-        });
-        this._element.dispatchEvent(beforeHideEvent);
-        if (beforeHideEvent.defaultPrevented) {
-            if (this._config.debug)
-                console.log('KTSelectDropdown.close - canceling due to defaultPrevented on beforeHideEvent');
-            return;
-        }
+        // Events and ARIA will be handled by KTSelect
         if (this._config.debug)
             console.log('KTSelectDropdown.close - starting transition');
-        // Begin closing transition
         this._isTransitioning = true;
-        // Start transition
         this._dropdownElement.style.opacity = '0';
-        // Use a combination of transition end and a fallback timer
         var transitionComplete = false;
-        // Set a fixed-duration fallback in case the transition event doesn't fire
         var fallbackTimer = setTimeout(function () {
             if (!transitionComplete) {
                 if (_this._config.debug)
                     console.log('KTSelectDropdown.close - fallback timer triggered');
                 completeTransition();
             }
-        }, 300); // 300ms should be enough for most transitions
-        // Setup the transition end function
+        }, 300);
         var completeTransition = function () {
             if (transitionComplete)
                 return;
@@ -9519,30 +9532,21 @@ var KTSelectDropdown = /** @class */ (function (_super) {
             clearTimeout(fallbackTimer);
             if (_this._config.debug)
                 console.log('KTSelectDropdown.close - transition ended');
-            // Remove active classes
             _this._dropdownElement.classList.add('hidden');
             _this._dropdownElement.classList.remove('open');
             _this._toggleElement.classList.remove('active');
-            _this._toggleElement.setAttribute('aria-expanded', 'false');
-            // Reset styles - replace display: none with adding hidden class
-            _this._dropdownElement.classList.add('hidden');
-            _this._dropdownElement.style.opacity = '';
-            _this._dropdownElement.style.zIndex = '';
-            // Destroy popper
+            // ARIA attributes will be handled by KTSelect
             _this._destroyPopper();
-            // Update state
             _this._isTransitioning = false;
             _this._isOpen = false;
-            // Fire after hide event
-            var afterHideEvent = new CustomEvent('kt.select.dropdown.hidden', {
-                bubbles: true,
-            });
-            _this._element.dispatchEvent(afterHideEvent);
+            // Events will be handled by KTSelect
             if (_this._config.debug)
-                console.log('KTSelectDropdown.close - complete, events fired');
+                console.log('KTSelectDropdown.close - visual part complete');
         };
-        // Handle transition end via the utility but also have the fallback
         dom_1.default.transitionEnd(this._dropdownElement, completeTransition);
+        if (dom_1.default.getCssProp(this._dropdownElement, 'transition-duration') === '0s') {
+            completeTransition();
+        }
     };
     /**
      * Check if dropdown is open
@@ -9910,15 +9914,17 @@ var KTSelectSearch = /** @class */ (function () {
                     console.log('Initializing search module with input:', this._searchInput);
                 // First remove any existing listeners to prevent duplicates
                 this._removeEventListeners();
-                // Add the event listener
+                // Add the input event listener for filtering
                 this._eventManager.addListener(this._searchInput, 'input', this.handleSearchInput);
+                // Add keydown event listener for navigation, selection, and escape
+                this._eventManager.addListener(this._searchInput, 'keydown', this._handleSearchKeyDown.bind(this));
                 // Add blur event listener to ensure highlights are cleared when focus is lost
                 this._eventManager.addListener(this._searchInput, 'blur', function () {
                     // Small delay to prevent race conditions with selection
                     setTimeout(function () {
                         if (!_this._searchInput.value) {
                             _this._resetAllOptions();
-                            _this.clearSearchHighlights();
+                            _this.clearSearch();
                         }
                     }, 100);
                 });
@@ -9936,39 +9942,48 @@ var KTSelectSearch = /** @class */ (function () {
                         _this.refreshOptionCache();
                     });
                 }
-                // Listen for dropdown close to reset options if search is empty
-                this._select.getElement().addEventListener('dropdown.close', function () {
+                // Listen for dropdown close to reset options - ATTACH TO WRAPPER
+                this._select.getWrapperElement().addEventListener('dropdown.close', function () {
                     _this._focusManager.resetFocus();
-                    _this.clearSearchHighlights();
-                    _this._searchInput.value = '';
-                    _this._resetAllOptions();
-                    _this._clearNoResultsMessage();
+                    // If clearSearchOnClose is false and there's a value, the search term and filtered state should persist.
+                    // KTSelect's closeDropdown method already calls this._searchModule.clearSearch() (which clears highlights)
+                    // and conditionally clears the input value based on KTSelect's config.clearSearchOnClose.
+                    // This listener in search.ts seems to unconditionally clear everything.
+                    // For now, keeping its original behavior:
+                    _this.clearSearch(); // Clears highlights from current options
+                    _this._searchInput.value = ''; // Clears the search input field
+                    _this._resetAllOptions(); // Shows all options, restores original text, removes highlights
+                    _this._clearNoResultsMessage(); // Clears any "no results" message
                 });
-                // Clear highlights when an option is selected
+                // Clear highlights when an option is selected - ATTACH TO ORIGINAL SELECT (standard 'change' event)
                 this._select.getElement().addEventListener('change', function () {
-                    _this.clearSearchHighlights();
+                    _this.clearSearch();
                     // Close dropdown if configured to do so
-                    if (_this._select.getConfig().closeOnSelect &&
-                        !_this._select.getConfig().multiple) {
-                        _this._select.closeDropdown();
-                    }
+                    _this._select.closeDropdown();
                 });
-                // Autofocus on search input
-                if (this._select.getConfig().searchAutofocus) {
-                    this._select.getElement().addEventListener('dropdown.show', function () {
+                // Consolidated 'dropdown.show' event listener - ATTACH TO WRAPPER
+                this._select.getWrapperElement().addEventListener('dropdown.show', function () {
+                    var _a;
+                    _this._focusManager.resetFocus(); // Always clear previous focus state
+                    if ((_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.value) {
+                        // If there's an existing search term:
+                        // 1. Re-filter options. This ensures the display (hidden/visible) is correct
+                        //    and "no results" message is handled if query yields nothing.
+                        _this._filterOptions(_this._searchInput.value);
+                    }
+                    else {
+                        // If search input is empty:
+                        // 1. Reset all options to their full, unfiltered, original state.
+                        _this._resetAllOptions(); // Shows all, clears highlights from options, restores original text
+                        // 2. Clear any "no results" message.
+                        _this._clearNoResultsMessage();
+                    }
+                    // Handle autofocus for the search input (this was one of the original separate listeners)
+                    if (_this._select.getConfig().searchAutofocus) {
                         setTimeout(function () {
                             var _a;
-                            // Add slight delay to ensure the dropdown and search input are visible
-                            (_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.focus();
-                        }, 50);
-                    });
-                }
-                // Listen for explicit dropdown open event to clear highlights if needed
-                this._select.getElement().addEventListener('dropdown.show', function () {
-                    var _a;
-                    // If search input is empty, ensure highlights are cleared on open
-                    if (!((_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.value)) {
-                        _this.clearSearchHighlights();
+                            (_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.focus(); // Focus search input
+                        }, 50); // Delay to ensure dropdown is visible
                     }
                 });
             }
@@ -9983,18 +9998,42 @@ var KTSelectSearch = /** @class */ (function () {
         }
     };
     /**
-     * Select the currently focused option
+     * Handles keydown events on the search input for navigation and actions.
      */
-    KTSelectSearch.prototype._selectFocusedOption = function () {
-        var focusedOption = this._focusManager.getFocusedOption();
-        if (focusedOption) {
-            var optionValue = focusedOption.getAttribute('data-value');
-            if (optionValue) {
-                // Ensure highlights are cleared before selection
-                this.clearSearchHighlights();
-                // Trigger the selection in the main select component
-                this._select['_selectOption'](optionValue);
-            }
+    KTSelectSearch.prototype._handleSearchKeyDown = function (event) {
+        var key = event.key;
+        switch (key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusManager.focusNext();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._focusManager.focusPrevious();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                // Always attempt to select the first available option in the list.
+                // focusFirst() finds, focuses, and returns the first visible, non-disabled option.
+                var firstAvailableOption = this._focusManager.focusFirst();
+                if (firstAvailableOption) {
+                    var optionValue = firstAvailableOption.getAttribute('data-value');
+                    if (optionValue) {
+                        this._select.toggleSelection(optionValue);
+                        // KTSelect.toggleSelection handles closing the dropdown based on config.closeOnSelect and config.multiple
+                    }
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this._searchInput.value = '';
+                this.clearSearch();
+                this._resetAllOptions();
+                this._clearNoResultsMessage();
+                this._focusManager.focusFirst();
+                break;
+            default:
+                break;
         }
     };
     /**
@@ -10005,42 +10044,66 @@ var KTSelectSearch = /** @class */ (function () {
         var _this = this;
         // Wait for options to be initialized
         setTimeout(function () {
+            _this._originalOptionContents.clear(); // Clear before re-caching
             var options = Array.from(_this._select.getOptionsElement());
             options.forEach(function (option) {
                 var value = option.getAttribute('data-value');
                 if (value) {
+                    // Store the full innerHTML as the original content
                     _this._originalOptionContents.set(value, option.innerHTML);
                 }
             });
         }, 0);
     };
+    /**
+     * Restores the innerHTML of all options from the cache if they have been modified.
+     * This is typically called before applying new filters/highlights.
+     */
+    KTSelectSearch.prototype._restoreOptionContentsBeforeFilter = function () {
+        var _this = this;
+        var options = Array.from(this._select.getOptionsElement());
+        options.forEach(function (option) {
+            var value = option.getAttribute('data-value');
+            if (value && _this._originalOptionContents.has(value)) {
+                var originalContent = _this._originalOptionContents.get(value);
+                // Only restore if current content is different, to avoid unnecessary DOM manipulation
+                if (option.innerHTML !== originalContent) {
+                    option.innerHTML = originalContent;
+                }
+            }
+        });
+    };
     KTSelectSearch.prototype._handleSearchInput = function (event) {
-        var query = event.target.value.toLowerCase();
+        var query = event.target.value;
         var config = this._select.getConfig();
         // Reset focused option when search changes
         this._focusManager.resetFocus();
-        // If search query is empty, clear all highlights
+        // Restore original content for all options before filtering/highlighting again
+        this._restoreOptionContentsBeforeFilter();
         if (query.trim() === '') {
-            this.clearSearchHighlights();
+            this._resetAllOptions();
+            this._focusManager.focusFirst(); // Focus first option when search is cleared
+            return;
         }
-        // For remote search, we don't filter locally
-        // The KTSelect component will handle the remote search
+        // For remote search, KTSelect component handles it.
+        // KTSelect will call refreshAfterSearch on this module when remote data is updated.
         if (config.remote && config.searchParam) {
-            // If query is too short, reset all options to visible state
             if (query.length < config.searchMinLength) {
                 this._resetAllOptions();
                 this._clearNoResultsMessage();
+                this._focusManager.focusFirst(); // Focus first if query too short
             }
-            // Otherwise, let KTSelect handle remote search
             return;
         }
         // For local search
         if (query.length >= config.searchMinLength) {
             this._filterOptions(query);
+            this._focusManager.focusFirst(); // Focus first visible option after local filtering
         }
         else {
             this._resetAllOptions();
             this._clearNoResultsMessage();
+            this._focusManager.focusFirst(); // Focus first if query too short and not remote
         }
     };
     KTSelectSearch.prototype._filterOptions = function (query) {
@@ -10052,20 +10115,11 @@ var KTSelectSearch = /** @class */ (function () {
         if (this._originalOptionContents.size === 0) {
             this._cacheOriginalOptionContents();
         }
-        // Use the shared filterOptions utility
-        (0, utils_1.filterOptions)(options, query, config, dropdownElement, function (visibleCount) {
-            return _this._handleNoResults(visibleCount);
+        // Restore original content before filtering, so highlighting is applied fresh.
+        this._restoreOptionContentsBeforeFilter();
+        var visibleCount = (0, utils_1.filterOptions)(options, query, config, dropdownElement, function (count) {
+            return _this._handleNoResults(count);
         });
-        // Apply specialized text highlighting if needed
-        if (config.searchHighlight && query.trim() !== '') {
-            this._applyHighlightToDisplay(query);
-        }
-    };
-    /**
-     * Apply highlighting to the display element for multi-select
-     */
-    KTSelectSearch.prototype._applyHighlightToDisplay = function (query) {
-        // Implementation for display highlighting
     };
     /**
      * Reset all options to their original state
@@ -10074,34 +10128,29 @@ var KTSelectSearch = /** @class */ (function () {
         var _this = this;
         // Show all options
         var options = Array.from(this._select.getOptionsElement());
-        // Cache original option HTML if not already cached
+        // Ensure the cache is populated if it's somehow empty here
         if (this._originalOptionContents.size === 0) {
             this._cacheOriginalOptionContents();
         }
         options.forEach(function (option) {
-            // Remove the hidden class
             option.classList.remove('hidden');
+            if (option.style.display === 'none')
+                option.style.display = ''; // Ensure visible
             // Restore original HTML content (remove highlights)
             var value = option.getAttribute('data-value');
             if (value && _this._originalOptionContents.has(value)) {
-                option.innerHTML = _this._originalOptionContents.get(value);
-            }
-            // Remove any display styling
-            if (option.hasAttribute('style') &&
-                option.getAttribute('style').includes('display:')) {
-                var styleAttr = option.getAttribute('style');
-                if (styleAttr.trim() === 'display: none;' ||
-                    styleAttr.trim() === 'display: block;') {
-                    option.removeAttribute('style');
-                }
-                else {
-                    option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
+                var originalContent = _this._originalOptionContents.get(value);
+                // Only update if different, to minimize DOM changes
+                if (option.innerHTML !== originalContent) {
+                    option.innerHTML = originalContent;
                 }
             }
         });
+        this._clearNoResultsMessage(); // Ensure no results message is cleared when resetting
     };
     KTSelectSearch.prototype._handleNoResults = function (visibleOptionsCount) {
-        if (visibleOptionsCount === 0 && this._searchInput.value.trim() !== '') {
+        var _a, _b;
+        if (visibleOptionsCount === 0 && ((_b = (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) !== '') {
             this._showNoResultsMessage();
         }
         else {
@@ -10131,28 +10180,22 @@ var KTSelectSearch = /** @class */ (function () {
      * Public method to explicitly clear all search highlights
      * This is called when search is reset or selection changes
      */
-    KTSelectSearch.prototype.clearSearchHighlights = function () {
+    KTSelectSearch.prototype.clearSearch = function () {
         var _this = this;
         // Restore original option content (removes highlighting)
-        var options = Array.from(this._select.getOptionsElement());
-        options.forEach(function (option) {
+        var optionsToClear = Array.from(this._select.getOptionsElement());
+        // Ensure cache is available
+        if (this._originalOptionContents.size === 0 && optionsToClear.length > 0) {
+            this._cacheOriginalOptionContents();
+        }
+        optionsToClear.forEach(function (option) {
             var value = option.getAttribute('data-value');
             if (value && _this._originalOptionContents.has(value)) {
-                option.innerHTML = _this._originalOptionContents.get(value);
-            }
-        });
-        // Also clear highlights from the display element
-        this._clearDisplayHighlights();
-    };
-    /**
-     * Clear any highlights from the display element (selected values)
-     */
-    KTSelectSearch.prototype._clearDisplayHighlights = function () {
-        // Implementation for clearing display highlights
-        var options = Array.from(this._select.getOptionsElement());
-        options.forEach(function (option) {
-            if (option.dataset && !option.dataset.originalText) {
-                option.dataset.originalText = option.innerHTML;
+                var originalContent = _this._originalOptionContents.get(value);
+                // Only restore if different
+                if (option.innerHTML !== originalContent) {
+                    option.innerHTML = originalContent;
+                }
             }
         });
     };
@@ -10163,14 +10206,23 @@ var KTSelectSearch = /** @class */ (function () {
         var _this = this;
         // Re-cache all option contents
         this._originalOptionContents.clear();
-        var options = Array.from(this._select.getOptionsElement());
-        options.forEach(function (option) {
+        var currentOptions = Array.from(this._select.getOptionsElement());
+        currentOptions.forEach(function (option) {
             var value = option.getAttribute('data-value');
             if (value) {
                 _this._originalOptionContents.set(value, option.innerHTML);
             }
         });
     };
+    /**
+     * Called after search (local or remote via KTSelect) to reset focus.
+     */
+    KTSelectSearch.prototype.refreshAfterSearch = function () {
+        this._focusManager.resetFocus();
+        this._focusManager.focusFirst();
+        // Re-cache original contents as options might have changed (especially after remote search)
+        this.refreshOptionCache();
+    };
     /**
      * Clean up all resources used by the search module
      */
@@ -10178,12 +10230,13 @@ var KTSelectSearch = /** @class */ (function () {
         // Remove all event listeners
         this._removeEventListeners();
         // Clear all references
-        this._focusManager.dispose();
-        this._eventManager.removeAllListeners(null);
+        if (this._focusManager) {
+            this._focusManager.dispose();
+        }
         // Clear cached content
         this._originalOptionContents.clear();
         // Clear highlight elements
-        this.clearSearchHighlights();
+        this.clearSearch();
     };
     return KTSelectSearch;
 }());
@@ -11399,15 +11452,16 @@ var KTSelect = /** @class */ (function (_super) {
         var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (!optionsContainer)
             return;
+        // Clear previous messages
+        optionsContainer.innerHTML = '';
         switch (type) {
             case 'error':
-                optionsContainer.innerHTML = templates_1.defaultTemplates.error(__assign(__assign({}, this._config), { errorMessage: message }));
+                optionsContainer.appendChild(templates_1.defaultTemplates.error(__assign(__assign({}, this._config), { errorMessage: message })));
                 break;
             case 'loading':
-                optionsContainer.innerHTML = templates_1.defaultTemplates.loading(this._config, message || 'Loading...').outerHTML;
+                optionsContainer.appendChild(templates_1.defaultTemplates.loading(this._config, message || 'Loading...'));
                 break;
             case 'empty':
-                optionsContainer.innerHTML = '';
                 optionsContainer.appendChild(templates_1.defaultTemplates.empty(this._config));
                 break;
         }
@@ -11579,7 +11633,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Initialize focus manager after dropdown element is created
         this._focusManager = new utils_1.FocusManager(this._dropdownContentElement, '[data-kt-select-option]', this._config);
         // Initialize dropdown module after all elements are created
-        this._dropdownModule = new dropdown_1.KTSelectDropdown(this._wrapperElement, this._displayElement, this._dropdownContentElement, this._config);
+        this._dropdownModule = new dropdown_1.KTSelectDropdown(this._wrapperElement, this._displayElement, this._dropdownContentElement, this._config, this);
         // Update display and set ARIA attributes
         this._updateDisplayAndAriaAttributes();
         this.updateSelectedOptionDisplay();
@@ -11587,12 +11641,6 @@ var KTSelect = /** @class */ (function (_super) {
         // Attach event listeners after all modules are initialized
         this._attachEventListeners();
     };
-    /**
-     * Initialize options HTML from data
-     */
-    // private _initializeOptionsHtml() {
-    // 	this._generateOptionsHtml(this._element);
-    // }
     /**
      * Creates the HTML structure for the select component
      */
@@ -11662,7 +11710,6 @@ var KTSelect = /** @class */ (function (_super) {
         if (!this._searchInputElement) {
             this._searchInputElement = this._displayElement;
         }
-        this._valueDisplayElement = this._wrapperElement.querySelector("[data-kt-select-value]");
         this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
     };
     /**
@@ -11673,16 +11720,10 @@ var KTSelect = /** @class */ (function (_super) {
         document.addEventListener('click', this._handleDocumentClick.bind(this));
         // Dropdown option click events
         this._eventManager.addListener(this._dropdownContentElement, 'click', this._handleDropdownOptionClick.bind(this));
-        // Only attach click handler to display element
-        // this._eventManager.addListener(
-        // 	this._wrapperElement,
-        // 	'click',
-        // 	this._handleDropdownClick.bind(this),
-        // );
-        // Attach centralized keyboard handler
-        var keyboardTarget = this._searchInputElement || this._wrapperElement;
-        if (keyboardTarget) {
-            keyboardTarget.addEventListener('keydown', this._handleKeyboardEvent.bind(this));
+        // Attach centralized keyboard handler to the wrapper element.
+        // Events from focusable children like _displayElement or _searchInputElement (if present) will bubble up.
+        if (this._wrapperElement) {
+            this._wrapperElement.addEventListener('keydown', this._handleKeyboardEvent.bind(this));
         }
     };
     /**
@@ -11825,37 +11866,10 @@ var KTSelect = /** @class */ (function (_super) {
      * DROPDOWN MANAGEMENT
      * ========================================================================
      */
-    /**
-     * Toggle dropdown visibility
-     * @deprecated
-     */
-    KTSelect.prototype.toggleDropdown = function () {
-        if (this._config.disabled) {
-            if (this._config.debug)
-                console.log('toggleDropdown: select is disabled, not opening');
-            return;
-        }
-        if (this._config.debug)
-            console.log('toggleDropdown called');
-        if (this._dropdownModule) {
-            // Always use the dropdown module's state to determine whether to open or close
-            if (this._dropdownModule.isOpen()) {
-                if (this._config.debug)
-                    console.log('Dropdown is open, closing...');
-                this.closeDropdown();
-            }
-            else {
-                if (this._config.debug)
-                    console.log('Dropdown is closed, opening...');
-                this.openDropdown();
-            }
-        }
-    };
     /**
      * Open the dropdown
      */
     KTSelect.prototype.openDropdown = function () {
-        var _this = this;
         if (this._config.disabled) {
             if (this._config.debug)
                 console.log('openDropdown: select is disabled, not opening');
@@ -11883,14 +11897,6 @@ var KTSelect = /** @class */ (function (_super) {
         // Dispatch custom event
         this._dispatchEvent('show');
         this._fireEvent('show');
-        // Focus search input if configured and exists
-        if (this._config.enableSearch &&
-            this._config.searchAutofocus &&
-            this._searchInputElement) {
-            setTimeout(function () {
-                _this._searchInputElement.focus();
-            }, 50);
-        }
         // Update ARIA states
         this._setAriaAttributes();
         // Focus the first selected option or first option if nothing selected
@@ -11911,14 +11917,14 @@ var KTSelect = /** @class */ (function (_super) {
         // Always close by delegating to the dropdown module, which is the source of truth
         if (this._config.debug)
             console.log('Closing dropdown via dropdownModule...');
-        // Clear search input and highlights if the dropdown is closing
+        // Clear search input if the dropdown is closing
         if (this._searchModule && this._searchInputElement) {
             // Clear search input if configured to do so
             if (this._config.clearSearchOnClose) {
                 this._searchInputElement.value = '';
             }
-            // Always clear the highlights when dropdown closes
-            this._searchModule.clearSearchHighlights();
+            // Clear search input when dropdown closes
+            this._searchModule.clearSearch();
         }
         // Set our internal flag to match what we're doing
         this._dropdownIsOpen = false;
@@ -11952,10 +11958,13 @@ var KTSelect = /** @class */ (function (_super) {
         var selectedOptions = this.getSelectedOptions();
         if (selectedOptions.length === 0)
             return;
-        // Get the first selected option element
-        var firstSelectedValue = selectedOptions[0];
-        // Use the FocusManager to focus on the option
-        this._focusManager.focusOptionByValue(firstSelectedValue);
+        // Iterate through selected options and focus the first one that is visible
+        for (var _i = 0, selectedOptions_1 = selectedOptions; _i < selectedOptions_1.length; _i++) {
+            var value = selectedOptions_1[_i];
+            if (this._focusManager && this._focusManager.focusOptionByValue(value)) {
+                break; // Stop after focusing the first found selected and visible option
+            }
+        }
     };
     /**
      * ========================================================================
@@ -12018,38 +12027,90 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype.updateSelectedOptionDisplay = function () {
         var selectedOptions = this.getSelectedOptions();
-        // Tag mode: render tags if enabled
-        if (this._config.tags && this._tagsModule) {
+        var tagsEnabled = this._config.tags && this._tagsModule;
+        var valueDisplayEl = this.getValueDisplayElement();
+        if (tagsEnabled) {
+            // Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
             this._tagsModule.updateTagsDisplay(selectedOptions);
-            return;
         }
+        // Guard against valueDisplayEl being null due to template modifications
+        if (!valueDisplayEl) {
+            if (this._config.debug) {
+                console.warn('KTSelect: Value display element is null. Cannot update display or placeholder. Check template for [data-kt-select-value].');
+            }
+            return; // Nothing to display on if the element is missing
+        }
+        // 1. Custom render function takes highest precedence
         if (typeof this._config.renderSelected === 'function') {
-            // Use the custom renderSelected function if provided
-            this._valueDisplayElement.innerHTML = this._config.renderSelected(selectedOptions);
+            valueDisplayEl.innerHTML = this._config.renderSelected(selectedOptions);
+            return;
+        }
+        // 2. Custom displayTemplate string
+        // Check if a custom display template string is provided directly in config or via config.templates
+        var customDisplayTemplateString = this._config.displayTemplate || (this._config.templates && this._config.templates.display);
+        if (customDisplayTemplateString) {
+            // If tags are enabled and items are selected, the tags module handles display, so clear the main display area.
+            if (tagsEnabled && selectedOptions.length > 0) {
+                valueDisplayEl.innerHTML = '';
+            }
+            else {
+                // Otherwise, render the custom display template.
+                // If no options are selected, renderDisplayTemplateForSelected should handle showing a placeholder if the template supports it,
+                // or we might need a separate placeholder rendering for custom templates if they don't handle empty selection.
+                // For now, assume renderDisplayTemplateForSelected handles it or shows selected text.
+                valueDisplayEl.innerHTML = this.renderDisplayTemplateForSelected(selectedOptions);
+            }
+            return;
+        }
+        // 3. Default template behavior (no custom function or string template)
+        var textContainer = valueDisplayEl.querySelector('[data-kt-text-container="true"]');
+        if (tagsEnabled && selectedOptions.length > 0) {
+            // Tags are active and have content, clear the text container if it exists,
+            // or the whole display if it doesn't (though it should with default template).
+            if (textContainer) {
+                textContainer.innerHTML = '';
+            }
+            else {
+                valueDisplayEl.innerHTML = ''; // Fallback: clear entire display area
+            }
+        }
+        else if (selectedOptions.length === 0) {
+            // No options selected: display placeholder text in the text container.
+            var placeholderTemplate = templates_1.defaultTemplates.placeholder(this._config);
+            var placeholderText = placeholderTemplate.textContent || ''; // Get text from placeholder element
+            if (textContainer) {
+                textContainer.innerHTML = placeholderText;
+            }
+            else {
+                // Fallback: If no text container, replace children of valueDisplayEl with the placeholder element itself.
+                // This ensures the placeholder (which might have its own structure/classes) is displayed.
+                valueDisplayEl.replaceChildren(placeholderTemplate);
+            }
         }
         else {
-            if (selectedOptions.length === 0) {
-                var placeholder = templates_1.defaultTemplates.placeholder(this._config);
-                this._valueDisplayElement.replaceChildren(placeholder);
+            // Options are selected, and tags are not enabled (or no selected options for tags):
+            // Render normal selected text in the text container.
+            var content = this.getSelectedOptionsText();
+            if (textContainer) {
+                textContainer.innerHTML = content;
             }
             else {
-                var content = '';
-                if (this._config.displayTemplate) {
-                    var selectedValues = this.getSelectedOptions();
-                    content = this.renderDisplayTemplateForSelected(selectedValues);
-                }
-                else {
-                    // If no displayTemplate is provided, use the default comma-separated list of selected options
-                    content = this.getSelectedOptionsText();
-                }
-                this._valueDisplayElement.innerHTML = content;
+                valueDisplayEl.innerHTML = content; // Fallback: set content on whole display area
             }
         }
     };
+    /**
+     * Check if an option was originally disabled in the HTML
+     */
+    KTSelect.prototype._isOptionOriginallyDisabled = function (value) {
+        var originalOption = Array.from(this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+        return originalOption ? originalOption.disabled : false;
+    };
     /**
      * Update CSS classes for selected options
      */
     KTSelect.prototype._updateSelectedOptionClass = function () {
+        var _this = this;
         var allOptions = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
         var selectedValues = this._state.getSelectedOptions();
         var maxReached = typeof this._config.maxSelections === 'number' &&
@@ -12061,9 +12122,11 @@ var KTSelect = /** @class */ (function (_super) {
             if (!optionValue)
                 return;
             var isSelected = selectedValues.includes(optionValue);
+            var isOriginallyDisabled = _this._isOptionOriginallyDisabled(optionValue);
             if (isSelected) {
                 option.classList.add('selected');
                 option.setAttribute('aria-selected', 'true');
+                // Selected options should not be visually hidden or disabled by maxSelections logic
                 option.classList.remove('hidden');
                 option.classList.remove('disabled');
                 option.removeAttribute('aria-disabled');
@@ -12071,7 +12134,8 @@ var KTSelect = /** @class */ (function (_super) {
             else {
                 option.classList.remove('selected');
                 option.setAttribute('aria-selected', 'false');
-                if (maxReached) {
+                // An option should be disabled if it was originally disabled OR if maxSelections is reached
+                if (isOriginallyDisabled || maxReached) {
                     option.classList.add('disabled');
                     option.setAttribute('aria-disabled', 'true');
                 }
@@ -12131,17 +12195,6 @@ var KTSelect = /** @class */ (function (_super) {
      * EVENT HANDLERS
      * ========================================================================
      */
-    /**
-     * Handle display element click
-     * @deprecated
-     */
-    KTSelect.prototype._handleDropdownClick = function (event) {
-        if (this._config.debug)
-            console.log('Display element clicked', event.target);
-        event.preventDefault();
-        event.stopPropagation(); // Prevent event bubbling
-        this.toggleDropdown();
-    };
     /**
      * Handle click within the dropdown
      */
@@ -12182,6 +12235,13 @@ var KTSelect = /** @class */ (function (_super) {
         }
         if (this._config.debug)
             console.log('Option clicked:', optionValue);
+        // If in single-select mode and the clicked option is already selected, just close the dropdown.
+        if (!this._config.multiple && this._state.isSelected(optionValue)) {
+            if (this._config.debug)
+                console.log('Single select mode: clicked already selected option. Closing dropdown.');
+            this.closeDropdown();
+            return;
+        }
         // Use toggleSelection instead of _selectOption to prevent re-rendering
         this.toggleSelection(optionValue);
     };
@@ -12245,7 +12305,13 @@ var KTSelect = /** @class */ (function (_super) {
      * Get value display element
      */
     KTSelect.prototype.getValueDisplayElement = function () {
-        return this._valueDisplayElement;
+        return this._displayElement;
+    };
+    /**
+     * Get wrapper element
+     */
+    KTSelect.prototype.getWrapperElement = function () {
+        return this._wrapperElement;
     };
     /**
      * Show all options in the dropdown
@@ -12255,6 +12321,7 @@ var KTSelect = /** @class */ (function (_super) {
         var options = Array.from(this._wrapperElement.querySelectorAll("[data-kt-select-option]"));
         // Show all options by removing the hidden class and any inline styles
         options.forEach(function (option) {
+            var _a;
             // Remove hidden class
             option.classList.remove('hidden');
             // Clean up any existing inline styles for backward compatibility
@@ -12268,7 +12335,7 @@ var KTSelect = /** @class */ (function (_super) {
                     }
                     else {
                         // Otherwise, remove just the display property
-                        option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
+                        option.setAttribute('style', (_a = styleAttr === null || styleAttr === void 0 ? void 0 : styleAttr.replace(/display:\s*[^;]+;?/gi, '')) === null || _a === void 0 ? void 0 : _a.trim());
                     }
                 }
             }
@@ -12278,7 +12345,7 @@ var KTSelect = /** @class */ (function (_super) {
             this._searchInputElement.value = '';
             // If we have a search module, clear any search filtering
             if (this._searchModule) {
-                this._searchModule.clearSearchHighlights();
+                this._searchModule.clearSearch();
             }
         }
     };
@@ -12307,7 +12374,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Get current selection state
         var isSelected = this._state.isSelected(value);
         if (this._config.debug)
-            console.log("toggleSelection called for value: ".concat(value, ", isSelected: ").concat(isSelected, ", multiple: ").concat(this._config.multiple, ", closeOnSelect: ").concat(this._config.closeOnSelect));
+            console.log("toggleSelection called for value: ".concat(value, ", isSelected: ").concat(isSelected, ", multiple: ").concat(this._config.multiple));
         // If already selected in single select mode, do nothing (can't deselect in single select)
         if (isSelected && !this._config.multiple) {
             if (this._config.debug)
@@ -12316,9 +12383,9 @@ var KTSelect = /** @class */ (function (_super) {
         }
         if (this._config.debug)
             console.log("Toggling selection for option: ".concat(value, ", currently selected: ").concat(isSelected));
-        // Ensure any search highlights are cleared when selection changes
+        // Ensure any search input is cleared when selection changes
         if (this._searchModule) {
-            this._searchModule.clearSearchHighlights();
+            this._searchModule.clearSearch();
         }
         // Toggle the selection in the state
         this._state.toggleSelectedOptions(value);
@@ -12341,15 +12408,14 @@ var KTSelect = /** @class */ (function (_super) {
         // Update option classes without re-rendering the dropdown content
         this._updateSelectedOptionClass();
         // For single select mode, always close the dropdown after selection
-        // For multiple select mode, only close if closeOnSelect is true
         if (!this._config.multiple) {
             if (this._config.debug)
                 console.log('About to call closeDropdown() for single select mode - always close after selection');
             this.closeDropdown();
         }
-        else if (this._config.closeOnSelect) {
+        else {
             if (this._config.debug)
-                console.log('About to call closeDropdown() for multiple select with closeOnSelect:true');
+                console.log('About to call closeDropdown() for multiple select');
             this.closeDropdown();
         }
         // Dispatch custom change event with additional data
@@ -12449,9 +12515,9 @@ var KTSelect = /** @class */ (function (_super) {
                     .then(function () {
                     // Update options in the dropdown
                     _this._updateSearchResults(items);
-                    // Refresh the search module's option cache if search is enabled
-                    if (_this._searchModule && _this._config.enableSearch) {
-                        _this._searchModule.refreshOptionCache();
+                    // Refresh the search module to update focus and cache
+                    if (_this._searchModule) {
+                        _this._searchModule.refreshAfterSearch();
                     }
                 })
                     .catch(function (error) {
@@ -12548,19 +12614,47 @@ var KTSelect = /** @class */ (function (_super) {
      * Centralized keyboard event handler for all select modes
      */
     KTSelect.prototype._handleKeyboardEvent = function (event) {
+        // If the event target is the search input and the event was already handled (defaultPrevented),
+        // then return early to avoid duplicate processing by this broader handler.
+        if (event.target === this._searchInputElement && event.defaultPrevented) {
+            return;
+        }
         var isOpen = this._dropdownIsOpen;
         var config = this._config;
         var focusManager = this._focusManager;
         var buffer = this._typeToSearchBuffer;
-        // Ignore modifier keys
+        // If the event target is the search input, let it handle most typing keys naturally.
+        if (event.target === this._searchInputElement) {
+            // Allow navigation keys like ArrowDown, ArrowUp, Escape, Enter (for search/selection) to be handled by the logic below.
+            // For other keys (characters, space, backspace, delete), let the input field process them.
+            if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' &&
+                event.key !== 'Escape' && event.key !== 'Enter' && event.key !== 'Tab' &&
+                event.key !== 'Home' && event.key !== 'End') {
+                // If it's a character key and we are NOT type-to-searching (because search has focus)
+                // then let the input field handle it for its own value.
+                // The search module's 'input' event will handle filtering based on the input's value.
+                buffer.clear(); // Clear type-to-search buffer when typing in search field
+                return;
+            }
+            // For Enter specifically in search input, we might want to select the focused option or submit search.
+            // This is handled later in the switch.
+        }
+        // Ignore modifier keys (except for specific combinations if added later)
         if (event.altKey || event.ctrlKey || event.metaKey)
             return;
-        // Type-to-search: only for single char keys
-        if (event.key.length === 1 && !event.repeat && !event.key.match(/\s/)) {
+        // Type-to-search: only for single char keys, when search input does not have focus
+        if (event.key.length === 1 && !event.repeat && !event.key.match(/\s/) && document.activeElement !== this._searchInputElement) {
             buffer.push(event.key);
             var str = buffer.getBuffer();
-            focusManager.focusByString(str);
-            return;
+            if (isOpen) {
+                focusManager.focusByString(str);
+            }
+            else {
+                // If closed, type-to-search could potentially open and select.
+                // For now, let's assume it only works when open or opens it first.
+                // Or, we could find the matching option and set it directly without opening.
+            }
+            return; // Type-to-search handles the event
         }
         switch (event.key) {
             case 'ArrowDown':
@@ -12594,18 +12688,28 @@ var KTSelect = /** @class */ (function (_super) {
             case 'Enter':
             case ' ': // Space
                 if (isOpen) {
-                    var focused = focusManager.getFocusedOption();
-                    if (focused) {
-                        var value = focused.dataset.value;
-                        if (value) {
-                            this.toggleSelection(value);
-                            if (!config.multiple && config.closeOnSelect) {
-                                this.closeDropdown();
-                            }
+                    var focusedOptionEl = this._focusManager.getFocusedOption();
+                    if (focusedOptionEl) {
+                        var val = focusedOptionEl.dataset.value;
+                        // If single select, and the item is already selected, just close.
+                        if (val !== undefined && !this._config.multiple && this._state.isSelected(val)) {
+                            if (this._config.debug)
+                                console.log('Enter on already selected item in single-select mode. Closing.');
+                            this.closeDropdown();
+                            event.preventDefault();
+                            break;
                         }
                     }
-                    // Prevent form submit
-                    event.preventDefault();
+                    // Proceed with selection if not handled above
+                    this.selectFocusedOption();
+                    // Close dropdown if configured to do so (for new selections)
+                    if (!this._config.multiple) {
+                        // This will also be true for the case handled above, but closeDropdown is idempotent.
+                        // However, the break above prevents this from being reached for that specific case.
+                        this.closeDropdown();
+                    }
+                    event.preventDefault(); // Prevent form submission or other default actions
+                    break;
                 }
                 else {
                     this.openDropdown();
@@ -12649,6 +12753,9 @@ var KTSelect = /** @class */ (function (_super) {
         }).filter(Boolean)));
         return contentArray.join(displaySeparator);
     };
+    KTSelect.prototype.getDisplayElement = function () {
+        return this._displayElement;
+    };
     /**
      * ========================================================================
      * STATIC METHODS
@@ -14564,32 +14671,6 @@ var KTSelectTags = /** @class */ (function () {
             wrapper.insertBefore(tag, _this._valueDisplayElement);
         });
     };
-    /**
-     * Get the label/text for an option by its value
-     */
-    KTSelectTags.prototype._getOptionLabel = function (optionValue) {
-        var _a, _b;
-        // First look for an option element in the dropdown with matching value
-        var optionElements = this._select.getOptionsElement();
-        for (var _i = 0, _c = Array.from(optionElements); _i < _c.length; _i++) {
-            var option = _c[_i];
-            if (option.dataset.value === optionValue) {
-                return ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || optionValue;
-            }
-        }
-        // If not found in dropdown, look in original select element
-        var originalOptions = this._select
-            .getElement()
-            .querySelectorAll('option');
-        for (var _d = 0, _e = Array.from(originalOptions); _d < _e.length; _d++) {
-            var option = _e[_d];
-            if (option.value === optionValue) {
-                return ((_b = option.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || optionValue;
-            }
-        }
-        // If still not found, return the value itself
-        return optionValue;
-    };
     /**
      * Remove a tag and its selection
      */
@@ -15451,30 +15532,6 @@ var KTDom = {
         }
         return attributes;
     },
-    getDataAttributesByJson: function (element, prefix) {
-        if (!element) {
-            return {};
-        }
-        var rawValue = element.dataset[prefix];
-        if (!rawValue) {
-            return {};
-        }
-        var parsedValue = utils_1.default.parseDataAttribute(rawValue);
-        if (typeof parsedValue === 'string') {
-            try {
-                return JSON.parse(parsedValue);
-            }
-            catch (e) {
-                console.error("Invalid JSON format for '".concat(prefix, "': ").concat(e instanceof Error ? e.message : e, " ").concat(rawValue));
-            }
-        }
-        // If it's already an object, return as is
-        if (typeof parsedValue === 'object' && parsedValue !== null) {
-            return parsedValue;
-        }
-        // For other types (number, boolean, null), return an empty object
-        return {};
-    },
     ready: function (callback) {
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', function () {
@@ -15492,7 +15549,7 @@ exports["default"] = KTDom;
 /***/ }),
 
 /***/ 9011:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ (function(__unused_webpack_module, exports) {
 
 
 /**
@@ -15500,15 +15557,12 @@ exports["default"] = KTDom;
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.TypeToSearchBuffer = exports.EventManager = exports.FocusManager = exports.highlightTextInElementDebounced = void 0;
+exports.TypeToSearchBuffer = exports.EventManager = exports.FocusManager = void 0;
 exports.formatCurrency = formatCurrency;
 exports.filterOptions = filterOptions;
-exports.highlightTextInElement = highlightTextInElement;
 exports.debounce = debounce;
 exports.renderTemplateString = renderTemplateString;
 exports.stringToElement = stringToElement;
-// utils.ts
-var templates_1 = __webpack_require__(9069);
 /**
  * Format a number as a currency string
  */
@@ -15522,148 +15576,50 @@ function formatCurrency(value) {
  * Filter options based on a search query
  */
 function filterOptions(options, query, config, dropdownElement, onVisibleCount) {
-    var _a;
     var visibleOptionsCount = 0;
-    // Clear existing "no results" messages
-    var noResultsElement = dropdownElement.querySelector('[data-kt-select-no-results]');
-    if (noResultsElement) {
-        noResultsElement.remove();
-    }
-    // For empty query, ensure highlights are cleared from all options
+    // For empty query, make all options visible
+    // The KTSelectSearch class is now responsible for restoring original content before calling this.
     if (!query || query.trim() === '') {
-        // Just make all options visible without highlighting
         for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
             var option = options_1[_i];
-            // Make option visible by removing hidden classes and inline styles
             option.classList.remove('hidden');
-            // Clean up any inline display styles from legacy code
-            if (option.hasAttribute('style') &&
-                option.getAttribute('style').includes('display:')) {
-                var styleAttr = option.getAttribute('style');
-                if (styleAttr.trim() === 'display: none;' ||
-                    styleAttr.trim() === 'display: block;') {
-                    option.removeAttribute('style');
-                }
-                else {
-                    option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
-                }
-            }
-            // Clear highlights by restoring original text content
-            if (option.dataset && option.dataset.originalText) {
-                option.innerHTML = option.dataset.originalText;
-            }
-            else {
-                option.innerHTML = option.textContent || '';
-            }
-            // Remove the cache if present
-            if (option.dataset && option.dataset.originalText) {
-                delete option.dataset.originalText;
+            // Remove inline display style if it was used to hide
+            if (option.style.display === 'none') {
+                option.style.display = '';
             }
+            // At this point, option.innerHTML should be its original.
             visibleOptionsCount++;
         }
-        // Call the callback with the visible count if provided
         if (onVisibleCount) {
             onVisibleCount(visibleOptionsCount);
         }
         return visibleOptionsCount;
     }
-    // Filter options based on query
-    for (var _b = 0, options_2 = options; _b < options_2.length; _b++) {
-        var option = options_2[_b];
-        var optionText = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
-        var isMatch = optionText.includes(query.toLowerCase());
-        // Check if option is disabled
-        var isDisabled = option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true';
-        if (isMatch || query.trim() === '') {
-            // Show option by removing the hidden class and any display inline styles
+    var queryLower = query.toLowerCase();
+    for (var _a = 0, options_2 = options; _a < options_2.length; _a++) {
+        var option = options_2[_a];
+        // Use data-text for matching if available, otherwise fall back to textContent
+        var optionText = (option.dataset.text || option.textContent || '').toLowerCase();
+        var isMatch = optionText.includes(queryLower);
+        if (isMatch) {
             option.classList.remove('hidden');
-            // Remove any inline display styles that might be present
-            if (option.hasAttribute('style') &&
-                option.getAttribute('style').includes('display:')) {
-                var styleAttr = option.getAttribute('style');
-                if (styleAttr.trim() === 'display: none;' ||
-                    styleAttr.trim() === 'display: block;') {
-                    option.removeAttribute('style');
-                }
-                else {
-                    option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
-                }
-            }
+            if (option.style.display === 'none')
+                option.style.display = ''; // Ensure visible
             visibleOptionsCount++;
-            if (config.searchHighlight && query.trim() !== '') {
-                if (option.dataset && !option.dataset.originalText) {
-                    option.dataset.originalText = option.innerHTML;
-                }
-                (0, exports.highlightTextInElementDebounced)(option, query, config);
-            }
         }
         else {
-            // Hide option using hidden class
             option.classList.add('hidden');
-            // Remove any inline display styles
-            if (option.hasAttribute('style') &&
-                option.getAttribute('style').includes('display:')) {
-                var styleAttr = option.getAttribute('style');
-                if (styleAttr.trim() === 'display: none;' ||
-                    styleAttr.trim() === 'display: block;') {
-                    option.removeAttribute('style');
-                }
-                else {
-                    option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
-                }
-            }
-        }
-        // Early exit if maxItems limit is reached
-        if (config.searchMaxItems && visibleOptionsCount >= config.searchMaxItems) {
-            break;
         }
+        // Early exit if maxItems limit is reached (optional)
+        // if (config.searchMaxItems && visibleOptionsCount >= config.searchMaxItems) {
+        // 	break;
+        // }
     }
-    // Call the callback with the visible count if provided
     if (onVisibleCount) {
         onVisibleCount(visibleOptionsCount);
     }
     return visibleOptionsCount;
 }
-/**
- * Highlight text only within a specific element, preserving other elements
- */
-function highlightTextInElement(element, query, config) {
-    if (!element || !query || query.trim() === '')
-        return;
-    var queryLower = query.toLowerCase();
-    var text = element.textContent || '';
-    if (!text)
-        return;
-    // Escape regex special characters in query
-    var escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    var regex = new RegExp(escapedQuery, 'gi');
-    // Replace all matches with the highlight template
-    var lastIndex = 0;
-    var result = '';
-    var match;
-    var matches = [];
-    while ((match = regex.exec(text)) !== null) {
-        matches.push({ start: match.index, end: regex.lastIndex });
-    }
-    if (matches.length === 0) {
-        element.innerHTML = text;
-        return;
-    }
-    for (var i = 0; i < matches.length; i++) {
-        var _a = matches[i], start = _a.start, end = _a.end;
-        // Add text before match
-        result += text.slice(lastIndex, start);
-        // Add highlighted match using template
-        var highlighted = templates_1.defaultTemplates.highlight(config, text.slice(start, end)).outerHTML;
-        result += highlighted;
-        lastIndex = end;
-    }
-    // Add remaining text
-    result += text.slice(lastIndex);
-    element.innerHTML = result;
-}
-// Debounced version for performance
-exports.highlightTextInElementDebounced = debounce(highlightTextInElement, 100);
 /**
  * Focus manager for keyboard navigation
  * Consolidates redundant focus management logic into shared functions
@@ -15765,6 +15721,7 @@ var FocusManager = /** @class */ (function () {
             if (!option.classList.contains('disabled') &&
                 option.getAttribute('aria-disabled') !== 'true' &&
                 (((_b = option.textContent) === null || _b === void 0 ? void 0 : _b.toLowerCase().startsWith(lowerStr)) || ((_c = option.dataset.value) === null || _c === void 0 ? void 0 : _c.toLowerCase().startsWith(lowerStr)))) {
+                this.resetFocus();
                 this._focusedOptionIndex = idx;
                 this.applyFocus(option);
                 this.scrollIntoView(option);
@@ -15823,12 +15780,14 @@ var FocusManager = /** @class */ (function () {
     FocusManager.prototype.applyFocus = function (option) {
         if (!option)
             return;
+        // Ensure it's not disabled
         if (option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true') {
             return;
         }
-        this.resetFocus();
+        // DO NOT CALL resetFocus() here. Caller's responsibility.
         option.classList.add(this._focusClass);
         option.classList.add(this._hoverClass);
+        // _triggerFocusChange needs _focusedOptionIndex to be set by the caller before this.
         this._triggerFocusChange();
     };
     /**
@@ -15841,12 +15800,7 @@ var FocusManager = /** @class */ (function () {
         focusedElements.forEach(function (element) {
             element.classList.remove(_this._focusClass, _this._hoverClass);
         });
-        // Reset index if visible options have changed
-        var visibleOptions = this.getVisibleOptions();
-        if (this._focusedOptionIndex !== null &&
-            this._focusedOptionIndex >= visibleOptions.length) {
-            this._focusedOptionIndex = null;
-        }
+        this._focusedOptionIndex = null; // Always reset the index
     };
     /**
      * Ensure the focused option is visible in the scrollable container
@@ -15875,10 +15829,14 @@ var FocusManager = /** @class */ (function () {
         var options = this.getVisibleOptions();
         var index = options.findIndex(function (option) { return option.dataset.value === value; });
         if (index >= 0) {
-            this._focusedOptionIndex = index;
-            this.applyFocus(options[index]);
-            this.scrollIntoView(options[index]);
-            return true;
+            var optionToFocus = options[index];
+            if (!optionToFocus.classList.contains('disabled') && optionToFocus.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = index;
+                this.applyFocus(optionToFocus);
+                this.scrollIntoView(optionToFocus);
+                return true;
+            }
         }
         return false;
     };
@@ -16095,20 +16053,19 @@ var utils_1 = __webpack_require__(9011);
  * Users can override any template by providing a matching key in the config.templates object.
  */
 exports.coreTemplateStrings = {
-    dropdown: "<div data-kt-select-dropdown class=\"kt-select-dropdown hidden {{class}}\" style=\"z-index: {{zindex}};\">{{content}}</div>",
-    options: "<ul role=\"listbox\" aria-label=\"{{label}}\" class=\"kt-select-options {{class}}\" data-kt-select-options=\"true\">{{content}}</ul>",
-    error: "<li class=\"kt-select-error\" role=\"alert\">{{content}}</li>",
-    highlight: "<span data-kt-select-highlight class=\"kt-select-highlight highlighted {{class}}\">{{text}}</span>",
+    dropdown: "<div data-kt-select-dropdown class=\"kt-select-dropdown hidden {{class}}\" style=\"z-index: {{zindex}};\"></div>",
+    options: "<ul role=\"listbox\" aria-label=\"{{label}}\" class=\"kt-select-options {{class}}\" data-kt-select-options=\"true\"></ul>",
+    error: "<li class=\"kt-select-error\" role=\"alert\"></li>",
     wrapper: "<div data-kt-select-wrapper class=\"kt-select-wrapper {{class}}\"></div>",
-    combobox: "\n\t\t<div data-kt-select-combobox data-kt-select-display class=\"kt-select-combobox {{class}}\">\n\t\t\t<input class=\"kt-input kt-select-combobox-input\" data-kt-select-search=\"true\" data-kt-select-value=\"true\" type=\"text\" placeholder=\"{{placeholder}}\" role=\"searchbox\" aria-label=\"{{label}}\" {{disabled}} />\n\t\t\t<button type=\"button\" data-kt-select-clear-button=\"true\" class=\"kt-select-combobox-clear-btn\" aria-label=\"Clear selection\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n\t\t\t\t\t<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</div>\n\t",
-    display: "\n\t\t<div data-kt-select-display class=\"kt-select-display {{class}}\" tabindex=\"{{tabindex}}\" role=\"button\" data-selected=\"0\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-label=\"{{label}}\" {{disabled}}>\n\t\t\t<div data-kt-select-value=\"true\" class=\"kt-select-label\">{{content}}</div>\n\t\t</div>\n\t",
-    placeholder: "<div data-kt-select-placeholder class=\"kt-select-placeholder {{class}}\">{{content}}</div>",
-    option: "<li data-kt-select-option data-value=\"{{value}}\" data-text=\"{{text}}\" class=\"kt-select-option {{class}}\" role=\"option\" {{selected}} {{disabled}}>{{content}}</li>",
-    search: "<div data-kt-select-search class=\"kt-select-search {{class}}\"><input type=\"text\" data-kt-select-search=\"true\" placeholder=\"{{searchPlaceholder}}\" class=\"kt-input kt-select-search-input\" role=\"searchbox\" aria-label=\"{{searchPlaceholder}}\"/></div>",
-    empty: "<li data-kt-select-empty class=\"kt-select-no-result {{class}}\" role=\"status\">{{content}}</li>",
-    loading: "<li class=\"kt-select-loading {{class}}\" role=\"status\" aria-live=\"polite\">{{content}}</li>",
-    tag: "<div data-kt-select-tag=\"true\" class=\"kt-select-tag {{class}}\">\n\t\t\t{{content}}\n\t\t</div>",
-    loadMore: "<li class=\"kt-select-load-more {{class}}\" data-kt-select-load-more=\"true\">{{content}}</li>",
+    combobox: "\n\t\t<div data-kt-select-combobox data-kt-select-display class=\"kt-select-combobox {{class}}\">\n\t\t\t<div data-kt-select-combobox-values=\"true\" class=\"kt-select-combobox-values\"></div>\n\t\t\t<input class=\"kt-input kt-select-combobox-input\" data-kt-select-search=\"true\" type=\"text\" placeholder=\"{{placeholder}}\" role=\"searchbox\" aria-label=\"{{label}}\" {{disabled}} />\n\t\t\t<button type=\"button\" data-kt-select-clear-button=\"true\" class=\"kt-select-combobox-clear-btn\" aria-label=\"Clear selection\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n\t\t\t\t\t<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</div>\n\t",
+    placeholder: "<div data-kt-select-placeholder class=\"kt-select-placeholder {{class}}\"></div>",
+    display: "\n\t\t<div data-kt-select-display class=\"kt-select-display {{class}}\" tabindex=\"{{tabindex}}\" role=\"button\" data-selected=\"0\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-label=\"{{label}}\" {{disabled}}>\n\t\t\t<div class=\"kt-select-option-text\" data-kt-text-container=\"true\">{{text}}</div>\n\t\t</div>\n\t",
+    option: "\n\t\t<li data-kt-select-option data-value=\"{{value}}\" data-text=\"{{text}}\" class=\"kt-select-option {{class}}\" role=\"option\" {{selected}} {{disabled}}>\n\t\t\t<div class=\"kt-select-option-text\" data-kt-text-container=\"true\">{{text}}</div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3.5 ms-auto hidden text-primary kt-select-option-selected:block\"><path d=\"M20 6 9 17l-5-5\"/></svg>\n\t\t</li>\n\t",
+    search: "<div data-kt-select-search class=\"kt-select-search {{class}}\"><input type=\"text\" data-kt-select-search=\"true\" placeholder=\"{{searchPlaceholder}}\" class=\"kt-input kt-input-ghost\" role=\"searchbox\" aria-label=\"{{searchPlaceholder}}\"/></div>",
+    empty: "<li data-kt-select-empty class=\"kt-select-no-result {{class}}\" role=\"status\"></li>",
+    loading: "<li class=\"kt-select-loading {{class}}\" role=\"status\" aria-live=\"polite\"></li>",
+    tag: "<div data-kt-select-tag=\"true\" class=\"kt-select-tag {{class}}\"></div>",
+    loadMore: "<li class=\"kt-select-load-more {{class}}\" data-kt-select-load-more=\"true\"></li>",
     tagRemoveButton: "<button type=\"button\" data-kt-select-remove-button class=\"kt-select-tag-remove\" aria-label=\"Remove tag\" tabindex=\"0\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"3\" y1=\"3\" x2=\"9\" y2=\"9\"/><line x1=\"9\" y1=\"3\" x2=\"3\" y2=\"9\"/></svg></button>",
 };
 /**
@@ -16147,30 +16104,31 @@ function getTemplateStrings(config) {
  * Default templates for KTSelect component
  */
 exports.defaultTemplates = {
-    /**
-     * Renders a highlighted text
-     */
-    highlight: function (config, text) {
-        var template = getTemplateStrings(config).highlight;
-        var html = template.replace('{{text}}', text).replace('{{class}}', config.highlightClass || '');
-        return stringToElement(html);
-    },
     /**
      * Renders the dropdown content
      */
     dropdown: function (config) {
+        var _a;
         var template = getTemplateStrings(config).dropdown;
-        var content = config.content || '';
+        // If a custom dropdownTemplate is provided, it's responsible for its own content.
+        // Otherwise, the base template is used, and content is appended later.
         if (config.dropdownTemplate) {
-            content = (0, utils_1.renderTemplateString)(config.dropdownTemplate, {
+            var renderedCustomTemplate = (0, utils_1.renderTemplateString)(config.dropdownTemplate, {
                 zindex: config.zindex ? String(config.zindex) : '',
-                content: config.content || '',
+                // content: config.content || '', // No longer pass content to custom template directly here
                 class: config.dropdownClass || '',
             });
+            // The custom template IS the dropdown element
+            var customDropdownEl = stringToElement(renderedCustomTemplate);
+            if (config.zindex)
+                customDropdownEl.style.zIndex = String(config.zindex);
+            if (config.dropdownClass)
+                (_a = customDropdownEl.classList).add.apply(_a, config.dropdownClass.split(' '));
+            return customDropdownEl;
         }
         var html = template
             .replace('{{zindex}}', config.zindex ? String(config.zindex) : '')
-            .replace('{{content}}', content)
+            // .replace('{{content}}', '') // Content is no longer part of the base template string
             .replace('{{class}}', config.dropdownClass || '');
         return stringToElement(html);
     },
@@ -16182,7 +16140,7 @@ exports.defaultTemplates = {
         var html = template
             .replace('{{label}}', config.label || 'Options')
             .replace('{{height}}', config.height ? String(config.height) : '250')
-            .replace('{{options}}', config.options || '')
+            // .replace('{{options}}', '') // Options are now appended dynamically
             .replace('{{class}}', config.optionsClass || '');
         return stringToElement(html);
     },
@@ -16190,24 +16148,31 @@ exports.defaultTemplates = {
      * Renders the load more button for pagination
      */
     loadMore: function (config) {
-        var html = getTemplateStrings(config).loadMore.replace('{{loadMoreText}}', config.loadMoreText || 'Load more...');
-        return stringToElement(html);
+        var html = getTemplateStrings(config)
+            .loadMore // .replace('{{loadMoreText}}', config.loadMoreText || 'Load more...') // Content is no longer in template string
+            .replace('{{class}}', config.loadMoreClass || '');
+        var element = stringToElement(html);
+        element.textContent = config.loadMoreText || 'Load more...';
+        return element;
     },
     /**
      * Renders an error message in the dropdown
      */
     error: function (config) {
+        // Changed return type to HTMLElement
         var template = getTemplateStrings(config).error;
-        return template
-            .replace('{{errorMessage}}', config.errorMessage || 'An error occurred')
+        var html = template
+            // .replace('{{errorMessage}}', config.errorMessage || 'An error occurred') // Content is no longer in template string
             .replace('{{class}}', config.errorClass || '');
+        var element = stringToElement(html);
+        element.textContent = config.errorMessage || 'An error occurred';
+        return element;
     },
     /**
      * Renders the main container for the select component
      */
     wrapper: function (config) {
-        var html = getTemplateStrings(config).wrapper
-            .replace('{{class}}', config.wrapperClass || '');
+        var html = getTemplateStrings(config).wrapper.replace('{{class}}', config.wrapperClass || '');
         var element = stringToElement(html);
         element.setAttribute('data-kt-select-combobox', config.combobox ? 'true' : 'false');
         element.setAttribute('data-kt-select-tags', config.tags ? 'true' : 'false');
@@ -16217,57 +16182,66 @@ exports.defaultTemplates = {
      * Renders the display element (trigger) for the select
      */
     display: function (config) {
-        if (config.combobox) {
-            var html_1 = getTemplateStrings(config)
-                .combobox.replace(/{{placeholder}}/g, config.placeholder || 'Select...')
-                .replace(/{{label}}/g, config.label || config.placeholder || 'Select...')
-                .replace('{{disabled}}', config.disabled ? 'disabled' : '')
-                .replace('{{class}}', config.displayClass || '');
-            return stringToElement(html_1);
-        }
-        var content = config.label || config.placeholder || 'Select...';
-        var html = getTemplateStrings(config).display
-            .replace('{{tabindex}}', config.disabled ? '-1' : '0')
+        var html = getTemplateStrings(config)
+            .display.replace('{{tabindex}}', config.disabled ? '-1' : '0')
             .replace('{{label}}', config.label || config.placeholder || 'Select...')
             .replace('{{disabled}}', config.disabled ? 'aria-disabled="true"' : '')
             .replace('{{placeholder}}', config.placeholder || 'Select...')
-            .replace('{{class}}', config.displayClass || '')
-            .replace('{{content}}', content);
-        return stringToElement(html);
+            .replace('{{class}}', config.displayClass || '');
+        var element = stringToElement(html);
+        // Add data-multiple attribute if in multiple select mode
+        if (config.multiple) {
+            element.setAttribute('data-multiple', 'true');
+        }
+        return element;
     },
     /**
      * Renders a single option
      */
     option: function (option, config) {
+        var _a, _b;
         var isHtmlOption = option instanceof HTMLOptionElement;
-        var value = isHtmlOption ? option.value : option.id;
-        var text = isHtmlOption ? option.text : option.title;
-        var disabled = isHtmlOption
-            ? option.disabled
-            : option.disabled === true;
-        var selected = isHtmlOption
-            ? option.selected
-            : !!option.selected;
-        var content = text;
+        var optionData;
+        if (isHtmlOption) {
+            // If it's a plain HTMLOptionElement, construct data similarly to how KTSelectOption would
+            // This branch might be less common if KTSelectOption instances are always used for rendering.
+            var el = option;
+            var textContent = el.textContent || '';
+            optionData = __assign({ value: el.value, text: textContent, selected: el.selected, disabled: el.disabled, content: textContent }, (((_a = config.optionsConfig) === null || _a === void 0 ? void 0 : _a[el.value]) || {}));
+        }
+        else {
+            // If it's a KTSelectOption class instance (from './option')
+            // which should have the getOptionDataForTemplate method.
+            optionData = option.getOptionDataForTemplate();
+        }
+        var content = optionData.text; // Default content to option's text
         if (config.optionTemplate) {
-            // Use the user template to render the content, but only for {{content}}
-            content = (0, utils_1.renderTemplateString)(config.optionTemplate, {
-                value: value,
-                text: text,
-                class: config.optionClass || '',
-                selected: selected ? 'aria-selected="true"' : 'aria-selected="false"',
-                disabled: disabled ? 'aria-disabled="true"' : '',
-                content: text,
-            });
+            // Use the user-provided template string, rendering with the full optionData.
+            // renderTemplateString will replace {{key}} with values from optionData.
+            content = (0, utils_1.renderTemplateString)(config.optionTemplate, optionData);
         }
-        var html = getTemplateStrings(config).option
-            .replace('{{value}}', value)
-            .replace('{{text}}', text)
-            .replace('{{selected}}', selected ? 'aria-selected="true"' : 'aria-selected="false"')
-            .replace('{{disabled}}', disabled ? 'aria-disabled="true"' : '')
-            .replace('{{content}}', content)
-            .replace('{{class}}', config.optionClass || '');
-        return stringToElement(html);
+        else {
+            content = optionData.text || optionData.content; // Prefer explicit text, fallback to content
+        }
+        // Use the core option template string as the base structure.
+        var baseTemplate = getTemplateStrings(config).option;
+        var optionClasses = [config.optionClass || ''];
+        if (optionData.disabled) {
+            optionClasses.push('disabled');
+        }
+        // Populate the base template for the <li> attributes.
+        // The actual display content (text or custom HTML) will be set on the inner span later.
+        var html = (0, utils_1.renderTemplateString)(baseTemplate, __assign(__assign({}, optionData), { class: optionClasses.join(' ').trim() || '', selected: optionData.selected
+                ? 'aria-selected="true"'
+                : 'aria-selected="false"', disabled: optionData.disabled ? 'aria-disabled="true"' : '', content: content }));
+        var element = stringToElement(html);
+        // If a custom option template is provided, replace the element's innerHTML with the content.
+        if (config.optionTemplate) {
+            element.innerHTML = content;
+        }
+        // Ensure data-text attribute is set to the original, clean text for searching/filtering
+        element.setAttribute('data-text', ((_b = optionData === null || optionData === void 0 ? void 0 : optionData.text) === null || _b === void 0 ? void 0 : _b.trim()) || '');
+        return element;
     },
     /**
      * Renders the search input
@@ -16282,68 +16256,79 @@ exports.defaultTemplates = {
      * Renders the no results message
      */
     empty: function (config) {
-        var html = getTemplateStrings(config)
-            .empty.replace('{{searchNotFoundText}}', config.searchNotFoundText || 'No results found')
-            .replace('{{class}}', config.emptyClass || '');
-        return stringToElement(html);
+        var html = getTemplateStrings(config).empty.replace('{{class}}', config.emptyClass || '');
+        var element = stringToElement(html);
+        element.textContent = config.searchNotFoundText || 'No results found';
+        return element;
     },
     /**
      * Renders the loading state
      */
     loading: function (config, loadingMessage) {
-        var html = getTemplateStrings(config)
-            .loading.replace('{{loadingMessage}}', loadingMessage || 'Loading options...')
-            .replace('{{class}}', config.loadingClass || '');
-        return stringToElement(html);
+        var html = getTemplateStrings(config).loading.replace('{{class}}', config.loadingClass || '');
+        var element = stringToElement(html);
+        element.textContent = loadingMessage || 'Loading options...';
+        return element;
     },
     /**
      * Renders a tag for multi-select
      */
     tag: function (option, config) {
+        var _a;
         var template = getTemplateStrings(config).tag;
-        var content = option.title;
+        var preparedContent = option.title; // Default content is the option's title
         if (config.tagTemplate) {
-            var tagTemplate_1 = config.tagTemplate;
-            var text = option.getAttribute('data-text');
-            var value = option.getAttribute('data-value');
-            // Replace all {{varname}} in option.innerHTML with values from _config
-            Object.entries(config.optionsConfig[value] || {}).forEach(function (_a) {
-                var key = _a[0], value = _a[1];
-                if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-                    tagTemplate_1 = tagTemplate_1.replace(new RegExp("{{".concat(key, "}}"), 'g'), String(value));
+            var tagTemplateString_1 = config.tagTemplate;
+            var optionValue = option.getAttribute('data-value') || option.value;
+            // Replace all {{varname}} in option.innerHTML with values from _config.optionsConfig
+            Object.entries(((_a = config.optionsConfig) === null || _a === void 0 ? void 0 : _a[optionValue]) || {}).forEach(function (_a) {
+                var key = _a[0], val = _a[1];
+                if (typeof val === 'string' ||
+                    typeof val === 'number' ||
+                    typeof val === 'boolean') {
+                    tagTemplateString_1 = tagTemplateString_1.replace(new RegExp("{{".concat(key, "}}"), 'g'), String(val));
                 }
             });
-            content = (0, utils_1.renderTemplateString)(tagTemplate_1, {
+            // Render the custom tag template with option data
+            preparedContent = (0, utils_1.renderTemplateString)(tagTemplateString_1, {
                 title: option.title,
                 id: option.id,
-                class: config.tagClass || '',
-                content: option.innerHTML,
-                text: option.innerText,
+                class: config.tagClass || '', // This class is for content, not the main tag div
+                // content: option.innerHTML, // Avoid direct innerHTML from option due to potential XSS
+                text: option.innerText || option.textContent || '',
+                value: optionValue,
             });
         }
-        content += getTemplateStrings(config).tagRemoveButton;
+        // Append the remove button HTML string to the prepared content
+        preparedContent += getTemplateStrings(config).tagRemoveButton;
         var html = template
-            .replace('{{title}}', option.title)
-            .replace('{{id}}', option.id)
-            .replace('{{content}}', content)
-            .replace('{{class}}', config.tagClass || '');
-        return stringToElement(html);
+            // .replace('{{title}}', option.title) // Title is part of preparedContent if using custom template
+            // .replace('{{id}}', option.id)       // ID is part of preparedContent if using custom template
+            .replace('{{class}}', config.tagClass || ''); // Class for the main tag div
+        var element = stringToElement(html);
+        element.innerHTML = preparedContent; // Set the fully prepared content (text/HTML + remove button)
+        return element;
     },
     /**
      * Renders the placeholder for the select
      */
     placeholder: function (config) {
-        var html = getTemplateStrings(config)
-            .placeholder.replace('{{class}}', config.placeholderClass || '');
+        var html = getTemplateStrings(config).placeholder.replace('{{class}}', config.placeholderClass || '');
         var content = config.placeholder || 'Select...';
         if (config.placeholderTemplate) {
             content = (0, utils_1.renderTemplateString)(config.placeholderTemplate, {
                 placeholder: config.placeholder || 'Select...',
                 class: config.placeholderClass || '',
             });
+            var element = stringToElement(html);
+            element.innerHTML = content; // For templates, content can be HTML
+            return element;
+        }
+        else {
+            var element = stringToElement(html);
+            element.textContent = content; // For simple text, use textContent
+            return element;
         }
-        html = html.replace('{{content}}', content);
-        return stringToElement(html);
     },
 };
 
@@ -17494,7 +17479,6 @@ exports.DefaultConfig = {
     // Selection Behavior
     multiple: false, // Enable/disable multi-select
     maxSelections: null, // Maximum number of selections allowed in multi-select mode (null for unlimited)
-    closeOnSelect: false, // Close the dropdown after selecting an option (single-select only)
     disabled: false, // Disable the select component
     isRequired: false, // Make selection required
     // Search Functionality
@@ -17504,7 +17488,6 @@ exports.DefaultConfig = {
     searchMinLength: 0, // Minimum characters required to trigger search
     searchMaxItems: 50, // Maximum number of search results to display
     searchNotFoundText: 'No results found', // Text to display when no search results are found
-    searchHighlight: true, // Highlight matching search terms within the options
     clearSearchOnClose: true, // Clear search input when dropdown closes
     // Multi-Select Display
     selectAllText: 'Select all', // Text for the "Select All" option (if implemented)
@@ -17529,7 +17512,7 @@ var KTSelectState = /** @class */ (function () {
         this._config = this._initDefaultConfig(config);
     }
     KTSelectState.prototype._initDefaultConfig = function (config) {
-        return __assign(__assign({}, exports.DefaultConfig), config);
+        return __assign(__assign(__assign({}, exports.DefaultConfig), config), config.config);
     };
     KTSelectState.prototype.setItems = function (items, query) {
         var _this = this;