@svgrid/grid 2.2.31 → 2.2.33

package/dist/cdn/{SvGridDropdown-DjALc_4f.js → SvGridDropdown-D0VdjeR8.js}

@@ -3,146 +3,148 @@ import { i as t, n, r } from "./popover-P-9P2YYn.js";
 import * as i from "svelte/internal/client";
 import "svelte/internal/disclose-version";
 //#region src/SvGridDropdown.svelte
-var a = /* @__PURE__ */ e({ default: () => b }), o = i.from_html("<span class=\"sv-grid-chip sv-grid-chip-removable svelte-ei8hp3\"> <span class=\"sv-grid-chip-remove svelte-ei8hp3\" role=\"button\">×</span></span>"), s = i.from_html("<span class=\"sv-grid-dropdown-chips svelte-ei8hp3\"></span>"), c = i.from_html("<span class=\"sv-grid-chip svelte-ei8hp3\"> </span>"), l = i.from_html("<span class=\"sv-grid-dropdown-label svelte-ei8hp3\"> </span>"), u = i.from_html("<input type=\"search\" class=\"sv-grid-dropdown-search\" placeholder=\"Search…\"/>"), d = i.from_html("<div class=\"sv-grid-dropdown-empty\"> </div>"), f = i.from_html("<span class=\"sv-grid-dropdown-check\" aria-hidden=\"true\"> </span>"), p = i.from_html("<span class=\"sv-grid-dropdown-option-chip\"> </span>"), m = i.from_html("<span class=\"sv-grid-dropdown-option-label\"> </span>"), h = i.from_html("<div role=\"option\"><!> <!></div>"), g = i.from_html("<div class=\"sv-grid-dropdown-footer\"><button type=\"button\" class=\"sv-grid-dropdown-done\">Done</button></div>"), _ = i.from_html("<div role=\"listbox\"><!> <!> <!></div>"), v = i.from_html("<div><button type=\"button\" aria-haspopup=\"listbox\"><!> <span class=\"sv-grid-dropdown-caret svelte-ei8hp3\" aria-hidden=\"true\">▾</span></button> <!></div>"), y = {
+var a = /* @__PURE__ */ e({ default: () => x }), o = i.from_html("<span class=\"sv-grid-chip sv-grid-chip-removable svelte-ei8hp3\"> <span class=\"sv-grid-chip-remove svelte-ei8hp3\" role=\"button\">×</span></span>"), s = i.from_html("<span class=\"sv-grid-dropdown-chips svelte-ei8hp3\"></span>"), c = i.from_html("<span class=\"sv-grid-chip svelte-ei8hp3\"> </span>"), l = i.from_html("<span class=\"sv-grid-dropdown-label svelte-ei8hp3\"> </span>"), u = i.from_html("<input type=\"search\" class=\"sv-grid-dropdown-search\" placeholder=\"Search…\"/>"), d = i.from_html("<div class=\"sv-grid-dropdown-empty\" role=\"status\" aria-live=\"polite\">Loading…</div>"), f = i.from_html("<div class=\"sv-grid-dropdown-empty\"> </div>"), p = i.from_html("<span class=\"sv-grid-dropdown-check\" aria-hidden=\"true\"> </span>"), m = i.from_html("<span class=\"sv-grid-dropdown-option-chip\"> </span>"), h = i.from_html("<span class=\"sv-grid-dropdown-option-label\"> </span>"), g = i.from_html("<div role=\"option\"><!> <!></div>"), _ = i.from_html("<div class=\"sv-grid-dropdown-footer\"><button type=\"button\" class=\"sv-grid-dropdown-done\">Done</button></div>"), v = i.from_html("<div role=\"listbox\"><!> <!> <!></div>"), y = i.from_html("<div><button type=\"button\" aria-haspopup=\"listbox\"><!> <span class=\"sv-grid-dropdown-caret svelte-ei8hp3\" aria-hidden=\"true\">▾</span></button> <!></div>"), b = {
 	hash: "svelte-ei8hp3",
 	code: "\n  /* All colors derive from the grid's host CSS vars so light/dark themes\n     \"just work\". Hard fallbacks are kept so the component is still\n     usable in an unthemed page. */.sv-grid-dropdown.svelte-ei8hp3 {position:absolute;top:0;left:0;right:0;height:100%;background:var(--sg-bg, #ffffff);color:var(--sg-fg, #0f172a);}.sv-grid-dropdown-trigger.svelte-ei8hp3 {display:flex;align-items:center;gap:6px;width:100%;height:100%;min-height:28px;padding:0 8px;background:var(--sg-bg, #ffffff);color:var(--sg-fg, #0f172a);border:0;outline:none;font:inherit;text-align:start;cursor:pointer;box-sizing:border-box;}.sv-grid-dropdown-trigger.svelte-ei8hp3:focus {outline:2px solid var(--sg-accent, #2563eb);outline-offset:-2px;}.sv-grid-dropdown-trigger-chips.svelte-ei8hp3 {align-items:center;padding:4px 8px;flex-wrap:wrap;}.sv-grid-dropdown-chips.svelte-ei8hp3 {display:inline-flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0;align-items:center;}.sv-grid-dropdown-label.svelte-ei8hp3 {flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.sv-grid-dropdown-caret.svelte-ei8hp3 {flex:0 0 auto;font-size:10px;opacity:0.7;line-height:1;}\n\n  /* Popover sits absolutely below the trigger. The parent\n     `.sv-grid-cell-editing` has `overflow: visible`, so this can hang\n     past the row. Pulls its surface color from the grid's header bg\n     so it reads as a slightly elevated layer on either theme. */\n  /* Panel is `position: fixed` AND portal'd into document.body via\n     `use:portalToBody`, so it escapes every ancestor overflow / clip /\n     transform / stacking context. Coords come from updatePanelPosition(). */.sv-grid-dropdown-panel {overflow-y:auto;background:var(--sg-header-bg, var(--sg-bg, #ffffff));color:var(--sg-fg, #0f172a);border:1px solid var(--sg-accent, #2563eb);border-radius:6px;box-shadow:0 12px 28px rgba(0, 0, 0, 0.45);padding:4px 0;font-family:inherit;}\n  /* When the option list fits in one panel we want NO scrollbar at all -\n   * not even a sub-pixel ghost track. `overflow: visible` rules out the\n   * scrollbar gutter that some browsers still reserve under\n   * `overflow: auto` when content equals max-height. */.sv-grid-dropdown-panel.sv-grid-dropdown-panel-fits {overflow:visible;}.sv-grid-dropdown-option {display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;user-select:none;color:var(--sg-fg, #0f172a);}.sv-grid-dropdown-option-highlighted {background:var(--sg-row-hover-bg, rgba(37, 99, 235, 0.1));}.sv-grid-dropdown-option-selected {font-weight:600;background:var(--sg-selection-bg, rgba(37, 99, 235, 0.15));}.sv-grid-dropdown-option-selected.sv-grid-dropdown-option-highlighted {background:var(--sg-row-hover-bg, rgba(37, 99, 235, 0.18));}.sv-grid-dropdown-option-label {flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.sv-grid-dropdown-check {flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--sg-accent, #2563eb);font-weight:700;}.sv-grid-dropdown-swatch {flex:0 0 12px;width:12px;height:12px;border-radius:999px;border:1px solid color-mix(in srgb, var(--sg-fg, #0f172a) 25%, transparent);}\n  /* Colored option chip. Declared `:global` because the option panel is\n     portal'd to <body>, where Svelte's scoped classes don't reach. The\n     per-chip background / border / text color come from an inline style\n     (see colorfulChipStyleInline) so each option matches its cell chip. */.sv-grid-dropdown-option-chip {display:inline-flex;align-items:center;max-width:100%;padding:2px 11px;border:1px solid transparent;border-radius:999px;font-size:0.9em;font-weight:600;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.sv-grid-dropdown-empty {padding:8px 10px;color:var(--sg-muted, rgba(15, 23, 42, 0.55));font-style:italic;font-size:0.9em;}.sv-grid-dropdown-footer {display:flex;justify-content:flex-end;padding:4px 6px;border-top:1px solid var(--sg-border, rgba(15, 23, 42, 0.08));margin-top:2px;}.sv-grid-dropdown-done {font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:#fff;background:var(--sg-accent, #2563eb);border:0;border-radius:4px;padding:4px 10px;cursor:pointer;}.sv-grid-dropdown-done:hover {filter:brightness(1.12);}\n\n  /* Note: option / footer / swatch styles are declared `:global(...)`\n     above because the panel is portal'd to <body> and Svelte's scoped\n     class won't survive on children of an element living outside the\n     component subtree. */\n\n  /* Theme-aware chip badges. Inside the trigger they sit on the cell\n     background, so we need a tone that contrasts on BOTH themes - a\n     translucent accent works well in dark mode and reads as a soft\n     blue pill in light mode. */.sv-grid-chip.svelte-ei8hp3 {display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:0.85em;line-height:1.4;background:color-mix(in srgb, var(--sg-accent, #2563eb) 18%, transparent);color:var(--sg-fg, #0f172a);border-radius:999px;border:1px solid color-mix(in srgb, var(--sg-accent, #2563eb) 35%, transparent);white-space:nowrap;}.sv-grid-chip-removable.svelte-ei8hp3 {padding-inline-end:2px;}.sv-grid-chip-remove.svelte-ei8hp3 {display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;border-radius:999px;background:color-mix(in srgb, var(--sg-fg, #0f172a) 18%, transparent);color:inherit;font-size:12px;line-height:1;cursor:pointer;padding:0;}.sv-grid-chip-remove.svelte-ei8hp3:hover {background:rgba(220, 38, 38, 0.7);color:#fff;}"
 };
-function b(e, a) {
-	let b = i.props_id();
-	i.push(a, !0), i.append_styles(e, y);
-	let x = i.prop(a, "multiple", 3, !1), S = i.prop(a, "placeholder", 3, "Select…"), C = i.prop(a, "renderChipsInTrigger", 3, !1), w = i.prop(a, "searchable", 3, !1), T = i.prop(a, "autoOpen", 3, !0);
-	function E(e) {
-		return e >= 0 && e < i.get(k).length ? `${b}-opt-${e}` : void 0;
+function x(e, a) {
+	let x = i.props_id();
+	i.push(a, !0), i.append_styles(e, b);
+	let S = i.prop(a, "multiple", 3, !1), C = i.prop(a, "placeholder", 3, "Select…"), w = i.prop(a, "renderChipsInTrigger", 3, !1), T = i.prop(a, "searchable", 3, !1), E = i.prop(a, "autoOpen", 3, !0), D = i.prop(a, "loading", 3, !1);
+	function O(e) {
+		return e >= 0 && e < i.get(j).length ? `${x}-opt-${e}` : void 0;
 	}
-	let D = i.derived(() => a.options.some((e) => e.color) ? 40 : 32), O = i.state(""), k = i.derived(() => !w() || !i.get(O).trim() ? a.options : (() => {
-		let e = i.get(O).trim().toLowerCase();
+	let k = i.derived(() => a.options.some((e) => e.color) ? 40 : 32), A = i.state(""), j = i.derived(() => !T() || !i.get(A).trim() ? a.options : (() => {
+		let e = i.get(A).trim().toLowerCase();
 		return a.options.filter((t) => t.label.toLowerCase().includes(e));
-	})()), A = i.state(!1), j = i.state(-1), M = i.state(null), N = i.state(null), P = i.state(null), F = i.state(i.proxy({
+	})()), M = i.state(!1), N = i.state(-1), P = i.state(null), F = i.state(null), I = i.state(null), L = i.state(i.proxy({
 		top: 0,
 		left: 0,
 		width: 0,
 		openUpward: !1,
 		maxHeight: 0,
 		availHeight: 0
-	})), I = i.derived(() => Array.isArray(a.value) ? a.value : a.value == null || a.value === "" ? [] : [a.value]), L = i.derived(() => {
-		if (i.get(I).length === 0) return S();
-		if (!x()) {
-			let e = i.get(I)[0], t = a.options.find((t) => String(t.value) === String(e));
+	})), R = i.derived(() => Array.isArray(a.value) ? a.value : a.value == null || a.value === "" ? [] : [a.value]), z = i.derived(() => {
+		if (i.get(R).length === 0) return C();
+		if (!S()) {
+			let e = i.get(R)[0], t = a.options.find((t) => String(t.value) === String(e));
 			return t ? t.label : String(e);
 		}
-		return `${i.get(I).length} selected`;
-	}), R = i.derived(() => {
-		if (x() || i.get(I).length !== 1) return;
-		let e = i.get(I)[0];
+		return `${i.get(R).length} selected`;
+	}), B = i.derived(() => {
+		if (S() || i.get(R).length !== 1) return;
+		let e = i.get(R)[0];
 		return a.options.find((t) => String(t.value) === String(e))?.color;
 	});
-	function z(e) {
-		return i.get(I).some((t) => String(t) === String(e.value));
+	function V(e) {
+		return i.get(R).some((t) => String(t) === String(e.value));
 	}
-	function B(e) {
-		if (x()) {
-			let t = z(e) ? i.get(I).filter((t) => String(t) !== String(e.value)) : [...i.get(I), e.value];
+	function H(e) {
+		if (S()) {
+			let t = V(e) ? i.get(R).filter((t) => String(t) !== String(e.value)) : [...i.get(R), e.value];
 			a.onChange?.(t);
-		} else a.onChange?.(e.value), i.set(A, !1), a.onCommit?.();
+		} else a.onChange?.(e.value), i.set(M, !1), a.onCommit?.();
 	}
-	function V() {
-		if (!i.get(A)) {
-			if (i.set(A, !0), i.get(j) < 0) {
-				let e = a.options.findIndex((e) => z(e));
-				i.set(j, e >= 0 ? e : 0, !0);
+	function U() {
+		if (!i.get(M)) {
+			if (i.set(M, !0), i.get(N) < 0) {
+				let e = a.options.findIndex((e) => V(e));
+				i.set(N, e >= 0 ? e : 0, !0);
 			}
-			H();
+			W();
 		}
 	}
-	function H() {
-		if (!i.get(N)) return;
-		let e = Math.min(a.options.length, 10) * i.get(D) + (x() ? 40 : 0) + 8;
-		i.set(F, n(i.get(N).getBoundingClientRect(), {
-			estimatedHeight: e,
+	function W() {
+		if (!i.get(F)) return;
+		let e = Math.min(i.get(j).length, 10), t = T() ? 38 : 0, r = e * i.get(k) + (S() ? 40 : 0) + t + 8;
+		i.set(L, n(i.get(F).getBoundingClientRect(), {
+			estimatedHeight: r,
 			clampHorizontal: !1
 		}), !0);
 	}
 	i.user_effect(() => {
-		if (!i.get(A)) return;
-		let e = () => H();
+		if (!i.get(M)) return;
+		let e = () => W();
 		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
 		};
+	}), i.user_effect(() => {
+		i.get(M) && (i.get(j).length, i.get(k), W());
 	});
-	function U() {
-		i.set(A, !1), i.set(j, -1);
+	function G() {
+		i.set(M, !1), i.set(N, -1);
 	}
-	function W(e) {
+	function K(e) {
 		if (e.stopPropagation(), e.key === "Escape") {
-			e.preventDefault(), U(), a.onCancel?.();
+			e.preventDefault(), G(), a.onCancel?.();
 			return;
 		}
 		if (e.key === "ArrowDown") {
-			if (e.preventDefault(), !i.get(A)) {
-				V();
+			if (e.preventDefault(), !i.get(M)) {
+				U();
 				return;
 			}
-			i.set(j, Math.min(i.get(j) + 1, a.options.length - 1), !0), G();
+			i.set(N, Math.min(i.get(N) + 1, a.options.length - 1), !0), q();
 		} else if (e.key === "ArrowUp") {
-			if (e.preventDefault(), !i.get(A)) {
-				V();
+			if (e.preventDefault(), !i.get(M)) {
+				U();
 				return;
 			}
-			i.set(j, Math.max(i.get(j) - 1, 0), !0), G();
+			i.set(N, Math.max(i.get(N) - 1, 0), !0), q();
 		} else if (e.key === "Home") {
-			if (!i.get(A)) return;
-			e.preventDefault(), i.set(j, 0), G();
+			if (!i.get(M)) return;
+			e.preventDefault(), i.set(N, 0), q();
 		} else if (e.key === "End") {
-			if (!i.get(A)) return;
-			e.preventDefault(), i.set(j, a.options.length - 1), G();
+			if (!i.get(M)) return;
+			e.preventDefault(), i.set(N, a.options.length - 1), q();
 		} else if (e.key === "Enter") {
-			if (e.preventDefault(), !i.get(A)) {
-				V();
+			if (e.preventDefault(), !i.get(M)) {
+				U();
 				return;
 			}
-			let t = a.options[i.get(j)];
-			t ? B(t) : x() && (U(), a.onCommit?.());
-		} else if (e.key === " " && i.get(A)) {
+			let t = a.options[i.get(N)];
+			t ? H(t) : S() && (G(), a.onCommit?.());
+		} else if (e.key === " " && i.get(M)) {
 			e.preventDefault();
-			let t = a.options[i.get(j)];
-			t && B(t);
-		} else e.key === "Tab" && (i.get(A) && U(), a.onCommit?.());
+			let t = a.options[i.get(N)];
+			t && H(t);
+		} else e.key === "Tab" && (i.get(M) && G(), a.onCommit?.());
 	}
-	function G() {
+	function q() {
 		queueMicrotask(() => {
-			i.get(P) && i.get(P).querySelector(`[data-opt-idx="${i.get(j)}"]`)?.scrollIntoView({ block: "nearest" });
+			i.get(I) && i.get(I).querySelector(`[data-opt-idx="${i.get(N)}"]`)?.scrollIntoView({ block: "nearest" });
 		});
 	}
-	function K(e) {
+	function J(e) {
 		let t = e.relatedTarget;
-		t && i.get(M)?.contains(t) || (i.get(A) && U(), a.onCommit?.());
+		t && i.get(P)?.contains(t) || (i.get(M) && G(), a.onCommit?.());
 	}
-	function q(e, t) {
+	function ee(e, t) {
 		t.preventDefault(), t.stopPropagation();
-		let n = i.get(I).filter((t) => String(t) !== String(e));
-		a.onChange?.(x() ? n : n[0] ?? null);
+		let n = i.get(R).filter((t) => String(t) !== String(e));
+		a.onChange?.(S() ? n : n[0] ?? null);
 	}
-	function J(e) {
-		T() && (e.focus(), V());
+	function te(e) {
+		E() && (e.focus(), U());
 	}
 	i.user_effect(() => {
-		if (!i.get(A)) return;
+		if (!i.get(M)) return;
 		let e = (e) => {
 			let t = e.target;
-			t && (i.get(M)?.contains(t) || i.get(P)?.contains(t) || (U(), a.onCommit?.()));
+			t && (i.get(P)?.contains(t) || i.get(I)?.contains(t) || (G(), a.onCommit?.()));
 		};
 		return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
 	});
 	function Y(e) {
 		return `background: color-mix(in srgb, ${e} 22%, transparent);border-color: color-mix(in srgb, ${e} 45%, transparent);color: color-mix(in srgb, ${e} 80%, var(--sg-fg, #0f172a));`;
 	}
-	var X = v();
+	var X = y();
 	let Z;
 	var Q = i.child(X);
 	let $;
-	var ee = i.child(Q), te = (e) => {
+	var ne = i.child(Q), re = (e) => {
 		var t = s();
-		i.each(t, 21, () => i.get(I), (e) => String(e), (e, t) => {
+		i.each(t, 21, () => i.get(R), (e) => String(e), (e, t) => {
 			let n = i.derived(() => a.options.find((e) => String(e.value) === String(i.get(t))));
 			var r = o(), s = i.child(r), c = i.sibling(s);
 			i.set_attribute(c, "tabindex", -1), i.reset(r), i.template_effect((e, t, n) => {
@@ -151,56 +153,59 @@ function b(e, a) {
 				() => i.get(n)?.color ? Y(i.get(n).color) : "",
 				() => i.get(n) ? i.get(n).label : String(i.get(t)),
 				() => i.get(n) ? i.get(n).label : String(i.get(t))
-			]), i.delegated("mousedown", c, (e) => e.preventDefault()), i.delegated("click", c, (e) => q(i.get(t), e)), i.append(e, r);
+			]), i.delegated("mousedown", c, (e) => e.preventDefault()), i.delegated("click", c, (e) => ee(i.get(t), e)), i.append(e, r);
 		}), i.reset(t), i.append(e, t);
-	}, ne = (e) => {
+	}, ie = (e) => {
 		var t = c(), n = i.child(t, !0);
 		i.reset(t), i.template_effect((e) => {
-			i.set_style(t, e), i.set_text(n, i.get(L));
-		}, [() => Y(i.get(R))]), i.append(e, t);
-	}, re = (e) => {
+			i.set_style(t, e), i.set_text(n, i.get(z));
+		}, [() => Y(i.get(B))]), i.append(e, t);
+	}, ae = (e) => {
 		var t = l(), n = i.child(t, !0);
-		i.reset(t), i.template_effect(() => i.set_text(n, i.get(L))), i.append(e, t);
+		i.reset(t), i.template_effect(() => i.set_text(n, i.get(z))), i.append(e, t);
 	};
-	i.if(ee, (e) => {
-		C() && i.get(I).length > 0 ? e(te) : !x() && i.get(I).length === 1 && i.get(R) ? e(ne, 1) : e(re, -1);
-	}), i.next(2), i.reset(Q), i.bind_this(Q, (e) => i.set(N, e), () => i.get(N)), i.action(Q, (e) => J?.(e));
-	var ie = i.sibling(Q, 2), ae = (e) => {
-		let n = i.derived(() => a.options.length > 10), o = i.derived(() => Math.min(i.get(n) ? 10 * i.get(D) + (x() ? 40 : 0) + 8 : Infinity, i.get(F).maxHeight));
-		var s = _();
+	i.if(ne, (e) => {
+		w() && i.get(R).length > 0 ? e(re) : !S() && i.get(R).length === 1 && i.get(B) ? e(ie, 1) : e(ae, -1);
+	}), i.next(2), i.reset(Q), i.bind_this(Q, (e) => i.set(F, e), () => i.get(F)), i.action(Q, (e) => te?.(e));
+	var oe = i.sibling(Q, 2), se = (e) => {
+		let n = i.derived(() => a.options.length > 10), o = i.derived(() => Math.min(i.get(n) ? 10 * i.get(k) + (S() ? 40 : 0) + 8 : Infinity, i.get(L).availHeight));
+		var s = v();
 		let c, l;
-		var v = i.child(s), y = (e) => {
+		var y = i.child(s), b = (e) => {
 			var t = u();
 			i.remove_input_defaults(t), i.delegated("mousedown", t, (e) => e.stopPropagation()), i.delegated("click", t, (e) => e.stopPropagation()), i.delegated("keydown", t, (e) => {
-				e.key === "Escape" && (e.preventDefault(), i.set(A, !1), a.onCancel?.());
-			}), i.bind_value(t, () => i.get(O), (e) => i.set(O, e)), i.append(e, t);
+				e.key === "Escape" && (e.preventDefault(), i.set(M, !1), a.onCancel?.());
+			}), i.bind_value(t, () => i.get(A), (e) => i.set(A, e)), i.append(e, t);
 		};
-		i.if(v, (e) => {
-			w() && e(y);
+		i.if(y, (e) => {
+			T() && e(b);
 		});
-		var b = i.sibling(v, 2), S = (e) => {
-			var t = d(), n = i.child(t, !0);
-			i.reset(t), i.template_effect(() => i.set_text(n, w() && i.get(O) ? `No matches for "${i.get(O)}"` : "No options")), i.append(e, t);
-		}, C = (e) => {
+		var x = i.sibling(y, 2), C = (e) => {
+			var t = d();
+			i.append(e, t);
+		}, w = (e) => {
+			var t = f(), n = i.child(t, !0);
+			i.reset(t), i.template_effect(() => i.set_text(n, T() && i.get(A) ? `No matches for "${i.get(A)}"` : "No options")), i.append(e, t);
+		}, E = (e) => {
 			var t = i.comment(), n = i.first_child(t);
-			i.each(n, 19, () => i.get(k), (e) => String(e.value), (e, t, n) => {
-				let r = i.derived(() => z(i.get(t)));
-				var a = h();
+			i.each(n, 19, () => i.get(j), (e) => String(e.value), (e, t, n) => {
+				let r = i.derived(() => V(i.get(t)));
+				var a = g();
 				let o;
 				var s = i.child(a), c = (e) => {
-					var t = f(), n = i.child(t, !0);
+					var t = p(), n = i.child(t, !0);
 					i.reset(t), i.template_effect(() => i.set_text(n, i.get(r) ? "✓" : "")), i.append(e, t);
 				};
 				i.if(s, (e) => {
-					x() && e(c);
+					S() && e(c);
 				});
 				var l = i.sibling(s, 2), u = (e) => {
-					var n = p(), r = i.child(n, !0);
+					var n = m(), r = i.child(n, !0);
 					i.reset(n), i.template_effect((e) => {
 						i.set_style(n, e), i.set_text(r, i.get(t).label);
 					}, [() => Y(i.get(t).color)]), i.append(e, n);
 				}, d = (e) => {
-					var n = m(), r = i.child(n, !0);
+					var n = h(), r = i.child(n, !0);
 					i.reset(n), i.template_effect(() => i.set_text(r, i.get(t).label)), i.append(e, n);
 				};
 				i.if(l, (e) => {
@@ -208,40 +213,41 @@ function b(e, a) {
 				}), i.reset(a), i.template_effect((e) => {
 					o = i.set_class(a, 1, "sv-grid-dropdown-option", null, o, {
 						"sv-grid-dropdown-option-selected": i.get(r),
-						"sv-grid-dropdown-option-highlighted": i.get(n) === i.get(j)
+						"sv-grid-dropdown-option-highlighted": i.get(n) === i.get(N)
 					}), i.set_attribute(a, "id", e), i.set_attribute(a, "aria-selected", i.get(r)), i.set_attribute(a, "data-opt-idx", i.get(n));
-				}, [() => E(i.get(n))]), i.delegated("mousedown", a, (e) => {
-					e.preventDefault(), B(i.get(t));
-				}), i.event("mouseenter", a, () => i.set(j, i.get(n), !0)), i.append(e, a);
+				}, [() => O(i.get(n))]), i.delegated("mousedown", a, (e) => {
+					e.preventDefault(), H(i.get(t));
+				}), i.event("mouseenter", a, () => i.set(N, i.get(n), !0)), i.append(e, a);
 			}), i.append(e, t);
 		};
-		i.if(b, (e) => {
-			i.get(k).length === 0 ? e(S) : e(C, -1);
+		i.if(x, (e) => {
+			D() && i.get(j).length === 0 ? e(C) : i.get(j).length === 0 ? e(w, 1) : e(E, -1);
 		});
-		var T = i.sibling(b, 2), M = (e) => {
-			var t = g(), n = i.child(t);
+		var P = i.sibling(x, 2), F = (e) => {
+			var t = _(), n = i.child(t);
 			i.reset(t), i.delegated("mousedown", n, (e) => e.preventDefault()), i.delegated("click", n, () => {
-				U(), a.onCommit?.();
+				G(), a.onCommit?.();
 			}), i.append(e, t);
 		};
-		i.if(T, (e) => {
-			x() && e(M);
-		}), i.reset(s), i.bind_this(s, (e) => i.set(P, e), () => i.get(P)), i.action(s, (e) => t?.(e)), i.action(s, (e, t) => r?.(e, t), () => ({ up: i.get(F).openUpward })), i.template_effect(() => {
-			c = i.set_class(s, 1, "sv-grid-dropdown-panel", null, c, { "sv-grid-dropdown-panel-fits": !i.get(n) }), i.set_attribute(s, "aria-multiselectable", x()), l = i.set_style(s, "", l, {
+		i.if(P, (e) => {
+			S() && e(F);
+		}), i.reset(s), i.bind_this(s, (e) => i.set(I, e), () => i.get(I)), i.action(s, (e) => t?.(e)), i.action(s, (e, t) => r?.(e, t), () => ({ up: i.get(L).openUpward })), i.template_effect(() => {
+			c = i.set_class(s, 1, "sv-grid-dropdown-panel", null, c, { "sv-grid-dropdown-panel-fits": !i.get(n) }), i.set_attribute(s, "aria-multiselectable", S()), l = i.set_style(s, "", l, {
 				position: "fixed",
-				top: `${i.get(F).top}px`,
-				left: `${i.get(F).left}px`,
-				width: `${i.get(F).width}px`,
+				top: i.get(L).openUpward ? null : `${i.get(L).top}px`,
+				bottom: i.get(L).openUpward ? `${i.get(L).bottom}px` : null,
+				left: `${i.get(L).left}px`,
+				width: `${i.get(L).width}px`,
 				"max-height": i.get(o) === null ? null : `${i.get(o)}px`,
 				"z-index": "2147483647"
 			});
 		}), i.delegated("pointerdown", s, (e) => e.stopPropagation()), i.delegated("mousedown", s, (e) => e.stopPropagation()), i.delegated("click", s, (e) => e.stopPropagation()), i.append(e, s);
 	};
-	i.if(ie, (e) => {
-		i.get(A) && e(ae);
-	}), i.reset(X), i.bind_this(X, (e) => i.set(M, e), () => i.get(M)), i.template_effect((e) => {
-		Z = i.set_class(X, 1, "sv-grid-dropdown svelte-ei8hp3", null, Z, { "sv-grid-dropdown-open": i.get(A) }), $ = i.set_class(Q, 1, "sv-grid-dropdown-trigger svelte-ei8hp3", null, $, { "sv-grid-dropdown-trigger-chips": C() && i.get(I).length > 0 }), i.set_attribute(Q, "aria-expanded", i.get(A)), i.set_attribute(Q, "aria-activedescendant", e);
-	}, [() => i.get(A) ? E(i.get(j)) : void 0]), i.delegated("focusout", X, K), i.delegated("click", X, (e) => e.stopPropagation()), i.delegated("dblclick", X, (e) => e.stopPropagation()), i.delegated("pointerdown", X, (e) => e.stopPropagation()), i.delegated("mousedown", X, (e) => e.stopPropagation()), i.delegated("click", Q, () => i.get(A) ? U() : V()), i.delegated("keydown", Q, W), i.append(e, X), i.pop();
+	i.if(oe, (e) => {
+		i.get(M) && e(se);
+	}), i.reset(X), i.bind_this(X, (e) => i.set(P, e), () => i.get(P)), i.template_effect((e) => {
+		Z = i.set_class(X, 1, "sv-grid-dropdown svelte-ei8hp3", null, Z, { "sv-grid-dropdown-open": i.get(M) }), $ = i.set_class(Q, 1, "sv-grid-dropdown-trigger svelte-ei8hp3", null, $, { "sv-grid-dropdown-trigger-chips": w() && i.get(R).length > 0 }), i.set_attribute(Q, "aria-expanded", i.get(M)), i.set_attribute(Q, "aria-activedescendant", e);
+	}, [() => i.get(M) ? O(i.get(N)) : void 0]), i.delegated("focusout", X, J), i.delegated("click", X, (e) => e.stopPropagation()), i.delegated("dblclick", X, (e) => e.stopPropagation()), i.delegated("pointerdown", X, (e) => e.stopPropagation()), i.delegated("mousedown", X, (e) => e.stopPropagation()), i.delegated("click", Q, () => i.get(M) ? G() : U()), i.delegated("keydown", Q, K), i.append(e, X), i.pop();
 }
 i.delegate([
 	"focusout",
@@ -252,4 +258,4 @@ i.delegate([
 	"keydown"
 ]);
 //#endregion
-export { a as n, b as t };
+export { a as n, x as t };