bitboss-ui 3.0.0-beta.4 → 3.0.0-beta.8

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

@@ -3,58 +3,61 @@ 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 { 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 { isNil as a } from "../../utilities/functions/isNil.js";
+import { useLocale as o } from "../../composables/useLocale.js";
+import { useItemsGetter as s } from "../../composables/useItemsGetter.js";
+import { useItemValue as c } from "../../composables/useItemValue.js";
+import { hash as l } from "../../utilities/functions/hash.js";
+import { useHashedWatcher as u } from "../../composables/useHashedWatcher.js";
+import { useBbTableContextHost as ee } from "../../composables/useBbTableContext.js";
+import { clamp as d } from "../../utilities/functions/clamp.js";
+import te from "../BbBaseCheckbox/BbBaseCheckbox.vue.js";
+import { useIndexById as ne } 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 { parseCount as ae, parsePositiveInteger as oe } from "../../utilities/functions/parsePaginationNumber.js";
+import se from "../BbBaseRadio/BbBaseRadio.vue.js";
+import { when as ce } from "../../utilities/functions/when.js";
+import { useTableWidthContext as le } from "../../composables/useTableWidthContext.js";
+import { applyFixedTableColumns as ue, columnKeyToSlotName as de, mergeCellClasses as fe, mergeHeaderClasses as pe, mergeRowClasses as me, readResolvedTracks as he } from "./utils.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as ge, createVNode as _e, defineComponent as v, mergeModels as ve, mergeProps as ye, nextTick as be, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as xe, onMounted as Se, openBlock as x, reactive as Ce, ref as we, renderList as S, renderSlot as C, resolveDynamicComponent as Te, toDisplayString as w, toRef as Ee, unref as T, useModel as E, useSlots as De, watch as D, withCtx as Oe } from "vue";
 //#region src/components/BbTable/BbTable.vue?vue&type=script&setup=true&lang.ts
-var Oe = {
+var ke = {
 	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 = {
+}, Ae = ["id"], je = ["aria-labelledby", "aria-rowcount"], Me = ["inert"], Ne = ["aria-rowindex"], Pe = { class: "bb-table-header__content" }, Fe = { class: "bb-table-check__label-text sr-only" }, Ie = {
 	key: 1,
 	class: "bb-table-radio__label-text sr-only"
-}, Fe = ["aria-sort"], Ie = { class: "bb-table-header__content" }, Le = {
+}, Le = ["aria-sort"], Re = { class: "bb-table-header__content" }, ze = {
 	key: 1,
 	class: "bb-table-header__content"
-}, Re = { class: "bb-table-header__content sr-only" }, ze = ["aria-rowindex"], Be = {
+}, Be = { class: "bb-table-header__content sr-only" }, Ve = {
+	class: "bb-table__body",
+	role: "rowgroup"
+}, He = ["aria-rowindex"], Ue = {
 	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"
+}, We = {
 	key: 0,
 	class: "bb-table-skeleton__cell-content"
-}, He = {
+}, Ge = {
 	key: 1,
 	class: "bb-table-skeleton__avatar"
-}, Ue = {
+}, Ke = {
 	key: 2,
 	class: "bb-table-skeleton__avatar-text"
-}, We = { class: "bb-table-skeleton__cell-content" }, Ge = {
+}, qe = { class: "bb-table-skeleton__cell-content" }, Je = {
 	key: 3,
 	class: "bb-table-skeleton__image"
-}, Ke = {
+}, Ye = {
 	key: 4,
 	class: "bb-table-skeleton__badge"
-}, qe = {
+}, Xe = {
 	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 = [
+	class: "bb-table-skeleton__cell bb-table-skeleton__cell--actions",
+	role: "cell"
+}, Ze = ["aria-rowindex"], Qe = ["aria-colspan"], $e = { class: "bb-table-no-data__text" }, et = [
 	"aria-current",
 	"aria-rowindex",
 	"inert",
@@ -64,7 +67,11 @@ var Oe = {
 	"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({
+], tt = { class: "bb-table-check__label-text sr-only" }, nt = { class: "bb-table-radio__label-text sr-only" }, rt = ["id", "aria-rowindex"], it = ["aria-colspan"], at = ["aria-rowindex"], ot = ["aria-colspan"], st = {
+	"aria-live": "polite",
+	class: "bb-table-loading__text sr-only",
+	role: "status"
+}, ct = ["role"], lt = 10, O = /*@__PURE__*/ v({
 	__name: "BbTable",
 	props: /*@__PURE__*/ ve({
 		accessibleLabel: {},
@@ -161,95 +168,99 @@ var Oe = {
 		"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(v, { emit: ve }) {
+		let O = E(v, "selectAll"), k = E(v, "sort"), A = E(v, "highlighted"), j = E(v, "expandedItems"), M = v, N = ve, P = De();
 		process.env.NODE_ENV !== "production" && r("BbTable", t("BbTable"));
-		let { getItemValue: ot } = l(), st = 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 { getItemValue: ut } = c(), dt = e().id.value;
+		M.multiple && !Array.isArray(M.modelValue) && n().throw("BbTable is set for multiple selection but modelValue is not an array.");
+		let ft = ["actions", "select"], pt = ["prepend", "append"], mt = (e) => pt.includes(e);
 		if (process.env.NODE_ENV !== "production") {
-			let e = N.columns.filter((e) => ct.includes(e.key));
+			let e = M.columns.filter((e) => ft.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."));
+			for (let e of M.columns) {
+				let t = de(e.key);
+				mt(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({
-			id: () => N.id,
-			container: () => L.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) => {
+		let { t: F } = o(), I = we(), ht = we(), { id: gt, parentId: L, parentNode: R, node: _t, cssVars: vt, parentVar: yt, setTracks: bt } = le({
+			id: () => M.id,
+			container: () => ht.value,
+			inheritFrom: () => typeof M.inheritColumnWidths == "string" ? M.inheritColumnWidths : void 0
+		}), xt = p(() => `${gt.value}__caption`), { data: St } = ne({ items: p(() => a(A.value) ? [] : [A.value]) }), z = (e) => {
+			let t = e.valueHash in St.value;
+			A.value = t ? null : e.value;
+		}, Ct = (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, {
+		}, wt = (e) => k.value.find(([t]) => t === e)?.[1] ?? null, Tt = (e) => {
+			let t = wt(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: B, isReady: Et } = ee(() => gt.value, {
 			selected: {
-				get: () => N.modelValue,
-				set: (e) => P("update:modelValue", e)
+				get: () => M.modelValue,
+				set: (e) => N("update:modelValue", e)
 			},
 			unselected: {
-				get: () => N.unselectedItems,
-				set: (e) => P("update:unselectedItems", e)
+				get: () => M.unselectedItems,
+				set: (e) => N("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: () => A.value ?? null,
 				set: (e) => {
-					j.value = e;
+					A.value = e;
 				}
 			},
-			page: { get: () => N.page === void 0 ? void 0 : p(N.page, 1) },
+			page: { get: () => M.page === void 0 ? void 0 : oe(M.page, 1) },
 			perPage: {
-				get: () => ae(N.perPage),
-				infer: () => Array.isArray(N.items) ? N.items.length : void 0
+				get: () => ae(M.perPage),
+				infer: () => Array.isArray(M.items) ? M.items.length : void 0
 			},
 			totalItems: {
-				get: () => ae(N.totalItems),
-				infer: () => Array.isArray(N.items) ? N.items.length : void 0
+				get: () => ae(M.totalItems),
+				infer: () => Array.isArray(M.items) ? M.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: () => M.totalPages === void 0 ? void 0 : oe(M.totalPages, 1) }
+		}), Dt = p(() => M.columns.some((e) => e.snap != null)), V = p(() => !!M.inheritColumnWidths || Dt.value), Ot = p(() => M.fixed || Dt.value || M.columns.some((e) => e.width != null) || V.value && !!L.value), H = p(() => V.value && !!L.value), kt = H, At = (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;
+		}, jt = p(() => {
+			let e = R.value?.tracks;
 			return e ? Object.keys(e).filter((e) => /^\d+$/.test(e)).length : 0;
-		}), wt = h(() => {
-			let e = ut.value?.tracks ?? {}, t = [];
+		}), Mt = p(() => {
+			let e = R.value?.tracks ?? {}, t = [];
 			"select" in e && t.push("select");
-			for (let e = 0; e < Ct.value; e++) t.push(String(e));
+			for (let e = 0; e < jt.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;
+		}), Nt = p(() => +("select" in (R.value?.tracks ?? {}))), Pt = p(() => Nt.value + jt.value), Ft = p(() => Mt.value.length), It = (e) => {
+			let t = Mt.value[e];
+			return t ? yt(t, "0px") : "0px";
+		}, Lt = (e, t) => {
+			if (!L.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 = It(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;
+		}, U = p(() => {
+			let e = M.columns, t = e.map((e) => typeof e.snap == "number" ? e.snap : Array.isArray(e.snap) ? e.snap[0] : null), n = Nt.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];
+				if (Array.isArray(e.snap)) a = e.snap[1] === -1 ? Pt.value : e.snap[1];
 				else {
 					let e = t[r + 1];
 					a = e != null && e > i ? e : Math.floor(i) + 1;
@@ -259,312 +270,220 @@ var Oe = {
 					end: a
 				};
 			});
-		}), 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];
+		}), Rt = (e) => H.value && e.start >= Pt.value, zt = p(() => U.value.some(Rt)), Bt = (e) => M.columns[e]?.width == null && !H.value, Vt = p(() => {
+			if (!H.value) return -1;
+			for (let e = M.columns.length - 1; e >= 0; e--) {
+				let t = M.columns[e];
 				if (t.width == null && t.snap == null) return e;
 			}
 			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({
+		}), W = p(() => {
+			let e = U.value[0];
+			return !V.value || !L.value || !e ? null : Lt(0, e.start);
+		}), G = p(() => {
+			let e = U.value, t = e[e.length - 1];
+			return !V.value || !L.value || !t || zt.value ? null : Lt(t.end, Ft.value);
+		}), Ht = (e) => _t.tracks[e] ?? null, Ut = (e, t, n) => !V.value || !L.value ? null : n ? t ? `calc(${e ?? "0px"} - ${t})` : null : e, Wt = p(() => Ut(W.value, M.selectable ? Ht("select") : null, !!M.selectable)), Gt = p(() => zt.value ? null : Ut(G.value, M.actions ? Ht("actions") : null, !!M.actions)), Kt = p(() => Wt.value !== null), qt = p(() => Gt.value !== null), Jt = (e) => e && Yt.value ? `minmax(${e}, max-content)` : "max-content", Yt = p(() => Object.keys(R.value?.tracks ?? {}).length > 0), Xt = (e) => /^(auto|min-content|max-content|fit-content\(.*\)|-?[\d.]+fr)$/.test(e.trim()), Zt = p(() => {
+			let e = [];
+			M.selectable && e.push({
 				key: "select",
-				width: t("select")
+				width: Jt(W.value)
 			});
-			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 = M.columns.length - 1, n = !H.value && M.columns.length > 0 && M.columns.every((e) => e.width != null);
+			return M.columns.forEach((r, i) => {
+				let a = String(i), o = r.width == null ? null : At(r.width), s = U.value[i], c = null, l = null;
+				if (o != null && Xt(o) ? l = o : o != null && n ? l = `minmax(${o}, ${parseFloat(o) || 1}fr)` : o == null ? Bt(i) ? l = M.fixed ? "minmax(0, 1fr)" : "auto" : Yt.value ? Rt(s) ? l = "min-content" : (c = Lt(s.start, s.end), c === null && (l = "auto")) : l = "max-content" : c = o, l !== null) {
+					e.push({
+						key: a,
+						width: l
 					});
 					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 u = [];
+				i === 0 && Kt.value && u.push("var(--offset-internal-start, 0px)"), i === t && qt.value && u.push("var(--offset-internal-end, 0px)");
+				let ee = u.length ? `calc(${[...u, c].join(" + ")})` : c, d = i === Vt.value && !zt.value ? `minmax(${ee}, 1fr)` : ee;
+				e.push({
+					key: a,
+					width: d
 				});
-			}), N.actions && n.push({
+			}), M.actions && e.push({
 				key: "actions",
-				width: t("actions")
-			}), n;
-		}), Bt = h(() => {
+				width: Jt(G.value)
+			}), e;
+		}), Qt = p(() => Zt.value.map((e) => e.width).join(" ")), $t = p(() => {
 			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 = () => {
+			return Wt.value && (e["--offset-start"] = Wt.value), Gt.value && (e["--offset-end"] = Gt.value), e;
+		}), en = p(() => ({
+			...vt.value,
+			...$t.value
+		})), tn = () => {
+			let e = I.value, t = Zt.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) : [];
+		}, nn = "", rn = () => {
 			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 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);
-			});
-			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 = "");
-				}
-			});
-			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;
+			let t = he(e);
+			if (!t) return;
+			let n = Zt.value.map((e) => e.key);
+			if (t.length !== n.length) return;
+			let r = t.join(" ");
+			if (r === nn) return;
+			nn = r;
+			let i = {};
+			n.forEach((e, n) => {
+				i[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 a = String(M.columns.length - 1), o = Wt.value, s = Gt.value;
+			o && i[0] && (i[0] = `calc(${i[0]} - (${o}))`, !M.selectable && W.value && (i.select = W.value)), s && i[a] && (i[a] = `calc(${i[a]} - (${s}))`, !M.actions && G.value && (i.actions = G.value)), bt(i), M.fixedColumns?.length && ue(e, M.fixedColumns);
+		}, K, an = () => {
+			if (!K) return;
+			K.disconnect();
+			let e = tn();
+			e.forEach((e) => K?.observe(e)), e.length && rn();
 		};
 		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));
+			K = new ResizeObserver(rn), an();
 		}), 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(() => ({
+			K?.disconnect();
+		}), D(Zt, () => be(an), { flush: "post" });
+		let on = (e, t) => M.accessibleLabel ? M.accessibleLabel(e, t) : [F("table.select").value, ...e.map((e) => e.content)].join(" "), sn = p(() => M.selectable ? "fieldset" : "div"), cn = p(() => M.legend || M.caption || F("table.selectableLegend").value), q = p(() => M.loading || hn.value), ln = p(() => q.value && !M.interactiveWhileLoading), J = p(() => Et.value && !a(B.page) && !a(B.perPage) && !a(B.totalItems) && B.page >= 1 && B.perPage > 0 && B.totalItems >= 0), un = p(() => ({
 			"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--align-${M.align}`]: !0,
+			"bb-table--compact": M.compact,
+			"bb-table--fixed": Ot.value,
+			"bb-table--inherit-widths": kt.value,
+			"bb-table--fixed-header": M.fixedHeaders,
 			"bb-table--loading": q.value,
 			"bb-table--empty": !Y.value.length,
-			"bb-table--selectable": !!N.selectable,
-			"bb-table--measuring": Zt.value,
+			"bb-table--selectable": !!M.selectable,
 			"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({
+		})), dn = p(() => M.columns.length + Number(!!M.selectable) + Number(!!M.actions)), fn = p(() => Object.fromEntries(M.columns.map((e) => [e.key, de(e.key)]))), { getter: pn, items: mn, loading: hn } = s({ items: Ee(M, "items") }), { hasPrefilled: gn } = ie({
 			trigger: !0,
 			fn: async (e) => {
-				await dn(e, B.selected), yn();
+				await pn(e, B.selected), xn();
 			}
-		}), { data: hn } = f({ items: h(() => B.selected) }), { options: Y, baseOptions: gn } = re({
-			disabled: Te(N, "disabled"),
-			items: fn,
+		}), { data: _n } = ne({ items: p(() => B.selected) }), { options: Y, baseOptions: vn } = re({
+			disabled: Ee(M, "disabled"),
+			items: mn,
 			itemText: void 0,
-			itemValue: N.itemValue,
-			max: N.max,
+			itemValue: M.itemValue,
+			max: M.max,
 			selectable: !0,
-			selectedIndexedByHash: hn
-		}), _n = async (e) => {
-			N.multiple ? B.selected = (B.selected ?? []).concat(e.value) : B.selected = e.value;
-		}, vn = async (e) => {
-			if (N.multiple) {
-				let t = { ...hn.value };
+			selectedIndexedByHash: _n
+		}), yn = async (e) => {
+			M.multiple ? B.selected = (B.selected ?? []).concat(e.value) : B.selected = e.value;
+		}, bn = async (e) => {
+			if (M.multiple) {
+				let t = { ..._n.value };
 				delete t[e.valueHash], B.selected = Object.values(t);
 			} else B.selected = null;
 		};
-		ee(() => [
-			N.dependencies,
-			N.items,
-			typeof N.items == "function" ? [B.page, B.perPage] : void 0
+		u(() => [
+			M.dependencies,
+			M.items,
+			typeof M.items == "function" ? [B.page, B.perPage] : void 0
 		], async () => {
-			mn.value && (await dn(!0, B.selected), yn());
-		}, { debounce: N.depsDebounceTime });
-		let yn = () => {
-			if (!N.enforceCoherence) return;
-			let e = new Set(Y.value.map((e) => e.valueHash)), t = (t) => e.has(u(t));
-			if (N.multiple) {
+			gn.value && (await pn(!0, B.selected), xn());
+		}, { debounce: M.depsDebounceTime });
+		let xn = () => {
+			if (!M.enforceCoherence) return;
+			let e = new Set(Y.value.map((e) => e.valueHash)), t = (t) => e.has(l(t));
+			if (M.multiple) {
 				let e = B.selected ?? [];
 				e.every(t) || (B.selected = e.filter(t));
-			} else !o(B.selected) && !t(B.selected) && (B.selected = null);
+			} else !a(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), {
+			n.every(t) || (B.unselected = n.filter(t)), !a(A.value) && !t(A.value) && (A.value = null), j.value.every(t) || (j.value = j.value.filter(t));
+		}, Sn = (e, t) => {
+			let n = fn.value[e.key], r = e.align ?? "left", i = ut(t.item, e.key);
+			return e.formatter && (!a(i) || e.formatOnNull !== !1) && (i = e.formatter(i, e.key, t.item)), e.placeholder && a(i) && (i = e.placeholder), {
 				align: r,
-				classes: fe([`bb-table-data__cell--${r}`], N.tdClass, e.tdClass, i, e.key, t.item),
+				classes: fe([`bb-table-data__cell--${r}`], M.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;
+		}, Cn = p(() => M.columns.map((e) => {
+			let t = e.align ?? "left", n = fn.value[e.key], r = mt(n) ? `header:${n} (shadowed)` : `header:${n}`, i = wt(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: pe([`bb-table-header--${t}`], M.thClass, e.thClass),
 				sortable: !!e.sortable,
-				sortDirection: a,
-				sortOrder: r
+				sortDirection: o,
+				sortOrder: i
 			};
-		})), Sn = (e, t) => {
+		})), wn = (e, t) => {
+			let n = fn.value[e];
+			return (mt(n) ? void 0 : P[`header:${n}:${t}`]) ?? P[`header:${t}`];
+		}, Tn = (e) => ({
+			classes: e.classes,
+			columnKey: e.key,
+			items: mn.value,
+			label: e.label,
+			sortable: e.sortable,
+			sortOrder: e.sortOrder,
+			toggleSort: () => Tt(e.key)
+		}), En = (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));
+		}, Dn = p(() => vn.value.map((e, t) => {
+			let n = M.columns.map((t) => Sn(t, e));
 			return {
-				accessibleLabel: rn(n, e.item),
+				accessibleLabel: on(n, e.item),
 				cols: n,
-				rowClasses: me(N.rowClass, N.columns, n, e.item),
+				rowClasses: me(M.rowClass, M.columns, n, e.item),
 				onRowClick: (n) => {
-					let r = Sn(t, e.valueHash);
-					r && (ht(n, r), P("click:row", n, r, !!r.selected));
+					let r = En(t, e.valueHash);
+					r && (Ct(n, r), N("click:row", n, r.item));
 				},
 				onRowContextMenu: (n) => {
-					let r = Sn(t, e.valueHash);
-					r && P("contextmenu:row", n, r, !!r.selected);
+					let r = En(t, e.valueHash);
+					r && N("contextmenu:row", n, r.item);
 				},
 				onRowDblClick: (n) => {
-					let r = Sn(t, e.valueHash);
-					r && P("dblclick:row", n, r, !!r.selected);
+					let r = En(t, e.valueHash);
+					r && N("dblclick:row", n, r.item);
 				},
 				item: e.item,
 				text: e.text,
 				valueHash: e.valueHash,
 				value: e.value
 			};
-		})), wn = h(() => {
+		})), On = p(() => {
 			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 Dn.value.map((n, r) => {
+				let i = Y.value[r], a = !M.selectable || typeof M.selectable == "function" && !M.selectable(n.item) || !!i.disabled, o = r + 1, s = t + 1 + o + e, c = Nn.value[n.valueHash] ?? !1;
 				return c && e++, {
 					...n,
 					expanded: c,
-					highlighted: n.valueHash in mt.value,
+					highlighted: n.valueHash in St.value,
 					rowIndex: s,
 					selected: i.selected,
 					disabled: a
 				};
 			});
-		}), X = C(0);
-		O(() => wn.value.length, (e) => {
-			X.value = ne(X.value, 0, Math.max(0, e - 1));
+		}), X = we(0);
+		D(() => On.value.length, (e) => {
+			X.value = d(X.value, 0, Math.max(0, e - 1));
 		});
-		let Tn = () => I.value?.querySelectorAll(":scope > tbody > tr.bb-table-data__row"), En = (e) => {
+		let kn = () => I.value?.querySelectorAll(":scope > .bb-table__body > .bb-table-data__row"), An = (e) => {
 			X.value = e;
-			let t = Tn()?.[e];
+			let t = kn()?.[e];
 			t?.focus(), t?.scrollIntoView({ block: "nearest" });
-		}, Dn = (e) => {
-			N.keyboardNavigation && (X.value = e);
-		}, On = (e, t) => {
-			if (!N.keyboardNavigation || e.target !== e.currentTarget) return;
-			let n = wn.value.length - 1;
+		}, jn = (e) => {
+			M.keyboardNavigation && (X.value = e);
+		}, Mn = (e, t) => {
+			if (!M.keyboardNavigation || e.target !== e.currentTarget) return;
+			let n = On.value.length - 1;
 			if (n < 0) return;
 			let r = (t) => {
-				e.preventDefault(), En(ne(t, 0, n));
+				e.preventDefault(), An(d(t, 0, n));
 			};
 			switch (e.key) {
 				case "ArrowDown":
@@ -574,10 +493,10 @@ var Oe = {
 					r(t - 1);
 					break;
 				case "PageDown":
-					r(t + at);
+					r(t + lt);
 					break;
 				case "PageUp":
-					r(t - at);
+					r(t - lt);
 					break;
 				case "Home":
 					r(0);
@@ -590,105 +509,111 @@ var Oe = {
 					e.preventDefault(), e.currentTarget.click();
 					break;
 			}
-		}, { data: kn } = f({ items: M }), An = (e, t) => {
+		}, { data: Nn } = ne({ items: j }), Pn = (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}`,
+		}, Fn = (e) => ({
+			"aria-controls": a(Nn.value[e.valueHash]) ? void 0 : `expanded_${e.valueHash}`,
 			"aria-expanded": e.expanded ? "true" : "false",
 			onClick: (t) => {
 				t.stopPropagation(), Z(e.valueHash);
 			},
-			onKeydown: (t) => An(t, e.valueHash)
+			onKeydown: (t) => Pn(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]);
+			t && (e in Nn.value ? j.value = j.value.filter((t) => l(t) !== e) : j.value = [...j.value, t.value]);
 		};
-		O(k, () => {
+		D(O, () => {
 			Q.clear(), B.unselected = [], B.selected = [];
 		});
-		let Mn = h(() => {
+		let In = p(() => {
 			let e = Array.isArray(B.selected) ? B.selected.length : 0;
-			return !!(N.multiple && e > 0 && !k.value || k.value && Q.size > 0);
+			return !!(M.multiple && e > 0 && !O.value || O.value && Q.size > 0);
 		}), Q = Ce(/* @__PURE__ */ new Set());
-		O(() => B.unselected, (e) => {
+		D(() => B.unselected, (e) => {
 			Q.clear(), (e ?? []).forEach((e) => {
-				Q.add(u(e));
+				Q.add(l(e));
 			});
 		}, { immediate: !0 });
-		let Nn = (e) => {
+		let Ln = (e) => {
 			let t = B.unselected ?? [];
 			if ($(e)) {
-				vn(e), P("item:unselected", e.value), Q.add(e.valueHash), B.unselected = [...t, e.value];
+				bn(e), N("item:unselected", e.value), Q.add(e.valueHash), B.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) => {
-			if (N.disabled || N.readonly || typeof N.selectable == "function" && !N.selectable(e.item)) return !0;
+			O.value || yn(e), N("item:selected", e.value), Q.delete(e.valueHash), B.unselected = t.filter((t) => l(t) !== l(e.value));
+		}, $ = (e) => Q.has(e.valueHash) ? !1 : e.selected || O.value, Rn = (e) => {
+			if (M.disabled || M.readonly || typeof M.selectable == "function" && !M.selectable(e.item)) return !0;
 			let t = Y.value.find((t) => t.valueHash === 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) => ({
-			disabled: N.disabled,
-			name: N.name,
+		}, zn = (e) => {
+			Rn(e) || Ln(e);
+		}, Bn = ce((e) => typeof e != "string", JSON.stringify), Vn = p(() => [].concat(B.selected ?? []).map((e) => ({
+			disabled: M.disabled,
+			name: M.name,
 			type: "hidden",
-			value: In(e)
-		}))), Rn = [
+			value: Bn(e)
+		}))), Hn = [
 			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), {
+		], Un = p(() => d(Y.value.length || M.columns.length || 1, 4, 10));
+		return D(() => [On.value, M.fixedColumns], () => {
+			I.value && M.fixedColumns?.length && ue(I.value, M.fixedColumns), P.thead && be(an);
+		}, { flush: "post" }), (e, t) => (x(), m(Te(sn.value), {
 			id: e.id,
 			ref_key: "containerRef",
-			ref: L,
+			ref: ht,
 			"aria-busy": q.value,
-			class: b(cn.value),
-			"data-bb-table-id": D(lt),
+			class: y(un.value),
+			"data-bb-table-id": T(gt),
 			inert: e.disabled,
-			style: x(Vt.value)
+			style: b(en.value)
 		}, {
-			default: De(() => [
-				e.selectable ? (S(), _("legend", Oe, E(on.value), 1)) : g("", !0),
-				v("table", {
+			default: Oe(() => [
+				e.selectable ? (x(), g("legend", ke, w(cn.value), 1)) : h("", !0),
+				e.caption ? (x(), g("div", {
+					key: 1,
+					id: xt.value,
+					class: y(["bb-table-caption", { "sr-only": !e.displayCaption }])
+				}, w(e.caption), 11, Ae)) : h("", !0),
+				_("div", {
 					ref_key: "tableRef",
 					ref: I,
-					"aria-rowcount": J.value ? D(B).totalItems : void 0
+					"aria-labelledby": e.caption ? xt.value : void 0,
+					"aria-rowcount": J.value && T(B).totalItems != null ? T(B).totalItems + 1 : void 0,
+					class: "bb-table__table",
+					role: "table",
+					style: b({ gridTemplateColumns: Qt.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", {
+					_("div", {
+						class: "bb-table__head",
+						inert: ln.value,
+						role: "rowgroup"
+					}, [C(e.$slots, "thead", {}, () => [_("div", {
 						"aria-rowindex": J.value ? 1 : void 0,
-						class: b(["bb-table-header-row", e.headerRowClass])
+						class: y(["bb-table-header-row", e.headerRowClass]),
+						role: "row"
 					}, [
-						e.selectable ? (S(), _("th", {
+						e.selectable ? (x(), g("div", {
 							key: 0,
-							class: b(["bb-table-header bb-table-header--select", e.thClass]),
-							scope: "col"
-						}, [T(e.$slots, "header:select", {
+							class: y(["bb-table-header bb-table-header--select", e.thClass]),
+							role: "columnheader"
+						}, [C(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 || T(F)("table.selectText").value
+						}, () => [_("span", Pe, [!e.disableSelectAll && e.multiple ? (x(), g("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,
+							class: y(["bb-table-check__label", { "bb-table-check__label--disabled": e.disabled }])
+						}, [(x(), m(te, {
+							key: In.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: In.value,
 							name: `select_all_${e.name || ""}`,
 							readonly: e.readonly
 						}, null, 8, [
@@ -698,118 +623,139 @@ 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
+						])), _("span", Fe, w(e.selectAllLabel || T(F)("table.selectAllLabel").value), 1)], 2)) : e.multiple ? h("", !0) : (x(), g("span", Ie, w(e.selectText || T(F)("table.selectText").value), 1))])])], 2)) : h("", !0),
+						(x(!0), g(f, null, S(Cn.value, (n, r) => (x(), g("div", {
+							key: n.key,
+							"aria-sort": n.sortDirection ?? (n.sortable ? "none" : void 0),
+							class: y(["bb-table-header", [n.classes, {
+								"bb-table-header--edge-start": r === 0,
+								"bb-table-header--edge-end": r === Cn.value.length - 1
 							}]]),
-							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", {
+							role: "columnheader"
+						}, [
+							wn(n.key, "prepend") ? (x(), m(Te(wn(n.key, "prepend")), ye({
+								key: 0,
+								ref_for: !0
+							}, Tn(n)), null, 16)) : h("", !0),
+							C(e.$slots, n.slotName, {
+								classes: n.classes,
+								items: T(mn),
+								label: n.label,
+								sortOrder: n.sortOrder,
+								sortable: n.sortable,
+								toggleSort: () => Tt(n.key)
+							}, () => [n.sortable ? (x(), m(i, {
+								key: 0,
+								class: y(["bb-table-sort", {
+									"bb-table-sort--asc": n.sortOrder === "asc",
+									"bb-table-sort--desc": n.sortOrder === "desc"
+								}]),
+								type: "button",
+								onClick: () => Tt(n.key)
+							}, {
+								default: Oe(() => [_("span", Re, w(n.label), 1), t[1] ||= _("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"
+								}, [_("path", { d: "M12 20V4m-7 7l7-7l7 7" })], -1)]),
+								_: 2
+							}, 1032, ["class", "onClick"])) : (x(), g("span", ze, w(n.label), 1))]),
+							wn(n.key, "append") ? (x(), m(Te(wn(n.key, "append")), ye({
+								key: 1,
+								ref_for: !0
+							}, Tn(n)), null, 16)) : h("", !0)
+						], 10, Le))), 128)),
+						e.actions ? (x(), g("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", {
+							class: y(["bb-table-header bb-table-header--actions", e.thClass]),
+							role: "columnheader"
+						}, [C(e.$slots, "header:actions", { text: e.actionsText || T(F)("table.actionsText").value }, () => [_("span", Be, w(e.actionsText || T(F)("table.actionsText").value), 1)])], 2)) : h("", !0)
+					], 10, Ne)])], 8, Me),
+					_("div", Ve, [q.value && !T(Y).length ? C(e.$slots, "loading", {
 						key: 0,
-						items: D(fn)
-					}, () => [(S(!0), _(m, null, w(zn.value, (n, r) => (S(), _("tr", {
+						items: T(mn)
+					}, () => [(x(!0), g(f, null, S(Un.value, (n, r) => (x(), g("div", {
 						key: r,
 						"aria-rowindex": J.value ? r + 2 : void 0,
-						class: "bb-table-skeleton__row"
+						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 ? (x(), g("div", Ue, t[2] ||= [_("div", { class: "bb-table-skeleton__placeholder" }, null, -1)])) : h("", !0),
+						(x(!0), g(f, null, S(M.columns, (e, n) => (x(), g("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: y(["bb-table-skeleton__cell", [`bb-table-skeleton__cell--${e.skeleton ?? "text"}`]]),
+							role: "cell"
+						}, [!e.skeleton || e.skeleton === "text" ? (x(), g("div", We, [_("div", {
 							class: "bb-table-skeleton__line",
-							style: x({ width: `${Rn[(r + n) % 4]}%` })
-						}, null, 4), v("div", {
+							style: b({ width: `${Hn[(r + n) % 4]}%` })
+						}, null, 4), _("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: b({ width: `${Hn[(r + n + 2) % 4]}%` })
+						}, null, 4)])) : e.skeleton === "avatar" ? (x(), g("div", Ge)) : e.skeleton === "avatar-text" ? (x(), g("div", Ke, [t[3] ||= _("div", { class: "bb-table-skeleton__avatar" }, null, -1), _("div", qe, [_("div", {
 							class: "bb-table-skeleton__line",
-							style: x({ width: `${Rn[(r + n) % 4]}%` })
-						}, null, 4), v("div", {
+							style: b({ width: `${Hn[(r + n) % 4]}%` })
+						}, null, 4), _("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", {
+							style: b({ width: `${Hn[(r + n + 2) % 4]}%` })
+						}, null, 4)])])) : e.skeleton === "image" ? (x(), g("div", Je)) : e.skeleton === "badge" ? (x(), g("div", Ye)) : h("", !0)], 2))), 128)),
+						e.actions ? (x(), g("div", Xe, t[4] ||= [_("div", { class: "bb-table-skeleton__placeholder" }, null, -1)])) : h("", !0)
+					], 8, He))), 128))]) : T(Y).length ? C(e.$slots, "tbody", { key: 2 }, () => [(x(!0), g(f, null, S(On.value, (t, n) => (x(), g(f, { key: t.valueHash }, [_("div", {
 						"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,
+						class: y(["bb-table-data__row", [t.rowClasses, { "bb-table-data__row--highlighted": t.highlighted }]]),
+						inert: ln.value,
+						role: "row",
 						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)
+						onFocus: () => jn(n),
+						onKeydown: (e) => Mn(e, n)
 					}, [
-						e.selectable ? (S(), _("td", {
+						e.selectable ? (x(), g("div", {
 							key: 0,
-							class: b(["bb-table-data__cell bb-table-data__cell--select", e.tdClass])
-						}, [T(e.$slots, "select", {
+							class: y(["bb-table-data__cell bb-table-data__cell--select", e.tdClass]),
+							role: "cell"
+						}, [C(e.$slots, "select", {
 							checked: $(t),
-							disabled: Pn(t),
-							inputName: D(st),
+							disabled: Rn(t),
+							inputName: T(dt),
 							item: t.item,
 							readonly: !!e.readonly,
-							toggleSelected: () => Fn(t),
+							toggleSelected: () => zn(t),
 							value: t.value
-						}, () => [e.multiple ? (S(), _("label", {
+						}, () => [e.multiple ? (x(), g("label", {
 							key: 0,
-							class: b(["bb-table-check__label", { "bb-table-check__label--disabled": t.disabled }])
-						}, [_e(d, {
+							class: y(["bb-table-check__label", { "bb-table-check__label--disabled": t.disabled }])
+						}, [_e(te, {
 							checked: $(t),
 							class: "bb-table-check",
 							disabled: t.disabled,
 							readonly: e.readonly,
-							onChange: () => Nn(t)
+							onChange: () => Ln(t)
 						}, null, 8, [
 							"checked",
 							"disabled",
 							"readonly",
 							"onChange"
-						]), v("span", Qe, E(t.accessibleLabel), 1)], 2)) : (S(), _("label", {
+						]), _("span", tt, w(t.accessibleLabel), 1)], 2)) : (x(), g("label", {
 							key: 1,
-							class: b(["bb-table-radio__label", { "bb-table-radio__label--disabled": t.disabled }])
-						}, [_e(oe, {
+							class: y(["bb-table-radio__label", { "bb-table-radio__label--disabled": t.disabled }])
+						}, [_e(se, {
 							checked: t.selected,
 							class: "bb-table-radio",
 							disabled: t.disabled,
-							name: D(st),
+							name: T(dt),
 							readonly: e.readonly,
 							value: t.value,
-							onChange: () => Nn(t)
+							onChange: () => Ln(t)
 						}, null, 8, [
 							"checked",
 							"disabled",
@@ -817,79 +763,88 @@ var Oe = {
 							"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", {
+						]), _("span", nt, w(t.accessibleLabel), 1)], 2))])], 2)) : h("", !0),
+						(x(!0), g(f, null, S(t.cols, (n, r) => (x(), g("div", {
 							key: n.key,
-							class: b(["bb-table-data__cell", [n.classes, {
+							class: y(["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, {
+							}]]),
+							role: "cell"
+						}, [C(e.$slots, n.slotName, {
 							classes: n.classes,
 							content: n.content,
-							expandProps: jn(t),
+							expandProps: Fn(t),
 							expanded: t.expanded,
 							highlighted: t.highlighted,
 							item: t.item,
 							selected: $(t),
-							sortOrder: gt(n.key),
+							sortOrder: wt(n.key),
 							toggleExpanded: () => Z(t.valueHash),
 							toggleHighlighted: () => z(t),
-							toggleSelected: () => Fn(t),
+							toggleSelected: () => zn(t),
 							value: t.value
-						}, () => [ge(E(n.content), 1)])], 2))), 128)),
-						e.actions ? (S(), _("td", {
+						}, () => [ge(w(n.content), 1)])], 2))), 128)),
+						e.actions ? (x(), g("div", {
 							key: 1,
-							class: b(["bb-table__cell bb-table__cell--actions", e.tdClass])
-						}, [T(e.$slots, "actions", {
-							expandProps: jn(t),
+							class: y(["bb-table__cell bb-table__cell--actions", e.tdClass]),
+							role: "cell"
+						}, [C(e.$slots, "actions", {
+							expandProps: Fn(t),
 							expanded: t.expanded,
 							highlighted: t.highlighted,
 							item: t.item,
 							selected: $(t),
 							toggleExpanded: () => Z(t.valueHash),
 							toggleHighlighted: () => z(t),
-							toggleSelected: () => Fn(t),
+							toggleSelected: () => zn(t),
 							value: t.value
-						})], 2)) : g("", !0)
-					], 42, Ze), t.expanded ? (S(), _("tr", {
+						})], 2)) : h("", !0)
+					], 42, et), t.expanded ? (x(), g("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: y(["bb-table-expand__row", { "bb-table-expand__row--highlighted": t.highlighted }]),
+						role: "row"
+					}, [_("div", {
+						"aria-colspan": dn.value,
 						class: "bb-table-expand__cell",
-						colspan: ln.value
-					}, [T(e.$slots, "expand", {
-						expandProps: jn(t),
+						role: "cell"
+					}, [C(e.$slots, "expand", {
+						expandProps: Fn(t),
 						expanded: t.expanded,
 						highlighted: t.highlighted,
 						item: t.item,
 						selected: $(t),
 						toggleExpanded: () => Z(t.valueHash),
 						toggleHighlighted: () => z(t),
-						toggleSelected: () => Fn(t),
+						toggleSelected: () => zn(t),
 						value: t.value
-					})], 8, tt)], 10, et)) : g("", !0)], 64))), 128))]) : (S(), _("tr", {
+					})], 8, it)], 10, rt)) : h("", !0)], 64))), 128))]) : (x(), g("div", {
 						key: 1,
 						"aria-rowindex": J.value ? 2 : void 0,
-						class: "bb-table-no-data__row"
-					}, [v("td", {
+						class: "bb-table-no-data__row",
+						role: "row"
+					}, [_("div", {
+						"aria-colspan": dn.value,
 						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", {
+						role: "cell"
+					}, [C(e.$slots, "no-data", {}, () => [_("span", $e, w(e.noDataText || T(F)("common.noDataText").value), 1)])], 8, Qe)], 8, Ze)), q.value ? (x(), g("div", {
 						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",
+						"aria-rowindex": J.value && !T(Y).length ? Un.value + 2 : void 0,
+						class: "bb-table-loading__row bb-table-loading__row--sr-only",
+						role: "row"
+					}, [_("div", {
+						"aria-colspan": dn.value,
 						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({
+						role: "cell"
+					}, [_("span", st, w(e.loadingText || T(F)("common.loadingText").value), 1)], 8, ot)], 8, at)) : h("", !0)]),
+					_("div", {
+						class: "bb-table__foot",
+						role: P.tfoot ? "rowgroup" : void 0
+					}, [C(e.$slots, "tfoot", { columnCount: dn.value })], 8, ct)
+				], 12, je),
+				(x(!0), g(f, null, S(Vn.value, (e) => (x(), g("input", ye({
 					key: e.value,
 					ref_for: !0
 				}, e), null, 16))), 128))
@@ -906,4 +861,4 @@ var Oe = {
 	}
 });
 //#endregion
-export { k as default };
+export { O as default };