bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/BbTable/BbTable.vue_vue_type_script_setup_true_lang.js

@@ -2,98 +2,109 @@ import { useId as e } from "../../composables/useId.js";
 import { removedPropsFor as t } from "../../deprecation/removedProps.js";
 import { useLogger as n } from "../../composables/useLogger.js";
 import { warnRemovedAttrs as r } from "../../utilities/functions/warnRemovedAttrs.js";
-import i from "../BbBaseButton/BbBaseButton.vue.js";
-import a from "../BbIcon/BbIcon.vue.js";
-import { isNil as o } from "../../utilities/functions/isNil.js";
-import { useLocale as s } from "../../composables/useLocale.js";
-import { useItemsGetter as c } from "../../composables/useItemsGetter.js";
-import { useItemValue as l } from "../../composables/useItemValue.js";
+import { isTopEscapeEntry as i, pushEscapeEntry as a, removeEscapeEntry as o } from "../../utils/overlayEscapeStack.js";
+import s from "../BbBaseButton/BbBaseButton.vue.js";
+import { useLocale as c } from "../../composables/useLocale.js";
+import { isNil as l } from "../../utilities/functions/isNil.js";
 import { hash as u } from "../../utilities/functions/hash.js";
-import { useHashedWatcher as ee } from "../../composables/useHashedWatcher.js";
-import { useBbTableContextHost as te } from "../../composables/useBbTableContext.js";
-import { clamp as ne } from "../../utilities/functions/clamp.js";
-import d from "../BbBaseCheckbox/BbBaseCheckbox.vue.js";
-import { useIndexById as f } from "../../composables/useIndexById.js";
-import { useBaseOptions as re } from "../../composables/useBaseOptions.js";
-import { usePrefill as ie } from "../../composables/usePrefill.js";
-import { parseCount as ae, parsePositiveInteger as p } from "../../utilities/functions/parsePaginationNumber.js";
-import oe from "../BbBaseRadio/BbBaseRadio.vue.js";
-import { when as se } from "../../utilities/functions/when.js";
-import { useTableWidthContext as ce } from "../../composables/useTableWidthContext.js";
-import le from "../../assets/svgs/sort.svg_raw.js";
-import { applyFixedTableColumns as ue, columnKeyToSlotName as de, mergeCellClasses as fe, mergeHeaderClasses as pe, mergeRowClasses as me } from "./utils.js";
-import { Fragment as m, computed as h, createBlock as he, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as ge, createVNode as _e, defineComponent as y, mergeModels as ve, mergeProps as ye, nextTick as be, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as xe, onMounted as Se, openBlock as S, reactive as Ce, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as we, toDisplayString as E, toRef as Te, unref as D, useModel as Ee, watch as O, withCtx as De } from "vue";
+import { useItemsGetter as d } from "../../composables/useItemsGetter.js";
+import { useItemValue as f } from "../../composables/useItemValue.js";
+import { useHashedWatcher as p } from "../../composables/useHashedWatcher.js";
+import { useBbTableContextHost as ee } from "../../composables/useBbTableContext.js";
+import { clamp as te } from "../../utilities/functions/clamp.js";
+import ne from "../BbBaseCheckbox/BbBaseCheckbox.vue.js";
+import { useIndexById as re } from "../../composables/useIndexById.js";
+import { useBaseOptions as ie } from "../../composables/useBaseOptions.js";
+import { usePrefill as ae } from "../../composables/usePrefill.js";
+import { parseCount as oe, parsePositiveInteger as se } from "../../utilities/functions/parsePaginationNumber.js";
+import { when as ce } from "../../utilities/functions/when.js";
+import { useTableWidthContext as le } from "../../composables/useTableWidthContext.js";
+import ue from "./BbTableDataRow.js";
+import de from "./BbTableExpandRow.js";
+import { applyFixedTableColumns as fe, columnKeyToSlotName as pe, completeColumnOrder as me, mergeCellClasses as he, mergeHeaderClasses as ge, mergeRowClasses as _e, moveColumnKey as ve, orderColumns as ye, readResolvedTracks as be, sameColumnOrder as xe } from "./utils.js";
+import { Fragment as m, computed as h, createBlock as Se, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as Ce, defineComponent as we, getCurrentInstance as Te, mergeModels as Ee, mergeProps as De, nextTick as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as Oe, onBeforeUpdate as ke, onMounted as Ae, openBlock as S, reactive as je, ref as C, renderList as Me, renderSlot as w, resolveDynamicComponent as Ne, shallowRef as Pe, toDisplayString as T, toRef as Fe, unref as E, useModel as Ie, useSlots as Le, watch as D, watchEffect as Re, withCtx as ze, withModifiers as Be } from "vue";
+import { defaultRangeExtractor as Ve, elementScroll as He, observeElementOffset as Ue, observeElementRect as We, observeWindowOffset as Ge, observeWindowRect as Ke, useVirtualizer as qe, windowScroll as Je } from "@tanstack/vue-virtual";
 //#region src/components/BbTable/BbTable.vue?vue&type=script&setup=true&lang.ts
-var Oe = {
+var Ye = {
 	key: 0,
 	class: "sr-only"
-}, ke = ["aria-rowcount"], Ae = ["inert"], je = ["aria-rowindex"], Me = { class: "bb-table-header__content" }, Ne = { class: "bb-table-check__label-text sr-only" }, Pe = {
+}, Xe = ["id"], Ze = ["id"], Qe = {
+	"aria-live": "polite",
+	class: "bb-table-loading__text sr-only",
+	role: "status"
+}, $e = {
+	"aria-live": "polite",
+	class: "bb-table__reorder-status sr-only",
+	role: "status"
+}, et = ["aria-labelledby", "aria-rowcount"], tt = ["inert"], nt = ["aria-rowindex"], rt = { class: "bb-table-header__content" }, it = { class: "bb-table-check__label-text sr-only" }, at = {
 	key: 1,
 	class: "bb-table-radio__label-text sr-only"
-}, Fe = ["aria-sort"], Ie = { class: "bb-table-header__content" }, Le = {
+}, ot = [
+	"aria-describedby",
+	"aria-sort",
+	"data-column-key",
+	"tabindex",
+	"onClick",
+	"onFocus",
+	"onKeydown"
+], st = { class: "bb-table-header__content" }, ct = {
 	key: 1,
 	class: "bb-table-header__content"
-}, Re = { class: "bb-table-header__content sr-only" }, ze = ["aria-rowindex"], Be = {
+}, lt = ["onDblclick", "onPointerdown"], ut = { class: "bb-table-header__content sr-only" }, dt = ["aria-rowindex"], ft = {
 	key: 0,
-	class: "bb-table-skeleton__cell bb-table-skeleton__cell--select"
-}, Ve = {
+	class: "bb-table-skeleton__cell bb-table-skeleton__cell--select",
+	role: "cell"
+}, pt = {
 	key: 0,
 	class: "bb-table-skeleton__cell-content"
-}, He = {
+}, mt = {
 	key: 1,
 	class: "bb-table-skeleton__avatar"
-}, Ue = {
+}, ht = {
 	key: 2,
 	class: "bb-table-skeleton__avatar-text"
-}, We = { class: "bb-table-skeleton__cell-content" }, Ge = {
+}, gt = { class: "bb-table-skeleton__cell-content" }, _t = {
 	key: 3,
 	class: "bb-table-skeleton__image"
-}, Ke = {
+}, vt = {
 	key: 4,
 	class: "bb-table-skeleton__badge"
-}, qe = {
+}, yt = {
 	key: 1,
-	class: "bb-table-skeleton__cell bb-table-skeleton__cell--actions"
-}, Je = ["aria-rowindex"], Ye = ["colspan"], Xe = { class: "bb-table-no-data__text" }, Ze = [
-	"aria-current",
-	"aria-rowindex",
-	"inert",
-	"tabindex",
-	"onClick",
-	"onContextmenu",
-	"onDblclick",
-	"onFocus",
-	"onKeydown"
-], Qe = { class: "bb-table-check__label-text sr-only" }, $e = { class: "bb-table-radio__label-text sr-only" }, et = ["id", "aria-rowindex"], tt = ["colspan"], nt = ["aria-rowindex"], rt = ["colspan"], it = { class: "bb-table-loading__text sr-only" }, at = 10, k = /*@__PURE__*/ y({
+	class: "bb-table-skeleton__cell bb-table-skeleton__cell--actions",
+	role: "cell"
+}, bt = ["aria-rowindex"], xt = ["aria-colspan"], St = { class: "bb-table-no-data__text" }, Ct = ["data-index"], wt = ["role"], Tt = 48, Et = 10, Dt = "bb-table-resizing", Ot = 5, kt = 10, At = 500, jt = 40, Mt = 12, Nt = 4, Pt = 12, Ft = "a, button:not(.bb-table-sort), input, select, textarea, [contenteditable], [role=\"button\"], .bb-table-header__resizer", It = 12, Lt = 10, Rt = 600, zt = 120, Bt = 6, Vt = 120, Ht = 10, O = /*@__PURE__*/ we({
 	__name: "BbTable",
-	props: /*@__PURE__*/ ve({
+	props: /*@__PURE__*/ Ee({
 		accessibleLabel: {},
-		actions: { type: Boolean },
 		actionsText: {},
 		align: { default: "left" },
-		id: {},
-		inheritColumnWidths: { type: [Boolean, String] },
-		disableSelectAll: { type: Boolean },
 		caption: {},
 		compact: { type: Boolean },
 		dependencies: { default: () => [] },
 		depsDebounceTime: { default: 0 },
 		disabled: { type: Boolean },
-		enforceCoherence: { type: Boolean },
+		disableSelectAll: { type: Boolean },
 		displayCaption: { type: Boolean },
+		enforceCoherence: { type: Boolean },
+		expandedItems: {},
 		fixed: { type: Boolean },
-		fixedColumns: { default: () => [] },
+		fixedActions: { type: Boolean },
 		fixedHeaders: { type: Boolean },
+		fixedSelect: { type: Boolean },
+		headerRowClass: {},
 		highlighted: {},
+		id: {},
+		inheritColumnWidths: { type: [Boolean, String] },
+		interactiveWhileLoading: { type: Boolean },
 		items: {
 			type: [Array, Function],
 			default: () => []
 		},
-		keyboardNavigation: { type: Boolean },
 		itemValue: {},
+		keyboardNavigation: { type: Boolean },
 		legend: {},
 		loading: { type: Boolean },
-		interactiveWhileLoading: { type: Boolean },
 		loadingText: {},
 		max: { default: Infinity },
 		modelValue: { default: () => [] },
@@ -103,22 +114,24 @@ var Oe = {
 		},
 		name: {},
 		noDataText: {},
+		order: {},
 		page: {},
 		perPage: {},
 		readonly: { type: Boolean },
+		reorderable: { type: Boolean },
+		resizable: { type: Boolean },
 		rowClass: {},
-		headerRowClass: {},
-		selectAll: { type: Boolean },
 		selectable: { type: [Boolean, Function] },
-		sort: {},
-		expandedItems: {},
+		selectAll: { type: Boolean },
 		selectAllLabel: {},
 		selectText: {},
+		sort: {},
 		tdClass: {},
 		thClass: {},
 		totalItems: {},
 		totalPages: {},
 		unselectedItems: { default: () => [] },
+		virtual: { type: Boolean },
 		columns: { default: () => [] }
 	}, {
 		selectAll: {
@@ -132,6 +145,11 @@ var Oe = {
 			default: () => []
 		},
 		sortModifiers: {},
+		order: {
+			required: !1,
+			default: () => []
+		},
+		orderModifiers: {},
 		highlighted: {
 			required: !1,
 			default: void 0
@@ -143,7 +161,7 @@ var Oe = {
 		},
 		expandedItemsModifiers: {}
 	}),
-	emits: /*@__PURE__*/ ve([
+	emits: /*@__PURE__*/ Ee([
 		"click:row",
 		"contextmenu:row",
 		"dblclick:row",
@@ -151,6 +169,9 @@ var Oe = {
 		"update:modelValue",
 		"update:selectAll",
 		"update:sort",
+		"update:order",
+		"resize:column",
+		"hide:column",
 		"update:expandedItems",
 		"update:unselectedItems",
 		"item:selected",
@@ -158,32 +179,392 @@ var Oe = {
 	], [
 		"update:selectAll",
 		"update:sort",
+		"update:order",
 		"update:highlighted",
 		"update:expandedItems"
 	]),
-	setup(y, { emit: ve }) {
-		let k = Ee(y, "selectAll"), A = Ee(y, "sort"), j = Ee(y, "highlighted"), M = Ee(y, "expandedItems"), N = y, P = ve;
+	setup(we, { emit: Ee }) {
+		let O = Ie(we, "selectAll"), k = Ie(we, "sort"), A = Ie(we, "order"), j = Ie(we, "highlighted"), M = Ie(we, "expandedItems"), N = we, P = Ee, F = Le();
 		process.env.NODE_ENV !== "production" && r("BbTable", t("BbTable"));
-		let { getItemValue: ot } = l(), st = e().id.value;
+		let I = C(!!F.actions);
+		ke(() => {
+			let e = !!F.actions;
+			e !== I.value && (I.value = e);
+		});
+		let { getItemValue: Ut } = f(), Wt = e().id.value;
 		N.multiple && !Array.isArray(N.modelValue) && n().throw("BbTable is set for multiple selection but modelValue is not an array.");
-		let ct = ["actions", "select"];
+		let Gt = ["actions", "select"], Kt = ["prepend", "append"], qt = (e) => Kt.includes(e);
 		if (process.env.NODE_ENV !== "production") {
-			let e = N.columns.filter((e) => ct.includes(e.key));
-			for (let t of e) n().warn(`BbTable: \`{ key: '${String(t.key)}' }\` is a reserved column and must not appear in \`columns\`. ` + (t.key === "actions" ? "Set the `actions` prop and fill the `#actions` slot instead." : "Selection is controlled by the `selectable` prop."));
+			let e = N.columns.filter((e) => Gt.includes(e.key));
+			for (let t of e) n().warn(`BbTable: \`{ key: '${String(t.key)}' }\` is a reserved column and must not appear in \`columns\`. ` + (t.key === "actions" ? "Fill the `#actions` slot instead — the slot creates the column." : "Selection is controlled by the `selectable` prop."));
+			for (let e of N.columns) {
+				let t = pe(e.key);
+				qt(t) && n().warn(`BbTable: column key '${String(e.key)}' normalizes to the slot name '${t}', which collides with the table-wide \`#header:${t}\` slot. That name keeps its table-wide meaning and per-column header slots are unavailable for this column.`);
+			}
 		}
-		let { t: F } = s(), I = C(), L = C(), { id: lt, parentId: R, parentNode: ut, cssVars: dt, parentVar: ft, setTracks: pt } = ce({
+		let { t: L } = c(), R = C(), Jt = C(), { id: Yt, parentId: Xt, parentNode: Zt, node: Qt, cssVars: $t, parentVar: en, setTracks: tn } = le({
 			id: () => N.id,
-			container: () => L.value,
+			container: () => Jt.value,
 			inheritFrom: () => typeof N.inheritColumnWidths == "string" ? N.inheritColumnWidths : void 0
-		}), { data: mt } = f({ items: h(() => o(j.value) ? [] : [j.value]) }), z = (e) => {
-			let t = e.valueHash in mt.value;
-			j.value = t ? null : e.value;
-		}, ht = (e, t) => {
-			e.target instanceof Element && (e.target.closest("a, button, input, label, select, textarea, [contenteditable], [role=\"button\"]") || window.getSelection()?.toString() || z(t));
-		}, gt = (e) => A.value.find(([t]) => t === e)?.[1] ?? null, _t = (e) => {
-			let t = gt(e);
-			t === null ? A.value = [...A.value, [e, "asc"]] : t === "asc" ? A.value = A.value.map((t) => t[0] === e ? [e, "desc"] : t) : A.value = A.value.filter(([t]) => t !== e);
-		}, { state: B, isReady: vt } = te(() => lt.value, {
+		}), nn = h(() => `${Yt.value}__caption`), rn = h(() => `${Yt.value}__header_instructions`), an = h(() => !!(N.reorderable || N.resizable)), on = C(/* @__PURE__ */ new Set()), sn = h(() => {
+			let e = new Set(on.value);
+			for (let t of N.columns) t.hidden && e.add(String(t.key));
+			return e;
+		}), cn = h(() => {
+			let e = sn.value;
+			return e.size ? N.columns.filter((t) => !e.has(String(t.key))) : N.columns;
+		}), ln = (e) => {
+			if (sn.value.has(e)) return;
+			let t = vn(e), n = V.value.indexOf(e), r = !!t && t.contains(document.activeElement) && an.value;
+			on.value = /* @__PURE__ */ new Set([...on.value, e]), P("hide:column", e), r && y(() => yn(n));
+		};
+		D(() => N.columns.map((e) => [String(e.key), !!e.hidden]), (e, t) => {
+			if (!t || !on.value.size) return;
+			let n = new Map(t), r = on.value, i = e.filter(([e, t]) => n.has(e) && n.get(e) !== t && r.has(e) && !t);
+			if (!i.length) return;
+			let a = new Set(r);
+			for (let [e] of i) a.delete(e);
+			on.value = a;
+		});
+		let un = h(() => N.columns.map((e) => String(e.key))), z = C(null), B = h(() => {
+			let e = cn.value, t = z.value ?? A.value;
+			if (!t.length) return e;
+			let n = ye(e, t);
+			return n.every((t, n) => t === e[n]) ? e : n;
+		}), V = h(() => B.value.map((e) => String(e.key))), dn = (e, t) => {
+			let n = me(A.value, un.value), r = ve(A.value, un.value, e, t, sn.value);
+			return xe(r, n) ? null : r;
+		}, fn = C("");
+		D(() => N.reorderable, () => {
+			fn.value = "";
+		});
+		let pn = (e, t) => {
+			let n = B.value, r = n.findIndex((t) => String(t.key) === e);
+			r < 0 || r === t || (fn.value = L("table.columnMoved", n[r].label, r + 1, n.length).value);
+		}, mn = C(null), hn = h(() => {
+			let e = V.value, t = mn.value;
+			return t !== null && e.includes(t) ? t : e[0] ?? null;
+		}), gn = (e, t) => {
+			if (!t.sortable) return;
+			let n = e.target;
+			if (!(n instanceof Element)) return;
+			let r = e.currentTarget;
+			if (n.closest(".bb-table-sort")) return;
+			let i = n.closest(Ft);
+			i && r.contains(i) || window.getSelection()?.toString() || yr(t.key);
+		}, _n = (e) => {
+			an.value && (mn.value = e);
+		}, vn = (e) => R.value?.querySelector(`:scope > .bb-table__head > .bb-table-header-row > [data-column-key="${CSS.escape(e)}"]`) ?? null, yn = (e) => {
+			let t = V.value, n = t[Math.max(0, Math.min(t.length - 1, e))];
+			n && (mn.value = n, vn(n)?.focus());
+		}, bn = async (e, t) => {
+			if (!an.value) return;
+			let n = e.currentTarget, r = e.target;
+			if (!(r instanceof Element) || r !== n && !r.closest(".bb-table-sort")) return;
+			let i = getComputedStyle(n).direction === "rtl";
+			if (e.altKey && !e.ctrlKey && !e.metaKey) {
+				if (!xn.value || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+				e.preventDefault();
+				let r = e.key === "ArrowRight" !== i, a = H.value[t] ?? n.getBoundingClientRect().width;
+				kn({ [t]: a + (r ? 1 : -1) * Et });
+				return;
+			}
+			if (e.ctrlKey || e.metaKey) return;
+			let a = V.value, o = a.indexOf(t);
+			if (o < 0) return;
+			let s;
+			switch (e.key) {
+				case "ArrowLeft":
+					s = i ? o + 1 : o - 1;
+					break;
+				case "ArrowRight":
+					s = i ? o - 1 : o + 1;
+					break;
+				case "Home":
+					s = 0;
+					break;
+				case "End":
+					s = a.length - 1;
+					break;
+				case "Enter":
+				case " ":
+					if (r !== n || !B.value[o]?.sortable) return;
+					e.preventDefault(), yr(t);
+					return;
+				default: return;
+			}
+			if (e.preventDefault(), !e.shiftKey) {
+				yn(s);
+				return;
+			}
+			if (!N.reorderable) return;
+			let c = dn(t, s);
+			c && (fn.value = "", A.value = c, mn.value = t, await y(), vn(t)?.focus(), pn(t, o));
+		};
+		process.env.NODE_ENV !== "production" && (D(A, (e) => {
+			new Set(e).size !== e.length && n().warn("BbTable: `order` lists a key more than once — the first occurrence wins.");
+		}, { immediate: !0 }), D(() => N.columns.some((e) => e.snap != null) && (!!N.reorderable || B.value !== N.columns), (e) => {
+			e && n().warn("BbTable: `snap` names a PARENT column and the child renders in its own order — it does not compose with `order` / `reorderable` / a `hidden` column on the snapped table itself. Order and hide on the parent (a key-snapped child follows it), or drop the snaps.");
+		}, { immediate: !0 }));
+		let xn = h(() => !!N.resizable && !J.value), H = C({}), U = C(null), Sn = C(null), Cn = (e) => {
+			let t = String(e.key);
+			return U.value?.[t] ?? H.value[t] ?? e.width ?? (Y.value ? X.value[t] : void 0);
+		}, wn = (e) => {
+			let t = String(e.key);
+			return U.value?.[t] !== void 0 || t in H.value;
+		}, Tn = h(() => Object.keys(U.value ?? {}).join(" ")), En = h(() => /* @__PURE__ */ new Set([...Object.keys(H.value), ...Tn.value.split(" ").filter(Boolean)])), Dn = h(() => {
+			let e = /* @__PURE__ */ new Map(), t = En.value, n = Y.value, r = X.value;
+			for (let i of B.value) {
+				let a = String(i.key), o = n && i.width == null, s = [];
+				o && s.push("bb-table-data__cell--nowrap"), t.has(a) && s.push("bb-table-data__cell--resized"), (t.has(a) || o && a in r) && s.push("bb-table-data__cell--clip"), s.length && e.set(a, s.join(" "));
+			}
+			return e;
+		}), On = h(() => U.value !== null || Object.keys(H.value).length > 0), kn = (e) => {
+			let t = { ...H.value }, n = [];
+			for (let [r, i] of Object.entries(e)) {
+				let e = Math.max(Tt, Math.round(i));
+				t[r] !== e && (t[r] = e, n.push([r, e]));
+			}
+			if (n.length) {
+				H.value = t;
+				for (let [e, t] of n) P("resize:column", e, t);
+			}
+		}, An = (e) => {
+			if (!(e in H.value)) return;
+			let { [e]: t, ...n } = H.value;
+			H.value = n, P("resize:column", e, null);
+		};
+		D(() => N.columns.map((e) => [String(e.key), e.width]), (e, t) => {
+			if (!t || !Object.keys(H.value).length) return;
+			let n = new Map(t), r = H.value, i = e.filter(([e, t]) => n.has(e) && n.get(e) !== t && e in r && t !== r[e]);
+			if (!i.length) return;
+			let a = { ...r };
+			for (let [e] of i) delete a[e];
+			H.value = a;
+		});
+		let W = null, jn = () => {
+			document.removeEventListener("pointermove", Nn), document.removeEventListener("pointerup", Pn), document.removeEventListener("pointercancel", Fn), document.removeEventListener("keydown", In, !0), window.removeEventListener("blur", Fn);
+		}, Mn = () => {
+			if (jn(), W) try {
+				W.handle.releasePointerCapture(W.pointerId);
+			} catch {}
+			document.documentElement.classList.remove(Dt), W = null, U.value = null, Sn.value = null, R.value && (R.value.style.gridTemplateColumns = ai.value);
+		}, Nn = (e) => {
+			if (!W || e.pointerId !== W.pointerId) return;
+			let t = (e.clientX - W.x0) * (W.rtl ? -1 : 1);
+			t = Math.max(Tt - W.startWidth, t);
+			let { neighbour: n } = W;
+			if (e.shiftKey && n) {
+				t = Math.min(n.startWidth - Tt, t), U.value = {
+					[W.key]: Math.round(W.startWidth + t),
+					[n.key]: Math.round(n.startWidth - t)
+				};
+				return;
+			}
+			U.value = { [W.key]: Math.round(W.startWidth + t) };
+		}, Pn = (e) => {
+			if (!W || e.pointerId !== W.pointerId) return;
+			let { key: t, startWidth: n, neighbour: r } = W, i = U.value;
+			if (Mn(), !i) return;
+			let a = {};
+			i[t] !== Math.round(n) && (a[t] = i[t]), r && i[r.key] !== void 0 && i[r.key] !== Math.round(r.startWidth) && (a[r.key] = i[r.key]), kn(a);
+		}, Fn = (e) => {
+			W && (e instanceof PointerEvent && e.pointerId !== W.pointerId || Mn());
+		}, In = (e) => {
+			!W || e.key !== "Escape" || (e.preventDefault(), e.stopImmediatePropagation(), Mn());
+		}, Ln = (e, t) => {
+			if (!xn.value || Oi.value || W || !e.isPrimary || e.button !== 0) return;
+			let n = vn(t);
+			if (!n) return;
+			e.preventDefault();
+			let r = e.currentTarget;
+			try {
+				r.setPointerCapture(e.pointerId);
+			} catch {}
+			document.documentElement.classList.add(Dt);
+			let i = V.value, a = i[i.indexOf(t) + 1], o = a ? vn(a) : null;
+			W = {
+				pointerId: e.pointerId,
+				handle: r,
+				key: t,
+				x0: e.clientX,
+				startWidth: n.getBoundingClientRect().width,
+				neighbour: a && o ? {
+					key: a,
+					startWidth: o.getBoundingClientRect().width
+				} : null,
+				rtl: getComputedStyle(n).direction === "rtl"
+			}, Sn.value = t, document.addEventListener("pointermove", Nn), document.addEventListener("pointerup", Pn), document.addEventListener("pointercancel", Fn), document.addEventListener("keydown", In, !0), window.addEventListener("blur", Fn);
+		};
+		Oe(Mn);
+		let G = C("idle"), Rn = C(null), zn = C(""), Bn = C(), Vn = Symbol("bb-table-column-drag"), K = null, Hn = (e) => Math.max(0, Math.min(1, e)), Un = () => {
+			let e = Or.value ? Jt.value?.parentElement ?? null : Jt.value ?? null;
+			for (; e;) {
+				let t = getComputedStyle(e).overflowX;
+				if (t === "auto" || t === "scroll") return e;
+				e = e.parentElement;
+			}
+			return null;
+		}, Wn = () => {
+			let e = K?.scrollport?.getBoundingClientRect(), t = Math.max(e?.left ?? 0, 0), n = Math.min(e?.right ?? window.innerWidth, window.innerWidth);
+			return {
+				left: t,
+				right: Math.max(t + 1, n)
+			};
+		}, Gn = (e) => Array.from(e.children).filter((e) => e instanceof HTMLElement && e.classList.contains("bb-table-header") && !!e.dataset.columnKey), Kn = () => {
+			let e = Bn.value;
+			e?.isConnected && !e.matches(":popover-open") && e.showPopover();
+		}, qn = () => {
+			let e = Bn.value;
+			e && e.matches(":popover-open") && e.hidePopover();
+		}, Jn = (e, t) => {
+			let n = Bn.value;
+			n && (n.style.translate = `${e + Pt}px ${t + Pt}px`);
+		}, Yn = (e) => {
+			if (!K || G.value !== "dragging") return;
+			let t = Wn(), n = Math.max(t.left, Math.min(e, t.right - 1)), r = Gn(K.row);
+			if (r.length < 2) return;
+			let i = (e) => e.style.position === "sticky", a = new Map(r.map((e) => [e, e.getBoundingClientRect()])), o = [...r.filter(i), ...r.filter((e) => !i(e))].filter((e) => e.dataset.columnKey !== K.key), s = V.value, c = s.indexOf(K.key);
+			if (c < 0) return;
+			let l = Infinity, u = -Infinity;
+			for (let e of a.values()) l = Math.min(l, e.left), u = Math.max(u, e.right);
+			let d, f;
+			if (n < l) d = "\0start", f = K.rtl ? s.length - 1 : 0;
+			else if (n >= u) d = "\0end", f = K.rtl ? 0 : s.length - 1;
+			else {
+				let e = o.find((e) => {
+					let t = a.get(e);
+					return n >= t.left && n < t.right;
+				});
+				if (!e) return;
+				d = e.dataset.columnKey, f = s.indexOf(d);
+			}
+			if (f < 0 || f === c) return;
+			let p = f > c;
+			if (K.target?.key === d && K.target.after === p) return;
+			let ee = ve(K.base, un.value, K.key, f, sn.value);
+			if (xe(ee, z.value ?? K.base)) {
+				K.target = {
+					key: d,
+					after: p
+				};
+				return;
+			}
+			((K.rtl ? !p : p) ? n <= K.lastMoveX + Nt : n >= K.lastMoveX - Nt) || (K.target = {
+				key: d,
+				after: p
+			}, K.lastMoveX = n, z.value = ee);
+		}, Xn = () => {
+			if (!K || G.value !== "dragging" || !K.scrollDirection) {
+				K && (K.raf = void 0);
+				return;
+			}
+			let e = Wn(), t = K.scrollDirection < 0 ? K.lastX - e.left : e.right - K.lastX, n = Math.ceil(Mt * (1 - Hn(t / jt))), r = K.scrollport ?? document.scrollingElement;
+			r && (r.scrollLeft += K.scrollDirection * n), Yn(K.lastX), K.raf = requestAnimationFrame(Xn);
+		}, Zn = () => {
+			if (!K) return;
+			let e = Wn(), t = K.lastX - e.left, n = e.right - K.lastX;
+			K.scrollDirection = t < jt ? -1 : +(n < jt), K.scrollDirection && K.raf === void 0 && (K.raf = requestAnimationFrame(Xn));
+		}, Qn = () => {
+			document.removeEventListener("pointermove", nr), document.removeEventListener("pointerup", rr), document.removeEventListener("pointercancel", ir), document.removeEventListener("keydown", or, !0), document.removeEventListener("dragstart", sr), document.removeEventListener("contextmenu", sr, !0), window.removeEventListener("blur", ir), K?.row.removeEventListener("lostpointercapture", ar);
+		}, $n = () => {
+			if (K) {
+				clearTimeout(K.timer), K.raf !== void 0 && cancelAnimationFrame(K.raf), Qn();
+				try {
+					K.row.hasPointerCapture(K.pointerId) && K.row.releasePointerCapture(K.pointerId);
+				} catch {}
+				qn(), o(Vn), Rn.value = null, z.value = null, G.value = "idle", K = null;
+			}
+		}, er = () => {
+			K && (K.raf !== void 0 && cancelAnimationFrame(K.raf), K.raf = void 0, K.scrollDirection = 0, qn(), o(Vn), Rn.value = null, z.value = null, G.value = "cancelled");
+		}, tr = () => {
+			if (!(!K || G.value !== "armed")) {
+				clearTimeout(K.timer), K.timer = void 0;
+				try {
+					K.row.setPointerCapture(K.pointerId);
+				} catch {}
+				K.row.addEventListener("lostpointercapture", ar), K.base = me(A.value, un.value), K.rtl = getComputedStyle(K.row).direction === "rtl", K.scrollport = Un(), K.lastMoveX = K.x0, K.target = null, z.value = K.base, Rn.value = K.key, zn.value = K.label, G.value = "dragging", a(Vn), Kn(), Jn(K.lastX, K.lastY), Yn(K.lastX), Zn();
+			}
+		}, nr = (e) => {
+			if (!(!K || e.pointerId !== K.pointerId)) {
+				if (K.lastX = e.clientX, K.lastY = e.clientY, G.value === "armed") {
+					let t = Math.hypot(e.clientX - K.x0, e.clientY - K.y0);
+					if (K.pointerType === "touch") {
+						t >= kt && $n();
+						return;
+					}
+					if (t < Ot) return;
+					tr();
+					return;
+				}
+				G.value === "dragging" && (Jn(e.clientX, e.clientY), Yn(e.clientX), Zn());
+			}
+		}, rr = (e) => {
+			if (!K || e.pointerId !== K.pointerId) return;
+			let { key: t } = K, n = K.base ? K.base.filter((e) => un.value.includes(e) && !sn.value.has(e)).indexOf(t) : -1, r = G.value === "dragging" && z.value !== null && !xe(z.value, K.base) ? z.value : null;
+			$n(), r && (fn.value = "", A.value = r, y(() => pn(t, n)));
+		}, ir = (e) => {
+			K && (e instanceof PointerEvent && e.pointerId !== K.pointerId || $n());
+		}, ar = () => {
+			K && G.value === "dragging" && $n();
+		}, or = (e) => {
+			!K || G.value !== "dragging" || e.key !== "Escape" || !i(Vn) || (e.preventDefault(), e.stopImmediatePropagation(), er());
+		}, sr = (e) => {
+			K && G.value !== "idle" && e.preventDefault();
+		}, cr = (e) => {
+			if (!N.reorderable || Oi.value || F.thead || !e.isPrimary || e.button !== 0 || K || B.value.length < 2) return;
+			let t = e.target;
+			if (!(t instanceof Element)) return;
+			let n = e.currentTarget, r = t.closest(".bb-table-header");
+			if (!r || r.parentElement !== n || !r.dataset.columnKey) return;
+			let i = t.closest(Ft);
+			if (i && r.contains(i)) return;
+			let a = r.dataset.columnKey, o = B.value.find((e) => String(e.key) === a);
+			o && (K = {
+				pointerId: e.pointerId,
+				pointerType: e.pointerType,
+				key: a,
+				label: o.label,
+				row: n,
+				x0: e.clientX,
+				y0: e.clientY,
+				lastX: e.clientX,
+				lastY: e.clientY,
+				lastMoveX: e.clientX,
+				rtl: !1,
+				base: [],
+				scrollport: null,
+				target: null,
+				timer: void 0,
+				raf: void 0,
+				scrollDirection: 0
+			}, G.value = "armed", document.addEventListener("pointermove", nr), document.addEventListener("pointerup", rr), document.addEventListener("pointercancel", ir), document.addEventListener("keydown", or, !0), document.addEventListener("dragstart", sr), document.addEventListener("contextmenu", sr, !0), window.addEventListener("blur", ir), e.pointerType === "touch" && (K.timer = setTimeout(tr, At)));
+		}, lr = (e) => {
+			K && (G.value === "dragging" || G.value === "cancelled") && e.cancelable && e.preventDefault();
+		};
+		Oe($n);
+		let { data: ur } = re({ items: h(() => l(j.value) ? [] : [j.value]) }), dr = h(() => j.value !== void 0 || q.highlighted !== void 0), fr = Te(), pr = () => {
+			let e = fr?.vnode.props ?? {};
+			return "highlighted" in e || "onUpdate:highlighted" in e;
+		};
+		process.env.NODE_ENV !== "production" && D(() => j.value === void 0 && pr(), (e) => {
+			e && n().warn("BbTable: `highlighted` is bound but its value is `undefined`, so the highlight mechanic stays off. Initialise it to `null` — `ref(null)`, not `ref()` — to be considered bound. `undefined` means \"never initialised\" and switches highlight off entirely; `null` means \"initialised and currently empty\".");
+		}, { immediate: !0 });
+		let mr = !1, hr = () => {
+			process.env.NODE_ENV !== "production" && (mr || (mr = !0, n().warn("BbTable: `toggleHighlighted` was called from a slot, but highlight is not connected, so nothing happened. Bind `v-model:highlighted` (initialised to `null`), or seed `highlighted` through `useBbTableContext(id, { highlighted })`, or drop the call — with nothing bound the table has nowhere to put the value.")));
+		}, gr = (e, { viaSlot: t = !1 } = {}) => {
+			if (!dr.value) {
+				t && hr();
+				return;
+			}
+			let n = e.valueHash in ur.value;
+			j.value = n ? null : e.value;
+		}, _r = (e, t) => {
+			e.target instanceof Element && (e.target.closest("a, button, input, label, select, textarea, [contenteditable], [role=\"button\"]") || window.getSelection()?.toString() || gr(t));
+		}, vr = (e) => k.value.find(([t]) => t === e)?.[1] ?? null, yr = (e) => {
+			let t = vr(e);
+			t === null ? k.value = [...k.value, [e, "asc"]] : t === "asc" ? k.value = k.value.map((t) => t[0] === e ? [e, "desc"] : t) : k.value = k.value.filter(([t]) => t !== e);
+		}, { state: q, isReady: br } = ee(() => Yt.value, {
 			selected: {
 				get: () => N.modelValue,
 				set: (e) => P("update:modelValue", e)
@@ -193,378 +574,770 @@ var Oe = {
 				set: (e) => P("update:unselectedItems", e)
 			},
 			all: {
-				get: () => k.value,
+				get: () => O.value,
 				set: (e) => {
-					k.value = e;
+					O.value = e;
 				}
 			},
 			sort: {
-				get: () => A.value,
+				get: () => k.value,
 				set: (e) => {
-					A.value = e;
+					k.value = e;
 				}
 			},
 			highlighted: {
-				get: () => j.value ?? null,
+				get: () => j.value,
 				set: (e) => {
 					j.value = e;
 				}
 			},
-			page: { get: () => N.page === void 0 ? void 0 : p(N.page, 1) },
+			page: { get: () => N.page === void 0 ? N.virtual ? 1 : void 0 : se(N.page, 1) },
 			perPage: {
-				get: () => ae(N.perPage),
+				get: () => oe(N.perPage),
 				infer: () => Array.isArray(N.items) ? N.items.length : void 0
 			},
 			totalItems: {
-				get: () => ae(N.totalItems),
+				get: () => oe(N.totalItems),
 				infer: () => Array.isArray(N.items) ? N.items.length : void 0
 			},
-			totalPages: { get: () => N.totalPages === void 0 ? void 0 : p(N.totalPages, 1) }
-		}), yt = h(() => N.columns.some((e) => e.snap != null)), V = h(() => !!N.inheritColumnWidths || yt.value), H = h(() => N.fixed || yt.value || N.columns.some((e) => e.width != null) || V.value && !!R.value), bt = h(() => V.value && !!R.value), xt = bt, St = (e) => {
+			totalPages: { get: () => N.totalPages === void 0 ? void 0 : se(N.totalPages, 1) }
+		}), xr = h(() => N.columns.some((e) => e.snap != null)), Sr = h(() => !!N.inheritColumnWidths || xr.value), Cr = h(() => N.fixed || xr.value || cn.value.some((e) => e.width != null) || On.value || Sr.value && !!Xt.value), J = h(() => Sr.value && !!Xt.value);
+		Re(() => {
+			Qt.ordered = !!N.reorderable || A.value.length > 0;
+		});
+		let Y = h(() => !!N.virtual && !J.value && !F.tbody), X = C({}), wr = C({}), Tr = C(""), Er = h(() => Y.value && !!Tr.value && ni.value.every((e) => !e.contentSized)), Dr = (e) => Y.value && e.width == null && !wn(e) && String(e.key) in X.value, Or = J, kr = (e) => {
 			if (typeof e == "number") return `${e}px`;
 			let t = e.trim();
 			return /^-?\d*\.?\d+$/.test(t) ? `${t}px` : t;
-		}, Ct = h(() => {
-			let e = ut.value?.tracks;
-			return e ? Object.keys(e).filter((e) => /^\d+$/.test(e)).length : 0;
-		}), wt = h(() => {
-			let e = ut.value?.tracks ?? {}, t = [];
-			"select" in e && t.push("select");
-			for (let e = 0; e < Ct.value; e++) t.push(String(e));
-			return "actions" in e && t.push("actions"), t;
-		}), Tt = h(() => +("select" in (ut.value?.tracks ?? {}))), Et = h(() => Tt.value + Ct.value), Dt = h(() => wt.value.length), Ot = (e) => {
-			let t = wt.value[e];
-			return t ? ft(t, "0px") : "0px";
-		}, kt = (e, t) => {
-			if (!R.value || t - e <= 1e-6) return null;
+		}, Ar = h(() => Zt.value?.keys ?? []), jr = h(() => +(Ar.value[0] === "select")), Mr = h(() => Ar.value.length), Nr = h(() => {
+			let e = Ar.value;
+			return e[e.length - 1] === "actions" ? e.length - 1 : e.length;
+		}), Pr = (e) => Ar.value.indexOf(e), Fr = (e) => {
+			let t = Ar.value[e];
+			return t ? en(t, "0px") : "0px";
+		}, Ir = (e, t) => {
+			if (!Xt.value || t - e <= 1e-6) return null;
 			let n = [];
 			for (let r = Math.floor(e); r < Math.ceil(t - 1e-6); r++) {
 				let i = Math.min(t, r + 1) - Math.max(e, r);
 				if (i <= 1e-6) continue;
-				let a = Ot(r);
+				let a = Fr(r);
 				n.push(i >= .999999 ? a : `${Number(i.toFixed(4))} * ${a}`);
 			}
 			return n.length ? n.length === 1 && !n[0].includes("*") ? n[0] : `calc(${n.join(" + ")})` : null;
-		}, At = h(() => {
-			let e = N.columns, t = e.map((e) => typeof e.snap == "number" ? e.snap : Array.isArray(e.snap) ? e.snap[0] : null), n = Tt.value;
-			return e.map((e, r) => {
-				let i = t[r] ?? n, a;
-				if (Array.isArray(e.snap)) a = e.snap[1] === -1 ? Et.value : e.snap[1];
-				else {
-					let e = t[r + 1];
-					a = e != null && e > i ? e : Math.floor(i) + 1;
-				}
-				return n = a, {
-					start: i,
-					end: a
+		}, Lr = (e) => {
+			let t = /^(.+)\.(\d+)$/.exec(e);
+			return t ? {
+				key: t[1],
+				fraction: Number(`0.${t[2]}`)
+			} : {
+				key: e,
+				fraction: 0
+			};
+		}, Rr = (e) => {
+			if (Array.isArray(e)) {
+				let t = Lr(e[0]), n = Lr(e[1]), r = Pr(t.key), i = Pr(n.key);
+				if (r < 0 || i < 0) return null;
+				let a = r + t.fraction, o = n.fraction > 0 ? i + n.fraction : i + 1;
+				return o > a ? {
+					start: a,
+					end: o,
+					explicit: !0
+				} : null;
+			}
+			let t = Lr(e), n = Pr(t.key);
+			if (n < 0) {
+				let t = Pr(e);
+				return t < 0 ? null : {
+					start: t,
+					end: t + 1,
+					explicit: !1
 				};
+			}
+			return {
+				start: n,
+				end: n + 1,
+				explicit: !1
+			};
+		}, zr = h(() => !!Zt.value?.ordered), Br = h(() => {
+			let e = B.value, t = jr.value, n = Nr.value, r = Mr.value, i = zr.value, a = e.map(() => null), o = /* @__PURE__ */ new Set(), s = (e) => {
+				for (let t = Math.floor(e.start); t < e.end - 1e-6; t++) o.add(t);
+			};
+			i || (e.forEach((e, t) => {
+				if (e.snap == null) return;
+				let n = Rr(e.snap);
+				n && (a[t] = {
+					...n,
+					overflow: !1
+				}, s(a[t]));
+			}), e.forEach((e, r) => {
+				if (a[r] || e.snap != null) return;
+				let i = Pr(String(e.key));
+				i < t || i >= n || o.has(i) || (a[r] = {
+					start: i,
+					end: i + 1,
+					explicit: !1,
+					overflow: !1
+				}, o.add(i));
+			}));
+			let c = 0, l = 0, u = e.map((i, s) => {
+				let u = a[s], d;
+				if (u && u.start + 1e-6 < c && (a[s] = null, u = null, d = String(i.key)), !u) {
+					let i = Math.max(c, t), f = n;
+					for (let t = s + 1; t < e.length; t++) {
+						let e = a[t];
+						e && (f = Math.min(f, e.start));
+					}
+					let p = Math.max(Math.floor(i), t);
+					for (; p < f && o.has(p);) p++;
+					if (p < f && p + 1e-6 >= i) o.add(p), u = {
+						start: i,
+						end: p + 1,
+						explicit: !1,
+						overflow: !1
+					};
+					else if (p < f) o.add(p), u = {
+						start: i,
+						end: p + 1,
+						explicit: !1,
+						overflow: !1
+					};
+					else {
+						let e = Math.max(r, n) + l++;
+						u = {
+							start: e,
+							end: e + 1,
+							explicit: !1,
+							overflow: !0
+						};
+					}
+					d && (u.demoted = d);
+				}
+				return c = Math.max(c, u.end), u;
 			});
-		}), jt = (e) => bt.value && e.start >= Et.value, Mt = h(() => At.value.some(jt)), Nt = (e) => N.columns[e]?.width == null && !bt.value, Pt = h(() => {
-			if (!bt.value) return -1;
-			for (let e = N.columns.length - 1; e >= 0; e--) {
-				let t = N.columns[e];
-				if (t.width == null && t.snap == null) return e;
+			return u.forEach((t, r) => {
+				if (t.overflow || t.explicit) return;
+				let i = u[r + 1];
+				i && !i.overflow && i.start > t.end && (t.end = i.start), r === e.length - 1 && e[r].width == null && (t.end = Math.max(t.end, n));
+			}), u;
+		}), Vr = (e) => J.value && e.overflow;
+		process.env.NODE_ENV !== "production" && (D(() => xr.value && zr.value, (e) => {
+			e && n().warn("BbTable: `snap` targets are ignored under a parent that uses `order` / `reorderable` — the parent's columns can move, so the child inherits by position. Keep the parent's order static (no `reorderable`, an empty `order`) to snap by key.");
+		}, { immediate: !0 }), D(() => Br.value.find((e) => e.demoted)?.demoted ?? null, (e) => {
+			e !== null && n().warn(`BbTable: column '${e}' snaps to a parent column that sits BEFORE the column preceding it — the child's order disagrees with the parent's, so the snap cannot tile and the column flows into the next free parent track instead. Declare the child's columns in the parent's order.`);
+		}, { immediate: !0 }));
+		let Hr = h(() => Br.value.some(Vr)), Ur = (e) => {
+			let t = B.value[e];
+			return (t ? Cn(t) : null) == null && !J.value;
+		}, Wr = h(() => {
+			if (!J.value) return -1;
+			let e = B.value;
+			for (let t = e.length - 1; t >= 0; t--) {
+				let n = e[t];
+				if (n.width == null && n.snap == null) return t;
 			}
 			return -1;
-		}), Ft = h(() => {
-			let e = At.value[0];
-			if (!V.value || !R.value || !e) return null;
-			let t = kt(0, e.start), n = N.selectable ? U.select : null;
-			return n ? `calc(${t ?? "0px"} - ${n})` : t;
-		}), It = h(() => {
-			let e = At.value, t = e[e.length - 1];
-			if (!V.value || !R.value || !t || Mt.value || Pt.value === N.columns.length - 1) return null;
-			let n = kt(t.end, Dt.value), r = N.actions ? U.actions : null;
-			return r ? `calc(${n ?? "0px"} - ${r})` : n;
-		}), Lt = h(() => Ft.value !== null), Rt = h(() => It.value !== null), U = Ce({
-			select: null,
-			actions: null
-		}), zt = h(() => {
-			let e = (e) => V.value ? ft(e) : "auto", t = (t) => H.value && U[t] ? U[t] : e(t), n = [];
-			N.selectable && n.push({
+		}), Gr = h(() => {
+			let e = Br.value[0];
+			return !Sr.value || !Xt.value || !e ? null : Ir(0, e.start);
+		}), Kr = h(() => {
+			let e = Br.value, t = e[e.length - 1];
+			return !Sr.value || !Xt.value || !t || Hr.value ? null : Ir(t.end, Mr.value);
+		}), qr = (e) => Qt.tracks[e] ?? null, Jr = (e, t, n) => !Sr.value || !Xt.value ? null : n ? t ? `calc(${e ?? "0px"} - ${t})` : null : e, Yr = h(() => Jr(Gr.value, N.selectable ? qr("select") : null, !!N.selectable)), Xr = h(() => Hr.value ? null : Jr(Kr.value, I.value ? qr("actions") : null, I.value)), Zr = h(() => Yr.value !== null), Qr = h(() => Xr.value !== null), $r = (e, t) => {
+			let n = Y.value ? wr.value[t] : null;
+			return n == null ? e && ei.value ? `minmax(${e}, max-content)` : "max-content" : `${n}px`;
+		}, ei = h(() => Object.keys(Zt.value?.tracks ?? {}).length > 0), ti = (e) => /^(auto|min-content|max-content|fit-content\(.*\)|-?[\d.]+fr)$/.test(e.trim()), ni = h(() => {
+			let e = [];
+			N.selectable && e.push({
 				key: "select",
-				width: t("select")
+				width: $r(Gr.value, "select"),
+				contentSized: wr.value.select == null
 			});
-			let r = N.columns.length - 1;
-			return N.columns.forEach((e, t) => {
-				let i = String(t), a = e.width == null ? null : St(e.width), o = At.value[t];
-				if (t === Pt.value && !Mt.value) {
-					n.push({
-						key: i,
-						width: "auto"
+			let t = B.value, n = t.length - 1, r = !J.value && t.length > 0 && t.every((e) => e.width != null);
+			return t.forEach((t, i) => {
+				let a = String(t.key), o = Cn(t), s = o == null ? null : kr(o), c = Br.value[i], l = null, u = null;
+				if (s != null && ti(s) ? u = s : s != null && r && !wn(t) ? u = `minmax(${s}, ${parseFloat(s) || 1}fr)` : s != null && Dr(t) ? u = `minmax(${s}, 1fr)` : s == null ? Ur(i) ? u = N.fixed ? "minmax(0, 1fr)" : "auto" : ei.value ? Vr(c) ? u = "min-content" : (l = Ir(c.start, c.end), l === null && (u = "auto")) : u = "max-content" : l = s, u !== null) {
+					e.push({
+						key: a,
+						width: u,
+						contentSized: /^(auto|min-content|max-content)$/.test(u)
 					});
 					return;
 				}
-				let s;
-				s = a ?? (Nt(t) ? H.value && Kt.value[t] || null : jt(o) ? qt.value[t] ?? null : kt(o.start, o.end));
-				let c = [];
-				t === 0 && Lt.value && c.push("var(--offset-internal-start, 0px)"), t === r && Rt.value && c.push("var(--offset-internal-end, 0px)");
-				let l = c.length ? `calc(${[...c, s ?? "0px"].join(" + ")})` : s ?? "auto";
-				n.push({
-					key: i,
-					width: l
+				let d = [];
+				i === 0 && Zr.value && d.push("var(--offset-internal-start, 0px)"), i === n && Qr.value && d.push("var(--offset-internal-end, 0px)");
+				let f = d.length ? `calc(${[...d, l].join(" + ")})` : l, p = i === Wr.value && !Hr.value ? `minmax(${f}, 1fr)` : f;
+				e.push({
+					key: a,
+					width: p,
+					contentSized: !1
 				});
-			}), N.actions && n.push({
+			}), I.value && e.push({
 				key: "actions",
-				width: t("actions")
-			}), n;
-		}), Bt = h(() => {
+				width: $r(Kr.value, "actions"),
+				contentSized: wr.value.actions == null
+			}), e;
+		}), ri = h(() => {
+			let e = B.value, t = [];
+			for (let n of ni.value) n.contentSized || e.some((e) => String(e.key) === n.key) && t.push(n.key);
+			return t.join(" ");
+		}), ii = h(() => new Set(ri.value.split(" ").filter(Boolean))), ai = h(() => ni.value.map((e) => e.width).join(" ")), oi = C(ai.value), si = h(() => `grid-template-columns: ${oi.value}`);
+		D(ai, (e) => {
+			if (W && R.value) {
+				R.value.style.gridTemplateColumns = e;
+				return;
+			}
+			oi.value = e;
+		}, { flush: "sync" });
+		let ci = h(() => {
 			let e = {};
-			return Ft.value && (e["--offset-start"] = Ft.value), It.value && (e["--offset-end"] = It.value), e;
-		}), Vt = h(() => {
-			let e = {
-				...dt.value,
-				...Bt.value
-			};
-			return Jt.value && (e["--natural-width"] = Jt.value), W.value > 0 && (e["--fill"] = `${W.value}px`), e;
-		}), Ht = () => Array.from(I.value?.querySelectorAll(":scope > thead > tr.bb-table-header-row > th") ?? []), Ut = () => {
-			let e = zt.value.map((e) => e.key), t = {};
-			Ht().forEach((n, r) => {
-				let i = e[r];
-				i != null && (t[i] = `${n.getBoundingClientRect().width}px`);
-			}), pt(t);
-		}, Wt = () => {
-			let e = I.value;
-			if (!e) return;
-			let t = [
-				"block",
-				"flex",
-				"grid",
-				"flow-root",
-				"list-item"
-			], n = [
-				"BUTTON",
-				"INPUT",
-				"SELECT",
-				"TEXTAREA",
-				"IMG",
-				"svg",
-				"VIDEO",
-				"CANVAS"
-			], r = (e) => {
-				let i = getComputedStyle(e), a = i.display.includes("flex") || i.display.includes("grid"), o = 0, s = 0;
-				if (e.querySelectorAll(":scope > *").forEach((e) => {
-					let i = getComputedStyle(e);
-					if (i.position === "absolute" || i.position === "fixed") return;
-					let c = parseFloat(i.marginLeft) + parseFloat(i.marginRight), l = !a && !n.includes(e.tagName) && i.cssFloat === "none" && t.includes(i.display) ? r(e) + parseFloat(i.paddingLeft) + parseFloat(i.paddingRight) + parseFloat(i.borderLeftWidth) + parseFloat(i.borderRightWidth) : e.getBoundingClientRect().width;
-					o += l + (c || 0), s += 1;
-				}), s === 0) {
-					let t = document.createRange();
-					return t.selectNodeContents(e), t.getBoundingClientRect().width;
-				}
-				if (s > 1) {
-					let e = parseFloat(i.columnGap);
-					e && (o += e * (s - 1));
+			return Yr.value && (e["--offset-start"] = Yr.value), Xr.value && (e["--offset-end"] = Xr.value), e;
+		}), li = C({}), ui = [
+			.62,
+			.42,
+			.78,
+			.52
+		], di = (e) => {
+			let t = ["transparent 0"], n = 0;
+			return e.forEach((e, r) => {
+				let i = ui[r % ui.length], a = Math.round((e - It * 2) * i);
+				if (a >= Lt) {
+					let e = Math.round(n + It);
+					t.push(`transparent ${e}px`, `currentColor ${e}px ${e + a}px`, `transparent ${e + a}px`);
 				}
-				return o;
-			}, i = (t) => {
-				let n = 0;
-				return e.querySelectorAll(t).forEach((e) => {
-					let t = getComputedStyle(e), i = parseFloat(t.paddingLeft) + parseFloat(t.paddingRight);
-					n = Math.max(n, r(e) + i);
-				}), n > 0 ? `${Math.ceil(n)}px` : null;
-			};
-			U.select = N.selectable ? i(":scope > thead > tr > th.bb-table-header--select, :scope > tbody > tr > td.bb-table-data__cell--select") : null, U.actions = N.actions ? i(":scope > thead > tr > th.bb-table-header--actions, :scope > tbody > tr > td.bb-table__cell--actions") : null;
-		}, Gt = () => {
-			Wt(), Ut();
-		}, Kt = C([]), qt = C([]), W = C(0), Jt = C(null), Yt = () => {
-			let e = L.value;
-			if (!e || !H.value || !N.columns.some((e) => e.width != null) && !Mt.value && Pt.value < 0) return;
-			let t = e.offsetWidth, n = +!!N.selectable, r = U.select ? parseFloat(U.select) : 0, i = U.actions ? parseFloat(U.actions) : 0, a = Ht(), o = 0, s = 0;
-			N.columns.forEach((e, t) => {
-				let r = a[n + t]?.getBoundingClientRect().width ?? 0;
-				e.width != null && (o += r), Nt(t) || (s += r);
+				n += e;
+			}), `linear-gradient(90deg, ${t.join(",")})`;
+		}, fi = (e) => {
+			if (!Y.value) {
+				li.value["--placeholder-bars"] && (li.value = {});
+				return;
+			}
+			let t = e.map((e) => parseFloat(e));
+			t.some((e) => !(e >= 0)) || (li.value = {
+				...li.value,
+				"--placeholder-bars": di(t)
 			});
-			let c = document.createElement("div");
-			c.style.cssText = [
-				"position:absolute",
-				"top:-9999px",
-				"left:-9999px",
-				"visibility:hidden",
-				"pointer-events:none",
-				`width:${t}px`,
-				`height:${e.offsetHeight}px`,
-				"overflow:visible"
-			].join(";");
-			let l = e.cloneNode(!0);
-			l.classList.remove("bb-table--fixed"), l.querySelectorAll(".bb-table-expand__row").forEach((e) => e.remove());
-			let u = Array.from(l.querySelectorAll("col"));
-			N.columns.forEach((e, t) => {
-				if (e.width == null) {
-					let e = u[n + t];
-					e && (e.style.width = "");
-				}
+		}, pi = () => {
+			if (!Y.value) return;
+			let e = Math.round(Aa.value || pa.value);
+			if (!(e > 0)) return;
+			let t = `${e}px`;
+			li.value["--row-h"] !== t && (li.value = {
+				...li.value,
+				"--row-h": t
 			});
-			let ee = l.querySelector("table");
-			ee && (ee.style.width = "min-content", ee.style.minWidth = "0"), c.appendChild(l), document.body.appendChild(c);
-			let te = c.querySelector("table thead tr.bb-table-header-row"), ne = te ? Array.from(te.querySelectorAll(":scope > th")) : [], d = N.columns.map((e, t) => {
-				if (e.width != null) return 0;
-				let r = ne[n + t];
-				return r ? r.getBoundingClientRect().width : 0;
+		}, mi = h(() => ({
+			...$t.value,
+			...ci.value,
+			...li.value,
+			...N.fixedHeaders || Y.value ? { "--stuck-head-h": `${_i.value}px` } : null,
+			...Er.value ? { "--virtual-row-tracks": Tr.value } : null
+		})), hi = () => {
+			let e = R.value, t = ni.value.length;
+			if (!e || !t) return [];
+			let n = e.querySelector(":scope > .bb-table__head > .bb-table-header-row"), r = [...n ? [n] : [], ...Array.from(e.querySelectorAll(":scope > .bb-table__head > [role=\"row\"], :scope > .bb-table__body > [role=\"row\"]"))].find((e) => e.children.length >= t);
+			return r ? Array.from(r.children) : [];
+		}, gi = "", _i = C(0), vi = () => {
+			let e = R.value;
+			if (!e) return;
+			if (N.fixedHeaders || Y.value) {
+				let t = e.querySelector(":scope > .bb-table__head"), n = t ? Math.round(t.getBoundingClientRect().height) : 0;
+				n !== _i.value && (_i.value = n);
+			}
+			let t = be(e);
+			if (!t) return;
+			let n = ni.value.map((e) => e.key);
+			if (t.length !== n.length) return;
+			let r = t.join(" "), i = `${Ci.value}|${r}`;
+			if (i === gi) return;
+			gi = i;
+			let a = {};
+			n.forEach((e, n) => {
+				a[e] = t[n];
 			});
-			document.body.removeChild(c);
-			let f = N.columns.reduce((e, t, n) => e + (Nt(n) ? d[n] : 0), 0), re = t - s - r - i, ie = (e) => `${Number(e.toFixed(3))}px`;
-			if (Kt.value = N.columns.map((e, t) => {
-				if (!Nt(t)) return null;
-				let n = d[t];
-				if (f <= 0) return ie(n);
-				let r = re > 0 ? n / f * re : 0;
-				return ie(Math.max(n, r));
-			}), qt.value = d.map((e) => e > 0 ? ie(e) : null), Pt.value >= 0) {
-				let e = Object.values(ut.value?.tracks ?? {}).reduce((e, t) => e + (parseFloat(t) || 0), 0), t = a.reduce((e, t) => e + t.getBoundingClientRect().width, 0);
-				W.value = Math.max(0, e - t + W.value);
-			} else W.value = 0;
-			let ae = d.reduce((e, t) => e + t, 0), p = o + ae + r + i;
-			Jt.value = p > 0 ? `${Math.ceil(p)}px` : null;
-		}, G = null, Xt, Zt = C(!1), Qt = !1, $t = () => {
-			let e = L.value, t = I.value;
-			Qt = !!e && !!t && t.getBoundingClientRect().width > e.clientWidth + 1;
-		}, en = () => {
-			G !== null && clearTimeout(G), G = setTimeout(() => {
-				G = null, Yt(), be(() => {
-					Zt.value = !1, $t();
-				});
-			}, 200);
-		}, K, tn, nn = () => {
-			K && (K.disconnect(), Ht().forEach((e) => K?.observe(e)), Gt());
+			let o = V.value, s = o[0], c = o[o.length - 1], l = Yr.value, u = Xr.value;
+			l && s && a[s] && (a[s] = `calc(${a[s]} - (${l}))`, !N.selectable && Gr.value && (a.select = Gr.value)), u && c && a[c] && (a[c] = `calc(${a[c]} - (${u}))`, !I.value && Kr.value && (a.actions = Kr.value));
+			let d = [
+				..."select" in a ? ["select"] : [],
+				...o,
+				..."actions" in a ? ["actions"] : []
+			];
+			Ga(t), fi(t), Y.value && (Tr.value = r), yi = t, tn(a, d), vo.value.length && fe(e, vo.value, t);
+		}, yi = null, bi, xi = () => {
+			if (!bi) return;
+			bi.disconnect();
+			let e = hi();
+			e.forEach((e) => bi?.observe(e)), e.length && vi();
 		};
-		Se(() => {
-			K = new ResizeObserver(() => Gt()), nn(), be(Yt), I.value && (Xt = new MutationObserver(en), Xt.observe(I.value, {
-				childList: !0,
-				subtree: !0,
-				characterData: !0
-			})), L.value && (tn = new ResizeObserver(() => {
-				Qt || (Zt.value = !0), en();
-			}), tn.observe(L.value));
-		}), xe(() => {
-			K?.disconnect(), tn?.disconnect(), Xt?.disconnect(), G !== null && clearTimeout(G);
-		}), O(zt, () => be(nn), { flush: "post" });
-		let rn = (e, t) => N.accessibleLabel ? N.accessibleLabel(e, t) : [F("table.select").value, ...e.map((e) => e.content)].join(" "), an = h(() => N.selectable ? "fieldset" : "div"), on = h(() => N.legend || N.caption || F("table.selectableLegend").value), q = h(() => N.loading || pn.value), sn = h(() => q.value && !N.interactiveWhileLoading), J = h(() => vt.value && !o(B.page) && !o(B.perPage) && !o(B.totalItems) && B.page >= 1 && B.perPage > 0 && B.totalItems >= 0), cn = h(() => ({
+		Ae(() => {
+			bi = new ResizeObserver(vi), xi();
+		}), Oe(() => {
+			bi?.disconnect();
+		});
+		let Si = h(() => ni.value.map((e) => e.key).join(" ")), Ci = h(() => V.value.join(" "));
+		D([Si, Ci], () => {
+			y(xi), requestAnimationFrame(() => {
+				R.value && vi();
+			});
+		}, { flush: "post" });
+		let wi = (e, t) => N.accessibleLabel ? N.accessibleLabel(e, t) : [L("table.select").value, ...e.map((e) => e.content)].join(" "), Ti = h(() => N.selectable ? "fieldset" : "div"), Ei = h(() => N.legend || N.caption || L("table.selectableLegend").value), Di = h(() => N.loading || Li.value), Oi = h(() => Di.value && !N.interactiveWhileLoading), ki = h(() => br.value && !l(q.page) && !l(q.perPage) && !l(q.totalItems) && q.page >= 1 && q.perPage > 0 && q.totalItems >= 0), Ai = h(() => ({
 			"bb-table": !0,
 			[`bb-table--align-${N.align}`]: !0,
 			"bb-table--compact": N.compact,
-			"bb-table--fixed": H.value,
-			"bb-table--inherit-widths": xt.value,
-			"bb-table--fixed-header": N.fixedHeaders,
-			"bb-table--loading": q.value,
-			"bb-table--empty": !Y.value.length,
+			"bb-table--reorderable": !!N.reorderable,
+			"bb-table--resizable": xn.value,
+			"bb-table--fixed": Cr.value,
+			"bb-table--inherit-widths": Or.value,
+			"bb-table--fixed-header": N.fixedHeaders || Y.value,
+			"bb-table--virtual": Y.value,
+			"bb-table--virtual-flat": Er.value,
+			"bb-table--loading": Di.value,
+			"bb-table--empty": !Z.value.length,
 			"bb-table--selectable": !!N.selectable,
-			"bb-table--measuring": Zt.value,
 			"scrollbar-border": !0
-		})), ln = h(() => N.columns.length + Number(!!N.selectable) + Number(!!N.actions)), un = h(() => Object.fromEntries(N.columns.map((e) => [e.key, de(e.key)]))), { getter: dn, items: fn, loading: pn } = c({ items: Te(N, "items") }), { hasPrefilled: mn } = ie({
+		})), ji = h(() => cn.value.length + Number(!!N.selectable) + Number(I.value)), Mi = h(() => Object.fromEntries(N.columns.map((e) => [e.key, pe(e.key)]))), { getter: Ni, clientReproducible: Pi, hydratedFromSsr: Fi, items: Ii, loading: Li } = d({ items: Fe(N, "items") }), { hasPrefilled: Ri } = ae({
+			alreadyLoaded: Fi,
+			clientReproducible: Pi,
 			trigger: !0,
 			fn: async (e) => {
-				await dn(e, B.selected), yn();
+				await Ni(e, q.selected), Ui();
 			}
-		}), { data: hn } = f({ items: h(() => B.selected) }), { options: Y, baseOptions: gn } = re({
-			disabled: Te(N, "disabled"),
-			items: fn,
+		}), { data: zi } = re({ items: h(() => q.selected) }), { options: Z, baseOptions: Bi } = ie({
+			disabled: Fe(N, "disabled"),
+			items: Ii,
 			itemText: void 0,
 			itemValue: N.itemValue,
 			max: N.max,
 			selectable: !0,
-			selectedIndexedByHash: hn
-		}), _n = async (e) => {
-			N.multiple ? B.selected = (B.selected ?? []).concat(e.value) : B.selected = e.value;
-		}, vn = async (e) => {
+			selectedIndexedByHash: zi
+		}), Vi = async (e) => {
+			N.multiple ? q.selected = (q.selected ?? []).concat(e.value) : q.selected = e.value;
+		}, Hi = async (e) => {
 			if (N.multiple) {
-				let t = { ...hn.value };
-				delete t[e.valueHash], B.selected = Object.values(t);
-			} else B.selected = null;
+				let t = { ...zi.value };
+				delete t[e.valueHash], q.selected = Object.values(t);
+			} else q.selected = null;
 		};
-		ee(() => [
+		p(() => [
 			N.dependencies,
 			N.items,
-			typeof N.items == "function" ? [B.page, B.perPage] : void 0
+			typeof N.items == "function" ? [q.page, q.perPage] : void 0
 		], async () => {
-			mn.value && (await dn(!0, B.selected), yn());
+			Ri.value && (await Ni(!0, q.selected), Ui());
 		}, { debounce: N.depsDebounceTime });
-		let yn = () => {
+		let Ui = () => {
 			if (!N.enforceCoherence) return;
-			let e = new Set(Y.value.map((e) => e.valueHash)), t = (t) => e.has(u(t));
+			let e = new Set(Z.value.map((e) => e.valueHash)), t = (t) => e.has(u(t));
 			if (N.multiple) {
-				let e = B.selected ?? [];
-				e.every(t) || (B.selected = e.filter(t));
-			} else !o(B.selected) && !t(B.selected) && (B.selected = null);
-			let n = B.unselected ?? [];
-			n.every(t) || (B.unselected = n.filter(t)), !o(j.value) && !t(j.value) && (j.value = null), M.value.every(t) || (M.value = M.value.filter(t));
-		}, bn = (e, t) => {
-			let n = un.value[e.key], r = e.align ?? "left", i = ot(t.item, e.key);
-			return e.formatter && (!o(i) || e.formatOnNull !== !1) && (i = e.formatter(i, e.key, t.item)), e.placeholder && o(i) && (i = e.placeholder), {
+				let e = q.selected ?? [];
+				e.every(t) || (q.selected = e.filter(t));
+			} else !l(q.selected) && !t(q.selected) && (q.selected = null);
+			let n = q.unselected ?? [];
+			n.every(t) || (q.unselected = n.filter(t)), !l(j.value) && !t(j.value) && (j.value = null), M.value.every(t) || (M.value = M.value.filter(t));
+		}, Wi = (e, t) => {
+			let n = Mi.value[e.key], r = e.align ?? "left", i = Ut(t.item, e.key);
+			return e.formatter && (!l(i) || e.formatOnNull !== !1) && (i = e.formatter(i, e.key, t.item)), e.placeholder && l(i) && (i = e.placeholder), {
 				align: r,
-				classes: fe([`bb-table-data__cell--${r}`], N.tdClass, e.tdClass, i, e.key, t.item),
+				get classes() {
+					return he([`bb-table-data__cell--${r}`], N.tdClass, e.tdClass, i, e.key, t.item);
+				},
 				content: i,
 				key: e.key,
 				label: e.label,
 				slotName: n
 			};
-		}, xn = h(() => N.columns.map((e) => {
-			let t = e.align ?? "left", n = `header:${un.value[e.key]}`, r = gt(e.key), i = r ?? e.sorted, a = i ? i === "asc" ? "ascending" : "descending" : void 0;
+		}, Gi = h(() => B.value.map((e) => {
+			let t = e.align ?? "left", n = Mi.value[e.key], r = qt(n) ? `header:${n} (shadowed)` : `header:${n}`, i = vr(e.key), a = i ?? e.sorted, o = a ? a === "asc" ? "ascending" : "descending" : void 0;
 			return {
 				align: t,
 				key: e.key,
 				label: e.label,
-				slotName: n,
-				classes: pe([`bb-table-header--${t}`], N.thClass, e.thClass),
+				slotName: r,
+				classes: ge([`bb-table-header--${t}`], N.thClass, e.thClass),
 				sortable: !!e.sortable,
-				sortDirection: a,
-				sortOrder: r
+				sortDirection: o,
+				sortOrder: i
 			};
-		})), Sn = (e, t) => {
-			let n = Y.value[e];
-			return n && n.valueHash === t ? n : Y.value.find((e) => e.valueHash === t);
-		}, Cn = h(() => gn.value.map((e, t) => {
-			let n = N.columns.map((t) => bn(t, e));
+		})), Ki = (e, t) => {
+			let n = Mi.value[e];
+			return (qt(n) ? void 0 : F[`header:${n}:${t}`]) ?? F[`header:${t}`];
+		}, qi = (e) => ({
+			classes: e.classes,
+			columnKey: e.key,
+			items: Ii.value,
+			label: e.label,
+			sortable: e.sortable,
+			sortOrder: e.sortOrder,
+			toggleSort: () => yr(e.key),
+			hideColumn: () => ln(e.key)
+		}), Ji = (e, t) => {
+			let n = Z.value[e];
+			return n && n.valueHash === t ? n : Z.value.find((e) => e.valueHash === t);
+		}, Yi = (e) => {
+			let t = Bi.value[e], n = B.value.map((e) => Wi(e, t));
 			return {
-				accessibleLabel: rn(n, e.item),
+				accessibleLabel: wi(n, t.item),
 				cols: n,
-				rowClasses: me(N.rowClass, N.columns, n, e.item),
+				get rowClasses() {
+					return _e(N.rowClass, B.value, n, t.item);
+				},
 				onRowClick: (n) => {
-					let r = Sn(t, e.valueHash);
-					r && (ht(n, r), P("click:row", n, r, !!r.selected));
+					let r = Ji(e, t.valueHash);
+					r && (_r(n, r), P("click:row", n, r.item));
 				},
 				onRowContextMenu: (n) => {
-					let r = Sn(t, e.valueHash);
-					r && P("contextmenu:row", n, r, !!r.selected);
+					let r = Ji(e, t.valueHash);
+					r && P("contextmenu:row", n, r.item);
 				},
 				onRowDblClick: (n) => {
-					let r = Sn(t, e.valueHash);
-					r && P("dblclick:row", n, r, !!r.selected);
+					let r = Ji(e, t.valueHash);
+					r && P("dblclick:row", n, r.item);
+				},
+				item: t.item,
+				get text() {
+					return t.text;
 				},
-				item: e.item,
-				text: e.text,
-				valueHash: e.valueHash,
-				value: e.value
+				valueHash: t.valueHash,
+				value: t.value
 			};
-		})), wn = h(() => {
-			let e = 0, t = ((B.page ?? 0) - 1) * (B.perPage ?? 0);
-			return Cn.value.map((n, r) => {
-				let i = Y.value[r], a = !N.selectable || typeof N.selectable == "function" && !N.selectable(n.item) || !!i.disabled, o = r + 1, s = t + 1 + o + e, c = kn.value[n.valueHash] ?? !1;
-				return c && e++, {
-					...n,
-					expanded: c,
-					highlighted: n.valueHash in mt.value,
-					rowIndex: s,
-					selected: i.selected,
-					disabled: a
+		}, Xi = h(() => {
+			Bi.value, Mi.value, N.tdClass, N.rowClass, N.accessibleLabel;
+			for (let e of B.value) e.align, e.formatOnNull, e.formatter, e.key, e.label, e.placeholder, e.tdClass;
+			return /* @__PURE__ */ new Map();
+		}), Zi = (e) => {
+			if (!(!Y.value || e.size <= Rt)) {
+				for (let t of e.keys()) if (e.delete(t), e.size <= Rt) break;
+			}
+		}, Qi = (e) => {
+			let t = Xi.value, n = t.get(e);
+			if (n) return n;
+			let r = Yi(e);
+			return t.set(e, r), Zi(t), r;
+		}, $i = h(() => (Xi.value, Q.value, Z.value, ur.value, N.selectable, /* @__PURE__ */ new Map())), ea = (e) => {
+			let t = $i.value, n = t.get(e.index);
+			if (n) return n;
+			let r = Qi(e.index), i = Z.value[e.index], a = !N.selectable || typeof N.selectable == "function" && !N.selectable(r.item) || !!i.disabled, o = {
+				accessibleLabel: r.accessibleLabel,
+				cols: r.cols,
+				item: r.item,
+				onRowClick: r.onRowClick,
+				onRowContextMenu: r.onRowContextMenu,
+				onRowDblClick: r.onRowDblClick,
+				get rowClasses() {
+					return r.rowClasses;
+				},
+				get text() {
+					return r.text;
+				},
+				value: r.value,
+				valueHash: r.valueHash,
+				expanded: e.expanded,
+				highlighted: r.valueHash in ur.value,
+				rowIndex: e.rowIndex,
+				selected: i.selected,
+				disabled: a,
+				expandProps: {},
+				toggleExpanded: () => ro(r.valueHash),
+				toggleHighlighted: () => gr(r, { viaSlot: !0 }),
+				toggleSelected: () => uo(o)
+			};
+			return o.expandProps = no(o), t.set(e.index, o), Zi(t), o;
+		}, ta = C(0);
+		D(() => Bi.value.length, (e) => {
+			ta.value = te(ta.value, 0, Math.max(0, e - 1));
+		});
+		let na = () => R.value?.querySelectorAll(":scope > .bb-table__body > .bb-table-data__row"), ra = (e) => {
+			let t = na();
+			if (t) {
+				if (!Y.value) return t[e];
+				for (let n of t) if (Q.value[Number(n.dataset.index)]?.index === e) return n;
+			}
+		}, ia = () => new Promise((e) => requestAnimationFrame(() => e())), aa = async (e) => {
+			ta.value = e;
+			let t = ra(e);
+			if (Y.value && !t) {
+				let n = Q.value.findIndex((t) => t.kind === "row" && t.index === e);
+				if (n >= 0) {
+					Ca++, Oa();
+					try {
+						for (let r = 0; r < 8 && !t; r++) Ha.value.scrollToIndex(n, { align: "auto" }), await ia(), await y(), t = ra(e);
+					} finally {
+						Ca--;
+					}
+				}
+			}
+			if (t?.focus(), t?.scrollIntoView({ block: "nearest" }), t && Y.value) for (let e = 0; e < 4; e++) {
+				let e = t.getBoundingClientRect().top;
+				if (await ia(), t.scrollIntoView({ block: "nearest" }), Math.abs(t.getBoundingClientRect().top - e) < .5) break;
+			}
+		}, oa = (e) => {
+			N.keyboardNavigation && (ta.value = e);
+		}, Q = h(() => {
+			let e = [], t = 0, n = ((q.page ?? 0) - 1) * (q.perPage ?? 0);
+			return Bi.value.forEach((r, i) => {
+				let a = r.valueHash in eo.value, o = n + 1 + i + 1 + t;
+				e.push({
+					kind: "row",
+					index: i,
+					key: `r:${r.valueHash}`,
+					virtualIndex: e.length,
+					expanded: a,
+					rowIndex: o
+				}), a && (t++, e.push({
+					kind: "expand",
+					index: i,
+					key: `x:${r.valueHash}`,
+					virtualIndex: e.length,
+					expanded: a,
+					rowIndex: o
+				}));
+			}), e;
+		}), sa = (e, t, n, r) => {
+			let i;
+			return {
+				kind: t,
+				index: e.index,
+				key: n,
+				virtualIndex: e.virtualIndex,
+				height: r,
+				get item() {
+					return i ??= ea(e);
+				}
+			};
+		}, ca = Pe(null), la = C(0), ua = C(null), da = (e) => /^(auto|scroll)$/.test(getComputedStyle(e).overflowY), fa = () => {
+			let e = Jt.value, t = ua.value, n = R.value;
+			if (!Y.value || !e || !t || !n) {
+				ca.value = null;
+				return;
+			}
+			let r = e.getBoundingClientRect(), i = n.getBoundingClientRect().bottom - r.top, a = getComputedStyle(e).maxHeight !== "none" || e.scrollHeight > e.clientHeight + 1 || e.clientHeight > i + 1, o = window;
+			if (a) o = e;
+			else {
+				let t = e.parentElement;
+				for (; t && t !== document.body && t !== document.documentElement;) {
+					if (da(t)) {
+						o = t;
+						break;
+					}
+					t = t.parentElement;
+				}
+			}
+			let s = t.getBoundingClientRect().top, c = o === window ? s + window.scrollY : s - o.getBoundingClientRect().top + o.scrollTop;
+			la.value !== c && (la.value = c), ca.value !== o && (ca.value = o);
+		}, pa = C(37), ma = () => {
+			let e = Jt.value;
+			if (!e) return;
+			let t = parseFloat(getComputedStyle(e).getPropertyValue("--cell-h"));
+			t > 0 && (pa.value = t + 1);
+		}, ha = C(null), ga = (e) => {
+			if (!Y.value || !ua.value) return;
+			let t = e.target;
+			for (; t && t.parentElement !== ua.value;) t = t.parentElement;
+			let n = Number(t?.dataset.index);
+			ha.value = Number.isInteger(n) ? n : null;
+		}, _a = (e) => {
+			if (!Y.value) return;
+			let t = e.relatedTarget;
+			(!t || !ua.value?.contains(t)) && (ha.value = null);
+		}, va = C(0), ya = 0, ba = C(!1), xa, Sa = {
+			offset: 0,
+			time: 0
+		}, Ca = 0, wa = /* @__PURE__ */ new Set(), Ta = null, Ea = 0, Da = (e) => {
+			Ea = Ea ? Ea * .7 + e * .3 : e;
+		}, Oa = () => {
+			clearTimeout(xa), xa = void 0, ba.value && (ba.value = !1, Ia());
+		}, ka = (e) => {
+			let t = performance.now(), n = t - Sa.time, r = e - Sa.offset;
+			if (Sa = {
+				offset: e,
+				time: t
+			}, Ca > 0) return;
+			let i = Ta;
+			if (n > 0 && n < 250 && i && Ea) {
+				let e = $?.scrollRect?.height ?? 0, t = (i.end - i.start + e) / 2;
+				Math.abs(r) / n * Ea > t && (ba.value = !0);
+			}
+			clearTimeout(xa), xa = setTimeout(Oa, Vt);
+		}, Aa = C(0), ja = -1, Ma = !1, Na = () => {
+			let e = $?.itemSizeCache;
+			if (!e?.size || e.size === ja) return;
+			ja = e.size;
+			let t = /* @__PURE__ */ new Map(), n = 0;
+			for (let [r, i] of e) {
+				if (typeof r != "string" || !r.startsWith("r:")) continue;
+				let e = Math.round(i);
+				t.set(e, (t.get(e) ?? 0) + 1), n++;
+			}
+			if (n >= 5) {
+				let e = 0, r = -1;
+				for (let [n, i] of t) (i > r || i === r && n < e) && (r = i, e = n);
+				e > 0 && !Ma && (Aa.value = e, n >= 20 && (Ma = !0));
+			}
+			pi();
+		}, $ = null, Pa = !1;
+		D(Y, (e) => {
+			Pa = e;
+		}, { immediate: !0 });
+		let Fa = Pe([]), Ia = (e = !1) => {
+			if (ya &&= (cancelAnimationFrame(ya), 0), !$) return;
+			let t = Y.value ? $.getVirtualItems() : [];
+			va.value = $.getTotalSize();
+			let n = [], r = null;
+			if (t.length) {
+				let e = $.measurementsCache, i = Q.value.length, a = $.range, o = a ? a.startIndex : t[0].index, s = a ? a.endIndex : t[t.length - 1].index;
+				for (let e of t) n.push({
+					index: e.index,
+					start: e.start,
+					end: e.end,
+					size: e.size
+				});
+				let c = e?.[Math.max(0, o - Bt)], l = e?.[Math.min(i - 1, s + Bt)] ?? c;
+				c && l && (r = {
+					start: c.start,
+					end: l.end
+				});
+			}
+			let i = !La || !r || La.start !== r.start || La.end !== r.end;
+			if (La = r, Fa.value = n, !r) return;
+			if (!e || !i) {
+				Ta = r;
+				return;
+			}
+			let a = performance.now(), o = r;
+			y(() => {
+				Da(performance.now() - a), Ta = o;
+			});
+		}, La = null, Ra = () => {
+			ya ||= requestAnimationFrame(() => {
+				ya = 0, Na(), Ia();
+			});
+		}, za = (e, t) => {
+			t ? (ka(e.getScrollOffset()), Ia(!0)) : Ra();
+		}, Ba = (e) => Q.value[e]?.key ?? e, Va = (e) => (Q.value[e]?.kind === "expand" ? 3 : 1) * (Aa.value || pa.value), Ha = qe(h(() => {
+			let e = ca.value, t = e === window, n = ha.value;
+			return {
+				onChange: za,
+				count: Y.value ? Q.value.length : 0,
+				enabled: Y.value,
+				getScrollElement: () => e,
+				estimateSize: Va,
+				getItemKey: Ba,
+				overscan: Bt,
+				scrollMargin: la.value,
+				initialRect: {
+					width: 0,
+					height: 800
+				},
+				rangeExtractor: (e) => {
+					let t = Ve(e.endIndex - e.startIndex > zt ? {
+						...e,
+						endIndex: e.startIndex + zt
+					} : e);
+					return n == null || n >= e.count || t.includes(n) ? t : [...t, n].sort((e, t) => e - t);
+				},
+				observeElementRect: t ? Ke : We,
+				observeElementOffset: t ? Ge : Ue,
+				scrollToFn: t ? Je : He
+			};
+		}));
+		$ = Ha.value, Ia();
+		let Ua = (e) => {
+			Pa && $?.measureElement(e);
+		}, Wa = h(() => {
+			let e = Q.value;
+			if ($i.value, !Y.value) return e.map((e) => sa(e, e.kind, e.key, 0));
+			let t = Fa.value;
+			if (!t.length) return [];
+			let n = [], r = la.value, i = ba.value, a = r, o;
+			for (let r of t) {
+				let t = e[r.index];
+				if (!t) continue;
+				let s = r.start - a;
+				s > .5 && n.push(sa(t, "spacer", `s:${t.key}`, s)), i && t.kind === "row" && !wa.has(t.key) ? n.push(sa(t, "placeholder", `p:${t.key}`, r.size)) : n.push(sa(t, t.kind, t.key, 0)), a = r.end, o = t;
+			}
+			let s = va.value - (a - r);
+			return s > .5 && o && n.push(sa(o, "spacer", "s:end", s)), n;
+		});
+		D(Wa, (e) => {
+			if (Y.value) for (let t of e) (t.kind === "row" || t.kind === "expand") && wa.add(t.key);
+		}, { flush: "post" });
+		let Ga = (e) => {
+			let t = R.value;
+			if (!Y.value || !t || !t.querySelector(":scope > .bb-table__body > .bb-table-data__row")) return;
+			let n = B.value, r = null, i = null;
+			if (ni.value.forEach((t, a) => {
+				if (t.key === "select" || t.key === "actions") {
+					if (t.key in wr.value) return;
+					let n = parseFloat(e[a]);
+					if (!(n > 0)) return;
+					(i ??= { ...wr.value })[t.key] = n;
+					return;
+				}
+				let o = n.find((e) => String(e.key) === t.key);
+				if (!o || o.width != null) return;
+				let s = String(o.key);
+				if (s in X.value || s in (r ?? {})) return;
+				let c = parseFloat(e[a]);
+				c > 0 && ((r ??= { ...X.value })[s] = c);
+			}), !r && !i || Ka) return;
+			let a = r, o = i;
+			Ka = requestAnimationFrame(() => {
+				Ka = 0, a && (X.value = {
+					...X.value,
+					...a
+				}), o && (wr.value = {
+					...wr.value,
+					...o
+				});
+			});
+		}, Ka = 0;
+		D(() => [Y.value, Z.value.length === 0], ([e, t]) => {
+			(!e || t) && (X.value = {}, wr.value = {}, Tr.value = "");
+		}), D(pa, () => {
+			Y.value && Ha.value.measure();
+		});
+		let qa, Ja, Ya = () => {
+			qa?.disconnect(), qa = void 0, Ja?.(), Ja = void 0;
+			let e = Jt.value;
+			if (!Y.value || !e) return;
+			let t = 0, n = () => {
+				t ||= requestAnimationFrame(() => {
+					t = 0, fa();
+				});
+			};
+			if (ca.value === e) qa = new ResizeObserver(() => fa()), qa.observe(e);
+			else {
+				window.addEventListener("resize", n);
+				let e = new ResizeObserver(n);
+				e.observe(document.documentElement), Ja = () => {
+					window.removeEventListener("resize", n), e.disconnect(), t && cancelAnimationFrame(t);
 				};
+			}
+		};
+		D(ca, Ya), D(() => [Y.value, Q.value.length], () => {
+			y(() => {
+				ma(), fa(), Ya(), wa = /* @__PURE__ */ new Set(), ja = -1, Ma = !1, Ia();
 			});
-		}), X = C(0);
-		O(() => wn.value.length, (e) => {
-			X.value = ne(X.value, 0, Math.max(0, e - 1));
+		}, { flush: "post" });
+		let Xa = () => {
+			Y.value && Object.keys(X.value).length && (X.value = {});
+		}, Za, Qa = () => {
+			let e = typeof document < "u" ? document.fonts : void 0;
+			!e || Za || (e.status !== "loaded" && e.ready.then(Xa), e.addEventListener("loadingdone", Xa), Za = () => e.removeEventListener("loadingdone", Xa));
+		};
+		Ae(() => {
+			ma(), pi(), fa(), Ya(), Ia(), Y.value && Qa();
+		}), D(Y, (e) => {
+			e && Qa(), yi && fi(yi), pi();
+		}), Oe(() => {
+			qa?.disconnect(), Ja?.(), Za?.(), ya && cancelAnimationFrame(ya);
 		});
-		let Tn = () => I.value?.querySelectorAll(":scope > tbody > tr.bb-table-data__row"), En = (e) => {
-			X.value = e;
-			let t = Tn()?.[e];
-			t?.focus(), t?.scrollIntoView({ block: "nearest" });
-		}, Dn = (e) => {
-			N.keyboardNavigation && (X.value = e);
-		}, On = (e, t) => {
+		let $a = (e, t) => {
 			if (!N.keyboardNavigation || e.target !== e.currentTarget) return;
-			let n = wn.value.length - 1;
+			let n = Bi.value.length - 1;
 			if (n < 0) return;
 			let r = (t) => {
-				e.preventDefault(), En(ne(t, 0, n));
+				e.preventDefault(), aa(te(t, 0, n));
 			};
 			switch (e.key) {
 				case "ArrowDown":
@@ -574,10 +1347,10 @@ var Oe = {
 					r(t - 1);
 					break;
 				case "PageDown":
-					r(t + at);
+					r(t + Ht);
 					break;
 				case "PageUp":
-					r(t - at);
+					r(t - Ht);
 					break;
 				case "Home":
 					r(0);
@@ -590,105 +1363,189 @@ var Oe = {
 					e.preventDefault(), e.currentTarget.click();
 					break;
 			}
-		}, { data: kn } = f({ items: M }), An = (e, t) => {
-			e.target instanceof HTMLElement && (e.target instanceof HTMLButtonElement || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), Z(t)));
-		}, jn = (e) => ({
-			"aria-controls": o(kn.value[e.valueHash]) ? void 0 : `expanded_${e.valueHash}`,
+		}, { data: eo } = re({ items: M }), to = (e, t) => {
+			e.target instanceof HTMLElement && (e.target instanceof HTMLButtonElement || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), ro(t)));
+		}, no = (e) => ({
+			"aria-controls": l(eo.value[e.valueHash]) ? void 0 : `expanded_${e.valueHash}`,
 			"aria-expanded": e.expanded ? "true" : "false",
 			onClick: (t) => {
-				t.stopPropagation(), Z(e.valueHash);
+				t.stopPropagation(), ro(e.valueHash);
 			},
-			onKeydown: (t) => An(t, e.valueHash)
-		}), Z = (e) => {
-			let t = Y.value.find((t) => t.valueHash === e);
-			t && (e in kn.value ? M.value = M.value.filter((t) => u(t) !== e) : M.value = [...M.value, t.value]);
+			onKeydown: (t) => to(t, e.valueHash)
+		}), ro = (e) => {
+			let t = Z.value.find((t) => t.valueHash === e);
+			t && (e in eo.value ? M.value = M.value.filter((t) => u(t) !== e) : M.value = [...M.value, t.value]);
 		};
-		O(k, () => {
-			Q.clear(), B.unselected = [], B.selected = [];
+		D(O, () => {
+			ao.clear(), q.unselected = [], q.selected = [];
 		});
-		let Mn = h(() => {
-			let e = Array.isArray(B.selected) ? B.selected.length : 0;
-			return !!(N.multiple && e > 0 && !k.value || k.value && Q.size > 0);
-		}), Q = Ce(/* @__PURE__ */ new Set());
-		O(() => B.unselected, (e) => {
-			Q.clear(), (e ?? []).forEach((e) => {
-				Q.add(u(e));
+		let io = h(() => {
+			let e = Array.isArray(q.selected) ? q.selected.length : 0;
+			return !!(N.multiple && e > 0 && !O.value || O.value && ao.size > 0);
+		}), ao = je(/* @__PURE__ */ new Set());
+		D(() => q.unselected, (e) => {
+			ao.clear(), (e ?? []).forEach((e) => {
+				ao.add(u(e));
 			});
 		}, { immediate: !0 });
-		let Nn = (e) => {
-			let t = B.unselected ?? [];
-			if ($(e)) {
-				vn(e), P("item:unselected", e.value), Q.add(e.valueHash), B.unselected = [...t, e.value];
+		let oo = (e) => {
+			let t = q.unselected ?? [];
+			if (so(e)) {
+				Hi(e), P("item:unselected", e.value), ao.add(e.valueHash), q.unselected = [...t, e.value];
 				return;
 			}
-			k.value || _n(e), P("item:selected", e.value), Q.delete(e.valueHash), B.unselected = t.filter((t) => u(t) !== u(e.value));
-		}, $ = (e) => Q.has(e.valueHash) ? !1 : e.selected || k.value, Pn = (e) => {
+			O.value || Vi(e), P("item:selected", e.value), ao.delete(e.valueHash), q.unselected = t.filter((t) => u(t) !== u(e.value));
+		}, so = (e) => ao.has(e.valueHash) ? !1 : e.selected || O.value, co = h(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of Z.value) e.set(t.valueHash, t);
+			return e;
+		}), lo = (e) => {
 			if (N.disabled || N.readonly || typeof N.selectable == "function" && !N.selectable(e.item)) return !0;
-			let t = Y.value.find((t) => t.valueHash === e.valueHash);
+			let t = co.value.get(e.valueHash);
 			return !t || !!t.disabled;
-		}, Fn = (e) => {
-			Pn(e) || Nn(e);
-		}, In = se((e) => typeof e != "string", JSON.stringify), Ln = h(() => [].concat(B.selected ?? []).map((e) => ({
+		}, uo = (e) => {
+			lo(e) || oo(e);
+		}, fo = ce((e) => typeof e != "string", JSON.stringify), po = h(() => [].concat(q.selected ?? []).map((e) => ({
 			disabled: N.disabled,
 			name: N.name,
 			type: "hidden",
-			value: In(e)
-		}))), Rn = [
+			value: fo(e)
+		}))), mo = [
 			70,
 			45,
 			85,
 			55
-		], zn = h(() => ne(Y.value.length || N.columns.length || 1, 4, 10));
-		return O(() => [wn.value, N.fixedColumns], () => {
-			I.value && N.fixedColumns?.length && ue(I.value, N.fixedColumns);
-		}, { flush: "post" }), (e, t) => (S(), he(we(an.value), {
+		], ho = h(() => te(Z.value.length || N.columns.length || 1, 4, 10)), go = h(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let [t, n] of k.value) e.has(t) || e.set(t, n);
+			return e;
+		}), _o = h(() => ({
+			slots: F,
+			selectable: N.selectable,
+			multiple: !!N.multiple,
+			readonly: !!N.readonly,
+			actions: I.value,
+			keyboardNavigation: !!N.keyboardNavigation,
+			contentInert: Oi.value,
+			hasRowIndex: ki.value,
+			columnSpan: ji.value,
+			inputName: Wt,
+			tdClass: N.tdClass,
+			cellClasses: Dn.value,
+			sortOrders: go.value,
+			measureRow: Ua,
+			onInputChange: oo,
+			onRowFocus: oa,
+			onRowKeydown: $a
+		})), vo = h(() => {
+			let e = [], t = +!!N.selectable;
+			return N.selectable && N.fixedSelect && e.push({
+				index: 0,
+				position: "left"
+			}), B.value.forEach((n, r) => {
+				n.fixed && e.push({
+					index: r + t,
+					position: n.fixed
+				});
+			}), I.value && N.fixedActions && e.push({
+				index: B.value.length + t,
+				position: "right"
+			}), e;
+		}), yo = h(() => vo.value.map((e) => typeof e == "number" ? `${e}:left` : `${e.index}:${e.position}`).join(","));
+		return D(() => [
+			Wa.value,
+			yo.value,
+			Si.value
+		], ([, e, t], n) => {
+			let r = n?.[1], i = vo.value;
+			if (R.value && (e.length || r?.length)) {
+				let a = e === r && t === n?.[2];
+				fe(R.value, i, a ? yi : null, a);
+			}
+			F.thead && y(xi);
+		}, { flush: "post" }), (e, t) => (S(), Se(Ne(Ti.value), {
 			id: e.id,
 			ref_key: "containerRef",
-			ref: L,
-			"aria-busy": q.value,
-			class: b(cn.value),
-			"data-bb-table-id": D(lt),
+			ref: Jt,
+			"aria-busy": Di.value,
+			class: b(Ai.value),
+			"data-bb-table-id": E(Yt),
 			inert: e.disabled,
-			style: x(Vt.value)
+			style: x(mi.value)
 		}, {
-			default: De(() => [
-				e.selectable ? (S(), _("legend", Oe, E(on.value), 1)) : g("", !0),
-				v("table", {
+			default: ze(() => [
+				e.selectable ? (S(), _("legend", Ye, T(Ei.value), 1)) : g("", !0),
+				e.caption ? (S(), _("div", {
+					key: 1,
+					id: nn.value,
+					class: b(["bb-table-caption", { "sr-only": !e.displayCaption }])
+				}, T(e.caption), 11, Xe)) : g("", !0),
+				e.reorderable || e.resizable ? (S(), _("div", {
+					key: 2,
+					id: rn.value,
+					class: "sr-only"
+				}, [e.reorderable ? (S(), _(m, { key: 0 }, [Ce(T(E(L)("table.reorderInstructions").value), 1)], 64)) : g("", !0), e.resizable && !J.value ? (S(), _(m, { key: 1 }, [Ce(T(E(L)("table.resizeInstructions").value), 1)], 64)) : g("", !0)], 8, Ze)) : g("", !0),
+				v("span", Qe, T(Di.value ? e.loadingText || E(L)("common.loadingText").value : ""), 1),
+				e.reorderable ? (S(), _(m, { key: 3 }, [v("span", $e, T(fn.value), 1), v("div", {
+					ref_key: "ghostRef",
+					ref: Bn,
+					"aria-hidden": "true",
+					class: "bb-table-column-ghost",
+					popover: "manual"
+				}, [t[1] ||= v("svg", {
+					"aria-hidden": "true",
+					class: "bb-table-column-ghost__icon",
+					fill: "none",
+					height: "1em",
+					stroke: "currentColor",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"stroke-width": "2",
+					viewBox: "0 0 24 24",
+					width: "1em"
+				}, [v("path", { d: "M12 2v20M2 12h20M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3" })], -1), v("span", null, T(zn.value), 1)], 512)], 64)) : g("", !0),
+				v("div", {
 					ref_key: "tableRef",
-					ref: I,
-					"aria-rowcount": J.value ? D(B).totalItems : void 0
+					ref: R,
+					"aria-labelledby": e.caption ? nn.value : void 0,
+					"aria-rowcount": ki.value && E(q).totalItems != null ? E(q).totalItems + 1 : void 0,
+					class: "bb-table__table",
+					role: "table",
+					style: x(si.value)
 				}, [
-					e.caption ? (S(), _("caption", {
-						key: 0,
-						class: b(["bb-table-caption", { "sr-only": !e.displayCaption }])
-					}, E(e.caption), 3)) : g("", !0),
-					v("colgroup", null, [(S(!0), _(m, null, w(zt.value, (e) => (S(), _("col", {
-						key: e.key,
-						style: x({ width: e.width })
-					}, null, 4))), 128))]),
-					v("thead", { inert: sn.value }, [T(e.$slots, "thead", {}, () => [v("tr", {
-						"aria-rowindex": J.value ? 1 : void 0,
-						class: b(["bb-table-header-row", e.headerRowClass])
+					v("div", {
+						class: b(["bb-table__head", {
+							"bb-table__head--dragging": G.value === "dragging",
+							"bb-table__head--resizing": Sn.value !== null
+						}]),
+						inert: Oi.value,
+						role: "rowgroup"
+					}, [w(e.$slots, "thead", {}, () => [v("div", {
+						"aria-rowindex": ki.value ? 1 : void 0,
+						class: b(["bb-table-header-row", e.headerRowClass]),
+						role: "row",
+						onPointerdown: cr,
+						onTouchmove: lr
 					}, [
-						e.selectable ? (S(), _("th", {
+						e.selectable ? (S(), _("div", {
 							key: 0,
 							class: b(["bb-table-header bb-table-header--select", e.thClass]),
-							scope: "col"
-						}, [T(e.$slots, "header:select", {
+							role: "columnheader"
+						}, [w(e.$slots, "header:select", {
 							multiple: e.multiple,
-							selectAll: !!k.value,
-							text: e.selectText || D(F)("table.selectText").value
-						}, () => [v("span", Me, [!e.disableSelectAll && e.multiple ? (S(), _("label", {
+							selectAll: !!O.value,
+							text: e.selectText || E(L)("table.selectText").value
+						}, () => [v("span", rt, [!e.disableSelectAll && e.multiple ? (S(), _("label", {
 							key: 0,
 							class: b(["bb-table-check__label", { "bb-table-check__label--disabled": e.disabled }])
-						}, [(S(), he(d, {
-							key: Mn.value.toString(),
-							modelValue: k.value,
-							"onUpdate:modelValue": t[0] ||= (e) => k.value = e,
-							checked: !!k.value,
+						}, [(S(), Se(ne, {
+							key: io.value.toString(),
+							modelValue: O.value,
+							"onUpdate:modelValue": t[0] ||= (e) => O.value = e,
+							checked: !!O.value,
 							class: "bb-table-check",
 							disabled: e.disabled,
-							indeterminate: Mn.value,
+							indeterminate: io.value,
 							name: `select_all_${e.name || ""}`,
 							readonly: e.readonly
 						}, null, 8, [
@@ -698,198 +1555,174 @@ var Oe = {
 							"indeterminate",
 							"name",
 							"readonly"
-						])), v("span", Ne, E(e.selectAllLabel || D(F)("table.selectAllLabel").value), 1)], 2)) : e.multiple ? g("", !0) : (S(), _("span", Pe, E(e.selectText || D(F)("table.selectText").value), 1))])])], 2)) : g("", !0),
-						(S(!0), _(m, null, w(xn.value, (t, n) => (S(), _("th", {
-							key: t.key,
-							"aria-sort": t.sortDirection ?? (t.sortable ? "none" : void 0),
-							class: b(["bb-table-header", [t.classes, {
-								"bb-table-header--edge-start": n === 0,
-								"bb-table-header--edge-end": n === xn.value.length - 1
+						])), v("span", it, T(e.selectAllLabel || E(L)("table.selectAllLabel").value), 1)], 2)) : e.multiple ? g("", !0) : (S(), _("span", at, T(e.selectText || E(L)("table.selectText").value), 1))])])], 2)) : g("", !0),
+						(S(!0), _(m, null, Me(Gi.value, (n, r) => (S(), _("div", {
+							key: n.key,
+							"aria-describedby": an.value ? rn.value : void 0,
+							"aria-sort": n.sortDirection ?? (n.sortable ? "none" : void 0),
+							class: b(["bb-table-header", [n.classes, {
+								"bb-table-header--edge-start": r === 0,
+								"bb-table-header--edge-end": r === Gi.value.length - 1,
+								"bb-table-header--clip": ii.value.has(n.key),
+								"bb-table-header--dragging": Rn.value === n.key,
+								"bb-table-header--sortable": n.sortable,
+								"bb-table-header--resizing": Sn.value === n.key
 							}]]),
-							scope: "col"
-						}, [T(e.$slots, t.slotName, {
-							classes: t.classes,
-							items: D(fn),
-							label: t.label,
-							sortOrder: t.sortOrder,
-							sortable: t.sortable,
-							toggleSort: () => _t(t.key)
-						}, () => [t.sortable ? (S(), he(i, {
-							key: 0,
-							class: b(["bb-table-sort", {
-								"bb-table-sort--asc": t.sortOrder === "asc",
-								"bb-table-sort--desc": t.sortOrder === "desc"
-							}]),
-							type: "button",
-							onClick: () => _t(t.key)
-						}, {
-							default: De(() => [v("span", Ie, E(t.label), 1), _e(a, {
-								class: "bb-table-sort__icon",
-								icon: D(le),
-								size: "sm"
-							}, null, 8, ["icon"])]),
-							_: 2
-						}, 1032, ["class", "onClick"])) : (S(), _("span", Le, E(t.label), 1))])], 10, Fe))), 128)),
-						e.actions ? (S(), _("th", {
+							"data-column-key": an.value ? n.key : void 0,
+							role: "columnheader",
+							tabindex: an.value ? n.key === hn.value ? 0 : -1 : void 0,
+							onClick: (e) => gn(e, n),
+							onFocus: (e) => _n(n.key),
+							onKeydown: (e) => bn(e, n.key)
+						}, [
+							Ki(n.key, "prepend") ? (S(), Se(Ne(Ki(n.key, "prepend")), De({
+								key: 0,
+								ref_for: !0
+							}, qi(n)), null, 16)) : g("", !0),
+							w(e.$slots, n.slotName, {
+								classes: n.classes,
+								hideColumn: () => ln(n.key),
+								items: E(Ii),
+								label: n.label,
+								sortOrder: n.sortOrder,
+								sortable: n.sortable,
+								toggleSort: () => yr(n.key)
+							}, () => [n.sortable ? (S(), Se(s, {
+								key: 0,
+								class: b(["bb-table-sort", {
+									"bb-table-sort--asc": n.sortOrder === "asc",
+									"bb-table-sort--desc": n.sortOrder === "desc"
+								}]),
+								tabindex: an.value ? -1 : void 0,
+								type: "button",
+								onClick: () => yr(n.key)
+							}, {
+								default: ze(() => [v("span", st, T(n.label), 1), t[2] ||= v("svg", {
+									"aria-hidden": "true",
+									class: "bb-table-sort__icon",
+									fill: "none",
+									height: "1em",
+									stroke: "currentColor",
+									"stroke-linecap": "round",
+									"stroke-linejoin": "round",
+									"stroke-width": "2",
+									viewBox: "0 0 24 24",
+									width: "1em"
+								}, [v("path", { d: "M12 20V4m-7 7l7-7l7 7" })], -1)]),
+								_: 2
+							}, 1032, [
+								"class",
+								"tabindex",
+								"onClick"
+							])) : (S(), _("span", ct, T(n.label), 1))]),
+							Ki(n.key, "append") ? (S(), Se(Ne(Ki(n.key, "append")), De({
+								key: 1,
+								ref_for: !0
+							}, qi(n)), null, 16)) : g("", !0),
+							e.resizable && !J.value ? (S(), _("div", {
+								key: 2,
+								"aria-hidden": "true",
+								class: "bb-table-header__resizer",
+								onDblclick: Be((e) => An(n.key), ["stop"]),
+								onPointerdown: (e) => Ln(e, n.key)
+							}, null, 40, lt)) : g("", !0)
+						], 42, ot))), 128)),
+						I.value ? (S(), _("div", {
 							key: 1,
 							class: b(["bb-table-header bb-table-header--actions", e.thClass]),
-							scope: "col"
-						}, [T(e.$slots, "header:actions", { text: e.actionsText || D(F)("table.actionsText").value }, () => [v("span", Re, E(e.actionsText || D(F)("table.actionsText").value), 1)])], 2)) : g("", !0)
-					], 10, je)])], 8, Ae),
-					v("tbody", null, [q.value && !D(Y).length ? T(e.$slots, "loading", {
+							role: "columnheader"
+						}, [w(e.$slots, "header:actions", { text: e.actionsText || E(L)("table.actionsText").value }, () => [v("span", ut, T(e.actionsText || E(L)("table.actionsText").value), 1)])], 2)) : g("", !0)
+					], 42, nt)])], 10, tt),
+					v("div", {
+						ref_key: "bodyRef",
+						ref: ua,
+						class: "bb-table__body",
+						role: "rowgroup",
+						onFocusin: ga,
+						onFocusout: _a
+					}, [Di.value && !E(Z).length ? w(e.$slots, "loading", {
 						key: 0,
-						items: D(fn)
-					}, () => [(S(!0), _(m, null, w(zn.value, (n, r) => (S(), _("tr", {
+						items: E(Ii)
+					}, () => [(S(!0), _(m, null, Me(ho.value, (n, r) => (S(), _("div", {
 						key: r,
-						"aria-rowindex": J.value ? r + 2 : void 0,
-						class: "bb-table-skeleton__row"
+						"aria-rowindex": ki.value ? r + 2 : void 0,
+						class: "bb-table-skeleton__row",
+						role: "row"
 					}, [
-						e.selectable ? (S(), _("td", Be, t[1] ||= [v("div", { class: "bb-table-skeleton__placeholder" }, null, -1)])) : g("", !0),
-						(S(!0), _(m, null, w(N.columns, (e, n) => (S(), _("td", {
+						e.selectable ? (S(), _("div", ft, t[3] ||= [v("div", { class: "bb-table-skeleton__placeholder" }, null, -1)])) : g("", !0),
+						(S(!0), _(m, null, Me(B.value, (e, n) => (S(), _("div", {
 							key: e.key,
-							class: b(["bb-table-skeleton__cell", [`bb-table-skeleton__cell--${e.skeleton ?? "text"}`]])
-						}, [!e.skeleton || e.skeleton === "text" ? (S(), _("div", Ve, [v("div", {
+							class: b(["bb-table-skeleton__cell", [`bb-table-skeleton__cell--${e.skeleton ?? "text"}`]]),
+							role: "cell"
+						}, [!e.skeleton || e.skeleton === "text" ? (S(), _("div", pt, [v("div", {
 							class: "bb-table-skeleton__line",
-							style: x({ width: `${Rn[(r + n) % 4]}%` })
+							style: x({ width: `${mo[(r + n) % 4]}%` })
 						}, null, 4), v("div", {
 							class: "bb-table-skeleton__line",
-							style: x({ width: `${Rn[(r + n + 2) % 4]}%` })
-						}, null, 4)])) : e.skeleton === "avatar" ? (S(), _("div", He)) : e.skeleton === "avatar-text" ? (S(), _("div", Ue, [t[2] ||= v("div", { class: "bb-table-skeleton__avatar" }, null, -1), v("div", We, [v("div", {
+							style: x({ width: `${mo[(r + n + 2) % 4]}%` })
+						}, null, 4)])) : e.skeleton === "avatar" ? (S(), _("div", mt)) : e.skeleton === "avatar-text" ? (S(), _("div", ht, [t[4] ||= v("div", { class: "bb-table-skeleton__avatar" }, null, -1), v("div", gt, [v("div", {
 							class: "bb-table-skeleton__line",
-							style: x({ width: `${Rn[(r + n) % 4]}%` })
+							style: x({ width: `${mo[(r + n) % 4]}%` })
 						}, null, 4), v("div", {
 							class: "bb-table-skeleton__line",
-							style: x({ width: `${Rn[(r + n + 2) % 4]}%` })
-						}, null, 4)])])) : e.skeleton === "image" ? (S(), _("div", Ge)) : e.skeleton === "badge" ? (S(), _("div", Ke)) : g("", !0)], 2))), 128)),
-						e.actions ? (S(), _("td", qe, t[3] ||= [v("div", { class: "bb-table-skeleton__placeholder" }, null, -1)])) : g("", !0)
-					], 8, ze))), 128))]) : D(Y).length ? T(e.$slots, "tbody", { key: 2 }, () => [(S(!0), _(m, null, w(wn.value, (t, n) => (S(), _(m, { key: t.valueHash }, [v("tr", {
-						"aria-current": t.highlighted ? "true" : void 0,
-						"aria-rowindex": J.value && t.rowIndex ? t.rowIndex : void 0,
-						class: b(["bb-table-data__row", [t.rowClasses, { "bb-table-data__row--highlighted": t.highlighted }]]),
-						inert: sn.value,
-						tabindex: e.keyboardNavigation ? n === X.value ? 0 : -1 : void 0,
-						onClick: t.onRowClick,
-						onContextmenu: t.onRowContextMenu,
-						onDblclick: t.onRowDblClick,
-						onFocus: () => Dn(n),
-						onKeydown: (e) => On(e, n)
-					}, [
-						e.selectable ? (S(), _("td", {
-							key: 0,
-							class: b(["bb-table-data__cell bb-table-data__cell--select", e.tdClass])
-						}, [T(e.$slots, "select", {
-							checked: $(t),
-							disabled: Pn(t),
-							inputName: D(st),
-							item: t.item,
-							readonly: !!e.readonly,
-							toggleSelected: () => Fn(t),
-							value: t.value
-						}, () => [e.multiple ? (S(), _("label", {
-							key: 0,
-							class: b(["bb-table-check__label", { "bb-table-check__label--disabled": t.disabled }])
-						}, [_e(d, {
-							checked: $(t),
-							class: "bb-table-check",
-							disabled: t.disabled,
-							readonly: e.readonly,
-							onChange: () => Nn(t)
-						}, null, 8, [
-							"checked",
-							"disabled",
-							"readonly",
-							"onChange"
-						]), v("span", Qe, E(t.accessibleLabel), 1)], 2)) : (S(), _("label", {
-							key: 1,
-							class: b(["bb-table-radio__label", { "bb-table-radio__label--disabled": t.disabled }])
-						}, [_e(oe, {
-							checked: t.selected,
-							class: "bb-table-radio",
-							disabled: t.disabled,
-							name: D(st),
-							readonly: e.readonly,
-							value: t.value,
-							onChange: () => Nn(t)
-						}, null, 8, [
-							"checked",
-							"disabled",
-							"name",
-							"readonly",
-							"value",
-							"onChange"
-						]), v("span", $e, E(t.accessibleLabel), 1)], 2))])], 2)) : g("", !0),
-						(S(!0), _(m, null, w(t.cols, (n, r) => (S(), _("td", {
-							key: n.key,
-							class: b(["bb-table-data__cell", [n.classes, {
-								"bb-table-data__cell--edge-start": r === 0,
-								"bb-table-data__cell--edge-end": r === t.cols.length - 1
-							}]])
-						}, [T(e.$slots, n.slotName, {
-							classes: n.classes,
-							content: n.content,
-							expandProps: jn(t),
-							expanded: t.expanded,
-							highlighted: t.highlighted,
-							item: t.item,
-							selected: $(t),
-							sortOrder: gt(n.key),
-							toggleExpanded: () => Z(t.valueHash),
-							toggleHighlighted: () => z(t),
-							toggleSelected: () => Fn(t),
-							value: t.value
-						}, () => [ge(E(n.content), 1)])], 2))), 128)),
-						e.actions ? (S(), _("td", {
-							key: 1,
-							class: b(["bb-table__cell bb-table__cell--actions", e.tdClass])
-						}, [T(e.$slots, "actions", {
-							expandProps: jn(t),
-							expanded: t.expanded,
-							highlighted: t.highlighted,
-							item: t.item,
-							selected: $(t),
-							toggleExpanded: () => Z(t.valueHash),
-							toggleHighlighted: () => z(t),
-							toggleSelected: () => Fn(t),
-							value: t.value
-						})], 2)) : g("", !0)
-					], 42, Ze), t.expanded ? (S(), _("tr", {
+							style: x({ width: `${mo[(r + n + 2) % 4]}%` })
+						}, null, 4)])])) : e.skeleton === "image" ? (S(), _("div", _t)) : e.skeleton === "badge" ? (S(), _("div", vt)) : g("", !0)], 2))), 128)),
+						I.value ? (S(), _("div", yt, t[5] ||= [v("div", { class: "bb-table-skeleton__placeholder" }, null, -1)])) : g("", !0)
+					], 8, dt))), 128))]) : E(Z).length ? w(e.$slots, "tbody", { key: 2 }, () => [(S(!0), _(m, null, Me(Wa.value, (e) => (S(), _(m, { key: e.key }, [e.kind === "spacer" ? (S(), _("div", {
 						key: 0,
-						id: `expanded_${t.valueHash}`,
-						"aria-rowindex": J.value && t.rowIndex ? t.rowIndex + 1 : void 0,
-						class: b(["bb-table-expand__row", { "bb-table-expand__row--highlighted": t.highlighted }])
-					}, [v("td", {
-						class: "bb-table-expand__cell",
-						colspan: ln.value
-					}, [T(e.$slots, "expand", {
-						expandProps: jn(t),
-						expanded: t.expanded,
-						highlighted: t.highlighted,
-						item: t.item,
-						selected: $(t),
-						toggleExpanded: () => Z(t.valueHash),
-						toggleHighlighted: () => z(t),
-						toggleSelected: () => Fn(t),
-						value: t.value
-					})], 8, tt)], 10, et)) : g("", !0)], 64))), 128))]) : (S(), _("tr", {
+						"aria-hidden": "true",
+						class: "bb-table-spacer__row bb-table-placeholder__row",
+						style: x({ height: `${e.height}px` })
+					}, null, 4)) : e.kind === "placeholder" ? (S(), _("div", {
 						key: 1,
-						"aria-rowindex": J.value ? 2 : void 0,
-						class: "bb-table-no-data__row"
-					}, [v("td", {
-						class: "bb-table-no-data__cell",
-						colspan: ln.value
-					}, [T(e.$slots, "no-data", {}, () => [v("span", Xe, E(e.noDataText || D(F)("common.noDataText").value), 1)])], 8, Ye)], 8, Je)), q.value ? (S(), _("tr", {
+						"aria-hidden": "true",
+						class: "bb-table-placeholder__row bb-table-placeholder__row--pending",
+						"data-index": e.virtualIndex,
+						style: x({ height: `${e.height}px` })
+					}, null, 12, Ct)) : e.kind === "row" ? (S(), Se(E(ue), {
+						key: 2,
+						active: e.index === ta.value,
+						context: _o.value,
+						index: e.index,
+						item: e.item,
+						"select-blocked": lo(e.item),
+						selected: so(e.item),
+						"virtual-index": e.virtualIndex
+					}, null, 8, [
+						"active",
+						"context",
+						"index",
+						"item",
+						"select-blocked",
+						"selected",
+						"virtual-index"
+					])) : (S(), Se(E(de), {
 						key: 3,
-						"aria-rowindex": J.value && !D(Y).length ? zn.value + 2 : void 0,
-						class: "bb-table-loading__row bb-table-loading__row--sr-only"
-					}, [v("td", {
-						"aria-live": "polite",
-						class: "bb-table-loading__cell",
-						colspan: ln.value,
-						role: "status"
-					}, [v("span", it, E(e.loadingText || D(F)("common.loadingText").value), 1)], 8, rt)], 8, nt)) : g("", !0)]),
-					v("tfoot", null, [T(e.$slots, "tfoot", { columnCount: ln.value })])
-				], 8, ke),
-				(S(!0), _(m, null, w(Ln.value, (e) => (S(), _("input", ye({
+						context: _o.value,
+						item: e.item,
+						selected: so(e.item),
+						"virtual-index": e.virtualIndex
+					}, null, 8, [
+						"context",
+						"item",
+						"selected",
+						"virtual-index"
+					]))], 64))), 128))]) : (S(), _("div", {
+						key: 1,
+						"aria-rowindex": ki.value ? 2 : void 0,
+						class: "bb-table-no-data__row",
+						role: "row"
+					}, [v("div", {
+						"aria-colspan": ji.value,
+						class: "bb-table-no-data__cell",
+						role: "cell"
+					}, [w(e.$slots, "no-data", {}, () => [v("span", St, T(e.noDataText || E(L)("common.noDataText").value), 1)])], 8, xt)], 8, bt))], 544),
+					v("div", {
+						class: "bb-table__foot",
+						role: F.tfoot ? "rowgroup" : void 0
+					}, [w(e.$slots, "tfoot", { columnCount: ji.value })], 8, wt)
+				], 12, et),
+				(S(!0), _(m, null, Me(po.value, (e) => (S(), _("input", De({
 					key: e.value,
 					ref_for: !0
 				}, e), null, 16))), 128))
@@ -906,4 +1739,4 @@ var Oe = {
 	}
 });
 //#endregion
-export { k as default };
+export { O as default };