@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/esm/ds-select.entry.js

@@ -0,0 +1,2770 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, v as defaultConfig, D as raf, E as h$1, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
+import { s as stopEventBubbling } from './form-control-DvJo0GKN.js';
+import { F as Field } from './field.util-BjZzAi09.js';
+import { I as INPUT_COLORS } from './input.interfaces-BMM6Nxeh.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import { O as OneOf } from './one-of-CKPv0Nqm.js';
+import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
+import './aria-DYfTMCkl.js';
+import './label.i18n-C7I7OlaM.js';
+import './create-validator-decorator-DovxquEu.js';
+import './config.utils-D9o7rffC.js';
+
+//#region src/slim-select/classes.ts
+var e = class {
+	main;
+	placeholder;
+	values;
+	single;
+	multiString;
+	max;
+	value;
+	valueText;
+	valueDelete;
+	valueOut;
+	deselect;
+	deselectPath;
+	arrow;
+	arrowClose;
+	arrowOpen;
+	content;
+	contentOpen;
+	dirAbove;
+	dirBelow;
+	search;
+	searchHighlighter;
+	searching;
+	status;
+	addable;
+	addablePath;
+	list;
+	optgroup;
+	optgroupLabel;
+	optgroupLabelText;
+	optgroupActions;
+	optgroupSelectAll;
+	optgroupSelectAllBox;
+	optgroupSelectAllCheck;
+	optgroupClosable;
+	option;
+	optionDelete;
+	highlighted;
+	modalOverlay;
+	modalDialog;
+	modalTitle;
+	modalClose;
+	modalContent;
+	mainOpen;
+	close;
+	selected;
+	error;
+	disabled;
+	hide;
+	constructor(e) {
+		e ||= {};
+		let t = (e = "", t = "") => `${e} ${t}`.trim();
+		this.main = t("ss-main", e.main), this.placeholder = t("ss-placeholder", e.placeholder), this.values = t("ss-values", e.values), this.single = t("ss-single", e.single), this.multiString = t("ss-multi-string", e.multiString), this.max = t("ss-max", e.max), this.value = t("ss-value", e.value), this.valueText = t("ss-value-text", e.valueText), this.valueDelete = t("ss-value-delete", e.valueDelete), this.valueOut = t("ss-value-out", e.valueOut), this.deselect = t("ss-deselect", e.deselect), this.deselectPath = e.deselectPath || "M10,10 L90,90 M10,90 L90,10", this.arrow = t("ss-arrow", e.arrow), this.arrowClose = e.arrowClose || "M10,30 L50,70 L90,30", this.arrowOpen = e.arrowOpen || "M10,70 L50,30 L90,70", this.content = t("ss-content", e.content), this.contentOpen = t("ss-open", e.contentOpen), this.dirAbove = t("ss-dir-above", e.dirAbove), this.dirBelow = t("ss-dir-below", e.dirBelow), this.search = t("ss-search", e.search), this.searchHighlighter = t("ss-search-highlight", e.searchHighlighter), this.searching = t("ss-searching", e.searching), this.status = t("ss-status", e.status), this.addable = t("ss-addable", e.addable), this.addablePath = e.addablePath || "M50,10 L50,90 M10,50 L90,50", this.list = t("ss-list", e.list), this.optgroup = t("ss-optgroup", e.optgroup), this.optgroupLabel = t("ss-optgroup-label", e.optgroupLabel), this.optgroupLabelText = t("ss-optgroup-label-text", e.optgroupLabelText), this.optgroupActions = t("ss-optgroup-actions", e.optgroupActions), this.optgroupSelectAll = t("ss-selectall", e.optgroupSelectAll), this.optgroupSelectAllBox = e.optgroupSelectAllBox || "M60,10 L10,10 L10,90 L90,90 L90,50", this.optgroupSelectAllCheck = e.optgroupSelectAllCheck || "M30,45 L50,70 L90,10", this.optgroupClosable = t("ss-closable", e.optgroupClosable), this.option = t("ss-option", e.option), this.optionDelete = e.optionDelete || "M10,10 L90,90 M10,90 L90,10", this.highlighted = t("ss-highlighted", e.highlighted), this.modalOverlay = t("ss-modal-overlay", e.modalOverlay), this.modalDialog = t("ss-modal-dialog", e.modalDialog), this.modalTitle = t("ss-modal-title", e.modalTitle), this.modalClose = t("ss-modal-close", e.modalClose), this.modalContent = t("ss-modal-content", e.modalContent), this.mainOpen = t("ss-open", e.mainOpen), this.close = t("ss-close", e.close), this.selected = t("ss-selected", e.selected), this.error = t("ss-error", e.error), this.disabled = t("ss-disabled", e.disabled), this.hide = t("ss-hide", e.hide);
+	}
+	getFirst(e) {
+		return this[e].split(" ")[0];
+	}
+}, t = 200, n = ["transform", "opacity"];
+function r(e, n = t) {
+	let r = e.trim();
+	if (!r) return n;
+	if (r.endsWith("ms")) {
+		let e = parseFloat(r);
+		return Number.isNaN(e) ? n : e;
+	}
+	if (r.endsWith("s")) {
+		let e = parseFloat(r);
+		return Number.isNaN(e) ? n : e * 1e3;
+	}
+	let i = parseFloat(r);
+	return Number.isNaN(i) ? n : i;
+}
+function i(e, n = t) {
+	return r(getComputedStyle(e).getPropertyValue("--ss-animation-timing").trim(), n);
+}
+function a(e, n, r = t) {
+	let a = i(e, r) + 50;
+	return n === void 0 ? a : Math.max(a, n);
+}
+function o() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? false : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function s(e) {
+	return e === void 0 ? null : new Set(Array.isArray(e) ? e : [e]);
+}
+function c(e, n, r = t, i) {
+	if (o() || i?.aborted) return Promise.resolve();
+	let a = s(n);
+	return new Promise((t) => {
+		let n = null, o = false, s = () => {
+			o || (o = true, e.removeEventListener("transitionend", l), i?.removeEventListener("abort", c), n && clearTimeout(n), t());
+		}, c = () => s(), l = (t) => {
+			t.target === e && (a && (!a.has(t.propertyName) || (a.delete(t.propertyName), a.size > 0)) || s());
+		};
+		i?.addEventListener("abort", c, { once: true }), e.addEventListener("transitionend", l), n = setTimeout(s, r);
+	});
+}
+function l(e, n, r = t, i) {
+	return o() || i?.aborted ? Promise.resolve() : new Promise((t) => {
+		let a = null, o = false, s = () => {
+			o || (o = true, e.removeEventListener("animationend", l), a && clearTimeout(a), t());
+		}, l = (t) => {
+			t.target === e && (t.animationName !== n || s());
+		};
+		e.addEventListener("animationend", l), a = setTimeout(s, r);
+	});
+}
+//#endregion
+//#region src/slim-select/settings.ts
+var d = class {
+	id = "";
+	style = "";
+	class = [];
+	isMultiple = false;
+	isOpen = false;
+	isFullOpen = false;
+	disabled;
+	alwaysOpen;
+	showSearch;
+	focusSearch;
+	keepSearch;
+	ariaLabel;
+	searchPlaceholder;
+	searchText;
+	searchingText;
+	resultsText;
+	deselectText;
+	removeText;
+	searchHighlight;
+	closeOnSelect;
+	contentLocation;
+	contentPosition;
+	contentWidth;
+	openPosition;
+	placeholderText;
+	allowDeselect;
+	hideSelected;
+	multiString;
+	keepOrder;
+	showOptionTooltips;
+	minSelected;
+	maxSelected;
+	timeoutDelay;
+	maxValuesShown;
+	maxValuesMessage;
+	addableText;
+	modal;
+	modalTitle;
+	constructor(e) {
+		e ||= {}, this.id = "ss-" + h(), this.style = e.style || "", this.class = e.class || [], this.disabled = e.disabled !== void 0 && e.disabled, this.alwaysOpen = e.alwaysOpen !== void 0 && e.alwaysOpen, this.showSearch = e.showSearch === void 0 || e.showSearch, this.focusSearch = e.focusSearch === void 0 || e.focusSearch, this.keepSearch = e.keepSearch !== void 0 && e.keepSearch, this.ariaLabel = e.ariaLabel || "Combobox", this.searchPlaceholder = e.searchPlaceholder || "Search...", this.searchText = e.searchText || "No Results", this.searchingText = e.searchingText || "Searching...", this.resultsText = e.resultsText || "{count} results available", this.deselectText = e.deselectText || "Clear", this.removeText = e.removeText || "Remove", this.searchHighlight = e.searchHighlight !== void 0 && e.searchHighlight, this.closeOnSelect = e.closeOnSelect === void 0 || e.closeOnSelect, this.contentLocation = e.contentLocation || document.body, this.contentPosition = e.contentPosition || "absolute", this.contentWidth = e.contentWidth || "", this.openPosition = e.openPosition || "auto", this.placeholderText = e.placeholderText === void 0 ? "Select Value" : e.placeholderText, this.allowDeselect = e.allowDeselect !== void 0 && e.allowDeselect, this.hideSelected = e.hideSelected !== void 0 && e.hideSelected, this.multiString = e.multiString !== void 0 && e.multiString, this.keepOrder = e.keepOrder !== void 0 && e.keepOrder, this.showOptionTooltips = e.showOptionTooltips !== void 0 && e.showOptionTooltips, this.minSelected = e.minSelected || 0, this.maxSelected = e.maxSelected || 1e3, this.timeoutDelay = e.timeoutDelay || 200, this.maxValuesShown = e.maxValuesShown || 20, this.maxValuesMessage = e.maxValuesMessage || "{number} selected", this.addableText = e.addableText || "Press \"Enter\" to add {value}", this.modal = e.modal || "mobile", this.modalTitle = e.modalTitle || "";
+	}
+};
+//#endregion
+//#region src/slim-select/helpers.ts
+function f(e) {
+	if (!e) return {};
+	let t = {};
+	for (let n of Object.keys(e)) {
+		let r = e[n];
+		r !== void 0 && (t[n] = r);
+	}
+	return t;
+}
+function p(e) {
+	let t = e.cloneNode(true);
+	return t.querySelectorAll("select, option, optgroup, textarea, input, button").forEach((e) => e.remove()), t.textContent?.replace(/\s+/g, " ").trim() || "";
+}
+function m(e) {
+	if (e.labels && e.labels.length > 0) {
+		let t = Array.from(e.labels).map(p).filter(Boolean);
+		if (t.length > 0) return [...new Set(t)].join(" ");
+	}
+	return e.getAttribute("aria-label")?.trim() || "";
+}
+function h() {
+	return Math.random().toString(36).substring(2, 10);
+}
+function g(e, t) {
+	function n(e, n) {
+		return n && e && e.classList && e.classList.contains(n) || n && e && e.dataset && e.dataset.id && e.dataset.id === t ? e : null;
+	}
+	function r(e, t) {
+		return !e || e === document ? null : n(e, t) ? e : r(e.parentNode, t);
+	}
+	return n(e, t) || r(e, t);
+}
+function _(e, t = 50, n = false) {
+	let r;
+	return function(...i) {
+		let a = self, o = () => {
+			r = null, n || e.apply(a, i);
+		}, s = n && !r;
+		clearTimeout(r), r = setTimeout(o, t), s && e.apply(a, i);
+	};
+}
+function v(e, t) {
+	if (e.length !== t.length) return false;
+	let n = [...e].sort(), r = [...t].sort();
+	return n.every((e, t) => e === r[t]);
+}
+var y = [
+	"id",
+	"value",
+	"text",
+	"html",
+	"defaultSelected",
+	"selected",
+	"display",
+	"disabled",
+	"placeholder",
+	"class",
+	"style",
+	"mandatory"
+];
+function b(e, t) {
+	let n = Object.keys(e), r = Object.keys(t);
+	if (n.length !== r.length) return false;
+	for (let r of n) if (e[r] !== t[r]) return false;
+	return true;
+}
+function x(e, t) {
+	switch (t) {
+		case "id": return e.id || "";
+		case "value": return e.value === void 0 ? e.text || "" : e.value || "";
+		case "text": return e.text || "";
+		case "html": return e.html || "";
+		case "defaultSelected": return e.defaultSelected ?? false;
+		case "selected": return e.selected ?? false;
+		case "display": return e.display ?? true;
+		case "disabled": return e.disabled ?? false;
+		case "placeholder": return e.placeholder ?? false;
+		case "class": return e.class || "";
+		case "style": return e.style || "";
+		case "mandatory": return e.mandatory ?? false;
+		default: return e.data || {};
+	}
+}
+function S(e) {
+	return !!e && typeof e == "object" && "label" in e && "options" in e;
+}
+function C(e, t) {
+	for (let n of y) if (x(e, n) !== x(t, n)) return false;
+	return b(e.data || {}, t.data || {});
+}
+function w(e, t) {
+	let n = (e) => ({
+		id: e.id || "",
+		label: e.label || "",
+		selectAll: e.selectAll ?? false,
+		closable: e.closable || "off"
+	}), r = n(e), i = n(t);
+	if (r.id !== i.id || r.label !== i.label || r.selectAll !== i.selectAll || r.closable !== i.closable) return false;
+	let a = e.options || [], o = t.options || [];
+	if (a.length !== o.length) return false;
+	for (let e = 0; e < a.length; e++) if (!C(a[e], o[e])) return false;
+	return true;
+}
+function T(e, t) {
+	if (e === t) return true;
+	if (e.length !== t.length) return false;
+	for (let n = 0; n < e.length; n++) {
+		let r = e[n], i = t[n], a = S(r);
+		if (a !== S(i)) return false;
+		if (a) {
+			if (!w(r, i)) return false;
+			continue;
+		}
+		if (!C(r, i)) return false;
+	}
+	return true;
+}
+function E(e) {
+	let t = e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (e) => "-" + e.toLowerCase());
+	return e[0] === e[0].toUpperCase() ? t.substring(1) : t;
+}
+function D(e, t = typeof window < "u" ? window.innerWidth : 768) {
+	return e === "on" || e === "mobile" && t < 768;
+}
+//#endregion
+//#region src/slim-select/events.ts
+var O = class {
+	handlers;
+	attached = false;
+	constructor(e) {
+		this.handlers = e;
+	}
+	attach(e) {
+		this.attached || (this.attached = true, window.addEventListener("resize", this.resizeHandler, false), e.listenScroll && window.addEventListener("scroll", this.scrollHandler, false), document.addEventListener("visibilitychange", this.visibilityHandler));
+	}
+	attachDocumentClick() {
+		document.addEventListener("click", this.handlers.onDocumentClick);
+	}
+	detachDocumentClick() {
+		document.removeEventListener("click", this.handlers.onDocumentClick);
+	}
+	detach(e) {
+		this.attached && (this.attached = false, this.detachDocumentClick(), window.removeEventListener("resize", this.resizeHandler, false), e.listenScroll && window.removeEventListener("scroll", this.scrollHandler, false), document.removeEventListener("visibilitychange", this.visibilityHandler));
+	}
+	resizeHandler = _(() => {
+		this.handlers.onWindowResize();
+	});
+	scrollHandler = _(() => {
+		this.handlers.onWindowScroll();
+	});
+	visibilityHandler = () => {
+		this.handlers.onVisibilityChange();
+	};
+}, k = class {
+	handlers;
+	options;
+	state = "closed";
+	pendingTimer = null;
+	waitResolvers = [];
+	generation = 0;
+	animationAbort = null;
+	constructor(e, t) {
+		this.handlers = e, this.options = t;
+	}
+	get isOpen() {
+		return this.state === "opening" || this.state === "open";
+	}
+	get isFullOpen() {
+		return this.state === "open";
+	}
+	async requestOpen() {
+		if (this.state === "opening" || this.state === "open") return;
+		this.cancelPending();
+		let e = ++this.generation;
+		if (this.handlers.beforeOpen && this.handlers.beforeOpen(), this.state = "opening", await this.waitForPhase("open", e), e !== this.generation) {
+			this.state === "opening" && (this.state = "closed");
+			return;
+		}
+		this.state = "open", this.handlers.afterOpen && this.handlers.afterOpen(), this.handlers.onOpenReady && this.handlers.onOpenReady();
+	}
+	async requestClose(e = {
+		source: "api",
+		selectionChanged: false
+	}) {
+		if (this.state === "closed" || this.state === "closing" || this.handlers.beforeClose && this.handlers.beforeClose(e) === false) return false;
+		this.cancelPending();
+		let t = ++this.generation;
+		return this.handlers.onClose && this.handlers.onClose(e), this.state = "closing", await this.waitForPhase("close", t), t === this.generation ? (this.state = "closed", this.handlers.afterClose && this.handlers.afterClose(), this.handlers.onCloseReady && this.handlers.onCloseReady(), true) : false;
+	}
+	cancelPending() {
+		this.generation++, this.animationAbort?.abort(), this.animationAbort = null, this.pendingTimer &&= (clearTimeout(this.pendingTimer), null);
+		let e = this.waitResolvers.splice(0);
+		for (let t of e) t();
+	}
+	destroy() {
+		this.cancelPending(), this.state = "closed";
+	}
+	waitForPhase(e, t) {
+		return new Promise((t) => {
+			let n = false, r = () => {
+				if (n) return;
+				n = true;
+				let e = this.waitResolvers.indexOf(r);
+				e !== -1 && this.waitResolvers.splice(e, 1), t();
+			};
+			if (this.waitResolvers.push(r), this.options.waitForAnimation) {
+				let t = new AbortController();
+				this.animationAbort = t, this.options.waitForAnimation(e, t.signal).catch(() => void 0).finally(() => {
+					this.animationAbort === t && (this.animationAbort = null), r();
+				});
+			} else this.pendingTimer = setTimeout(() => {
+				this.pendingTimer = null, r();
+			}, this.options.timeoutDelay);
+		}).then(() => {
+		});
+	}
+}, A = class {
+	id;
+	value;
+	text;
+	html;
+	defaultSelected;
+	selected;
+	display;
+	disabled;
+	placeholder;
+	class;
+	style;
+	data;
+	mandatory;
+	constructor(e) {
+		this.id = !e.id || e.id === "" ? h() : e.id, this.value = e.value === void 0 ? e.text || "" : e.value || "", this.text = e.text || "", this.html = e.html || "", this.defaultSelected = e.defaultSelected !== void 0 && e.defaultSelected, this.selected = e.selected !== void 0 && e.selected, this.display = e.display === void 0 || e.display, this.disabled = e.disabled !== void 0 && e.disabled, this.mandatory = e.mandatory !== void 0 && e.mandatory, this.placeholder = e.placeholder !== void 0 && e.placeholder, this.class = e.class || "", this.style = e.style || "", this.data = f(e.data);
+	}
+}, j = class {
+	id;
+	label;
+	selectAll;
+	closable;
+	options;
+	constructor(e) {
+		if (this.id = !e.id || e.id === "" ? h() : e.id, this.label = e.label || "", this.selectAll = e.selectAll !== void 0 && e.selectAll, this.closable = e.closable || "off", this.options = [], e.options) for (let t of e.options) this.options.push(new A(t));
+	}
+}, M = class {
+	selectType = "single";
+	data = [];
+	selectedOrder = [];
+	catalog = null;
+	constructor(e, t) {
+		this.selectType = e, this.setData(t), this.snapshotCatalog();
+	}
+	validateDataArray(e) {
+		if (!Array.isArray(e)) return /* @__PURE__ */ Error("Data must be an array");
+		for (let t of e) if (t) if (t instanceof j || "label" in t) {
+			if (!("label" in t)) return /* @__PURE__ */ Error("Optgroup must have a label");
+			if ("options" in t && t.options) for (let e of t.options) {
+				let t = this.validateOption(e);
+				if (t) return t;
+			}
+		} else if (t instanceof A || "text" in t) {
+			let e = this.validateOption(t);
+			if (e) return e;
+		} else return /* @__PURE__ */ Error("Data object must be a valid optgroup or option");
+		return null;
+	}
+	validateOption(e) {
+		return "text" in e ? null : /* @__PURE__ */ Error("Option must have a text");
+	}
+	partialToFullData(e) {
+		let t = [];
+		return e.forEach((e) => {
+			if (e) {
+				if (e instanceof j || "label" in e) {
+					let n = [];
+					"options" in e && e.options && e.options.forEach((e) => {
+						n.push(new A(e));
+					}), n.length > 0 && t.push(new j(e));
+				}
+				(e instanceof A || "text" in e) && t.push(new A(e));
+			}
+		}), t;
+	}
+	snapshotCatalog() {
+		this.catalog = this.cloneData(this.data);
+	}
+	getCatalogData() {
+		return this.cloneData(this.catalog ?? this.data);
+	}
+	cloneData(e) {
+		return e.map((e) => e instanceof j ? new j({
+			id: e.id,
+			label: e.label,
+			selectAll: e.selectAll,
+			closable: e.closable,
+			options: e.options.map((e) => new A(e instanceof A ? { ...e } : e))
+		}) : new A({ ...e }));
+	}
+	optionMatchesSelected(e, t) {
+		return e.id === t.id || t.value !== "" && e.value !== "" && e.value === t.value;
+	}
+	findOptionInData(e, t) {
+		for (let n of e) {
+			if (n instanceof A) {
+				if (this.optionMatchesSelected(n, t)) return n;
+				continue;
+			}
+			for (let e of n.options) if (this.optionMatchesSelected(e, t)) return e;
+		}
+		return null;
+	}
+	setData(e, t = false) {
+		let n = this.partialToFullData(e), r = [];
+		if (t) {
+			r = this.getSelectedOptions();
+			let e = [];
+			r.forEach((t) => {
+				this.findOptionInData(n, t) || e.push(t);
+			}), this.data = [...e, ...n];
+			let t = this.selectType === "single" && r.length === 0, i = r.map((e) => {
+				let t = this.findOptionInData(this.data, e);
+				return t ? t.id : e.id;
+			});
+			this.setSelectedBy("id", i, t);
+		} else this.data = n;
+		!t && this.selectType === "single" && this.setSelectedBy("id", this.getSelected(), false);
+	}
+	getData(e = true) {
+		return this.filter(null, true, e);
+	}
+	getDataOptions(e = true) {
+		return this.filter(null, false, e);
+	}
+	addOption(e, t = false) {
+		if (t) {
+			let t = [new A(e)];
+			this.setData(t.concat(this.getData()));
+		} else this.setData(this.getData().concat(new A(e)));
+	}
+	setSelectedBy(e, t, n = false) {
+		let r = null, i = false, a = [];
+		for (let n of this.data) {
+			if (n instanceof j) for (let o of n.options) {
+				r ||= o;
+				let n = o[e] || "";
+				o.selected = !i && t.includes(n), o.selected && (a.push(o), this.selectType === "single" && (i = true));
+			}
+			n instanceof A && (r ||= n, n.selected = !i && t.includes(n[e]), n.selected && (a.push(n), this.selectType === "single" && (i = true)));
+		}
+		this.selectType === "single" && r && !i && !n && (r.selected = true, a.push(r));
+		let o = t.map((t) => a.find((n) => n[e] === t)?.id || "");
+		this.selectedOrder = o;
+	}
+	getSelected() {
+		return this.getSelectedOptions().map((e) => e.id);
+	}
+	getSelectedValues() {
+		return this.getSelectedOptions().map((e) => e.value);
+	}
+	getSelectedOptions() {
+		let e = [];
+		for (let t of this.data) if (t instanceof j) for (let n of t.options) n.selected && e.push(n);
+		else t.selected && e.push(t);
+		return e;
+	}
+	getOptgroupByID(e) {
+		for (let t of this.data) if (t instanceof j && t.id === e) return t;
+		return null;
+	}
+	getOptionByID(e) {
+		for (let t of this.data) if (t instanceof j) {
+			for (let n of t.options) if (n.id === e) return n;
+		} else if (t.id === e) return t;
+		return null;
+	}
+	getSelectType() {
+		return this.selectType;
+	}
+	getFirstOption() {
+		let e = null;
+		for (let t of this.data) if (t instanceof j ? e = t.options[0] : t instanceof A && (e = t), e) break;
+		return e;
+	}
+	search(e, t) {
+		return e = e.trim(), e === "" ? this.getData(false) : this.filter((n) => t(n, e), true, false);
+	}
+	createOptgroupView(e, t) {
+		let n = new j({
+			id: e.id,
+			label: e.label,
+			selectAll: e.selectAll,
+			closable: e.closable,
+			options: []
+		});
+		return n.options = t, n;
+	}
+	filter(e, t, n = true) {
+		let r = [];
+		return this.data.forEach((i) => {
+			if (i instanceof j) {
+				let a = [];
+				if (i.options.forEach((i) => {
+					(!e || e(i)) && (t ? a.push(n ? new A(i) : i) : r.push(n ? new A(i) : i));
+				}), a.length > 0) if (n) {
+					let e = new j(i);
+					e.options = a, r.push(e);
+				} else r.push(this.createOptgroupView(i, a));
+			}
+			i instanceof A && (!e || e(i)) && r.push(n ? new A(i) : i);
+		}), r;
+	}
+	selectedOrderOptions(e) {
+		let t = [];
+		return this.selectedOrder.forEach((n) => {
+			let r = e.find((e) => e.id === n);
+			r && t.push(r);
+		}), e.forEach((e) => {
+			let n = false;
+			t.forEach((t) => {
+				if (e.id === t.id) {
+					n = true;
+					return;
+				}
+			}), n || t.push(e);
+		}), t;
+	}
+}, N = class {
+	settings;
+	store;
+	callbacks;
+	lastSelectedOption;
+	lastRenderedOptions;
+	optionsListIsFullData = false;
+	lastSearchFilterTerm = "";
+	main;
+	content;
+	classes;
+	positionObserver = null;
+	positionObserverRaf = 0;
+	overflowShiftRaf = 0;
+	modalElements = null;
+	modalSessionActive = null;
+	bodyScrollLocked = false;
+	savedBodyOverflow = "";
+	constructor(e, t, n, r) {
+		this.store = n, this.settings = e, this.classes = t, this.callbacks = r, this.lastSelectedOption = null, this.lastRenderedOptions = [], this.main = this.mainDiv(), this.content = this.contentDiv(), this.updateClassStyles(), this.updateAriaAttributes(), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto"), this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main), this.settings.modal !== "off" && !this.settings.alwaysOpen && (this.modalElements = this.createModalElements(), document.body.appendChild(this.modalElements.overlay));
+	}
+	requestClose(e, t) {
+		this.callbacks.close({
+			source: e,
+			option: t?.option,
+			selectionChanged: t?.selectionChanged ?? false
+		});
+	}
+	selectionChanged(e, t) {
+		if (e.length !== t.length) return true;
+		let n = e.map((e) => e.id).sort(), r = t.map((e) => e.id).sort();
+		return n.some((e, t) => e !== r[t]);
+	}
+	closeOnSingleSelectReclick(e) {
+		this.settings.closeOnSelect && this.requestClose("select", {
+			option: e,
+			selectionChanged: false
+		});
+	}
+	addClasses(e, t) {
+		if (!t || t.trim() === "") return;
+		let n = t.split(" ").filter((e) => e.trim() !== "");
+		for (let t of n) e.classList.add(t.trim());
+	}
+	removeClasses(e, t) {
+		if (!t || t.trim() === "") return;
+		let n = t.split(" ").filter((e) => e.trim() !== "");
+		for (let t of n) e.classList.remove(t.trim());
+	}
+	enable() {
+		this.removeClasses(this.main.main, this.classes.disabled), this.main.main.setAttribute("aria-disabled", "false"), this.content.search.input.disabled = false;
+	}
+	disable() {
+		this.addClasses(this.main.main, this.classes.disabled), this.main.main.setAttribute("aria-disabled", "true"), this.content.search.input.disabled = true;
+	}
+	open() {
+		this.main.arrow.path.setAttribute("d", this.classes.arrowOpen), this.main.main.setAttribute("aria-expanded", "true");
+		let e = this.resolveModalView();
+		if (!e) {
+			let e = this.settings.openPosition === "up" ? this.classes.dirAbove : this.classes.dirBelow;
+			this.addClasses(this.main.main, e), this.addClasses(this.content.main, e);
+		}
+		this.addClasses(this.content.main, this.classes.contentOpen), this.content.search.input.removeAttribute("aria-hidden"), e ? this.showModal() : this.moveContent();
+		let t = this.store.getSelectedOptions();
+		if (t.length) {
+			let e = t[t.length - 1].id, n = this.content.list.querySelector("[data-id=\"" + e + "\"]");
+			n && this.ensureElementInView(this.content.list, n);
+		}
+	}
+	isModalViewActive() {
+		return this.modalSessionActive === true;
+	}
+	resolveModalView() {
+		return this.settings.alwaysOpen || this.settings.modal === "off" || !this.modalElements ? false : (this.modalSessionActive === null && (this.modalSessionActive = D(this.settings.modal)), this.modalSessionActive);
+	}
+	createModalElements() {
+		let e = document.createElement("div");
+		this.addClasses(e, this.classes.modalOverlay), this.addClasses(e, this.classes.hide), e.dataset.id = this.settings.id;
+		let t = document.createElement("div");
+		this.addClasses(t, this.classes.modalDialog), t.setAttribute("role", "dialog"), t.setAttribute("aria-modal", "true");
+		let n = null;
+		this.settings.modalTitle ? (n = document.createElement("div"), this.addClasses(n, this.classes.modalTitle), n.id = `${this.settings.id}-modal-title`, n.textContent = this.settings.modalTitle, t.setAttribute("aria-labelledby", n.id)) : t.setAttribute("aria-label", this.settings.ariaLabel);
+		let r = document.createElement("button");
+		r.type = "button", this.addClasses(r, this.classes.modalClose), r.setAttribute("aria-label", "Close"), r.onclick = (e) => {
+			e.stopPropagation(), this.requestClose("modal");
+		};
+		let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		i.setAttribute("viewBox", "0 0 100 100");
+		let a = document.createElementNS("http://www.w3.org/2000/svg", "path");
+		return a.setAttribute("d", this.classes.deselectPath), i.appendChild(a), r.appendChild(i), e.onclick = (t) => {
+			t.target === e && this.requestClose("modal");
+		}, n && t.appendChild(n), e.appendChild(t), {
+			overlay: e,
+			dialog: t,
+			closeButton: r,
+			title: n
+		};
+	}
+	showModal() {
+		this.modalElements && (this.modalElements.dialog.appendChild(this.content.main), this.addClasses(this.content.main, this.classes.modalContent), this.content.main.appendChild(this.modalElements.closeButton), this.content.main.style.top = "", this.content.main.style.left = "", this.content.main.style.margin = "", this.content.main.style.width = "", this.removeClasses(this.modalElements.overlay, this.classes.hide), requestAnimationFrame(() => {
+			this.modalElements && this.addClasses(this.modalElements.overlay, this.classes.contentOpen);
+		}), this.lockBodyScroll());
+	}
+	lockBodyScroll() {
+		this.bodyScrollLocked ||= (this.savedBodyOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", true);
+	}
+	unlockBodyScroll() {
+		this.bodyScrollLocked && (document.body.style.overflow = this.savedBodyOverflow, this.bodyScrollLocked = false, this.savedBodyOverflow = "");
+	}
+	restoreContentOffscreen() {
+		this.settings.contentLocation && this.settings.contentLocation.appendChild(this.content.main), this.settings.contentPosition !== "relative" && (this.content.main.style.top = "-9999px", this.content.main.style.left = "-9999px", this.content.main.style.margin = "0", this.content.main.style.width = "auto");
+	}
+	finalizeModalClose() {
+		this.modalElements && this.content.main.parentElement === this.modalElements.dialog && (this.addClasses(this.modalElements.overlay, this.classes.hide), this.removeClasses(this.modalElements.overlay, this.classes.contentOpen), this.removeClasses(this.content.main, this.classes.modalContent), this.modalElements.closeButton.remove(), this.restoreContentOffscreen(), this.unlockBodyScroll());
+	}
+	waitForAnimation(e, t) {
+		let r = a(this.content.main, this.settings.timeoutDelay);
+		return c(this.content.main, n, r, t);
+	}
+	close() {
+		this.main.main.setAttribute("aria-expanded", "false"), this.main.arrow.path.setAttribute("d", this.classes.arrowClose);
+		let e = this.modalSessionActive === true;
+		this.removeClasses(this.content.main, this.classes.contentOpen), e || (this.removeClasses(this.main.main, this.classes.dirAbove), this.removeClasses(this.main.main, this.classes.dirBelow)), e && this.modalElements && this.removeClasses(this.modalElements.overlay, this.classes.contentOpen), this.modalSessionActive = null, this.content.search.input.setAttribute("aria-hidden", "true"), this.main.main.removeAttribute("aria-activedescendant");
+	}
+	clearDirectionClasses() {
+		this.removeClasses(this.main.main, this.classes.dirAbove), this.removeClasses(this.main.main, this.classes.dirBelow), this.removeClasses(this.content.main, this.classes.dirAbove), this.removeClasses(this.content.main, this.classes.dirBelow);
+	}
+	updateClassStyles() {
+		if (this.main.main.className = "", this.main.main.removeAttribute("style"), this.content.main.className = "", this.content.main.removeAttribute("style"), this.addClasses(this.main.main, this.classes.main), this.addClasses(this.content.main, this.classes.content), this.settings.style !== "" && (this.main.main.style.cssText = this.settings.style, this.content.main.style.cssText = this.settings.style), this.settings.class.length) for (let e of this.settings.class) e.trim() !== "" && (this.main.main.classList.add(e.trim()), this.content.main.classList.add(e.trim()));
+		(this.settings.contentPosition === "relative" || this.settings.contentPosition === "fixed") && this.content.main.classList.add("ss-" + this.settings.contentPosition);
+	}
+	updateAriaAttributes() {
+		let e = this.content.list.id;
+		this.main.main.role = "combobox", this.main.main.setAttribute("aria-haspopup", "listbox"), this.main.main.setAttribute("aria-controls", e), this.main.main.setAttribute("aria-expanded", "false"), this.content.list.setAttribute("role", "listbox"), this.content.list.setAttribute("aria-label", this.settings.ariaLabel + " listbox"), this.settings.isMultiple && this.content.list.setAttribute("aria-multiselectable", "true"), this.content.search.input.setAttribute("aria-controls", e);
+	}
+	mainDiv() {
+		let e = document.createElement("div");
+		e.dataset.id = this.settings.id, e.setAttribute("aria-label", this.settings.ariaLabel), e.tabIndex = 0, e.onkeydown = (e) => {
+			switch (e.key) {
+				case "ArrowUp":
+				case "ArrowDown": return this.callbacks.open(), e.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), false;
+				case "Tab": return this.requestClose("tab"), true;
+				case "Enter":
+				case " ":
+					this.callbacks.open();
+					let t = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
+					return t && t.click(), false;
+				case "Escape": return this.requestClose("escape"), false;
+			}
+			return e.key.length === 1 && this.callbacks.open(), true;
+		}, e.onclick = (e) => {
+			this.settings.disabled || (this.settings.isOpen ? this.requestClose("toggle") : this.callbacks.open());
+		};
+		let t = document.createElement("div");
+		this.addClasses(t, this.classes.values), e.appendChild(t);
+		let n = document.createElement("div");
+		this.addClasses(n, this.classes.deselect), n.setAttribute("role", "button"), n.setAttribute("aria-label", this.settings.deselectText), n.setAttribute("tabindex", "0");
+		let r = this.store?.getSelectedOptions();
+		!this.settings.allowDeselect || this.settings.isMultiple && r && r.length <= 0 || this.isAtMinSelected() ? this.addClasses(n, this.classes.hide) : this.removeClasses(n, this.classes.hide), n.onclick = (e) => {
+			if (e.stopPropagation(), this.settings.disabled || this.settings.isMultiple && this.isAtMinSelected()) return;
+			let t = true, n = this.store.getSelectedOptions(), r = [], i = "";
+			if (this.settings.isMultiple) {
+				let e = this.settings.minSelected, t = this.store.getSelected();
+				if (e > 0 && t.length > e) i = this.getMinimumSelectionIds(), r = n.filter((e) => i.includes(e.id));
+				else if (e <= 0) i = [];
+				else return;
+			}
+			if (this.callbacks.beforeChange && (t = this.callbacks.beforeChange(r, n) === true), t) {
+				if (this.settings.isMultiple) this.callbacks.setSelected(i, false), this.updateDeselectAll();
+				else {
+					let e = this.store.getFirstOption(), t = e ? e.id : "";
+					this.callbacks.setSelected(t, false);
+				}
+				this.settings.closeOnSelect && this.requestClose("deselect", { selectionChanged: true }), this.callbacks.afterChange && this.callbacks.afterChange(this.store.getSelectedOptions());
+			}
+		}, n.onkeydown = (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n.click());
+		};
+		let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		i.setAttribute("viewBox", "0 0 100 100");
+		let a = document.createElementNS("http://www.w3.org/2000/svg", "path");
+		a.setAttribute("d", this.classes.deselectPath), i.appendChild(a), n.appendChild(i), e.appendChild(n);
+		let o = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		this.addClasses(o, this.classes.arrow), o.setAttribute("viewBox", "0 0 100 100");
+		let s = document.createElementNS("http://www.w3.org/2000/svg", "path");
+		return s.setAttribute("d", this.classes.arrowClose), this.settings.alwaysOpen && this.addClasses(o, this.classes.hide), o.appendChild(s), e.appendChild(o), {
+			main: e,
+			values: t,
+			deselect: {
+				main: n,
+				svg: i,
+				path: a
+			},
+			arrow: {
+				main: o,
+				path: s
+			}
+		};
+	}
+	mainFocus(e) {
+		e !== "click" && this.main.main.focus({ preventScroll: true });
+	}
+	placeholder() {
+		let e = this.store.filter((e) => e.placeholder, false, false), t = this.settings.placeholderText;
+		e.length && (e[0].html === "" ? e[0].text !== "" && (t = e[0].text) : t = e[0].html);
+		let n = document.createElement("div");
+		return this.addClasses(n, this.classes.placeholder), n.innerHTML = t, n;
+	}
+	renderValues() {
+		if (!this.settings.isMultiple) {
+			this.renderSingleValue();
+			return;
+		}
+		this.renderMultipleValues(), this.updateDeselectAll();
+	}
+	renderSingleValue() {
+		let e = this.store.filter((e) => e.selected && !e.placeholder, false, false), t = e.length > 0 ? e[0] : null;
+		if (!t) this.main.values.innerHTML = this.placeholder().outerHTML;
+		else {
+			let e = document.createElement("div");
+			this.addClasses(e, this.classes.single), t.html ? e.innerHTML = t.html : e.innerText = t.text, this.main.values.innerHTML = e.outerHTML;
+		}
+		!this.settings.allowDeselect || !e.length ? this.addClasses(this.main.deselect.main, this.classes.hide) : this.removeClasses(this.main.deselect.main, this.classes.hide);
+	}
+	renderMultipleValues() {
+		let e = this.main.values.childNodes, t = this.store.filter((e) => e.selected && e.display, false, false);
+		if (t.length === 0) {
+			this.main.values.innerHTML = this.placeholder().outerHTML;
+			return;
+		} else {
+			let e = this.main.values.querySelector("." + this.classes.getFirst("placeholder"));
+			e && e.remove();
+		}
+		if (this.settings.multiString) {
+			let e = t;
+			this.settings.keepOrder && (e = this.store.selectedOrderOptions(e));
+			let n = document.createElement("div");
+			this.addClasses(n, this.classes.multiString), n.textContent = e.map((e) => e.text).join(", "), this.settings.showOptionTooltips && n.setAttribute("title", n.textContent), this.main.values.innerHTML = n.outerHTML;
+			return;
+		}
+		if (t.length > this.settings.maxValuesShown) {
+			let e = document.createElement("div");
+			this.addClasses(e, this.classes.max), e.textContent = this.settings.maxValuesMessage.replace("{number}", t.length.toString()), this.main.values.innerHTML = e.outerHTML;
+			return;
+		} else {
+			let e = this.main.values.querySelector("." + this.classes.getFirst("max"));
+			e && e.remove();
+		}
+		this.settings.keepOrder && (t = this.store.selectedOrderOptions(t));
+		let n = [];
+		for (let r = 0; r < e.length; r++) {
+			let i = e[r], a = i.getAttribute("data-id");
+			a && (t.filter((e) => e.id === a, false).length || n.push(i));
+		}
+		let r = a(this.content.main, this.settings.timeoutDelay);
+		for (let e of n) this.addClasses(e, this.classes.valueOut), l(e, "ss-valueOut", r).then(() => {
+			this.main.values.hasChildNodes() && this.main.values.contains(e) && this.main.values.removeChild(e);
+		});
+		e = this.main.values.childNodes;
+		for (let n = 0; n < t.length; n++) {
+			let r = true;
+			for (let i = 0; i < e.length; i++) t[n].id === String(e[i].dataset.id) && (r = false);
+			r && (this.settings.keepOrder || e.length === 0 ? this.main.values.appendChild(this.multipleValue(t[n])) : n === 0 ? this.main.values.insertBefore(this.multipleValue(t[n]), e[n]) : e[n - 1].insertAdjacentElement("afterend", this.multipleValue(t[n])));
+		}
+		this.updateMultipleValueDeleteVisibility();
+	}
+	isAtMinSelected() {
+		return this.settings.isMultiple && this.settings.minSelected > 0 && this.store.getSelectedOptions().length <= this.settings.minSelected;
+	}
+	getMinimumSelectionIds() {
+		let e = this.store.getSelectedOptions();
+		return this.settings.keepOrder && (e = this.store.selectedOrderOptions(e)), e.slice(0, this.settings.minSelected).map((e) => e.id);
+	}
+	updateMultipleValueDeleteVisibility() {
+		if (!this.settings.isMultiple || this.settings.multiString) return;
+		let e = !this.isAtMinSelected(), t = this.main.values.querySelectorAll("." + this.classes.getFirst("valueDelete"));
+		for (let n of t) e ? this.removeClasses(n, this.classes.hide) : this.addClasses(n, this.classes.hide);
+	}
+	multipleValue(e) {
+		let t = document.createElement("div");
+		this.addClasses(t, this.classes.value), t.dataset.id = e.id;
+		let n = document.createElement("div");
+		if (this.addClasses(n, this.classes.valueText), n.textContent = e.text, t.appendChild(n), !e.mandatory) {
+			let n = document.createElement("div");
+			this.addClasses(n, this.classes.valueDelete), n.setAttribute("tabindex", "0"), n.setAttribute("role", "button"), n.setAttribute("aria-label", `${this.settings.removeText} ${e.text}`), this.isAtMinSelected() && this.addClasses(n, this.classes.hide), n.onclick = (t) => {
+				if (t.preventDefault(), t.stopPropagation(), this.settings.disabled) return;
+				let n = true, r = this.store.getSelectedOptions(), i = r.filter((t) => t.selected && t.id !== e.id, true);
+				if (!(this.settings.minSelected && i.length < this.settings.minSelected) && (this.callbacks.beforeChange && (n = this.callbacks.beforeChange(i, r) === true), n)) {
+					let e = [];
+					for (let t of i) {
+						if (t instanceof j) for (let n of t.options) n.id && e.push(n.id);
+						t instanceof A && e.push(t.id);
+					}
+					this.callbacks.setSelected(e, false), this.settings.closeOnSelect && this.requestClose("deselect", { selectionChanged: true }), this.callbacks.afterChange && this.callbacks.afterChange(i), this.updateDeselectAll(), this.updateMultipleValueDeleteVisibility();
+				}
+			};
+			let r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+			r.setAttribute("viewBox", "0 0 100 100");
+			let i = document.createElementNS("http://www.w3.org/2000/svg", "path");
+			i.setAttribute("d", this.classes.optionDelete), r.appendChild(i), n.appendChild(r), t.appendChild(n), n.onkeydown = (e) => {
+				e.key === "Enter" && n.click();
+			};
+		}
+		return t;
+	}
+	contentDiv() {
+		let e = document.createElement("div");
+		e.dataset.id = this.settings.id;
+		let t = this.searchDiv();
+		e.appendChild(t.main);
+		let n = document.createElement("div");
+		this.addClasses(n, this.classes.status), n.setAttribute("aria-live", "polite"), n.setAttribute("aria-atomic", "true"), n.setAttribute("role", "status"), e.appendChild(n);
+		let r = this.listDiv();
+		return e.appendChild(r), {
+			main: e,
+			search: t,
+			status: n,
+			list: r
+		};
+	}
+	announce(e) {
+		this.settings.showSearch && (this.content.status.textContent = e);
+	}
+	moveContent() {
+		if (!this.isModalViewActive()) {
+			if (this.settings.contentPosition === "relative") {
+				this.moveContentBelow();
+				return;
+			}
+			if (this.settings.openPosition === "down") {
+				this.moveContentBelow();
+				return;
+			} else if (this.settings.openPosition === "up") {
+				this.moveContentAbove();
+				return;
+			}
+			this.putContent() === "up" ? this.moveContentAbove() : this.moveContentBelow();
+		}
+	}
+	startPositionTracking() {
+		this.settings.contentPosition !== "absolute" || this.isModalViewActive() || (this.stopPositionTracking(), !(typeof ResizeObserver > "u") && (this.positionObserver = new ResizeObserver(() => {
+			this.settings.isOpen && (cancelAnimationFrame(this.positionObserverRaf), this.positionObserverRaf = requestAnimationFrame(() => {
+				this.moveContent();
+			}));
+		}), this.observePositionTargets()));
+	}
+	stopPositionTracking() {
+		cancelAnimationFrame(this.positionObserverRaf), this.positionObserver?.disconnect(), this.positionObserver = null, this.cancelOverflowShift();
+	}
+	observePositionTargets() {
+		if (!this.positionObserver) return;
+		let e = /* @__PURE__ */ new Set(), t = (t) => {
+			!t || e.has(t) || (e.add(t), this.positionObserver.observe(t));
+		};
+		t(this.main.main);
+		let n = this.main.main.parentElement, r = this.settings.contentLocation;
+		for (let e = 0; n && e < 8 && (t(n), n !== r); e++) n = n.parentElement;
+	}
+	searchDiv() {
+		let e = document.createElement("div"), t = document.createElement("input"), n = document.createElement("div");
+		this.addClasses(e, this.classes.search);
+		let r = {
+			main: e,
+			input: t
+		};
+		if (this.settings.showSearch || (this.addClasses(e, this.classes.hide), t.readOnly = true), t.type = "search", t.placeholder = this.settings.searchPlaceholder, t.tabIndex = -1, t.setAttribute("aria-label", this.settings.searchPlaceholder), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("autocapitalize", "off"), t.setAttribute("autocomplete", "off"), t.setAttribute("autocorrect", "off"), t.setAttribute("aria-hidden", "true"), t.oninput = _((e) => {
+			this.callbacks.search(e.target.value);
+		}, 100), t.onkeydown = (e) => {
+			switch (e.key) {
+				case "ArrowUp":
+				case "ArrowDown": return e.key === "ArrowDown" ? this.highlight("down") : this.highlight("up"), false;
+				case "Tab": return this.requestClose("tab"), true;
+				case "Escape": return this.requestClose("escape"), false;
+				case "Enter":
+					let t = this.content.list.querySelector("." + this.classes.getFirst("highlighted"));
+					return t ? (t.click(), false) : this.callbacks.addable ? (n.click(), false) : true;
+			}
+			return true;
+		}, e.appendChild(t), this.callbacks.addable) {
+			this.addClasses(n, this.classes.addable);
+			let t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+			t.setAttribute("viewBox", "0 0 100 100");
+			let a = document.createElementNS("http://www.w3.org/2000/svg", "path");
+			a.setAttribute("d", this.classes.addablePath), t.appendChild(a), n.appendChild(t), n.onclick = (e) => {
+				if (e.preventDefault(), e.stopPropagation(), !this.callbacks.addable) return;
+				let t = this.content.search.input.value.trim();
+				if (t === "") {
+					this.content.search.input.focus();
+					return;
+				}
+				let n = (e) => {
+					let t = new A(e);
+					if (this.callbacks.addOption(t), this.settings.isMultiple) {
+						let e = this.store.getSelected();
+						e.push(t.id), this.callbacks.setSelected(e, true);
+					} else this.callbacks.setSelected([t.id], true);
+					if (this.callbacks.search(""), this.settings.closeOnSelect) {
+						let e = i(this.content.main);
+						setTimeout(() => {
+							this.requestClose("select", { selectionChanged: true });
+						}, e);
+					}
+				}, r = this.callbacks.addable(t);
+				r === false || r == null || (r instanceof Promise ? r.then((e) => {
+					typeof e == "string" ? n({
+						text: e,
+						value: e
+					}) : r instanceof Error ? this.renderError(r.message) : n(e);
+				}) : typeof r == "string" ? n({
+					text: r,
+					value: r
+				}) : r instanceof Error ? this.renderError(r.message) : n(r));
+			}, e.appendChild(n), r.addable = {
+				main: n,
+				svg: t,
+				path: a
+			};
+		}
+		return r;
+	}
+	searchFocus() {
+		this.content.search.input.focus({ preventScroll: true });
+	}
+	getOptions(e = false, t = false, n = false) {
+		let r = "." + this.classes.getFirst("option");
+		return e && (r += ":not(." + this.classes.getFirst("placeholder") + ")"), t && (r += ":not(." + this.classes.getFirst("disabled") + ")"), n && (r += ":not(." + this.classes.getFirst("hide") + ")"), Array.from(this.content.list.querySelectorAll(r));
+	}
+	highlight(e) {
+		let t = this.getOptions(true, true, true);
+		if (t.length === 0) return;
+		if (t.length === 1 && !t[0].classList.contains(this.classes.getFirst("highlighted"))) {
+			this.addClasses(t[0], this.classes.highlighted);
+			return;
+		}
+		let n = false;
+		for (let e of t) e.classList.contains(this.classes.getFirst("highlighted")) && (n = true);
+		if (!n) {
+			for (let e of t) if (e.classList.contains(this.classes.getFirst("selected"))) {
+				this.addClasses(e, this.classes.highlighted);
+				break;
+			}
+		}
+		for (let n = 0; n < t.length; n++) if (t[n].classList.contains(this.classes.getFirst("highlighted"))) {
+			let r = t[n];
+			this.removeClasses(r, this.classes.highlighted);
+			let i = r.parentElement;
+			if (i && i.classList.contains(this.classes.getFirst("mainOpen"))) {
+				let e = i.querySelector("." + this.classes.getFirst("optgroupLabel"));
+				e && e.click();
+			}
+			let a = t[e === "down" ? n + 1 < t.length ? n + 1 : 0 : n - 1 >= 0 ? n - 1 : t.length - 1];
+			this.addClasses(a, this.classes.highlighted), this.ensureElementInView(this.content.list, a), a.id && this.main.main.setAttribute("aria-activedescendant", a.id);
+			let o = a.parentElement;
+			if (o && o.classList.contains(this.classes.getFirst("close"))) {
+				let e = o.querySelector("." + this.classes.getFirst("optgroupLabel"));
+				e && e.click();
+			}
+			return;
+		}
+		let r = t[e === "down" ? 0 : t.length - 1];
+		this.addClasses(r, this.classes.highlighted), r.id && this.main.main.setAttribute("aria-activedescendant", r.id), this.ensureElementInView(this.content.list, r);
+	}
+	listDiv() {
+		let e = document.createElement("div");
+		this.addClasses(e, this.classes.list);
+		let t = this.settings.id + "-list";
+		return e.id = t, e.dataset.id = t, e;
+	}
+	renderError(e) {
+		this.optionsListIsFullData = false, this.content.list.innerHTML = "";
+		let t = document.createElement("div");
+		this.addClasses(t, this.classes.error), t.textContent = e, this.content.list.appendChild(t);
+	}
+	renderSearching() {
+		this.optionsListIsFullData = false, this.content.list.innerHTML = "";
+		let e = document.createElement("div");
+		this.addClasses(e, this.classes.searching), e.textContent = this.settings.searchingText, this.content.list.appendChild(e), this.announce(this.settings.searchingText);
+	}
+	renderOptions(e) {
+		if (this.lastSearchFilterTerm = "", this.lastRenderedOptions = e.map((e) => e instanceof A ? [e] : e.options.map((e) => new A(e))).flat(), this.content.list.innerHTML = "", e.length === 0) {
+			this.optionsListIsFullData = false;
+			let e = document.createElement("div");
+			if (this.addClasses(e, this.classes.search), this.callbacks.addable) {
+				let t = this.settings.addableText.replace("{value}", this.content.search.input.value);
+				e.innerHTML = t, this.announce(t);
+			} else e.innerHTML = this.settings.searchText, this.announce(this.settings.searchText);
+			this.content.list.appendChild(e);
+			return;
+		}
+		this.settings.allowDeselect && !this.settings.isMultiple && (this.store.filter((e) => e.placeholder, false, false).length || this.store.addOption(new A({
+			text: "",
+			value: "",
+			selected: false,
+			placeholder: true
+		}), true));
+		let t = document.createDocumentFragment();
+		for (let n of e) {
+			if (n instanceof j) {
+				let e = document.createElement("div");
+				this.addClasses(e, this.classes.optgroup);
+				let r = document.createElement("div");
+				this.addClasses(r, this.classes.optgroupLabel), e.appendChild(r);
+				let i = document.createElement("div");
+				this.addClasses(i, this.classes.optgroupLabelText), i.textContent = n.label, r.appendChild(i);
+				let a = document.createElement("div");
+				if (this.addClasses(a, this.classes.optgroupActions), r.appendChild(a), this.settings.isMultiple && n.selectAll) {
+					let e = document.createElement("div");
+					this.addClasses(e, this.classes.optgroupSelectAll);
+					let t = this.isOptgroupAllSelected(n.options);
+					t && this.addClasses(e, this.classes.selected);
+					let r = document.createElement("span");
+					r.textContent = this.optgroupSelectAllLabel(t), e.appendChild(r);
+					let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+					i.setAttribute("viewBox", "0 0 100 100"), e.appendChild(i);
+					let o = document.createElementNS("http://www.w3.org/2000/svg", "path");
+					o.setAttribute("d", this.classes.optgroupSelectAllBox), i.appendChild(o);
+					let s = document.createElementNS("http://www.w3.org/2000/svg", "path");
+					s.setAttribute("d", this.classes.optgroupSelectAllCheck), i.appendChild(s), e.addEventListener("click", (e) => {
+						e.preventDefault(), e.stopPropagation();
+						let t = this.store.getSelected();
+						if (this.isOptgroupAllSelected(n.options, new Set(t))) {
+							let e = t.filter((e) => {
+								for (let t of n.options) if (e === t.id) return false;
+								return true;
+							});
+							this.callbacks.setSelected(e, true);
+							return;
+						} else {
+							let e = n.options.map((e) => e.id).filter((e) => e !== void 0), r = t.concat(e);
+							for (let e of n.options) e.id && !this.store.getOptionByID(e.id) && this.callbacks.addOption(new A(e));
+							this.callbacks.setSelected(r, true);
+							return;
+						}
+					}), a.appendChild(e);
+				}
+				if (n.closable !== "off") {
+					let t = document.createElement("div");
+					this.addClasses(t, this.classes.optgroupClosable);
+					let i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+					i.setAttribute("viewBox", "0 0 100 100"), this.addClasses(i, this.classes.arrow), t.appendChild(i);
+					let o = document.createElementNS("http://www.w3.org/2000/svg", "path");
+					i.appendChild(o), n.options.some((e) => e.selected) || this.content.search.input.value.trim() !== "" ? (this.addClasses(t, this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : n.closable === "open" ? (this.addClasses(e, this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen)) : n.closable === "close" && (this.addClasses(e, this.classes.close), o.setAttribute("d", this.classes.arrowClose)), r.addEventListener("click", (n) => {
+						n.preventDefault(), n.stopPropagation(), this.isClosableOptgroupOpen(e, t) ? (this.removeClasses(e, this.classes.mainOpen), this.removeClasses(t, this.classes.mainOpen), this.addClasses(e, this.classes.close), o.setAttribute("d", this.classes.arrowClose)) : (this.closeOtherClosableOptgroups(e), this.removeClasses(e, this.classes.close), this.removeClasses(t, this.classes.mainOpen), this.addClasses(e, this.classes.mainOpen), o.setAttribute("d", this.classes.arrowOpen));
+					}), a.appendChild(t);
+				}
+				e.appendChild(r);
+				for (let r of n.options) e.appendChild(this.option(new A(r))), t.appendChild(e);
+			}
+			n instanceof A && t.appendChild(this.option(n));
+		}
+		this.content.list.appendChild(t), this.setOptionsListFullData(e), this.announce(this.settings.resultsText.replace("{count}", String(this.lastRenderedOptions.length)));
+	}
+	canFilterOptionsInPlace() {
+		return this.optionsListIsFullData ? this.content.list.querySelector("." + this.classes.getFirst("option")) !== null : false;
+	}
+	resetSearchFilterState() {
+		this.lastSearchFilterTerm = "";
+	}
+	filterOptionsInPlace(e, t) {
+		let n = e.trim();
+		if (n === this.lastSearchFilterTerm) return;
+		this.lastSearchFilterTerm = n;
+		let r = [], i = this.content.list.querySelectorAll("." + this.classes.getFirst("option"));
+		for (let e of i) {
+			let i = e.dataset.id;
+			if (!i) continue;
+			let a = this.store.getOptionByID(i);
+			if (!a) continue;
+			let o = a.placeholder || !a.display || a.selected && this.settings.hideSelected, s = t(a, n);
+			o || !s ? (this.addClasses(e, this.classes.hide), this.removeClasses(e, this.classes.highlighted)) : (this.removeClasses(e, this.classes.hide), this.setOptionElementContent(e, a, n), r.push(a)), a.selected ? (this.addClasses(e, this.classes.selected), e.setAttribute("aria-selected", "true")) : (this.removeClasses(e, this.classes.selected), e.setAttribute("aria-selected", "false"));
+		}
+		this.lastRenderedOptions = r, this.updateOptgroupVisibilityAfterSearch(n), r.length === 0 ? this.updateSearchResultsMessage(0, n) : (this.removeListSearchMessage(), this.announce(this.settings.resultsText.replace("{count}", String(r.length)))), this.updateOptgroupSelectAllStates();
+	}
+	setOptionsListFullData(e) {
+		let t = this.store.getDataOptions(false), n = e.map((e) => e instanceof A ? [e] : e.options.map((e) => new A(e))).flat();
+		if (n.length !== t.length) {
+			this.optionsListIsFullData = false;
+			return;
+		}
+		let r = new Set(t.map((e) => e.id));
+		this.optionsListIsFullData = n.every((e) => r.has(e.id));
+	}
+	isClosableOptgroupOpen(e, t) {
+		return e.classList.contains(this.classes.getFirst("close")) ? false : e.classList.contains(this.classes.getFirst("mainOpen")) || t.classList.contains(this.classes.getFirst("mainOpen"));
+	}
+	closeClosableOptgroup(e) {
+		let t = e.querySelector("." + this.classes.getFirst("optgroupClosable"));
+		if (!t || e.classList.contains(this.classes.getFirst("close"))) return;
+		this.removeClasses(e, this.classes.mainOpen), this.removeClasses(t, this.classes.mainOpen), this.addClasses(e, this.classes.close);
+		let n = t.querySelector("path");
+		n && n.setAttribute("d", this.classes.arrowClose);
+	}
+	closeOtherClosableOptgroups(e) {
+		let t = this.content.list.querySelectorAll("." + this.classes.getFirst("optgroup"));
+		for (let n of t) n !== e && this.closeClosableOptgroup(n);
+	}
+	updateOptgroupVisibilityAfterSearch(e) {
+		let t = this.content.list.querySelectorAll("." + this.classes.getFirst("optgroup"));
+		for (let n of t) {
+			let t = n.querySelectorAll("." + this.classes.getFirst("option")), r = false;
+			for (let e of t) if (!e.classList.contains(this.classes.getFirst("hide"))) {
+				r = true;
+				break;
+			}
+			if (!r) {
+				this.addClasses(n, this.classes.hide);
+				continue;
+			}
+			this.removeClasses(n, this.classes.hide), e !== "" && (this.removeClasses(n, this.classes.close), this.addClasses(n, this.classes.mainOpen));
+		}
+	}
+	updateSearchResultsMessage(e, t) {
+		if (this.removeListSearchMessage(), e > 0) return;
+		let n = document.createElement("div");
+		if (this.addClasses(n, this.classes.search), this.callbacks.addable) {
+			let e = this.settings.addableText.replace("{value}", t);
+			n.innerHTML = e, this.announce(e);
+		} else n.innerHTML = this.settings.searchText, this.announce(this.settings.searchText);
+		this.content.list.appendChild(n);
+	}
+	removeListSearchMessage() {
+		this.content.list.querySelectorAll("." + this.classes.getFirst("search")).forEach((e) => e.remove());
+	}
+	setOptionElementContent(e, t, n) {
+		let r = n.trim();
+		this.settings.searchHighlight && r !== "" ? e.innerHTML = this.highlightText(t.html === "" ? t.text : t.html, r, this.classes.searchHighlighter) : t.html === "" ? e.textContent = t.text : e.innerHTML = t.html, this.settings.showOptionTooltips && e.textContent ? e.setAttribute("title", e.textContent) : e.removeAttribute("title");
+	}
+	hasRenderedOptions() {
+		return this.content.list.querySelector("." + this.classes.getFirst("option")) !== null;
+	}
+	canUpdateOptionSelectionInPlace() {
+		return this.content.search.input.value.trim() === "" && this.hasRenderedOptions();
+	}
+	updateOptionSelection() {
+		let e = new Set(this.store.getSelected()), t = this.content.list.querySelectorAll("." + this.classes.getFirst("option")), n = null;
+		for (let r of t) {
+			let t = r.dataset.id;
+			if (!t) continue;
+			let i = this.store.getOptionByID(t);
+			if (!i) continue;
+			let a = e.has(t);
+			a ? (this.addClasses(r, this.classes.selected), r.setAttribute("aria-selected", "true"), n = r) : (this.removeClasses(r, this.classes.selected), r.setAttribute("aria-selected", "false")), this.settings.hideSelected && (a ? this.addClasses(r, this.classes.hide) : (this.removeClasses(r, this.classes.hide), i.display || this.addClasses(r, this.classes.hide)));
+		}
+		!this.settings.isMultiple && n ? this.main.main.setAttribute("aria-activedescendant", n.id) : !this.settings.isMultiple && e.size === 0 && this.main.main.removeAttribute("aria-activedescendant"), this.updateOptgroupSelectAllStates();
+	}
+	updateOptgroupSelectAllStates() {
+		if (!this.settings.isMultiple) return;
+		let e = new Set(this.store.getSelected()), t = this.content.list.querySelectorAll("." + this.classes.getFirst("optgroup"));
+		for (let n of t) {
+			let t = n.querySelector("." + this.classes.getFirst("optgroupSelectAll"));
+			if (!t) continue;
+			let r = n.querySelectorAll("." + this.classes.getFirst("option")), i = r.length > 0;
+			for (let t of r) {
+				let n = t.dataset.id;
+				if (!n || !e.has(n)) {
+					i = false;
+					break;
+				}
+			}
+			i ? this.addClasses(t, this.classes.selected) : this.removeClasses(t, this.classes.selected);
+			let a = t.querySelector("span");
+			a && (a.textContent = this.optgroupSelectAllLabel(i));
+		}
+	}
+	optgroupSelectAllLabel(e) {
+		return e ? "Unselect All" : "Select All";
+	}
+	isOptgroupAllSelected(e, t) {
+		if (e.length === 0) return false;
+		for (let n of e) if (!(t ? n.id && t.has(n.id) : n.selected)) return false;
+		return true;
+	}
+	option(e) {
+		if (e.placeholder) {
+			let e = document.createElement("div");
+			return this.addClasses(e, this.classes.option), this.addClasses(e, this.classes.hide), e;
+		}
+		let t = document.createElement("div");
+		return t.dataset.id = e.id, t.id = this.settings.id + "-" + e.id, this.addClasses(t, this.classes.option), t.setAttribute("role", "option"), e.class && e.class.split(" ").forEach((e) => {
+			t.classList.add(e);
+		}), e.style && (t.style.cssText = e.style), this.setOptionElementContent(t, e, this.content.search.input.value), e.display || this.addClasses(t, this.classes.hide), e.disabled && this.addClasses(t, this.classes.disabled), e.selected && this.settings.hideSelected && this.addClasses(t, this.classes.hide), e.selected ? (this.addClasses(t, this.classes.selected), t.setAttribute("aria-selected", "true"), this.main.main.setAttribute("aria-activedescendant", t.id)) : (this.removeClasses(t, this.classes.selected), t.setAttribute("aria-selected", "false")), t.addEventListener("click", (t) => {
+			t.preventDefault(), t.stopPropagation();
+			let n = this.store.getSelected(), r = t.currentTarget, i = String(r.dataset.id), a = this.store.getOptionByID(i) ?? e, o = n.includes(i), s = t.ctrlKey || t.metaKey;
+			if (e.disabled) return;
+			if (!this.settings.isMultiple && o && !this.settings.allowDeselect) {
+				this.closeOnSingleSelectReclick(a);
+				return;
+			}
+			if (o && a.mandatory) {
+				this.closeOnSingleSelectReclick(a);
+				return;
+			}
+			if (this.settings.isMultiple && this.settings.maxSelected <= n.length && !o || this.settings.isMultiple && this.settings.minSelected >= n.length && o && !s) return;
+			let c = false, l = this.store.getSelectedOptions(), u = [];
+			if (this.settings.isMultiple) {
+				let n = l.some((e) => e.id === i);
+				if (t.shiftKey && this.lastSelectedOption) {
+					let t = this.lastRenderedOptions, n = t.findIndex((e) => e.id === this.lastSelectedOption.id), r = t.findIndex((t) => t.id === e.id);
+					if (n >= 0 && r >= 0) {
+						let e = Math.min(n, r), i = Math.max(n, r), a = t.slice(e, i + 1).filter((e) => !l.find((t) => t.id === e.id));
+						u = l.length + a.length <= this.settings.maxSelected ? l.concat(a) : l;
+					} else u = l;
+				} else u = n ? l.filter((e) => e.id !== i) : l.concat(a), this.lastSelectedOption = a;
+			}
+			if (this.settings.isMultiple || (u = o ? [] : [a]), this.callbacks.beforeChange || (c = true), this.callbacks.beforeChange && (c = this.callbacks.beforeChange(u, l) !== false), c) {
+				this.store.getOptionByID(i) || this.callbacks.addOption(e), this.callbacks.setSelected(u.map((e) => e.id), false);
+				let n = t.ctrlKey || t.metaKey || t.shiftKey;
+				this.settings.closeOnSelect && !(this.settings.isMultiple && n) && this.requestClose("select", {
+					option: a,
+					selectionChanged: this.selectionChanged(l, u)
+				}), this.callbacks.afterChange && this.callbacks.afterChange(u);
+			}
+		}), t;
+	}
+	destroy() {
+		this.stopPositionTracking(), this.modalElements ? (this.unlockBodyScroll(), this.content.main.parentElement === this.modalElements.dialog && this.restoreContentOffscreen(), this.modalElements.overlay.remove(), this.modalElements = null) : this.bodyScrollLocked && this.unlockBodyScroll(), this.main.main.remove(), this.content.main.remove(), this.removeDetachedInstanceDom();
+	}
+	removeDetachedInstanceDom() {
+		let e = this.settings.id, t = this.classes.getFirst("main"), n = this.classes.getFirst("content"), r = this.classes.getFirst("modalOverlay");
+		document.querySelectorAll(`[data-id="${e}"]`).forEach((e) => {
+			(e.classList.contains(t) || e.classList.contains(n) || e.classList.contains(r)) && e.remove();
+		});
+	}
+	highlightText(e, t, n) {
+		let r = t.trim();
+		if (r === "") return e;
+		let i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), a = document.createElement("div");
+		a.innerHTML = e;
+		let o = (e) => {
+			if (e.nodeType === Node.TEXT_NODE) {
+				let t = e.textContent || "", r = RegExp("(" + i + ")", "i");
+				if (r.test(t)) {
+					let i = document.createElement("span");
+					t.split(r).forEach((e, t) => {
+						if (e && r.test(e)) {
+							let t = document.createElement("mark");
+							t.className = n, t.textContent = e, i.appendChild(t);
+						} else e && i.appendChild(document.createTextNode(e));
+					}), e.parentNode?.replaceChild(i, e);
+				}
+			} else e.nodeType === Node.ELEMENT_NODE && Array.from(e.childNodes).forEach((e) => o(e));
+		};
+		return Array.from(a.childNodes).forEach((e) => o(e)), a.innerHTML;
+	}
+	setContentDirection(e) {
+		let t = e === "above", n = t ? this.classes.dirAbove : this.classes.dirBelow, r = t ? this.classes.dirBelow : this.classes.dirAbove;
+		if (this.removeClasses(this.main.main, r), this.addClasses(this.main.main, n), this.removeClasses(this.content.main, r), this.addClasses(this.content.main, n), t) {
+			let e = this.main.main.offsetHeight, t = this.content.main.offsetHeight;
+			this.content.main.style.margin = "-" + (e + t - 1) + "px 0px 0px 0px";
+		} else this.content.main.style.margin = "-1px 0px 0px 0px";
+	}
+	setContentPosition() {
+		let e = this.main.main.getBoundingClientRect();
+		if (this.settings.contentPosition === "relative") {
+			this.applyContentWidth(e);
+			return;
+		}
+		this.cancelOverflowShift();
+		let t, n;
+		this.settings.contentPosition === "fixed" ? (t = e.top + e.height, n = e.left) : (t = e.top + window.scrollY + e.height, n = e.left + window.scrollX), this.content.main.style.top = t + "px", this.content.main.style.left = n + "px", this.applyContentWidth(e);
+		let r = this.getKnownContentWidth(e);
+		if (r !== null) {
+			this.content.main.style.left = this.adjustLeftForOverflow(n, e.left, r) + "px";
+			return;
+		}
+		this.overflowShiftRaf = requestAnimationFrame(() => {
+			this.overflowShiftRaf = 0, this.applyOverflowShiftFromMeasure();
+		});
+	}
+	applyContentWidth(e) {
+		let t = this.settings.contentWidth;
+		if (this.content.main.style.width = "", this.content.main.style.minWidth = "", this.content.main.style.maxWidth = "", !t) {
+			this.settings.contentPosition !== "relative" && (this.content.main.style.width = e.width + "px");
+			return;
+		}
+		t.startsWith(">") ? this.content.main.style.minWidth = t.slice(1) : t.startsWith("<") ? this.content.main.style.maxWidth = t.slice(1) : this.content.main.style.width = t;
+	}
+	cancelOverflowShift() {
+		this.overflowShiftRaf &&= (cancelAnimationFrame(this.overflowShiftRaf), 0);
+	}
+	getKnownContentWidth(e) {
+		let t = this.settings.contentWidth;
+		if (!t) return e.width;
+		if (t.startsWith(">") || t.startsWith("<") || t.includes("%")) return null;
+		let n = parseFloat(t);
+		return Number.isNaN(n) ? null : n;
+	}
+	adjustLeftForOverflow(e, t, n) {
+		let r = t + n;
+		if (r <= window.innerWidth) return e;
+		let i = e - (r - (window.innerWidth - 20));
+		return this.settings.contentPosition === "fixed" ? Math.max(0, i) : Math.max(window.scrollX, i);
+	}
+	applyOverflowShiftFromMeasure() {
+		let e = this.content.main.getBoundingClientRect().right;
+		if (e <= window.innerWidth) return;
+		let t = e - (window.innerWidth - 20), n = (parseFloat(this.content.main.style.left) || 0) - t;
+		this.settings.contentPosition === "fixed" ? this.content.main.style.left = Math.max(0, n) + "px" : this.content.main.style.left = Math.max(window.scrollX, n) + "px";
+	}
+	moveContentAbove() {
+		this.setContentDirection("above"), this.setContentPosition();
+	}
+	moveContentBelow() {
+		this.setContentDirection("below"), this.setContentPosition();
+	}
+	ensureElementInView(e, t) {
+		let n = e.scrollTop + e.offsetTop, r = n + e.clientHeight, i = t.offsetTop, a = i + t.clientHeight;
+		i < n ? e.scrollTop -= n - i : a > r && (e.scrollTop += a - r);
+	}
+	putContent() {
+		let e = this.main.main.offsetHeight, t = this.main.main.getBoundingClientRect(), n = this.content.main.offsetHeight;
+		return window.innerHeight - (t.top + e) <= n && t.top > n ? "up" : "down";
+	}
+	updateDeselectAll() {
+		if (!this.store || !this.settings) return;
+		let e = this.store.getSelectedOptions(), t = e && e.length > 0, n = this.settings.isMultiple, r = this.settings.allowDeselect, i = this.isAtMinSelected(), a = this.main.deselect.main, o = this.classes.hide;
+		r && !(n && !t) && !i ? this.removeClasses(a, o) : this.addClasses(a, o);
+	}
+};
+//#endregion
+//#region src/slim-select/mutations.ts
+function P(e, t) {
+	let n = {
+		classChanged: false,
+		disabledChanged: false,
+		optgroupOptionChanged: false,
+		selectionChanged: false
+	};
+	for (let r of e) {
+		if (r.target === t && (r.attributeName === "disabled" && (n.disabledChanged = true), r.attributeName === "class" && (n.classChanged = true), r.type === "childList")) {
+			for (let e of Array.from(r.addedNodes)) if (e.nodeName === "OPTION" && e.value === t.value) {
+				n.selectionChanged = true;
+				break;
+			}
+			n.optgroupOptionChanged = true;
+		}
+		(r.target.nodeName === "OPTGROUP" || r.target.nodeName === "OPTION") && (n.optgroupOptionChanged = true);
+	}
+	return n;
+}
+//#endregion
+//#region src/slim-select/select.ts
+var F = class {
+	select;
+	onValueChange;
+	onClassChange;
+	onDisabledChange;
+	onOptionsChange;
+	onLabelClick;
+	listen = false;
+	observer = null;
+	isUpdating = false;
+	pendingOptionsChange = null;
+	preventNativeSelect = null;
+	preventNativeSelectMousedown = null;
+	preventNativeSelectFocus = null;
+	restoreAriaHiddenOnBlur = null;
+	constructor(e) {
+		this.select = e, this.valueChange = this.valueChange.bind(this), this.select.addEventListener("change", this.valueChange, { passive: true }), this.observer = new MutationObserver(this.observeCall.bind(this)), this.changeListen(true);
+	}
+	enable() {
+		this.select.disabled = false;
+	}
+	disable() {
+		this.select.disabled = true;
+	}
+	hideUI() {
+		this.select.tabIndex = -1, this.select.style.position = "absolute", this.select.style.width = "1px", this.select.style.height = "1px", this.select.style.opacity = "0", this.select.style.overflow = "hidden", this.select.style.pointerEvents = "none", this.select.style.margin = "0", this.select.style.padding = "0", this.select.style.borderWidth = "0", this.select.style.clipPath = "inset(50%)", document.activeElement !== this.select && this.select.setAttribute("aria-hidden", "true"), this.preventNativeSelect || (this.preventNativeSelect = (e) => {
+			e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
+		}, this.preventNativeSelectMousedown = (e) => {
+			e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
+		}, this.preventNativeSelectFocus = (e) => {
+			this.select.removeAttribute("aria-hidden"), e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation();
+		}, this.restoreAriaHiddenOnBlur = () => {
+			this.select.setAttribute("aria-hidden", "true");
+		}, this.select.addEventListener("click", this.preventNativeSelect, {
+			capture: true,
+			passive: false
+		}), this.select.addEventListener("mousedown", this.preventNativeSelectMousedown, {
+			capture: true,
+			passive: false
+		}), this.select.addEventListener("focus", this.preventNativeSelectFocus, {
+			capture: true,
+			passive: false
+		}), this.select.addEventListener("blur", this.restoreAriaHiddenOnBlur, {
+			capture: true,
+			passive: true
+		}));
+	}
+	showUI() {
+		this.select.removeAttribute("tabindex"), this.select.style.position = "", this.select.style.width = "", this.select.style.height = "", this.select.style.opacity = "", this.select.style.overflow = "", this.select.style.pointerEvents = "", this.select.style.margin = "", this.select.style.padding = "", this.select.style.borderWidth = "", this.select.style.clipPath = "", this.select.removeAttribute("aria-hidden"), this.preventNativeSelect &&= (this.select.removeEventListener("click", this.preventNativeSelect, { capture: true }), null), this.preventNativeSelectMousedown &&= (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: true }), null), this.preventNativeSelectFocus &&= (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: true }), null), this.restoreAriaHiddenOnBlur &&= (this.select.removeEventListener("blur", this.restoreAriaHiddenOnBlur, { capture: true }), null);
+	}
+	changeListen(e) {
+		this.listen = e, e && this.observer && this.observer.observe(this.select, {
+			subtree: true,
+			childList: true,
+			attributes: true
+		}), e || this.observer && this.observer.disconnect();
+	}
+	valueChange(e) {
+		return this.listen && this.onValueChange && this.onValueChange(this.getSelectedOptions()), true;
+	}
+	observeCall(e) {
+		if (!this.listen) return;
+		let { classChanged: t, disabledChanged: n, optgroupOptionChanged: r, selectionChanged: i } = P(e, this.select), a = i;
+		if (t && this.onClassChange && this.onClassChange(this.select.className.split(" ")), n && this.onDisabledChange && (this.changeListen(false), this.onDisabledChange(this.select.disabled), this.changeListen(true)), r && this.onOptionsChange) {
+			if (this.isUpdating) {
+				if (this.select.options.length > 0) {
+					let e = this.getData();
+					e.length > 0 && (this.pendingOptionsChange = e);
+				}
+				a && this.select.dispatchEvent(new Event("change"));
+				return;
+			}
+			this.changeListen(false), this.onOptionsChange(this.getData()), this.changeListen(true), a = false;
+		}
+		a && this.select.dispatchEvent(new Event("change"));
+	}
+	getData() {
+		let e = [], t = this.select.childNodes;
+		for (let n of t) n.nodeName === "OPTGROUP" && e.push(this.getDataFromOptgroup(n)), n.nodeName === "OPTION" && e.push(this.getDataFromOption(n));
+		return e;
+	}
+	getDataFromOptgroup(e) {
+		let t = {
+			id: e.id,
+			label: e.label,
+			selectAll: e.dataset ? e.dataset.selectall === "true" : false,
+			closable: e.dataset ? e.dataset.closable : "off",
+			options: []
+		}, n = e.childNodes;
+		for (let e of n) e.nodeName === "OPTION" && t.options.push(this.getDataFromOption(e));
+		return t;
+	}
+	getDataFromOption(e) {
+		return {
+			id: e.id,
+			value: e.value,
+			text: e.text,
+			html: e.dataset && e.dataset.html ? e.dataset.html : "",
+			defaultSelected: e.defaultSelected,
+			selected: e.selected,
+			display: e.style.display !== "none",
+			disabled: e.disabled,
+			mandatory: e.dataset ? e.dataset.mandatory === "true" : false,
+			placeholder: e.dataset.placeholder === "true",
+			class: e.className,
+			style: e.style.cssText,
+			data: f(e.dataset)
+		};
+	}
+	getSelectedOptions() {
+		let e = [], t = this.select.childNodes;
+		for (let n of t) {
+			if (n.nodeName === "OPTGROUP") {
+				let t = n.childNodes;
+				for (let n of t) if (n.nodeName === "OPTION") {
+					let t = n;
+					t.selected && e.push(this.getDataFromOption(t));
+				}
+			}
+			if (n.nodeName === "OPTION") {
+				let t = n;
+				t.selected && e.push(this.getDataFromOption(t));
+			}
+		}
+		return e;
+	}
+	getSelectedValues() {
+		return this.getSelectedOptions().map((e) => e.value);
+	}
+	setSelected(e) {
+		this.changeListen(false);
+		let t = this.select.childNodes;
+		for (let n of t) {
+			if (n.nodeName === "OPTGROUP") {
+				let t = n.childNodes;
+				for (let n of t) if (n.nodeName === "OPTION") {
+					let t = n;
+					t.selected = e.includes(t.id);
+				}
+			}
+			if (n.nodeName === "OPTION") {
+				let t = n;
+				t.selected = e.includes(t.id);
+			}
+		}
+		let n = this.getSelectedOptions();
+		this.select.multiple || (this.select.value = n.length === 1 ? n[0].value : ""), this.select.dispatchEvent(new Event("change", { bubbles: true })), this.changeListen(true);
+	}
+	setSelectedByValue(e) {
+		this.changeListen(false);
+		let t = this.select.childNodes;
+		for (let n of t) {
+			if (n.nodeName === "OPTGROUP") {
+				let t = n.childNodes;
+				for (let n of t) if (n.nodeName === "OPTION") {
+					let t = n;
+					t.selected = e.includes(t.value);
+				}
+			}
+			if (n.nodeName === "OPTION") {
+				let t = n;
+				t.selected = e.includes(t.value);
+			}
+		}
+		let n = this.getSelectedOptions();
+		this.select.multiple || (this.select.value = n.length === 1 ? n[0].value : ""), this.select.dispatchEvent(new Event("change", { bubbles: true })), this.changeListen(true);
+	}
+	updateSelect(e, t, n) {
+		this.changeListen(false), e && (this.select.dataset.id = e), t && (this.select.style.cssText = t), n && (this.select.className = "", n.forEach((e) => {
+			e.trim() !== "" && this.select.classList.add(e.trim());
+		})), this.changeListen(true);
+	}
+	updateOptions(e) {
+		if (!(!e || e.length === 0)) {
+			this.isUpdating = true, this.pendingOptionsChange = null, this.changeListen(false), this.select.innerHTML = "";
+			for (let t of e) t instanceof j && this.select.appendChild(this.createOptgroup(t)), t instanceof A && this.select.appendChild(this.createOption(t));
+			if (this.select.dispatchEvent(new Event("change", { bubbles: true })), this.changeListen(true), this.isUpdating = false, this.pendingOptionsChange !== null) {
+				let e = this.pendingOptionsChange;
+				e.length > 0 && this.onOptionsChange ? (this.pendingOptionsChange = null, this.changeListen(false), this.onOptionsChange(e), this.changeListen(true)) : this.pendingOptionsChange = null;
+			}
+		}
+	}
+	createOptgroup(e) {
+		let t = document.createElement("optgroup");
+		if (t.id = e.id, t.label = e.label, e.selectAll && (t.dataset.selectAll = "true"), e.closable !== "off" && (t.dataset.closable = e.closable), e.options) for (let n of e.options) t.appendChild(this.createOption(n));
+		return t;
+	}
+	createOption(e) {
+		let t = document.createElement("option");
+		return t.id = e.id, t.value = e.value, t.textContent = e.text, e.html !== "" && t.setAttribute("data-html", e.html), t.defaultSelected = e.defaultSelected, t.selected = e.selected, e.disabled && (t.disabled = true), e.display || (t.style.display = "none"), e.placeholder && t.setAttribute("data-placeholder", "true"), e.mandatory && t.setAttribute("data-mandatory", "true"), e.class && e.class.split(" ").forEach((e) => {
+			t.classList.add(e);
+		}), e.data && typeof e.data == "object" && Object.keys(e.data).forEach((n) => {
+			t.setAttribute("data-" + E(n), e.data[n]);
+		}), t;
+	}
+	setupLabelHandlers() {
+		let e = [], t = this.select.id;
+		t && document.querySelectorAll(`label[for="${t}"]`).forEach((t) => e.push(t));
+		let n = this.select.parentElement;
+		for (; n && n !== document.body;) {
+			if (n.tagName === "LABEL") {
+				e.push(n);
+				break;
+			}
+			n = n.parentElement;
+		}
+		Array.from(new Set(e)).forEach((e) => {
+			if (e.__slimSelectLabelHandler) return;
+			let t = (e) => {
+				let t = e.target, n = g(t, this.select.dataset.id);
+				e.preventDefault(), !n && this.onLabelClick && this.onLabelClick();
+			};
+			e.__slimSelectLabelHandler = t, e.addEventListener("click", t, {
+				capture: true,
+				passive: false
+			});
+		});
+	}
+	removeLabelHandlers() {
+		let e = [], t = this.select.id;
+		t && document.querySelectorAll(`label[for="${t}"]`).forEach((t) => e.push(t));
+		let n = this.select.parentElement;
+		for (; n && n !== document.body;) {
+			if (n.tagName === "LABEL") {
+				e.push(n);
+				break;
+			}
+			n = n.parentElement;
+		}
+		Array.from(new Set(e)).forEach((e) => {
+			let t = e.__slimSelectLabelHandler;
+			t && (e.removeEventListener("click", t, { capture: true }), delete e.__slimSelectLabelHandler);
+		});
+	}
+	destroy() {
+		this.changeListen(false), this.select.removeEventListener("change", this.valueChange), this.preventNativeSelect &&= (this.select.removeEventListener("click", this.preventNativeSelect, { capture: true }), null), this.preventNativeSelectMousedown &&= (this.select.removeEventListener("mousedown", this.preventNativeSelectMousedown, { capture: true }), null), this.preventNativeSelectFocus &&= (this.select.removeEventListener("focus", this.preventNativeSelectFocus, { capture: true }), null), this.restoreAriaHiddenOnBlur &&= (this.select.removeEventListener("blur", this.restoreAriaHiddenOnBlur, { capture: true }), null), this.observer &&= (this.observer.disconnect(), null), this.removeLabelHandlers(), delete this.select.dataset.id, this.showUI();
+	}
+};
+//#endregion
+//#region src/slim-select/sync.ts
+function I(e, t) {
+	return T(e.getData(false), t);
+}
+function L(e, t) {
+	let n = Array.isArray(t) ? t : [t], r = e.getDataOptions(false), i = [];
+	for (let e of n) {
+		if (r.find((t) => t.id == e)) {
+			i.push(e);
+			continue;
+		}
+		for (let t of r.filter((t) => t.value == e)) i.push(t.id);
+	}
+	return i;
+}
+var R = class {
+	deps;
+	queue = [];
+	flushScheduled = false;
+	isSyncing = false;
+	constructor(e) {
+		this.deps = e;
+	}
+	enqueue(e) {
+		if (this.queue.push(e), e.source === "native") {
+			this.flushScheduled || (this.flushScheduled = true, queueMicrotask(() => this.flush()));
+			return;
+		}
+		this.isSyncing || this.flush();
+	}
+	flush() {
+		if (this.flushScheduled = false, this.queue.length === 0) return;
+		let e = this.coalesceBatch(this.queue);
+		this.queue = [], this.isSyncing = true;
+		try {
+			for (let t of e) this.applyChange(t);
+		} finally {
+			this.isSyncing = false, this.queue.length > 0 && this.flush();
+		}
+	}
+	coalesceBatch(e) {
+		let t = e.some((e) => e.type === "structure"), n = e.some((e) => e.type === "addOption");
+		if (t || n) {
+			let t = e.filter((e) => e.type === "structure" || e.type === "addOption"), n = t[t.length - 1];
+			return n?.type === "structure" ? [n] : t;
+		}
+		let r = e.filter((e) => e.type === "selection");
+		return r.length > 0 ? [r[r.length - 1]] : e;
+	}
+	applyChange(e) {
+		switch (e.type) {
+			case "structure":
+				this.applyStructure(e.data, e.source, e.preserveSelection, e.isSearchResult);
+				break;
+			case "selection":
+				this.applySelection(e.values, e.source, e.runAfterChange !== false);
+				break;
+			case "addOption":
+				this.applyAddOption(e.option);
+				break;
+		}
+	}
+	applyStructure(e, t, n = false, r = false) {
+		let { store: i, select: a, render: o, events: s } = this.deps;
+		if (!r && I(i, e)) return;
+		let c = i.getSelected(), l = i.validateDataArray(e);
+		if (l) {
+			s.error ? s.error(l) : this.deps.onError && this.deps.onError(l);
+			return;
+		}
+		i.setData(e, n);
+		let u = i.getData(false);
+		r || i.snapshotCatalog(), a.updateOptions(u), o.renderValues(), o.renderOptions(u), s.afterChange && !v(c, i.getSelected()) && s.afterChange(i.getSelectedOptions());
+	}
+	applySelection(e, t, n) {
+		let { store: r, select: i, render: a, events: o } = this.deps, s = r.getSelected(), c = L(r, e);
+		if (v(s, c)) return;
+		r.setSelectedBy("id", c), i.setSelectedByValue(r.getSelectedValues()), a.renderValues();
+		let l = a.content.search.input.value.trim();
+		l === "" ? a.canUpdateOptionSelectionInPlace() ? a.updateOptionSelection() : a.renderOptions(r.getData(false)) : a.hasRenderedOptions() ? a.updateOptionSelection() : this.deps.search && this.deps.search(l), n && o.afterChange && !v(s, r.getSelected()) && o.afterChange(r.getSelectedOptions());
+	}
+	applyAddOption(e) {
+		let { store: t, select: n, render: r, events: i } = this.deps, a = t.getSelected(), o = r.content.search.input.value.trim() !== "" && !!this.deps.search, s = e.value ?? e.text ?? "", c = (e) => {
+			for (let t of e) {
+				if (t instanceof j) {
+					if (t.options.some((e) => (e.value ?? e.text) === s)) return true;
+					continue;
+				}
+				if ((t.value ?? t.text) === s) return true;
+			}
+			return false;
+		};
+		if (!c(t.getData(false))) if (o) {
+			let n = t.getCatalogData();
+			c(n) || t.setData([...n, new A(e)], true), t.snapshotCatalog();
+		} else t.addOption(e), t.snapshotCatalog();
+		let l = t.getData(false);
+		n.updateOptions(l), r.renderValues(), r.renderOptions(l), i.afterChange && !v(a, t.getSelected()) && i.afterChange(t.getSelectedOptions());
+	}
+}, z = class {
+	selectEl;
+	settings;
+	cssClasses;
+	select;
+	store;
+	render;
+	sync;
+	lifecycle;
+	globalEvents;
+	searchGeneration = 0;
+	events = {
+		search: void 0,
+		searchFilter: (e, t) => e.text.toLowerCase().indexOf(t.toLowerCase()) !== -1,
+		addable: void 0,
+		beforeChange: void 0,
+		afterChange: void 0,
+		beforeOpen: void 0,
+		afterOpen: void 0,
+		beforeClose: void 0,
+		afterClose: void 0
+	};
+	constructor(t) {
+		if (this.selectEl = typeof t.select == "string" ? document.querySelector(t.select) : t.select, !this.selectEl) {
+			t.events && t.events.error && t.events.error(/* @__PURE__ */ Error("Could not find select element"));
+			return;
+		}
+		if (this.selectEl.tagName !== "SELECT") {
+			t.events && t.events.error && t.events.error(/* @__PURE__ */ Error("Element isnt of type select"));
+			return;
+		}
+		this.selectEl.dataset.ssid && this.destroy(), this.settings = new d(t.settings), this.cssClasses = new e(t.cssClasses);
+		let n = [
+			"beforeOpen",
+			"afterOpen",
+			"afterClose"
+		];
+		for (let e in t.events) t.events.hasOwnProperty(e) && (n.indexOf(e) === -1 ? this.events[e] = t.events[e] : this.events[e] = _(t.events[e], 100));
+		this.settings.disabled = t.settings?.disabled ? t.settings.disabled : this.selectEl.disabled, this.settings.isMultiple = this.selectEl.multiple, this.settings.style = this.selectEl.style.cssText, this.settings.class = this.selectEl.className.split(" "), this.select = new F(this.selectEl), this.selectEl.id || (this.selectEl.id = this.settings.id), this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class), this.select.hideUI(), this.select.onClassChange = (e) => {
+			this.settings.class = e, this.render.updateClassStyles();
+		}, this.select.onDisabledChange = (e) => {
+			e ? this.disable() : this.enable();
+		}, this.select.onLabelClick = () => {
+			this.settings.disabled || (this.settings.isOpen ? this.close({
+				source: "toggle",
+				selectionChanged: false
+			}) : this.open());
+		};
+		let r = t.data ? t.data : this.select.getData();
+		this.store = new M(this.settings.isMultiple ? "multiple" : "single", r), t.data && this.select.updateOptions(this.store.getData());
+		let i = {
+			open: this.open.bind(this),
+			close: this.close.bind(this),
+			addable: this.events.addable ? this.events.addable : void 0,
+			setSelected: (e, t) => {
+				this.sync.enqueue({
+					type: "selection",
+					values: e,
+					source: "ui",
+					runAfterChange: t
+				});
+			},
+			addOption: (e) => {
+				this.sync.enqueue({
+					type: "addOption",
+					option: e,
+					source: "ui"
+				});
+			},
+			search: this.search.bind(this),
+			beforeChange: this.events.beforeChange,
+			afterChange: this.events.afterChange
+		};
+		this.settings.modalTitle = t.settings?.modalTitle ?? m(this.selectEl), this.render = new N(this.settings, this.cssClasses, this.store, i), this.settings.timeoutDelay = a(this.render.content.main, t.settings?.timeoutDelay), this.sync = new R({
+			select: this.select,
+			store: this.store,
+			render: this.render,
+			events: this.events,
+			search: this.search.bind(this)
+		}), this.select.onValueChange = (e) => {
+			this.sync.enqueue({
+				type: "selection",
+				values: e.map((e) => e.id),
+				source: "native"
+			});
+		}, this.select.onOptionsChange = (e) => {
+			this.sync.enqueue({
+				type: "structure",
+				data: e || [],
+				source: "native"
+			});
+		}, this.lifecycle = new k({
+			beforeOpen: this.events.beforeOpen,
+			afterOpen: this.events.afterOpen,
+			beforeClose: (e) => this.events.beforeClose?.(e),
+			onClose: (e) => this.applyClose(e),
+			afterClose: () => {
+				this.render.clearDirectionClasses(), this.render.finalizeModalClose(), this.events.afterClose && this.events.afterClose();
+			},
+			onOpenReady: () => this.globalEvents.attachDocumentClick(),
+			onCloseReady: () => this.globalEvents.detachDocumentClick()
+		}, {
+			timeoutDelay: this.settings.timeoutDelay,
+			waitForAnimation: (e, t) => this.render.waitForAnimation(e, t)
+		}), this.globalEvents = new O({
+			onDocumentClick: this.documentClick.bind(this),
+			onWindowResize: () => {
+				!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
+			},
+			onWindowScroll: () => {
+				!this.settings.isOpen && !this.settings.isFullOpen || this.render.moveContent();
+			},
+			onVisibilityChange: () => {
+				document.hidden && this.close({
+					source: "api",
+					selectionChanged: false
+				});
+			}
+		}), this.render.renderValues(), this.render.renderOptions(this.store.getData(false));
+		let o = this.selectEl.getAttribute("aria-label"), s = this.selectEl.getAttribute("aria-labelledby");
+		if (o) this.render.main.main.setAttribute("aria-label", o);
+		else if (s) this.render.main.main.removeAttribute("aria-label"), this.render.main.main.setAttribute("aria-labelledby", s);
+		else if (this.selectEl.labels && this.selectEl.labels.length > 0) {
+			let e = Array.from(this.selectEl.labels).map((e, t) => (e.id ||= `${this.settings.id}-label-${t}`, e.id));
+			this.render.main.main.removeAttribute("aria-label"), this.render.main.main.setAttribute("aria-labelledby", e.join(" "));
+		}
+		this.selectEl.parentNode && this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling), this.globalEvents.attach({ listenScroll: this.settings.openPosition === "auto" }), this.settings.disabled && this.disable(), this.settings.alwaysOpen && this.open(), this.select.setupLabelHandlers(), this.selectEl.slim = this;
+	}
+	enable() {
+		this.settings.disabled = false, this.select.enable(), this.render.enable();
+	}
+	disable() {
+		this.settings.disabled = true, this.select.disable(), this.render.disable();
+	}
+	getData() {
+		return this.store.getData();
+	}
+	setData(e) {
+		this.sync.enqueue({
+			type: "structure",
+			data: e,
+			source: "api"
+		});
+	}
+	getSelected() {
+		let e = this.store.getSelectedOptions();
+		return this.settings.keepOrder && (e = this.store.selectedOrderOptions(e)), e.map((e) => e.value);
+	}
+	setSelected(e, t = true) {
+		this.sync.enqueue({
+			type: "selection",
+			values: e,
+			source: "api",
+			runAfterChange: t
+		});
+	}
+	addOption(e) {
+		this.sync.enqueue({
+			type: "addOption",
+			option: e,
+			source: "api"
+		});
+	}
+	open() {
+		if (this.settings.disabled || this.settings.isOpen) return;
+		this.lifecycle.cancelPending(), this.render.open(), this.settings.showSearch && this.settings.focusSearch && this.render.searchFocus(), this.settings.isOpen = true, this.lifecycle.requestOpen().then(() => {
+			this.settings.isOpen && (this.settings.isFullOpen = this.lifecycle.isFullOpen, this.settings.isOpen = this.lifecycle.isOpen);
+		}), this.settings.contentPosition === "absolute" && !this.render.isModalViewActive() && this.render.startPositionTracking();
+		let e = this.render.content.search.input.value.trim();
+		e !== "" && this.search(e);
+	}
+	close(e = {
+		source: "api",
+		selectionChanged: false
+	}) {
+		!this.settings.isOpen || this.settings.alwaysOpen || this.lifecycle.requestClose(e).then((e) => {
+			e && (this.settings.isOpen || (this.settings.isOpen = this.lifecycle.isOpen, this.settings.isFullOpen = this.lifecycle.isFullOpen));
+		});
+	}
+	applyClose(e) {
+		this.render.close(), !this.settings.keepSearch && this.render.content.search.input.value !== "" && (this.sync.flush(), this.search(""));
+		let t = e.source === "outside" || e.source === "toggle";
+		this.render.mainFocus(t ? "click" : null), this.settings.isOpen = false, this.settings.isFullOpen = false, this.render.stopPositionTracking();
+	}
+	search(e) {
+		let t = e.trim();
+		if (t === "") {
+			this.render.content.search.input.value = "", this.clearSearch();
+			return;
+		}
+		if (this.render.content.search.input.value !== e && (this.render.content.search.input.value = e), this.events.search) {
+			this.runApiSearch(t);
+			return;
+		}
+		this.runLocalSearch(t);
+	}
+	clearSearch() {
+		if (this.searchGeneration++, !this.events.search && this.render.canFilterOptionsInPlace()) {
+			this.render.filterOptionsInPlace("", this.events.searchFilter), this.render.resetSearchFilterState();
+			return;
+		}
+		this.render.resetSearchFilterState(), this.sync.enqueue({
+			type: "structure",
+			data: this.store.getCatalogData(),
+			source: "api",
+			preserveSelection: true
+		});
+	}
+	runLocalSearch(e) {
+		if (this.render.canFilterOptionsInPlace()) {
+			this.render.filterOptionsInPlace(e, this.events.searchFilter);
+			return;
+		}
+		let t = this.store.search(e, this.events.searchFilter);
+		this.render.renderOptions(t);
+	}
+	runApiSearch(e) {
+		let t = ++this.searchGeneration;
+		this.render.renderSearching();
+		let n = this.events.search(e, this.store.getSelectedOptions(), this.store.getCatalogData()), r = (n) => {
+			t === this.searchGeneration && this.render.content.search.input.value.trim() === e && this.sync.enqueue({
+				type: "structure",
+				data: n,
+				source: "api",
+				preserveSelection: true,
+				isSearchResult: true
+			});
+		};
+		if (n instanceof Promise) {
+			n.then(r).catch((e) => {
+				t === this.searchGeneration && this.render.renderError(typeof e == "string" ? e : e.message);
+			});
+			return;
+		}
+		if (Array.isArray(n)) {
+			r(n);
+			return;
+		}
+		this.render.renderError("Search event must return a promise or an array of data");
+	}
+	destroy() {
+		this.lifecycle.destroy(), this.render.stopPositionTracking(), this.globalEvents.detach({ listenScroll: this.settings.openPosition === "auto" }), this.store.setData([]), this.render.destroy(), this.select.destroy(), delete this.selectEl.slim;
+	}
+	documentClick(e) {
+		this.settings.isOpen && e.target && !g(e.target, this.settings.id) && this.close({
+			source: "outside",
+			selectionChanged: false
+		});
+	}
+};
+
+const i18nDsSelect = {
+    de: {
+        searchPlaceholder: 'Suchen…',
+        noResults: 'Keine Ergebnisse',
+    },
+    en: {
+        searchPlaceholder: 'Search…',
+        noResults: 'No results',
+    },
+    fr: {
+        searchPlaceholder: 'Rechercher…',
+        noResults: 'Aucun résultat',
+    },
+    it: {
+        searchPlaceholder: 'Cerca…',
+        noResults: 'Nessun risultato',
+    },
+    nl: {
+        searchPlaceholder: 'Zoeken…',
+        noResults: 'Geen resultaten',
+    },
+    es: {
+        searchPlaceholder: 'Buscar…',
+        noResults: 'Sin resultados',
+    },
+    pl: {
+        searchPlaceholder: 'Szukaj…',
+        noResults: 'Brak wyników',
+    },
+    pt: {
+        searchPlaceholder: 'Pesquisar…',
+        noResults: 'Sem resultados',
+    },
+    sv: {
+        searchPlaceholder: 'Sök…',
+        noResults: 'Inga resultat',
+    },
+    fi: {
+        searchPlaceholder: 'Hae…',
+        noResults: 'Ei tuloksia',
+    },
+};
+
+function buildSlimData(options, optionGroups, placeholder, value) {
+    const selected = Array.isArray(value) ? value : value ? [value] : [];
+    const data = [];
+    data.push({ text: placeholder || '', placeholder: true });
+    if (optionGroups.length > 0) {
+        data.push(...optionGroups.map(group => ({
+            label: group.label,
+            options: group.options.map(opt => ({
+                text: opt.label,
+                value: opt.value,
+                disabled: !!opt.disabled,
+                selected: selected.includes(opt.value),
+            })),
+        })));
+    }
+    else {
+        data.push(...options.map(opt => ({
+            text: opt.label,
+            value: opt.value,
+            disabled: !!opt.disabled,
+            selected: selected.includes(opt.value),
+        })));
+    }
+    return data;
+}
+const TYPEAHEAD_TIMEOUT_MS = 500;
+class SelectPickerController {
+    constructor(config) {
+        this.typeAheadBuffer = '';
+        this.typeAheadLastTime = 0;
+        this.config = config;
+        this.init();
+    }
+    /**
+     * PUBLIC API
+     * ------------------------------------------------------
+     */
+    open() {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.open();
+    }
+    close() {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    focus() {
+        var _a;
+        (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    blur() {
+        var _a;
+        (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    setData(data) {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.setData(data);
+    }
+    setSelected(value) {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.setSelected(value);
+    }
+    setDisabled(disabled) {
+        var _a, _b;
+        if (disabled) {
+            (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.disable();
+        }
+        else {
+            (_b = this.slimSelect) === null || _b === void 0 ? void 0 : _b.enable();
+        }
+    }
+    updateSearchPlaceholder(language) {
+        const searchInput = this.config.shadowRoot.querySelector('.ss-search input');
+        if (searchInput)
+            searchInput.placeholder = i18nDsSelect[language].searchPlaceholder;
+    }
+    destroy() {
+        var _a;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.slimSelect = undefined;
+    }
+    /**
+     * PRIVATE
+     * ------------------------------------------------------
+     */
+    get trigger() {
+        return this.config.shadowRoot.querySelector('.ss-main');
+    }
+    init() {
+        const { selectEl, popupEl, language, searchable, placeholder, disabled, readonly, multiple, clearable, data } = this.config;
+        this.slimSelect = new z({
+            select: selectEl,
+            settings: {
+                contentLocation: popupEl,
+                contentPosition: 'relative',
+                searchHighlight: true,
+                showSearch: searchable,
+                focusSearch: searchable,
+                searchPlaceholder: i18nDsSelect[language].searchPlaceholder,
+                searchText: i18nDsSelect[language].noResults,
+                placeholderText: placeholder || ' ',
+                disabled: disabled || readonly,
+                closeOnSelect: !multiple,
+                allowDeselect: clearable,
+                modal: 'off',
+            },
+            data,
+            events: {
+                afterChange: (newVal) => this.config.onChange(newVal),
+                afterOpen: () => {
+                    this.highlightFirstOption();
+                    this.config.onOpen();
+                },
+                afterClose: () => this.config.onClose(),
+            },
+        });
+        this.connectLabelToTrigger();
+        this.fixSearchListener();
+        this.fixKeyboardOpen();
+        this.fixOptionFocus();
+        this.fixTypeAhead();
+        this.highlightFirstOption();
+    }
+    // slim-select never auto-highlights an option: arrow keys are the only built-in trigger.
+    // We want the first matching option highlighted whenever the list opens or a search
+    // narrows the results, so keyboard users can immediately Enter/Space it. Skip it if
+    // something is already highlighted (e.g. from a previous arrow-key navigation).
+    highlightFirstOption() {
+        var _a;
+        if (this.config.popupEl.querySelector('.ss-highlighted'))
+            return;
+        (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.render.highlight('down');
+    }
+    // Shadow DOM event retargeting makes e.target null inside slim-select's keyup handler.
+    // Intercept during capture phase (before slim-select's bubble listener), stop propagation,
+    // and drive the search programmatically from the element reference instead.
+    fixSearchListener() {
+        if (!this.config.searchable)
+            return;
+        const searchInput = this.config.shadowRoot.querySelector('.ss-search input');
+        if (!searchInput)
+            return;
+        searchInput.addEventListener('input', ev => {
+            var _a, _b;
+            ev.stopImmediatePropagation();
+            (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.search((_b = searchInput.value) !== null && _b !== void 0 ? _b : '');
+            this.highlightFirstOption();
+        }, { capture: true });
+    }
+    // SlimSelect's Space/Enter listener uses document.activeElement to find its trigger,
+    // but Shadow DOM retargeting returns the host element instead of .ss-main after a
+    // programmatic focus() call — so Space stops working after the first selection.
+    // We intercept keydown on the trigger directly to reopen the dropdown ourselves.
+    fixKeyboardOpen() {
+        const trigger = this.trigger;
+        if (!trigger)
+            return;
+        trigger.addEventListener('keydown', ev => {
+            var _a;
+            const target = ev.target;
+            if ((ev.key === ' ' || ev.key === 'Enter') &&
+                target === trigger &&
+                !target.classList.contains('ss-value-delete') &&
+                !trigger.classList.contains('ss-open')) {
+                ev.preventDefault();
+                (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.open();
+            }
+        });
+    }
+    // Options are plain non-focusable divs, so a mouse click's mousedown phase makes the
+    // browser blur .ss-main by default (before slim-select's own click handler ever runs).
+    // Arrow-key navigation is wired to .ss-main's keydown, so once it loses focus keyboard
+    // navigation silently breaks — and for multiple selects (closeOnSelect: false) slim-select
+    // never re-focuses .ss-main afterwards, since it only does so on close. Prevent the browser's
+    // default focus-shift at the source so .ss-main simply never loses focus during option clicks.
+    fixOptionFocus() {
+        this.config.popupEl.addEventListener('mousedown', ev => {
+            const target = ev.target;
+            if (target.closest('.ss-option'))
+                ev.preventDefault();
+        }, { capture: true });
+    }
+    // Non-searchable selects have no way to jump to an option by typing, unlike a native
+    // <select> which supports "hidden" keyboard search: typing a letter jumps to the first
+    // option starting with it, and repeating the same letter cycles through matches. We
+    // replicate that here — highlighting the match while open, or selecting it directly
+    // when closed — since slim-select itself doesn't offer this for non-searchable mode.
+    fixTypeAhead() {
+        if (this.config.searchable)
+            return;
+        const trigger = this.trigger;
+        if (!trigger)
+            return;
+        trigger.addEventListener('keydown', ev => this.handleTypeAhead(ev));
+    }
+    handleTypeAhead(ev) {
+        var _a;
+        const key = ev.key;
+        if (key.length !== 1 || key === ' ' || ev.ctrlKey || ev.metaKey || ev.altKey)
+            return;
+        const render = (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.render;
+        if (!render)
+            return;
+        const now = Date.now();
+        const withinTimeout = now - this.typeAheadLastTime <= TYPEAHEAD_TIMEOUT_MS;
+        this.typeAheadLastTime = now;
+        const isRepeat = withinTimeout && this.typeAheadBuffer.length > 0 && [...this.typeAheadBuffer].every(c => c === key);
+        this.typeAheadBuffer = withinTimeout ? this.typeAheadBuffer + key : key;
+        const options = render.getOptions(true, true, true);
+        if (options.length === 0)
+            return;
+        const highlightedClass = render.classes.getFirst('highlighted');
+        const highlighted = this.config.popupEl.querySelector(`.${highlightedClass}`);
+        const startIndex = highlighted ? options.indexOf(highlighted) : -1;
+        const match = isRepeat
+            ? this.findNextTypeAheadMatch(options, key, startIndex)
+            : options.find(o => this.optionText(o).startsWith(this.typeAheadBuffer.toLowerCase()));
+        if (!match)
+            return;
+        ev.preventDefault();
+        const isOpen = render.content.main.classList.contains(render.classes.getFirst('contentOpen'));
+        if (isOpen) {
+            this.setHighlightedOption(match);
+        }
+        else {
+            match.click();
+        }
+    }
+    findNextTypeAheadMatch(options, char, startIndex) {
+        var _a;
+        const lower = char.toLowerCase();
+        const matches = options.filter(o => this.optionText(o).startsWith(lower));
+        if (matches.length === 0)
+            return undefined;
+        return (_a = matches.find(o => options.indexOf(o) > startIndex)) !== null && _a !== void 0 ? _a : matches[0];
+    }
+    optionText(option) {
+        var _a;
+        return ((_a = option.textContent) !== null && _a !== void 0 ? _a : '').trim().toLowerCase();
+    }
+    setHighlightedOption(target) {
+        var _a;
+        const render = (_a = this.slimSelect) === null || _a === void 0 ? void 0 : _a.render;
+        if (!render)
+            return;
+        const highlightedClass = render.classes.highlighted;
+        const current = this.config.popupEl.querySelector(`.${render.classes.getFirst('highlighted')}`);
+        if (current && current !== target)
+            render.removeClasses(current, highlightedClass);
+        render.addClasses(target, highlightedClass);
+        render.ensureElementInView(render.content.list, target);
+        if (target.id)
+            render.main.main.setAttribute('aria-activedescendant', target.id);
+    }
+    connectLabelToTrigger() {
+        const ssMain = this.trigger;
+        if (ssMain) {
+            ssMain.id = this.config.triggerId;
+            ssMain.setAttribute('aria-labelledby', 'label');
+            ssMain.removeAttribute('aria-label');
+        }
+        // <label for="..."> only focuses native labelable elements; .ss-main is a div,
+        // so the browser ignores the for/id link. Wire it manually.
+        const label = this.config.shadowRoot.querySelector('label');
+        if (label && ssMain) {
+            label.addEventListener('click', ev => {
+                ev.preventDefault();
+                ssMain.focus();
+            });
+        }
+    }
+}
+
+const selectHostCss = () => `:root{--ss-primary-color:#5897fb;--ss-bg-color:#ffffff;--ss-font-color:#4d4d4d;--ss-placeholder-color:#8d8d8d;--ss-disabled-color:#dcdee2;--ss-border-color:#dcdee2;--ss-highlight-color:#fffb8c;--ss-focus-color:var(--ss-primary-color);--ss-success-color:#00b755;--ss-error-color:#dc3545;--ss-main-height:40px;--ss-content-height:300px;--ss-modal-height:85vh;--ss-modal-width:min(90vw, 400px);--ss-search-height:var(--ss-main-height);--ss-option-height:var(--ss-main-height);--ss-spacing-l:9px;--ss-spacing-m:7px;--ss-spacing-s:5px;--ss-animation-timing:0.2s;--ss-border-radius:4px;--ss-modal-z-index:1000001}@-webkit-keyframes ss-valueIn{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes ss-valueIn{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-webkit-keyframes ss-valueOut{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);opacity:0}}@keyframes ss-valueOut{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:0 var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color var(--ss-animation-timing),border-radius var(--ss-animation-timing);transition:background-color var(--ss-animation-timing),border-radius var(--ss-animation-timing)}@media (prefers-reduced-motion: reduce){.ss-main{-webkit-transition:background-color var(--ss-animation-timing);transition:background-color var(--ss-animation-timing)}}.ss-main{overflow:hidden}.ss-main:focus{-webkit-box-shadow:0 0 5px var(--ss-focus-color);box-shadow:0 0 5px var(--ss-focus-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-dir-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-dir-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-item-align:stretch;align-self:stretch;gap:var(--ss-spacing-m);-ms-flex:1 1 0%;flex:1 1 0%;min-width:0;max-width:100%;padding:var(--ss-spacing-s) 0;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ss-main .ss-values:has(.ss-multi-string){-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:0}.ss-main .ss-values:has(.ss-single),.ss-main .ss-values:has(.ss-placeholder){-ms-flex-wrap:nowrap;flex-wrap:nowrap}.ss-main .ss-values .ss-single,.ss-main .ss-values .ss-placeholder,.ss-main .ss-values .ss-multi-string{display:block;-ms-flex:1 1 0%;flex:1 1 0%;min-width:0;width:100%;max-width:100%;margin:0;padding:0 var(--ss-spacing-m) 0 calc(var(--ss-spacing-l) - var(--ss-spacing-s));line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box}.ss-main .ss-values .ss-placeholder{color:var(--ss-placeholder-color)}.ss-main .ss-values .ss-max{display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-value{display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);-webkit-animation-name:ss-valueIn;animation-name:ss-valueIn;-webkit-animation-duration:var(--ss-animation-timing);animation-duration:var(--ss-animation-timing);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ss-main .ss-values .ss-value{-webkit-animation:none;animation:none}}.ss-main .ss-values .ss-value.ss-value-out{-webkit-animation-name:ss-valueOut;animation-name:ss-valueOut;-webkit-animation-duration:var(--ss-animation-timing);animation-duration:var(--ss-animation-timing);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{-ms-flex:1;flex:1;min-width:0;font-size:12px;line-height:1;color:var(--ss-bg-color);padding:var(--ss-spacing-s) var(--ss-spacing-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-value .ss-value-delete{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);-webkit-box-sizing:content-box;box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{-ms-flex:0 1 auto;flex:0 1 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto;padding:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{-ms-flex:0 1 auto;flex:0 1 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition:var(--ss-animation-timing);transition:var(--ss-animation-timing)}.ss-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ss-content{position:absolute;display:-ms-flexbox;display:flex;height:auto;-ms-flex-direction:column;flex-direction:column;width:auto;max-height:var(--ss-content-height);-webkit-box-sizing:border-box;box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);min-height:0;-webkit-transition:opacity var(--ss-animation-timing),-webkit-transform var(--ss-animation-timing);transition:opacity var(--ss-animation-timing),-webkit-transform var(--ss-animation-timing);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing),-webkit-transform var(--ss-animation-timing);opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0);overflow:hidden;z-index:10000}@media (prefers-reduced-motion: reduce){.ss-content{-webkit-transition:none;transition:none}}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-fixed{position:fixed}.ss-content.ss-dir-above{-webkit-transform-origin:center bottom;transform-origin:center bottom;-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-dir-below{-webkit-transform-origin:center top;transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content.ss-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}.ss-content .ss-search{-ms-flex:0 1 auto;flex:0 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:var(--ss-spacing-s);min-height:var(--ss-search-height);padding:0 var(--ss-spacing-s);-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid var(--ss-border-color)}.ss-content .ss-search input{display:-ms-inline-flexbox;display:inline-flex;font-size:inherit;line-height:inherit;-ms-flex:1 1 auto;flex:1 1 auto;width:100%;min-width:0;min-height:0;height:100%;padding:0 var(--ss-spacing-m);margin:0;border:none;background-color:var(--ss-bg-color);outline:0;text-align:left;-webkit-box-sizing:border-box;box-sizing:border-box}.ss-content .ss-search input::-webkit-input-placeholder{color:var(--ss-placeholder-color);vertical-align:middle}.ss-content .ss-search input::-moz-placeholder{color:var(--ss-placeholder-color);vertical-align:middle}.ss-content .ss-search input:-ms-input-placeholder{color:var(--ss-placeholder-color);vertical-align:middle}.ss-content .ss-search input::-ms-input-placeholder{color:var(--ss-placeholder-color);vertical-align:middle}.ss-content .ss-search input::placeholder{color:var(--ss-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{-webkit-box-shadow:none;box-shadow:none}.ss-content .ss-search .ss-addable{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-sizing:border-box;box-sizing:border-box;width:22px;height:22px;margin:auto 0;padding:0;border:none;border-radius:var(--ss-border-radius);background-color:var(--ss-primary-color)}.ss-content .ss-search .ss-addable svg{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex:0 0 auto;flex:0 0 auto;width:10px;height:10px;margin:0}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content.ss-dir-above .ss-search{border-bottom:none;border-top:1px solid var(--ss-border-color)}.ss-content .ss-list{-ms-flex:1 1 auto;flex:1 1 auto;height:auto;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:var(--ss-primary-color) var(--ss-bg-color)}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-option{min-height:0;-webkit-transition:max-height var(--ss-animation-timing) ease,min-height var(--ss-animation-timing) ease,opacity var(--ss-animation-timing) ease,padding-top var(--ss-animation-timing) ease,padding-bottom var(--ss-animation-timing) ease,margin-top var(--ss-animation-timing) ease,margin-bottom var(--ss-animation-timing) ease;transition:max-height var(--ss-animation-timing) ease,min-height var(--ss-animation-timing) ease,opacity var(--ss-animation-timing) ease,padding-top var(--ss-animation-timing) ease,padding-bottom var(--ss-animation-timing) ease,margin-top var(--ss-animation-timing) ease,margin-bottom var(--ss-animation-timing) ease}.ss-content .ss-list .ss-optgroup:not(.ss-close):not(.ss-open) .ss-option{min-height:var(--ss-option-height)}.ss-content .ss-list .ss-optgroup.ss-open .ss-option{min-height:var(--ss-option-height);max-height:100px;opacity:1;overflow:visible}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{min-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;max-height:0;opacity:0;overflow:hidden}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;min-height:var(--ss-option-height);padding:0 var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{-ms-flex:1 1 auto;flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{-ms-flex:0 1 auto;flex:0 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{-ms-flex:0 1 auto;flex:0 1 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{-ms-flex:0 1 auto;flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{-ms-flex:0 1 auto;flex:0 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{-ms-flex:1 1 auto;flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transition:var(--ss-animation-timing);transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:0 var(--ss-spacing-l) 0 calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:var(--ss-option-height);padding:0 var(--ss-spacing-l);white-space:normal;color:var(--ss-font-color);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;content-visibility:auto;contain-intrinsic-size:auto var(--ss-option-height)}.ss-content .ss-list .ss-option:hover:not(.ss-disabled){color:var(--ss-bg-color);background-color:var(--ss-primary-color);border-left:5px solid var(--ss-primary-color);-webkit-transition:border-left var(--ss-animation-timing) ease;transition:border-left var(--ss-animation-timing) ease}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{display:inline-block;background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-search{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;min-height:var(--ss-search-height);padding:0 var(--ss-spacing-l)}.ss-modal-overlay{position:fixed;inset:0;z-index:var(--ss-modal-z-index);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--ss-spacing-l);-webkit-box-sizing:border-box;box-sizing:border-box;background-color:rgba(0,0,0,.8);opacity:0;-webkit-transition:opacity var(--ss-animation-timing);transition:opacity var(--ss-animation-timing)}@media (prefers-reduced-motion: reduce){.ss-modal-overlay{-webkit-transition:none;transition:none}}.ss-modal-overlay.ss-open{opacity:1}.ss-modal-overlay .ss-modal-dialog{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:var(--ss-modal-width);max-height:var(--ss-modal-height);overflow:visible}.ss-modal-overlay .ss-modal-dialog .ss-modal-title{-ms-flex:0 0 auto;flex:0 0 auto;width:100%;padding:0 0 var(--ss-spacing-l);-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:bold;font-size:1.35em;line-height:1.3;color:#fff;text-align:left;background:none;border:none}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content{position:relative !important;top:auto !important;left:auto !important;width:100% !important;max-width:100%;max-height:var(--ss-modal-height);min-height:0;margin:0 !important;-webkit-transform-origin:center center;transform-origin:center center;z-index:1;border-radius:var(--ss-border-radius);overflow:visible}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close{position:absolute;top:0;right:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:28px;height:28px;padding:0;margin:0;border:none;border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);color:var(--ss-font-color);cursor:pointer;outline:0;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.5);box-shadow:0 1px 4px rgba(0,0,0,.5);-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close:hover{background-color:var(--ss-bg-color);-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close:focus{-webkit-box-shadow:0 0 5px var(--ss-focus-color);box-shadow:0 0 5px var(--ss-focus-color)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close svg{width:10px;height:10px}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close svg path{fill:none;stroke:currentColor;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-list{min-height:0;overflow-x:hidden;overflow-y:auto;border-radius:0 0 var(--ss-border-radius) var(--ss-border-radius);scrollbar-color:var(--ss-primary-color) var(--ss-bg-color)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-search.ss-hide~.ss-list{border-radius:var(--ss-border-radius)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content.ss-dir-above,.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content.ss-dir-below{-ms-flex-direction:column;flex-direction:column;-webkit-transform-origin:center center;transform-origin:center center}:host{--_form-field-gap:var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-container-background:var(--form-container-background, var(--mod-form-container-background, var(--ds-form-container-color-base-background)));--_form-container-border-color:var(--form-container-border-color, var(--mod-form-container-border-color, var(--ds-form-container-color-base-border)));--_form-container-border-width:var(--form-container-border-width, var(--mod-form-container-border-width, var(--ds-form-container-border-width)));--_form-container-radius:var(--form-container-radius, var(--mod-form-container-radius, var(--ds-form-container-radius)));--_form-container-hover-background:var(--form-container-hover-background, var(--mod-form-container-hover-background, var(--ds-form-container-color-hover-background)));--_form-container-active-background:var(--form-container-active-background, var(--mod-form-container-active-background, var(--ds-form-container-color-active-background)));--_form-container-focus-background:var(--form-container-focus-background, var(--mod-form-container-focus-background, var(--ds-form-container-color-focus-background)));--_form-container-hover-border:var(--form-container-hover-border, var(--mod-form-container-hover-border, var(--ds-form-container-color-hover-border)));--_form-container-active-border:var(--form-container-active-border, var(--mod-form-container-active-border, var(--ds-form-container-color-active-border)));--_form-container-focus-border:var(--form-container-focus-border, var(--mod-form-container-focus-border, var(--ds-form-container-color-focus-border)));--_form-label-color:var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family:var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight:var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height:var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size:var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color:var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family:var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight:var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height:var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size:var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));--_select-family:var(--select-family, var(--mod-select-family, var(--ds-form-control-family)));--_select-weight:var(--select-weight, var(--mod-select-weight, var(--ds-form-control-weight)));--_select-line-height:var(--select-line-height, var(--mod-select-line-height, var(--ds-form-control-line-height)));--_select-size:var(--select-size, var(--mod-select-size, var(--ds-form-control-size-device)));--_select-color:var(--select-color, var(--mod-select-color, var(--ds-form-control-color-value-base)));--_select-placeholder:var(--select-placeholder, var(--mod-select-placeholder, var(--ds-form-control-color-placeholder-base)));--_select-background-color:var(--select-background-color, var(--mod-select-background-color, var(--ds-select-color-background-base)));--_select-text-color:var(--select-text-color, var(--mod-select-text-color, var(--ds-select-color-text-base)));--_select-primary-color:var(--select-primary-color, var(--mod-select-primary-color, var(--ds-select-color-primary-base)));--_select-placeholder-color:var(--select-placeholder-color, var(--mod-select-placeholder-color, var(--ds-select-color-placeholder-base)));--_select-disabled-color:var(--select-disabled-color, var(--mod-select-disabled-color, var(--ds-select-color-disabled)));--_select-border-color:var(--select-border-color, var(--mod-select-border-color, var(--ds-select-color-border-base)));--_select-highlight-color:var(--select-highlight-color, var(--mod-select-highlight-color, var(--ds-select-color-highlight-base)));--_select-focus-color:var(--select-focus-color, var(--mod-select-focus-color, var(--ds-select-color-focus-base)));--_select-success-color:var(--select-success-color, var(--mod-select-success-color, var(--ds-select-color-success)));--_select-error-color:var(--select-error-color, var(--mod-select-error-color, var(--ds-select-color-error)));--_select-radius:var(--select-radius, var(--mod-select-radius, var(--ds-select-radius)));--_select-content-family:var(--select-content-family, var(--mod-select-content-family, var(--ds-select-content-family)));--_select-content-background-color:var(--select-content-background-color, var(--mod-select-content-background-color, var(--ds-select-content-color-background-base)));--_select-content-shadow:var(--select-content-shadow, var(--mod-select-content-shadow, var(--ds-select-content-shadow)));--_select-search-text-color:var(--select-search-text-color, var(--mod-select-search-text-color, var(--ds-select-search-color-text-base)));--_select-option-text-color:var(--select-option-text-color, var(--mod-select-option-text-color, var(--ds-select-option-color-text-base)));--_select-option-background-color:var(--select-option-background-color, var(--mod-select-option-background-color, var(--ds-select-option-color-background-base)));--_select-option-border-color:var(--select-option-border-color, var(--mod-select-option-border-color, var(--ds-select-option-color-border-base)));--_select-option-selected-weight:var(--select-option-selected-weight, var(--mod-select-option-selected-weight, var(--ds-select-option-weight-selected)));--_select-option-selected-icon-color:var(--select-option-selected-icon-color, var(--mod-select-option-selected-icon-color, var(--ds-select-option-color-icon-selected)));--_select-option-selected-text-color:var(--select-option-selected-text-color, var(--mod-select-option-selected-text-color, var(--ds-select-option-color-text-selected)));--_select-option-selected-background-color:var(--select-option-selected-background-color, var(--mod-select-option-selected-background-color, var(--ds-select-option-color-background-selected)));--_select-option-hover-text-color:var(--select-option-hover-text-color, var(--mod-select-option-hover-text-color, var(--ds-select-option-color-text-hover)));--_select-option-hover-background-color:var(--select-option-hover-background-color, var(--mod-select-option-hover-background-color, var(--ds-select-option-color-background-hover)));--_select-option-highlight-text-color:var(--select-option-highlight-text-color, var(--mod-select-option-highlight-text-color, var(--ds-select-option-color-text-highlight)));--_select-option-highlight-background-color:var(--select-option-highlight-background-color, var(--mod-select-option-highlight-background-color, var(--ds-select-option-color-background-highlight)));--_select-option-disabled-text-color:var(--select-option-disabled-text-color, var(--mod-select-option-disabled-text-color, var(--ds-select-option-color-text-disabled)));--_select-option-disabled-background-color:var(--select-option-disabled-background-color, var(--mod-select-option-disabled-background-color, var(--ds-select-option-color-background-disabled)));--_select-optgroup-background-color:var(--select-optgroup-background-color, var(--mod-select-optgroup-background-color, var(--ds-select-optgroup-color-background-base)));--_select-optgroup-text-color:var(--select-optgroup-text-color, var(--mod-select-optgroup-text-color, var(--ds-select-optgroup-color-text-base)));--_select-optgroup-weight:var(--select-optgroup-weight, var(--mod-select-optgroup-weight, var(--ds-select-optgroup-weight)));--_select-icon-color:var(--select-icon-color, var(--mod-select-icon-color, var(--ds-select-icon-color-base)));--_select-icon-hover-color:var(--select-icon-hover-color, var(--mod-select-icon-hover-color, var(--ds-select-icon-color-hover)));--_select-icon-active-color:var(--select-icon-active-color, var(--mod-select-icon-active-color, var(--ds-select-icon-color-active)));--_select-tag-background-color:var(--select-tag-background-color, var(--mod-select-tag-background-color, var(--ds-select-chip-color-base-background)));--_select-tag-text-color:var(--select-tag-text-color, var(--mod-select-tag-text-color, var(--ds-select-chip-color-base-text)));--_select-tag-family:var(--select-tag-family, var(--mod-select-tag-family, var(--ds-select-chip-family)));--_select-checkbox-border-color:var(--select-checkbox-border-color, var(--mod-select-checkbox-border-color, var(--ds-select-checkbox-color-border-base)));--_select-checkbox-selected-background-color:var(--select-checkbox-selected-background-color, var(--mod-select-checkbox-selected-background-color, var(--ds-select-checkbox-color-background-selected)));--_select-checkbox-selected-border-color:var(--select-checkbox-selected-border-color, var(--mod-select-checkbox-selected-border-color, var(--ds-select-checkbox-color-border-selected)));--_select-focus-ring-color:var(--select-focus-ring-color, var(--mod-select-focus-ring-color, var(--ds-select-color-focus-ring-base)));--ss-bg-color:var(--_select-background-color);--ss-font-color:var(--_select-text-color);--ss-primary-color:var(--_select-primary-color);--ss-placeholder-color:var(--_select-placeholder-color);--ss-disabled-color:var(--_select-disabled-color);--ss-border-color:var(--_select-border-color);--ss-highlight-color:var(--_select-highlight-color);--ss-focus-color:var(--_select-focus-color);--ss-success-color:var(--_select-success-color);--ss-error-color:var(--_select-error-color);--ss-main-height:40px;--ss-content-height:300px;--ss-modal-height:85vh;--ss-modal-width:min(90vw, 400px);--ss-search-height:var(--ss-main-height);--ss-option-height:var(--ss-main-height);--ss-spacing-l:8px;--ss-spacing-m:4px;--ss-spacing-s:2px;--ss-icon-spacing:10px;--ss-animation-timing:0.2s;--ss-border-radius:var(--_select-radius);--ss-modal-z-index:1000001}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{-webkit-box-sizing:border-box;box-sizing:border-box;clear:both;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;min-height:3rem;gap:.25rem;padding-inline:.5rem;background:var(--_form-container-background);border:var(--_form-container-border-width) solid var(--_form-container-border-color);border-radius:var(--_form-container-radius)}@media (hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_form-container-hover-background);border-color:var(--_form-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_form-container-active-background);border-color:var(--_form-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_form-container-focus-background);border-color:var(--_form-container-focus-border)}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color:var(--_form-description-color)}:host #inner{position:relative;display:grid;gap:var(--_form-field-gap)}:host select{display:none}:host #container{position:relative;padding-inline:0;cursor:pointer}:host(.is-danger){--mod-form-container-border-color:var(--ds-form-container-color-danger-border);--mod-form-description-color:var(--ds-form-description-color-danger);--mod-form-container-hover-border:var(--ds-form-container-color-danger-border);--mod-form-container-active-border:var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-container-border-color:var(--ds-form-container-color-success-border);--mod-form-description-color:var(--ds-form-description-color-success);--mod-form-container-hover-border:var(--ds-form-container-color-success-border);--mod-form-container-active-border:var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-container-border-color:var(--ds-form-container-color-warning-border);--mod-form-description-color:var(--ds-form-description-color-warning);--mod-form-container-hover-border:var(--ds-form-container-color-warning-border);--mod-form-container-active-border:var(--ds-form-container-color-warning-border)}:host(.is-disabled){pointer-events:none;cursor:default;--mod-form-container-background:var(--ds-form-container-color-disabled-background);--mod-form-container-border-color:var(--ds-form-container-color-disabled-border);--mod-form-label-color:var(--ds-form-label-color-disabled);--mod-form-description-color:var(--ds-form-description-color-disabled);--mod-select-color:var(--ds-form-control-color-value-disabled);--mod-select-placeholder:var(--ds-form-control-color-placeholder-disabled)}:host #container{position:relative}:host #popup{display:block}:host .ss-main{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{:host .ss-main{display:none !important}}:host .ss-main{padding:0;margin:0;border:none;-webkit-box-shadow:none;box-shadow:none;font-family:var(--_select-content-family);z-index:var(--ds-alias-z-index-popup)}:host .ss-content{background-color:var(--_select-content-background-color);-webkit-box-shadow:var(--_select-content-shadow);box-shadow:var(--_select-content-shadow);border:none;margin:0 !important;position:absolute;top:100%;left:0;width:100%;min-height:0;max-height:300px;height:auto}@media (prefers-reduced-motion: reduce){:host .ss-content{-webkit-transition:none !important;transition:none !important;-webkit-animation:none !important;animation:none !important}}:host .ss-content .ss-search{border-width:2px;border-color:var(--_form-container-border-color)}:host .ss-content .ss-search input{color:var(--_select-search-text-color)}:host .ss-content .ss-search input[type=search]::-ms-clear{display:none;width:0;height:0}:host .ss-content .ss-search input[type=search]::-ms-reveal{display:none;width:0;height:0}:host .ss-content .ss-search input[type=search]::-webkit-search-decoration,:host .ss-content .ss-search input[type=search]::-webkit-search-cancel-button,:host .ss-content .ss-search input[type=search]::-webkit-search-results-button,:host .ss-content .ss-search input[type=search]::-webkit-search-results-decoration{display:none}:host .ss-content .ss-list .ss-option .ss-search-highlight{font-weight:var(--_select-option-selected-weight);color:var(--_select-option-highlight-text-color);border-radius:var(--_select-radius)}:host .ss-content .ss-list .ss-option{color:var(--_select-option-text-color);background-color:var(--_select-option-background-color);border-left:none !important;border-bottom:2px solid var(--_select-option-border-color)}:host .ss-content .ss-list .ss-option:last-child{border-bottom:none}:host .ss-content .ss-list .ss-option::after{display:block;content:"";width:14px;height:14px;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;margin-left:auto}:host .ss-content .ss-list .ss-option.ss-selected{font-weight:var(--_select-option-selected-weight);background-color:var(--_select-option-selected-background-color);color:var(--_select-option-selected-text-color)}:host .ss-content .ss-list .ss-option.ss-selected::after{-webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:var(--_select-option-selected-icon-color)}:host .ss-content .ss-list .ss-option:hover:not(.ss-disabled),:host .ss-content .ss-list .ss-option:active:not(.ss-disabled){background-color:var(--_select-option-hover-background-color);color:var(--_select-option-hover-text-color)}:host .ss-content .ss-list .ss-option.ss-highlighted{background-color:var(--_select-option-highlight-background-color);color:var(--_select-option-highlight-text-color)}:host .ss-content .ss-list .ss-option.ss-disabled{background-color:var(--_select-option-disabled-background-color);color:var(--_select-option-disabled-text-color)}:host .ss-main .ss-deselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{:host .ss-main .ss-deselect{display:none !important}}:host .ss-main .ss-deselect{border-radius:var(--ds-alias-radius-rounded);background:rgba(0,0,0,0);width:1.5rem;height:1.5rem;border:none;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;-webkit-box-shadow:none;box-shadow:none;outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:color,background-color,border-color,text-shadow,-webkit-box-shadow;transition-property:color,background-color,border-color,text-shadow,-webkit-box-shadow;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-property:color,background-color,border-color,box-shadow,text-shadow,-webkit-box-shadow;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host .ss-main .ss-deselect::-moz-focus-inner{border:0}:host .ss-main .ss-deselect:disabled{pointer-events:none}@media (hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:hover,:host .ss-main .ss-deselect.is-hovered{--icon-color:var(--ds-alias-text-color-primary-hover);background:var(--ds-alias-background-color-highlight)}}:host .ss-main .ss-deselect:active,:host .ss-main .ss-deselect.is-pressed{--icon-color:var(--ds-alias-text-color-primary-active);background:var(--ds-alias-background-color-highlight)}@media (hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:focus-visible:not(:active),:host .ss-main .ss-deselect.is-focused:not(:active){-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host .ss-main .ss-deselect::after{position:absolute;content:"";display:block;width:1rem;height:1rem;margin-inline:var(--ss-icon-spacing);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-size:80%;mask-size:80%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:var(--_select-icon-color);-webkit-transition:-webkit-transform var(--ss-animation-timing) ease-in-out;transition:-webkit-transform var(--ss-animation-timing) ease-in-out;transition:transform var(--ss-animation-timing) ease-in-out;transition:transform var(--ss-animation-timing) ease-in-out, -webkit-transform var(--ss-animation-timing) ease-in-out}@media (hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:hover::after,:host .ss-main .ss-deselect.is-hovered::after{background-color:var(--_select-icon-hover-color)}}:host .ss-main .ss-deselect:active::after,:host .ss-main .ss-deselect.is-pressed::after{background-color:var(--_select-icon-active-color)}:host .ss-main .ss-deselect svg{display:none}:host .ss-main .ss-arrow{display:block;width:1rem;height:1rem;margin-inline:var(--ss-icon-spacing);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20fill='black'%20d='M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20fill='black'%20d='M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z'/%3E%3C/svg%3E");-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:var(--_select-icon-color);-webkit-transition:-webkit-transform var(--ss-animation-timing) ease-in-out;transition:-webkit-transform var(--ss-animation-timing) ease-in-out;transition:transform var(--ss-animation-timing) ease-in-out;transition:transform var(--ss-animation-timing) ease-in-out, -webkit-transform var(--ss-animation-timing) ease-in-out}:host .ss-main .ss-arrow path{display:none}:host .ss-main.ss-dir-below .ss-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host .ss-main .ss-values{padding-inline:var(--ss-icon-spacing)}:host .ss-main .ss-values .ss-single{padding-inline:0}:host .ss-main .ss-values .ss-value{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;min-height:1.5rem;padding-block:var(--ds-tag-space-padding-y-sm);padding-inline:var(--ds-tag-space-padding-x-sm);border-radius:var(--ds-tag-radius-base);background-color:var(--_select-tag-background-color)}:host .ss-main .ss-values .ss-value .ss-value-text{color:var(--_select-tag-text-color);font-family:var(--_select-tag-family);line-height:1;font-size:var(--ds-tag-font-size-sm);font-weight:var(--ds-tag-font-weight-sm);padding:0}:host .ss-main .ss-values .ss-value .ss-value-delete{position:relative;margin:0;padding:0;width:20px;height:20px;border:none;border-radius:var(--ds-close-radius);background-color:var(--ds-close-color-background-base);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;margin-left:.25rem;margin-right:-0.5rem}:host .ss-main .ss-values .ss-value .ss-value-delete::after{display:block;content:"";width:10px;height:10px;margin-left:5px;margin-right:5px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background-color:var(--ds-close-color-icon-base)}:host .ss-main .ss-values .ss-value .ss-value-delete svg{display:none}@media (hover: hover)and (pointer: fine){:host .ss-main .ss-values .ss-value .ss-value-delete:hover{background-color:var(--ds-close-color-background-hover)}}:host .ss-main .ss-values .ss-value .ss-value-delete:active{background-color:var(--ds-close-color-background-active)}@media (hover: hover)and (pointer: fine){:host .ss-main .ss-values .ss-value .ss-value-delete:focus-visible:not(:active){-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_select-focus-ring-color) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_select-focus-ring-color) 0 0 0 5px !important}}:host .ss-content .ss-list .ss-optgroup .ss-optgroup-label{background-color:var(--_select-optgroup-background-color);color:var(--_select-optgroup-text-color);font-weight:var(--_select-optgroup-weight)}:host #popup.is-multiple .ss-content .ss-list .ss-option::after{display:none}:host #popup.is-multiple .ss-content .ss-list .ss-option::before{width:16px;height:16px;content:"";border:2px solid var(--_select-checkbox-border-color);border-radius:var(--_select-radius);margin-right:.5rem;-ms-flex-negative:0;flex-shrink:0}:host #popup.is-multiple .ss-content .ss-list .ss-option.ss-selected::before{background-color:var(--_select-checkbox-selected-background-color);border-color:var(--_select-checkbox-selected-border-color);background-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill='%23ffffff' fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");background-size:75%;background-repeat:no-repeat;background-position:center}`;
+
+const DsSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsChange = createEvent(this, "dsChange");
+        this.dsFocus = createEvent(this, "dsFocus");
+        this.dsBlur = createEvent(this, "dsBlur");
+        this.dsClick = createEvent(this, "dsClick");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.inheritedAttributes = {};
+        this.initialValue = null;
+        this.selectId = `ds-select-${SelectIds++}`;
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.slottedOptions = [];
+        this.slottedOptionGroups = [];
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The current value of the select.
+         * In single mode: `string | null`.
+         * In multiple mode: `string[]` (array of selected values). As an HTML attribute, multiple
+         * values can also be passed as a comma-separated string, e.g. `value="it,ch"`.
+         */
+        this.value = null;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.selectId;
+        /**
+         * The label displayed above the select field.
+         */
+        this.label = '';
+        /**
+         * The description displayed below the select field.
+         */
+        this.description = '';
+        /**
+         * Defines the color state of the select field.
+         */
+        this.color = 'primary';
+        /**
+         * If `true`, the component renders in an invalid state.
+         */
+        this.invalid = false;
+        /**
+         * Validation message shown when `invalid` is true.
+         */
+        this.invalidText = '';
+        /**
+         * If `true`, the user must select a value before submitting the form.
+         */
+        this.required = true;
+        /**
+         * If `true`, the select is non-interactive and excluded from form submission.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the value cannot be changed by the user.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user can select multiple options.
+         * The `value` prop and `dsChange` event will carry a `string[]` instead of `string | null`.
+         */
+        this.multiple = false;
+        /**
+         * If `true`, a search input is shown inside the dropdown to filter options.
+         */
+        this.searchable = false;
+        /**
+         * If `true`, a clear button is shown inside the trigger that resets the value to `null` (single mode only).
+         */
+        this.clearable = false;
+        /**
+         * Placeholder text shown when no option is selected.
+         */
+        this.placeholder = '';
+        /**
+         * The list of selectable options (flat).
+         * Use `optionGroups` when options should be grouped under a label.
+         * If both are set, `optionGroups` takes precedence.
+         */
+        this.options = [];
+        /**
+         * The list of option groups. Each group has a `label` and an `options` array.
+         * When set, `options` is ignored.
+         */
+        this.optionGroups = [];
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid automatically.
+         */
+        this.autoInvalidOff = false;
+        this.handleSlotChange = () => {
+            this.readOptionsFromSlot();
+            this.refreshSlimData();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    valueChanged(newVal) {
+        const normalized = this.normalizeValue(newVal);
+        if (normalized !== newVal) {
+            this.value = normalized;
+            return;
+        }
+        this.syncFormValue(normalized);
+        if (!this.picker)
+            return;
+        this.picker.setSelected(normalized !== null && normalized !== void 0 ? normalized : []);
+    }
+    disabledChanged() {
+        this.syncDisabledState();
+    }
+    readonlyChanged() {
+        this.syncDisabledState();
+    }
+    optionsChanged() {
+        this.refreshSlimData();
+    }
+    optionGroupsChanged() {
+        this.refreshSlimData();
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.value = this.normalizeValue(this.value);
+        this.initialValue = this.value;
+        this.syncFormValue(this.value);
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    }
+    componentDidLoad() {
+        if (!this.selectEl || !this.popupEl || !this.el.shadowRoot)
+            return;
+        this.readOptionsFromSlot();
+        this.picker = new SelectPickerController({
+            selectEl: this.selectEl,
+            popupEl: this.popupEl,
+            shadowRoot: this.el.shadowRoot,
+            triggerId: this.selectId,
+            language: this.language,
+            placeholder: this.placeholder,
+            searchable: this.searchable,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            multiple: this.multiple,
+            clearable: this.clearable,
+            data: this.buildSlimData(),
+            onChange: newVal => this.handleAfterChange(newVal),
+            onOpen: () => {
+                this.focused = true;
+                this.dsFocus.emit(new FocusEvent('focus'));
+            },
+            onClose: () => {
+                this.focused = false;
+                this.dsBlur.emit(new FocusEvent('blur'));
+            },
+        });
+        this.syncFormValue(this.value);
+        this.initialValue = this.value;
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.picker = undefined;
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToClick(ev) {
+        if ((this.disabled || this.readonly) && ev.target === this.el) {
+            stopEventBubbling(ev);
+        }
+    }
+    listenToReset(ev) {
+        const form = ev.target;
+        if (form === null || form === void 0 ? void 0 : form.contains(this.el)) {
+            this.value = this.initialValue;
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        var _a;
+        this.language = state.language;
+        this.region = state.region;
+        if (this.searchable) {
+            (_a = this.picker) === null || _a === void 0 ? void 0 : _a.updateSearchPlaceholder(state.language);
+        }
+    }
+    /**
+     * Opens the select dropdown.
+     */
+    async open() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.open();
+    }
+    /**
+     * Closes the select dropdown.
+     */
+    async close() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    /**
+     * Sets focus on the select trigger.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Removes focus from the select trigger.
+     */
+    async setBlur() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    // Attributes are always strings, so `value="it,ch"` arrives as a single string in
+    // multiple mode. Split it into the `string[]` the rest of the component expects.
+    normalizeValue(val) {
+        if (this.multiple && typeof val === 'string') {
+            return val
+                .split(',')
+                .map(v => v.trim())
+                .filter(v => v.length > 0);
+        }
+        return val;
+    }
+    refreshSlimData() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setData(this.buildSlimData());
+    }
+    buildSlimData() {
+        const options = this.options.length > 0 ? this.options : this.slottedOptions;
+        const optionGroups = this.optionGroups.length > 0 ? this.optionGroups : this.slottedOptionGroups;
+        return buildSlimData(options, optionGroups, this.placeholder, this.value);
+    }
+    // Reads ds-select-option / ds-select-optgroup light-DOM children (the HTML-only alternative
+    // to the options / optionGroups props) into the same shape those props use.
+    readOptionsFromSlot() {
+        var _a;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+        if (!slot)
+            return;
+        const assignedElements = slot.assignedElements({ flatten: true });
+        const optgroups = assignedElements.filter(el => el.tagName.toLowerCase() === 'ds-select-optgroup');
+        if (optgroups.length > 0) {
+            this.slottedOptionGroups = optgroups.map(el => ({
+                label: el.label,
+                options: this.mapSelectOptionElements(Array.from(el.querySelectorAll('ds-select-option'))),
+            }));
+            this.slottedOptions = [];
+        }
+        else {
+            const options = assignedElements.filter(el => el.tagName.toLowerCase() === 'ds-select-option');
+            this.slottedOptions = this.mapSelectOptionElements(options);
+            this.slottedOptionGroups = [];
+        }
+    }
+    mapSelectOptionElements(elements) {
+        return elements.map(el => {
+            var _a, _b;
+            const option = el;
+            return {
+                label: (_b = (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '',
+                value: option.value,
+                disabled: option.disabled,
+            };
+        });
+    }
+    handleAfterChange(newVal) {
+        var _a, _b;
+        const selected = newVal.filter(o => !o.placeholder);
+        if (this.multiple) {
+            const values = selected.map(o => o.value);
+            this.syncFormValue(values);
+            this.value = values;
+            this.dsChange.emit(values);
+        }
+        else {
+            const value = (_b = (_a = selected[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+            this.syncFormValue(value);
+            this.value = value;
+            this.dsChange.emit(value);
+            raf(() => { var _a; return (_a = this.picker) === null || _a === void 0 ? void 0 : _a.close(); });
+        }
+    }
+    syncFormValue(val) {
+        if (Array.isArray(val)) {
+            const formData = new FormData();
+            val.forEach(v => formData.append(this.name, v));
+            this.internals.setFormValue(formData);
+        }
+        else {
+            this.internals.setFormValue(val);
+        }
+    }
+    syncDisabledState() {
+        var _a;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || this.readonly);
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h$1(Field, { key: 'eecfb4cab9d68210135674b01c7df8ee53723d10', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.selectId, onClick: ev => this.dsClick.emit(ev) }, h$1("select", Object.assign({ key: '1531c1c858bcb110bbe450ba662e2c483943039c', name: this.name, multiple: this.multiple, required: this.required, disabled: this.disabled, "aria-hidden": "true", tabindex: -1, ref: el => (this.selectEl = el) }, this.inheritedAttributes)), h$1("div", { key: '291ee9706eae79cfdf4e2fc3f7021f5e1e8fe8d3', id: "popup", class: {
+                'is-multiple': this.multiple,
+            }, ref: el => (this.popupEl = el) }, h$1("slot", { key: '6599aa56141ef60408922cbdf18e03d44544ec5e', onSlotchange: this.handleSlotChange }))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "disabled": [{
+                "disabledChanged": 0
+            }],
+        "readonly": [{
+                "readonlyChanged": 0
+            }],
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "optionGroups": [{
+                "optionGroupsChanged": 0
+            }]
+    }; }
+};
+__decorate([
+    Logger('select'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DsSelect.prototype, "createLogger", null);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "name", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "description", void 0);
+__decorate([
+    OneOf(INPUT_COLORS),
+    __metadata("design:type", String)
+], DsSelect.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "invalidText", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "multiple", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "searchable", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "clearable", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsSelect.prototype, "placeholder", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsSelect.prototype, "autoInvalidOff", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], DsSelect.prototype, "configChanged", null);
+let SelectIds = 0;
+DsSelect.style = selectHostCss();
+
+export { DsSelect as ds_select };