@pgcorp/ui-kit 0.13.0 → 0.15.0

package/dist/src/components/shared/controls/SListbox.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +1,34 @@
-import { useUiKitLocale as e } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
-import { validateBoolean as n, validateDomId as r, validateExactString as i, validateNonEmptyString as a } from "../../../internal/runtimeContract.js";
-import { useInteractiveLeafRegistration as ee } from "../../../internal/passiveContentContract.js";
-import { selectionKeyToken as o } from "../_internal/useSelectionRoving.js";
-import { isSelectionModelList as s, resolveSelectionInventory as te, validateSelectionModel as c } from "../_internal/selectionContract.js";
-import { listboxContextKey as ne } from "../_internal/listboxContext.js";
-import l from "../_internal/SListboxGroup.vue.js";
-import u from "./SListboxOption.vue.js";
-import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, defineComponent as g, mergeProps as re, onBeforeUnmount as ie, openBlock as _, provide as ae, renderList as v, toDisplayString as oe, unref as se, useId as ce, withCtx as y } from "vue";
+import { validateBoolean as e, validateBoundedInteger as t, validateBoundedNumber as n, validateDomId as r, validateExactString as i, validateNonEmptyString as a } from "../../../internal/runtimeContract.js";
+import { useUiKitLocale as ee } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as te } from "../../../internal/ownedAttrs.js";
+import { useInteractiveLeafRegistration as ne } from "../../../internal/passiveContentContract.js";
+import { selectionKeyToken as re } from "../_internal/useSelectionRoving.js";
+import { isSelectionModelList as ie, resolveSelectionInventory as ae, validateSelectionModel as o } from "../_internal/selectionContract.js";
+import { listboxContextKey as oe } from "../_internal/listboxContext.js";
+import se from "../_internal/SListboxGroup.vue.js";
+import ce from "./SListboxOption.vue.js";
+import { CLEAR_OPTION_TOKEN as s, createListboxInventory as le, projectListboxEntries as ue } from "../_internal/listboxInventory.js";
+import { useVirtualCollection as de } from "../_internal/useVirtualCollection.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, defineComponent as p, mergeProps as fe, nextTick as m, normalizeStyle as pe, onBeforeUnmount as me, onMounted as he, openBlock as h, provide as ge, ref as g, renderList as _e, toDisplayString as ve, unref as _, useId as ye, watch as v, withCtx as be } from "vue";
 //#region src/components/shared/controls/SListbox.vue?vue&type=script&setup=true&lang.ts
-var b = [
+var xe = [
 	"id",
 	"data-variant",
 	"data-invalid",
 	"data-readonly",
 	"data-focus-mode",
+	"data-virtualized",
 	"aria-label",
 	"aria-multiselectable",
 	"aria-disabled",
 	"aria-readonly",
-	"aria-invalid"
-], le = {
-	key: 1,
+	"aria-invalid",
+	"tabindex"
+], Se = {
+	key: 2,
 	class: "s-listbox__empty",
 	role: "presentation"
-}, x = /*@__PURE__*/ g({
+}, Ce = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "SListbox",
 	props: {
@@ -48,6 +52,7 @@ var b = [
 		id: { default: void 0 },
 		focusMode: { default: "roving" },
 		activeValue: { default: void 0 },
+		virtualization: { default: void 0 },
 		selectionMode: { default: void 0 },
 		modelValue: {}
 	},
@@ -55,162 +60,265 @@ var b = [
 		"update:modelValue",
 		"update:activeValue",
 		"option-keydown",
+		"active-descendant-change",
 		"escape",
 		"tab"
 	],
-	setup(g, { expose: x, emit: S }) {
-		let C = g, { t: ue } = e(), w = S, de = t({
+	setup(p, { expose: Ce, emit: we }) {
+		let y = p, { t: Te } = ee(), b = we, Ee = te({
 			component: "SListbox",
 			owner: "listbox root"
 		});
-		ee({ owner: "SListbox" });
-		let fe = ce(), T = f(() => {
-			let e = i("SListbox", "selectionMode", C.selectionMode ?? "single", ["single", "multiple"]), t;
-			if (C.clearOptionLabel !== void 0) {
-				if (e === "multiple") throw Error("SListbox: clearOptionLabel is available only in single selection mode");
-				t = a("SListbox", "clearOptionLabel", C.clearOptionLabel);
+		ne({ owner: "SListbox" });
+		let De = ye(), x = l(() => {
+			let t = i("SListbox", "selectionMode", y.selectionMode ?? "single", ["single", "multiple"]), n;
+			if (y.clearOptionLabel !== void 0) {
+				if (t === "multiple") throw Error("SListbox: clearOptionLabel is available only in single selection mode");
+				n = a("SListbox", "clearOptionLabel", y.clearOptionLabel);
 			}
 			return {
-				id: C.id === void 0 ? `s-listbox-${fe}` : r("SListbox", "id", C.id),
-				label: a("SListbox", "label", C.label),
-				emptyLabel: a("SListbox", "emptyLabel", C.emptyLabel ?? ue("forms.noOptions")),
-				variant: i("SListbox", "variant", C.variant, ["select", "color"]),
-				disabled: n("SListbox", "disabled", C.disabled),
-				readonly: n("SListbox", "readonly", C.readonly),
-				invalid: n("SListbox", "invalid", C.invalid),
-				focusMode: i("SListbox", "focusMode", C.focusMode, ["roving", "activedescendant"]),
-				selectionMode: e,
-				clearOptionLabel: t
+				id: y.id === void 0 ? `s-listbox-${De}` : r("SListbox", "id", y.id),
+				label: a("SListbox", "label", y.label),
+				emptyLabel: a("SListbox", "emptyLabel", y.emptyLabel ?? Te("forms.noOptions")),
+				variant: i("SListbox", "variant", y.variant, ["select", "color"]),
+				disabled: e("SListbox", "disabled", y.disabled),
+				readonly: e("SListbox", "readonly", y.readonly),
+				invalid: e("SListbox", "invalid", y.invalid),
+				focusMode: i("SListbox", "focusMode", y.focusMode, ["roving", "activedescendant"]),
+				selectionMode: t,
+				clearOptionLabel: n
 			};
-		}), E = f(() => T.value.id), D = f(() => T.value.label), O = f(() => T.value.emptyLabel), k = f(() => T.value.variant), A = f(() => T.value.disabled), j = f(() => T.value.readonly), M = f(() => T.value.invalid), N = f(() => T.value.selectionMode), P = f(() => T.value.focusMode), F = f(() => T.value.clearOptionLabel), I = f(() => {
-			let e = te("SListbox", C.options);
+		}), S = l(() => x.value.id), Oe = l(() => x.value.label), ke = l(() => x.value.emptyLabel), C = l(() => x.value.variant), w = l(() => x.value.disabled), T = l(() => x.value.readonly), Ae = l(() => x.value.invalid), E = l(() => x.value.selectionMode), D = l(() => x.value.focusMode), O = l(() => x.value.clearOptionLabel), je = l(() => {
+			let e = ae("SListbox", y.options);
 			return {
 				inventory: e,
-				selectedTokens: c("SListbox", T.value.selectionMode, C.modelValue, e)
+				selectedTokens: o("SListbox", x.value.selectionMode, y.modelValue, e)
 			};
-		}), L = f(() => I.value.inventory), R = f(() => I.value.selectedTokens), z = f(() => k.value === "color" ? "color" : "select"), B = "clear-option", V = f(() => {
-			if (P.value === "roving") return;
-			if (N.value !== "single") throw Error("SListbox: activedescendant focus mode supports single selection only");
-			if (C.activeValue === void 0) throw TypeError("SListbox: activeValue is required in activedescendant focus mode");
-			if (C.activeValue === null) return null;
-			let e = o("SListbox", C.activeValue, "activeValue");
-			if (!L.value.optionsByToken.has(e)) throw Error("SListbox: activeValue does not match any option");
+		}), k = l(() => je.value.inventory), Me = l(() => je.value.selectedTokens), Ne = l(() => C.value === "color" ? "color" : "select"), Pe = l(() => {
+			if (D.value === "roving") return;
+			if (E.value !== "single") throw Error("SListbox: activedescendant focus mode supports single selection only");
+			if (y.activeValue === void 0) throw TypeError("SListbox: activeValue is required in activedescendant focus mode");
+			if (y.activeValue === null) return null;
+			let e = re("SListbox", y.activeValue, "activeValue");
+			if (!k.value.optionsByToken.has(e)) throw Error("SListbox: activeValue does not match any option");
 			return e;
-		});
-		function H(e) {
-			return `${E.value}-option-${encodeURIComponent(e)}`;
+		}), A = g({ kind: "controlled" }), j = [], M = g(), N = l(() => {
+			let e = Pe.value;
+			if (e === void 0) return;
+			let t = A.value;
+			return t.kind === "controlled" ? e : t.kind === "reset" ? null : t.token;
+		}), P = g(null), F = g(), I = g([]), L = l(() => {
+			let e = y.virtualization;
+			if (e === void 0) return;
+			if (typeof e != "object" || !e || Array.isArray(e)) throw TypeError("SListbox: virtualization must be an object");
+			let r = /* @__PURE__ */ new Set([
+				"viewportHeight",
+				"estimatedItemHeight",
+				"overscan"
+			]);
+			for (let t of Object.keys(e)) if (!r.has(t)) throw TypeError(`SListbox: virtualization.${t} is not part of the virtualization contract`);
+			if (C.value !== "select") throw Error("SListbox: virtualization supports the select variant only");
+			return {
+				viewportHeight: n("SListbox", "virtualization.viewportHeight", Reflect.get(e, "viewportHeight"), {
+					minimum: 1,
+					maximum: 1e5
+				}),
+				estimatedItemHeight: n("SListbox", "virtualization.estimatedItemHeight", Reflect.get(e, "estimatedItemHeight"), {
+					minimum: 1,
+					maximum: 1e5
+				}),
+				overscan: t("SListbox", "virtualization.overscan", Reflect.get(e, "overscan") === void 0 ? 8 : Reflect.get(e, "overscan"), {
+					minimum: 0,
+					maximum: 1e3
+				})
+			};
+		}), R = l(() => le(k.value, O.value, w.value)), z = l(() => R.value.navigation.filter((e) => !e.disabled)), B = g(null), Fe = g(0), V = g(0), Ie = l(() => V.value > 0 ? V.value : L.value?.viewportHeight ?? 0), H = null, U = de({
+			owner: "SListbox",
+			items: () => R.value.rows,
+			itemKey: (e) => e.key,
+			estimatedSize: () => L.value?.estimatedItemHeight ?? 1,
+			overscan: () => L.value?.overscan ?? 0,
+			scrollOffset: Fe,
+			viewportSize: Ie,
+			pinnedKeys: () => {
+				let e = D.value === "activedescendant" ? N.value : M.value;
+				return [.../* @__PURE__ */ new Set([
+					...e == null ? [] : [e],
+					...F.value === void 0 ? [] : [F.value],
+					...I.value
+				])];
+			},
+			observer: () => H
+		}), Le = l(() => L.value === void 0 ? R.value.entries : ue(R.value, U.visibleEntries.value.map((e) => e.item))), Re = l(() => L.value === void 0 || U.visibleEntries.value.some((e) => e.item.kind === "clear"));
+		function W(e, t = 0) {
+			if (L.value !== void 0) return U.offsets.value[e] - U.offsets.value[t];
 		}
-		function U(e) {
-			if (T.value.selectionMode === "multiple") {
-				if (!s(e)) throw TypeError("SListbox: multiple selection update must be an array");
-				c("SListbox update", "multiple", e, L.value), w("update:modelValue", e);
+		function ze(e) {
+			return `${S.value}-option-${encodeURIComponent(e)}`;
+		}
+		function Be(e) {
+			if (x.value.selectionMode === "multiple") {
+				if (!ie(e)) throw TypeError("SListbox: multiple selection update must be an array");
+				o("SListbox update", "multiple", e, k.value), b("update:modelValue", e);
 				return;
 			}
-			if (s(e)) throw TypeError("SListbox: single selection update must be a selection key or null");
-			c("SListbox update", "single", e, L.value), w("update:modelValue", e);
+			if (ie(e)) throw TypeError("SListbox: single selection update must be a selection key or null");
+			o("SListbox update", "single", e, k.value), b("update:modelValue", e);
 		}
-		function pe(e) {
-			return `${E.value}-${e.replace(/[^a-zA-Z0-9_-]/gu, "-")}-label`;
+		function Ve(e) {
+			let t = [...e].map((e) => e.codePointAt(0).toString(16)).join("-");
+			return `${S.value}-group-${t}-label`;
 		}
-		function W(e) {
-			if (A.value || j.value) return;
-			let t = L.value.optionsByToken.get(e);
+		function He(e) {
+			if (w.value || T.value) return;
+			let t = k.value.optionsByToken.get(e);
 			if (!t) throw Error("SListbox: attempted to select a stale option identity");
 			if (t.option.disabled) return;
-			if (N.value === "single") {
-				U(t.option.value);
+			if (E.value === "single") {
+				Be(t.option.value);
 				return;
 			}
-			if (!Array.isArray(C.modelValue)) throw TypeError("SListbox: multiple selection requires modelValue to be an array");
-			let n = [...C.modelValue], r = n.findIndex((t) => o("SListbox", t, "modelValue item") === e);
-			r >= 0 ? n.splice(r, 1) : n.push(t.option.value), U(n);
+			if (!Array.isArray(y.modelValue)) throw TypeError("SListbox: multiple selection requires modelValue to be an array");
+			let n = [...y.modelValue], r = n.findIndex((t) => re("SListbox", t, "modelValue item") === e);
+			r >= 0 ? n.splice(r, 1) : n.push(t.option.value), Be(n);
 		}
-		function me() {
-			if (!(A.value || j.value)) {
-				if (N.value !== "single") throw Error("SListbox: clear selection is available only in single selection mode");
-				U(null);
+		function Ue() {
+			if (!(w.value || T.value)) {
+				if (E.value !== "single") throw Error("SListbox: clear selection is available only in single selection mode");
+				Be(null);
 			}
 		}
-		let G = /* @__PURE__ */ new Set(), K = "", q;
-		function J() {
-			return [...G].filter((e) => !e.disabled() && e.element.isConnected).sort((e, t) => {
-				let n = e.element.compareDocumentPosition(t.element);
-				return n & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : n & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
-			});
-		}
-		function he() {
-			let e = J();
-			for (let e of G) e.element.tabIndex = -1;
-			if (P.value === "activedescendant") return;
-			let t = e.find((e) => e.selected()) ?? e[0];
-			t && (t.element.tabIndex = 0);
+		let G = /* @__PURE__ */ new Map(), K = "", q, J = !1, We = 0;
+		function Ge() {
+			return z.value.find((e) => e.token === "clear-option" ? y.modelValue === null : Me.value.has(e.token)) ?? z.value[0];
 		}
-		ae(ne, { register: (e) => (G.add(e), queueMicrotask(he), () => G.delete(e)) });
-		function Y(e) {
-			for (let e of G) e.element.tabIndex = -1;
-			e.element.tabIndex = 0, e.element.focus();
+		function Y() {
+			if (J) return;
+			for (let e of G.values()) e.element.tabIndex = -1;
+			if (D.value === "activedescendant") return;
+			let e = M.value === void 0 ? void 0 : R.value.navigationByToken.get(M.value), t = e && !e.disabled ? e : Ge();
+			M.value = t?.token;
+			let n = t === void 0 ? void 0 : G.get(t.token);
+			n && (n.element.tabIndex = 0);
 		}
-		function X(e) {
-			if (P.value !== "activedescendant") return;
-			let t = J().find((t) => t.token === e);
-			t && w("update:activeValue", $(t));
+		ge(oe, {
+			register: (e) => {
+				if (G.has(e.token)) throw Error("SListbox: duplicate mounted option registration");
+				G.set(e.token, e), U.registerRenderedItem(e.token, e.element);
+				let t = () => {
+					M.value = e.token, Y();
+				};
+				return e.element.addEventListener("focus", t), queueMicrotask(Y), () => {
+					e.element.removeEventListener("focus", t), G.delete(e.token), U.unregisterRenderedItem(e.token);
+				};
+			},
+			registerGeometry: (e, t) => (U.registerRenderedItem(e, t), () => U.unregisterRenderedItem(e))
+		});
+		function X() {
+			let e = B.value;
+			e && (Fe.value = Math.max(0, e.scrollTop), V.value = e.clientHeight);
 		}
 		function Z(e) {
-			let t = V.value;
-			return t == null ? void 0 : e.find((e) => e.token === t);
+			if (L.value === void 0) return;
+			let t = U.offsetForIndex(e.rowIndex), n = B.value;
+			t !== null && n && (n.scrollTop = Math.max(0, t), X());
 		}
-		function ge() {
-			if (P.value !== "activedescendant") throw Error("SListbox: initializeActive is available only in activedescendant focus mode");
-			let e = J(), t = Z(e) ?? e.find((e) => e.selected()) ?? e[0];
-			t && w("update:activeValue", $(t));
+		async function Ke(e) {
+			let t = ++We;
+			if (M.value = e.token, Z(e), G.has(e.token) || await m(), J || t !== We) return;
+			let n = G.get(e.token);
+			if (!n || !R.value.navigationByToken.has(e.token)) throw Error("SListbox: keyboard focus target became stale before mounting");
+			for (let e of G.values()) e.element.tabIndex = -1;
+			n.element.tabIndex = 0, n.element.focus();
 		}
-		function Q(e) {
-			if (P.value !== "activedescendant") throw Error("SListbox: moveActive is available only in activedescendant focus mode");
-			let t = J();
-			if (t.length === 0) return;
-			let n = Z(t), r = n === void 0 ? -1 : t.indexOf(n), i = t[e === "first" ? 0 : e === "last" ? t.length - 1 : e === "next" ? (Math.max(r, -1) + 1) % t.length : (r <= 0 ? t.length : r) - 1];
-			i && w("update:activeValue", $(i));
+		function Q() {
+			if (J) return;
+			let e = N.value, t = e == null ? void 0 : G.get(e), n = t?.element.isConnected ? t.element.id : null;
+			if (P.value !== n) {
+				let t = F.value;
+				t !== void 0 && (I.value = [.../* @__PURE__ */ new Set([...I.value, t])]), P.value = n, F.value = n === null || e === null ? void 0 : e, b("active-descendant-change", n), m(() => {
+					I.value = [];
+				});
+			}
 		}
-		function _e() {
-			if (P.value !== "activedescendant") throw Error("SListbox: selectActive is available only in activedescendant focus mode");
-			j.value || A.value || Z(J())?.activate();
+		function $(e) {
+			if (D.value !== "activedescendant") return;
+			let t = R.value.navigationByToken.get(e);
+			t && !t.disabled && (qe({
+				kind: "target",
+				token: e
+			}), Z(t), b("update:activeValue", t.value), m(Q));
 		}
-		function ve(e, t) {
-			return e.find((e) => e.element === t.target) ?? e.find((e) => e.element === document.activeElement) ?? e.find((e) => e.element.tabIndex === 0);
+		function qe(e) {
+			let t = j.findIndex((t) => e.kind === "reset" ? t.kind === "reset" : t.kind === "target" && t.token === e.token);
+			t >= 0 && j.splice(t, 1), j.push(e), A.value = e.kind === "reset" ? { kind: "reset" } : {
+				kind: "requested",
+				token: e.token
+			};
 		}
-		function $(e) {
-			if (e.token === B) return null;
-			let t = L.value.optionsByToken.get(e.token);
-			if (!t) throw Error(`SListbox: registered option token ${JSON.stringify(e.token)} is stale`);
-			return t.option.value;
+		function Je() {
+			if (D.value !== "activedescendant") throw Error("SListbox: initializeActive is available only in activedescendant focus mode");
+			let e = N.value, t = e == null ? void 0 : R.value.navigationByToken.get(e), n = t && !t.disabled ? t : Ge();
+			n && $(n.token);
+		}
+		function Ye(e) {
+			if (D.value !== "activedescendant") throw Error("SListbox: moveActive is available only in activedescendant focus mode");
+			i("SListbox", "moveActive intent", e, [
+				"next",
+				"previous",
+				"first",
+				"last"
+			]);
+			let t = $e(e, N.value);
+			t && $(t.token);
 		}
-		function ye(e) {
-			if (P.value === "activedescendant") return;
+		function Xe() {
+			if (D.value !== "activedescendant") throw Error("SListbox: selectActive is available only in activedescendant focus mode");
+			let e = N.value;
+			e != null && Qe(e);
+		}
+		function Ze() {
+			if (D.value !== "activedescendant") throw Error("SListbox: resetActive is available only in activedescendant focus mode");
+			qe({ kind: "reset" }), b("update:activeValue", null), m(Q);
+		}
+		function Qe(e) {
+			e === "clear-option" ? Ue() : He(e);
+		}
+		function $e(e, t) {
+			let n = z.value, r = n.findIndex((e) => e.token === t);
+			return n[e === "first" ? 0 : e === "last" ? n.length - 1 : e === "next" ? (r + 1) % n.length : (r <= 0 ? n.length : r) - 1];
+		}
+		function et(e) {
+			let t = ([...G.values()].find((t) => t.element === e.target) ?? [...G.values()].find((e) => e.element === document.activeElement))?.token ?? M.value;
+			return t === void 0 ? void 0 : R.value.navigationByToken.get(t);
+		}
+		function tt(e) {
+			if (D.value === "activedescendant") return;
 			if (e.key === "Tab") {
-				w("tab", e);
+				b("tab", e);
 				return;
 			}
 			if (e.key === "Escape") {
-				e.preventDefault(), w("escape");
+				e.preventDefault(), b("escape");
 				return;
 			}
-			if (A.value) return;
-			let t = J(), n = ve(t, e);
-			if (n && (w("option-keydown", {
-				value: $(n),
+			if (w.value) return;
+			let t = z.value, n = et(e);
+			if (n && (b("option-keydown", {
+				value: n.value,
 				event: e
 			}), e.defaultPrevented)) return;
 			if (e.key === "Enter" || e.key === " ") {
-				if (j.value || !n) return;
-				e.preventDefault(), n.activate();
+				if (T.value || !n) return;
+				e.preventDefault(), Qe(n.token);
 				return;
 			}
 			if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
 				K += e.key.toLocaleLowerCase(), q && clearTimeout(q), q = setTimeout(() => {
 					K = "", q = void 0;
 				}, 500);
-				let r = [...K].every((e) => e === K[0]) ? K[0] : K, i = n === void 0 ? -1 : t.indexOf(n), a = (i >= 0 ? [...t.slice(i + 1), ...t.slice(0, i + 1)] : t).find((e) => e.label().toLocaleLowerCase().startsWith(r));
-				a && (e.preventDefault(), Y(a));
+				let r = [...K].every((e) => e === K[0]) ? K[0] : K, i = n === void 0 ? -1 : t.indexOf(n), a = (i >= 0 ? [...t.slice(i + 1), ...t.slice(0, i + 1)] : t).find((e) => e.label.toLocaleLowerCase().startsWith(r));
+				a && (e.preventDefault(), Ke(a));
 				return;
 			}
 			if (![
@@ -220,49 +328,102 @@ var b = [
 				"End"
 			].includes(e.key) || t.length === 0) return;
 			let r = n === void 0 ? -1 : t.indexOf(n), i = t[e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : e.key === "ArrowDown" ? (Math.max(r, -1) + 1) % t.length : (r <= 0 ? t.length : r) - 1];
-			i && (e.preventDefault(), Y(i));
+			i && (e.preventDefault(), Ke(i));
 		}
-		function be() {
-			if (P.value !== "roving") throw Error("SListbox: focusSelectedOrFirst is available only in roving focus mode");
-			let e = J(), t = e.find((e) => e.selected()) ?? e[0];
-			t && Y(t);
+		function nt() {
+			if (D.value !== "roving") throw Error("SListbox: focusSelectedOrFirst is available only in roving focus mode");
+			let e = Ge();
+			e && Ke(e);
 		}
-		return ie(() => {
-			q && clearTimeout(q);
-		}), x({
-			focusSelectedOrFirst: be,
-			initializeActive: ge,
-			moveActive: Q,
-			selectActive: _e
-		}), (e, t) => (_(), h("ul", re(se(de).bindings(), {
-			id: E.value,
+		v(() => y.activeValue, (e) => {
+			let t = e == null ? e : re("SListbox", e, "activeValue"), n = j.findIndex((e) => e.kind === "reset" || e.token === "clear-option" ? t === null : e.token === t), r = j[n];
+			if (r !== void 0) {
+				j.splice(0, n + 1);
+				let e = j[j.length - 1], t = e ?? r;
+				A.value = t.kind === "reset" ? { kind: "reset" } : {
+					kind: e === void 0 ? "acknowledged" : "requested",
+					token: t.token
+				};
+			} else j.length = 0, A.value = { kind: "controlled" };
+		}, { flush: "sync" }), v(N, (e) => {
+			let t = e == null ? void 0 : R.value.navigationByToken.get(e);
+			t && !t.disabled && Z(t), m(Q);
+		}, { flush: "post" }), v(() => U.itemKeys.value, (e) => {
+			U.prune(e);
+			let t = A.value;
+			if ((t.kind === "requested" || t.kind === "acknowledged") && !R.value.navigationByToken.has(t.token)) throw Error("SListbox: requested or acknowledged active option does not match any option");
+			queueMicrotask(Y), m(Q);
+		}, { flush: "sync" });
+		function rt() {
+			if (H?.disconnect(), H = null, !J && typeof ResizeObserver < "u" && L.value !== void 0) {
+				H = new ResizeObserver((e) => {
+					let t = D.value === "activedescendant" ? N.value : M.value, n = t == null ? void 0 : R.value.navigationByToken.get(t), r = n !== void 0 && U.offsetForIndex(n.rowIndex) === null, i = e.filter((e) => e.target !== B.value), a = U.measureItems(i);
+					X(), r && n && (a || e.some((e) => e.target === B.value)) && Z(n);
+				}), B.value && H.observe(B.value);
+				for (let e of U.renderedItemsByKey.values()) H.observe(e);
+			}
+		}
+		return v(L, () => {
+			rt(), X();
+		}, { flush: "post" }), he(() => {
+			X(), rt(), Y();
+			let e = D.value === "activedescendant" ? N.value : M.value, t = e == null ? void 0 : R.value.navigationByToken.get(e);
+			t && Z(t), m(Q);
+		}), me(() => {
+			J = !0, We += 1, q && clearTimeout(q), H?.disconnect(), U.clear(), P.value !== null && b("active-descendant-change", null);
+		}), Ce({
+			focusSelectedOrFirst: nt,
+			initializeActive: Je,
+			moveActive: Ye,
+			selectActive: Xe,
+			resetActive: Ze,
+			activeOptionId: P
+		}), (e, t) => (h(), f("ul", fe(_(Ee).bindings(), {
+			ref_key: "viewport",
+			ref: B,
+			id: S.value,
 			class: "s-listbox",
-			"data-variant": k.value,
-			"data-invalid": M.value || void 0,
-			"data-readonly": j.value || void 0,
-			"data-focus-mode": P.value,
+			"data-variant": C.value,
+			"data-invalid": Ae.value || void 0,
+			"data-readonly": T.value || void 0,
+			"data-focus-mode": D.value,
+			"data-virtualized": L.value !== void 0 || void 0,
+			style: L.value === void 0 ? void 0 : { height: `${L.value.viewportHeight}px` },
 			role: "listbox",
-			"aria-label": D.value,
-			"aria-multiselectable": N.value === "multiple" || void 0,
-			"aria-disabled": A.value || void 0,
-			"aria-readonly": j.value || void 0,
-			"aria-invalid": M.value || void 0,
-			onKeydown: ye
+			"aria-label": Oe.value,
+			"aria-multiselectable": E.value === "multiple" || void 0,
+			"aria-disabled": w.value || void 0,
+			"aria-readonly": T.value || void 0,
+			"aria-invalid": Ae.value || void 0,
+			tabindex: D.value === "activedescendant" ? -1 : w.value && L.value ? 0 : void 0,
+			onKeydown: tt,
+			onScrollPassive: X
 		}), [
-			F.value ? (_(), p(u, {
+			L.value ? (h(), f("li", {
 				key: 0,
-				"registration-token": B,
-				id: H(B),
-				label: F.value,
-				title: F.value,
-				selected: g.modelValue === null,
-				disabled: A.value,
-				appearance: z.value,
-				active: V.value === B,
-				"focus-on-select": P.value === "roving",
-				onHover: t[0] ||= (e) => X(B),
-				onSelect: me
+				class: "s-listbox__spacer",
+				role: "presentation",
+				"aria-hidden": "true",
+				style: pe({ height: `${_(U).totalHeight.value}px` })
+			}, null, 4)) : d("", !0),
+			O.value && Re.value ? (h(), u(ce, {
+				key: 1,
+				"registration-token": _(s),
+				id: ze(_(s)),
+				label: O.value,
+				title: O.value,
+				selected: p.modelValue === null,
+				disabled: w.value,
+				appearance: Ne.value,
+				active: N.value === _(s),
+				"focus-on-select": D.value === "roving",
+				position: L.value ? 1 : void 0,
+				"set-size": L.value ? R.value.setSize : void 0,
+				"virtual-offset": L.value ? 0 : void 0,
+				onHover: t[0] ||= (e) => $(_("clear-option")),
+				onSelect: Ue
 			}, null, 8, [
+				"registration-token",
 				"id",
 				"label",
 				"title",
@@ -270,22 +431,28 @@ var b = [
 				"disabled",
 				"appearance",
 				"active",
-				"focus-on-select"
-			])) : m("", !0),
-			(_(!0), h(d, null, v(L.value.entries, (e) => (_(), h(d, { key: e.token }, [e.kind === "option" ? (_(), p(u, {
+				"focus-on-select",
+				"position",
+				"set-size",
+				"virtual-offset"
+			])) : d("", !0),
+			(h(!0), f(c, null, _e(Le.value, (e) => (h(), f(c, { key: e.token }, [e.kind === "option" ? (h(), u(ce, {
 				key: 0,
 				"registration-token": e.record.token,
-				id: H(e.record.token),
+				id: ze(e.record.token),
 				label: e.record.option.label,
 				title: e.record.option.title ?? e.record.option.label,
-				selected: R.value.has(e.record.token),
-				disabled: A.value || e.record.option.disabled,
+				selected: Me.value.has(e.record.token),
+				disabled: w.value || e.record.option.disabled,
 				marker: e.record.option.marker,
-				appearance: z.value,
-				active: V.value === e.record.token,
-				"focus-on-select": P.value === "roving",
-				onHover: (t) => X(e.record.token),
-				onSelect: (t) => W(e.record.token)
+				appearance: Ne.value,
+				active: N.value === e.record.token,
+				"focus-on-select": D.value === "roving",
+				position: L.value ? e.record.position : void 0,
+				"set-size": L.value ? R.value.setSize : void 0,
+				"virtual-offset": W(e.record.rowIndex),
+				onHover: (t) => $(e.record.token),
+				onSelect: (t) => He(e.record.token)
 			}, null, 8, [
 				"registration-token",
 				"id",
@@ -297,28 +464,37 @@ var b = [
 				"appearance",
 				"active",
 				"focus-on-select",
+				"position",
+				"set-size",
+				"virtual-offset",
 				"onHover",
 				"onSelect"
-			])) : (_(), p(l, {
+			])) : (h(), u(se, {
 				key: 1,
 				label: e.label,
-				"label-id": pe(e.token),
-				variant: k.value
+				"label-id": Ve(e.token),
+				variant: C.value,
+				"registration-token": e.token,
+				"virtual-offset": W(e.headerIndex),
+				"virtual-height": L.value ? _(U).offsets.value[e.endIndex] - _(U).offsets.value[e.headerIndex] : void 0
 			}, {
-				default: y(() => [(_(!0), h(d, null, v(e.records, (e) => (_(), p(u, {
-					key: e.token,
-					"registration-token": e.token,
-					id: H(e.token),
-					label: e.option.label,
-					title: e.option.title ?? e.option.label,
-					selected: R.value.has(e.token),
-					disabled: A.value || e.option.disabled,
-					marker: e.option.marker,
-					appearance: z.value,
-					active: V.value === e.token,
-					"focus-on-select": P.value === "roving",
-					onHover: (t) => X(e.token),
-					onSelect: (t) => W(e.token)
+				default: be(() => [(h(!0), f(c, null, _e(e.records, (t) => (h(), u(ce, {
+					key: t.token,
+					"registration-token": t.token,
+					id: ze(t.token),
+					label: t.option.label,
+					title: t.option.title ?? t.option.label,
+					selected: Me.value.has(t.token),
+					disabled: w.value || t.option.disabled,
+					marker: t.option.marker,
+					appearance: Ne.value,
+					active: N.value === t.token,
+					"focus-on-select": D.value === "roving",
+					position: L.value ? t.position : void 0,
+					"set-size": L.value ? R.value.setSize : void 0,
+					"virtual-offset": W(t.rowIndex, e.headerIndex),
+					onHover: (e) => $(t.token),
+					onSelect: (e) => He(t.token)
 				}, null, 8, [
 					"registration-token",
 					"id",
@@ -330,6 +506,9 @@ var b = [
 					"appearance",
 					"active",
 					"focus-on-select",
+					"position",
+					"set-size",
+					"virtual-offset",
 					"onHover",
 					"onSelect"
 				]))), 128))]),
@@ -337,11 +516,14 @@ var b = [
 			}, 1032, [
 				"label",
 				"label-id",
-				"variant"
+				"variant",
+				"registration-token",
+				"virtual-offset",
+				"virtual-height"
 			]))], 64))), 128)),
-			L.value.options.length === 0 && !F.value ? (_(), h("li", le, oe(O.value), 1)) : m("", !0)
-		], 16, b));
+			k.value.options.length === 0 && !O.value ? (h(), f("li", Se, ve(ke.value), 1)) : d("", !0)
+		], 16, xe));
 	}
 });
 //#endregion
-export { x as default };
+export { Ce as default };