thekselect 1.0.0

package/dist/thekselect.js

@@ -0,0 +1,1169 @@
+//#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
+//#region src/core/thekselect.ts
+var 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 = "";
+	}
+};
+//#endregion
+export { ThekSelect };