@pdanpdan/virtual-scroll 0.10.0 → 0.10.2

package/dist/index.mjs

@@ -57,7 +57,7 @@ function scrollTo(e, t) {
 	isWindow(e) ? window.scrollTo(t) : e != null && isScrollableElement(e) && (typeof e.scrollTo == "function" ? e.scrollTo(t) : (t.left !== void 0 && (e.scrollLeft = t.left), t.top !== void 0 && (e.scrollTop = t.top)));
 }
 function isScrollToIndexOptions(e) {
-	return typeof e == "object" && !!e && ("align" in e || "behavior" in e || "isCorrection" in e);
+	return typeof e == "object" && !!e && ("align" in e || "behavior" in e || "isCorrection" in e || "dryRun" in e);
 }
 function getPaddingX(e, t) {
 	return typeof e == "object" && e ? e.x || 0 : (t === "horizontal" || t === "both") && e || 0;
@@ -188,14 +188,14 @@ function displayToVirtual(e, t, n) {
 function virtualToDisplay(e, t, n) {
 	return e / n + t;
 }
-function calculateScrollTarget({ rowIndex: e, colIndex: t, options: n, direction: r, viewportWidth: i, viewportHeight: a, totalWidth: o, totalHeight: s, gap: c, columnGap: l, fixedSize: u, fixedWidth: d, relativeScrollX: f, relativeScrollY: p, getItemSizeY: m, getItemSizeX: h, getItemQueryY: g, getItemQueryX: _, getColumnSize: v, getColumnQuery: y, scaleX: b, scaleY: x, hostOffsetX: S, hostOffsetY: C, stickyIndices: w, stickyStartX: T = 0, stickyStartY: E = 0, stickyEndX: D = 0, stickyEndY: te = 0, flowPaddingStartX: ne = 0, flowPaddingStartY: O = 0, paddingStartX: k = 0, paddingStartY: A = 0, paddingEndX: re = 0, paddingEndY: ie = 0 }) {
-	let j;
-	j = isScrollToIndexOptions(n) ? n.align : n;
-	let N = (j && typeof j == "object" ? j.x : j) || "auto", ae = (j && typeof j == "object" ? j.y : j) || "auto", oe = f, se = p, ce = 0, le = 0, de = "auto", fe = "auto", P = b === 1 ? o : BROWSER_MAX_SIZE, F = x === 1 ? s : BROWSER_MAX_SIZE, pe = Math.max(0, S + P - i), me = Math.max(0, C + F - a), I = (pe - S) * b, L = (me - C) * x, he = ne + T + k, z = O + E + A;
+function calculateScrollTarget({ rowIndex: e, colIndex: t, options: n, direction: r, viewportWidth: i, viewportHeight: a, totalWidth: o, totalHeight: s, gap: c, columnGap: l, fixedSize: u, fixedWidth: d, relativeScrollX: f, relativeScrollY: p, getItemSizeY: m, getItemSizeX: h, getItemQueryY: g, getItemQueryX: _, getColumnSize: v, getColumnQuery: y, scaleX: b, scaleY: x, hostOffsetX: S, hostOffsetY: C, stickyIndices: w, stickyStartX: T = 0, stickyStartY: E = 0, stickyEndX: D = 0, stickyEndY: O = 0, flowPaddingStartX: te = 0, flowPaddingStartY: k = 0, paddingStartX: A = 0, paddingStartY: j = 0, paddingEndX: ne = 0, paddingEndY: re = 0 }) {
+	let M;
+	M = isScrollToIndexOptions(n) ? n.align : n;
+	let P = (M && typeof M == "object" ? M.x : M) || "auto", ie = (M && typeof M == "object" ? M.y : M) || "auto", ae = f, oe = p, se = 0, ce = 0, ue = "auto", de = "auto", F = b === 1 ? o : BROWSER_MAX_SIZE, I = x === 1 ? s : BROWSER_MAX_SIZE, fe = Math.max(0, S + F - i), pe = Math.max(0, C + I - a), L = (fe - S) * b, R = (pe - C) * x, me = te + T + A, B = k + E + j;
 	if (e != null) {
 		let t = calculateAxisTarget({
 			index: e,
-			align: ae,
+			align: ie,
 			viewSize: a,
 			scrollPos: p,
 			fixedSize: u,
@@ -203,15 +203,15 @@ function calculateScrollTarget({ rowIndex: e, colIndex: t, options: n, direction
 			query: g,
 			getSize: m,
 			stickyIndices: w,
-			stickyStart: E + A,
-			stickyEnd: te + ie
+			stickyStart: E + j,
+			stickyEnd: O + re
 		});
-		se = t.target + z, le = t.itemSize, fe = t.effectiveAlign;
+		oe = t.target + B, ce = t.itemSize, de = t.effectiveAlign;
 	}
 	if (t != null) {
 		let e = r === "both", n = calculateAxisTarget({
 			index: t,
-			align: N,
+			align: P,
 			viewSize: i,
 			scrollPos: f,
 			fixedSize: e ? d : u,
@@ -219,18 +219,18 @@ function calculateScrollTarget({ rowIndex: e, colIndex: t, options: n, direction
 			query: e ? y : _,
 			getSize: e ? v : h,
 			stickyIndices: w,
-			stickyStart: T + k,
-			stickyEnd: D + re
+			stickyStart: T + A,
+			stickyEnd: D + ne
 		});
-		oe = n.target + he, ce = n.itemSize, de = n.effectiveAlign;
+		ae = n.target + me, se = n.itemSize, ue = n.effectiveAlign;
 	}
-	return oe = Math.max(0, Math.min(oe, I)), se = Math.max(0, Math.min(se, L)), {
-		targetX: oe,
-		targetY: se,
-		itemWidth: ce,
-		itemHeight: le,
-		effectiveAlignX: de,
-		effectiveAlignY: fe
+	return ae = Math.max(0, Math.min(ae, L)), oe = Math.max(0, Math.min(oe, R)), {
+		targetX: ae,
+		targetY: oe,
+		itemWidth: se,
+		itemHeight: ce,
+		effectiveAlignX: ue,
+		effectiveAlignY: de
 	};
 }
 function calculateRange({ direction: e, relativeScrollX: t, relativeScrollY: n, usableWidth: r, usableHeight: i, itemsLength: a, bufferBefore: o, bufferAfter: s, gap: c, columnGap: l, fixedSize: u, findLowerBoundY: d, findLowerBoundX: f, queryY: p, queryX: m }) {
@@ -364,19 +364,25 @@ function resolveSnap(e, t, n, r, i, a, o, s, c, l) {
 	if (e === "auto") if (t === "start") u = "end";
 	else if (t === "end") u = "start";
 	else return null;
-	if (e === "next") {
-		if (t === "start") u = "end";
-		else if (t === "end") u = "start";
-		else return null;
-		if (u === "start") return s(n) > a ? null : {
+	if (e === "next") if (t === "end") {
+		let e = s(n);
+		return e > a ? null : i - c(n) <= Math.min(5, e * .1) ? {
+			index: n,
+			align: "start"
+		} : {
 			index: Math.min(o - 1, n + 1),
 			align: "start"
 		};
-		if (u === "end") return s(r) > a ? null : {
+	} else if (t === "start") {
+		let e = s(r);
+		return e > a ? null : c(r) + e - (i + a) <= Math.min(5, e * .1) ? {
+			index: r,
+			align: "end"
+		} : {
 			index: Math.max(0, r - 1),
 			align: "end"
 		};
-	}
+	} else return null;
 	if (u === "start") {
 		let e = s(n);
 		if (e > a) return null;
@@ -570,47 +576,47 @@ function useVirtualScroll(e, n = []) {
 	}), S = reactive({
 		x: 0,
 		y: 0
-	}), C, w = ref(1), E = ref(1), D = ref(null), te = ref(null), O = ref(null), k = ref(!1), A, re = () => {
-		k.value = !1, clearTimeout(A), O.value = null;
-	}, ie = 0, j = 0, M = computed(() => [
+	}), C, w = ref(1), E = ref(1), D = ref(null), O = ref(null), k = ref(null), A = ref(!1), j, ne = () => {
+		A.value = !1, clearTimeout(j), k.value = null;
+	}, re = 0, M = 0, N = computed(() => [
 		"vertical",
 		"horizontal",
 		"both"
-	].includes(r.value.direction) ? r.value.direction : "vertical"), N = computed(() => r.value.itemSize === void 0 || r.value.itemSize === null || r.value.itemSize === 0), ae = computed(() => r.value.columnWidth === void 0 || r.value.columnWidth === null || r.value.columnWidth === 0), P = computed(() => typeof r.value.itemSize == "number" && r.value.itemSize > 0 ? r.value.itemSize : null), F = computed(() => typeof r.value.columnWidth == "number" && r.value.columnWidth > 0 ? r.value.columnWidth : null), me = computed(() => r.value.defaultItemSize || P.value || 40), { itemSizesX: I, itemSizesY: R, columnSizes: z, measuredColumns: ge, measuredItemsY: B, treeUpdateFlag: we, getSizeAt: Ee, getItemBaseSize: De, initializeSizes: Oe, updateItemSizes: ke, refresh: je } = useVirtualScrollSizes(computed(() => ({
+	].includes(r.value.direction) ? r.value.direction : "vertical"), P = computed(() => r.value.itemSize === void 0 || r.value.itemSize === null || r.value.itemSize === 0), ie = computed(() => r.value.columnWidth === void 0 || r.value.columnWidth === null || r.value.columnWidth === 0), F = computed(() => typeof r.value.itemSize == "number" && r.value.itemSize > 0 ? r.value.itemSize : null), I = computed(() => typeof r.value.columnWidth == "number" && r.value.columnWidth > 0 ? r.value.columnWidth : null), pe = computed(() => r.value.defaultItemSize || F.value || 40), { itemSizesX: L, itemSizesY: z, columnSizes: B, measuredColumns: he, measuredItemsY: V, treeUpdateFlag: Ce, getSizeAt: Te, getItemBaseSize: Ee, initializeSizes: De, updateItemSizes: Oe, refresh: Ae } = useVirtualScrollSizes(computed(() => ({
 		props: r.value,
-		isDynamicItemSize: N.value,
-		isDynamicColumnWidth: ae.value,
-		defaultSize: me.value,
-		fixedItemSize: P.value,
-		direction: M.value
-	}))), Ne = computed(() => getPaddingX(r.value.scrollPaddingStart, r.value.direction)), Pe = computed(() => getPaddingX(r.value.scrollPaddingEnd, r.value.direction)), Fe = computed(() => getPaddingY(r.value.scrollPaddingStart, r.value.direction)), Ie = computed(() => getPaddingY(r.value.scrollPaddingEnd, r.value.direction)), H = computed(() => getPaddingX(r.value.stickyStart, r.value.direction)), Le = computed(() => getPaddingX(r.value.stickyEnd, r.value.direction)), U = computed(() => getPaddingY(r.value.stickyStart, r.value.direction)), Re = computed(() => getPaddingY(r.value.stickyEnd, r.value.direction)), W = computed(() => getPaddingX(r.value.flowPaddingStart, r.value.direction)), ze = computed(() => getPaddingX(r.value.flowPaddingEnd, r.value.direction)), Be = computed(() => getPaddingY(r.value.flowPaddingStart, r.value.direction)), Ve = computed(() => getPaddingY(r.value.flowPaddingEnd, r.value.direction)), He = computed(() => y.value - (M.value === "vertical" ? 0 : H.value + Le.value)), Ue = computed(() => b.value - (M.value === "horizontal" ? 0 : U.value + Re.value)), We = computed(() => (we.value, calculateTotalSize({
-		direction: M.value,
+		isDynamicItemSize: P.value,
+		isDynamicColumnWidth: ie.value,
+		defaultSize: pe.value,
+		fixedItemSize: F.value,
+		direction: N.value
+	}))), Me = computed(() => getPaddingX(r.value.scrollPaddingStart, r.value.direction)), Ne = computed(() => getPaddingX(r.value.scrollPaddingEnd, r.value.direction)), Pe = computed(() => getPaddingY(r.value.scrollPaddingStart, r.value.direction)), Fe = computed(() => getPaddingY(r.value.scrollPaddingEnd, r.value.direction)), U = computed(() => getPaddingX(r.value.stickyStart, r.value.direction)), Ie = computed(() => getPaddingX(r.value.stickyEnd, r.value.direction)), W = computed(() => getPaddingY(r.value.stickyStart, r.value.direction)), Le = computed(() => getPaddingY(r.value.stickyEnd, r.value.direction)), Re = computed(() => getPaddingX(r.value.flowPaddingStart, r.value.direction)), ze = computed(() => getPaddingX(r.value.flowPaddingEnd, r.value.direction)), Be = computed(() => getPaddingY(r.value.flowPaddingStart, r.value.direction)), Ve = computed(() => getPaddingY(r.value.flowPaddingEnd, r.value.direction)), He = computed(() => y.value - (N.value === "vertical" ? 0 : U.value + Ie.value)), Ue = computed(() => b.value - (N.value === "horizontal" ? 0 : W.value + Le.value)), We = computed(() => (Ce.value, calculateTotalSize({
+		direction: N.value,
 		itemsLength: r.value.items.length,
 		columnCount: r.value.columnCount || 0,
-		fixedSize: P.value,
-		fixedWidth: F.value,
+		fixedSize: F.value,
+		fixedWidth: I.value,
 		gap: r.value.gap || 0,
 		columnGap: r.value.columnGap || 0,
 		usableWidth: He.value,
 		usableHeight: Ue.value,
-		queryY: (e) => R.query(e),
-		queryX: (e) => I.query(e),
-		queryColumn: (e) => z.query(e)
-	}))), Ge = computed(() => isWindowLike(r.value.container)), Ke = computed(() => We.value.width + Ne.value + Pe.value), qe = computed(() => We.value.height + Fe.value + Ie.value), G = computed(() => W.value + H.value + Le.value + ze.value + Ke.value), Je = computed(() => Be.value + U.value + Re.value + Ve.value + qe.value), K = reactive({
-		x: computed(() => Math.max(0, x.x - (W.value + H.value))),
-		y: computed(() => Math.max(0, x.y - (Be.value + U.value)))
+		queryY: (e) => z.query(e),
+		queryX: (e) => L.query(e),
+		queryColumn: (e) => B.query(e)
+	}))), Ge = computed(() => isWindowLike(r.value.container)), Ke = computed(() => We.value.width + Me.value + Ne.value), qe = computed(() => We.value.height + Pe.value + Fe.value), G = computed(() => Re.value + U.value + Ie.value + ze.value + Ke.value), Je = computed(() => Be.value + W.value + Le.value + Ve.value + qe.value), K = reactive({
+		x: computed(() => Math.max(0, x.x - (Re.value + U.value))),
+		y: computed(() => Math.max(0, x.y - (Be.value + W.value)))
 	}), Ye = computed(() => calculateRenderedSize(Ge.value, G.value)), Xe = computed(() => calculateRenderedSize(Ge.value, Je.value)), Ze = computed(() => calculateRenderedSize(Ge.value, Ke.value)), Qe = computed(() => calculateRenderedSize(Ge.value, qe.value)), q = computed(() => {
-		if (M.value === "vertical") return 0;
-		let e = W.value + H.value + Ne.value;
+		if (N.value === "vertical") return 0;
+		let e = Re.value + U.value + Me.value;
 		return o.value - e;
 	}), J = computed(() => {
-		if (M.value === "horizontal") return 0;
-		let e = Be.value + U.value + Fe.value;
+		if (N.value === "horizontal") return 0;
+		let e = Be.value + W.value + Pe.value;
 		return c.value - e;
 	}), Y = (e) => {
-		let t = M.value === "horizontal";
-		return calculateIndexAt(e, P.value, t ? r.value.columnGap || 0 : r.value.gap || 0, (e) => t ? I.findLowerBound(e) : R.findLowerBound(e));
-	}, $e = (e) => M.value === "both" ? calculateIndexAt(e, F.value, r.value.columnGap || 0, (e) => z.findLowerBound(e)) : M.value === "horizontal" ? Y(e) : 0, et = (e) => M.value === "both" ? Ee(e, r.value.columnWidth, r.value.defaultColumnWidth || 100, r.value.columnGap || 0, z, !0) : Ee(e, r.value.itemSize, r.value.defaultItemSize || 40, r.value.columnGap || 0, I, !0), tt = (e) => M.value === "horizontal" ? Ue.value : Ee(e, r.value.itemSize, r.value.defaultItemSize || 40, r.value.gap || 0, R, !1), nt = (e) => M.value === "horizontal" ? W.value + H.value + Ne.value + calculateOffsetAt(e, P.value, r.value.columnGap || 0, (e) => I.query(e)) : Be.value + U.value + Fe.value + calculateOffsetAt(e, P.value, r.value.gap || 0, (e) => R.query(e)), rt = (e) => M.value === "horizontal" ? et(e) : tt(e), X = () => {
+		let t = N.value === "horizontal";
+		return calculateIndexAt(e, F.value, t ? r.value.columnGap || 0 : r.value.gap || 0, (e) => t ? L.findLowerBound(e) : z.findLowerBound(e));
+	}, $e = (e) => N.value === "both" ? calculateIndexAt(e, I.value, r.value.columnGap || 0, (e) => B.findLowerBound(e)) : N.value === "horizontal" ? Y(e) : 0, et = (e) => N.value === "both" ? Te(e, r.value.columnWidth, r.value.defaultColumnWidth || 100, r.value.columnGap || 0, B, !0) : Te(e, r.value.itemSize, r.value.defaultItemSize || 40, r.value.columnGap || 0, L, !0), tt = (e) => N.value === "horizontal" ? Ue.value : Te(e, r.value.itemSize, r.value.defaultItemSize || 40, r.value.gap || 0, z, !1), nt = (e) => N.value === "horizontal" ? Re.value + U.value + Me.value + calculateOffsetAt(e, F.value, r.value.columnGap || 0, (e) => L.query(e)) : Be.value + W.value + Pe.value + calculateOffsetAt(e, F.value, r.value.gap || 0, (e) => z.query(e)), rt = (e) => N.value === "horizontal" ? et(e) : tt(e), X = () => {
 		if (typeof window > "u") return;
 		let e = r.value.container || r.value.hostRef || window, t = isElement(e) ? e : document.documentElement, n = window.getComputedStyle(t).direction === "rtl";
 		g.value !== n && (g.value = n);
@@ -620,84 +626,93 @@ function useVirtualScroll(e, n = []) {
 		});
 	};
 	function at(e, t, n) {
-		let s = typeof n == "object" && n && "isCorrection" in n ? n.isCorrection : !1, l = r.value.container || window, { targetX: u, targetY: d, effectiveAlignX: f, effectiveAlignY: p } = calculateScrollTarget({
+		let s = isScrollToIndexOptions(n) ? n.isCorrection : !1, l = isScrollToIndexOptions(n) ? n.dryRun : !1, u = r.value.container || window, { targetX: d, targetY: f, effectiveAlignX: p, effectiveAlignY: m } = calculateScrollTarget({
 			rowIndex: e,
 			colIndex: t,
 			options: n,
-			direction: M.value,
+			direction: N.value,
 			viewportWidth: y.value,
 			viewportHeight: b.value,
 			totalWidth: G.value,
 			totalHeight: Je.value,
 			gap: r.value.gap || 0,
 			columnGap: r.value.columnGap || 0,
-			fixedSize: P.value,
-			fixedWidth: F.value,
+			fixedSize: F.value,
+			fixedWidth: I.value,
 			relativeScrollX: q.value,
 			relativeScrollY: J.value,
-			getItemSizeY: (e) => R.get(e),
-			getItemSizeX: (e) => I.get(e),
-			getItemQueryY: (e) => R.query(e),
-			getItemQueryX: (e) => I.query(e),
-			getColumnSize: (e) => z.get(e),
-			getColumnQuery: (e) => z.query(e),
+			getItemSizeY: (e) => z.get(e),
+			getItemSizeX: (e) => L.get(e),
+			getItemQueryY: (e) => z.query(e),
+			getItemQueryX: (e) => L.query(e),
+			getColumnSize: (e) => B.get(e),
+			getColumnQuery: (e) => B.query(e),
 			scaleX: w.value,
 			scaleY: E.value,
 			hostOffsetX: K.x,
 			hostOffsetY: K.y,
 			stickyIndices: r.value.stickyIndices || [],
-			stickyStartX: H.value,
-			stickyStartY: U.value,
-			stickyEndX: Le.value,
-			stickyEndY: Re.value,
-			flowPaddingStartX: W.value,
+			stickyStartX: U.value,
+			stickyStartY: W.value,
+			stickyEndX: Ie.value,
+			stickyEndY: Le.value,
+			flowPaddingStartX: Re.value,
 			flowPaddingStartY: Be.value,
-			paddingStartX: Ne.value,
-			paddingStartY: Fe.value,
-			paddingEndX: Pe.value,
-			paddingEndY: Ie.value
+			paddingStartX: Me.value,
+			paddingStartY: Pe.value,
+			paddingEndX: Ne.value,
+			paddingEndY: Fe.value
 		});
-		if (!s) {
+		if (!s && !l) {
 			let r = isScrollToIndexOptions(n) ? n.behavior : void 0;
-			O.value = {
+			k.value = {
 				rowIndex: e,
 				colIndex: t,
 				options: {
 					align: {
-						x: f,
-						y: p
+						x: p,
+						y: m
 					},
 					...r == null ? {} : { behavior: r }
 				}
 			};
 		}
-		let m = virtualToDisplay(u, K.x, w.value), h = virtualToDisplay(d, K.y, E.value), _ = g.value ? -m : m, v = h, x;
-		isScrollToIndexOptions(n) && (x = n.behavior);
-		let S = s ? "auto" : x || "smooth";
-		k.value = !0, clearTimeout(A), S === "smooth" && (A = setTimeout(() => {
-			k.value = !1, A = void 0, gt();
-		}, 500));
-		let C = { behavior: S };
-		t != null && (C.left = g.value ? _ : Math.max(0, _)), e != null && (C.top = Math.max(0, v)), scrollTo(l, C), (S === "auto" || S === void 0) && (t != null && (i.value = g.value ? _ : Math.max(0, _), o.value = u), e != null && (a.value = Math.max(0, v), c.value = d));
+		let h = virtualToDisplay(d, K.x, w.value), _ = virtualToDisplay(f, K.y, E.value), v = g.value ? -h : h, x = _, S;
+		isScrollToIndexOptions(n) && (S = n.behavior);
+		let C = s ? "auto" : S || "smooth";
+		l || (C === "smooth" || !s) && (A.value = !0, clearTimeout(j), j = C === "smooth" ? setTimeout(() => {
+			A.value = !1, j = void 0, gt();
+		}, 1e3) : setTimeout(() => {
+			A.value = !1, j = void 0;
+		}, 150));
+		let T = { behavior: C };
+		return t != null && (T.left = g.value ? v : Math.max(0, v)), e != null && (T.top = Math.max(0, x)), !s && !l && scrollTo(u, T), !l && (C === "auto" || C === void 0) && (t != null && (i.value = g.value ? v : Math.max(0, v), o.value = d), e != null && (a.value = Math.max(0, x), c.value = f)), {
+			targetX: d,
+			targetY: f,
+			displayTargetX: h,
+			displayTargetY: _
+		};
 	}
 	function Z(e, t, n) {
 		let s = r.value.container || window;
-		k.value = !0, clearTimeout(A), n?.behavior === "smooth" && (A = setTimeout(() => {
-			k.value = !1, A = void 0, gt();
-		}, 500)), O.value = null;
+		A.value = !0, clearTimeout(j), j = n?.behavior === "smooth" ? setTimeout(() => {
+			A.value = !1, j = void 0, gt();
+		}, 1e3) : setTimeout(() => {
+			A.value = !1, j = void 0;
+		}, 150), k.value = null;
 		let l = e == null ? null : Math.max(0, Math.min(e, G.value - y.value)), u = t == null ? null : Math.max(0, Math.min(t, Je.value - b.value));
 		l !== null && (o.value = l), u !== null && (c.value = u);
 		let d = typeof window < "u" && s === window ? window.scrollX : s.scrollLeft, f = typeof window < "u" && s === window ? window.scrollY : s.scrollTop, p = l === null ? null : virtualToDisplay(l, K.x, w.value), m = u === null ? null : virtualToDisplay(u, K.y, E.value), h = p === null ? d : g.value ? -p : p, _ = m === null ? f : m, v = { behavior: n?.behavior || "auto" };
 		e != null && (v.left = h), t != null && (v.top = _), scrollTo(s, v), (n?.behavior === "auto" || n?.behavior === void 0) && (e != null && (i.value = h), t != null && (a.value = _));
 	}
 	let ot = computed(() => {
-		if (we.value, (!d.value || f.value) && r.value.ssrRange) return {
+		if (Ce.value, (!d.value || f.value) && r.value.ssrRange) return {
 			start: r.value.ssrRange.start,
 			end: r.value.ssrRange.end
 		};
 		let e = r.value.ssrRange && !l.value ? 0 : r.value.bufferBefore ?? 5, t = r.value.bufferAfter ?? 5;
 		return calculateRange({
-			direction: M.value,
+			direction: N.value,
 			relativeScrollX: q.value,
 			relativeScrollY: J.value,
 			usableWidth: He.value,
@@ -707,18 +722,18 @@ function useVirtualScroll(e, n = []) {
 			bufferAfter: t,
 			gap: r.value.gap || 0,
 			columnGap: r.value.columnGap || 0,
-			fixedSize: P.value,
-			findLowerBoundY: (e) => R.findLowerBound(e),
-			findLowerBoundX: (e) => I.findLowerBound(e),
-			queryY: (e) => R.query(e),
-			queryX: (e) => I.query(e)
+			fixedSize: F.value,
+			findLowerBoundY: (e) => z.findLowerBound(e),
+			findLowerBoundX: (e) => L.findLowerBound(e),
+			queryY: (e) => z.query(e),
+			queryX: (e) => L.query(e)
 		});
 	}), st = computed(() => {
-		we.value;
-		let e = q.value + H.value, t = J.value + U.value;
-		return Y(M.value === "horizontal" ? e : t);
+		Ce.value;
+		let e = q.value + U.value, t = J.value + W.value;
+		return Y(N.value === "horizontal" ? e : t);
 	}), ct = computed(() => {
-		we.value;
+		Ce.value;
 		let e = r.value.columnCount || 0;
 		if (!e) return {
 			start: 0,
@@ -730,14 +745,14 @@ function useVirtualScroll(e, n = []) {
 			let { colStart: t = 0, colEnd: n = 0 } = r.value.ssrRange, i = Math.max(0, t), a = Math.min(e, n || e);
 			return calculateColumnRange({
 				columnCount: e,
-				relativeScrollX: calculateOffsetAt(i, F.value, r.value.columnGap || 0, (e) => z.query(e)),
-				usableWidth: calculateRangeSize(i, a, F.value, r.value.columnGap || 0, (e) => z.query(e)),
+				relativeScrollX: calculateOffsetAt(i, I.value, r.value.columnGap || 0, (e) => B.query(e)),
+				usableWidth: calculateRangeSize(i, a, I.value, r.value.columnGap || 0, (e) => B.query(e)),
 				colBuffer: 0,
-				fixedWidth: F.value,
+				fixedWidth: I.value,
 				columnGap: r.value.columnGap || 0,
-				findLowerBound: (e) => z.findLowerBound(e),
-				query: (e) => z.query(e),
-				totalColsQuery: () => z.query(e)
+				findLowerBound: (e) => B.findLowerBound(e),
+				query: (e) => B.query(e),
+				totalColsQuery: () => B.query(e)
 			});
 		}
 		let t = r.value.ssrRange && !l.value ? 0 : 2;
@@ -746,11 +761,11 @@ function useVirtualScroll(e, n = []) {
 			relativeScrollX: q.value,
 			usableWidth: He.value,
 			colBuffer: t,
-			fixedWidth: F.value,
+			fixedWidth: I.value,
 			columnGap: r.value.columnGap || 0,
-			findLowerBound: (e) => z.findLowerBound(e),
-			query: (e) => z.query(e),
-			totalColsQuery: () => z.query(e)
+			findLowerBound: (e) => B.findLowerBound(e),
+			query: (e) => B.query(e),
+			totalColsQuery: () => B.query(e)
 		});
 	}), lt = {
 		props: r,
@@ -768,13 +783,13 @@ function useVirtualScroll(e, n = []) {
 			internalScrollY: c,
 			isRtl: g,
 			isScrolling: l,
-			isProgrammaticScroll: k,
+			isProgrammaticScroll: A,
 			viewportWidth: y,
 			viewportHeight: b,
 			scaleX: w,
 			scaleY: E,
 			scrollDirectionX: D,
-			scrollDirectionY: te,
+			scrollDirectionY: O,
 			relativeScrollX: q,
 			relativeScrollY: J
 		},
@@ -785,31 +800,31 @@ function useVirtualScroll(e, n = []) {
 			getRowIndexAt: Y,
 			getColIndexAt: $e,
 			getItemSize: rt,
-			getItemBaseSize: De,
+			getItemBaseSize: Ee,
 			getItemOffset: nt,
 			handleScrollCorrection: it
 		}
 	}, ut = [], dt = computed(() => {
-		we.value;
+		Ce.value;
 		let { start: e, end: t } = ot.value, i = [], a = [...r.value.stickyIndices || []].sort((e, t) => e - t), s = new Set(a), l = [];
 		if (d.value || !r.value.ssrRange) {
 			let t = st.value, n = findPrevStickyIndex(a, t);
 			n !== void 0 && n < e && l.push(n);
 		}
 		for (let n = e; n < t; n++) l.push(n);
-		let { x: u, y: f } = !d.value && r.value.ssrRange ? calculateSSROffsets(M.value, r.value.ssrRange, P.value, F.value, r.value.gap || 0, r.value.columnGap || 0, (e) => R.query(e), (e) => I.query(e), (e) => z.query(e)) : {
+		let { x: u, y: f } = !d.value && r.value.ssrRange ? calculateSSROffsets(N.value, r.value.ssrRange, F.value, I.value, r.value.gap || 0, r.value.columnGap || 0, (e) => z.query(e), (e) => L.query(e), (e) => B.query(e)) : {
 			x: 0,
 			y: 0
 		}, p = /* @__PURE__ */ new Map();
 		for (let e of ut) p.set(e.index, e);
-		let m = -1, h = 0, g = -1, _ = 0, v = (e) => e === m + 1 ? (h += I.get(m), m = e, h) : (h = I.query(e), m = e, h), y = (e) => e === g + 1 ? (_ += R.get(g), g = e, _) : (_ = R.query(e), g = e, _), b = W.value + H.value + Ne.value, x = Be.value + U.value + Fe.value, S = W.value + H.value, C = Be.value + U.value, T = ct.value, D = 0;
+		let m = -1, h = 0, g = -1, _ = 0, v = (e) => e === m + 1 ? (h += L.get(m), m = e, h) : (h = L.query(e), m = e, h), y = (e) => e === g + 1 ? (_ += z.get(g), g = e, _) : (_ = z.query(e), g = e, _), b = Re.value + U.value + Me.value, x = Be.value + W.value + Pe.value, S = Re.value + U.value, C = Be.value + W.value, T = ct.value, D = 0;
 		for (let e of l) {
 			let t = r.value.items[e];
 			if (t === void 0) continue;
 			let { x: n, y: l, width: m, height: h } = calculateItemPosition({
 				index: e,
-				direction: M.value,
-				fixedSize: P.value,
+				direction: N.value,
+				fixedSize: F.value,
 				gap: r.value.gap || 0,
 				columnGap: r.value.columnGap || 0,
 				usableWidth: He.value,
@@ -817,57 +832,57 @@ function useVirtualScroll(e, n = []) {
 				totalWidth: We.value.width,
 				queryY: y,
 				queryX: v,
-				getSizeY: (e) => R.get(e),
-				getSizeX: (e) => I.get(e),
+				getSizeY: (e) => z.get(e),
+				getSizeX: (e) => L.get(e),
 				columnRange: T
-			}), g = s.has(e), _ = n, te = l;
+			}), g = s.has(e), _ = n, O = l;
 			for (; D < a.length && a[D] <= e;) D++;
-			let ne = D < a.length ? a[D] : void 0, { isStickyActive: O, isStickyActiveX: k, isStickyActiveY: A, stickyOffset: re } = calculateStickyItem({
+			let te = D < a.length ? a[D] : void 0, { isStickyActive: k, isStickyActiveX: A, isStickyActiveY: j, stickyOffset: ne } = calculateStickyItem({
 				index: e,
 				isSticky: g,
-				direction: M.value,
+				direction: N.value,
 				relativeScrollX: q.value,
 				relativeScrollY: J.value,
 				originalX: _,
-				originalY: te,
+				originalY: O,
 				width: m,
 				height: h,
 				stickyIndices: a,
-				fixedSize: P.value,
-				fixedWidth: F.value,
+				fixedSize: F.value,
+				fixedWidth: I.value,
 				gap: r.value.gap || 0,
 				columnGap: r.value.columnGap || 0,
-				getItemQueryY: (e) => R.query(e),
-				getItemQueryX: (e) => I.query(e),
-				nextStickyIndex: ne
-			}), ie = d.value ? o.value / w.value + (n + b - o.value) - S : n - u, j = d.value ? c.value / E.value + (l + x - c.value) - C : l - f, N = p.get(e);
-			N && N.item === t && N.offset.x === ie && N.offset.y === j && N.size.width === m && N.size.height === h && N.isSticky === g && N.isStickyActive === O && N.isStickyActiveX === k && N.isStickyActiveY === A && N.stickyOffset.x === re.x && N.stickyOffset.y === re.y ? i.push(N) : i.push({
+				getItemQueryY: (e) => z.query(e),
+				getItemQueryX: (e) => L.query(e),
+				nextStickyIndex: te
+			}), re = d.value ? o.value / w.value + (n + b - o.value) - S : n - u, M = d.value ? c.value / E.value + (l + x - c.value) - C : l - f, P = p.get(e);
+			P && P.item === t && P.offset.x === re && P.offset.y === M && P.size.width === m && P.size.height === h && P.isSticky === g && P.isStickyActive === k && P.isStickyActiveX === A && P.isStickyActiveY === j && P.stickyOffset.x === ne.x && P.stickyOffset.y === ne.y ? i.push(P) : i.push({
 				item: t,
 				index: e,
 				offset: {
-					x: ie,
-					y: j
+					x: re,
+					y: M
 				},
 				size: {
 					width: m,
 					height: h
 				},
 				originalX: _,
-				originalY: te,
+				originalY: O,
 				isSticky: g,
-				isStickyActive: O,
-				isStickyActiveX: k,
-				isStickyActiveY: A,
-				stickyOffset: re
+				isStickyActive: k,
+				isStickyActiveX: A,
+				isStickyActiveY: j,
+				stickyOffset: ne
 			});
 		}
-		let te = i;
+		let O = i;
 		return n.forEach((e) => {
-			e.transformRenderedItems && (te = e.transformRenderedItems(te, lt));
-		}), ut = te, te;
+			e.transformRenderedItems && (O = e.transformRenderedItems(O, lt));
+		}), ut = O, O;
 	}), ft = computed(() => {
-		we.value;
-		let e = q.value + H.value, t = J.value + U.value, n = q.value + (y.value - Le.value) - 1, r = J.value + (b.value - Re.value) - 1, s = $e(e), u = Y(t), d = Y(M.value === "horizontal" ? n : r), f = $e(n);
+		Ce.value;
+		let e = q.value + U.value, t = J.value + W.value, n = q.value + (y.value - Ie.value) - 1, r = J.value + (b.value - Le.value) - 1, s = $e(e), u = Y(t), d = Y(N.value === "horizontal" ? n : r), f = $e(n);
 		return {
 			items: dt.value,
 			currentIndex: u,
@@ -895,7 +910,7 @@ function useVirtualScroll(e, n = []) {
 				height: Je.value
 			},
 			isScrolling: l.value,
-			isProgrammaticScroll: k.value,
+			isProgrammaticScroll: A.value,
 			range: ot.value,
 			columnRange: ct.value
 		};
@@ -906,12 +921,17 @@ function useVirtualScroll(e, n = []) {
 		if (typeof window > "u") return;
 		X(), t === window || t === document ? (i.value = window.scrollX, a.value = window.scrollY, y.value = document.documentElement.clientWidth, b.value = document.documentElement.clientHeight) : isScrollableElement(t) && (i.value = t.scrollLeft, a.value = t.scrollTop, y.value = t.clientWidth, b.value = t.clientHeight);
 		let r = displayToVirtual(g.value ? Math.abs(i.value) : i.value, K.x, w.value), s = displayToVirtual(a.value, K.y, E.value);
-		Math.abs(r - ie) > .5 && (D.value = r > ie ? "end" : "start", ie = r), Math.abs(s - j) > .5 && (te.value = s > j ? "end" : "start", j = s), o.value = r, c.value = s, k.value || (O.value = null), l.value ||= !0, n.forEach((t) => t.onScroll?.(lt, e)), clearTimeout(C), C = setTimeout(() => {
-			l.value = !1, n.forEach((e) => e.onScrollEnd?.(lt)), A === void 0 && (k.value = !1);
+		if (!A.value) {
+			l.value || (re = o.value, M = c.value);
+			let e = r - re, t = s - M;
+			Math.abs(e) > .5 && (D.value = e > 0 ? "end" : "start"), Math.abs(t) > .5 && (O.value = t > 0 ? "end" : "start");
+		}
+		o.value = r, c.value = s, A.value || (k.value = null), l.value ||= !0, n.forEach((t) => t.onScroll?.(lt, e)), clearTimeout(C), C = setTimeout(() => {
+			l.value = !1, n.forEach((e) => e.onScrollEnd?.(lt)), j === void 0 && (A.value = !1);
 		}, 150);
 	}, mt = (e) => {
-		ke(e, Y, $e, q.value, J.value, (e, t) => {
-			!O.value && !k.value && it(e, t);
+		Oe(e, Y, $e, q.value, J.value, (e, t) => {
+			!k.value && !A.value && it(e, t);
 		});
 	}, ht = (e, t, n, r) => {
 		mt([{
@@ -922,49 +942,49 @@ function useVirtualScroll(e, n = []) {
 		}]);
 	};
 	function gt() {
-		if (O.value && !f.value) {
-			let { rowIndex: e, colIndex: t, options: n } = O.value;
-			if (isScrollToIndexOptions(n) && n.behavior === "smooth" && (l.value || k.value)) return;
+		if (k.value && !f.value) {
+			let { rowIndex: e, colIndex: t, options: n } = k.value;
+			if (isScrollToIndexOptions(n) && n.behavior === "smooth" && (l.value || A.value)) return;
 			let i = r.value.container || window, a = typeof window < "u" && i === window ? window.scrollX : i.scrollLeft, o = typeof window < "u" && i === window ? window.scrollY : i.scrollTop, s = g.value ? Math.abs(a) : a, c = o, u = displayToVirtual(s, 0, w.value), d = displayToVirtual(c, 0, E.value), { targetX: f, targetY: p } = calculateScrollTarget({
 				rowIndex: e,
 				colIndex: t,
 				options: n,
-				direction: M.value,
+				direction: N.value,
 				viewportWidth: y.value,
 				viewportHeight: b.value,
 				totalWidth: Ke.value,
 				totalHeight: qe.value,
 				gap: r.value.gap || 0,
 				columnGap: r.value.columnGap || 0,
-				fixedSize: P.value,
-				fixedWidth: F.value,
+				fixedSize: F.value,
+				fixedWidth: I.value,
 				relativeScrollX: u,
 				relativeScrollY: d,
-				getItemSizeY: (e) => R.get(e),
-				getItemSizeX: (e) => I.get(e),
-				getItemQueryY: (e) => R.query(e),
-				getItemQueryX: (e) => I.query(e),
-				getColumnSize: (e) => z.get(e),
-				getColumnQuery: (e) => z.query(e),
+				getItemSizeY: (e) => z.get(e),
+				getItemSizeX: (e) => L.get(e),
+				getItemQueryY: (e) => z.query(e),
+				getItemQueryX: (e) => L.query(e),
+				getColumnSize: (e) => B.get(e),
+				getColumnQuery: (e) => B.query(e),
 				scaleX: w.value,
 				scaleY: E.value,
 				hostOffsetX: K.x,
 				hostOffsetY: K.y,
 				stickyIndices: r.value.stickyIndices || [],
-				stickyStartX: H.value,
-				stickyStartY: U.value,
-				stickyEndX: Le.value,
-				stickyEndY: Re.value,
-				flowPaddingStartX: W.value,
+				stickyStartX: U.value,
+				stickyStartY: W.value,
+				stickyEndX: Ie.value,
+				stickyEndY: Le.value,
+				flowPaddingStartX: Re.value,
 				flowPaddingStartY: Be.value,
-				paddingStartX: Ne.value,
-				paddingStartY: Fe.value,
-				paddingEndX: Pe.value,
-				paddingEndY: Ie.value
-			}), m = 2 * w.value, h = 2 * E.value, _ = t == null || Math.abs(u - f) < m, v = e == null || Math.abs(d - p) < h;
+				paddingStartX: Me.value,
+				paddingStartY: Pe.value,
+				paddingEndX: Ne.value,
+				paddingEndY: Fe.value
+			}), m = 2 * w.value, h = 2 * E.value, _ = t == null || y.value > 0 && Math.abs(u - f) < m, v = e == null || b.value > 0 && Math.abs(d - p) < h;
 			if (_ && v) {
-				let n = t == null || t === void 0 || ge.value[t] === 1, r = e == null || e === void 0 || B.value[e] === 1;
-				n && r && !l.value && !k.value && (O.value = null);
+				let n = t == null || t === void 0 || he.value[t] === 1, r = e == null || e === void 0 || V.value[e] === 1;
+				n && r && !l.value && !A.value && (k.value = null);
 			} else at(e, t, isScrollToIndexOptions(n) ? {
 				...n,
 				isCorrection: !0
@@ -975,7 +995,7 @@ function useVirtualScroll(e, n = []) {
 		}
 	}
 	watch([
-		we,
+		Ce,
 		y,
 		b
 	], gt), watch(l, (e) => {
@@ -1068,18 +1088,18 @@ function useVirtualScroll(e, n = []) {
 		() => r.value.columnGap,
 		() => r.value.defaultItemSize,
 		() => r.value.defaultColumnWidth
-	], () => Oe(), { immediate: !0 }), watch(() => [r.value.container, r.value.hostElement], () => {
+	], () => De(), { immediate: !0 }), watch(() => [r.value.container, r.value.hostElement], () => {
 		Q();
 	}), watch(g, (e, t) => {
 		if (t === void 0 || e === t || !p.value) return;
-		if (M.value === "vertical") {
+		if (N.value === "vertical") {
 			Q();
 			return;
 		}
 		let n = displayToVirtual(t ? Math.abs(i.value) : i.value, x.x, w.value);
 		Q(), Z(n, null, { behavior: "auto" });
 	}, { flush: "sync" }), watch([w, E], () => {
-		!p.value || l.value || k.value || Z(o.value, c.value, { behavior: "auto" });
+		!p.value || l.value || A.value || Z(o.value, c.value, { behavior: "auto" });
 	}), watch([() => r.value.items.length, () => r.value.columnCount], ([e, t], [n, r]) => {
 		nextTick(() => {
 			let i = Math.max(0, G.value - y.value), a = Math.max(0, Je.value - b.value);
@@ -1094,23 +1114,23 @@ function useVirtualScroll(e, n = []) {
 		scrollDetails: ft,
 		getRowHeight: tt,
 		getColumnWidth: et,
-		getRowOffset: (e) => Be.value + U.value + Fe.value + calculateOffsetAt(e, P.value, r.value.gap || 0, (e) => R.query(e)),
+		getRowOffset: (e) => Be.value + W.value + Pe.value + calculateOffsetAt(e, F.value, r.value.gap || 0, (e) => z.query(e)),
 		getColumnOffset: (e) => {
-			let t = W.value + H.value + Ne.value;
-			return M.value === "both" ? t + calculateOffsetAt(e, F.value, r.value.columnGap || 0, (e) => z.query(e)) : t + calculateOffsetAt(e, P.value, r.value.columnGap || 0, (e) => I.query(e));
+			let t = Re.value + U.value + Me.value;
+			return N.value === "both" ? t + calculateOffsetAt(e, I.value, r.value.columnGap || 0, (e) => B.query(e)) : t + calculateOffsetAt(e, F.value, r.value.columnGap || 0, (e) => L.query(e));
 		},
 		getItemOffset: nt,
 		getItemSize: rt,
 		scrollToIndex: at,
 		scrollToOffset: Z,
-		stopProgrammaticScroll: re,
+		stopProgrammaticScroll: ne,
 		handleScrollCorrection: it,
 		updateItemSize: ht,
 		updateItemSizes: mt,
 		updateHostOffset: Q,
 		updateDirection: X,
 		columnRange: ct,
-		refresh: () => je(),
+		refresh: () => Ae(),
 		isHydrated: d,
 		isWindowContainer: Ge,
 		isRtl: g,
@@ -1120,7 +1140,8 @@ function useVirtualScroll(e, n = []) {
 		renderedVirtualWidth: Ze,
 		renderedVirtualHeight: Qe,
 		getRowIndexAt: Y,
-		getColIndexAt: $e
+		getColIndexAt: $e,
+		__internalState: lt.internalState
 	};
 }
 function useVirtualScrollbar(e) {
@@ -1230,13 +1251,22 @@ function useSnappingExtension() {
 				let t = a === "both" ? e.props.value.columnCount || 0 : i, o = resolveSnap(n, e.internalState.scrollDirectionX.value, r.currentColIndex, r.currentEndColIndex, e.internalState.relativeScrollX.value, e.internalState.viewportWidth.value, t, (t) => e.methods.getItemSize(t), (t) => e.methods.getItemOffset(t), e.methods.getColIndexAt);
 				o && (s = o.index, l = o.align, u = !0);
 			}
-			u && e.methods.scrollToIndex(o, s, {
-				align: {
-					x: l,
-					y: c
-				},
-				behavior: "smooth"
-			});
+			if (u) {
+				let { targetX: t, targetY: n } = e.methods.scrollToIndex(o, s, {
+					align: {
+						x: l,
+						y: c
+					},
+					dryRun: !0
+				}), r = e.internalState.internalScrollX.value, i = e.internalState.internalScrollY.value, a = s === null ? 0 : Math.abs(t - r), u = o === null ? 0 : Math.abs(n - i);
+				(a > .5 || u > .5) && e.methods.scrollToIndex(o, s, {
+					align: {
+						x: l,
+						y: c
+					},
+					behavior: "smooth"
+				});
+			}
 		}
 	};
 }
@@ -1398,25 +1428,25 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 		"visibleRangeChange"
 	],
 	setup(o, { expose: s, emit: c }) {
-		let _ = o, S = c, T = useSlots(), O = ref(null), A = ref(null), re = ref(null), ie = ref(null), j = /* @__PURE__ */ new Map(), M = useId(), N = computed(() => `vs-container-${M}`), ae = [
+		let _ = o, S = c, T = useSlots(), k = ref(null), j = ref(null), ne = ref(null), re = ref(null), M = /* @__PURE__ */ new Map(), N = useId(), P = computed(() => `vs-container-${N}`), ie = [
 			useRtlExtension(),
 			useSnappingExtension(),
 			useStickyExtension(),
 			useInfiniteLoadingExtension({ onLoad: (e) => S("load", e) }),
 			usePrependRestorationExtension(),
 			useCoordinateScalingExtension()
-		], se = ref(0), ce = ref(0), le = computed(() => _.container === void 0 ? O.value : _.container), ue = computed(() => {
-			let e = le.value;
-			return e === O.value || isWindowLike(e);
-		}), P = computed(() => (_.items.length, {
+		], oe = ref(0), se = ref(0), ce = computed(() => _.container === void 0 ? k.value : _.container), le = computed(() => {
+			let e = ce.value;
+			return e === k.value || isWindowLike(e);
+		}), F = computed(() => (_.items.length, {
 			items: _.items,
 			itemSize: _.itemSize,
 			direction: _.direction,
 			bufferBefore: _.bufferBefore,
 			bufferAfter: _.bufferAfter,
-			container: le.value,
-			hostElement: A.value,
-			hostRef: O.value,
+			container: ce.value,
+			hostElement: j.value,
+			hostRef: k.value,
 			ssrRange: _.ssrRange,
 			columnCount: _.columnCount,
 			columnWidth: _.columnWidth,
@@ -1430,19 +1460,19 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 			},
 			flowPaddingStart: {
 				x: 0,
-				y: _.stickyHeader ? 0 : se.value
+				y: _.stickyHeader ? 0 : oe.value
 			},
 			flowPaddingEnd: {
 				x: 0,
-				y: _.stickyFooter ? 0 : ce.value
+				y: _.stickyFooter ? 0 : se.value
 			},
 			stickyStart: {
 				x: 0,
-				y: _.stickyHeader && ue.value ? se.value : 0
+				y: _.stickyHeader && le.value ? oe.value : 0
 			},
 			stickyEnd: {
 				x: 0,
-				y: _.stickyFooter && ue.value ? ce.value : 0
+				y: _.stickyFooter && le.value ? se.value : 0
 			},
 			gap: _.gap,
 			columnGap: _.columnGap,
@@ -1456,64 +1486,64 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 			defaultColumnWidth: _.defaultColumnWidth,
 			debug: _.debug,
 			snap: _.snap
-		})), { isHydrated: F, isRtl: pe, columnRange: me, renderedItems: I, scrollDetails: L, renderedHeight: he, renderedWidth: R, getColumnWidth: z, getRowHeight: ge, scrollToIndex: B, scrollToOffset: _e, updateHostOffset: ve, updateItemSizes: ye, updateDirection: be, getItemOffset: xe, getRowOffset: Se, getColumnOffset: Ce, getItemSize: Te, refresh: Ee, stopProgrammaticScroll: V, scaleX: ke, scaleY: Ae, isWindowContainer: je, componentOffset: Me, renderedVirtualWidth: Ue, renderedVirtualHeight: We, getRowIndexAt: Ge, getColIndexAt: Ke } = useVirtualScroll(P, ae), qe = computed(() => ke.value !== 1 || Ae.value !== 1), G = computed(() => je.value ? !1 : _.virtualScrollbar === !0 || ke.value !== 1 || Ae.value !== 1);
+		})), { isHydrated: I, isRtl: fe, columnRange: pe, renderedItems: L, scrollDetails: R, renderedHeight: me, renderedWidth: z, getColumnWidth: B, getRowHeight: he, scrollToIndex: V, scrollToOffset: ge, updateHostOffset: _e, updateItemSizes: ve, updateDirection: ye, getItemOffset: be, getRowOffset: xe, getColumnOffset: Se, getItemSize: we, refresh: Te, stopProgrammaticScroll: H, scaleX: Oe, scaleY: ke, isWindowContainer: Ae, componentOffset: je, renderedVirtualWidth: Ue, renderedVirtualHeight: We, getRowIndexAt: Ge, getColIndexAt: Ke } = useVirtualScroll(F, ie), qe = computed(() => Oe.value !== 1 || ke.value !== 1), G = computed(() => Ae.value ? !1 : _.virtualScrollbar === !0 || Oe.value !== 1 || ke.value !== 1);
 		function Je(e) {
-			let { displayViewportSize: t } = L.value;
-			e >= he.value - t.height - .5 ? _e(null, Infinity) : _e(null, displayToVirtual(e, Me.y, Ae.value));
+			let { displayViewportSize: t } = R.value;
+			e >= me.value - t.height - .5 ? ge(null, Infinity) : ge(null, displayToVirtual(e, je.y, ke.value));
 		}
 		function K(e) {
-			let { displayViewportSize: t } = L.value;
-			e >= R.value - t.width - .5 ? _e(Infinity, null) : _e(displayToVirtual(e, Me.x, ke.value), null);
+			let { displayViewportSize: t } = R.value;
+			e >= z.value - t.width - .5 ? ge(Infinity, null) : ge(displayToVirtual(e, je.x, Oe.value), null);
 		}
 		let Ye = useVirtualScrollbar(computed(() => ({
 			axis: "vertical",
-			totalSize: he.value,
-			position: L.value.displayScrollOffset.y,
-			viewportSize: L.value.displayViewportSize.height,
+			totalSize: me.value,
+			position: R.value.displayScrollOffset.y,
+			viewportSize: R.value.displayViewportSize.height,
 			scrollToOffset: Je,
-			containerId: N.value,
-			isRtl: pe.value
+			containerId: P.value,
+			isRtl: fe.value
 		}))), Xe = useVirtualScrollbar(computed(() => ({
 			axis: "horizontal",
-			totalSize: R.value,
-			position: L.value.displayScrollOffset.x,
-			viewportSize: L.value.displayViewportSize.width,
+			totalSize: z.value,
+			position: R.value.displayScrollOffset.x,
+			viewportSize: R.value.displayViewportSize.width,
 			scrollToOffset: K,
-			containerId: N.value,
-			isRtl: pe.value
+			containerId: P.value,
+			isRtl: fe.value
 		}))), Ze = computed(() => _.direction === "both" ? {
-			...me.value,
+			...pe.value,
 			padStart: 0,
 			padEnd: 0
-		} : me.value);
+		} : pe.value);
 		function Qe() {
-			Ee(), be(), nextTick(() => {
+			Te(), ye(), nextTick(() => {
 				let e = [];
-				for (let [t, n] of j.entries()) n && e.push({
+				for (let [t, n] of M.entries()) n && e.push({
 					index: t,
 					inlineSize: n.offsetWidth,
 					blockSize: n.offsetHeight,
 					element: n
 				});
-				e.length > 0 && ye(e);
+				e.length > 0 && ve(e);
 			});
 		}
-		watch(L, (e, t) => {
-			!F.value || !e || (S("scroll", e), (!t || !t.range || !t.columnRange || e.range.start !== t.range.start || e.range.end !== t.range.end || e.columnRange.start !== t.columnRange.start || e.columnRange.end !== t.columnRange.end) && S("visibleRangeChange", {
+		watch(R, (e, t) => {
+			!I.value || !e || (S("scroll", e), (!t || !t.range || !t.columnRange || e.range.start !== t.range.start || e.range.end !== t.range.end || e.columnRange.start !== t.columnRange.start || e.columnRange.end !== t.columnRange.end) && S("visibleRangeChange", {
 				start: e.range.start,
 				end: e.range.end,
 				colStart: e.columnRange.start,
 				colEnd: e.columnRange.end
 			}));
-		}), watch(F, (e) => {
-			e && L.value?.range && L.value?.columnRange && S("visibleRangeChange", {
-				start: L.value.range.start,
-				end: L.value.range.end,
-				colStart: L.value.columnRange.start,
-				colEnd: L.value.columnRange.end
+		}), watch(I, (e) => {
+			e && R.value?.range && R.value?.columnRange && S("visibleRangeChange", {
+				start: R.value.range.start,
+				end: R.value.range.end,
+				colStart: R.value.columnRange.start,
+				colEnd: R.value.columnRange.end
 			});
 		}, { once: !0 });
-		let q = typeof window > "u" ? null : new ResizeObserver(ve), J = typeof window > "u" ? null : new ResizeObserver((e) => {
+		let q = typeof window > "u" ? null : new ResizeObserver(_e), J = typeof window > "u" ? null : new ResizeObserver((e) => {
 			let t = [];
 			for (let n of e) {
 				let e = n.target, r = Number(e.dataset.index), i = e.dataset.colIndex, a = n.contentRect.width, o = n.contentRect.height;
@@ -1529,21 +1559,21 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 					element: e
 				});
 			}
-			t.length > 0 && ye(t);
+			t.length > 0 && ve(t);
 		}), Y = typeof window > "u" ? null : new ResizeObserver(() => {
-			se.value = re.value?.offsetHeight || 0, ce.value = ie.value?.offsetHeight || 0, ve();
+			oe.value = ne.value?.offsetHeight || 0, se.value = re.value?.offsetHeight || 0, _e();
 		});
 		function $e(e, t) {
 			watch(e, (e, n) => {
 				n && Y?.unobserve(n), e ? Y?.observe(e) : t.value = 0;
 			}, { immediate: !0 });
 		}
-		$e(re, se), $e(ie, ce), onMounted(() => {
-			O.value && q?.observe(O.value);
-			for (let e of j.values()) et(e, !0);
-		}), watch([O, A], ([e], [t]) => {
+		$e(ne, oe), $e(re, se), onMounted(() => {
+			k.value && q?.observe(k.value);
+			for (let e of M.values()) et(e, !0);
+		}), watch([k, j], ([e], [t]) => {
 			t && q?.unobserve(t), e && q?.observe(e);
-		}), watch([O, qe], ([e, t], [n, r]) => {
+		}), watch([k, qe], ([e, t], [n, r]) => {
 			let i = e !== n || t !== r;
 			n && i && n.removeEventListener("wheel", ft), e && i && e.addEventListener("wheel", ft, { passive: !t });
 		}, { immediate: !0 });
@@ -1554,10 +1584,10 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 		function tt(e, t) {
 			if (e) {
 				let n = e;
-				j.set(t, n), et(n, !0);
+				M.set(t, n), et(n, !0);
 			} else {
-				let e = j.get(t);
-				e && (et(e, !1), j.delete(t));
+				let e = M.get(t);
+				e && (et(e, !1), M.delete(t));
 			}
 		}
 		let nt = ref(!1), rt = {
@@ -1577,8 +1607,8 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 			let e = () => {
 				let { nextVelocity: t, delta: n } = calculateInertiaStep(Z, FRICTION);
 				Z.x = t.x, Z.y = t.y;
-				let { x: r, y: i } = L.value.scrollOffset;
-				_e(r + n.x, i + n.y, { behavior: "auto" }), Math.abs(Z.x) > MIN_VELOCITY || Math.abs(Z.y) > MIN_VELOCITY ? ot = requestAnimationFrame(e) : ct();
+				let { x: r, y: i } = R.value.scrollOffset;
+				ge(r + n.x, i + n.y, { behavior: "auto" }), Math.abs(Z.x) > MIN_VELOCITY || Math.abs(Z.y) > MIN_VELOCITY ? ot = requestAnimationFrame(e) : ct();
 			};
 			ot = requestAnimationFrame(e);
 		}
@@ -1589,15 +1619,15 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 			};
 		}
 		function lt(e) {
-			V(), ct(), qe.value && (e.pointerType === "mouse" && e.button !== 0 || (nt.value = !0, rt = {
+			H(), ct(), qe.value && (e.pointerType === "mouse" && e.button !== 0 || (nt.value = !0, rt = {
 				x: e.clientX,
 				y: e.clientY
 			}, it = {
 				x: e.clientX,
 				y: e.clientY
 			}, at = performance.now(), X = {
-				x: L.value.scrollOffset.x,
-				y: L.value.scrollOffset.y
+				x: R.value.scrollOffset.x,
+				y: R.value.scrollOffset.y
 			}, e.currentTarget.setPointerCapture(e.pointerId)));
 		}
 		function ut(e) {
@@ -1616,94 +1646,94 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 			}, at = t;
 			let r = rt.x - e.clientX, i = rt.y - e.clientY;
 			requestAnimationFrame(() => {
-				_e(X.x + r, X.y + i, { behavior: "auto" });
+				ge(X.x + r, X.y + i, { behavior: "auto" });
 			});
 		}
 		function dt(e) {
 			nt.value && (nt.value = !1, e.currentTarget.releasePointerCapture(e.pointerId), (Math.abs(Z.x) > MIN_VELOCITY || Math.abs(Z.y) > MIN_VELOCITY) && (Math.abs(Z.x) > 4 * Math.abs(Z.y) ? Z.y = 0 : Math.abs(Z.y) > 4 * Math.abs(Z.x) && (Z.x = 0), st()));
 		}
 		function ft(e) {
-			let { scrollOffset: t } = L.value;
-			if (V(), qe.value) {
+			let { scrollOffset: t } = R.value;
+			if (H(), qe.value) {
 				e.preventDefault();
 				let { deltaX: n, deltaY: r } = e;
-				e.shiftKey && n === 0 && (n = r, r = 0), _e(t.x + n, t.y + r, { behavior: "auto" });
+				e.shiftKey && n === 0 && (n = r, r = 0), ge(t.x + n, t.y + r, { behavior: "auto" });
 			}
 		}
 		function pt(e) {
-			let { viewportSize: t, scrollOffset: n } = L.value, r = _.direction !== "vertical", i = _.direction !== "horizontal", a = P.value, o = a.stickyStart, s = a.stickyEnd, c = a.scrollPaddingStart, l = a.scrollPaddingEnd, u = _.snap === !0 ? "auto" : _.snap, d = u && u !== "auto" ? u : null, f = (e) => {
+			let { viewportSize: t, scrollOffset: n } = R.value, r = _.direction !== "vertical", i = _.direction !== "horizontal", a = F.value, o = a.stickyStart, s = a.stickyEnd, c = a.scrollPaddingStart, l = a.scrollPaddingEnd, u = _.snap === !0 ? "auto" : _.snap, d = u && u !== "auto" ? u : null, f = (e) => {
 				let r = (e ? n.x : n.y) + (e ? t.width : t.height) / 2;
 				return e ? Ke(r) : Ge(r);
-			}, { currentIndex: p, currentEndIndex: m, currentColIndex: h, currentEndColIndex: g } = L.value, v = (e, t) => {
+			}, { currentIndex: p, currentEndIndex: m, currentColIndex: h, currentEndColIndex: g } = R.value, v = (e, t) => {
 				let n = !e, r = e ? p : h, i = e ? m : g, a = Math.max(1, i - r), o = e ? _.items.length - 1 : _.columnCount ? _.columnCount - 1 : _.items.length - 1;
 				return t ? d === "center" ? Math.min(o, f(n) + a) : d === "end" ? Math.min(o, i + a) : i : d === "center" ? Math.max(0, f(n) - a) : d === "start" ? Math.max(0, r - a) : r;
 			}, y = (e, r) => {
 				let i = !e;
 				if (d === "center") {
 					let t = f(i), n = i && _.columnCount ? _.columnCount - 1 : _.items.length - 1, a = r ? Math.min(n, t + 1) : Math.max(0, t - 1);
-					B(e ? a : null, i ? a : null, { align: "center" });
+					V(e ? a : null, i ? a : null, { align: "center" });
 					return;
 				}
-				if (e) if (r) if (d === "start") B(Math.min(_.items.length - 1, p + 1), null, { align: "start" });
+				if (e) if (r) if (d === "start") V(Math.min(_.items.length - 1, p + 1), null, { align: "start" });
 				else {
 					let e = d || "end", r = n.y + t.height - (s.y + l.y);
-					Se(m) + ge(m) > r + 1 ? B(m, null, { align: e }) : m < _.items.length - 1 && B(m + 1, null, { align: e });
+					xe(m) + he(m) > r + 1 ? V(m, null, { align: e }) : m < _.items.length - 1 && V(m + 1, null, { align: e });
 				}
-				else if (d === "end") B(Math.max(0, m - 1), null, { align: "end" });
+				else if (d === "end") V(Math.max(0, m - 1), null, { align: "end" });
 				else {
 					let e = d || "start", t = n.y + o.y + c.y;
-					Se(p) < t - 1 ? B(p, null, { align: e }) : p > 0 && B(p - 1, null, { align: e });
+					xe(p) < t - 1 ? V(p, null, { align: e }) : p > 0 && V(p - 1, null, { align: e });
 				}
 				else {
 					let e = _.columnCount ? _.columnCount - 1 : _.items.length - 1;
-					if (pe.value ? !r : r) if (d === "start") B(null, Math.min(e, h + 1), { align: "start" });
+					if (fe.value ? !r : r) if (d === "start") V(null, Math.min(e, h + 1), { align: "start" });
 					else {
 						let r = d || "end", i = n.x + t.width - (s.x + l.x);
-						(_.columnCount ? Ce(g) + z(g) : xe(g) + Te(g)) > i + 1 ? B(null, g, { align: r }) : g < e && B(null, g + 1, { align: r });
+						(_.columnCount ? Se(g) + B(g) : be(g) + we(g)) > i + 1 ? V(null, g, { align: r }) : g < e && V(null, g + 1, { align: r });
 					}
-					else if (d === "end") B(null, Math.max(0, g - 1), { align: "end" });
+					else if (d === "end") V(null, Math.max(0, g - 1), { align: "end" });
 					else {
 						let e = d || "start", t = n.x + o.x + c.x;
-						(_.columnCount ? Ce(h) : xe(h)) < t - 1 ? B(null, h, { align: e }) : h > 0 && B(null, h - 1, { align: e });
+						(_.columnCount ? Se(h) : be(h)) < t - 1 ? V(null, h, { align: e }) : h > 0 && V(null, h - 1, { align: e });
 					}
 				}
 			};
 			switch (e.key) {
 				case "Home":
-					e.preventDefault(), V(), B(0, 0, {
+					e.preventDefault(), H(), V(0, 0, {
 						behavior: Math.max(n.x, n.y) > 10 * (_.direction === "horizontal" ? t.width : t.height) ? "auto" : "smooth",
 						align: "start"
 					});
 					break;
 				case "End": {
-					e.preventDefault(), V();
-					let r = _.items.length - 1, i = (_.columnCount || 0) > 0 ? _.columnCount - 1 : 0, { totalSize: a } = L.value, o = Math.max(a.width - n.x - t.width, a.height - n.y - t.height) > 10 * (_.direction === "horizontal" ? t.width : t.height) ? "auto" : "smooth";
-					_.direction === "both" ? B(r, i, {
+					e.preventDefault(), H();
+					let r = _.items.length - 1, i = (_.columnCount || 0) > 0 ? _.columnCount - 1 : 0, { totalSize: a } = R.value, o = Math.max(a.width - n.x - t.width, a.height - n.y - t.height) > 10 * (_.direction === "horizontal" ? t.width : t.height) ? "auto" : "smooth";
+					_.direction === "both" ? V(r, i, {
 						behavior: o,
 						align: "end"
-					}) : B(_.direction === "vertical" ? r : 0, _.direction === "horizontal" ? r : 0, {
+					}) : V(_.direction === "vertical" ? r : 0, _.direction === "horizontal" ? r : 0, {
 						behavior: o,
 						align: "end"
 					});
 					break;
 				}
 				case "ArrowUp":
-					e.preventDefault(), V(), i && y(!0, !1);
+					e.preventDefault(), H(), i && y(!0, !1);
 					break;
 				case "ArrowDown":
-					e.preventDefault(), V(), i && y(!0, !0);
+					e.preventDefault(), H(), i && y(!0, !0);
 					break;
 				case "ArrowLeft":
-					e.preventDefault(), V(), r && y(!1, !1);
+					e.preventDefault(), H(), r && y(!1, !1);
 					break;
 				case "ArrowRight":
-					e.preventDefault(), V(), r && y(!1, !0);
+					e.preventDefault(), H(), r && y(!1, !0);
 					break;
 				case "PageUp":
-					e.preventDefault(), V(), _.direction === "horizontal" ? B(null, v(!1, !1), { align: d || "end" }) : B(v(!0, !1), null, { align: d || "end" });
+					e.preventDefault(), H(), _.direction === "horizontal" ? V(null, v(!1, !1), { align: d || "end" }) : V(v(!0, !1), null, { align: d || "end" });
 					break;
 				case "PageDown":
-					e.preventDefault(), V(), _.direction === "horizontal" ? B(null, v(!1, !0), { align: d || "start" }) : B(v(!0, !0), null, { align: d || "start" });
+					e.preventDefault(), H(), _.direction === "horizontal" ? V(null, v(!1, !0), { align: d || "start" }) : V(v(!0, !0), null, { align: d || "start" });
 					break;
 			}
 		}
@@ -1712,7 +1742,7 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 		});
 		let mt = computed(() => {
 			let e = { ..._.direction === "vertical" ? {} : { whiteSpace: "nowrap" } };
-			return (G.value || !je.value) && (e.overflow = "auto"), qe.value && (e.touchAction = "none"), je.value ? e : _.containerTag === "table" ? {
+			return (G.value || !Ae.value) && (e.overflow = "auto"), qe.value && (e.touchAction = "none"), Ae.value ? e : _.containerTag === "table" ? {
 				...e,
 				display: "block",
 				minInlineSize: _.direction === "vertical" ? "100%" : "auto"
@@ -1733,8 +1763,8 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 					position: n,
 					viewportSize: r,
 					scrollToOffset: i,
-					containerId: N.value,
-					isRtl: pe.value,
+					containerId: P.value,
+					isRtl: fe.value,
 					ariaLabel: `${e === "vertical" ? "Vertical" : "Horizontal"} scroll`
 				},
 				isDragging: a.isDragging.value
@@ -1742,18 +1772,18 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 		}
 		let gt = computed(() => {
 			if (_.direction === "horizontal") return null;
-			let { displayViewportSize: e, displayScrollOffset: t } = L.value;
-			return ht("vertical", he.value, t.y, e.height, Je, Ye);
+			let { displayViewportSize: e, displayScrollOffset: t } = R.value;
+			return ht("vertical", me.value, t.y, e.height, Je, Ye);
 		}), Q = computed(() => {
 			if (_.direction === "vertical") return null;
-			let { displayViewportSize: e, displayScrollOffset: t } = L.value;
-			return ht("horizontal", R.value, t.x, e.width, K, Xe);
+			let { displayViewportSize: e, displayScrollOffset: t } = R.value;
+			return ht("horizontal", z.value, t.x, e.width, K, Xe);
 		}), _t = computed(() => {
 			let e = _.direction === "horizontal", t = _.direction === "vertical", n = _.direction === "both", r = {
 				inlineSize: t ? "100%" : `${Ue.value}px`,
 				blockSize: e ? "100%" : `${We.value}px`
 			};
-			return F.value || (r.display = "flex", r.flexDirection = e ? "row" : "column", (e || n) && _.columnGap && (r.columnGap = `${_.columnGap}px`), (t || n) && _.gap && (r.rowGap = `${_.gap}px`)), r;
+			return I.value || (r.display = "flex", r.flexDirection = e ? "row" : "column", (e || n) && _.columnGap && (r.columnGap = `${_.columnGap}px`), (t || n) && _.gap && (r.rowGap = `${_.gap}px`)), r;
 		}), vt = computed(() => {
 			let e = _.direction === "horizontal";
 			return {
@@ -1771,14 +1801,14 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 			let t = calculateItemStyle({
 				containerTag: _.containerTag || "div",
 				direction: _.direction,
-				isHydrated: F.value,
+				isHydrated: I.value,
 				item: e,
 				itemSize: _.itemSize,
-				paddingStartX: P.value.scrollPaddingStart.x,
-				paddingStartY: P.value.scrollPaddingStart.y,
-				isRtl: pe.value
+				paddingStartX: F.value.scrollPaddingStart.x,
+				paddingStartY: F.value.scrollPaddingStart.y,
+				isRtl: fe.value
 			});
-			return !F.value && _.direction === "both" && (t.display = "flex", _.columnGap && (t.columnGap = `${_.columnGap}px`)), t;
+			return !I.value && _.direction === "both" && (t.display = "flex", _.columnGap && (t.columnGap = `${_.columnGap}px`)), t;
 		}
 		let xt = computed(() => _.debug), $ = computed(() => _.containerTag === "table"), St = computed(() => $.value ? "thead" : "div"), Ct = computed(() => $.value ? "tfoot" : "div"), wt = computed(() => _.role ? _.role : $.value ? null : _.direction === "both" ? "grid" : "list"), Tt = computed(() => wt.value === "grid" || $.value), Et = computed(() => $.value ? null : _.ariaLabel || _.ariaLabelledby ? "region" : "none"), Dt = computed(() => $.value ? null : wt.value), Ot = computed(() => {
 			if (Tt.value) return "row";
@@ -1815,43 +1845,43 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 		}
 		return s({
 			...toRefs(_),
-			scrollDetails: L,
-			columnRange: me,
-			getColumnWidth: z,
-			getRowHeight: ge,
+			scrollDetails: R,
+			columnRange: pe,
+			getColumnWidth: B,
+			getRowHeight: he,
 			getCellAriaProps: Ft,
 			getItemAriaProps: Pt,
-			getRowOffset: Se,
-			getColumnOffset: Ce,
-			getItemOffset: xe,
-			getItemSize: Te,
+			getRowOffset: xe,
+			getColumnOffset: Se,
+			getItemOffset: be,
+			getItemSize: we,
 			isTable: $,
 			itemTag: computed(() => _.itemTag || "div"),
 			getRowIndexAt: Ge,
 			getColIndexAt: Ke,
-			scrollToIndex: B,
-			scrollToOffset: _e,
+			scrollToIndex: V,
+			scrollToOffset: ge,
 			refresh: Qe,
 			stopProgrammaticScroll: () => {
-				V(), ct();
+				H(), ct();
 			},
-			updateDirection: be,
-			isRtl: pe,
-			isHydrated: F,
-			scaleX: ke,
-			scaleY: Ae,
-			renderedWidth: R,
-			renderedHeight: he,
-			componentOffset: Me,
+			updateDirection: ye,
+			isRtl: fe,
+			isHydrated: I,
+			scaleX: Oe,
+			scaleY: ke,
+			renderedWidth: z,
+			renderedHeight: me,
+			componentOffset: je,
 			scrollbarPropsVertical: gt,
 			scrollbarPropsHorizontal: Q
 		}), (t, s) => (openBlock(), createBlock(resolveDynamicComponent(o.containerTag), mergeProps({
-			id: N.value,
+			id: P.value,
 			ref_key: "hostRef",
-			ref: O,
+			ref: k,
 			class: ["virtual-scroll-container", [`virtual-scroll--${o.direction}`, {
-				"virtual-scroll--hydrated": unref(F),
-				"virtual-scroll--window": unref(je),
+				"virtual-scroll--hydrated": unref(I),
+				"virtual-scroll--window": unref(Ae),
 				"virtual-scroll--table": $.value,
 				"virtual-scroll--hide-scrollbar": G.value
 			}]],
@@ -1872,15 +1902,15 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 				G.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
 					class: "virtual-scroll-scrollbar-viewport",
 					style: normalizeStyle({
-						inlineSize: `${unref(L).displayViewportSize.width}px`,
-						blockSize: `${unref(L).displayViewportSize.height}px`,
+						inlineSize: `${unref(R).displayViewportSize.width}px`,
+						blockSize: `${unref(R).displayViewportSize.height}px`,
 						"--vsi-scrollbar-has-cross-gap": o.direction === "both" ? 1 : 0
 					})
 				}, [T.scrollbar && gt.value ? renderSlot(t.$slots, "scrollbar", normalizeProps(mergeProps({ key: 0 }, gt.value)), void 0, !0) : gt.value ? (openBlock(), createBlock(VirtualScrollbar_default, normalizeProps(mergeProps({ key: 1 }, gt.value.scrollbarProps)), null, 16)) : createCommentVNode("", !0), T.scrollbar && Q.value ? renderSlot(t.$slots, "scrollbar", normalizeProps(mergeProps({ key: 2 }, Q.value)), void 0, !0) : Q.value ? (openBlock(), createBlock(VirtualScrollbar_default, normalizeProps(mergeProps({ key: 3 }, Q.value.scrollbarProps)), null, 16)) : createCommentVNode("", !0)], 4)])) : createCommentVNode("", !0),
 				T.header ? (openBlock(), createBlock(resolveDynamicComponent(St.value), {
 					key: 1,
 					ref_key: "headerRef",
-					ref: re,
+					ref: ne,
 					class: normalizeClass(["virtual-scroll-header", { "virtual-scroll--sticky": o.stickyHeader }]),
 					role: $.value ? void 0 : "none"
 				}, {
@@ -1889,7 +1919,7 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 				}, 8, ["class", "role"])) : createCommentVNode("", !0),
 				(openBlock(), createBlock(resolveDynamicComponent(o.wrapperTag), mergeProps({
 					ref_key: "wrapperRef",
-					ref: A,
+					ref: j,
 					class: "virtual-scroll-wrapper",
 					style: _t.value,
 					role: $.value ? void 0 : Dt.value
@@ -1905,7 +1935,7 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 							"block-size": "inherit"
 						} }, null, -1)]]),
 						_: 1
-					}, 8, ["style"])) : createCommentVNode("", !0), (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(I), (e) => (openBlock(), createBlock(resolveDynamicComponent(o.itemTag), mergeProps({
+					}, 8, ["style"])) : createCommentVNode("", !0), (openBlock(!0), createElementBlock(Fragment, null, renderList(unref(L), (e) => (openBlock(), createBlock(resolveDynamicComponent(o.itemTag), mergeProps({
 						key: e.index,
 						ref_for: !0,
 						ref: (t) => tt(t, e.index),
@@ -1921,7 +1951,7 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 							index: e.index,
 							getItemAriaProps: Pt,
 							columnRange: Ze.value,
-							getColumnWidth: unref(z),
+							getColumnWidth: unref(B),
 							getCellAriaProps: Ft,
 							gap: _.gap,
 							columnGap: _.columnGap,
@@ -1949,7 +1979,7 @@ var VirtualScrollbar_default = /* @__PURE__ */ defineComponent({
 				T.footer ? (openBlock(), createBlock(resolveDynamicComponent(Ct.value), {
 					key: 3,
 					ref_key: "footerRef",
-					ref: ie,
+					ref: re,
 					class: normalizeClass(["virtual-scroll-footer", { "virtual-scroll--sticky": o.stickyFooter }]),
 					role: $.value ? void 0 : "none"
 				}, {