thekselect 1.0.0

package/dist/thekselect.umd.cjs

@@ -0,0 +1,1171 @@
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ThekSelect = {}));
+})(this, function(exports) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region src/core/state.ts
+	var StateManager = class {
+		state;
+		listeners = /* @__PURE__ */ new Set();
+		constructor(initialState) {
+			this.state = { ...initialState };
+		}
+		getState() {
+			return { ...this.state };
+		}
+		setState(newState) {
+			const oldState = this.state;
+			this.state = {
+				...this.state,
+				...newState
+			};
+			if (Object.keys(newState).some((key) => {
+				const val = newState[key];
+				const oldVal = oldState[key];
+				if (Array.isArray(val) && Array.isArray(oldVal)) return val.length !== oldVal.length || val.some((item, index) => item !== oldVal[index]);
+				return val !== oldVal;
+			})) this.notify();
+		}
+		subscribe(listener) {
+			this.listeners.add(listener);
+			return () => this.listeners.delete(listener);
+		}
+		notify() {
+			const currentState = this.getState();
+			this.listeners.forEach((listener) => listener(currentState));
+		}
+	};
+	//#endregion
+	//#region src/utils/debounce.ts
+	function debounce(fn, delay) {
+		let timeoutId = null;
+		const debounced = ((...args) => {
+			if (timeoutId !== null) clearTimeout(timeoutId);
+			timeoutId = setTimeout(() => {
+				timeoutId = null;
+				fn(...args);
+			}, delay);
+		});
+		debounced.cancel = () => {
+			if (timeoutId !== null) {
+				clearTimeout(timeoutId);
+				timeoutId = null;
+			}
+		};
+		return debounced;
+	}
+	//#endregion
+	//#region src/utils/dom.ts
+	function generateId(prefix = "thek") {
+		return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+	}
+	//#endregion
+	//#region src/utils/styles.ts
+	var BASE_STYLES = `:root {
+    --thek-primary: #0f172a;
+    --thek-primary-light: #f1f5f9;
+    --thek-bg-surface: #ffffff;
+    --thek-bg-panel: #f8fafc;
+    --thek-bg-subtle: #f1f5f9;
+    --thek-border: #e2e8f0;
+    --thek-border-strong: #cbd5e1;
+    --thek-text-main: #0f172a;
+    --thek-text-muted: #64748b;
+    --thek-text-inverse: #ffffff;
+    --thek-danger: #ef4444;
+    --thek-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --thek-input-height: 40px;
+    --thek-height-sm: 32px;
+    --thek-height-md: 40px;
+    --thek-height-lg: 48px;
+    --thek-item-padding: 8px 10px;
+    --thek-font-family: inherit;
+    --thek-border-radius: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --thek-primary: #38bdf8;
+        --thek-primary-light: rgba(56, 189, 248, 0.15);
+        --thek-bg-surface: #0f172a;
+        --thek-bg-panel: #334155;
+        --thek-bg-subtle: #475569;
+        --thek-border: #334155;
+        --thek-border-strong: #475569;
+        --thek-text-main: #f8fafc;
+        --thek-text-muted: #94a3b8;
+        --thek-text-inverse: #0f172a;
+        --thek-danger: #f43f5e;
+        --thek-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+    }
+}
+
+[data-theme='dark'] {
+    --thek-primary: #38bdf8;
+    --thek-primary-light: rgba(56, 189, 248, 0.15);
+    --thek-bg-surface: #0f172a;
+    --thek-bg-panel: #334155;
+    --thek-bg-subtle: #475569;
+    --thek-border: #334155;
+    --thek-border-strong: #475569;
+    --thek-text-main: #f8fafc;
+    --thek-text-muted: #94a3b8;
+    --thek-text-inverse: #0f172a;
+    --thek-danger: #f43f5e;
+    --thek-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+}
+
+.thek-select {
+    position: relative;
+    width: 100%;
+    font-family: var(--thek-font-family);
+    box-sizing: border-box;
+}
+
+.thek-select *, .thek-dropdown * {
+    box-sizing: border-box;
+}
+
+.thek-control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 12px;
+    cursor: pointer;
+    min-height: var(--thek-input-height);
+    background-color: var(--thek-bg-surface);
+    color: var(--thek-text-main);
+    border: 1px solid var(--thek-border);
+    border-radius: var(--thek-border-radius);
+    transition: all 0.2s ease;
+}
+
+.thek-control:hover {
+    border-color: var(--thek-border-strong);
+}
+
+.thek-select.thek-open .thek-control {
+    border-color: var(--thek-primary);
+    box-shadow: 0 0 0 2px var(--thek-primary-light);
+}
+
+.thek-placeholder {
+    color: var(--thek-text-muted);
+    margin-left: 2px;
+    font-size: 0.95em;
+}
+
+.thek-indicators {
+    display: flex;
+    align-items: center;
+    padding-left: 12px;
+    color: var(--thek-text-muted);
+}
+
+.thek-arrow {
+    font-size: 0.8em;
+    transition: transform 0.2s ease;
+}
+
+.thek-open .thek-arrow {
+    transform: rotate(180deg);
+}
+
+.thek-selection {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    gap: 6px;
+    flex: 1;
+    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
+    mask-image: linear-gradient(to right, black 90%, transparent 100%);
+}
+
+.thek-summary-text {
+    font-size: 0.9em;
+    color: var(--thek-text-main);
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.thek-tag {
+    flex-shrink: 0;
+    background-color: var(--thek-bg-panel);
+    border: 1px solid var(--thek-border);
+    color: var(--thek-text-main);
+    border-radius: calc(var(--thek-border-radius) - 2px);
+    padding: 2px 8px;
+    font-size: 0.8em;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 500;
+    transition: background-color 0.1s;
+}
+
+.thek-tag:hover {
+    background-color: var(--thek-bg-subtle);
+}
+
+.thek-tag-remove {
+    cursor: pointer;
+    color: var(--thek-text-muted);
+    font-size: 1.1em;
+    line-height: 1;
+}
+
+.thek-tag-remove:hover {
+    color: var(--thek-danger);
+}
+
+.thek-dropdown {
+    background-color: var(--thek-bg-surface);
+    border: 1px solid var(--thek-border);
+    border-radius: var(--thek-border-radius);
+    box-shadow: var(--thek-shadow);
+    overflow: hidden;
+    box-sizing: border-box;
+    margin-top: 4px;
+    animation: thek-fade-in 0.15s ease-out;
+}
+
+@keyframes thek-fade-in {
+    from { opacity: 0; transform: translateY(-4px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.thek-search-wrapper {
+    padding: 10px;
+    border-bottom: 1px solid var(--thek-border);
+    position: relative;
+    background-color: var(--thek-bg-surface);
+}
+
+.thek-input {
+    width: 100%;
+    border: 1px solid var(--thek-border);
+    background: var(--thek-bg-surface);
+    padding: 8px 12px 8px 34px;
+    border-radius: calc(var(--thek-border-radius) - 2px);
+    color: var(--thek-text-main);
+    outline: none;
+    font-size: 0.9em;
+    transition: border-color 0.2s;
+}
+
+.thek-input:focus {
+    border-color: var(--thek-primary);
+}
+
+.thek-search-icon {
+    position: absolute;
+    left: 22px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--thek-text-muted);
+    font-size: 0.85em;
+}
+
+.thek-options {
+    list-style: none;
+    margin: 0;
+    padding: 6px;
+    max-height: 240px;
+    overflow-y: auto;
+}
+
+.thek-option {
+    padding: var(--thek-item-padding);
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: all 0.1s ease;
+    color: var(--thek-text-main);
+    font-size: 0.95em;
+    margin-bottom: 2px;
+}
+
+.thek-option:last-child {
+    margin-bottom: 0;
+}
+
+.thek-option:hover {
+    background-color: var(--thek-bg-panel);
+}
+
+.thek-option.thek-focused {
+    background-color: var(--thek-bg-panel);
+}
+
+.thek-option.thek-selected {
+    background-color: var(--thek-primary-light);
+    color: var(--thek-primary);
+    font-weight: 500;
+}
+
+.thek-checkbox {
+    width: 1.2em;
+    height: 1.2em;
+    border: 1.5px solid var(--thek-border-strong);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--thek-bg-surface);
+    font-size: 0.7em;
+    flex-shrink: 0;
+    transition: all 0.2s;
+}
+
+.thek-option.thek-selected .thek-checkbox {
+    background-color: var(--thek-primary);
+    border-color: var(--thek-primary);
+    color: var(--thek-text-inverse);
+}
+
+.thek-option.thek-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background-color: transparent;
+}
+
+.thek-no-results, .thek-loading {
+    padding: 20px 12px;
+    text-align: center;
+    color: var(--thek-text-muted);
+    font-size: 0.9em;
+}
+
+.thek-disabled .thek-control {
+    background-color: var(--thek-bg-subtle);
+    cursor: not-allowed;
+    opacity: 0.7;
+    border-color: var(--thek-border);
+}
+`;
+	var injected = false;
+	function injectStyles() {
+		if (injected || typeof document === "undefined") return;
+		const style = document.createElement("style");
+		style.id = "thekselect-base-styles";
+		style.textContent = BASE_STYLES;
+		document.head.appendChild(style);
+		injected = true;
+	}
+	//#endregion
+	//#region src/core/dom-renderer.ts
+	var DomRenderer = class {
+		wrapper;
+		control;
+		selectionContainer;
+		indicatorsContainer;
+		placeholderElement;
+		input;
+		dropdown;
+		optionsList;
+		lastState = null;
+		lastFilteredOptions = [];
+		constructor(config, id, callbacks) {
+			this.config = config;
+			this.id = id;
+			this.callbacks = callbacks;
+		}
+		normalizeHeight(value) {
+			if (typeof value === "number") return `${value}px`;
+			const trimmed = value.trim();
+			if (/^\d+(\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
+			return trimmed;
+		}
+		applyHeight(height) {
+			const resolved = this.normalizeHeight(height);
+			this.wrapper.style.setProperty("--thek-input-height", resolved);
+			this.dropdown.style.setProperty("--thek-input-height", resolved);
+		}
+		createDom() {
+			this.wrapper = document.createElement("div");
+			this.wrapper.className = "thek-select";
+			if (this.config.disabled) this.wrapper.classList.add("thek-disabled");
+			if (this.config.multiple) this.wrapper.classList.add("thek-multiple");
+			this.control = document.createElement("div");
+			this.control.className = "thek-control";
+			this.control.setAttribute("role", "combobox");
+			this.control.setAttribute("aria-expanded", "false");
+			this.control.setAttribute("aria-haspopup", "listbox");
+			this.control.setAttribute("aria-controls", `${this.id}-list`);
+			this.selectionContainer = document.createElement("div");
+			this.selectionContainer.className = "thek-selection";
+			this.placeholderElement = document.createElement("span");
+			this.placeholderElement.className = "thek-placeholder";
+			this.placeholderElement.textContent = this.config.placeholder;
+			this.indicatorsContainer = document.createElement("div");
+			this.indicatorsContainer.className = "thek-indicators";
+			this.indicatorsContainer.innerHTML = "<i class=\"fa-solid fa-chevron-down thek-arrow\"></i>";
+			this.control.appendChild(this.selectionContainer);
+			this.control.appendChild(this.placeholderElement);
+			this.control.appendChild(this.indicatorsContainer);
+			this.dropdown = document.createElement("div");
+			this.dropdown.className = "thek-dropdown";
+			this.dropdown.hidden = true;
+			if (this.config.searchable) {
+				const searchWrapper = document.createElement("div");
+				searchWrapper.className = "thek-search-wrapper";
+				searchWrapper.innerHTML = "<i class=\"fa-solid fa-magnifying-glass thek-search-icon\"></i>";
+				this.input = document.createElement("input");
+				this.input.className = "thek-input";
+				this.input.type = "text";
+				this.input.autocomplete = "off";
+				this.input.placeholder = "Search...";
+				this.input.setAttribute("aria-autocomplete", "list");
+				searchWrapper.appendChild(this.input);
+				this.dropdown.appendChild(searchWrapper);
+			} else {
+				this.input = document.createElement("input");
+				this.input.type = "hidden";
+			}
+			this.optionsList = document.createElement("ul");
+			this.optionsList.className = "thek-options";
+			this.optionsList.id = `${this.id}-list`;
+			this.optionsList.setAttribute("role", "listbox");
+			this.optionsList.addEventListener("scroll", () => this.handleOptionsScroll());
+			this.optionsList.addEventListener("wheel", (e) => this.handleOptionsWheel(e), { passive: false });
+			this.dropdown.appendChild(this.optionsList);
+			this.wrapper.appendChild(this.control);
+			document.body.appendChild(this.dropdown);
+			this.applyHeight(this.config.height);
+		}
+		render(state, filteredOptions) {
+			this.lastState = state;
+			this.lastFilteredOptions = filteredOptions;
+			this.control.setAttribute("aria-expanded", state.isOpen.toString());
+			this.dropdown.hidden = !state.isOpen;
+			this.wrapper.classList.toggle("thek-open", state.isOpen);
+			if (state.isLoading) this.indicatorsContainer.innerHTML = "<i class=\"fa-solid fa-circle-notch fa-spin text-muted\"></i>";
+			else this.indicatorsContainer.innerHTML = "<i class=\"fa-solid fa-chevron-down thek-arrow\"></i>";
+			this.renderSelectionContent(state);
+			this.renderOptionsContent(state, filteredOptions);
+			if (state.isOpen) this.positionDropdown();
+		}
+		renderSelectionContent(state) {
+			this.selectionContainer.innerHTML = "";
+			const hasSelection = state.selectedValues.length > 0;
+			this.placeholderElement.style.display = hasSelection ? "none" : "block";
+			this.selectionContainer.style.display = hasSelection ? "flex" : "none";
+			if (hasSelection) {
+				const vField = this.config.valueField;
+				const dField = this.config.displayField;
+				if (this.config.multiple) if (state.selectedValues.length > this.config.maxSelectedLabels) {
+					const summary = document.createElement("span");
+					summary.className = "thek-summary-text";
+					summary.textContent = `${state.selectedValues.length} items selected`;
+					this.selectionContainer.appendChild(summary);
+				} else state.selectedValues.forEach((val, i) => {
+					const option = state.options.find((o) => o[vField] === val) || state.selectedOptionsByValue[val] || {
+						[vField]: val,
+						[dField]: val
+					};
+					const tag = document.createElement("span");
+					tag.className = "thek-tag";
+					tag.draggable = true;
+					tag.dataset.index = i.toString();
+					tag.dataset.value = val;
+					const label = document.createElement("span");
+					label.className = "thek-tag-label";
+					const content = this.config.renderSelection(option);
+					if (content instanceof HTMLElement) label.appendChild(content);
+					else label.textContent = content;
+					tag.appendChild(label);
+					const removeBtn = document.createElement("span");
+					removeBtn.className = "thek-tag-remove";
+					removeBtn.innerHTML = "&times;";
+					removeBtn.addEventListener("click", (e) => {
+						e.stopPropagation();
+						this.callbacks.onSelect(option);
+					});
+					tag.appendChild(removeBtn);
+					this.setupTagDnd(tag);
+					this.selectionContainer.appendChild(tag);
+				});
+				else {
+					const val = state.selectedValues[0];
+					const option = state.options.find((o) => o[vField] === val) || state.selectedOptionsByValue[val];
+					if (option) {
+						const content = this.config.renderSelection(option);
+						if (content instanceof HTMLElement) this.selectionContainer.appendChild(content);
+						else this.selectionContainer.textContent = content;
+					}
+				}
+			}
+		}
+		renderOptionsContent(state, filteredOptions, alignFocused = true, preservedScrollTop) {
+			this.optionsList.innerHTML = "";
+			const vField = this.config.valueField;
+			const dField = this.config.displayField;
+			if (state.isLoading && filteredOptions.length === 0) {
+				const li = document.createElement("li");
+				li.className = "thek-option thek-loading";
+				li.textContent = "Loading...";
+				this.optionsList.appendChild(li);
+				return;
+			}
+			const canCreate = this.config.canCreate && state.inputValue && !filteredOptions.some((o) => o[dField] && o[dField].toString().toLowerCase() === state.inputValue.toLowerCase());
+			const shouldVirtualize = this.config.virtualize && filteredOptions.length >= this.config.virtualThreshold && !canCreate;
+			const itemHeight = Math.max(20, this.config.virtualItemHeight);
+			const overscan = Math.max(0, this.config.virtualOverscan);
+			if (shouldVirtualize) {
+				const viewportHeight = this.optionsList.clientHeight || 240;
+				if (alignFocused && state.focusedIndex >= 0 && state.focusedIndex < filteredOptions.length) {
+					const focusedTop = state.focusedIndex * itemHeight;
+					const focusedBottom = focusedTop + itemHeight;
+					const currentTop = this.optionsList.scrollTop;
+					const currentBottom = currentTop + viewportHeight;
+					if (focusedTop < currentTop) this.optionsList.scrollTop = focusedTop;
+					else if (focusedBottom > currentBottom) this.optionsList.scrollTop = focusedBottom - viewportHeight;
+				}
+				const scrollTop = preservedScrollTop ?? this.optionsList.scrollTop;
+				const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+				const end = Math.min(filteredOptions.length, Math.ceil((scrollTop + viewportHeight) / itemHeight) + overscan);
+				if (start > 0) this.optionsList.appendChild(this.createSpacer(start * itemHeight));
+				for (let index = start; index < end; index++) this.optionsList.appendChild(this.createOptionItem(filteredOptions[index], index, state, vField));
+				if (end < filteredOptions.length) this.optionsList.appendChild(this.createSpacer((filteredOptions.length - end) * itemHeight));
+				if (typeof preservedScrollTop === "number") this.optionsList.scrollTop = preservedScrollTop;
+			} else filteredOptions.forEach((option, index) => {
+				this.optionsList.appendChild(this.createOptionItem(option, index, state, vField));
+			});
+			const exactMatch = filteredOptions.some((o) => o[dField] && o[dField].toString().toLowerCase() === state.inputValue.toLowerCase());
+			if (this.config.canCreate && state.inputValue && !exactMatch) {
+				const li = document.createElement("li");
+				li.className = "thek-option thek-create";
+				li.textContent = this.config.createText.replace("{%t}", state.inputValue);
+				if (state.focusedIndex === filteredOptions.length) li.classList.add("thek-focused");
+				li.addEventListener("click", (e) => {
+					e.stopPropagation();
+					this.callbacks.onCreate(state.inputValue);
+				});
+				this.optionsList.appendChild(li);
+			}
+			if (filteredOptions.length === 0 && (!this.config.canCreate || !state.inputValue)) {
+				const li = document.createElement("li");
+				li.className = "thek-option thek-no-results";
+				li.textContent = "No results found";
+				this.optionsList.appendChild(li);
+			}
+			const activeDescendantId = state.focusedIndex >= 0 && state.focusedIndex < filteredOptions.length && !!document.getElementById(`${this.id}-opt-${state.focusedIndex}`) ? `${this.id}-opt-${state.focusedIndex}` : null;
+			if (this.config.searchable) if (activeDescendantId) this.input.setAttribute("aria-activedescendant", activeDescendantId);
+			else this.input.removeAttribute("aria-activedescendant");
+		}
+		createSpacer(height) {
+			const spacer = document.createElement("li");
+			spacer.style.height = `${height}px`;
+			spacer.style.padding = "0";
+			spacer.style.margin = "0";
+			spacer.style.listStyle = "none";
+			spacer.setAttribute("aria-hidden", "true");
+			return spacer;
+		}
+		createOptionItem(option, index, state, valueField) {
+			const li = document.createElement("li");
+			li.className = "thek-option";
+			li.id = `${this.id}-opt-${index}`;
+			const isSelected = state.selectedValues.includes(option[valueField]);
+			if (option.disabled) li.classList.add("thek-disabled");
+			if (isSelected) li.classList.add("thek-selected");
+			if (state.focusedIndex === index) li.classList.add("thek-focused");
+			li.setAttribute("role", "option");
+			li.setAttribute("aria-selected", isSelected.toString());
+			if (this.config.multiple) {
+				const checkbox = document.createElement("div");
+				checkbox.className = "thek-checkbox";
+				if (isSelected) checkbox.innerHTML = "<i class=\"fa-solid fa-check\"></i>";
+				li.appendChild(checkbox);
+			}
+			const label = document.createElement("span");
+			label.className = "thek-option-label";
+			const content = this.config.renderOption(option);
+			if (content instanceof HTMLElement) label.appendChild(content);
+			else label.textContent = content;
+			li.appendChild(label);
+			li.addEventListener("click", (e) => {
+				e.stopPropagation();
+				this.callbacks.onSelect(option);
+			});
+			return li;
+		}
+		handleOptionsScroll() {
+			if (!this.config.virtualize || !this.lastState) return;
+			const scrollTop = this.optionsList.scrollTop;
+			this.renderOptionsContent(this.lastState, this.lastFilteredOptions, false, scrollTop);
+		}
+		handleOptionsWheel(e) {
+			if (!this.config.virtualize) return;
+			const list = this.optionsList;
+			const atTop = list.scrollTop <= 0;
+			const atBottom = list.scrollTop + list.clientHeight >= list.scrollHeight - 1;
+			const scrollingUp = e.deltaY < 0;
+			const scrollingDown = e.deltaY > 0;
+			if (scrollingUp && !atTop || scrollingDown && !atBottom) {
+				e.preventDefault();
+				list.scrollTop += e.deltaY;
+			}
+		}
+		positionDropdown() {
+			const rect = this.control.getBoundingClientRect();
+			const viewportWidth = document.documentElement.clientWidth;
+			const scrollX = window.scrollX;
+			const scrollY = window.scrollY;
+			this.dropdown.style.position = "absolute";
+			this.dropdown.style.zIndex = "9999";
+			let width = rect.width;
+			if (width > viewportWidth - 20) width = viewportWidth - 20;
+			this.dropdown.style.width = `${width}px`;
+			let left = rect.left + scrollX;
+			if (rect.left + width > viewportWidth) left = viewportWidth - width - 10 + scrollX;
+			if (left < scrollX + 10) left = scrollX + 10;
+			this.dropdown.style.left = `${left}px`;
+			this.dropdown.style.top = `${rect.bottom + scrollY}px`;
+		}
+		setupTagDnd(tag) {
+			tag.addEventListener("dragstart", (e) => {
+				e.dataTransfer?.setData("text/plain", tag.dataset.index);
+				tag.classList.add("thek-dragging");
+			});
+			tag.addEventListener("dragend", () => {
+				tag.classList.remove("thek-dragging");
+			});
+			tag.addEventListener("dragover", (e) => {
+				e.preventDefault();
+				tag.classList.add("thek-drag-over");
+			});
+			tag.addEventListener("dragleave", () => {
+				tag.classList.remove("thek-drag-over");
+			});
+			tag.addEventListener("drop", (e) => {
+				e.preventDefault();
+				tag.classList.remove("thek-drag-over");
+				const fromIndex = parseInt(e.dataTransfer?.getData("text/plain") || "-1");
+				const toIndex = parseInt(tag.dataset.index);
+				if (fromIndex !== -1 && fromIndex !== toIndex) this.callbacks.onReorder(fromIndex, toIndex);
+			});
+		}
+		setHeight(height) {
+			this.config.height = height;
+			this.applyHeight(height);
+		}
+		updateConfig(newConfig) {
+			this.config = {
+				...this.config,
+				...newConfig
+			};
+		}
+		destroy() {
+			if (this.wrapper.parentNode) this.wrapper.parentNode.removeChild(this.wrapper);
+			if (this.dropdown.parentNode) this.dropdown.parentNode.removeChild(this.dropdown);
+		}
+	};
+	//#endregion
+	//#region src/core/config-utils.ts
+	var NOOP_LOAD_OPTIONS = async (_query) => [];
+	function parseSelectOptions(select) {
+		return Array.from(select.options).map((opt) => ({
+			value: opt.value,
+			label: opt.text,
+			disabled: opt.disabled,
+			selected: opt.selected
+		}));
+	}
+	function buildConfig(element, config, globalDefaults = {}) {
+		const isSelect = element instanceof HTMLSelectElement;
+		const finalConfig = {
+			options: isSelect ? parseSelectOptions(element) : config.options || [],
+			multiple: isSelect ? element.multiple : false,
+			searchable: true,
+			disabled: isSelect ? element.disabled : false,
+			placeholder: "Select...",
+			canCreate: false,
+			createText: "Create '{%t}'...",
+			height: 40,
+			debounce: 300,
+			maxSelectedLabels: 3,
+			displayField: "label",
+			valueField: "value",
+			maxOptions: null,
+			virtualize: false,
+			virtualItemHeight: 40,
+			virtualOverscan: 4,
+			virtualThreshold: 80,
+			loadOptions: NOOP_LOAD_OPTIONS,
+			renderOption: (o) => o.label,
+			renderSelection: (o) => o.label,
+			...globalDefaults,
+			...config
+		};
+		const hasCustomRenderOption = !!(globalDefaults.renderOption || config.renderOption);
+		const hasCustomRenderSelection = !!(globalDefaults.renderSelection || config.renderSelection);
+		if (!hasCustomRenderOption) finalConfig.renderOption = (o) => o[finalConfig.displayField];
+		if (!hasCustomRenderSelection) finalConfig.renderSelection = (o) => o[finalConfig.displayField];
+		return finalConfig;
+	}
+	function buildInitialState(config) {
+		const valueField = config.valueField;
+		const firstSelected = config.options.find((o) => o.selected);
+		const selectedValues = config.multiple ? config.options.filter((o) => o.selected).map((o) => o[valueField]) : firstSelected && valueField in firstSelected ? [firstSelected[valueField]] : [];
+		const selectedOptionsByValue = {};
+		selectedValues.forEach((value) => {
+			const option = config.options.find((o) => o[valueField] === value);
+			if (option) selectedOptionsByValue[value] = option;
+		});
+		return {
+			options: config.options,
+			selectedValues,
+			selectedOptionsByValue,
+			isOpen: false,
+			focusedIndex: -1,
+			inputValue: "",
+			isLoading: false
+		};
+	}
+	//#endregion
+	//#region src/core/options-logic.ts
+	function isRemoteMode(config) {
+		return config.loadOptions !== NOOP_LOAD_OPTIONS;
+	}
+	function getFilteredOptions(config, state) {
+		if (isRemoteMode(config) && state.inputValue) return state.options;
+		const query = state.inputValue.toLowerCase();
+		const displayField = config.displayField;
+		const filtered = state.options.filter((option) => {
+			const value = option[displayField];
+			return value != null && value.toString().toLowerCase().includes(query);
+		});
+		if (config.maxOptions != null) {
+			const limit = Math.max(0, config.maxOptions);
+			return filtered.slice(0, limit);
+		}
+		return filtered;
+	}
+	function mergeSelectedOptionsByValue(valueField, selectedValues, previous, latestOptions) {
+		const byValueFromLatest = {};
+		latestOptions.forEach((option) => {
+			const value = option[valueField];
+			if (typeof value === "string") byValueFromLatest[value] = option;
+		});
+		const merged = {};
+		selectedValues.forEach((value) => {
+			const option = byValueFromLatest[value] || previous[value];
+			if (option) merged[value] = option;
+		});
+		return merged;
+	}
+	//#endregion
+	//#region src/core/selection-logic.ts
+	function applySelection(config, state, option) {
+		const valueField = config.valueField;
+		const optionValue = String(option[valueField]);
+		const selectedOptionsByValue = { ...state.selectedOptionsByValue };
+		if (config.multiple) {
+			if (state.selectedValues.includes(optionValue)) {
+				const selectedValues = state.selectedValues.filter((v) => v !== optionValue);
+				delete selectedOptionsByValue[optionValue];
+				return {
+					selectedValues,
+					selectedOptionsByValue,
+					inputValue: "",
+					tagEvent: "tagRemoved",
+					tagOption: option
+				};
+			}
+			const selectedValues = [...state.selectedValues, optionValue];
+			selectedOptionsByValue[optionValue] = option;
+			return {
+				selectedValues,
+				selectedOptionsByValue,
+				inputValue: "",
+				tagEvent: "tagAdded",
+				tagOption: option
+			};
+		}
+		return {
+			selectedValues: [optionValue],
+			selectedOptionsByValue: { [optionValue]: option },
+			inputValue: ""
+		};
+	}
+	function createOptionFromLabel(config, label) {
+		const value = label;
+		return {
+			value,
+			label,
+			[config.valueField]: value,
+			[config.displayField]: label
+		};
+	}
+	function removeLastSelection(config, state) {
+		const valueField = config.valueField;
+		const selectedValues = [...state.selectedValues];
+		const selectedOptionsByValue = { ...state.selectedOptionsByValue };
+		const removedValue = selectedValues.pop();
+		if (!removedValue) return {
+			selectedValues,
+			selectedOptionsByValue
+		};
+		const removedOption = state.options.find((o) => o[valueField] === removedValue) || selectedOptionsByValue[removedValue];
+		delete selectedOptionsByValue[removedValue];
+		return {
+			selectedValues,
+			selectedOptionsByValue,
+			removedOption
+		};
+	}
+	function reorderSelectedValues(state, from, to) {
+		if (!Number.isInteger(from) || !Number.isInteger(to)) return [...state.selectedValues];
+		if (from < 0 || to < 0 || from >= state.selectedValues.length || to >= state.selectedValues.length || from === to) return [...state.selectedValues];
+		const selectedValues = [...state.selectedValues];
+		const [movedItem] = selectedValues.splice(from, 1);
+		if (typeof movedItem === "undefined") return [...state.selectedValues];
+		selectedValues.splice(to, 0, movedItem);
+		return selectedValues;
+	}
+	function resolveSelectedOptions(config, state) {
+		const valueField = config.valueField;
+		const displayField = config.displayField;
+		return state.selectedValues.map((value) => state.options.find((o) => o[valueField] === value) || state.selectedOptionsByValue[value] || {
+			value,
+			label: value,
+			[valueField]: value,
+			[displayField]: value
+		});
+	}
+	function buildSelectedOptionsMapFromValues(config, state, values) {
+		const valueField = config.valueField;
+		const selectedOptionsByValue = {};
+		values.forEach((value) => {
+			const option = state.options.find((o) => o[valueField] === value) || state.selectedOptionsByValue[value];
+			if (option) selectedOptionsByValue[value] = option;
+		});
+		return selectedOptionsByValue;
+	}
+	//#endregion
+	//#region src/core/event-emitter.ts
+	var ThekSelectEventEmitter = class {
+		listeners = /* @__PURE__ */ new Map();
+		on(event, callback) {
+			if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
+			this.listeners.get(event).add(callback);
+			return () => this.off(event, callback);
+		}
+		off(event, callback) {
+			const callbacks = this.listeners.get(event);
+			if (!callbacks) return;
+			callbacks.delete(callback);
+			if (callbacks.size === 0) this.listeners.delete(event);
+		}
+		emit(event, data) {
+			if (!this.listeners.has(event)) return;
+			this.listeners.get(event).forEach((listener) => listener(data));
+		}
+	};
+	var globalEventManager = class GlobalEventManager {
+		static instance;
+		resizeListeners = /* @__PURE__ */ new Set();
+		scrollListeners = /* @__PURE__ */ new Set();
+		clickListeners = /* @__PURE__ */ new Set();
+		constructor() {
+			if (typeof window !== "undefined") {
+				window.addEventListener("resize", (e) => this.notify(this.resizeListeners, e));
+				window.addEventListener("scroll", (e) => this.notify(this.scrollListeners, e), true);
+				document.addEventListener("click", (e) => this.notify(this.clickListeners, e));
+			}
+		}
+		static getInstance() {
+			if (!GlobalEventManager.instance) GlobalEventManager.instance = new GlobalEventManager();
+			return GlobalEventManager.instance;
+		}
+		notify(listeners, event) {
+			listeners.forEach((callback) => callback(event));
+		}
+		onResize(callback) {
+			this.resizeListeners.add(callback);
+			return () => this.resizeListeners.delete(callback);
+		}
+		onScroll(callback) {
+			this.scrollListeners.add(callback);
+			return () => this.scrollListeners.delete(callback);
+		}
+		onClick(callback) {
+			this.clickListeners.add(callback);
+			return () => this.clickListeners.delete(callback);
+		}
+	}.getInstance();
+	//#endregion
+	exports.ThekSelect = class ThekSelect {
+		static globalDefaults = {};
+		config;
+		stateManager;
+		renderer;
+		id;
+		events = new ThekSelectEventEmitter();
+		originalElement;
+		unsubscribeEvents = [];
+		unsubscribeState;
+		remoteRequestId = 0;
+		isDestroyed = false;
+		focusTimeoutId = null;
+		constructor(element, config = {}) {
+			injectStyles();
+			const el = typeof element === "string" ? document.querySelector(element) : element;
+			if (!el) throw new Error("Element not found");
+			this.originalElement = el;
+			this.id = generateId();
+			this.config = buildConfig(this.originalElement, config, ThekSelect.globalDefaults);
+			this.stateManager = new StateManager(buildInitialState(this.config));
+			this.renderer = new DomRenderer(this.config, this.id, {
+				onSelect: (option) => this.handleSelect(option),
+				onCreate: (label) => this.handleCreate(label),
+				onRemove: (option) => this.handleSelect(option),
+				onReorder: (from, to) => this.handleReorder(from, to)
+			});
+			this.setupHandleSearch();
+			this.initialize();
+		}
+		static init(element, config = {}) {
+			return new ThekSelect(element, config);
+		}
+		static setDefaults(defaults) {
+			ThekSelect.globalDefaults = {
+				...ThekSelect.globalDefaults,
+				...defaults
+			};
+		}
+		static resetDefaults() {
+			ThekSelect.globalDefaults = {};
+		}
+		initialize() {
+			this.renderer.createDom();
+			this.setupListeners();
+			this.unsubscribeState = this.stateManager.subscribe(() => this.render());
+			this.render();
+			if (this.originalElement.parentNode) {
+				this.originalElement.style.display = "none";
+				this.originalElement.parentNode.insertBefore(this.renderer.wrapper, this.originalElement.nextSibling);
+			}
+		}
+		setupListeners() {
+			this.renderer.control.addEventListener("click", () => {
+				if (this.config.disabled) return;
+				this.toggleDropdown();
+			});
+			if (this.config.searchable) this.renderer.input.addEventListener("input", (e) => {
+				const value = e.target.value;
+				this.stateManager.setState({ inputValue: value });
+				this.handleSearch(value);
+			});
+			this.renderer.input.addEventListener("keydown", (e) => this.handleKeyDown(e));
+			this.unsubscribeEvents.push(globalEventManager.onClick((e) => {
+				const event = e;
+				if (!this.renderer.wrapper.contains(event.target) && !this.renderer.dropdown.contains(event.target)) this.closeDropdown();
+			}));
+			this.unsubscribeEvents.push(globalEventManager.onResize(() => this.renderer.positionDropdown()));
+			this.unsubscribeEvents.push(globalEventManager.onScroll(() => this.renderer.positionDropdown()));
+		}
+		handleSearch;
+		setupHandleSearch() {
+			this.handleSearch = debounce(async (query) => {
+				this.emit("search", query);
+				if (isRemoteMode(this.config)) if (query.length > 0) {
+					const requestId = ++this.remoteRequestId;
+					this.stateManager.setState({ isLoading: true });
+					try {
+						const options = await this.config.loadOptions(query);
+						if (this.isDestroyed || requestId !== this.remoteRequestId) return;
+						const state = this.stateManager.getState();
+						this.stateManager.setState({
+							options,
+							isLoading: false,
+							focusedIndex: 0,
+							selectedOptionsByValue: mergeSelectedOptionsByValue(this.config.valueField, state.selectedValues, state.selectedOptionsByValue, options)
+						});
+					} catch {
+						if (this.isDestroyed || requestId !== this.remoteRequestId) return;
+						this.stateManager.setState({ isLoading: false });
+					}
+				} else {
+					this.remoteRequestId++;
+					this.stateManager.setState({
+						options: this.config.options,
+						focusedIndex: -1,
+						isLoading: false
+					});
+				}
+				else this.stateManager.setState({ focusedIndex: 0 });
+			}, this.config.debounce);
+		}
+		handleKeyDown(e) {
+			const state = this.stateManager.getState();
+			const filteredOptions = getFilteredOptions(this.config, state);
+			const displayField = this.config.displayField;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					this.openDropdown();
+					const maxIndex = this.config.canCreate && state.inputValue && !filteredOptions.some((o) => o[displayField].toLowerCase() === state.inputValue.toLowerCase()) ? filteredOptions.length : filteredOptions.length - 1;
+					this.stateManager.setState({ focusedIndex: Math.min(state.focusedIndex + 1, maxIndex) });
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					this.stateManager.setState({ focusedIndex: Math.max(state.focusedIndex - 1, 0) });
+					break;
+				case "Enter":
+					e.preventDefault();
+					if (state.focusedIndex >= 0 && state.focusedIndex < filteredOptions.length) this.handleSelect(filteredOptions[state.focusedIndex]);
+					else if (this.config.canCreate && state.inputValue && state.focusedIndex === filteredOptions.length) this.handleCreate(state.inputValue);
+					break;
+				case "Escape":
+					this.closeDropdown();
+					break;
+				case "Backspace":
+					if (state.inputValue === "" && this.config.multiple && state.selectedValues.length > 0) this.handleRemoveLastSelection();
+					break;
+			}
+		}
+		toggleDropdown() {
+			if (this.stateManager.getState().isOpen) this.closeDropdown();
+			else this.openDropdown();
+		}
+		openDropdown() {
+			if (this.stateManager.getState().isOpen) return;
+			this.stateManager.setState({
+				isOpen: true,
+				focusedIndex: 0
+			});
+			this.renderer.positionDropdown();
+			if (this.config.searchable) this.focusTimeoutId = setTimeout(() => {
+				if (!this.isDestroyed) this.renderer.input.focus();
+			}, 10);
+			this.emit("open", null);
+		}
+		closeDropdown() {
+			if (!this.stateManager.getState().isOpen) return;
+			this.stateManager.setState({
+				isOpen: false,
+				focusedIndex: -1,
+				inputValue: ""
+			});
+			this.renderer.input.value = "";
+			this.emit("close", null);
+		}
+		handleSelect(option) {
+			if (option.disabled) return;
+			const state = this.stateManager.getState();
+			const update = applySelection(this.config, state, option);
+			if (!this.config.multiple) this.closeDropdown();
+			this.stateManager.setState({
+				selectedValues: update.selectedValues,
+				selectedOptionsByValue: update.selectedOptionsByValue,
+				inputValue: ""
+			});
+			this.renderer.input.value = "";
+			this.syncOriginalElement(update.selectedValues);
+			if (update.tagEvent && update.tagOption) this.emit(update.tagEvent, update.tagOption);
+			this.emit("change", this.getValue());
+		}
+		handleCreate(label) {
+			const newOption = createOptionFromLabel(this.config, label);
+			const state = this.stateManager.getState();
+			this.stateManager.setState({ options: [...state.options, newOption] });
+			this.handleSelect(newOption);
+		}
+		handleRemoveLastSelection() {
+			const state = this.stateManager.getState();
+			const update = removeLastSelection(this.config, state);
+			this.stateManager.setState({
+				selectedValues: update.selectedValues,
+				selectedOptionsByValue: update.selectedOptionsByValue
+			});
+			this.syncOriginalElement(update.selectedValues);
+			if (update.removedOption) this.emit("tagRemoved", update.removedOption);
+			this.emit("change", this.getValue());
+		}
+		handleReorder(from, to) {
+			const selectedValues = reorderSelectedValues(this.stateManager.getState(), from, to);
+			this.stateManager.setState({ selectedValues });
+			this.syncOriginalElement(selectedValues);
+			this.emit("reordered", selectedValues);
+			this.emit("change", this.getValue());
+		}
+		syncOriginalElement(values) {
+			if (this.originalElement instanceof HTMLSelectElement) {
+				const select = this.originalElement;
+				Array.from(select.options).forEach((opt) => {
+					opt.selected = values.includes(opt.value);
+				});
+				values.forEach((val) => {
+					if (!Array.from(select.options).some((opt) => opt.value === val)) {
+						const opt = new Option(val, val, true, true);
+						select.add(opt);
+					}
+				});
+				select.dispatchEvent(new Event("change", { bubbles: true }));
+			}
+		}
+		render() {
+			this.renderer.render(this.stateManager.getState(), getFilteredOptions(this.config, this.stateManager.getState()));
+		}
+		on(event, callback) {
+			return this.events.on(event, callback);
+		}
+		emit(event, data) {
+			this.events.emit(event, data);
+		}
+		getValue() {
+			const state = this.stateManager.getState();
+			return this.config.multiple ? state.selectedValues : state.selectedValues[0];
+		}
+		getSelectedOptions() {
+			const selected = resolveSelectedOptions(this.config, this.stateManager.getState());
+			return this.config.multiple ? selected : selected[0];
+		}
+		setValue(value, silent = false) {
+			const state = this.stateManager.getState();
+			const stringValues = (Array.isArray(value) ? value : [value]).filter((entry) => typeof entry === "string");
+			const values = this.config.multiple ? Array.from(new Set(stringValues)) : stringValues.slice(0, 1);
+			const selectedOptionsByValue = buildSelectedOptionsMapFromValues(this.config, state, values);
+			this.stateManager.setState({
+				selectedValues: values,
+				selectedOptionsByValue
+			});
+			this.syncOriginalElement(values);
+			if (!silent) this.emit("change", this.getValue());
+		}
+		setHeight(height) {
+			this.config.height = height;
+			this.renderer.setHeight(height);
+			this.renderer.positionDropdown();
+		}
+		setRenderOption(callback) {
+			this.config.renderOption = callback;
+			this.renderer.updateConfig({ renderOption: callback });
+			this.render();
+		}
+		setMaxOptions(max) {
+			this.config.maxOptions = max;
+			this.render();
+		}
+		destroy() {
+			this.isDestroyed = true;
+			this.remoteRequestId++;
+			this.handleSearch.cancel();
+			if (this.focusTimeoutId !== null) {
+				clearTimeout(this.focusTimeoutId);
+				this.focusTimeoutId = null;
+			}
+			if (this.unsubscribeState) {
+				this.unsubscribeState();
+				this.unsubscribeState = void 0;
+			}
+			this.unsubscribeEvents.forEach((unsub) => unsub());
+			this.unsubscribeEvents = [];
+			this.renderer.destroy();
+			this.originalElement.style.display = "";
+		}
+	};
+});