@keenthemes/ktui 1.0.11 → 1.0.12

package/dist/ktui.js

@@ -21,7 +21,7 @@ return /******/ (function() { // webpackBootstrap
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.EventManager = exports.FocusManager = exports.filterOptions = exports.KTSelectDropdown = exports.KTSelectTags = exports.KTSelectSearch = exports.KTSelectCombobox = exports.KTSelectRemote = exports.KTSelect = void 0;
+exports.TypeToSearchBuffer = exports.EventManager = exports.FocusManager = exports.filterOptions = exports.KTSelectDropdown = exports.KTSelectTags = exports.KTSelectSearch = exports.KTSelectCombobox = exports.KTSelectRemote = exports.KTSelect = void 0;
 var select_1 = __webpack_require__(8016);
 Object.defineProperty(exports, "KTSelect", ({ enumerable: true, get: function () { return select_1.KTSelect; } }));
 var remote_1 = __webpack_require__(3710);
@@ -38,6 +38,7 @@ var utils_1 = __webpack_require__(9011);
 Object.defineProperty(exports, "filterOptions", ({ enumerable: true, get: function () { return utils_1.filterOptions; } }));
 Object.defineProperty(exports, "FocusManager", ({ enumerable: true, get: function () { return utils_1.FocusManager; } }));
 Object.defineProperty(exports, "EventManager", ({ enumerable: true, get: function () { return utils_1.EventManager; } }));
+Object.defineProperty(exports, "TypeToSearchBuffer", ({ enumerable: true, get: function () { return utils_1.TypeToSearchBuffer; } }));
 
 
 /***/ }),
@@ -2452,7 +2453,7 @@ var KTComponent = /** @class */ (function () {
         if (config === void 0) { config = {}; }
         if (!this._element)
             return;
-        this._config = __assign(__assign(__assign(__assign({}, this._defaultConfig), this._getGlobalConfig()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), config);
+        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);
     };
     KTComponent.prototype.dispose = function () {
         if (!this._element)
@@ -3266,10 +3267,8 @@ var KTSelectRemote = /** @class */ (function () {
         // Get the field mapping from config with fallbacks for common field names
         var valueField = this._config.dataValueField || 'id';
         var labelField = this._config.dataFieldText || 'title';
-        var descriptionField = this._config.dataFieldDescription || 'description';
-        var iconField = this._config.dataFieldIcon || 'icon';
         if (this._config.debug)
-            console.log("Mapping fields: value=".concat(valueField, ", label=").concat(labelField, ", description=").concat(descriptionField, ", icon=").concat(iconField));
+            console.log("Mapping fields: value=".concat(valueField, ", label=").concat(labelField));
         if (this._config.debug)
             console.log('Item data:', JSON.stringify(item).substring(0, 200) + '...'); // Trimmed for readability
         // Extract values using dot notation if needed
@@ -3360,44 +3359,10 @@ var KTSelectRemote = /** @class */ (function () {
             if (this._config.debug)
                 console.log('After fallback checks, title:', title);
         }
-        // Get description - make sure we don't pass null, undefined, or "null" string values
-        var description = getValue(item, descriptionField);
-        if (description === null ||
-            description === undefined ||
-            String(description) === 'null' ||
-            String(description) === 'undefined') {
-            description = null;
-        }
-        else {
-            description = String(description);
-        }
-        if (this._config.debug)
-            console.log("Description field [".concat(descriptionField, "]:"), description);
-        // Try to get an icon - make sure we don't pass null, undefined, or "null" string values
-        var icon = getValue(item, iconField);
-        if (icon === null ||
-            icon === undefined ||
-            String(icon) === 'null' ||
-            String(icon) === 'undefined') {
-            icon = null;
-        }
-        else {
-            icon = String(icon);
-        }
-        if (this._config.debug)
-            console.log("Icon field [".concat(iconField, "]:"), icon);
-        // If ID is null, use the title as fallback
-        if (id === null || id === '') {
-            id = title;
-            if (this._config.debug)
-                console.log("Using title as fallback for ID: ".concat(id));
-        }
         // Create the option object with non-empty values
         var result = {
             id: id || title || 'id-' + Math.random().toString(36).substr(2, 9), // Ensure we always have an ID
             title: title || 'Unnamed option',
-            description: description,
-            icon: icon,
         };
         if (this._config.debug)
             console.log('Final mapped item:', JSON.stringify(result));
@@ -5702,6 +5667,11 @@ var KTSelectOption = /** @class */ (function (_super) {
         _this._init(element);
         _this._buildConfig();
         _this._globalConfig = config;
+        // 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;
         // Don't store in KTData to avoid Singleton pattern issues
         // Each option should be a unique instance
         element.instance = _this;
@@ -5711,11 +5681,23 @@ var KTSelectOption = /** @class */ (function (_super) {
         return this._element;
     };
     KTSelectOption.prototype.render = function () {
+        var _this = this;
         var optionElement = this.getHTMLOptionElement();
-        // Use the global config if available, or create a minimal valid config
-        var config = this._globalConfig || { height: 250 };
-        // Create a new option element every time
-        return templates_1.defaultTemplates.option(optionElement, config);
+        // 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;
     };
     return KTSelectOption;
 }(component_1.default));
@@ -6538,6 +6520,8 @@ var utils_1 = __webpack_require__(9011);
  */
 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)
@@ -6547,17 +6531,36 @@ var KTSelectCombobox = /** @class */ (function () {
             displayElement.tagName === 'INPUT'
                 ? displayElement
                 : displayElement.querySelector('input[data-kt-select-search]');
-        // Find the clear button
-        this._clearButtonElement =
-            displayElement.tagName === 'DIV'
-                ? displayElement.querySelector('[data-kt-select-clear-button]')
-                : null;
+        // 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
-        this._boundKeyNavHandler = this._handleComboboxKeyNav.bind(this);
         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 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');
     }
@@ -6569,8 +6572,6 @@ var KTSelectCombobox = /** @class */ (function () {
         this._removeEventListeners();
         // Add input event handler to filter options as user types
         this._searchInputElement.addEventListener('input', this._boundInputHandler);
-        // Add keyboard navigation for the combobox
-        this._searchInputElement.addEventListener('keydown', this._boundKeyNavHandler);
         // Add clear button click event listener
         if (this._clearButtonElement) {
             this._clearButtonElement.addEventListener('click', this._boundClearHandler);
@@ -6584,7 +6585,6 @@ var KTSelectCombobox = /** @class */ (function () {
     KTSelectCombobox.prototype._removeEventListeners = function () {
         if (this._searchInputElement) {
             this._searchInputElement.removeEventListener('input', this._boundInputHandler);
-            this._searchInputElement.removeEventListener('keydown', this._boundKeyNavHandler);
         }
         if (this._clearButtonElement) {
             this._clearButtonElement.removeEventListener('click', this._boundClearHandler);
@@ -6599,7 +6599,7 @@ var KTSelectCombobox = /** @class */ (function () {
         if (this._config.debug)
             console.log('Combobox input event, query:', query);
         // Toggle clear button visibility based on input value
-        this._toggleClearButtonVisibility(query);
+        // this._toggleClearButtonVisibility(query);
         // If dropdown isn't open, open it when user starts typing
         if (!this._select._dropdownIsOpen) {
             this._select.openDropdown();
@@ -6616,12 +6616,16 @@ var KTSelectCombobox = /** @class */ (function () {
         // Clear the input
         this._searchInputElement.value = '';
         // Hide the clear button
-        this._toggleClearButtonVisibility('');
+        // 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)
+        if (this._valuesContainerElement) {
+            this._valuesContainerElement.innerHTML = '';
+        }
         // Focus on the input
         this._searchInputElement.focus();
     };
@@ -6642,115 +6646,11 @@ var KTSelectCombobox = /** @class */ (function () {
      * Filter options for combobox based on input query
      */
     KTSelectCombobox.prototype._filterOptionsForCombobox = function (query) {
-        // Access the private method through type assertion
-        this._select._filterOptionsForCombobox(query);
-    };
-    /**
-     * Handle keyboard navigation in combobox mode
-     */
-    KTSelectCombobox.prototype._handleComboboxKeyNav = function (event) {
-        if (this._config.debug)
-            console.log('Combobox keydown event:', event.key);
-        // Prevent event propagation to stop bubbling to other handlers
-        event.stopPropagation();
-        // Handle clear with Escape when dropdown is closed
-        if (event.key === 'Escape' &&
-            !this._select._dropdownIsOpen &&
-            this._searchInputElement.value !== '') {
-            event.preventDefault();
-            this._searchInputElement.value = '';
-            this._toggleClearButtonVisibility('');
-            this._select.clearSelection();
-            return;
-        }
-        // Handle dropdown visibility with special keys
-        if (!this._select._dropdownIsOpen &&
-            (event.key === 'ArrowDown' ||
-                event.key === 'ArrowUp' ||
-                event.key === 'Enter')) {
-            if (this._config.debug)
-                console.log('Opening dropdown from keyboard in combobox');
-            this._select.openDropdown();
-            event.preventDefault();
-            // If it's arrow keys, also move focus
-            if (event.key === 'ArrowDown') {
-                this._select._focusNextOption();
-            }
-            else if (event.key === 'ArrowUp') {
-                this._select._focusPreviousOption();
-            }
-            return;
-        }
-        // Use the shared keyboard navigation handler
-        (0, utils_1.handleDropdownKeyNavigation)(event, this._select, {
-            multiple: this._config.multiple,
-            closeOnSelect: this._config.closeOnSelect,
-        });
-    };
-    /**
-     * Update the combobox input value when an option is selected
-     */
-    KTSelectCombobox.prototype.updateSelectedValue = function (selectedText) {
-        if (this._searchInputElement) {
-            // Extract just the text content if it contains HTML
-            var cleanText = selectedText;
-            // If the text might contain HTML (when description is present)
-            if (selectedText.includes('<') || selectedText.includes('>')) {
-                // Create a temporary element to extract just the text
-                var tempDiv = document.createElement('div');
-                tempDiv.innerHTML = selectedText;
-                // Find and use only the option-title text if available
-                var titleElement = tempDiv.querySelector('[data-kt-option-title]');
-                if (titleElement) {
-                    cleanText = titleElement.textContent || selectedText;
-                }
-                else {
-                    // Fallback to all text content if option-title not found
-                    cleanText = tempDiv.textContent || selectedText;
-                }
-            }
-            // Set the input value directly for immediate feedback
-            this._searchInputElement.value = cleanText;
-            // Show the clear button if there's a value
-            this._toggleClearButtonVisibility(cleanText);
-            // Trigger an input event to ensure any input-based listeners are notified
-            var inputEvent = new Event('input', { bubbles: true });
-            this._searchInputElement.dispatchEvent(inputEvent);
-            if (this._config.debug)
-                console.log('Combobox value updated to:', cleanText);
-        }
-    };
-    /**
-     * Reset the input value to match the current selection
-     * This can be called to sync the input with the current state
-     */
-    KTSelectCombobox.prototype.resetInputValueToSelection = function () {
-        var _a, _b;
-        var selectedOptions = this._select.getSelectedOptions();
-        if (selectedOptions.length > 0) {
-            var selectedOption = Array.from(this._select.getOptionsElement()).find(function (opt) { return opt.dataset.value === selectedOptions[0]; });
-            if (selectedOption) {
-                // Find the option-title element to get just the title text
-                var titleElement = selectedOption.querySelector('[data-kt-option-title]');
-                var selectedText = '';
-                if (titleElement) {
-                    // If it has a structured content with a title element
-                    selectedText = ((_a = titleElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-                }
-                else {
-                    // Fallback to the whole text content
-                    selectedText = ((_b = selectedOption.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-                }
-                this.updateSelectedValue(selectedText);
-            }
-        }
-        else {
-            // No selection, clear the input
-            if (this._searchInputElement) {
-                this._searchInputElement.value = '';
-                this._toggleClearButtonVisibility('');
-            }
-        }
+        // 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);
     };
     /**
      * Destroy the combobox component and clean up event listeners
@@ -7169,6 +7069,22 @@ var stepper_1 = __webpack_require__(770);
 Object.defineProperty(exports, "KTStepper", ({ enumerable: true, get: function () { return stepper_1.KTStepper; } }));
 
 
+/***/ }),
+
+/***/ 6265:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTToast = void 0;
+var toast_1 = __webpack_require__(8834);
+Object.defineProperty(exports, "KTToast", ({ enumerable: true, get: function () { return toast_1.KTToast; } }));
+
+
 /***/ }),
 
 /***/ 6292:
@@ -7627,6 +7543,7 @@ var KTDataTable = /** @class */ (function (_super) {
         _this._originalTdClasses = []; // Store original td classes as a 2D array [row][col]
         _this._originalThClasses = []; // Store original th classes
         _this._data = [];
+        _this._isFetching = false;
         if (data_1.default.has(element, _this._name))
             return _this;
         _this._defaultConfig = _this._initDefaultConfig(config);
@@ -7930,11 +7847,21 @@ var KTDataTable = /** @class */ (function (_super) {
     KTDataTable.prototype._updateData = function () {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
-                this._showSpinner(); // Show spinner before fetching data
-                // Fetch data from the DOM and initialize the checkbox plugin
-                return [2 /*return*/, typeof this._config.apiEndpoint === 'undefined'
-                        ? this._fetchDataFromLocal().then(this._finalize.bind(this))
-                        : this._fetchDataFromServer().then(this._finalize.bind(this))];
+                if (this._isFetching)
+                    return [2 /*return*/]; // Prevent duplicate fetches
+                this._isFetching = true;
+                try {
+                    this._showSpinner(); // Show spinner before fetching data
+                    // Fetch data from the DOM and initialize the checkbox plugin
+                    return [2 /*return*/, typeof this._config.apiEndpoint === 'undefined'
+                            ? this._fetchDataFromLocal().then(this._finalize.bind(this))
+                            : this._fetchDataFromServer().then(this._finalize.bind(this))];
+                }
+                finally {
+                    this._isFetching = false;
+                }
+                // removed by dead control flow
+{}
             });
         });
     };
@@ -8374,7 +8301,13 @@ var KTDataTable = /** @class */ (function (_super) {
                         td.className = _this._originalTdClasses[rowIndex][colIndex];
                     }
                     if (typeof columnDef.render === 'function') {
-                        td.innerHTML = columnDef.render.call(_this, item[key], item, _this);
+                        var result = columnDef.render.call(_this, item[key], item, _this);
+                        if (result instanceof HTMLElement || result instanceof DocumentFragment) {
+                            td.appendChild(result);
+                        }
+                        else if (typeof result === 'string') {
+                            td.innerHTML = result;
+                        }
                     }
                     else {
                         td.textContent = item[key];
@@ -9317,8 +9250,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
     KTSelectDropdown.prototype._setupEventListeners = function () {
         // Toggle click
         this._eventManager.addListener(this._toggleElement, 'click', this._handleToggleClick.bind(this));
-        // Keyboard navigation
-        this._eventManager.addListener(this._element, 'keydown', this._handleKeyDown.bind(this));
         // Close on outside click
         this._eventManager.addListener(document, 'click', this._handleOutsideClick.bind(this));
     };
@@ -9330,47 +9261,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
         event.stopPropagation();
         this.toggle();
     };
-    /**
-     * Handle keyboard events
-     */
-    KTSelectDropdown.prototype._handleKeyDown = function (event) {
-        if (!this._isOpen)
-            return;
-        switch (event.key) {
-            case 'Escape':
-                event.preventDefault();
-                this.close();
-                this._toggleElement.focus();
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                this._focusManager.focusNext();
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this._focusManager.focusPrevious();
-                break;
-            case 'Home':
-                event.preventDefault();
-                // Focus first visible option
-                var firstOption = this._focusManager.getVisibleOptions()[0];
-                if (firstOption) {
-                    this._focusManager.applyFocus(firstOption);
-                    this._focusManager.scrollIntoView(firstOption);
-                }
-                break;
-            case 'End':
-                event.preventDefault();
-                // Focus last visible option
-                var visibleOptions = this._focusManager.getVisibleOptions();
-                var lastOption = visibleOptions[visibleOptions.length - 1];
-                if (lastOption) {
-                    this._focusManager.applyFocus(lastOption);
-                    this._focusManager.scrollIntoView(lastOption);
-                }
-                break;
-        }
-    };
     /**
      * Handle clicks outside the dropdown
      */
@@ -9486,6 +9376,11 @@ var KTSelectDropdown = /** @class */ (function (_super) {
      * 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) {
@@ -9505,6 +9400,11 @@ var KTSelectDropdown = /** @class */ (function (_super) {
      */
     KTSelectDropdown.prototype.open = function () {
         var _this = this;
+        if (this._config.disabled) {
+            if (this._config.debug)
+                console.log('KTSelectDropdown.open: select is disabled, not opening');
+            return;
+        }
         if (this._isOpen || this._isTransitioning)
             return;
         // Fire before show event
@@ -9554,12 +9454,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
                 if (searchInput) {
                     searchInput.focus();
                 }
-                else {
-                    _this._focusFirstOption();
-                }
-            }
-            else {
-                _this._focusFirstOption();
             }
             // Fire after show event
             var afterShowEvent = new CustomEvent('kt.select.dropdown.shown', {
@@ -10003,7 +9897,6 @@ var KTSelectSearch = /** @class */ (function () {
         this._searchInput = select.getSearchInput();
         this._eventManager = new utils_1.EventManager();
         this._focusManager = new utils_1.FocusManager(this._select.getDropdownElement(), '[data-kt-select-option]', select.getConfig());
-        this._boundKeyNavHandler = this._handleKeyboardNavigation.bind(this);
         this.handleSearchInput = this._handleSearchInput.bind(this);
         this._config = select.getConfig();
         this._cacheOriginalOptionContents();
@@ -10043,21 +9936,13 @@ var KTSelectSearch = /** @class */ (function () {
                         _this.refreshOptionCache();
                     });
                 }
-                // Add keyboard navigation for search results
-                // This is stopping event propagation to prevent conflicts
-                this._eventManager.addListener(this._searchInput, 'keydown', this._boundKeyNavHandler);
                 // Listen for dropdown close to reset options if search is empty
                 this._select.getElement().addEventListener('dropdown.close', function () {
                     _this._focusManager.resetFocus();
-                    // Always clear highlights when dropdown closes
                     _this.clearSearchHighlights();
-                    if (!_this._searchInput.value) {
-                        _this._resetAllOptions();
-                    }
-                    // Clear the search input when dropdown closes if configured
-                    if (_this._select.getConfig().clearSearchOnClose) {
-                        _this._searchInput.value = '';
-                    }
+                    _this._searchInput.value = '';
+                    _this._resetAllOptions();
+                    _this._clearNoResultsMessage();
                 });
                 // Clear highlights when an option is selected
                 this._select.getElement().addEventListener('change', function () {
@@ -10097,33 +9982,6 @@ var KTSelectSearch = /** @class */ (function () {
             this._eventManager.removeAllListeners(this._searchInput);
         }
     };
-    /**
-     * Handle keyboard navigation for search results
-     */
-    KTSelectSearch.prototype._handleKeyboardNavigation = function (event) {
-        var _this = this;
-        // Stop propagation to prevent multiple handlers from firing
-        event.stopPropagation();
-        if (this._config.debug)
-            console.log('Search module keydown:', event.key);
-        var visibleOptions = this._focusManager.getVisibleOptions();
-        if (visibleOptions.length === 0)
-            return;
-        // Use the shared keyboard navigation handler with custom callbacks
-        (0, utils_1.handleDropdownKeyNavigation)(event, this._select, {
-            multiple: this._select.getConfig().multiple,
-            closeOnSelect: this._select.getConfig().closeOnSelect,
-        }, {
-            onArrowDown: function () { return _this._focusManager.focusNext(); },
-            onArrowUp: function () { return _this._focusManager.focusPrevious(); },
-            onEnter: function () { return _this._selectFocusedOption(); },
-            onClose: function () {
-                if (event.key === 'Escape') {
-                    _this.clearSearchHighlights();
-                }
-            },
-        });
-    };
     /**
      * Select the currently focused option
      */
@@ -10253,9 +10111,9 @@ var KTSelectSearch = /** @class */ (function () {
     KTSelectSearch.prototype._showNoResultsMessage = function () {
         this._clearNoResultsMessage();
         var config = this._select.getConfig();
-        this._noResultsElement = templates_1.defaultTemplates.noResults(config);
+        this._noResultsElement = templates_1.defaultTemplates.empty(config);
         var dropdownElement = this._select.getDropdownElement();
-        var optionsContainer = dropdownElement.querySelector('[data-kt-select-options-container]');
+        var optionsContainer = dropdownElement.querySelector('[data-kt-select-options]');
         if (optionsContainer) {
             optionsContainer.appendChild(this._noResultsElement);
         }
@@ -10291,6 +10149,12 @@ var KTSelectSearch = /** @class */ (function () {
      */
     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;
+            }
+        });
     };
     /**
      * This ensures that search highlighting works correctly with new options
@@ -11424,7 +11288,6 @@ var combobox_1 = __webpack_require__(5539);
 var dropdown_1 = __webpack_require__(7125);
 var utils_1 = __webpack_require__(9011);
 var tags_1 = __webpack_require__(8797);
-var types_1 = __webpack_require__(8135);
 var KTSelect = /** @class */ (function (_super) {
     __extends(KTSelect, _super);
     /**
@@ -11441,6 +11304,7 @@ var KTSelect = /** @class */ (function (_super) {
         _this._tagsModule = null;
         _this._dropdownModule = null;
         _this._loadMoreIndicator = null;
+        _this._typeToSearchBuffer = new utils_1.TypeToSearchBuffer();
         // Search debounce timeout
         _this._searchDebounceTimeout = null;
         // Store original options HTML for restoring after search
@@ -11525,11 +11389,6 @@ var KTSelect = /** @class */ (function (_super) {
         // Keep only the empty/placeholder option and remove the rest
         var options = Array.from(this._element.querySelectorAll('option:not([value=""])'));
         options.forEach(function (option) { return option.remove(); });
-        // Ensure we have at least an empty option
-        if (this._element.querySelectorAll('option').length === 0) {
-            var emptyOption = templates_1.defaultTemplates.emptyOption(__assign(__assign({}, this._config), { placeholder: this._config.placeholder }));
-            this._element.appendChild(emptyOption);
-        }
     };
     /**
      * Helper to show a dropdown message (error, loading, noResults)
@@ -11537,7 +11396,7 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._showDropdownMessage = function (type, message) {
         if (!this._dropdownContentElement)
             return;
-        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (!optionsContainer)
             return;
         switch (type) {
@@ -11547,9 +11406,9 @@ var KTSelect = /** @class */ (function (_super) {
             case 'loading':
                 optionsContainer.innerHTML = templates_1.defaultTemplates.loading(this._config, message || 'Loading...').outerHTML;
                 break;
-            case 'noResults':
+            case 'empty':
                 optionsContainer.innerHTML = '';
-                optionsContainer.appendChild(templates_1.defaultTemplates.noResults(this._config));
+                optionsContainer.appendChild(templates_1.defaultTemplates.empty(this._config));
                 break;
         }
     };
@@ -11568,14 +11427,6 @@ var KTSelect = /** @class */ (function (_super) {
      * @param message Error message
      */
     KTSelect.prototype._renderErrorState = function (message) {
-        // Create error option if the select is empty
-        if (this._element.querySelectorAll('option').length <= 1) {
-            var loadingOptions = this._element.querySelectorAll('option[disabled]:not([value])');
-            loadingOptions.forEach(function (option) { return option.remove(); });
-            // Use template function for error option instead of hardcoded element
-            var errorOption = templates_1.defaultTemplates.errorOption(__assign(__assign({}, this._config), { errorMessage: message }));
-            this._element.appendChild(errorOption);
-        }
         // If dropdown is already created, show error message there
         this._showDropdownMessage('error', message);
         if (!this._wrapperElement) {
@@ -11598,7 +11449,7 @@ var KTSelect = /** @class */ (function (_super) {
         // Create load more button using template
         this._loadMoreIndicator = templates_1.defaultTemplates.loadMore(this._config);
         // Add to dropdown
-        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (optionsContainer) {
             optionsContainer.appendChild(this._loadMoreIndicator);
         }
@@ -11668,42 +11519,26 @@ var KTSelect = /** @class */ (function (_super) {
      * @param newItems New items to add to the dropdown
      */
     KTSelect.prototype._updateOptionsInDropdown = function (newItems) {
-        var _this = this;
         if (!this._dropdownContentElement || !newItems.length)
             return;
-        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        var optionsContainer = this._dropdownContentElement.querySelector("[data-kt-select-options]");
         if (!optionsContainer)
             return;
         // Get the load more button
-        var loadMoreButton = optionsContainer.querySelector('[data-kt-select-load-more]');
+        var loadMoreButton = optionsContainer.querySelector("[data-kt-select-load-more]");
         // Process each new item
         newItems.forEach(function (item) {
             // Create option for the original select
-            var selectOption = templates_1.defaultTemplates.emptyOption(__assign(__assign({}, _this._config), { placeholder: item.title || 'Unnamed option' }));
+            var selectOption = document.createElement('option');
             selectOption.value = item.id || '';
-            // Add description and icon attributes if available and valid
-            if (item.description &&
-                item.description !== 'null' &&
-                item.description !== 'undefined') {
-                selectOption.setAttribute('data-kt-select-option-description', item.description);
-            }
-            if (item.icon && item.icon !== 'null' && item.icon !== 'undefined') {
-                selectOption.setAttribute('data-kt-select-option-icon', item.icon);
-            }
-            // Add the option to the original select element
-            _this._element.appendChild(selectOption);
-            // Create option element for the dropdown using the KTSelectOption class
-            // This ensures consistent option rendering
-            var ktOption = new option_1.KTSelectOption(selectOption, _this._config);
-            var renderedOption = ktOption.render();
             // Add to dropdown container
             if (loadMoreButton) {
                 // Insert before the load more button
-                optionsContainer.insertBefore(renderedOption, loadMoreButton);
+                optionsContainer.insertBefore(selectOption, loadMoreButton);
             }
             else {
                 // Append to the end
-                optionsContainer.appendChild(renderedOption);
+                optionsContainer.appendChild(selectOption);
             }
         });
         // Update options NodeList to include the new options
@@ -11725,7 +11560,7 @@ var KTSelect = /** @class */ (function (_super) {
         this._setupElementReferences();
         this._initZIndex();
         // Initialize options
-        this._initializeOptionsHtml();
+        // this._initializeOptionsHtml();
         this._preSelectOptions(this._element);
         // Apply disabled state if needed
         this._applyInitialDisabledState();
@@ -11734,11 +11569,11 @@ var KTSelect = /** @class */ (function (_super) {
             this._initializeSearchModule();
         }
         // Initialize combobox if enabled
-        if (this._config.mode === types_1.SelectMode.COMBOBOX) {
+        if (this._config.combobox) {
             this._comboboxModule = new combobox_1.KTSelectCombobox(this);
         }
         // Initialize tags if enabled
-        if (this._config.mode === types_1.SelectMode.TAGS) {
+        if (this._config.tags) {
             this._tagsModule = new tags_1.KTSelectTags(this);
         }
         // Initialize focus manager after dropdown element is created
@@ -11755,31 +11590,37 @@ var KTSelect = /** @class */ (function (_super) {
     /**
      * Initialize options HTML from data
      */
-    KTSelect.prototype._initializeOptionsHtml = function () {
-        this._generateOptionsHtml(this._element);
-    };
+    // private _initializeOptionsHtml() {
+    // 	this._generateOptionsHtml(this._element);
+    // }
     /**
      * Creates the HTML structure for the select component
      */
     KTSelect.prototype._createHtmlStructure = function () {
+        var _a;
         var _this = this;
         var options = Array.from(this._element.querySelectorAll('option'));
         // Create wrapper and display elements
-        var wrapperElement = templates_1.defaultTemplates.main(this._config);
+        var wrapperElement = templates_1.defaultTemplates.wrapper(this._config);
         var displayElement = templates_1.defaultTemplates.display(this._config);
         // Add the display element to the wrapper
         wrapperElement.appendChild(displayElement);
+        // Move classes from original select to display element
+        if (this._element.classList.length > 0) {
+            (_a = displayElement.classList).add.apply(_a, Array.from(this._element.classList));
+            this._element.className = '';
+        }
         // Create an empty dropdown first (without options) using template
-        var dropdownElement = templates_1.defaultTemplates.dropdownContent(__assign(__assign({}, this._config), { zindex: this._config.dropdownZindex }));
+        var dropdownElement = templates_1.defaultTemplates.dropdown(__assign(__assign({}, this._config), { zindex: this._config.dropdownZindex }));
         // Add search input if needed
-        var isCombobox = this._config.mode === types_1.SelectMode.COMBOBOX;
-        var hasSearch = this._config.enableSearch && !isCombobox;
-        if (hasSearch) {
+        if (this._config.enableSearch) {
             var searchElement = templates_1.defaultTemplates.search(this._config);
             dropdownElement.appendChild(searchElement);
         }
         // Create options container using template
-        var optionsContainer = templates_1.defaultTemplates.optionsContainer(this._config);
+        var optionsContainer = templates_1.defaultTemplates.options(this._config);
+        // Clear the options container
+        optionsContainer.innerHTML = '';
         // Add each option directly to the container
         options.forEach(function (optionElement) {
             // Skip empty placeholder options (only if BOTH value AND text are empty)
@@ -11810,20 +11651,17 @@ var KTSelect = /** @class */ (function (_super) {
         // Get display element
         this._displayElement = this._wrapperElement.querySelector("[data-kt-select-display]");
         // Get dropdown content element - this is critical for dropdown functionality
-        this._dropdownContentElement = this._wrapperElement.querySelector("[data-kt-select-dropdown-content]");
+        this._dropdownContentElement = this._wrapperElement.querySelector("[data-kt-select-dropdown]");
         if (!this._dropdownContentElement) {
+            console.log(this._element);
             console.error('Dropdown content element not found', this._wrapperElement);
         }
         // Get search input element - this is used for the search functionality
-        // First check if it's in dropdown, then check if it's in display (for combobox)
         this._searchInputElement = this._dropdownContentElement.querySelector("[data-kt-select-search]");
-        // If not found in dropdown, check if it's the display element itself (for combobox)
-        if (!this._searchInputElement &&
-            this._config.mode === types_1.SelectMode.COMBOBOX) {
+        // If not found in dropdown, check if it's the display element itself
+        if (!this._searchInputElement) {
             this._searchInputElement = this._displayElement;
         }
-        if (this._config.debug)
-            console.log('Search input found:', this._searchInputElement ? 'Yes' : 'No', 'Mode:', this._config.mode, 'EnableSearch:', this._config.enableSearch);
         this._valueDisplayElement = this._wrapperElement.querySelector("[data-kt-select-value]");
         this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
     };
@@ -11833,17 +11671,18 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._attachEventListeners = function () {
         // Document level event listeners
         document.addEventListener('click', this._handleDocumentClick.bind(this));
-        document.addEventListener('keydown', this._handleEscKey.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._displayElement, 'click', this._handleDropdownClick.bind(this));
-        // Only attach keyboard navigation to display element if NOT in combobox mode
-        // This prevents conflicts with the combobox module's keyboard handler
-        if (this._config.mode !== types_1.SelectMode.COMBOBOX) {
-            if (this._config.debug)
-                console.log('Attaching keyboard navigation to display element (non-combobox mode)');
-            this._eventManager.addListener(this._displayElement, 'keydown', this._handleDropdownKeyDown.bind(this));
+        // 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));
         }
     };
     /**
@@ -11913,52 +11752,12 @@ var KTSelect = /** @class */ (function (_super) {
                     label =
                         extractedLabel !== null ? String(extractedLabel) : 'Unnamed option';
                 }
-                // Get description - skip if null, undefined, or "null" string
-                var description = null;
-                if (item.description !== undefined &&
-                    item.description !== null &&
-                    String(item.description) !== 'null' &&
-                    String(item.description) !== 'undefined') {
-                    description = String(item.description);
-                }
-                else if (_this._config.dataFieldDescription) {
-                    var extractedDesc = _this._getValueByKey(item, _this._config.dataFieldDescription);
-                    if (extractedDesc !== null &&
-                        extractedDesc !== undefined &&
-                        String(extractedDesc) !== 'null' &&
-                        String(extractedDesc) !== 'undefined') {
-                        description = String(extractedDesc);
-                    }
-                }
-                // Get icon - skip if null, undefined, or "null" string
-                var icon = null;
-                if (item.icon !== undefined &&
-                    item.icon !== null &&
-                    String(item.icon) !== 'null' &&
-                    String(item.icon) !== 'undefined') {
-                    icon = String(item.icon);
-                }
-                else if (_this._config.dataFieldIcon) {
-                    var extractedIcon = _this._getValueByKey(item, _this._config.dataFieldIcon);
-                    if (extractedIcon !== null &&
-                        extractedIcon !== undefined &&
-                        String(extractedIcon) !== 'null' &&
-                        String(extractedIcon) !== 'undefined') {
-                        icon = String(extractedIcon);
-                    }
-                }
                 // Log the extracted values for debugging
                 if (_this._config.debug)
-                    console.log("Option: value=".concat(value, ", label=").concat(label, ", desc=").concat(description ? description : 'none', ", icon=").concat(icon ? icon : 'none'));
+                    console.log("Option: value=".concat(value, ", label=").concat(label));
                 // Set option attributes
                 optionElement.value = value;
                 optionElement.textContent = label || 'Unnamed option';
-                if (description) {
-                    optionElement.setAttribute('data-kt-select-option-description', description);
-                }
-                if (icon) {
-                    optionElement.setAttribute('data-kt-select-option-icon', icon);
-                }
                 if (item.selected) {
                     optionElement.setAttribute('selected', 'selected');
                 }
@@ -12028,8 +11827,14 @@ var KTSelect = /** @class */ (function (_super) {
      */
     /**
      * 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) {
@@ -12051,6 +11856,11 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype.openDropdown = function () {
         var _this = this;
+        if (this._config.disabled) {
+            if (this._config.debug)
+                console.log('openDropdown: select is disabled, not opening');
+            return;
+        }
         if (this._config.debug)
             console.log('openDropdown called, dropdownModule exists:', !!this._dropdownModule);
         if (!this._dropdownModule) {
@@ -12156,6 +11966,12 @@ var KTSelect = /** @class */ (function (_super) {
      * Select an option by value
      */
     KTSelect.prototype._selectOption = function (value) {
+        // Prevent selection if the option is disabled (in dropdown or original select)
+        if (this._isOptionDisabled(value)) {
+            if (this._config.debug)
+                console.log('_selectOption: Option is disabled, ignoring selection');
+            return;
+        }
         // Get current selection state
         var isSelected = this._state.isSelected(value);
         // Toggle selection in state
@@ -12201,105 +12017,35 @@ var KTSelect = /** @class */ (function (_super) {
      * Update selected option display value
      */
     KTSelect.prototype.updateSelectedOptionDisplay = function () {
-        var _this = this;
         var selectedOptions = this.getSelectedOptions();
-        if (this._config.renderSelected) {
+        // Tag mode: render tags if enabled
+        if (this._config.tags && this._tagsModule) {
+            this._tagsModule.updateTagsDisplay(selectedOptions);
+            return;
+        }
+        if (typeof this._config.renderSelected === 'function') {
             // Use the custom renderSelected function if provided
-            this._updateValueDisplay(this._config.renderSelected(selectedOptions));
+            this._valueDisplayElement.innerHTML = this._config.renderSelected(selectedOptions);
         }
         else {
             if (selectedOptions.length === 0) {
-                if (this._config.mode !== types_1.SelectMode.COMBOBOX) {
-                    this._updateValueDisplay(this._config.placeholder); // Use innerHTML for placeholder
-                }
-            }
-            else if (this._config.multiple) {
-                if (this._config.mode === types_1.SelectMode.TAGS) {
-                    // Use the tags module to render selected options as tags
-                    if (this._tagsModule) {
-                        this._tagsModule.updateTagsDisplay(selectedOptions);
-                    }
-                    else {
-                        // Fallback if tags module not initialized for some reason
-                        this._updateValueDisplay(selectedOptions.join(', '));
-                    }
-                }
-                else {
-                    // Render as comma-separated values
-                    var displayText = selectedOptions
-                        .map(function (option) { return _this._getOptionInnerHtml(option) || ''; })
-                        .join(', ');
-                    this._updateValueDisplay(displayText);
-                }
+                var placeholder = templates_1.defaultTemplates.placeholder(this._config);
+                this._valueDisplayElement.replaceChildren(placeholder);
             }
             else {
-                var selectedOption = selectedOptions[0];
-                if (selectedOption) {
-                    var selectedText = this._getOptionInnerHtml(selectedOption);
-                    this._updateValueDisplay(selectedText);
-                    // Update combobox input value if in combobox mode
-                    if (this._config.mode === types_1.SelectMode.COMBOBOX &&
-                        this._comboboxModule) {
-                        this._comboboxModule.updateSelectedValue(selectedText);
-                    }
-                }
-                else {
-                    this._updateValueDisplay(this._config.placeholder);
-                }
-            }
-        }
-        // Update any debug display boxes if they exist
-        this._updateDebugDisplays();
-    };
-    /**
-     * Update the value display element
-     */
-    KTSelect.prototype._updateValueDisplay = function (value) {
-        if (this._config.mode === types_1.SelectMode.COMBOBOX) {
-            // For combobox, we only update the hidden value element, not the input
-            // The combobox module will handle updating the input value
-            if (!this._comboboxModule) {
-                this._valueDisplayElement.value = value;
-            }
-        }
-        else {
-            this._valueDisplayElement.innerHTML = value;
-        }
-    };
-    /**
-     * Update debug displays if present
-     */
-    KTSelect.prototype._updateDebugDisplays = function () {
-        // Check if we're in a test environment with debug boxes
-        var selectId = this.getElement().id;
-        if (selectId) {
-            var debugElement = document.getElementById("".concat(selectId, "-value"));
-            if (debugElement) {
-                var selectedOptions = this.getSelectedOptions();
-                // Format display based on selection mode
-                if (this._config.multiple) {
-                    // For multiple selection, show comma-separated list
-                    debugElement.textContent =
-                        selectedOptions.length > 0 ? selectedOptions.join(', ') : 'None';
+                var content = '';
+                if (this._config.displayTemplate) {
+                    var selectedValues = this.getSelectedOptions();
+                    content = this.renderDisplayTemplateForSelected(selectedValues);
                 }
                 else {
-                    // For single selection, show just the one value
-                    debugElement.textContent =
-                        selectedOptions.length > 0 ? selectedOptions[0] : 'None';
+                    // If no displayTemplate is provided, use the default comma-separated list of selected options
+                    content = this.getSelectedOptionsText();
                 }
+                this._valueDisplayElement.innerHTML = content;
             }
         }
     };
-    /**
-     * Get option inner HTML content by option value
-     */
-    KTSelect.prototype._getOptionInnerHtml = function (optionValue) {
-        var option = Array.from(this._options).find(function (opt) { return opt.dataset.value === optionValue; });
-        if (this._config.mode == types_1.SelectMode.COMBOBOX) {
-            return option.textContent;
-        }
-        return option.innerHTML; // Get the entire HTML content of the option
-    };
     /**
      * Update CSS classes for selected options
      */
@@ -12344,17 +12090,6 @@ var KTSelect = /** @class */ (function (_super) {
         this._state.setSelectedOptions([]);
         this.updateSelectedOptionDisplay();
         this._updateSelectedOptionClass();
-        // For combobox, also clear the input value
-        if (this._config.mode === types_1.SelectMode.COMBOBOX) {
-            if (this._searchInputElement) {
-                this._searchInputElement.value = '';
-            }
-            // If combobox has a clear button, hide it
-            if (this._comboboxModule) {
-                // The combobox module will handle hiding the clear button
-                this._comboboxModule.resetInputValueToSelection();
-            }
-        }
         // Dispatch change event
         this._dispatchEvent('change');
         this._fireEvent('change');
@@ -12366,49 +12101,6 @@ var KTSelect = /** @class */ (function (_super) {
         var values = Array.from(options).map(function (option) { return option.value; });
         this._state.setSelectedOptions(values);
     };
-    /**
-     * ========================================================================
-     * KEYBOARD NAVIGATION
-     * ========================================================================
-     */
-    /**
-     * Handle dropdown key down events for keyboard navigation
-     * Only used for standard (non-combobox) dropdowns
-     */
-    KTSelect.prototype._handleDropdownKeyDown = function (event) {
-        // Log event for debugging
-        if (this._config.debug)
-            console.log('Standard dropdown keydown:', event.key);
-        // Use the shared handler
-        (0, utils_1.handleDropdownKeyNavigation)(event, this, {
-            multiple: this._config.multiple,
-            closeOnSelect: this._config.closeOnSelect,
-        });
-    };
-    /**
-     * Focus next option in dropdown
-     */
-    KTSelect.prototype._focusNextOption = function () {
-        return this._focusManager.focusNext();
-    };
-    /**
-     * Focus previous option in dropdown
-     */
-    KTSelect.prototype._focusPreviousOption = function () {
-        return this._focusManager.focusPrevious();
-    };
-    /**
-     * Apply hover/focus state to focused option
-     */
-    KTSelect.prototype._hoverFocusedOption = function (option) {
-        this._focusManager.applyFocus(option);
-    };
-    /**
-     * Scroll option into view when navigating
-     */
-    KTSelect.prototype._scrollOptionIntoView = function (option) {
-        this._focusManager.scrollIntoView(option);
-    };
     /**
      * Select the currently focused option
      */
@@ -12432,52 +12124,16 @@ var KTSelect = /** @class */ (function (_super) {
             if (selectedValue) {
                 this._selectOption(selectedValue);
             }
-            // For combobox mode, update input value AFTER selection to ensure consistency
-            if (this._config.mode === types_1.SelectMode.COMBOBOX && this._comboboxModule) {
-                this._comboboxModule.updateSelectedValue(selectedText);
-                // Also directly update the input value for immediate visual feedback
-                if (this._searchInputElement) {
-                    this._searchInputElement.value = selectedText;
-                }
-            }
         }
     };
     /**
      * ========================================================================
-     * COMBOBOX SPECIFIC METHODS
+     * EVENT HANDLERS
      * ========================================================================
      */
     /**
-     * Handle combobox input events
-     */
-    KTSelect.prototype._handleComboboxInput = function (event) {
-        if (this._comboboxModule) {
-            return;
-        }
-        var inputElement = event.target;
-        var query = inputElement.value.toLowerCase();
-        // If dropdown isn't open, open it when user starts typing
-        if (!this._dropdownIsOpen) {
-            this.openDropdown();
-        }
-        // Filter options based on input
-        this._filterOptionsForCombobox(query);
-    };
-    /**
-     * Filter options for combobox based on input query
-     * Uses the shared filterOptions function
-     */
-    KTSelect.prototype._filterOptionsForCombobox = function (query) {
-        var options = Array.from(this._dropdownContentElement.querySelectorAll('[data-kt-select-option]'));
-        (0, utils_1.filterOptions)(options, query, this._config, this._dropdownContentElement);
-    };
-    /**
-     * ========================================================================
-     * EVENT HANDLERS
-     * ========================================================================
-     */
-    /**
-     * Handle display element click
+     * Handle display element click
+     * @deprecated
      */
     KTSelect.prototype._handleDropdownClick = function (event) {
         if (this._config.debug)
@@ -12539,14 +12195,6 @@ var KTSelect = /** @class */ (function (_super) {
             this.closeDropdown();
         }
     };
-    /**
-     * Handle escape key press
-     */
-    KTSelect.prototype._handleEscKey = function (event) {
-        if (event.key === 'Escape' && this._dropdownIsOpen) {
-            this.closeDropdown();
-        }
-    };
     /**
      * ========================================================================
      * ACCESSIBILITY METHODS
@@ -12558,18 +12206,6 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._setAriaAttributes = function () {
         this._displayElement.setAttribute('aria-expanded', this._dropdownIsOpen.toString());
     };
-    /**
-     * Handle focus events
-     */
-    KTSelect.prototype._handleFocus = function () {
-        // Implementation pending
-    };
-    /**
-     * Handle blur events
-     */
-    KTSelect.prototype._handleBlur = function () {
-        // Implementation pending
-    };
     /**
      * ========================================================================
      * PUBLIC API
@@ -12638,7 +12274,7 @@ var KTSelect = /** @class */ (function (_super) {
             }
         });
         // If search input exists, clear it
-        if (this._searchInputElement && this._config.mode !== types_1.SelectMode.COMBOBOX) {
+        if (this._searchInputElement) {
             this._searchInputElement.value = '';
             // If we have a search module, clear any search filtering
             if (this._searchModule) {
@@ -12662,6 +12298,12 @@ var KTSelect = /** @class */ (function (_super) {
      * Toggle the selection of an option
      */
     KTSelect.prototype.toggleSelection = function (value) {
+        // Prevent selection if the option is disabled (in dropdown or original select)
+        if (this._isOptionDisabled(value)) {
+            if (this._config.debug)
+                console.log('toggleSelection: Option is disabled, ignoring selection');
+            return;
+        }
         // Get current selection state
         var isSelected = this._state.isSelected(value);
         if (this._config.debug)
@@ -12829,7 +12471,7 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype._renderSearchLoadingState = function () {
         if (!this._originalOptionsHtml && this._dropdownContentElement) {
-            var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+            var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
             if (optionsContainer) {
                 this._originalOptionsHtml = optionsContainer.innerHTML;
             }
@@ -12848,36 +12490,26 @@ var KTSelect = /** @class */ (function (_super) {
      * @param items Search result items
      */
     KTSelect.prototype._updateSearchResults = function (items) {
-        var _this = this;
         if (!this._dropdownContentElement)
             return;
-        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options-container]');
+        var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
         if (!optionsContainer)
             return;
         // Clear current options
         optionsContainer.innerHTML = '';
         if (items.length === 0) {
             // Show no results message using template for consistency and customization
-            var noResultsElement = templates_1.defaultTemplates.noResults(this._config);
+            var noResultsElement = templates_1.defaultTemplates.empty(this._config);
             optionsContainer.appendChild(noResultsElement);
             return;
         }
         // Process each item individually to create options
         items.forEach(function (item) {
             // Create option for the original select
-            var selectOption = templates_1.defaultTemplates.emptyOption(__assign(__assign({}, _this._config), { placeholder: item.title }));
+            var selectOption = document.createElement('option');
             selectOption.value = item.id;
-            if (item.description) {
-                selectOption.setAttribute('data-kt-select-option-description', item.description);
-            }
-            if (item.icon) {
-                selectOption.setAttribute('data-kt-select-option-icon', item.icon);
-            }
-            // Create option element for the dropdown
-            var ktOption = new option_1.KTSelectOption(selectOption, _this._config);
-            var renderedOption = ktOption.render();
             // Add to dropdown container
-            optionsContainer.appendChild(renderedOption);
+            optionsContainer.appendChild(selectOption);
         });
         // Add pagination "Load More" button if needed
         if (this._config.pagination && this._remoteModule.hasMorePages()) {
@@ -12886,18 +12518,137 @@ var KTSelect = /** @class */ (function (_super) {
         // Update options NodeList
         this._options = this._wrapperElement.querySelectorAll("[data-kt-select-option]");
     };
-    /**
-     * Filter options by query
-     */
-    KTSelect.prototype.filterOptions = function (query) {
-        this._filterOptionsForCombobox(query);
-    };
     /**
      * Check if dropdown is open
      */
     KTSelect.prototype.isDropdownOpen = function () {
         return this._dropdownIsOpen;
     };
+    KTSelect.prototype.getSelectedOptionsText = function () {
+        var _this = this;
+        var selectedValues = this.getSelectedOptions();
+        var displaySeparator = this._config.displaySeparator || ', ';
+        var texts = selectedValues.map(function (value) {
+            var option = Array.from(_this._options).find(function (opt) { return opt.getAttribute('data-value') === value; });
+            return (option === null || option === void 0 ? void 0 : option.getAttribute('data-text')) || '';
+        }).filter(Boolean);
+        return texts.join(displaySeparator);
+    };
+    /**
+     * Check if an option is disabled (either in dropdown or original select)
+     */
+    KTSelect.prototype._isOptionDisabled = function (value) {
+        var dropdownOption = Array.from(this._options).find(function (opt) { return opt.getAttribute('data-value') === value; });
+        var isDropdownDisabled = dropdownOption && (dropdownOption.classList.contains('disabled') || dropdownOption.getAttribute('aria-disabled') === 'true');
+        var selectOption = Array.from(this._element.querySelectorAll('option')).find(function (opt) { return opt.value === value; });
+        var isNativeDisabled = selectOption && selectOption.disabled;
+        return Boolean(isDropdownDisabled || isNativeDisabled);
+    };
+    /**
+     * Centralized keyboard event handler for all select modes
+     */
+    KTSelect.prototype._handleKeyboardEvent = function (event) {
+        var isOpen = this._dropdownIsOpen;
+        var config = this._config;
+        var focusManager = this._focusManager;
+        var buffer = this._typeToSearchBuffer;
+        // Ignore modifier keys
+        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/)) {
+            buffer.push(event.key);
+            var str = buffer.getBuffer();
+            focusManager.focusByString(str);
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!isOpen) {
+                    this.openDropdown();
+                }
+                else {
+                    focusManager.focusNext();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!isOpen) {
+                    this.openDropdown();
+                }
+                else {
+                    focusManager.focusPrevious();
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (isOpen)
+                    focusManager.focusFirst();
+                break;
+            case 'End':
+                event.preventDefault();
+                if (isOpen)
+                    focusManager.focusLast();
+                break;
+            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();
+                            }
+                        }
+                    }
+                    // Prevent form submit
+                    event.preventDefault();
+                }
+                else {
+                    this.openDropdown();
+                }
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    this.closeDropdown();
+                    event.target.blur();
+                }
+                break;
+            case 'Tab':
+                // Let Tab propagate for normal focus movement
+                break;
+            default:
+                break;
+        }
+    };
+    KTSelect.prototype.renderDisplayTemplateForSelected = function (selectedValues) {
+        var _this = this;
+        var optionsConfig = this._config.optionsConfig || {};
+        var displaySeparator = this._config.displaySeparator || ', ';
+        var contentArray = Array.from(new Set(selectedValues.map(function (value) {
+            var option = Array.from(_this._options).find(function (opt) { return opt.getAttribute('data-value') === value; });
+            if (!option)
+                return '';
+            var displayTemplate = _this._config.displayTemplate;
+            var text = option.getAttribute('data-text') || '';
+            // Replace all {{varname}} in option.innerHTML with values from _config
+            Object.entries(optionsConfig[value] || {}).forEach(function (_a) {
+                var key = _a[0], val = _a[1];
+                if (["string", "number", "boolean"].includes(typeof val)) {
+                    displayTemplate = displayTemplate.replace(new RegExp("{{".concat(key, "}}"), 'g'), String(val));
+                }
+            });
+            return (0, utils_1.renderTemplateString)(displayTemplate, {
+                selectedCount: selectedValues.length || 0,
+                selectedTexts: _this.getSelectedOptionsText() || '',
+                text: text,
+            });
+        }).filter(Boolean)));
+        return contentArray.join(displaySeparator);
+    };
     /**
      * ========================================================================
      * STATIC METHODS
@@ -12925,31 +12676,6 @@ var tooltip_1 = __webpack_require__(1850);
 Object.defineProperty(exports, "KTTooltip", ({ enumerable: true, get: function () { return tooltip_1.KTTooltip; } }));
 
 
-/***/ }),
-
-/***/ 8135:
-/***/ (function(__unused_webpack_module, exports) {
-
-
-/**
- * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
- * Copyright 2025 by Keenthemes Inc
- */
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SelectMode = void 0;
-/**
- * Common type interfaces for the KTSelect component
- */
-/**
- * Select mode options
- */
-var SelectMode;
-(function (SelectMode) {
-    SelectMode["TAGS"] = "tags";
-    SelectMode["COMBOBOX"] = "combobox";
-})(SelectMode || (exports.SelectMode = SelectMode = {}));
-
-
 /***/ }),
 
 /***/ 8151:
@@ -13503,7 +13229,7 @@ exports.KTDatepickerKeyboard = KTDatepickerKeyboard;
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTSelect = exports.KTDatepicker = exports.KTDataTable = exports.KTTogglePassword = exports.KTImageInput = exports.KTThemeSwitch = exports.KTStepper = exports.KTTooltip = exports.KTToggle = exports.KTReparent = exports.KTSticky = exports.KTScrollto = exports.KTScrollable = exports.KTScrollspy = exports.KTAccordion = exports.KTTabs = exports.KTDismiss = exports.KTCollapse = exports.KTDrawer = exports.KTModal = exports.KTDropdown = void 0;
+exports.KTToast = exports.KTSelect = exports.KTDatepicker = exports.KTDataTable = exports.KTTogglePassword = exports.KTImageInput = exports.KTThemeSwitch = exports.KTStepper = exports.KTTooltip = exports.KTToggle = exports.KTReparent = exports.KTSticky = exports.KTScrollto = exports.KTScrollable = exports.KTScrollspy = exports.KTAccordion = exports.KTTabs = exports.KTDismiss = exports.KTCollapse = exports.KTDrawer = exports.KTModal = exports.KTDropdown = void 0;
 var dom_1 = __webpack_require__(9010);
 var dropdown_1 = __webpack_require__(5071);
 var modal_1 = __webpack_require__(3395);
@@ -13526,6 +13252,7 @@ var toggle_password_1 = __webpack_require__(2232);
 var datatable_1 = __webpack_require__(2626);
 var datepicker_1 = __webpack_require__(5116);
 var select_1 = __webpack_require__(494);
+var toast_1 = __webpack_require__(6265);
 var dropdown_2 = __webpack_require__(5071);
 Object.defineProperty(exports, "KTDropdown", ({ enumerable: true, get: function () { return dropdown_2.KTDropdown; } }));
 var modal_2 = __webpack_require__(3395);
@@ -13568,6 +13295,8 @@ var datepicker_2 = __webpack_require__(5116);
 Object.defineProperty(exports, "KTDatepicker", ({ enumerable: true, get: function () { return datepicker_2.KTDatepicker; } }));
 var select_2 = __webpack_require__(494);
 Object.defineProperty(exports, "KTSelect", ({ enumerable: true, get: function () { return select_2.KTSelect; } }));
+var toast_2 = __webpack_require__(6265);
+Object.defineProperty(exports, "KTToast", ({ enumerable: true, get: function () { return toast_2.KTToast; } }));
 var KTComponents = {
     init: function () {
         dropdown_1.KTDropdown.init();
@@ -13591,6 +13320,7 @@ var KTComponents = {
         datatable_1.KTDataTable.init();
         datepicker_1.KTDatepicker.init();
         select_1.KTSelect.init();
+        toast_1.KTToast.init();
     },
 };
 exports["default"] = KTComponents;
@@ -14789,43 +14519,51 @@ var KTSelectTags = /** @class */ (function () {
      */
     KTSelectTags.prototype.updateTagsDisplay = function (selectedOptions) {
         var _this = this;
-        // Clear existing content
-        this._valueDisplayElement.innerHTML = '';
-        // If no options selected, show placeholder
+        // Remove any existing tag elements
+        var wrapper = this._valueDisplayElement.parentElement;
+        if (!wrapper)
+            return;
+        // Remove all previous tags
+        Array.from(wrapper.querySelectorAll('[data-kt-select-tag]')).forEach(function (tag) { return tag.remove(); });
+        // If no options selected, do nothing (let display show placeholder)
         if (selectedOptions.length === 0) {
-            this._valueDisplayElement.textContent = this._config.placeholder || '';
             return;
         }
-        // Create and append a tag element for each selected option
+        // Insert each tag before the display element
         selectedOptions.forEach(function (optionValue) {
-            var tagElement = _this._createTagElement(optionValue);
-            _this._valueDisplayElement.appendChild(tagElement);
+            // Find the original option element (in dropdown or select)
+            var optionElement = null;
+            var optionElements = _this._select.getOptionsElement();
+            for (var _i = 0, _a = Array.from(optionElements); _i < _a.length; _i++) {
+                var opt = _a[_i];
+                if (opt.dataset.value === optionValue) {
+                    optionElement = opt;
+                    break;
+                }
+            }
+            if (!optionElement) {
+                var originalOptions = _this._select.getElement().querySelectorAll('option');
+                for (var _b = 0, _c = Array.from(originalOptions); _b < _c.length; _b++) {
+                    var opt = _c[_b];
+                    if (opt.value === optionValue) {
+                        optionElement = opt;
+                        break;
+                    }
+                }
+            }
+            var tag = templates_1.defaultTemplates.tag(optionElement, _this._config);
+            // Add event listener to the close button
+            var closeButton = tag.querySelector('[data-kt-select-remove-button]');
+            if (closeButton) {
+                _this._eventManager.addListener(closeButton, 'click', function (event) {
+                    event.stopPropagation();
+                    _this._removeTag(optionValue);
+                });
+            }
+            // Insert tag before the display element
+            wrapper.insertBefore(tag, _this._valueDisplayElement);
         });
     };
-    /**
-     * Create tag element for a selected option
-     */
-    KTSelectTags.prototype._createTagElement = function (optionValue) {
-        var _this = this;
-        var optionLabel = this._getOptionLabel(optionValue);
-        // Create a mock option object to pass to the tag template
-        var mockOption = {
-            id: optionValue,
-            title: optionLabel,
-            selected: true,
-        };
-        // Use the tag template
-        var tag = templates_1.defaultTemplates.tag(mockOption, this._config);
-        // Add event listener to the close button
-        var closeButton = tag.querySelector("[data-kt-select-remove-button]");
-        if (closeButton) {
-            this._eventManager.addListener(closeButton, 'click', function (event) {
-                event.stopPropagation();
-                _this._removeTag(optionValue);
-            });
-        }
-        return tag;
-    };
     /**
      * Get the label/text for an option by its value
      */
@@ -14870,6 +14608,555 @@ var KTSelectTags = /** @class */ (function () {
 exports.KTSelectTags = KTSelectTags;
 
 
+/***/ }),
+
+/***/ 8834:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        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.KTToast = void 0;
+var component_1 = __webpack_require__(2658);
+var data_1 = __webpack_require__(8716);
+var DEFAULT_CONFIG = {
+    position: 'top-end',
+    duration: 4000,
+    className: '',
+    maxToasts: 5,
+    offset: 15,
+    gap: 10,
+};
+var DEFAULT_TOAST_OPTIONS = {
+    appearance: 'solid',
+    progress: false,
+    size: 'md',
+    action: false,
+    cancel: false,
+    dismiss: true,
+};
+var KTToast = /** @class */ (function (_super) {
+    __extends(KTToast, _super);
+    /**
+     * Creates a new KTToast instance for a specific element (not commonly used; most use static API).
+     * @param element The target HTML element.
+     * @param config Optional toast config for this instance.
+     */
+    function KTToast(element, config) {
+        var _this = _super.call(this) || this;
+        _this._name = 'toast';
+        _this._defaultConfig = DEFAULT_CONFIG;
+        _this._config = DEFAULT_CONFIG;
+        _this._defaultToastOptions = DEFAULT_TOAST_OPTIONS;
+        if (data_1.default.has(element, _this._name))
+            return _this;
+        _this._init(element);
+        _this._buildConfig(config);
+        data_1.default.set(element, _this._name, _this);
+        return _this;
+    }
+    /**
+     * Generates the HTML content for a toast based on the provided options.
+     * @param options Toast options (message, icon, actions, etc).
+     * @returns The toast's HTML markup as a string.
+     */
+    KTToast.getContent = function (options) {
+        var classNames = __assign(__assign({}, (this.globalConfig.classNames || {})), ((options === null || options === void 0 ? void 0 : options.classNames) || {}));
+        if (options === null || options === void 0 ? void 0 : options.content) {
+            if (typeof options.content === 'string') {
+                return options.content;
+            }
+            else if (typeof options.content === 'function') {
+                var node = options.content();
+                if (node instanceof HTMLElement) {
+                    return node.outerHTML;
+                }
+            }
+            else if (options.content instanceof HTMLElement) {
+                return options.content.outerHTML;
+            }
+        }
+        var template = '';
+        if (options === null || options === void 0 ? void 0 : options.icon) {
+            template +=
+                '<div class="kt-alert-icon ' +
+                    (classNames.icon || '') +
+                    '">' +
+                    options.icon +
+                    '</div>';
+        }
+        if (options === null || options === void 0 ? void 0 : options.message) {
+            template +=
+                '<div class="kt-alert-title ' +
+                    (classNames.message || '') +
+                    '">' +
+                    options.message +
+                    '</div>';
+        }
+        if ((options === null || options === void 0 ? void 0 : options.action) !== false ||
+            (options === null || options === void 0 ? void 0 : options.dismiss) !== false ||
+            (options === null || options === void 0 ? void 0 : options.cancel) !== false) {
+            template +=
+                '<div class="kt-alert-toolbar ' + (classNames.toolbar || '') + '">';
+            template +=
+                '<div class="kt-alert-actions ' + (classNames.actions || '') + '">';
+            if ((options === null || options === void 0 ? void 0 : options.action) && typeof options.action === 'object') {
+                template +=
+                    '<button data-kt-toast-action="true" class="' +
+                        (options.action.className || '') +
+                        '">' +
+                        options.action.label +
+                        '</button>';
+            }
+            if ((options === null || options === void 0 ? void 0 : options.cancel) && typeof options.cancel === 'object') {
+                template +=
+                    '<button data-kt-toast-cancel="true" class="' +
+                        (options.cancel.className || '') +
+                        '">' +
+                        options.cancel.label +
+                        '</button>';
+            }
+            if ((options === null || options === void 0 ? void 0 : options.dismiss) !== false) {
+                template +=
+                    '<button data-kt-toast-dismiss="true" class="kt-alert-close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>';
+            }
+            template += '</div>';
+            template += '</div>';
+        }
+        template += '</div>';
+        return template;
+    };
+    /**
+     * Update all toasts in the container with smooth animation.
+     *
+     * @param container The toast container element.
+     * @param offset Optional offset from the edge.
+     */
+    KTToast.update = function (container, offset) {
+        var _this = this;
+        var _a;
+        if (!container)
+            return;
+        offset =
+            typeof offset === 'number' ? offset : ((_a = this.globalConfig.offset) !== null && _a !== void 0 ? _a : 15);
+        requestAnimationFrame(function () {
+            var _a;
+            var gap = (_a = _this.globalConfig.gap) !== null && _a !== void 0 ? _a : 8;
+            // Group toasts by alignment (top/bottom)
+            var positionGroups = {
+                top: [],
+                bottom: [],
+            };
+            var toasts = Array.from(container.children);
+            toasts.forEach(function (toast) {
+                if (toast.classList.contains('kt-toast-top-end') ||
+                    toast.classList.contains('kt-toast-top-center') ||
+                    toast.classList.contains('kt-toast-top-start')) {
+                    positionGroups.top.push(toast);
+                }
+                else {
+                    positionGroups.bottom.push(toast);
+                }
+            });
+            // Stack top toasts from the top down
+            var currentOffset = offset;
+            positionGroups.top.forEach(function (toast) {
+                toast.style.top = "".concat(currentOffset, "px");
+                toast.style.bottom = '';
+                toast.style.transition =
+                    'top 0.28s cubic-bezier(.4,0,.2,1), opacity 0.28s cubic-bezier(.4,0,.2,1)';
+                currentOffset += toast.offsetHeight + gap;
+                if (toast.classList.contains('kt-toast-top-start')) {
+                    toast.style.insetInlineStart = "".concat(offset, "px");
+                }
+                if (toast.classList.contains('kt-toast-top-end')) {
+                    toast.style.insetInlineEnd = "".concat(offset, "px");
+                }
+            });
+            // Stack bottom toasts from the bottom up
+            currentOffset = offset;
+            for (var i = positionGroups.bottom.length - 1; i >= 0; i--) {
+                var toast = positionGroups.bottom[i];
+                toast.style.bottom = "".concat(currentOffset, "px");
+                toast.style.top = '';
+                toast.style.transition =
+                    'bottom 0.28s cubic-bezier(.4,0,.2,1), opacity 0.28s cubic-bezier(.4,0,.2,1)';
+                currentOffset += toast.offsetHeight + gap;
+                if (toast.classList.contains('kt-toast-bottom-start')) {
+                    toast.style.insetInlineStart = "".concat(offset, "px");
+                }
+                if (toast.classList.contains('kt-toast-bottom-end')) {
+                    toast.style.insetInlineEnd = "".concat(offset, "px");
+                }
+            }
+        });
+    };
+    /**
+     * Set global toast configuration options.
+     * @param options Partial toast config to merge with global config.
+     */
+    KTToast.config = function (options) {
+        this.globalConfig = __assign(__assign({}, this.globalConfig), options);
+    };
+    /**
+     * Show a toast notification.
+     * @param inputOptions Toast options (message, duration, variant, etc).
+     * @returns Toast instance with dismiss method, or undefined if invalid input.
+     */
+    KTToast.show = function (inputOptions) {
+        var _a, _b, _c, _d;
+        var options = __assign(__assign({}, DEFAULT_TOAST_OPTIONS), inputOptions);
+        if (!options || (!options.message && !options.content)) {
+            return undefined;
+        }
+        // Always resolve the id once and use it everywhere
+        var id = "kt-toast-".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2, 8));
+        var position = options.position || this.globalConfig.position || 'top-end';
+        var classNames = __assign(__assign({}, (this.globalConfig.classNames || {})), (options.classNames || {}));
+        var container = this.containerMap.get(position);
+        if (!container) {
+            container = document.createElement('div');
+            var classNames_1 = __assign(__assign({}, (this.globalConfig.classNames || {})), (options.classNames || {}));
+            // Fallback to default hardcoded classes if not provided in options or globalConfig
+            container.className =
+                classNames_1.container || "kt-toast-container ".concat(position);
+            document.body.appendChild(container);
+            this.containerMap.set(position, container);
+        }
+        // Enforce maxToasts
+        if (container.children.length >=
+            (this.globalConfig.maxToasts || DEFAULT_CONFIG.maxToasts)) {
+            var firstToast_1 = container.firstElementChild;
+            if (firstToast_1) {
+                firstToast_1.classList.add('kt-toast-closing');
+                firstToast_1.addEventListener('animationend', function () {
+                    firstToast_1.remove();
+                });
+            }
+        }
+        // Create toast element
+        var variantMap = {
+            info: 'kt-alert-info',
+            success: 'kt-alert-success',
+            error: 'kt-alert-error',
+            warning: 'kt-alert-warning',
+            primary: 'kt-alert-primary',
+            secondary: 'kt-alert-secondary',
+            destructive: 'kt-alert-destructive',
+            mono: 'kt-alert-mono',
+        };
+        var appearanceMap = {
+            solid: 'kt-alert-solid',
+            outline: 'kt-alert-outline',
+            light: 'kt-alert-light',
+        };
+        var sizeMap = {
+            sm: 'kt-alert-sm',
+            md: 'kt-alert-md',
+            lg: 'kt-alert-lg',
+        };
+        var toast = document.createElement('div');
+        toast.className = "kt-toast kt-alert ".concat(variantMap[options.variant] || '', " ").concat(appearanceMap[options.appearance] || '', " ").concat(sizeMap[options.size] || '', " ").concat(options.className || '', " ").concat(classNames.toast || '');
+        // ARIA support
+        toast.setAttribute('role', options.role || 'status');
+        toast.setAttribute('aria-live', 'polite');
+        toast.setAttribute('aria-atomic', 'true');
+        toast.setAttribute('tabindex', '0');
+        // Always resolve the id once and use it everywhere
+        // Always resolve id ONCE at the top, use everywhere
+        // (Move this up to replace the previous const id = ... assignment)
+        // Populate content via getContent
+        var contentHtml = KTToast.getContent(options);
+        toast.innerHTML = contentHtml;
+        // Assign event handlers to buttons by data attribute
+        var actionBtn = toast.querySelector('[data-kt-toast-action]');
+        if (actionBtn &&
+            options.action &&
+            typeof options.action === 'object' &&
+            options.action.onClick) {
+            actionBtn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                if (typeof options.action === 'object' && options.action.onClick) {
+                    options.action.onClick(id);
+                    KTToast.close(id);
+                }
+            });
+        }
+        var cancelBtn = toast.querySelector('[data-kt-toast-cancel]');
+        if (cancelBtn && options.cancel && typeof options.cancel === 'object') {
+            cancelBtn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                if (typeof options.cancel === 'object' && options.cancel.onClick) {
+                    options.cancel.onClick(id);
+                    KTToast.close(id);
+                }
+            });
+        }
+        // Dismiss button handler
+        var dismissBtn = toast.querySelector('[data-kt-toast-dismiss]');
+        if (dismissBtn && options.dismiss !== false) {
+            dismissBtn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                KTToast.close(id);
+            });
+        }
+        // If modal-like, set aria-modal
+        if (options.important)
+            toast.setAttribute('aria-modal', 'true');
+        toast.style.pointerEvents = 'auto';
+        // Progress line
+        var duration = options.important
+            ? null
+            : ((_b = (_a = options.duration) !== null && _a !== void 0 ? _a : this.globalConfig.duration) !== null && _b !== void 0 ? _b : DEFAULT_CONFIG.duration);
+        if (duration && options.progress) {
+            var progress = document.createElement('div');
+            progress.className = 'kt-toast-progress ' + (classNames.progress || '');
+            progress.style.animationDuration = duration + 'ms';
+            progress.setAttribute('data-kt-toast-progress', 'true');
+            toast.appendChild(progress);
+        }
+        // Assign direction class to the toast itself, not the container
+        var directionClassMap = {
+            'top-end': 'kt-toast-top-end',
+            'top-center': 'kt-toast-top-center',
+            'top-start': 'kt-toast-top-start',
+            'bottom-end': 'kt-toast-bottom-end',
+            'bottom-center': 'kt-toast-bottom-center',
+            'bottom-start': 'kt-toast-bottom-start',
+        };
+        Object.values(directionClassMap).forEach(function (cls) {
+            return toast.classList.remove(cls);
+        });
+        var dirClass = directionClassMap[position] || 'kt-toast-top-end';
+        toast.classList.add(dirClass);
+        // Enforce maxToasts: remove oldest if needed
+        var maxToasts = (_d = (_c = options.maxToasts) !== null && _c !== void 0 ? _c : this.globalConfig.maxToasts) !== null && _d !== void 0 ? _d : DEFAULT_CONFIG.maxToasts;
+        var currentToasts = Array.from(container.children);
+        if (currentToasts.length >= maxToasts && currentToasts.length > 0) {
+            var oldestToast = currentToasts[currentToasts.length - 1];
+            var oldestId = oldestToast.getAttribute('data-kt-toast-id');
+            if (oldestId) {
+                KTToast.close(oldestId);
+            }
+            else {
+                oldestToast.remove();
+            }
+        }
+        // Insert toast at the top
+        container.insertBefore(toast, container.firstChild);
+        KTToast.update(container);
+        // Play beep if requested
+        if (options.beep) {
+            try {
+                // Use Web Audio API for a short beep
+                var ctx_1 = new (window.AudioContext ||
+                    window.webkitAudioContext)();
+                var o_1 = ctx_1.createOscillator();
+                var g = ctx_1.createGain();
+                o_1.type = 'sine';
+                o_1.frequency.value = 880;
+                g.gain.value = 0.09;
+                o_1.connect(g);
+                g.connect(ctx_1.destination);
+                o_1.start();
+                setTimeout(function () {
+                    o_1.stop();
+                    ctx_1.close();
+                }, 120);
+            }
+            catch (e) {
+                /* ignore */
+            }
+        }
+        KTToast._fireEventOnElement(toast, 'show', { id: id });
+        KTToast._dispatchEventOnElement(toast, 'show', { id: id });
+        var instance = { id: id, element: toast, timeoutId: 0 };
+        KTToast.toasts.set(id, instance);
+        // Auto-dismiss
+        var timeoutId = undefined;
+        var remaining = duration;
+        var startTime;
+        var paused = false;
+        var progressEl = null;
+        if (duration) {
+            var startTimer_1 = function (ms) {
+                startTime = Date.now();
+                timeoutId = window.setTimeout(function () {
+                    var _a;
+                    (_a = options.onAutoClose) === null || _a === void 0 ? void 0 : _a.call(options, id);
+                    KTToast.close(id);
+                }, ms);
+                instance.timeoutId = timeoutId;
+            };
+            startTimer_1(duration);
+            if (options.pauseOnHover) {
+                progressEl = toast.querySelector('[data-kt-toast-progress]');
+                var progressPausedAt_1 = 0;
+                var pause = function () {
+                    if (!paused && timeoutId) {
+                        paused = true;
+                        window.clearTimeout(timeoutId);
+                        if (startTime) {
+                            remaining -= Date.now() - startTime;
+                        }
+                        // Pause progress bar
+                        if (progressEl) {
+                            var computedStyle = window.getComputedStyle(progressEl);
+                            var matrix = computedStyle.transform;
+                            var scaleX = 1;
+                            if (matrix && matrix !== 'none') {
+                                var values = matrix.match(/matrix\(([^)]+)\)/);
+                                if (values && values[1]) {
+                                    scaleX = parseFloat(values[1].split(',')[0]);
+                                }
+                            }
+                            progressPausedAt_1 = scaleX;
+                            progressEl.style.animation = 'none';
+                            progressEl.style.transition = 'none';
+                            progressEl.style.transform = "scaleX(".concat(scaleX, ")");
+                        }
+                    }
+                };
+                var resume = function () {
+                    if (paused && remaining > 0) {
+                        paused = false;
+                        startTimer_1(remaining);
+                        // Resume progress bar
+                        if (progressEl) {
+                            progressEl.style.transition = 'transform 0ms';
+                            progressEl.style.transform = "scaleX(".concat(progressPausedAt_1, ")");
+                            progressEl.offsetHeight; // force reflow
+                            progressEl.style.transition = "transform ".concat(remaining, "ms linear");
+                            progressEl.style.transform = 'scaleX(0)';
+                        }
+                    }
+                };
+                toast.addEventListener('mouseenter', pause);
+                toast.addEventListener('mouseleave', resume);
+            }
+        }
+        KTToast._fireEventOnElement(toast, 'shown', { id: id });
+        KTToast._dispatchEventOnElement(toast, 'shown', { id: id });
+        return __assign(__assign({}, instance), { dismiss: function () { return KTToast.close(id); } });
+    };
+    /**
+     * Close and remove all active toasts.
+     */
+    KTToast.clearAll = function () {
+        for (var _i = 0, _a = Array.from(this.toasts.keys()); _i < _a.length; _i++) {
+            var id = _a[_i];
+            console.log('clearAll:', id);
+            this.close(id);
+        }
+    };
+    /**
+     * Close a toast by ID or instance.
+     * @param idOrInstance Toast ID string or KTToastInstance.
+     */
+    KTToast.close = function (idOrInstance) {
+        var inst;
+        var id;
+        if (!idOrInstance)
+            return;
+        if (typeof idOrInstance === 'string') {
+            id = idOrInstance;
+            inst = this.toasts.get(id);
+        }
+        else if (typeof idOrInstance === 'object' && idOrInstance.id) {
+            id = idOrInstance.id;
+            inst = idOrInstance;
+        }
+        if (!inst || !id)
+            return;
+        if (inst._closing)
+            return; // Prevent double-close
+        inst._closing = true;
+        clearTimeout(inst.timeoutId);
+        KTToast._fireEventOnElement(inst.element, 'hide', { id: id });
+        KTToast._dispatchEventOnElement(inst.element, 'hide', { id: id });
+        // Remove progress bar instantly if present
+        var progressEl = inst.element.querySelector('[data-kt-toast-progress]');
+        if (progressEl)
+            progressEl.remove();
+        inst.element.style.animation = 'kt-toast-out 0.25s forwards';
+        setTimeout(function () {
+            var _a;
+            var parent = inst === null || inst === void 0 ? void 0 : inst.element.parentElement;
+            inst === null || inst === void 0 ? void 0 : inst.element.remove();
+            KTToast.toasts.delete(id);
+            // Try to call onDismiss if available in the toast instance (if stored)
+            if (typeof ((_a = inst.options) === null || _a === void 0 ? void 0 : _a.onDismiss) === 'function') {
+                inst.options.onDismiss(id);
+            }
+            KTToast._fireEventOnElement(inst.element, 'hidden', { id: id });
+            KTToast._dispatchEventOnElement(inst.element, 'hidden', { id: id });
+            // update toasts asynchronously after DOM update
+            setTimeout(function () {
+                KTToast.update(parent);
+            }, 0);
+        }, 250);
+    };
+    /**
+     * Dispatches a custom 'kt.toast.{eventType}' event on the given element.
+     * @param element The toast element.
+     * @param eventType The event type (e.g. 'show', 'hide').
+     * @param payload Optional event detail payload.
+     */
+    KTToast._fireEventOnElement = function (element, eventType, payload) {
+        var event = new CustomEvent("kt.toast.".concat(eventType), { detail: payload });
+        element.dispatchEvent(event);
+    };
+    /**
+     * Dispatches a custom event (not namespaced) on the given element.
+     * @param element The toast element.
+     * @param eventType The event type.
+     * @param payload Optional event detail payload.
+     */
+    KTToast._dispatchEventOnElement = function (element, eventType, payload) {
+        var event = new CustomEvent(eventType, { detail: payload });
+        element.dispatchEvent(event);
+    };
+    /**
+     * Initialize toast system (placeholder for future use).
+     */
+    KTToast.init = function () { };
+    KTToast.containerMap = new Map();
+    KTToast.toasts = new Map();
+    KTToast.globalConfig = __assign({}, DEFAULT_CONFIG);
+    return KTToast;
+}(component_1.default));
+exports.KTToast = KTToast;
+
+
 /***/ }),
 
 /***/ 9010:
@@ -15164,6 +15451,30 @@ 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 () {
@@ -15189,12 +15500,14 @@ exports["default"] = KTDom;
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.EventManager = exports.FocusManager = void 0;
+exports.TypeToSearchBuffer = exports.EventManager = exports.FocusManager = exports.highlightTextInElementDebounced = void 0;
 exports.formatCurrency = formatCurrency;
 exports.filterOptions = filterOptions;
 exports.highlightTextInElement = highlightTextInElement;
-exports.handleDropdownKeyNavigation = handleDropdownKeyNavigation;
 exports.debounce = debounce;
+exports.renderTemplateString = renderTemplateString;
+exports.stringToElement = stringToElement;
+// utils.ts
 var templates_1 = __webpack_require__(9069);
 /**
  * Format a number as a currency string
@@ -15235,6 +15548,17 @@ function filterOptions(options, query, config, dropdownElement, onVisibleCount)
                     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;
+            }
             visibleOptionsCount++;
         }
         // Call the callback with the visible count if provided
@@ -15248,6 +15572,8 @@ function filterOptions(options, query, config, dropdownElement, onVisibleCount)
         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
             option.classList.remove('hidden');
@@ -15264,22 +15590,11 @@ function filterOptions(options, query, config, dropdownElement, onVisibleCount)
                 }
             }
             visibleOptionsCount++;
-            // Apply highlighting if needed - but preserve the option structure
-            if (isMatch && config.searchHighlight && query.trim() !== '') {
-                // Clone option elements that contain icons or descriptions
-                var hasIcon = option.querySelector('[data-kt-select-option-icon]') !== null;
-                var hasDescription = option.querySelector('[data-kt-select-option-description]') !== null;
-                if (hasIcon || hasDescription) {
-                    // Only highlight the text part without changing structure
-                    var titleElement = option.querySelector('[data-kt-option-title]');
-                    if (titleElement) {
-                        highlightTextInElement(titleElement, query, config);
-                    }
-                }
-                else {
-                    // Simple option with just text - standard highlighting
-                    highlightTextInElement(option, query, config);
+            if (config.searchHighlight && query.trim() !== '') {
+                if (option.dataset && !option.dataset.originalText) {
+                    option.dataset.originalText = option.innerHTML;
                 }
+                (0, exports.highlightTextInElementDebounced)(option, query, config);
             }
         }
         else {
@@ -15316,37 +15631,39 @@ function highlightTextInElement(element, query, config) {
     if (!element || !query || query.trim() === '')
         return;
     var queryLower = query.toLowerCase();
-    function walk(node) {
-        var _a;
-        if (node.nodeType === Node.TEXT_NODE) {
-            var text = node.nodeValue || '';
-            var textLower = text.toLowerCase();
-            var matchIndex = textLower.indexOf(queryLower);
-            if (matchIndex !== -1) {
-                var before = text.slice(0, matchIndex);
-                var match = text.slice(matchIndex, matchIndex + query.length);
-                var after = text.slice(matchIndex + query.length);
-                var frag = document.createDocumentFragment();
-                if (before)
-                    frag.appendChild(document.createTextNode(before));
-                // Use the highlight template, which returns an HTMLElement
-                var highlightSpan = templates_1.defaultTemplates.highlight(config, match);
-                frag.appendChild(highlightSpan);
-                if (after)
-                    frag.appendChild(document.createTextNode(after));
-                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(frag, node);
-                // Only highlight the first occurrence in this node
-            }
-        }
-        else if (node.nodeType === Node.ELEMENT_NODE) {
-            // Don't re-highlight already highlighted nodes
-            if (node.classList.contains('highlight'))
-                return;
-            Array.from(node.childNodes).forEach(walk);
-        }
+    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 });
     }
-    walk(element);
+    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
@@ -15355,16 +15672,14 @@ var FocusManager = /** @class */ (function () {
     function FocusManager(element, optionsSelector, config) {
         if (optionsSelector === void 0) { optionsSelector = '[data-kt-select-option]'; }
         this._focusedOptionIndex = null;
+        this._onFocusChange = null;
         this._element = element;
         this._optionsSelector = optionsSelector;
         this._eventManager = new EventManager();
-        // Use config values if provided, otherwise fallback to defaults
-        this._focusClass = (config === null || config === void 0 ? void 0 : config.focusClass) || 'option-focused';
-        this._hoverClass = (config === null || config === void 0 ? void 0 : config.hoverClass) || 'hovered';
-        this._bgClass = (config === null || config === void 0 ? void 0 : config.bgClass) || 'bg-blue-50';
-        this._fontClass = (config === null || config === void 0 ? void 0 : config.fontClass) || 'font-medium';
         // Add click handler to update focus state when options are clicked
         this._setupOptionClickHandlers();
+        this._focusClass = 'focus'; // or whatever your intended class is
+        this._hoverClass = 'hover'; // or your intended class
     }
     /**
      * Set up click handlers for all options to update focus state
@@ -15376,15 +15691,6 @@ var FocusManager = /** @class */ (function () {
             var target = e.target;
             var optionElement = target.closest(_this._optionsSelector);
             if (optionElement) {
-                // First clear all focus
-                _this.resetFocus();
-                // Then update the focused index based on the clicked option
-                var options = _this.getVisibleOptions();
-                var clickedIndex = options.indexOf(optionElement);
-                if (clickedIndex >= 0) {
-                    _this._focusedOptionIndex = clickedIndex;
-                    _this.applyFocus(options[clickedIndex]);
-                }
             }
         });
     };
@@ -15406,24 +15712,88 @@ var FocusManager = /** @class */ (function () {
         });
     };
     /**
-     * Focus the next visible option
+     * Focus the first visible option
      */
-    FocusManager.prototype.focusNext = function () {
+    FocusManager.prototype.focusFirst = function () {
         var options = this.getVisibleOptions();
         if (options.length === 0)
             return null;
-        this.resetFocus();
-        if (this._focusedOptionIndex === null) {
-            this._focusedOptionIndex = 0;
+        for (var i = 0; i < options.length; i++) {
+            var option = options[i];
+            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = i;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
         }
-        else {
-            this._focusedOptionIndex =
-                (this._focusedOptionIndex + 1) % options.length;
+        return null;
+    };
+    /**
+     * Focus the last visible option
+     */
+    FocusManager.prototype.focusLast = function () {
+        var options = this.getVisibleOptions();
+        if (options.length === 0)
+            return null;
+        for (var i = options.length - 1; i >= 0; i--) {
+            var option = options[i];
+            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = i;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
         }
-        var option = options[this._focusedOptionIndex];
-        this.applyFocus(option);
-        this.scrollIntoView(option);
-        return option;
+        return null;
+    };
+    /**
+     * Focus the next visible option that matches the search string
+     */
+    FocusManager.prototype.focusByString = function (str) {
+        var _a, _b, _c;
+        var options = this.getVisibleOptions();
+        if (options.length === 0)
+            return null;
+        var lowerStr = str.toLowerCase();
+        var startIdx = ((_a = this._focusedOptionIndex) !== null && _a !== void 0 ? _a : -1) + 1;
+        for (var i = 0; i < options.length; i++) {
+            var idx = (startIdx + i) % options.length;
+            var option = options[idx];
+            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._focusedOptionIndex = idx;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
+        }
+        return null;
+    };
+    /**
+     * Focus the next visible option
+     */
+    FocusManager.prototype.focusNext = function () {
+        var options = this.getVisibleOptions();
+        if (options.length === 0)
+            return null;
+        var idx = this._focusedOptionIndex === null ? 0 : (this._focusedOptionIndex + 1) % options.length;
+        var startIdx = idx;
+        do {
+            var option = options[idx];
+            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = idx;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
+            idx = (idx + 1) % options.length;
+        } while (idx !== startIdx);
+        return null;
     };
     /**
      * Focus the previous visible option
@@ -15432,18 +15802,20 @@ var FocusManager = /** @class */ (function () {
         var options = this.getVisibleOptions();
         if (options.length === 0)
             return null;
-        this.resetFocus();
-        if (this._focusedOptionIndex === null) {
-            this._focusedOptionIndex = options.length - 1;
-        }
-        else {
-            this._focusedOptionIndex =
-                (this._focusedOptionIndex - 1 + options.length) % options.length;
-        }
-        var option = options[this._focusedOptionIndex];
-        this.applyFocus(option);
-        this.scrollIntoView(option);
-        return option;
+        var idx = this._focusedOptionIndex === null ? options.length - 1 : (this._focusedOptionIndex - 1 + options.length) % options.length;
+        var startIdx = idx;
+        do {
+            var option = options[idx];
+            if (!option.classList.contains('disabled') && option.getAttribute('aria-disabled') !== 'true') {
+                this.resetFocus();
+                this._focusedOptionIndex = idx;
+                this.applyFocus(option);
+                this.scrollIntoView(option);
+                return option;
+            }
+            idx = (idx - 1 + options.length) % options.length;
+        } while (idx !== startIdx);
+        return null;
     };
     /**
      * Apply focus to a specific option
@@ -15451,27 +15823,23 @@ var FocusManager = /** @class */ (function () {
     FocusManager.prototype.applyFocus = function (option) {
         if (!option)
             return;
-        // Remove focus from all options first
+        if (option.classList.contains('disabled') || option.getAttribute('aria-disabled') === 'true') {
+            return;
+        }
         this.resetFocus();
-        // Add focus to this option
         option.classList.add(this._focusClass);
         option.classList.add(this._hoverClass);
-        option.classList.add(this._bgClass);
-        option.classList.add(this._fontClass);
+        this._triggerFocusChange();
     };
     /**
      * Reset focus on all options
      */
     FocusManager.prototype.resetFocus = function () {
         var _this = this;
-        // Find all elements with the focus classes
-        var focusedElements = this._element.querySelectorAll(".".concat(this._focusClass, ", .").concat(this._hoverClass, ", .").concat(this._bgClass, ", .").concat(this._fontClass));
-        // Remove classes from all elements
+        var focusedElements = this._element.querySelectorAll(".".concat(this._focusClass, ", .").concat(this._hoverClass));
+        // Remove focus and hover classes from all options
         focusedElements.forEach(function (element) {
-            element.classList.remove(_this._focusClass);
-            element.classList.remove(_this._hoverClass);
-            element.classList.remove(_this._bgClass);
-            element.classList.remove(_this._fontClass);
+            element.classList.remove(_this._focusClass, _this._hoverClass);
         });
         // Reset index if visible options have changed
         var visibleOptions = this.getVisibleOptions();
@@ -15486,7 +15854,7 @@ var FocusManager = /** @class */ (function () {
     FocusManager.prototype.scrollIntoView = function (option) {
         if (!option)
             return;
-        var container = this._element.querySelector('[data-kt-select-options-container]');
+        var container = this._element.querySelector('[data-kt-select-options]');
         if (!container)
             return;
         var optionRect = option.getBoundingClientRect();
@@ -15537,6 +15905,17 @@ var FocusManager = /** @class */ (function () {
     FocusManager.prototype.setFocusedIndex = function (index) {
         this._focusedOptionIndex = index;
     };
+    /**
+     * Set a callback to be called when focus changes
+     */
+    FocusManager.prototype.setOnFocusChange = function (cb) {
+        this._onFocusChange = cb;
+    };
+    FocusManager.prototype._triggerFocusChange = function () {
+        if (this._onFocusChange) {
+            this._onFocusChange(this.getFocusedOption(), this._focusedOptionIndex);
+        }
+    };
     /**
      * Clean up event listeners
      */
@@ -15548,166 +15927,6 @@ var FocusManager = /** @class */ (function () {
     return FocusManager;
 }());
 exports.FocusManager = FocusManager;
-/**
- * Shared keyboard navigation handler for dropdown options
- * Can be used by both combobox and search modules
- */
-function handleDropdownKeyNavigation(event, select, config, callbacks) {
-    try {
-        // Get the dropdown state
-        var isDropdownOpen = select._dropdownIsOpen;
-        // Log the event to help debug
-        var origin_1 = 'handleDropdownKeyNavigation';
-        if (select.getConfig && select.getConfig().debug)
-            console.log("[".concat(origin_1, "] Key: ").concat(event.key, ", Dropdown open: ").concat(isDropdownOpen));
-        // Handle basic keyboard navigation
-        switch (event.key) {
-            case 'ArrowDown':
-                if (!isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Opening dropdown on ArrowDown"));
-                    select.openDropdown();
-                    // Focus the first option after opening
-                    setTimeout(function () {
-                        select._focusNextOption();
-                    }, 50);
-                }
-                else if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onArrowDown) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Using custom onArrowDown callback"));
-                    callbacks.onArrowDown();
-                }
-                else {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Using default _focusNextOption"));
-                    var focusedOption = select._focusNextOption();
-                    // Ensure we have a focused option
-                    if (focusedOption) {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Focused next option:"), focusedOption);
-                    }
-                }
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-                if (!isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Opening dropdown on ArrowUp"));
-                    select.openDropdown();
-                    // Focus the last option after opening
-                    setTimeout(function () {
-                        select._focusPreviousOption();
-                    }, 50);
-                }
-                else if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onArrowUp) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Using custom onArrowUp callback"));
-                    callbacks.onArrowUp();
-                }
-                else {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Using default _focusPreviousOption"));
-                    var focusedOption = select._focusPreviousOption();
-                    // Ensure we have a focused option
-                    if (focusedOption) {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Focused previous option:"), focusedOption);
-                    }
-                }
-                event.preventDefault();
-                break;
-            case 'Enter':
-                // Prevent form submission
-                event.preventDefault();
-                if (isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Enter pressed with dropdown open"));
-                    // For combobox mode, ensure we update the input value directly
-                    var isCombobox = select.getConfig().mode === 'combobox';
-                    var comboboxModule = select._comboboxModule;
-                    if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onEnter) {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Using custom onEnter callback"));
-                        callbacks.onEnter();
-                    }
-                    else {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Using default selectFocusedOption"));
-                        // Make sure there is a focused option before trying to select it
-                        if (select._focusManager &&
-                            select._focusManager.getFocusedOption()) {
-                            select.selectFocusedOption();
-                        }
-                        else {
-                            // If no option is focused, try to focus the first one
-                            var focusedOption = select._focusNextOption();
-                            // Only select if an option was successfully focused
-                            if (focusedOption) {
-                                select.selectFocusedOption();
-                            }
-                        }
-                    }
-                    // Close dropdown after selection if not multiple and closeOnSelect is true
-                    if (!config.multiple && config.closeOnSelect !== false) {
-                        if (select.getConfig && select.getConfig().debug)
-                            console.log("[".concat(origin_1, "] Closing dropdown after selection"));
-                        select.closeDropdown();
-                    }
-                }
-                else {
-                    // If dropdown is closed, open it on Enter
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Opening dropdown on Enter"));
-                    select.openDropdown();
-                    // Focus the first option after opening
-                    setTimeout(function () {
-                        select._focusNextOption();
-                    }, 50);
-                }
-                break;
-            case 'Tab':
-                // Only handle tab if dropdown is open
-                if (isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Closing dropdown on Tab"));
-                    select.closeDropdown();
-                    if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onClose) {
-                        callbacks.onClose();
-                    }
-                    // Don't prevent default tab behavior - let it move focus naturally
-                }
-                break;
-            case 'Escape':
-                // Only handle escape if dropdown is open
-                if (isDropdownOpen) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Closing dropdown on Escape"));
-                    select.closeDropdown();
-                    if (callbacks === null || callbacks === void 0 ? void 0 : callbacks.onClose) {
-                        callbacks.onClose();
-                    }
-                    event.preventDefault(); // Prevent other escape handlers
-                }
-                break;
-            case ' ': // Space key
-                // If dropdown is closed, space should open it (but not if in combobox mode)
-                if (!isDropdownOpen && !(select.getConfig().mode === 'combobox')) {
-                    if (select.getConfig && select.getConfig().debug)
-                        console.log("[".concat(origin_1, "] Opening dropdown on Space"));
-                    select.openDropdown();
-                    // Focus the first option after opening
-                    setTimeout(function () {
-                        select._focusNextOption();
-                    }, 50);
-                    event.preventDefault();
-                }
-                break;
-        }
-    }
-    catch (error) {
-        console.error('Error in keyboard navigation handler:', error);
-    }
-}
 /**
  * Centralized event listener management
  */
@@ -15764,7 +15983,7 @@ var EventManager = /** @class */ (function () {
         // Go through each event type
         this._boundHandlers.forEach(function (eventMap, event) {
             // For each event type, go through each handler
-            eventMap.forEach(function (boundHandler, originalHandler) {
+            eventMap.forEach(function (boundHandler) {
                 element.removeEventListener(event, boundHandler);
             });
         });
@@ -15788,6 +16007,45 @@ function debounce(func, delay) {
         timeout = setTimeout(function () { return func.apply(void 0, args); }, delay);
     };
 }
+/**
+ * Replaces all {{key}} in the template with the corresponding value from the data object.
+ * If a key is missing in data, replaces with an empty string.
+ */
+function renderTemplateString(template, data) {
+    return template.replace(/{{(\w+)}}/g, function (_, key) {
+        return data[key] !== undefined && data[key] !== null ? String(data[key]) : '';
+    });
+}
+// Type-to-search buffer utility for keyboard navigation
+var TypeToSearchBuffer = /** @class */ (function () {
+    function TypeToSearchBuffer(timeout) {
+        if (timeout === void 0) { timeout = 500; }
+        this.buffer = '';
+        this.lastTime = 0;
+        this.timeout = timeout;
+    }
+    TypeToSearchBuffer.prototype.push = function (char) {
+        var now = Date.now();
+        if (now - this.lastTime > this.timeout) {
+            this.buffer = '';
+        }
+        this.buffer += char;
+        this.lastTime = now;
+    };
+    TypeToSearchBuffer.prototype.getBuffer = function () {
+        return this.buffer;
+    };
+    TypeToSearchBuffer.prototype.clear = function () {
+        this.buffer = '';
+    };
+    return TypeToSearchBuffer;
+}());
+exports.TypeToSearchBuffer = TypeToSearchBuffer;
+function stringToElement(html) {
+    var template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstElementChild;
+}
 
 
 /***/ }),
@@ -15828,34 +16086,30 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.defaultTemplates = void 0;
+exports.defaultTemplates = exports.coreTemplateStrings = void 0;
 exports.setTemplateStrings = setTemplateStrings;
 exports.getTemplateStrings = getTemplateStrings;
-var types_1 = __webpack_require__(8135);
+var utils_1 = __webpack_require__(9011);
 /**
  * Default HTML string templates for KTSelect. All UI structure is defined here.
  * Users can override any template by providing a matching key in the config.templates object.
  */
-var defaultTemplateStrings = {
-    dropdownContent: "<div data-kt-select-dropdown-content class=\"kt-select-dropdown hidden\" style=\"z-index: {{zindex}};\">{{content}}</div>",
-    optionsContainer: "<ul role=\"listbox\" aria-label=\"{{label}}\" data-kt-select-options-container style=\"max-height: {{height}}px; overflow-y: auto;\">{{options}}</ul>",
-    emptyOption: "<option value=\"\">{{placeholder}}</option>",
-    errorOption: "<option value=\"\" disabled selected>{{errorMessage}}</option>", // Template for error <option>
-    loadMore: "<li class=\"py-2 px-4 text-center text-gray-600 cursor-pointer hover:bg-gray-100\" data-kt-select-load-more>{{loadMoreText}}</li>",
-    dropdown: "<div data-kt-select-dropdown-content class=\"absolute z-10 w-full mt-2 bg-white border border-gray-200 rounded-md shadow-md\">\n\t\t{{search}}\n\t\t<ul role=\"listbox\" aria-label=\"{{label}}\" data-kt-select-options-container style=\"max-height: {{height}}px; overflow-y: auto;\">\n\t\t\t{{options}}\n\t\t</ul>\n\t</div>",
-    error: "<li class=\"px-3 py-2 text-red-500\" role=\"alert\">{{errorMessage}}</li>",
-    highlight: "<span class=\"highlight\">{{text}}</span>",
-    main: "<div data-kt-select-wrapper class=\"relative\" data-kt-select-mode=\"{{mode}}\"></div>",
-    displayCombobox: "<div class=\"relative flex items-center w-full\">\n\t\t<input data-kt-select-search data-kt-select-display data-kt-select-value type=\"text\" class=\"flex-1 w-full items-center justify-between px-3 py-2 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400\" placeholder=\"{{placeholder}}\" role=\"searchbox\" aria-label=\"{{label}}\" {{disabled}} />\n\t\t<button type=\"button\" data-kt-select-clear-button class=\"absolute right-3 hidden text-gray-400 hover:text-gray-600\" aria-label=\"Clear selection\">\n\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<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n\t\t\t<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n\t\t</svg>\n\t\t</button>\n\t</div>",
-    icon: "<span class=\"option-icon mr-2\"><img src=\"{{icon}}\" class=\"rounded-full w-6 h-6\" /></span>",
-    description: "<div class=\"option-description text-sm text-gray-500\">{{description}}</div>",
-    display: "<div data-kt-select-display class=\"flex items-center justify-between px-3 py-2 border border-gray-300 rounded-md cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-400\" tabindex=\"{{tabindex}}\" role=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-label=\"{{label}}\" {{disabled}}>\n\t\t<span data-kt-select-value>{{placeholder}}</span>\n\t\t<span data-kt-select-arrow class=\"ml-2\">\n\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<polyline points=\"6 9 12 15 18 9\"></polyline>\n\t\t\t</svg>\n\t\t</span>\n\t</div>",
-    option: "<li data-kt-select-option data-value=\"{{value}}\" class=\"px-3 py-2 cursor-pointer hover:bg-gray-100 flex items-center{{selectedClass}}{{disabledClass}}\" role=\"option\" {{selected}} {{disabled}}>{{icon}}<div class=\"option-content\"><div class=\"option-title\" data-kt-option-title>{{text}}</div>{{description}}</div></li>",
-    optionGroup: "<li role=\"group\" aria-label=\"{{label}}\" class=\"py-1\"><div class=\"px-3 py-1 text-xs font-semibold text-gray-500 uppercase\">{{label}}</div><ul>{{optionsHtml}}</ul></li>",
-    search: "<div class=\"px-3 py-2 border-b border-gray-200\"><input type=\"text\" data-kt-select-search placeholder=\"{{searchPlaceholder}}\" class=\"w-full border-none focus:outline-none text-sm\" role=\"searchbox\" aria-label=\"{{searchPlaceholder}}\"/></div>",
-    noResults: "<li class=\"px-3 py-2 text-gray-500\" role=\"status\">{{searchNotFoundText}}</li>",
-    loading: "<li class=\"px-3 py-2 text-gray-500 italic\" role=\"status\" aria-live=\"polite\">{{loadingMessage}}</li>",
-    tag: "<div data-kt-select-tag class=\"inline-flex items-center bg-blue-50 border border-blue-100 rounded px-2 py-1 text-sm mr-1 mb-1\"><span>{{title}}</span><span data-kt-select-remove-button data-value=\"{{id}}\" class=\"ml-1 text-blue-400 hover:text-blue-600 cursor-pointer\" role=\"button\" aria-label=\"Remove {{safeTitle}}\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg></span></div>",
+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>",
+    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>",
+    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>",
 };
 /**
  * Default templates for KTSelect component
@@ -15885,9 +16139,9 @@ function getTemplateStrings(config) {
         ? config.templates
         : undefined;
     if (templates) {
-        return __assign(__assign(__assign({}, defaultTemplateStrings), userTemplateStrings), templates);
+        return __assign(__assign(__assign({}, exports.coreTemplateStrings), userTemplateStrings), templates);
     }
-    return __assign(__assign({}, defaultTemplateStrings), userTemplateStrings);
+    return __assign(__assign({}, exports.coreTemplateStrings), userTemplateStrings);
 }
 /**
  * Default templates for KTSelect component
@@ -15898,44 +16152,38 @@ exports.defaultTemplates = {
      */
     highlight: function (config, text) {
         var template = getTemplateStrings(config).highlight;
-        var html = template.replace('{{text}}', text);
+        var html = template.replace('{{text}}', text).replace('{{class}}', config.highlightClass || '');
         return stringToElement(html);
     },
     /**
      * Renders the dropdown content
      */
-    dropdownContent: function (config) {
-        var template = getTemplateStrings(config).dropdownContent;
+    dropdown: function (config) {
+        var template = getTemplateStrings(config).dropdown;
+        var content = config.content || '';
+        if (config.dropdownTemplate) {
+            content = (0, utils_1.renderTemplateString)(config.dropdownTemplate, {
+                zindex: config.zindex ? String(config.zindex) : '',
+                content: config.content || '',
+                class: config.dropdownClass || '',
+            });
+        }
         var html = template
             .replace('{{zindex}}', config.zindex ? String(config.zindex) : '')
-            .replace('{{content}}', config.content || '');
+            .replace('{{content}}', content)
+            .replace('{{class}}', config.dropdownClass || '');
         return stringToElement(html);
     },
     /**
      * Renders the options container for the dropdown
      */
-    optionsContainer: function (config) {
-        var template = getTemplateStrings(config).optionsContainer;
+    options: function (config) {
+        var template = getTemplateStrings(config).options;
         var html = template
             .replace('{{label}}', config.label || 'Options')
             .replace('{{height}}', config.height ? String(config.height) : '250')
-            .replace('{{options}}', config.options || '');
-        return stringToElement(html);
-    },
-    /**
-     * Renders an empty option in the dropdown
-     */
-    emptyOption: function (config) {
-        var template = getTemplateStrings(config).emptyOption;
-        var html = template.replace('{{placeholder}}', config.placeholder || 'Select...');
-        return stringToElement(html);
-    },
-    /**
-     * Renders an error option in the dropdown
-     */
-    errorOption: function (config) {
-        var template = getTemplateStrings(config).errorOption;
-        var html = template.replace('{{errorMessage}}', config.errorMessage || 'An error occurred');
+            .replace('{{options}}', config.options || '')
+            .replace('{{class}}', config.optionsClass || '');
         return stringToElement(html);
     },
     /**
@@ -15950,51 +16198,41 @@ exports.defaultTemplates = {
      */
     error: function (config) {
         var template = getTemplateStrings(config).error;
-        return template.replace('{{errorMessage}}', config.errorMessage || 'An error occurred');
+        return template
+            .replace('{{errorMessage}}', config.errorMessage || 'An error occurred')
+            .replace('{{class}}', config.errorClass || '');
     },
     /**
      * Renders the main container for the select component
      */
-    main: function (config) {
-        var html = getTemplateStrings(config).main.replace('{{mode}}', config.mode || '');
-        return stringToElement(html);
+    wrapper: function (config) {
+        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');
+        return element;
     },
     /**
      * Renders the display element (trigger) for the select
      */
     display: function (config) {
-        var isCombobox = config.mode === types_1.SelectMode.COMBOBOX;
-        if (isCombobox) {
+        if (config.combobox) {
             var html_1 = getTemplateStrings(config)
-                .displayCombobox.replace(/{{placeholder}}/g, config.placeholder || 'Select...')
+                .combobox.replace(/{{placeholder}}/g, config.placeholder || 'Select...')
                 .replace(/{{label}}/g, config.label || config.placeholder || 'Select...')
-                .replace('{{disabled}}', config.disabled ? 'disabled' : '');
+                .replace('{{disabled}}', config.disabled ? 'disabled' : '')
+                .replace('{{class}}', config.displayClass || '');
             return stringToElement(html_1);
         }
-        var html = getTemplateStrings(config)
-            .display.replace('{{tabindex}}', config.disabled ? '-1' : '0')
+        var content = config.label || config.placeholder || 'Select...';
+        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...');
-        return stringToElement(html);
-    },
-    /**
-     * Renders the dropdown content container
-     */
-    dropdown: function (config, optionsHtml) {
-        var isCombobox = config.mode === types_1.SelectMode.COMBOBOX;
-        var hasSearch = config.enableSearch && !isCombobox;
-        var template = getTemplateStrings(config).dropdown;
-        var searchHtml = '';
-        if (hasSearch) {
-            var searchElement = exports.defaultTemplates.search(config);
-            searchHtml = searchElement.outerHTML;
-        }
-        var html = template
-            .replace('{{search}}', searchHtml)
-            .replace('{{options}}', optionsHtml)
-            .replace('{{label}}', config.label || 'Options')
-            .replace('{{height}}', config.height ? String(config.height) : '250');
+            .replace('{{placeholder}}', config.placeholder || 'Select...')
+            .replace('{{class}}', config.displayClass || '')
+            .replace('{{content}}', content);
         return stringToElement(html);
     },
     /**
@@ -16010,141 +16248,102 @@ exports.defaultTemplates = {
         var selected = isHtmlOption
             ? option.selected
             : !!option.selected;
-        // Prefer data-kt-select-option (JSON) if present
-        var description;
-        var icon;
-        if (isHtmlOption) {
-            var json = option.getAttribute('data-kt-select-option');
-            if (json) {
-                try {
-                    var optionData = JSON.parse(json);
-                    description = optionData === null || optionData === void 0 ? void 0 : optionData.description;
-                    icon = optionData === null || optionData === void 0 ? void 0 : optionData.icon;
-                }
-                catch (e) {
-                    // fallback to legacy attributes if JSON is invalid
-                    description =
-                        option.getAttribute('data-kt-select-option-description') ||
-                            undefined;
-                    icon = option.getAttribute('data-kt-select-option-icon') || undefined;
-                }
-            }
-            else {
-                description =
-                    option.getAttribute('data-kt-select-option-description') || undefined;
-                icon = option.getAttribute('data-kt-select-option-icon') || undefined;
-            }
-        }
-        else {
-            description = option.description;
-            icon = option.icon;
+        var content = 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,
+            });
         }
-        // Build option element with proper accessibility attributes
-        var selectedClass = selected ? ' selected' : '';
-        var disabledClass = disabled ? ' disabled' : '';
-        var html = getTemplateStrings(config)
-            .option.replace('{{value}}', value)
-            .replace('{{selectedClass}}', selectedClass)
-            .replace('{{disabledClass}}', disabledClass)
+        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(/{{icon}}/g, icon ? exports.defaultTemplates.icon(icon, config).outerHTML : '')
-            .replace('{{text}}', text)
-            .replace(/{{description}}/g, description
-            ? exports.defaultTemplates.description(description, config).outerHTML
-            : '');
-        return stringToElement(html);
-    },
-    /**
-     * Renders an icon
-     */
-    icon: function (icon, config) {
-        var html = getTemplateStrings(config).icon.replace('{{icon}}', icon);
-        return stringToElement(html);
-    },
-    /**
-     * Renders a description
-     */
-    description: function (description, config) {
-        var html = getTemplateStrings(config).description.replace('{{description}}', description);
-        return stringToElement(html);
-    },
-    /**
-     * Renders an option group with header
-     */
-    optionGroup: function (label, optionsHtml, config) {
-        var html = getTemplateStrings(config)
-            .optionGroup.replace(/{{label}}/g, label)
-            .replace('{{optionsHtml}}', optionsHtml);
+            .replace('{{content}}', content)
+            .replace('{{class}}', config.optionClass || '');
         return stringToElement(html);
     },
     /**
      * Renders the search input
      */
     search: function (config) {
-        var html = getTemplateStrings(config).search.replace('{{searchPlaceholder}}', config.searchPlaceholder || 'Search...');
+        var html = getTemplateStrings(config)
+            .search.replace('{{searchPlaceholder}}', config.searchPlaceholder || 'Search...')
+            .replace('{{class}}', config.searchClass || '');
         return stringToElement(html);
     },
     /**
      * Renders the no results message
      */
-    noResults: function (config) {
-        var html = getTemplateStrings(config).noResults.replace('{{searchNotFoundText}}', config.searchNotFoundText || 'No results found');
+    empty: function (config) {
+        var html = getTemplateStrings(config)
+            .empty.replace('{{searchNotFoundText}}', config.searchNotFoundText || 'No results found')
+            .replace('{{class}}', config.emptyClass || '');
         return stringToElement(html);
     },
     /**
      * Renders the loading state
      */
     loading: function (config, loadingMessage) {
-        var html = getTemplateStrings(config).loading.replace('{{loadingMessage}}', loadingMessage || 'Loading options...');
+        var html = getTemplateStrings(config)
+            .loading.replace('{{loadingMessage}}', loadingMessage || 'Loading options...')
+            .replace('{{class}}', config.loadingClass || '');
         return stringToElement(html);
     },
     /**
      * Renders a tag for multi-select
      */
     tag: function (option, config) {
-        // Escape HTML characters for aria-label to prevent HTML injection
-        var escapeHTML = function (str) {
-            return str.replace(/[&<>"']/g, function (match) {
-                var escapeMap = {
-                    '&': '&amp;',
-                    '<': '&lt;',
-                    '>': '&gt;',
-                    '"': '&quot;',
-                    "'": '&#39;',
-                };
-                return escapeMap[match];
+        var template = getTemplateStrings(config).tag;
+        var content = option.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));
+                }
             });
-        };
-        // Ensure we have plain text for the aria-label
-        var safeTitle = escapeHTML(option.title);
-        var html = getTemplateStrings(config)
-            .tag.replace('{{title}}', option.title)
+            content = (0, utils_1.renderTemplateString)(tagTemplate_1, {
+                title: option.title,
+                id: option.id,
+                class: config.tagClass || '',
+                content: option.innerHTML,
+                text: option.innerText,
+            });
+        }
+        content += getTemplateStrings(config).tagRemoveButton;
+        var html = template
+            .replace('{{title}}', option.title)
             .replace('{{id}}', option.id)
-            .replace('{{safeTitle}}', safeTitle);
+            .replace('{{content}}', content)
+            .replace('{{class}}', config.tagClass || '');
         return stringToElement(html);
     },
     /**
-     * Formats the display of selected values
+     * Renders the placeholder for the select
      */
-    selectedDisplay: function (selectedOptions, config) {
-        if (!selectedOptions || selectedOptions.length === 0) {
-            return config.placeholder || 'Select...';
-        }
-        if (config.multiple) {
-            if (config.renderSelected &&
-                typeof config.renderSelected === 'function') {
-                return config.renderSelected(selectedOptions);
-            }
-            if (config.showSelectedCount) {
-                var count = selectedOptions.length;
-                return "".concat(count, " ").concat(count === 1 ? 'item' : 'items', " selected");
-            }
-            return selectedOptions.map(function (option) { return option.title; }).join(', ');
-        }
-        else {
-            return selectedOptions[0].title;
+    placeholder: function (config) {
+        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 || '',
+            });
         }
+        html = html.replace('{{content}}', content);
+        return stringToElement(html);
     },
 };
 
@@ -17263,7 +17462,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.SelectOptionDefaultConfig = exports.KTSelectState = exports.DefaultConfig = void 0;
+exports.KTSelectState = exports.DefaultConfig = void 0;
 exports.DefaultConfig = {
     // ...other config options
     loadMoreText: 'Load more...',
@@ -17283,10 +17482,6 @@ exports.DefaultConfig = {
     // Field Mapping
     dataValueField: null, // Property in the option object that contains the value (default: 'id')
     dataFieldText: null, // Property in the option object that contains the text (default: 'title')
-    dataFieldDescription: null, // Property in the option object that contains the description
-    dataFieldIcon: null, // Property in the option object that contains the icon
-    dataFieldIconWidth: null, // Property in the option object that contains the icon width
-    dataFieldIconHeight: null, // Property in the option object that contains the icon height
     // Search Configuration
     searchParam: '', // Query parameter for API search requests
     searchDebounce: 300, // Debounce delay for search (in ms)
@@ -17299,10 +17494,9 @@ 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: true, // Close the dropdown after selecting an option (single-select only)
+    closeOnSelect: false, // Close the dropdown after selecting an option (single-select only)
     disabled: false, // Disable the select component
     isRequired: false, // Make selection required
-    mode: null, // Select mode: tags or combobox
     // Search Functionality
     enableSearch: false, // Enable/disable search functionality within the dropdown
     searchPlaceholder: 'Search...', // Placeholder text for the search input
@@ -17326,11 +17520,8 @@ exports.DefaultConfig = {
     dropdownPreventOverflow: false,
     dropdownStrategy: null,
     dropdownWidth: null, // Custom width for dropdown (e.g., '300px'), null to match toggle element width
-    // Styling
-    focusClass: 'option-focused',
-    hoverClass: 'hovered',
-    bgClass: 'bg-blue-50',
-    fontClass: 'font-medium',
+    // New Config
+    dropdownTemplate: '',
 };
 var KTSelectState = /** @class */ (function () {
     function KTSelectState(config) {
@@ -17458,10 +17649,6 @@ var KTSelectState = /** @class */ (function () {
     return KTSelectState;
 }());
 exports.KTSelectState = KTSelectState;
-exports.SelectOptionDefaultConfig = {
-    description: '',
-    icon: null,
-};
 
 
 /***/ }),