@serkonda7/solid-components 0.3.1 → 0.3.2

package/README.md

@@ -36,7 +36,7 @@ export default defineConfig({ plugins: [tablerIcons(), solid()] })
 These components are available:
 - `DataTable` - generic table with optional sorting, actions, loading, empty states, and column customizer.
 - `FilterTable` - `DataTable` with filtering: quick search, a grouped filter form, and removable filter pills.
-- `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons, a detail column, and an optional "Add …" entry.
+- `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons and previews, a detail column, and an optional "Add …" entry.
 - `SearchBar` - search input with clear button and a global Ctrl/Cmd+K focus shortcut.
 
 For the full API, examples, and agent notes, see [docs.md](docs.md).

package/dist/combobox.d.ts

@@ -11,6 +11,8 @@ export interface ComboboxOption {
     detail?: string;
     /** Glyph shown before the label, in the list and in the closed input. */
     icon?: ComboboxIcon;
+    /** Rendered in a panel beside the open list while this option is highlighted. */
+    preview?: Component;
 }
 export interface ComboboxProps {
     /** Input id, for pairing with an external `<label for>`. Generated when omitted. */

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Dynamic as e, className as t, createComponent as n, delegateEvents as r, effect as i, insert as a, memo as o, mergeProps as s, setAttribute as c, spread as l, style as u, template as d, use as f } from "solid-js/web";
-import { For as p, Show as m, children as h, createEffect as g, createMemo as _, createSignal as v, createUniqueId as ee, on as y, onCleanup as b, onMount as x, splitProps as S, untrack as C } from "solid-js";
+import { For as p, Show as m, children as h, createEffect as g, createMemo as _, createSignal as v, createUniqueId as y, on as b, onCleanup as x, onMount as S, splitProps as C, untrack as w } from "solid-js";
 //#region node_modules/@tabler/icons-solidjs/dist/source/defaultAttributes.js
-var w = {
+var T = {
 	outline: {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 24,
@@ -21,9 +21,9 @@ var w = {
 		fill: "currentColor",
 		stroke: "none"
 	}
-}, T = /*#__PURE__*/ d("<svg>"), E = /*#__PURE__*/ d("<title>"), D = (t, r, i, c) => {
+}, E = /*#__PURE__*/ d("<svg>"), D = /*#__PURE__*/ d("<title>"), O = (t, r, i, c) => {
 	let u = (i) => {
-		let [u, d] = S(i, [
+		let [u, d] = C(i, [
 			"color",
 			"size",
 			"stroke",
@@ -31,9 +31,9 @@ var w = {
 			"title",
 			"children",
 			"class"
-		]), f = w[t], p = u.stroke ?? u.strokeWidth;
+		]), f = T[t], p = u.stroke ?? u.strokeWidth;
 		return (() => {
-			var i = T();
+			var i = E();
 			return l(i, s(f, d, {
 				get width() {
 					return o(() => u.size != null)() ? u.size : f.width;
@@ -50,58 +50,58 @@ var w = {
 			}), !0, !0), a(i, (() => {
 				var e = o(() => u.title != null);
 				return () => e() && (() => {
-					var e = E();
+					var e = D();
 					return a(e, () => u.title), e;
 				})();
 			})(), null), a(i, () => c.map(([t, r]) => n(e, s({ component: t }, r))), null), a(i, () => u.children, null), i;
 		})();
 	};
 	return u.displayName = `${i}`, u;
-}, te = D("outline", "chevron-down", "ChevronDown", [["path", { d: "M6 9l6 6l6 -6" }]]), O = D("outline", "plus", "Plus", [["path", { d: "M12 5l0 14" }], ["path", { d: "M5 12l14 0" }]]), ne = /*#__PURE__*/ d("<span class=combobox-detail>"), k = /*#__PURE__*/ d("<div role=option class=combobox-option><span class=combobox-option-label>"), A = /*#__PURE__*/ d("<span class=combobox-option-icon aria-hidden=true>"), re = /*#__PURE__*/ d("<div role=option class=\"combobox-option combobox-option-add\">"), j = /*#__PURE__*/ d("<div class=combobox-list role=listbox>"), M = /*#__PURE__*/ d("<div class=combobox-empty>"), N = /*#__PURE__*/ d("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), P = /*#__PURE__*/ d("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), F = /*#__PURE__*/ d("<span class=combobox-icon aria-hidden=true>");
-function I(r) {
-	let s, l, u = ee(), d = () => r.id ?? u, h = () => `${d()}-listbox`, y = (e) => `${d()}-option-${e}`, [b, S] = v(!1), [C, w] = v(""), [T, E] = v(0), D = _(() => r.emptyLabel === void 0 ? r.options : [{
+}, ee = O("outline", "chevron-down", "ChevronDown", [["path", { d: "M6 9l6 6l6 -6" }]]), k = O("outline", "plus", "Plus", [["path", { d: "M12 5l0 14" }], ["path", { d: "M5 12l14 0" }]]), te = /*#__PURE__*/ d("<span class=combobox-detail>"), A = /*#__PURE__*/ d("<div role=option class=combobox-option><span class=combobox-option-label>"), j = /*#__PURE__*/ d("<span class=combobox-option-icon aria-hidden=true>"), ne = /*#__PURE__*/ d("<div role=option class=\"combobox-option combobox-option-add\">"), M = /*#__PURE__*/ d("<div class=combobox-list role=listbox>"), N = /*#__PURE__*/ d("<div class=combobox-empty>"), P = /*#__PURE__*/ d("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), F = /*#__PURE__*/ d("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), I = /*#__PURE__*/ d("<span class=combobox-icon aria-hidden=true>"), re = /*#__PURE__*/ d("<div class=combobox-preview aria-hidden=true>");
+function L(r) {
+	let s, l, u = y(), d = () => r.id ?? u, h = () => `${d()}-listbox`, b = (e) => `${d()}-option-${e}`, [x, C] = v(!1), [w, T] = v(""), [E, D] = v(0), O = _(() => r.emptyLabel === void 0 ? r.options : [{
 		value: "",
 		label: r.emptyLabel
-	}, ...r.options]), I = _(() => r.value === "" ? void 0 : D().find((e) => String(e.value) === r.value)), L = _(() => {
-		let e = C().trim().toLowerCase();
-		return e === "" ? D() : D().filter((t) => t.label.toLowerCase().includes(e) || (t.detail?.toLowerCase().includes(e) ?? !1));
-	}), ie = () => r.options.some((e) => e.detail !== void 0), R = () => L().length, ae = () => L().length + +!!r.onAdd, oe = () => !r.disabled && r.onChange !== void 0;
-	x(() => {
+	}, ...r.options]), L = _(() => r.value === "" ? void 0 : O().find((e) => String(e.value) === r.value)), R = _(() => {
+		let e = w().trim().toLowerCase();
+		return e === "" ? O() : O().filter((t) => t.label.toLowerCase().includes(e) || (t.detail?.toLowerCase().includes(e) ?? !1));
+	}), ie = () => r.options.some((e) => e.detail !== void 0), z = () => R().length, ae = () => R().length + +!!r.onAdd, oe = () => !r.disabled && r.onChange !== void 0, B = () => R()[E()]?.preview;
+	S(() => {
 		r.autofocus === !0 && s?.focus();
 	}), g(() => {
-		b() && l?.querySelector(`[data-index="${T()}"]`)?.scrollIntoView({ block: "nearest" });
+		x() && l?.querySelector(`[data-index="${E()}"]`)?.scrollIntoView({ block: "nearest" });
 	});
-	function z() {
-		if (b() || !oe()) return;
-		w("");
-		let e = D().findIndex((e) => String(e.value) === r.value);
-		E(Math.max(e, 0)), S(!0), r.onOpen?.();
+	function V() {
+		if (x() || !oe()) return;
+		T("");
+		let e = O().findIndex((e) => String(e.value) === r.value);
+		D(Math.max(e, 0)), C(!0), r.onOpen?.();
 	}
-	function B(e) {
-		if (S(!1), r.onAdd && e === R()) {
-			r.onAdd(C().trim());
+	function H(e) {
+		if (C(!1), r.onAdd && e === z()) {
+			r.onAdd(w().trim());
 			return;
 		}
-		let t = L()[e];
+		let t = R()[e];
 		t && String(t.value) !== r.value && r.onChange?.(String(t.value));
 	}
-	function V(e) {
+	function se(e) {
 		let t = ae();
-		b() ? t > 0 && E((T() + e + t) % t) : z();
+		x() ? t > 0 && D((E() + e + t) % t) : V();
 	}
-	function H(e) {
-		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), V(e.key === "ArrowDown" ? 1 : -1)) : b() && (e.key === "Enter" ? (e.preventDefault(), B(T())) : e.key === "Tab" ? r.onAdd && T() === R() ? S(!1) : B(T()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), S(!1)));
+	function U(e) {
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), se(e.key === "ArrowDown" ? 1 : -1)) : x() && (e.key === "Enter" ? (e.preventDefault(), H(E())) : e.key === "Tab" ? r.onAdd && E() === z() ? C(!1) : H(E()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), C(!1)));
 	}
-	let se = () => b() ? I()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel ?? r.placeholder;
-	function U(t, o) {
+	let W = () => x() ? L()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel ?? r.placeholder;
+	function G(t, o) {
 		return (() => {
-			var s = k(), l = s.firstChild;
-			return s.$$click = () => B(o()), s.$$mousemove = () => E(o()), s.$$mousedown = (e) => e.preventDefault(), a(l, n(m, {
+			var s = A(), l = s.firstChild;
+			return s.$$click = () => H(o()), s.$$mousemove = () => D(o()), s.$$mousedown = (e) => e.preventDefault(), a(l, n(m, {
 				get when() {
 					return t.icon;
 				},
 				children: (t) => (() => {
-					var r = A();
+					var r = j();
 					return a(r, n(e, {
 						get component() {
 							return t();
@@ -114,11 +114,11 @@ function I(r) {
 					return t.detail;
 				},
 				get children() {
-					var e = ne();
+					var e = te();
 					return a(e, () => t.detail), e;
 				}
 			}), null), i((e) => {
-				var n = y(o()), i = o(), a = String(t.value) === r.value, l = o() === T(), u = t.value === "";
+				var n = b(o()), i = o(), a = String(t.value) === r.value, l = o() === E(), u = t.value === "";
 				return n !== e.e && c(s, "id", e.e = n), i !== e.t && c(s, "data-index", e.t = i), a !== e.a && c(s, "aria-selected", e.a = a), l !== e.o && s.classList.toggle("combobox-option-active", e.o = l), u !== e.i && s.classList.toggle("combobox-option-empty", e.i = u), e;
 			}, {
 				e: void 0,
@@ -129,14 +129,14 @@ function I(r) {
 			}), s;
 		})();
 	}
-	function W() {
+	function K() {
 		return (() => {
-			var e = re();
-			return e.$$click = () => B(R()), e.$$mousemove = () => E(R()), e.$$mousedown = (e) => e.preventDefault(), c(e, "aria-selected", !1), a(e, n(O, {
+			var e = ne();
+			return e.$$click = () => H(z()), e.$$mousemove = () => D(z()), e.$$mousedown = (e) => e.preventDefault(), c(e, "aria-selected", !1), a(e, n(k, {
 				size: 14,
 				"aria-hidden": "true"
 			}), null), a(e, () => r.addLabel ?? "Add", null), i((t) => {
-				var n = y(R()), r = R(), i = R() === T();
+				var n = b(z()), r = z(), i = z() === E();
 				return n !== t.e && c(e, "id", t.e = n), r !== t.t && c(e, "data-index", t.t = r), i !== t.a && e.classList.toggle("combobox-option-active", t.a = i), t;
 			}, {
 				e: void 0,
@@ -145,26 +145,26 @@ function I(r) {
 			}), e;
 		})();
 	}
-	function G() {
+	function q() {
 		return (() => {
-			var e = j(), t = l;
+			var e = M(), t = l;
 			return typeof t == "function" ? f(t, e) : l = e, a(e, n(p, {
 				get each() {
-					return L();
+					return R();
 				},
 				get fallback() {
 					return (() => {
-						var e = M();
+						var e = N();
 						return a(e, () => r.noMatchesLabel ?? "No matching objects"), e;
 					})();
 				},
-				children: U
+				children: G
 			}), null), a(e, n(m, {
 				get when() {
 					return r.onAdd;
 				},
 				get children() {
-					return W();
+					return K();
 				}
 			}), null), i((t) => {
 				var n = !!ie(), r = h();
@@ -176,18 +176,18 @@ function I(r) {
 		})();
 	}
 	return (() => {
-		var l = P(), u = l.firstChild;
-		u.addEventListener("blur", () => S(!1)), u.$$keydown = H, u.$$input = (e) => {
+		var l = F(), u = l.firstChild;
+		u.addEventListener("blur", () => C(!1)), u.$$keydown = U, u.$$input = (e) => {
 			let t = e.currentTarget.value;
-			z(), w(t), E(0);
-		}, u.$$click = z;
+			V(), T(t), D(0);
+		}, u.$$click = V;
 		var p = s;
 		return typeof p == "function" ? f(p, u) : s = u, a(l, n(m, {
 			get when() {
-				return o(() => !b())() && I()?.icon;
+				return o(() => !x())() && L()?.icon;
 			},
 			children: (t) => (() => {
-				var r = F();
+				var r = I();
 				return a(r, n(e, {
 					get component() {
 						return t();
@@ -197,26 +197,36 @@ function I(r) {
 			})()
 		}), null), a(l, n(m, {
 			get when() {
-				return o(() => !b())() && I()?.detail;
+				return o(() => !x())() && L()?.detail;
 			},
 			get children() {
-				var e = N(), t = e.firstChild, n = t.nextSibling;
-				return a(t, () => I()?.label), a(n, () => I()?.detail), e;
+				var e = P(), t = e.firstChild, n = t.nextSibling;
+				return a(t, () => L()?.label), a(n, () => L()?.detail), e;
 			}
-		}), null), a(l, n(te, {
+		}), null), a(l, n(ee, {
 			class: "combobox-chevron",
 			size: 16,
 			"aria-hidden": "true"
 		}), null), a(l, n(m, {
 			get when() {
-				return b();
+				return x();
 			},
 			get children() {
-				return G();
+				return q();
 			}
+		}), null), a(l, n(m, {
+			get when() {
+				return o(() => !!x())() && B();
+			},
+			children: (t) => (() => {
+				var r = re();
+				return a(r, n(e, { get component() {
+					return t();
+				} })), r;
+			})()
 		}), null), i((e) => {
-			var n = r.class ? `combobox ${r.class}` : "combobox", i = !!b(), a = !(b() || !I()?.detail), o = !(b() || I()?.icon === void 0), s = d(), f = b(), p = h(), m = b() && ae() > 0 ? y(T()) : void 0, g = r.ariaLabel, _ = r.describedBy, v = r.required, ee = r.disabled, x = r.onChange === void 0, S = r.value, C = se();
-			return n !== e.e && t(l, e.e = n), i !== e.t && l.classList.toggle("combobox-open", e.t = i), a !== e.a && l.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && l.classList.toggle("combobox-with-icon", e.o = o), s !== e.i && c(u, "id", e.i = s), f !== e.n && c(u, "aria-expanded", e.n = f), p !== e.s && c(u, "aria-controls", e.s = p), m !== e.h && c(u, "aria-activedescendant", e.h = m), g !== e.r && c(u, "aria-label", e.r = g), _ !== e.d && c(u, "aria-describedby", e.d = _), v !== e.l && (u.required = e.l = v), ee !== e.u && (u.disabled = e.u = ee), x !== e.c && (u.readOnly = e.c = x), S !== e.w && c(u, "data-value", e.w = S), C !== e.m && c(u, "placeholder", e.m = C), e;
+			var n = r.class ? `combobox ${r.class}` : "combobox", i = !!x(), a = !(x() || !L()?.detail), o = !(x() || L()?.icon === void 0), s = d(), f = x(), p = h(), m = x() && ae() > 0 ? b(E()) : void 0, g = r.ariaLabel, _ = r.describedBy, v = r.required, y = r.disabled, S = r.onChange === void 0, C = r.value, w = W();
+			return n !== e.e && t(l, e.e = n), i !== e.t && l.classList.toggle("combobox-open", e.t = i), a !== e.a && l.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && l.classList.toggle("combobox-with-icon", e.o = o), s !== e.i && c(u, "id", e.i = s), f !== e.n && c(u, "aria-expanded", e.n = f), p !== e.s && c(u, "aria-controls", e.s = p), m !== e.h && c(u, "aria-activedescendant", e.h = m), g !== e.r && c(u, "aria-label", e.r = g), _ !== e.d && c(u, "aria-describedby", e.d = _), v !== e.l && (u.required = e.l = v), y !== e.u && (u.disabled = e.u = y), S !== e.c && (u.readOnly = e.c = S), C !== e.w && c(u, "data-value", e.w = C), w !== e.m && c(u, "placeholder", e.m = w), e;
 		}, {
 			e: void 0,
 			t: void 0,
@@ -233,7 +243,7 @@ function I(r) {
 			c: void 0,
 			w: void 0,
 			m: void 0
-		}), i(() => u.value = b() ? C() : I()?.label ?? ""), l;
+		}), i(() => u.value = x() ? w() : L()?.label ?? ""), l;
 	})();
 }
 r([
@@ -245,11 +255,11 @@ r([
 ]);
 //#endregion
 //#region node_modules/@tabler/icons-solidjs/dist/source/icons/IconMenu.js
-var L = D("outline", "menu", "Menu", [["path", { d: "M4 8l16 0" }], ["path", { d: "M4 16l16 0" }]]), ie = /*#__PURE__*/ d("<li class=data-table-customizer-item draggable=true><label class=data-table-customizer-option><input type=checkbox>"), R = /*#__PURE__*/ d("<div role=dialog class=data-table-customizer-panel><p class=data-table-customizer-title></p><ul class=data-table-customizer-list></ul><div class=data-table-customizer-actions><button type=button></button><button type=button>"), ae = /*#__PURE__*/ d("<div class=data-table-customizer><button type=button class=data-table-customizer-button aria-haspopup=dialog><span aria-hidden=true>⚙</span> "), oe = /*#__PURE__*/ d("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), z = /*#__PURE__*/ d("<span class=data-table-resize-handle role=separator aria-orientation=vertical tabindex=0>"), B = /*#__PURE__*/ d("<th>"), V = /*#__PURE__*/ d("<td>"), H = /*#__PURE__*/ d("<tr>"), se = /*#__PURE__*/ d("<div class=data-table-toolbar-start>"), U = /*#__PURE__*/ d("<div class=data-table-toolbar>"), W = /*#__PURE__*/ d("<th>Actions"), G = /*#__PURE__*/ d("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), ce = /*#__PURE__*/ d("<p class=data-table-status>Loading…"), K = /*#__PURE__*/ d("<p class=data-table-status>No results.");
-function q(e) {
+var R = O("outline", "menu", "Menu", [["path", { d: "M4 8l16 0" }], ["path", { d: "M4 16l16 0" }]]), ie = /*#__PURE__*/ d("<li class=data-table-customizer-item draggable=true><label class=data-table-customizer-option><input type=checkbox>"), z = /*#__PURE__*/ d("<div role=dialog class=data-table-customizer-panel><p class=data-table-customizer-title></p><ul class=data-table-customizer-list></ul><div class=data-table-customizer-actions><button type=button></button><button type=button>"), ae = /*#__PURE__*/ d("<div class=data-table-customizer><button type=button class=data-table-customizer-button aria-haspopup=dialog><span aria-hidden=true>⚙</span> "), oe = /*#__PURE__*/ d("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), B = /*#__PURE__*/ d("<span class=data-table-resize-handle role=separator aria-orientation=vertical tabindex=0>"), V = /*#__PURE__*/ d("<th>"), H = /*#__PURE__*/ d("<td>"), se = /*#__PURE__*/ d("<tr>"), U = /*#__PURE__*/ d("<div class=data-table-toolbar-start>"), W = /*#__PURE__*/ d("<div class=data-table-toolbar>"), G = /*#__PURE__*/ d("<th>Actions"), K = /*#__PURE__*/ d("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), q = /*#__PURE__*/ d("<p class=data-table-status>Loading…"), ce = /*#__PURE__*/ d("<p class=data-table-status>No results.");
+function J(e) {
 	return typeof e == "function" ? e() : e;
 }
-function J(e, t) {
+function le(e, t) {
 	if (t !== void 0) return {
 		width: `${t}px`,
 		"min-width": `${t}px`,
@@ -258,29 +268,29 @@ function J(e, t) {
 	let n = (e) => typeof e == "number" ? `${e}px` : e, r = {};
 	return e.width !== void 0 && (r.width = n(e.width)), e.minWidth !== void 0 && (r["min-width"] = n(e.minWidth)), e.maxWidth !== void 0 && (r["max-width"] = n(e.maxWidth)), Object.keys(r).length > 0 ? r : void 0;
 }
-function le(e) {
-	let r = _(() => q(e.rows)), o = () => q(e.loading ?? !1), s = e.sortKey !== void 0 || e.sortDirection !== void 0, [l, d] = v(e.defaultSort), y = () => s ? q(e.sortKey ?? void 0) : l()?.key, x = () => s ? q(e.sortDirection ?? "asc") : l()?.direction ?? "asc", S = () => q(e.showColumnCustomizer ?? !1), w = h(() => e.toolbar), T = _(() => e.defaultVisibleColumns ?? e.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [E, D] = v(void 0), te = () => e.visibleColumns === void 0 ? E() ?? T() : q(e.visibleColumns), O = _(() => new Set(te())), [ne, k] = v(void 0);
-	function A(t) {
+function ue(e) {
+	let r = _(() => J(e.rows)), o = () => J(e.loading ?? !1), s = e.sortKey !== void 0 || e.sortDirection !== void 0, [l, d] = v(e.defaultSort), b = () => s ? J(e.sortKey ?? void 0) : l()?.key, S = () => s ? J(e.sortDirection ?? "asc") : l()?.direction ?? "asc", C = () => J(e.showColumnCustomizer ?? !1), T = h(() => e.toolbar), E = _(() => e.defaultVisibleColumns ?? e.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [D, O] = v(void 0), ee = () => e.visibleColumns === void 0 ? D() ?? E() : J(e.visibleColumns), k = _(() => new Set(ee())), [te, A] = v(void 0);
+	function j(t) {
 		let n = new Map(e.columns.map((e) => [e.key, e])), r = [...new Set(t)].flatMap((e) => n.get(e) ?? []), i = new Set(r);
 		return [...r, ...e.columns.filter((e) => !i.has(e))];
 	}
-	let re = _(() => A(e.columnOrder === void 0 ? ne() ?? e.defaultColumnOrder ?? [] : q(e.columnOrder))), j = _(() => re().filter((e) => e.toggleable === !1 || O().has(e.key))), M = _(() => e.columns.filter((e) => e.toggleable !== !1)), N = _(() => M().map((e) => e.key));
-	function P(e, t) {
+	let ne = _(() => j(e.columnOrder === void 0 ? te() ?? e.defaultColumnOrder ?? [] : J(e.columnOrder))), M = _(() => ne().filter((e) => e.toggleable === !1 || k().has(e.key))), N = _(() => e.columns.filter((e) => e.toggleable !== !1)), P = _(() => N().map((e) => e.key));
+	function F(e, t) {
 		return t.sortValue ? t.sortValue(e) : e[t.key];
 	}
-	function F(e, t) {
+	function I(e, t) {
 		return e === t ? 0 : e == null ? -1 : t == null ? 1 : typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t), void 0, { numeric: !0 });
 	}
-	let I = _(() => {
-		let t = r(), n = y();
+	let re = _(() => {
+		let t = r(), n = b();
 		if (s || !n) return t;
 		let i = e.columns.find((e) => e.key === n);
 		if (!i) return t;
-		let a = x() === "asc" ? 1 : -1;
-		return [...t].sort((e, t) => a * F(P(e, i), P(t, i)));
+		let a = S() === "asc" ? 1 : -1;
+		return [...t].sort((e, t) => a * I(F(e, i), F(t, i)));
 	});
-	function le(t) {
-		let n = y() === t, r = n && x() === "desc" ? void 0 : {
+	function L(t) {
+		let n = b() === t, r = n && S() === "desc" ? void 0 : {
 			key: t,
 			direction: n ? "desc" : "asc"
 		};
@@ -292,30 +302,30 @@ function le(e) {
 	}
 	function Y(t) {
 		let n = ue(t);
-		e.visibleColumns === void 0 && D(n), e.onVisibleColumnsChange?.(n);
+		e.visibleColumns === void 0 && O(n), e.onVisibleColumnsChange?.(n);
 	}
-	function X(e, t) {
-		let n = new Set(te());
-		t ? n.add(e) : n.delete(e), Y(N().filter((e) => n.has(e)));
+	function de(e, t) {
+		let n = new Set(ee());
+		t ? n.add(e) : n.delete(e), Y(P().filter((e) => n.has(e)));
 	}
-	function de() {
-		Y(N());
+	function X() {
+		Y(P());
 	}
 	function fe(t) {
-		e.columnOrder === void 0 && k(t), e.onColumnOrderChange?.(t);
+		e.columnOrder === void 0 && A(t), e.onColumnOrderChange?.(t);
 	}
 	function pe(e, t) {
-		let n = re().map((e) => e.key), r = n.indexOf(e);
+		let n = ne().map((e) => e.key), r = n.indexOf(e);
 		r === -1 || t < 0 || t >= n.length || t === r || (n.splice(r, 1), n.splice(t, 0, e), fe(n));
 	}
 	function me() {
-		Y(T()), fe(A(e.defaultColumnOrder ?? []).map((e) => e.key));
+		Y(E()), fe(j(e.defaultColumnOrder ?? []).map((e) => e.key));
 	}
 	let [Z, he] = v({}), [ge, _e] = v(), Q;
 	g(() => {
-		let e = j().map((e) => e.key);
-		if (!Q || C(ge) === void 0) return;
-		let t = C(Z);
+		let e = M().map((e) => e.key);
+		if (!Q || w(ge) === void 0) return;
+		let t = w(Z);
 		if (e.every((e) => t[e] !== void 0)) return;
 		let n = { ...t };
 		for (let t of e) {
@@ -365,30 +375,30 @@ function le(e) {
 			[n]: o
 		}), e.onColumnWidthsChange?.(Z());
 	}
-	let [be, xe] = v(), Se = `${ee()}-panel`, [Ce, we] = v(!1), Te;
+	let [be, xe] = v(), Se = `${y()}-panel`, [Ce, we] = v(!1), Te;
 	g(() => {
-		if (!Ce() || !S()) return;
+		if (!Ce() || !C()) return;
 		function e(e) {
 			Te && !Te.contains(e.target) && we(!1);
 		}
 		function t(e) {
 			e.key === "Escape" && we(!1);
 		}
-		document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), b(() => {
+		document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), x(() => {
 			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
 		});
 	});
 	function Ee(e) {
-		return e.toggleable === !1 || O().has(e.key);
+		return e.toggleable === !1 || k().has(e.key);
 	}
 	function De(t, n) {
 		return e.getCell?.(t, n) ?? n.getValue?.(t) ?? null;
 	}
 	function Oe(e) {
-		if (e.sortable) return y() === e.key ? x() === "asc" ? "ascending" : "descending" : "none";
+		if (e.sortable) return b() === e.key ? S() === "asc" ? "ascending" : "descending" : "none";
 	}
 	function ke(e) {
-		return y() === e.key ? x() === "asc" ? "▲" : "▼" : "";
+		return b() === e.key ? S() === "asc" ? "▲" : "▼" : "";
 	}
 	let Ae = (t) => !!t.sortable && (!s || !!(e.onSort || e.onSortChange));
 	function je(e, t) {
@@ -398,14 +408,14 @@ function le(e) {
 		let n = be();
 		n !== void 0 && (e.preventDefault(), pe(n, t));
 	}
-	function $(e, t) {
+	function Ne(e, t) {
 		return (() => {
 			var r = ie(), o = r.firstChild, s = o.firstChild;
-			return r.addEventListener("dragend", () => xe(void 0)), r.addEventListener("drop", (e) => e.preventDefault()), r.addEventListener("dragover", (e) => Me(e, t())), r.addEventListener("dragstart", (t) => je(t, e)), a(r, n(L, {
+			return r.addEventListener("dragend", () => xe(void 0)), r.addEventListener("drop", (e) => e.preventDefault()), r.addEventListener("dragover", (e) => Me(e, t())), r.addEventListener("dragstart", (t) => je(t, e)), a(r, n(R, {
 				class: "data-table-customizer-grip",
 				size: 14,
 				"aria-hidden": "true"
-			}), o), s.addEventListener("change", (t) => X(e.key, t.currentTarget.checked)), a(o, () => e.ariaLabel ?? e.label, null), i((t) => {
+			}), o), s.addEventListener("change", (t) => de(e.key, t.currentTarget.checked)), a(o, () => e.ariaLabel ?? e.label, null), i((t) => {
 				var n = be() === e.key, i = e.toggleable === !1;
 				return n !== t.e && r.classList.toggle("data-table-customizer-item-dragging", t.e = n), i !== t.t && (s.disabled = t.t = i), t;
 			}, {
@@ -414,15 +424,15 @@ function le(e) {
 			}), i(() => s.checked = Ee(e)), r;
 		})();
 	}
-	function Ne() {
+	function $() {
 		return (() => {
-			var t = R(), r = t.firstChild, o = r.nextSibling, s = o.nextSibling.firstChild, l = s.nextSibling;
+			var t = z(), r = t.firstChild, o = r.nextSibling, s = o.nextSibling.firstChild, l = s.nextSibling;
 			return c(t, "id", Se), a(r, () => e.columnCustomizerTitle ?? "Shown columns"), a(o, n(p, {
 				get each() {
-					return re();
+					return ne();
 				},
-				children: (e, t) => $(e, t)
-			})), s.$$click = de, a(s, () => e.columnCustomizerShowAllLabel ?? "Show all"), l.$$click = me, a(l, () => e.columnCustomizerResetLabel ?? "Reset"), i(() => c(t, "aria-label", e.columnCustomizerTitle ?? "Customize columns")), t;
+				children: (e, t) => Ne(e, t)
+			})), s.$$click = X, a(s, () => e.columnCustomizerShowAllLabel ?? "Show all"), l.$$click = me, a(l, () => e.columnCustomizerResetLabel ?? "Reset"), i(() => c(t, "aria-label", e.columnCustomizerTitle ?? "Customize columns")), t;
 		})();
 	}
 	function Pe() {
@@ -435,14 +445,14 @@ function le(e) {
 					return Ce();
 				},
 				get children() {
-					return Ne();
+					return $();
 				}
 			}), null), i(() => c(r, "aria-expanded", Ce())), t;
 		})();
 	}
 	function Fe(r) {
 		return (() => {
-			var o = B();
+			var o = V();
 			return a(o, n(m, {
 				get when() {
 					return Ae(r);
@@ -452,18 +462,18 @@ function le(e) {
 				},
 				get children() {
 					var e = oe(), t = e.firstChild;
-					return e.$$click = () => le(r.key), a(e, () => r.label, t), a(t, () => ke(r)), e;
+					return e.$$click = () => L(r.key), a(e, () => r.label, t), a(t, () => ke(r)), e;
 				}
 			}), null), a(o, n(m, {
 				get when() {
 					return e.resizableColumns;
 				},
 				get children() {
-					var e = z();
+					var e = B();
 					return e.$$keydown = (e) => ye(e, r.key), e.$$pointerdown = (e) => ve(e, r.key), i(() => c(e, "aria-label", `Resize ${r.ariaLabel ?? r.label}`)), e;
 				}
 			}), null), i((e) => {
-				var n = r.class, i = r.key, a = J(r, Z()[r.key]), s = Oe(r);
+				var n = r.class, i = r.key, a = le(r, Z()[r.key]), s = Oe(r);
 				return n !== e.e && t(o, e.e = n), i !== e.t && c(o, "data-column-key", e.t = i), e.a = u(o, a, e.a), s !== e.o && c(o, "aria-sort", e.o = s), e;
 			}, {
 				e: void 0,
@@ -475,15 +485,15 @@ function le(e) {
 	}
 	function Ie(r) {
 		return (() => {
-			var o = H();
+			var o = se();
 			return a(o, n(p, {
 				get each() {
-					return j();
+					return M();
 				},
 				children: (e) => (() => {
-					var n = V();
+					var n = H();
 					return a(n, () => De(r, e)), i((r) => {
-						var i = e.class, a = J(e, Z()[e.key]);
+						var i = e.class, a = le(e, Z()[e.key]);
 						return i !== r.e && t(n, r.e = i), r.t = u(n, a, r.t), r;
 					}, {
 						e: void 0,
@@ -495,32 +505,32 @@ function le(e) {
 					return e.rowActions;
 				},
 				get children() {
-					var t = V();
+					var t = H();
 					return a(t, () => e.rowActions?.(r)), t;
 				}
 			}), null), o;
 		})();
 	}
-	let Le = () => !o() && (e.empty === void 0 ? r().length === 0 : q(e.empty));
+	let Le = () => !o() && (e.empty === void 0 ? r().length === 0 : J(e.empty));
 	return (() => {
-		var r = G(), s = r.firstChild, c = s.firstChild, l = c.firstChild, d = l.firstChild, h = l.nextSibling;
+		var r = K(), s = r.firstChild, c = s.firstChild, l = c.firstChild, d = l.firstChild, h = l.nextSibling;
 		a(r, n(m, {
 			get when() {
-				return S() || w.toArray().length > 0;
+				return C() || T.toArray().length > 0;
 			},
 			get children() {
-				var e = U();
+				var e = W();
 				return a(e, n(m, {
 					get when() {
-						return w.toArray().length > 0;
+						return T.toArray().length > 0;
 					},
 					get children() {
-						var e = se();
-						return a(e, w), e;
+						var e = U();
+						return a(e, T), e;
 					}
 				}), null), a(e, n(m, {
 					get when() {
-						return S();
+						return C();
 					},
 					get children() {
 						return Pe();
@@ -531,7 +541,7 @@ function le(e) {
 		var g = Q;
 		return typeof g == "function" ? f(g, c) : Q = c, a(d, n(p, {
 			get each() {
-				return j();
+				return M();
 			},
 			children: Fe
 		}), null), a(d, n(m, {
@@ -539,11 +549,11 @@ function le(e) {
 				return e.rowActions;
 			},
 			get children() {
-				return W();
+				return G();
 			}
 		}), null), a(h, n(p, {
 			get each() {
-				return I();
+				return re();
 			},
 			children: Ie
 		})), a(r, n(m, {
@@ -551,14 +561,14 @@ function le(e) {
 				return o();
 			},
 			get children() {
-				return e.loadingContent ?? ce();
+				return e.loadingContent ?? q();
 			}
 		}), null), a(r, n(m, {
 			get when() {
 				return Le();
 			},
 			get children() {
-				return e.emptyContent ?? K();
+				return e.emptyContent ?? ce();
 			}
 		}), null), i((n) => {
 			var i = `data-table-wrap${e.class ? ` ${e.class}` : ""}`, a = ge() !== void 0, o = ge() === void 0 ? void 0 : { width: `${ge()}px` };
@@ -577,23 +587,23 @@ r([
 ]);
 //#endregion
 //#region node_modules/@tabler/icons-solidjs/dist/source/icons/IconDeviceFloppy.js
-var ue = D("outline", "device-floppy", "DeviceFloppy", [
+var Y = O("outline", "device-floppy", "DeviceFloppy", [
 	["path", { d: "M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" }],
 	["path", { d: "M10 14a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" }],
 	["path", { d: "M14 4l0 4l-6 0l0 -4" }]
-]), Y = D("outline", "search", "Search", [["path", { d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }], ["path", { d: "M21 21l-6 -6" }]]), X = D("outline", "x", "X", [["path", { d: "M18 6l-12 12" }], ["path", { d: "M6 6l12 12" }]]), de = /*#__PURE__*/ d("<li class=filter-table-chip><button type=button class=filter-table-chip-remove>"), fe = /*#__PURE__*/ d("<ul class=filter-table-chips>"), pe = /*#__PURE__*/ d("<div class=filter-table-multi>"), me = /*#__PURE__*/ d("<input class=filter-table-input type=text>"), Z = /*#__PURE__*/ d("<div class=filter-table-search><input type=search class=filter-table-input>"), he = /*#__PURE__*/ d("<div class=filter-table-saved>"), ge = /*#__PURE__*/ d("<button type=button class=filter-table-chip-remove>"), _e = /*#__PURE__*/ d("<li><button type=button class=filter-table-pill>"), Q = /*#__PURE__*/ d("<li><button type=button class=\"filter-table-pill filter-table-pill-save\">"), ve = /*#__PURE__*/ d("<ul class=filter-table-pills aria-label=\"Applied filters\"><li><button type=button class=\"filter-table-pill filter-table-pill-clear\">"), ye = /*#__PURE__*/ d("<form class=filter-table-save><input type=text class=filter-table-input><button type=submit class=\"filter-table-button filter-table-button-primary\"></button><button type=button class=filter-table-button>"), be = /*#__PURE__*/ d("<div class=filter-table-toolbar>"), xe = /*#__PURE__*/ d("<span class=filter-table-badge>"), Se = /*#__PURE__*/ d("<button type=button role=tab class=filter-table-tab>"), Ce = /*#__PURE__*/ d("<div class=filter-table-field><label class=filter-table-label>"), we = /*#__PURE__*/ d("<legend class=filter-table-legend>"), Te = /*#__PURE__*/ d("<fieldset class=filter-table-fieldset>"), Ee = /*#__PURE__*/ d("<form class=filter-table-form><div class=filter-table-form-actions><button type=button class=filter-table-button></button><button type=submit class=\"filter-table-button filter-table-button-primary\">"), De = /*#__PURE__*/ d("<div><div class=filter-table-tabs role=tablist></div><div role=tabpanel></div><div role=tabpanel>"), Oe = "q";
-function ke(e) {
+]), de = O("outline", "search", "Search", [["path", { d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }], ["path", { d: "M21 21l-6 -6" }]]), X = O("outline", "x", "X", [["path", { d: "M18 6l-12 12" }], ["path", { d: "M6 6l12 12" }]]), fe = /*#__PURE__*/ d("<li class=filter-table-chip><button type=button class=filter-table-chip-remove>"), pe = /*#__PURE__*/ d("<ul class=filter-table-chips>"), me = /*#__PURE__*/ d("<div class=filter-table-multi>"), Z = /*#__PURE__*/ d("<input class=filter-table-input type=text>"), he = /*#__PURE__*/ d("<div class=filter-table-search><input type=search class=filter-table-input>"), ge = /*#__PURE__*/ d("<div class=filter-table-saved>"), _e = /*#__PURE__*/ d("<button type=button class=filter-table-chip-remove>"), Q = /*#__PURE__*/ d("<li><button type=button class=filter-table-pill>"), ve = /*#__PURE__*/ d("<li><button type=button class=\"filter-table-pill filter-table-pill-save\">"), ye = /*#__PURE__*/ d("<ul class=filter-table-pills aria-label=\"Applied filters\"><li><button type=button class=\"filter-table-pill filter-table-pill-clear\">"), be = /*#__PURE__*/ d("<form class=filter-table-save><input type=text class=filter-table-input><button type=submit class=\"filter-table-button filter-table-button-primary\"></button><button type=button class=filter-table-button>"), xe = /*#__PURE__*/ d("<div class=filter-table-toolbar>"), Se = /*#__PURE__*/ d("<span class=filter-table-badge>"), Ce = /*#__PURE__*/ d("<button type=button role=tab class=filter-table-tab>"), we = /*#__PURE__*/ d("<div class=filter-table-field><label class=filter-table-label>"), Te = /*#__PURE__*/ d("<legend class=filter-table-legend>"), Ee = /*#__PURE__*/ d("<fieldset class=filter-table-fieldset>"), De = /*#__PURE__*/ d("<form class=filter-table-form><div class=filter-table-form-actions><button type=button class=filter-table-button></button><button type=submit class=\"filter-table-button filter-table-button-primary\">"), Oe = /*#__PURE__*/ d("<div><div class=filter-table-tabs role=tablist></div><div role=tabpanel></div><div role=tabpanel>"), ke = "q";
+function Ae(e) {
 	return typeof e == "function" ? e() : e;
 }
-function Ae(e) {
+function je(e) {
 	return Array.isArray(e) ? e.length > 0 : (e ?? "").trim() !== "";
 }
-function je(e) {
+function Me(e) {
 	let t = {};
-	for (let [n, r] of Object.entries(e)) Ae(r) && (t[n] = Array.isArray(r) ? r : r.trim());
+	for (let [n, r] of Object.entries(e)) je(r) && (t[n] = Array.isArray(r) ? r : r.trim());
 	return t;
 }
-function Me(e, t) {
+function Ne(e, t) {
 	let n = Object.keys(e);
 	return n.length === Object.keys(t).length && n.every((n) => {
 		let r = e[n], i = t[n];
@@ -603,8 +613,8 @@ function Me(e, t) {
 function $(e) {
 	return typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? String(e) : "";
 }
-function Ne(e) {
-	let [r, l] = S(e, [
+function Pe(e) {
+	let [r, l] = C(e, [
 		"rows",
 		"filters",
 		"filterValues",
@@ -630,43 +640,43 @@ function Ne(e) {
 		"cancelLabel",
 		"clearSavedFilterLabel",
 		"class"
-	]), u = _(() => ke(r.rows)), [d, h] = v(je(r.defaultFilterValues ?? {})), b = _(() => r.filterValues === void 0 ? d() : je(ke(r.filterValues)));
-	function x(e) {
-		let t = je(e);
+	]), u = _(() => Ae(r.rows)), [d, h] = v(Me(r.defaultFilterValues ?? {})), x = _(() => r.filterValues === void 0 ? d() : Me(Ae(r.filterValues)));
+	function S(e) {
+		let t = Me(e);
 		r.filterValues === void 0 && h(t), r.onFilterValuesChange?.(t);
 	}
-	function C(e, t) {
-		x({
-			...b(),
+	function w(e, t) {
+		S({
+			...x(),
 			[e]: t
 		});
 	}
-	let w = () => $(b()[Oe]), T = _(() => r.filters.filter((e) => Ae(b()[e.key])));
-	function E(e, t) {
+	let T = () => $(x()[ke]), E = _(() => r.filters.filter((e) => je(x()[e.key])));
+	function D(e, t) {
 		return t.getValue ? t.getValue(e) : e[t.key];
 	}
-	function D(e, t, n) {
+	function O(e, t, n) {
 		if (t.match) return t.match(e, n);
-		let r = E(e, t);
+		let r = D(e, t);
 		if (t.type === "select") {
 			let e = Array.isArray(n) ? n : [n];
 			return (Array.isArray(r) ? r : [r]).some((t) => e.includes($(t)));
 		}
 		return t.type === "boolean" ? !!r == (n === "true") : $(r).toLowerCase().includes($(n).toLowerCase());
 	}
-	function te(e) {
+	function ee(e) {
 		return r.getSearchText ? r.getSearchText(e) : l.columns.map((t) => $(t.sortValue?.(e) ?? e[t.key])).join(" ");
 	}
-	let O = _(() => {
+	let k = _(() => {
 		if (r.manualFiltering) return u();
-		let e = w().toLowerCase(), t = T();
-		return u().filter((n) => (e === "" || te(n).toLowerCase().includes(e)) && t.every((e) => D(n, e, b()[e.key])));
+		let e = T().toLowerCase(), t = E();
+		return u().filter((n) => (e === "" || ee(n).toLowerCase().includes(e)) && t.every((e) => O(n, e, x()[e.key])));
 	});
-	function ne(e) {
+	function te(e) {
 		if (e.options) return e.options;
 		let t = /* @__PURE__ */ new Set();
 		for (let n of u()) {
-			let r = E(n, e);
+			let r = D(n, e);
 			for (let e of Array.isArray(r) ? r : [r]) {
 				let n = $(e);
 				n !== "" && t.add(n);
@@ -677,46 +687,46 @@ function Ne(e) {
 			label: e
 		}));
 	}
-	function k(e, t) {
-		return e.type === "boolean" ? t === "true" ? r.yesLabel ?? "Yes" : r.noLabel ?? "No" : e.type === "select" ? ne(e).find((e) => String(e.value) === t)?.label ?? t : t;
+	function A(e, t) {
+		return e.type === "boolean" ? t === "true" ? r.yesLabel ?? "Yes" : r.noLabel ?? "No" : e.type === "select" ? te(e).find((e) => String(e.value) === t)?.label ?? t : t;
 	}
-	let A = _(() => T().flatMap((e) => {
-		let t = b()[e.key];
+	let j = _(() => E().flatMap((e) => {
+		let t = x()[e.key];
 		return (Array.isArray(t) ? t : [t]).map((t) => ({
 			filter: e,
 			item: t,
-			text: `${e.label}: ${k(e, t)}`
+			text: `${e.label}: ${A(e, t)}`
 		}));
 	}));
-	function re(e, t) {
-		let n = b()[e.key];
-		C(e.key, Array.isArray(n) ? n.filter((e) => e !== t) : "");
+	function ne(e, t) {
+		let n = x()[e.key];
+		w(e.key, Array.isArray(n) ? n.filter((e) => e !== t) : "");
 	}
-	function j() {
-		x({ [Oe]: w() });
+	function M() {
+		S({ [ke]: T() });
 	}
-	let M = _(() => r.savedFilters === void 0 ? void 0 : ke(r.savedFilters)), N = _(() => M()?.find((e) => Me(je(e.values), b()))), [P, F] = v(!1), [L, ie] = v("");
-	function R(e) {
-		let t = M()?.find((t) => t.name === e);
-		t && x(t.values);
+	let N = _(() => r.savedFilters === void 0 ? void 0 : Ae(r.savedFilters)), P = _(() => N()?.find((e) => Ne(Me(e.values), x()))), [F, I] = v(!1), [re, R] = v("");
+	function ie(e) {
+		let t = N()?.find((t) => t.name === e);
+		t && S(t.values);
 	}
-	function ae() {
-		ie(N()?.name ?? ""), F(!0);
+	function z() {
+		R(P()?.name ?? ""), I(!0);
 	}
-	function oe(e) {
+	function ae(e) {
 		e.preventDefault();
-		let t = L().trim();
+		let t = re().trim();
 		if (t === "") return;
-		let n = (M() ?? []).filter((e) => e.name !== t);
+		let n = (N() ?? []).filter((e) => e.name !== t);
 		r.onSavedFiltersChange?.([...n, {
 			name: t,
-			values: b()
-		}]), F(!1);
+			values: x()
+		}]), I(!1);
 	}
-	let [z, B] = v(b());
-	g(y(b, (e) => B(e)));
+	let [oe, B] = v(x());
+	g(b(x, (e) => B(e)));
 	function V(e) {
-		return z()[e];
+		return oe()[e];
 	}
 	function H(e, t) {
 		B((n) => ({
@@ -731,44 +741,44 @@ function Ne(e) {
 			name: e,
 			filters: t
 		}));
-	}), U = ee(), W = ["results", "filters"], [G, ce] = v("results"), K = (e) => `${U}-tab-${e}`, q = (e) => `${U}-panel-${e}`, J = (e) => `${U}-filter-${e}`;
-	function Ne(e) {
-		e === "filters" && B(b()), ce(e);
+	}), U = y(), W = ["results", "filters"], [G, K] = v("results"), q = (e) => `${U}-tab-${e}`, ce = (e) => `${U}-panel-${e}`, J = (e) => `${U}-filter-${e}`;
+	function le(e) {
+		e === "filters" && B(x()), K(e);
 	}
 	function Pe(e) {
 		let t = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
 		if (t === 0) return;
 		e.preventDefault();
 		let n = W[(W.indexOf(G()) + t + W.length) % W.length];
-		Ne(n), document.getElementById(K(n))?.focus();
+		le(n), document.getElementById(q(n))?.focus();
 	}
 	function Fe(e) {
-		e.preventDefault(), x(z()), ce("results");
+		e.preventDefault(), S(oe()), K("results");
 	}
 	function Ie() {
-		j(), ce("results");
+		M(), K("results");
 	}
 	function Le(e) {
 		let t = () => {
 			let t = V(e.key);
 			return Array.isArray(t) ? t : [];
 		}, o = (r) => (() => {
-			var o = de(), s = o.firstChild;
-			return a(o, () => k(e, r), s), s.$$click = () => H(e.key, t().filter((e) => e !== r)), a(s, n(X, {
+			var o = fe(), s = o.firstChild;
+			return a(o, () => A(e, r), s), s.$$click = () => H(e.key, t().filter((e) => e !== r)), a(s, n(X, {
 				size: 12,
 				"aria-hidden": "true"
-			})), i(() => c(s, "aria-label", `Remove ${k(e, r)}`)), o;
+			})), i(() => c(s, "aria-label", `Remove ${A(e, r)}`)), o;
 		})();
 		return (() => {
-			var i = pe();
-			return a(i, n(I, {
+			var i = me();
+			return a(i, n(L, {
 				get id() {
 					return J(e.key);
 				},
 				value: "",
 				onChange: (n) => H(e.key, [...t(), n]),
 				get options() {
-					return ne(e).filter((e) => !t().includes(String(e.value)));
+					return te(e).filter((e) => !t().includes(String(e.value)));
 				},
 				get placeholder() {
 					return e.placeholder ?? r.anyLabel ?? "Any";
@@ -778,7 +788,7 @@ function Ne(e) {
 					return t().length > 0;
 				},
 				get children() {
-					var e = fe();
+					var e = pe();
 					return a(e, n(p, {
 						get each() {
 							return t();
@@ -791,7 +801,7 @@ function Ne(e) {
 	}
 	function Re(e) {
 		return e.type === "text" ? (() => {
-			var t = me();
+			var t = Z();
 			return t.$$input = (t) => H(e.key, t.currentTarget.value), i((n) => {
 				var r = J(e.key), i = e.placeholder;
 				return r !== n.e && c(t, "id", n.e = r), i !== n.t && c(t, "placeholder", n.t = i), n;
@@ -799,7 +809,7 @@ function Ne(e) {
 				e: void 0,
 				t: void 0
 			}), i(() => t.value = $(V(e.key))), t;
-		})() : e.type === "boolean" ? n(I, {
+		})() : e.type === "boolean" ? n(L, {
 			get id() {
 				return J(e.key);
 			},
@@ -823,30 +833,30 @@ function Ne(e) {
 	}
 	function ze() {
 		return (() => {
-			var e = Z(), t = e.firstChild;
-			return a(e, n(Y, {
+			var e = he(), t = e.firstChild;
+			return a(e, n(de, {
 				class: "filter-table-search-icon",
 				size: 16,
 				"aria-hidden": "true"
-			}), t), t.$$input = (e) => C(Oe, e.currentTarget.value), i((e) => {
+			}), t), t.$$input = (e) => w(ke, e.currentTarget.value), i((e) => {
 				var n = r.quickSearchLabel ?? "Quick search", i = r.quickSearchLabel ?? "Quick search";
 				return n !== e.e && c(t, "aria-label", e.e = n), i !== e.t && c(t, "placeholder", e.t = i), e;
 			}, {
 				e: void 0,
 				t: void 0
-			}), i(() => t.value = w()), e;
+			}), i(() => t.value = T()), e;
 		})();
 	}
 	function Be() {
 		return (() => {
-			var e = he();
-			return a(e, n(I, {
+			var e = ge();
+			return a(e, n(L, {
 				get value() {
-					return N()?.name ?? "";
+					return P()?.name ?? "";
 				},
-				onChange: R,
+				onChange: ie,
 				get options() {
-					return (M() ?? []).map((e) => ({
+					return (N() ?? []).map((e) => ({
 						value: e.name,
 						label: e.name
 					}));
@@ -859,11 +869,11 @@ function Ne(e) {
 				}
 			}), null), a(e, n(m, {
 				get when() {
-					return N();
+					return P();
 				},
 				children: (e) => (() => {
-					var t = ge();
-					return t.$$click = j, a(t, n(X, {
+					var t = _e();
+					return t.$$click = M, a(t, n(X, {
 						size: 14,
 						"aria-hidden": "true"
 					})), i(() => c(t, "aria-label", `${r.clearSavedFilterLabel ?? "Clear saved filter"} ${e().name}`)), t;
@@ -873,8 +883,8 @@ function Ne(e) {
 	}
 	function Ve(e) {
 		return (() => {
-			var t = _e(), r = t.firstChild;
-			return r.$$click = () => re(e.filter, e.item), a(r, () => e.text, null), a(r, n(X, {
+			var t = Q(), r = t.firstChild;
+			return r.$$click = () => ne(e.filter, e.item), a(r, () => e.text, null), a(r, n(X, {
 				size: 12,
 				"aria-hidden": "true"
 			}), null), i(() => c(r, "aria-label", `Remove filter ${e.text}`)), t;
@@ -882,19 +892,19 @@ function Ne(e) {
 	}
 	function He() {
 		return (() => {
-			var e = ve(), t = e.firstChild, i = t.firstChild;
+			var e = ye(), t = e.firstChild, i = t.firstChild;
 			return a(e, n(p, {
 				get each() {
-					return A();
+					return j();
 				},
 				children: Ve
-			}), t), i.$$click = j, a(i, () => r.clearAllLabel ?? "Clear all"), a(e, n(m, {
+			}), t), i.$$click = M, a(i, () => r.clearAllLabel ?? "Clear all"), a(e, n(m, {
 				get when() {
-					return o(() => M() !== void 0)() && !P();
+					return o(() => N() !== void 0)() && !F();
 				},
 				get children() {
-					var e = Q(), t = e.firstChild;
-					return t.$$click = ae, a(t, n(ue, {
+					var e = ve(), t = e.firstChild;
+					return t.$$click = z, a(t, n(Y, {
 						size: 12,
 						"aria-hidden": "true"
 					}), null), a(t, () => r.saveLabel ?? "Save", null), e;
@@ -904,23 +914,23 @@ function Ne(e) {
 	}
 	function Ue() {
 		return (() => {
-			var e = ye(), t = e.firstChild, o = t.nextSibling, s = o.nextSibling;
+			var e = be(), t = e.firstChild, o = t.nextSibling, s = o.nextSibling;
 			return e.$$keydown = (e) => {
-				e.key === "Escape" && F(!1);
-			}, e.addEventListener("submit", oe), t.$$input = (e) => ie(e.currentTarget.value), f((e) => queueMicrotask(() => e.focus()), t), a(o, n(ue, {
+				e.key === "Escape" && I(!1);
+			}, e.addEventListener("submit", ae), t.$$input = (e) => R(e.currentTarget.value), f((e) => queueMicrotask(() => e.focus()), t), a(o, n(Y, {
 				size: 16,
 				"aria-hidden": "true"
-			}), null), a(o, () => r.saveLabel ?? "Save", null), s.$$click = () => F(!1), a(s, () => r.cancelLabel ?? "Cancel"), i((e) => {
+			}), null), a(o, () => r.saveLabel ?? "Save", null), s.$$click = () => I(!1), a(s, () => r.cancelLabel ?? "Cancel"), i((e) => {
 				var n = r.saveNameLabel ?? "Filter name", i = r.saveNameLabel ?? "Filter name";
 				return n !== e.e && c(t, "aria-label", e.e = n), i !== e.t && c(t, "placeholder", e.t = i), e;
 			}, {
 				e: void 0,
 				t: void 0
-			}), i(() => t.value = L()), e;
+			}), i(() => t.value = re()), e;
 		})();
 	}
 	let We = (() => {
-		var e = be();
+		var e = xe();
 		return a(e, n(m, {
 			get when() {
 				return r.quickSearch !== !1;
@@ -930,21 +940,21 @@ function Ne(e) {
 			}
 		}), null), a(e, n(m, {
 			get when() {
-				return (M()?.length ?? 0) > 0;
+				return (N()?.length ?? 0) > 0;
 			},
 			get children() {
 				return Be();
 			}
 		}), null), a(e, n(m, {
 			get when() {
-				return A().length > 0;
+				return j().length > 0;
 			},
 			get children() {
 				return He();
 			}
 		}), null), a(e, n(m, {
 			get when() {
-				return o(() => !!P())() && A().length > 0;
+				return o(() => !!F())() && j().length > 0;
 			},
 			get children() {
 				return Ue();
@@ -955,21 +965,21 @@ function Ne(e) {
 		return e === "results" ? r.resultsLabel ?? "Results" : r.filtersLabel ?? "Filters";
 	}
 	function Ke(e) {
-		return e === "results" ? O().length : T().length;
+		return e === "results" ? k().length : E().length;
 	}
 	function qe(e) {
 		return (() => {
-			var t = Se();
-			return t.$$keydown = Pe, t.$$click = () => Ne(e), a(t, () => Ge(e), null), a(t, n(m, {
+			var t = Ce();
+			return t.$$keydown = Pe, t.$$click = () => le(e), a(t, () => Ge(e), null), a(t, n(m, {
 				get when() {
-					return e === "results" || T().length > 0;
+					return e === "results" || E().length > 0;
 				},
 				get children() {
-					var t = xe();
+					var t = Se();
 					return a(t, () => Ke(e)), t;
 				}
 			}), null), i((n) => {
-				var r = K(e), i = G() === e, a = q(e), o = G() === e ? 0 : -1;
+				var r = q(e), i = G() === e, a = ce(e), o = G() === e ? 0 : -1;
 				return r !== n.e && c(t, "id", n.e = r), i !== n.t && c(t, "aria-selected", n.t = i), a !== n.a && c(t, "aria-controls", n.a = a), o !== n.o && c(t, "tabindex", n.o = o), n;
 			}, {
 				e: void 0,
@@ -981,19 +991,19 @@ function Ne(e) {
 	}
 	function Je(e) {
 		return (() => {
-			var t = Ce(), n = t.firstChild;
+			var t = we(), n = t.firstChild;
 			return a(n, () => e.label), a(t, () => Re(e), null), i(() => c(n, "for", J(e.key))), t;
 		})();
 	}
 	function Ye(e) {
 		return (() => {
-			var t = Te();
+			var t = Ee();
 			return a(t, n(m, {
 				get when() {
 					return e.name;
 				},
 				get children() {
-					var t = we();
+					var t = Te();
 					return a(t, () => e.name), t;
 				}
 			}), null), a(t, n(p, {
@@ -1006,7 +1016,7 @@ function Ne(e) {
 	}
 	function Xe() {
 		return (() => {
-			var e = Ee(), t = e.firstChild, i = t.firstChild, o = i.nextSibling;
+			var e = De(), t = e.firstChild, i = t.firstChild, o = i.nextSibling;
 			return e.addEventListener("submit", Fe), a(e, n(p, {
 				get each() {
 					return se();
@@ -1015,22 +1025,22 @@ function Ne(e) {
 			}), t), i.$$click = Ie, a(i, n(X, {
 				size: 16,
 				"aria-hidden": "true"
-			}), null), a(i, () => r.resetLabel ?? "Reset", null), a(o, n(Y, {
+			}), null), a(i, () => r.resetLabel ?? "Reset", null), a(o, n(de, {
 				size: 16,
 				"aria-hidden": "true"
 			}), null), a(o, () => r.applyLabel ?? "Search", null), e;
 		})();
 	}
 	return (() => {
-		var e = De(), o = e.firstChild, u = o.nextSibling, d = u.nextSibling;
+		var e = Oe(), o = e.firstChild, u = o.nextSibling, d = u.nextSibling;
 		return a(o, n(p, {
 			each: W,
 			children: qe
-		})), a(u, n(le, s(l, {
-			rows: O,
+		})), a(u, n(ue, s(l, {
+			rows: k,
 			toolbar: We
 		}))), a(d, Xe), i((n) => {
-			var i = `filter-table${r.class ? ` ${r.class}` : ""}`, a = q("results"), o = K("results"), s = G() !== "results", l = q("filters"), f = K("filters"), p = G() !== "filters";
+			var i = `filter-table${r.class ? ` ${r.class}` : ""}`, a = ce("results"), o = q("results"), s = G() !== "results", l = ce("filters"), f = q("filters"), p = G() !== "filters";
 			return i !== n.e && t(e, n.e = i), a !== n.t && c(u, "id", n.t = a), o !== n.a && c(u, "aria-labelledby", n.a = o), s !== n.o && (u.hidden = n.o = s), l !== n.i && c(d, "id", n.i = l), f !== n.n && c(d, "aria-labelledby", n.n = f), p !== n.s && (d.hidden = n.s = p), n;
 		}, {
 			e: void 0,
@@ -1050,18 +1060,18 @@ r([
 ]);
 //#endregion
 //#region src/search-bar.tsx
-var Pe = /*#__PURE__*/ d("<kbd class=search-bar-shortcut>"), Fe = /*#__PURE__*/ d("<button type=button class=search-bar-clear>"), Ie = /*#__PURE__*/ d("<div><input class=search-bar-input>");
-function Le(e) {
+var Fe = /*#__PURE__*/ d("<kbd class=search-bar-shortcut>"), Ie = /*#__PURE__*/ d("<button type=button class=search-bar-clear>"), Le = /*#__PURE__*/ d("<div><input class=search-bar-input>");
+function Re(e) {
 	let r, s = () => e.shortcutKey ?? "k", l = () => e.shortcutLabel ?? `Ctrl ${String(s()).toUpperCase()}`;
-	return x(() => {
+	return S(() => {
 		let e = (e) => {
 			let t = s();
 			t !== !1 && r && (!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey || e.key.toLowerCase() === t.toLowerCase() && (e.preventDefault(), r.focus(), r.select()));
 		};
-		document.addEventListener("keydown", e), b(() => document.removeEventListener("keydown", e));
+		document.addEventListener("keydown", e), x(() => document.removeEventListener("keydown", e));
 	}), (() => {
-		var u = Ie(), d = u.firstChild;
-		a(u, n(Y, {
+		var u = Le(), d = u.firstChild;
+		a(u, n(de, {
 			size: 17,
 			class: "search-bar-icon",
 			"aria-hidden": "true"
@@ -1072,7 +1082,7 @@ function Le(e) {
 				return o(() => !e.value)() && s() !== !1;
 			},
 			get children() {
-				var e = Pe();
+				var e = Fe();
 				return a(e, l), e;
 			}
 		}), null), a(u, n(m, {
@@ -1080,7 +1090,7 @@ function Le(e) {
 				return e.value;
 			},
 			get children() {
-				var t = Fe();
+				var t = Ie();
 				return t.$$click = () => e.onInput(""), a(t, n(X, {
 					size: 15,
 					"aria-hidden": "true"
@@ -1099,4 +1109,4 @@ function Le(e) {
 }
 r(["input", "click"]);
 //#endregion
-export { I as Combobox, le as DataTable, Ne as FilterTable, Le as SearchBar };
+export { L as Combobox, ue as DataTable, Pe as FilterTable, Re as SearchBar };

package/dist/styles.css

@@ -300,6 +300,26 @@
 	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
 }
 
+/* Preview of the highlighted option, beside the list (outside its scroll box). */
+.combobox-preview {
+	position: absolute;
+	top: calc(100% + 0.2rem);
+	left: calc(100% + 0.4rem);
+	z-index: 20;
+	/* Positioned past the combobox's right edge, so it would shrink to min-content. */
+	width: max-content;
+	padding: 0.5rem;
+	border: 1px solid
+		var(--combobox-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--combobox-panel-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+	pointer-events: none;
+}
+
 .combobox-option,
 .combobox-empty {
 	padding: 0.3rem 0.5rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serkonda7/solid-components",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",