@vielzeug/refine 2.4.0 → 3.1.0

package/dist/datagrid.js

@@ -1,15 +1,15 @@
 import { tableBaseMixin as e } from "./styles/mixins/table-base.css.js";
-import "./_dev.js";
-import { disablableBundle as t, loadableBundle as n } from "./shared/prop-bundles.js";
-import r from "./inputs/datagrid/datagrid.css.js";
-import { COLUMN_OBSERVED_ATTRS as i, COLUMN_TAG as a, parseColumnChildren as o } from "./inputs/datagrid/datagrid-column.js";
-import { createDataGridModel as s } from "./inputs/datagrid/datagrid-model.js";
+import { warn as t } from "./_dev.js";
+import { disablableBundle as n, loadableBundle as r } from "./shared/prop-bundles.js";
+import i from "./inputs/datagrid/datagrid.css.js";
+import { COLUMN_OBSERVED_ATTRS as a, COLUMN_TAG as o, parseColumnChildren as s } from "./inputs/datagrid/datagrid-column.js";
+import { createDataGridModel as c } from "./inputs/datagrid/datagrid-model.js";
 import { createGridNav as ee } from "./inputs/datagrid/datagrid-nav.js";
-import { define as c, getHost as te, html as l, onCleanup as ne, onMounted as u, prop as d, unsafeHtml as f, useEmit as p, useSlots as m } from "@vielzeug/ore";
-import { computed as h, signal as g, watch as _ } from "@vielzeug/ripple";
-import { debounce as re } from "@vielzeug/arsenal/function";
+import { define as l, getHost as u, html as d, onCleanup as f, onMounted as p, prop as m, unsafeHtml as h, useEmit as g, useSlots as te } from "@vielzeug/ore";
+import { computed as _, signal as v, watch as y } from "@vielzeug/ripple";
+import { debounce as b } from "@vielzeug/arsenal";
 //#region src/inputs/datagrid/datagrid.ts
-var v = {
+var x = {
 	activeFilters: (e) => `${e} active filter${e === 1 ? "" : "s"}`,
 	addFilter: "Add filter…",
 	ascending: "A → Z",
@@ -56,69 +56,69 @@ var v = {
 	views: "Views",
 	visibleColumns: (e, t) => `${e} of ${t} visible`
 };
-function y(e, t) {
+function S(e, t) {
 	return e.key !== t || e.direction === "none" ? "chevrons-up-down" : e.direction === "asc" ? "chevron-up" : "chevron-down";
 }
-function b(e, t) {
+function C(e, t) {
 	return e.key !== t || e.direction === "none" ? "none" : e.direction === "asc" ? "ascending" : "descending";
 }
-function x(e) {
+function w(e) {
 	let t = e.detail;
 	return Array.isArray(t?.values) ? t.values : (e.target.value ?? "").split(",").filter(Boolean);
 }
-var S = "ore-datagrid";
-c(S, {
+var T = "ore-datagrid";
+l(T, {
 	props: {
-		activeView: d.string(),
-		density: d.string(),
-		...t,
+		activeView: m.string(),
+		density: m.string(),
 		...n,
-		columns: d.data(),
-		emptyText: d.string("No data"),
-		expandable: d.bool(!1),
-		filterOptions: d.data(),
-		fullwidth: d.bool(!1),
-		getRowKey: d.data(),
-		label: d.string(),
-		labels: d.data(),
-		pageSize: d.number(10),
-		pageSizeOptions: d.data(),
-		rows: d.data(),
-		searchLabel: d.data(),
-		searchPlaceholder: d.string(),
-		selectedKeys: d.data(),
-		selectionMode: d.string("none"),
-		sortMode: d.string("client"),
-		source: d.data(),
-		striped: d.bool(!1),
-		views: d.data()
+		...r,
+		columns: m.data(),
+		emptyText: m.string("No data"),
+		expandable: m.bool(!1),
+		filterOptions: m.data(),
+		fullwidth: m.bool(!1),
+		getRowKey: m.data(),
+		label: m.string(),
+		labels: m.data(),
+		pageSize: m.number(10),
+		pageSizeOptions: m.data(),
+		rows: m.data(),
+		searchLabel: m.data(),
+		searchPlaceholder: m.string(),
+		selectedKeys: m.data(),
+		selectionMode: m.string("none"),
+		sortMode: m.string("client"),
+		source: m.data(),
+		striped: m.bool(!1),
+		views: m.data()
 	},
 	setup(e) {
-		let t = te(), n = p(), r = m(), a = h(() => ({
-			...v,
+		let n = u(), r = g(), i = te(), o = _(() => ({
+			...x,
 			...e.labels.value
-		})), c = h(() => e.disabled.value === !0), d = h(() => e.selectionMode.value ?? "none"), S = g(/* @__PURE__ */ new Set()), C = h(() => e.expandable.value === !0 && D.value.some((e) => typeof e.renderExpanded == "function")), w = h(() => +(d.value === "multi")), T = g(e.pageSize.value ?? 10);
-		_(e.pageSize, (e) => {
-			e != null && (T.value = e);
+		})), l = _(() => e.disabled.value === !0), m = _(() => e.selectionMode.value ?? "none"), T = v(/* @__PURE__ */ new Set()), E = _(() => e.expandable.value === !0 && A.value.some((e) => typeof e.renderExpanded == "function")), D = _(() => +(m.value === "multi")), O = v(e.pageSize.value ?? 10);
+		y(e.pageSize, (e) => {
+			e != null && (O.value = e);
 		});
-		let E = g([]);
-		u(() => {
-			E.value = o(t);
+		let k = v([]);
+		p(() => {
+			k.value = s(n);
 			let e = new MutationObserver(() => {
-				E.value = o(t);
+				k.value = s(n);
 			});
-			return e.observe(t, {
-				attributeFilter: i,
+			return e.observe(n, {
+				attributeFilter: a,
 				attributes: !0,
 				childList: !0,
 				subtree: !0
 			}), () => e.disconnect();
 		});
-		let D = h(() => {
+		let A = _(() => {
 			let t = e.columns.value;
-			return t === void 0 ? E.value : t;
-		}), O = h(() => {
-			let t = D.value.map((e) => ({
+			return t === void 0 ? k.value : t;
+		}), ne = _(() => {
+			let t = A.value.map((e) => ({
 				label: e.label,
 				value: e.key
 			})), n = new Set(t.map((e) => e.value));
@@ -127,193 +127,196 @@ c(S, {
 				value: r.key
 			});
 			return t;
-		}), k = (t) => {
+		}), j = (t) => {
 			let n = e.getRowKey.value;
 			if (n) return n(t);
 			let r = t.id;
 			return r == null ? `__missing_${Math.random().toString(36).slice(2)}` : String(r);
-		}, A = h(() => e.source.value != null), j = g([]), M = g({
+		}, M = _(() => e.source.value != null), N = v([]), P = v({
 			error: null,
 			isLoading: !1,
 			pageCount: 1,
 			pageNumber: 1,
-			pageSize: T.value,
+			pageSize: O.value,
 			totalItems: 0
-		}), N = null;
-		ne(() => {
-			N?.(), N = null;
-		}), _(e.source, (e) => {
-			if (N?.(), N = null, !e) {
-				j.value = [], M.value = {
+		}), F = null;
+		f(() => {
+			F?.(), F = null;
+		}), y(e.source, (e) => {
+			if (F?.(), F = null, !e) {
+				N.value = [], P.value = {
 					error: null,
 					isLoading: !1,
 					pageCount: 1,
 					pageNumber: 1,
-					pageSize: T.value,
+					pageSize: O.value,
 					totalItems: 0
 				};
 				return;
 			}
-			let t = (t = e.snapshot) => {
-				j.value = t.data, M.value = {
+			let t = (t = e.state) => {
+				N.value = t.items, P.value = {
 					error: t.error,
-					isLoading: t.isFetching,
-					pageCount: t.pagination.count,
-					pageNumber: t.pagination.index,
-					pageSize: t.pagination.size,
-					totalItems: t.pagination.total
+					isLoading: t.loading,
+					pageCount: t.pagination.pageCount,
+					pageNumber: t.pagination.page,
+					pageSize: t.pagination.pageSize,
+					totalItems: t.pagination.totalItems
 				};
 			};
-			t(), N = e.subscribe(t);
+			t(), F = e.subscribe(t);
 		}, { immediate: !0 });
-		let P = s({
-			activeView: h(() => (e.views.value ?? []).find((t) => t.id === e.activeView.value)),
-			clientSide: h(() => !A.value),
-			columns: D,
-			emptyValueLabel: h(() => a.value.emptyValue),
-			filterOperators: h(() => [
+		let I = c({
+			activeView: _(() => (e.views.value ?? []).find((t) => t.id === e.activeView.value)),
+			clientSide: _(() => !M.value),
+			columns: A,
+			emptyValueLabel: _(() => o.value.emptyValue),
+			filterOperators: _(() => [
 				{
-					label: a.value.contains,
+					label: o.value.contains,
 					value: "contains"
 				},
 				{
-					label: a.value.equals,
+					label: o.value.equals,
 					value: "equals"
 				},
 				{
-					label: a.value.greaterThan,
+					label: o.value.greaterThan,
 					value: "gt"
 				},
 				{
-					label: a.value.lessThan,
+					label: o.value.lessThan,
 					value: "lt"
 				}
 			]),
 			filterOptions: e.filterOptions,
-			getRowKey: k,
-			items: h(() => A.value ? j.value : e.rows.value ?? []),
+			getRowKey: j,
+			items: _(() => M.value ? N.value : e.rows.value ?? []),
 			onSelectionChange: (e) => {
-				n("selection-change", {
+				r("selection-change", {
 					keys: [...e],
-					rows: P.selectedRows.value
+					rows: I.selectedRows.value
 				});
 			},
 			onSortChange: (e) => {
-				n("sort-change", e);
+				r("sort-change", e);
 			},
-			pageSize: h(() => A.value ? 0 : T.value),
-			selectionMode: d,
-			sortMode: h(() => e.sortMode.value ?? "client")
-		}), ie = h(() => {
-			let e = D.value.find((e) => e.key === P.sortState.value.key);
+			pageSize: _(() => M.value ? 0 : O.value),
+			selectionMode: m,
+			sortMode: _(() => e.sortMode.value ?? "client")
+		}), L = _(() => {
+			let e = A.value.find((e) => e.key === I.sortState.value.key);
 			if (e?.sortType) return e.sortType;
-			let t = P.filteredRows.value.find((t) => t[e?.key ?? ""] != null);
+			let t = I.filteredRows.value.find((t) => t[e?.key ?? ""] != null);
 			return t && typeof t[e?.key ?? ""] == "number" ? "number" : "text";
-		}), F = h(() => ie.value === "number" ? [{
-			label: a.value.numericAscending,
+		}), re = _(() => L.value === "number" ? [{
+			label: o.value.numericAscending,
 			value: "asc"
 		}, {
-			label: a.value.numericDescending,
+			label: o.value.numericDescending,
 			value: "desc"
 		}] : [{
-			label: a.value.ascending,
+			label: o.value.ascending,
 			value: "asc"
 		}, {
-			label: a.value.descending,
+			label: o.value.descending,
 			value: "desc"
-		}]), I = re((t) => {
-			let n = e.source.value;
-			n?.setQuery ? n.setQuery({ search: t }) : P.setSearchQuery(t);
+		}]), R = (e) => {
+			e && e.catch((e) => /* @__PURE__ */ t(`ore-datagrid: source command failed: ${String(e)}`));
+		}, z = (t) => {
+			R(e.source.value?.setParams?.(t));
+		}, B = b((t) => {
+			e.source.value?.setParams ? z(t) : I.setSearchQuery(t);
 		}, 250);
-		_(e.selectedKeys, (e) => {
-			Array.isArray(e) && P.setSelection(new Set(e));
+		f(B.cancel), y(e.selectedKeys, (e) => {
+			Array.isArray(e) && I.setSelection(new Set(e));
 		}, { immediate: !0 });
-		let L = g({}), R = (e, t) => (n) => {
+		let V = v({}), H = (e, t) => (n) => {
 			n.preventDefault();
 			let r = n.clientX, i = t.getBoundingClientRect().width, a = new AbortController(), { signal: o } = a;
 			window.addEventListener("pointermove", (t) => {
-				L.value = {
-					...L.value,
+				V.value = {
+					...V.value,
 					[e]: Math.max(40, i + t.clientX - r)
 				};
 			}, { signal: o }), window.addEventListener("pointerup", () => a.abort(), { signal: o });
-		}, z = P.visibleColumns, B = (e, t) => {
+		}, U = I.visibleColumns, W = (e, t) => {
 			if (e.cell) return e.cell(t);
 			let n = t[e.key];
 			return n == null ? "" : String(n);
 		};
-		function V(t) {
-			let r = e.source.value;
-			if (r) {
-				t === "prev" ? r.page?.previous() : r.page?.next();
+		function G(t) {
+			let n = e.source.value;
+			if (n) {
+				R(t === "prev" ? n.previous() : n.next());
 				return;
 			}
-			t === "prev" ? P.prevPage() : P.nextPage(), n("page-change", {
-				pageIndex: P.pageIndex.value,
-				pageSize: T.value
+			t === "prev" ? I.prevPage() : I.nextPage(), r("page-change", {
+				pageIndex: I.pageIndex.value,
+				pageSize: O.value
 			});
 		}
-		let H = h(() => {
-			let e = P.currentPageItems.value;
-			return !e.length || P.isAllSelected() ? !1 : e.some((e) => P.selectedKeys.value.has(k(e)));
-		}), U = h(() => z.value.length + +(d.value === "multi") + +!!C.value), W = h(() => A.value ? M.value.pageCount > 1 : T.value > 0), G = h(() => {
-			if (A.value) {
-				let { pageNumber: e, pageSize: t, totalItems: n } = M.value, r = Math.max(1, t);
-				if (!W.value) return a.value.rows(n);
-				if (n === 0) return a.value.range(0, 0, 0);
-				let i = (e - 1) * r + 1, o = Math.min(i + r - 1, n);
-				return a.value.range(i, o, n);
+		let K = _(() => {
+			let e = I.currentPageItems.value;
+			return !e.length || I.isAllSelected() ? !1 : e.some((e) => I.selectedKeys.value.has(j(e)));
+		}), q = _(() => U.value.length + +(m.value === "multi") + +!!E.value), J = _(() => M.value ? P.value.pageCount > 1 : O.value > 0), Y = _(() => {
+			if (M.value) {
+				let { pageNumber: e, pageSize: t, totalItems: n } = P.value, r = Math.max(1, t);
+				if (!J.value) return o.value.rows(n);
+				if (n === 0) return o.value.range(0, 0, 0);
+				let i = (e - 1) * r + 1, a = Math.min(i + r - 1, n);
+				return o.value.range(i, a, n);
 			}
-			let e = P.totalItems.value;
-			if (!W.value) return a.value.rows(e);
-			if (e === 0) return a.value.range(0, 0, 0);
-			let t = P.pageIndex.value * T.value + 1, n = Math.min(t + T.value - 1, e);
-			return a.value.range(t, n, e);
-		}), K = h(() => e.loading.value === !0 || A.value && M.value.isLoading), q = h(() => A.value ? M.value.pageNumber > 1 : P.hasPrevPage.value), J = h(() => A.value ? M.value.pageNumber < M.value.pageCount : P.hasNextPage.value), ae = h(() => A.value ? M.value.totalItems === 0 ? "0 / 0" : `${M.value.pageNumber} / ${M.value.pageCount}` : `${P.pageIndex.value + 1} / ${P.pageCount.value}`), Y = [
+			let e = I.totalItems.value;
+			if (!J.value) return o.value.rows(e);
+			if (e === 0) return o.value.range(0, 0, 0);
+			let t = I.pageIndex.value * O.value + 1, n = Math.min(t + O.value - 1, e);
+			return o.value.range(t, n, e);
+		}), ie = _(() => e.loading.value === !0 || M.value && P.value.isLoading), ae = _(() => M.value ? P.value.pageNumber > 1 : I.hasPrevPage.value), oe = _(() => M.value ? P.value.pageNumber < P.value.pageCount : I.hasNextPage.value), se = _(() => M.value ? P.value.totalItems === 0 ? "0 / 0" : `${P.value.pageNumber} / ${P.value.pageCount}` : `${I.pageIndex.value + 1} / ${I.pageCount.value}`), X = [
 			"compact",
 			"cozy",
 			"comfortable"
-		], oe = {
+		], ce = {
 			comfortable: "rows-2",
 			compact: "rows-4",
 			cozy: "rows-3"
-		}, se = h(() => ({
-			comfortable: a.value.comfortableDensity,
-			compact: a.value.compactDensity,
-			cozy: a.value.cozyDensity
-		})), X = g(e.density.value ?? "cozy");
-		_(e.density, (e) => {
-			e && (X.value = e);
+		}, le = _(() => ({
+			comfortable: o.value.comfortableDensity,
+			compact: o.value.compactDensity,
+			cozy: o.value.cozyDensity
+		})), Z = v(e.density.value ?? "cozy");
+		y(e.density, (e) => {
+			e && (Z.value = e);
 		});
-		let ce = () => {
-			let e = Y.indexOf(X.value), r = Y[(e + 1) % Y.length];
-			X.value = r, t.setAttribute("density", r), n("density-change", { density: r });
-		}, Z = (e) => {
-			let t = new Set(S.value), r = !t.has(e);
-			r ? t.add(e) : t.delete(e), S.value = t, n("row-expand", {
-				expanded: r,
+		let ue = () => {
+			let e = X.indexOf(Z.value), t = X[(e + 1) % X.length];
+			Z.value = t, n.setAttribute("density", t), r("density-change", { density: t });
+		}, Q = (e) => {
+			let t = new Set(T.value), n = !t.has(e);
+			n ? t.add(e) : t.delete(e), T.value = t, r("row-expand", {
+				expanded: n,
 				key: e
 			});
-		}, Q = {
-			activeCell: g({
+		}, $ = {
+			activeCell: v({
 				col: 0,
 				row: 0
 			}),
 			focusCell: () => {}
 		};
-		u(() => {
-			let e = t.shadowRoot, n = e.querySelector(".dg-table");
-			if (!n) return;
-			let { cleanup: r, handle: i } = ee(n, e);
-			return Q = i, r;
-		}), t.focusCell = (e) => Q.focusCell(e);
-		let le = () => {
-			let t = e.views.value ?? [], r = e.activeView.value;
-			return l`
+		p(() => {
+			let e = n.shadowRoot, t = e.querySelector(".dg-table");
+			if (!t) return;
+			let { cleanup: r, handle: i } = ee(t, e);
+			return $ = i, r;
+		}), n.focusCell = (e) => $.focusCell(e);
+		let de = () => {
+			let t = e.views.value ?? [], n = e.activeView.value;
+			return d`
         <div
           class="dg-tabs"
           role="tablist"
-          aria-label="${() => a.value.views}"
+          aria-label="${() => o.value.views}"
           aria-controls="dg-tabpanel"
           @keydown="${(e) => {
 				if (![
@@ -329,18 +332,18 @@ c(S, {
 					n.focus(), n.click();
 				}
 			}}">
-          ${t.map((e) => l`
+          ${t.map((e) => d`
               <ore-button
-                class="${() => `dg-tab${r === e.id ? " dg-tab--active" : ""}`}"
+                class="${() => `dg-tab${n === e.id ? " dg-tab--active" : ""}`}"
                 role="tab"
                 variant="ghost"
                 rounded="full"
                 size="sm"
-                tabindex="${() => r === e.id ? "0" : "-1"}"
-                aria-selected="${() => String(r === e.id)}"
+                tabindex="${() => n === e.id ? "0" : "-1"}"
+                aria-selected="${() => String(n === e.id)}"
                 aria-controls="dg-tabpanel"
                 @click="${() => {
-				n("view-change", {
+				r("view-change", {
 					id: e.id,
 					label: e.label
 				});
@@ -350,28 +353,28 @@ c(S, {
             `)}
         </div>
       `;
-		}, $ = () => l`
-      <ore-popover class="dg-action-popover" placement="bottom-end" label="${() => a.value.sort}" style="--popover-min-width:18rem;--popover-overflow:visible">
+		}, fe = () => d`
+      <ore-popover class="dg-action-popover" placement="bottom-end" label="${() => o.value.sort}" style="--popover-min-width:18rem;--popover-overflow:visible">
         <ore-button
           class="dg-icon-btn dg-state-trigger"
           variant="ghost"
           size="sm"
           icon-only
-          ?data-customized="${() => P.sortState.value.direction !== "none"}"
-          label="${() => a.value.sort}">
+          ?data-customized="${() => I.sortState.value.direction !== "none"}"
+          label="${() => o.value.sort}">
           <ore-icon name="arrow-up-down" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
         <div slot="content" class="dg-pop-sort">
           <div class="dg-pop-header">
-            <span class="dg-pop-title">${() => a.value.sortBy}</span>
-            ${() => P.sortState.value.direction === "none" ? l`` : l`
+            <span class="dg-pop-title">${() => o.value.sortBy}</span>
+            ${() => I.sortState.value.direction === "none" ? d`` : d`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
-                      label="${() => a.value.clearSort}"
-                      @click="${() => P.sortTo("", "none")}">
+                      label="${() => o.value.clearSort}"
+                      @click="${() => I.sortTo("", "none")}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
                   `}
@@ -383,17 +386,17 @@ c(S, {
               variant="flat"
               size="sm"
               rounded="lg"
-              label="${() => a.value.property}"
-              placeholder="${() => a.value.property}"
+              label="${() => o.value.property}"
+              placeholder="${() => o.value.property}"
               fullwidth
-              value="${() => P.sortState.value.key}"
-              options="${() => D.value.map((e) => ({
+              value="${() => I.sortState.value.key}"
+              options="${() => A.value.map((e) => ({
 			label: e.label,
 			value: e.key
 		}))}"
               @change="${(e) => {
-			let t = x(e)[0] ?? "", n = P.sortState.value.direction === "none" ? "asc" : P.sortState.value.direction;
-			P.sortTo(t, n);
+			let t = w(e)[0] ?? "", n = I.sortState.value.direction === "none" ? "asc" : I.sortState.value.direction;
+			I.sortTo(t, n);
 		}}"></ore-select>
             <ore-select
               class="dg-pop-dir-select"
@@ -401,69 +404,69 @@ c(S, {
               variant="flat"
               size="sm"
               rounded="lg"
-              label="${() => a.value.sort}"
+              label="${() => o.value.sort}"
               fullwidth
-              disabled="${() => !P.sortState.value.key || void 0}"
-              value="${() => P.sortState.value.direction === "none" ? "asc" : P.sortState.value.direction}"
-              options="${F}"
+              disabled="${() => !I.sortState.value.key || void 0}"
+              value="${() => I.sortState.value.direction === "none" ? "asc" : I.sortState.value.direction}"
+              options="${re}"
               @change="${(e) => {
-			P.sortState.value.key && P.sortTo(P.sortState.value.key, x(e)[0] ?? "asc");
+			I.sortState.value.key && I.sortTo(I.sortState.value.key, w(e)[0] ?? "asc");
 		}}"></ore-select>
           </div>
         </div>
       </ore-popover>
-    `, ue = () => l`
+    `, pe = () => d`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
-        label="${() => a.value.filter}"
+        label="${() => o.value.filter}"
         style="--popover-min-width:18rem;--popover-max-height:min(90vh,48rem)">
         <ore-button
           class="dg-icon-btn dg-state-trigger"
           variant="ghost"
           size="sm"
           icon-only
-          ?data-customized="${() => P.filterDefs.value.length > 0}"
-          label="${() => P.filterDefs.value.length ? `${a.value.filter}: ${a.value.activeFilters(P.filterDefs.value.length)}` : a.value.filter}">
+          ?data-customized="${() => I.filterDefs.value.length > 0}"
+          label="${() => I.filterDefs.value.length ? `${o.value.filter}: ${o.value.activeFilters(I.filterDefs.value.length)}` : o.value.filter}">
           <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
-            <span class="dg-pop-title">${() => a.value.filterBy}</span>
-            ${() => P.filterDefs.value.length ? l`
+            <span class="dg-pop-title">${() => o.value.filterBy}</span>
+            ${() => I.filterDefs.value.length ? d`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
-                      label="${() => a.value.clearAllFilters}"
-                      @click="${() => P.clearAllFilters()}">
+                      label="${() => o.value.clearAllFilters}"
+                      @click="${() => I.clearAllFilters()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  ` : l``}
+                  ` : d``}
           </div>
 
           <!-- Always-visible field picker: select columns to add filter rules -->
           <div class="dg-pop-filter-fields">
             <ore-combobox
               hide-label
-              label="${() => a.value.addFilter}"
-              placeholder="${() => a.value.addFilter}"
+              label="${() => o.value.addFilter}"
+              placeholder="${() => o.value.addFilter}"
               multiple
               fullwidth
               autoclose
               size="sm"
               variant="flat"
-              options="${O}"
-              value="${() => P.filterDefs.value.map((e) => e.key)}"
+              options="${ne}"
+              value="${() => I.filterDefs.value.map((e) => e.key)}"
               @change="${(e) => {
-			P.setActiveFilterKeys(x(e));
+			I.setActiveFilterKeys(w(e));
 		}}"></ore-combobox>
           </div>
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
-          <div class="dg-pop-filter-rules" ?hidden="${() => !P.filterDefs.value.length}">
-            ${() => P.filterDefs.value.map((e) => l`
+          <div class="dg-pop-filter-rules" ?hidden="${() => !I.filterDefs.value.length}">
+            ${() => I.filterDefs.value.map((e) => d`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
@@ -472,21 +475,21 @@ c(S, {
                         hide-label
                         variant="ghost"
                         size="sm"
-                        label="${() => a.value.filterOperator(e.label)}"
+                        label="${() => o.value.filterOperator(e.label)}"
                         fullwidth
-                        value="${() => P.filterValues.value.get(e.key)?.operator ?? "contains"}"
+                        value="${() => I.filterValues.value.get(e.key)?.operator ?? "contains"}"
                         options="${() => e.operators ?? []}"
                         @change="${(t) => {
-			let n = x(t)[0];
-			n && P.setFilterOperator(e.key, n);
+			let n = w(t)[0];
+			n && I.setFilterOperator(e.key, n);
 		}}"></ore-select>
                       <ore-button
                         class="dg-icon-btn"
                         variant="ghost"
                         size="sm"
                         icon-only
-                        label="${() => a.value.removeFilter}"
-                        @click="${() => P.removeFilter(e.key)}">
+                        label="${() => o.value.removeFilter}"
+                        @click="${() => I.removeFilter(e.key)}">
                         <ore-icon name="trash-2" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                       </ore-button>
                     </div>
@@ -498,70 +501,70 @@ c(S, {
                       label="${() => e.label}"
                       placeholder="${() => e.label}"
                       options="${() => e.options}"
-                      value="${() => [...P.filterValues.value.get(e.key)?.values ?? []]}"
-                      disabled="${() => c.value || void 0}"
+                      value="${() => [...I.filterValues.value.get(e.key)?.values ?? []]}"
+                      disabled="${() => l.value || void 0}"
                       multiple
                       fullwidth
                       autoclose
                       @change="${(t) => {
-			P.setFilter(e.key, x(t));
+			I.setFilter(e.key, w(t));
 		}}"></ore-combobox>
                   </div>
                 `)}
           </div>
         </div>
       </ore-popover>
-    `, de = () => l`
+    `, me = () => d`
       <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
-        label="${() => a.value.columnOptions}"
+        label="${() => o.value.columnOptions}"
         style="--popover-min-width:18rem">
         <ore-button
           class="dg-icon-btn dg-state-trigger dg-column-trigger"
           variant="ghost"
           size="sm"
           icon-only
-          ?data-customized="${() => P.hiddenColumns.value.size > 0}"
-          label="${() => P.hiddenColumns.value.size ? `${a.value.columnOptions}: ${a.value.hiddenColumns(P.hiddenColumns.value.size)}` : a.value.columnOptions}">
+          ?data-customized="${() => I.hiddenColumns.value.size > 0}"
+          label="${() => I.hiddenColumns.value.size ? `${o.value.columnOptions}: ${o.value.hiddenColumns(I.hiddenColumns.value.size)}` : o.value.columnOptions}">
           <ore-icon name="columns-2" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
         <div slot="content" class="dg-pop-col">
           <div class="dg-pop-header">
-            <span class="dg-pop-heading"><strong class="dg-pop-title">${() => a.value.columnVisibility}</strong><small>${() => a.value.visibleColumns(P.visibleColumns.value.length, D.value.length)}</small></span>
-            ${() => P.hiddenColumns.value.size ? l`
+            <span class="dg-pop-heading"><strong class="dg-pop-title">${() => o.value.columnVisibility}</strong><small>${() => o.value.visibleColumns(I.visibleColumns.value.length, A.value.length)}</small></span>
+            ${() => I.hiddenColumns.value.size ? d`
                     <ore-button
                       class="dg-icon-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
-                      label="${() => a.value.resetColumns}"
-                      @click="${() => P.resetColumnVisibility()}">
+                      label="${() => o.value.resetColumns}"
+                      @click="${() => I.resetColumnVisibility()}">
                       <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-button>
-                  ` : l``}
+                  ` : d``}
           </div>
-          <div class="dg-pop-col-list" role="group" aria-label="${() => a.value.columnVisibility}">
-            ${() => D.value.map((e) => l`
+          <div class="dg-pop-col-list" role="group" aria-label="${() => o.value.columnVisibility}">
+            ${() => A.value.map((e) => d`
                   <ore-checkbox
                     class="dg-pop-col-item"
-                    checked="${() => !P.hiddenColumns.value.has(e.key)}"
-                    disabled="${() => !P.hiddenColumns.value.has(e.key) && P.visibleColumns.value.length === 1 || void 0}"
-                    @change="${() => P.toggleColumnVisibility(e.key)}">${e.label}</ore-checkbox>
+                    checked="${() => !I.hiddenColumns.value.has(e.key)}"
+                    disabled="${() => !I.hiddenColumns.value.has(e.key) && I.visibleColumns.value.length === 1 || void 0}"
+                    @change="${() => I.toggleColumnVisibility(e.key)}">${e.label}</ore-checkbox>
                 `)}
           </div>
         </div>
       </ore-popover>
     `;
-		return l`
+		return d`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
-        ${() => le()}
+        ${() => de()}
 
         <!-- Right: Action bar -->
         <div class="dg-actions">
-          ${() => $()} ${() => ue()} ${() => de()}
+          ${() => fe()} ${() => pe()} ${() => me()}
 
           <!-- Density toggle -->
           <ore-button
@@ -569,60 +572,56 @@ c(S, {
             variant="ghost"
             size="sm"
             icon-only
-            label="${() => se.value[X.value]}"
-            @click="${ce}">
+            label="${() => le.value[Z.value]}"
+            @click="${ue}">
             <ore-icon
-              name="${() => oe[X.value]}"
+              name="${() => ce[Z.value]}"
               size="15"
               stroke-width="1.75"
               aria-hidden="true"></ore-icon>
           </ore-button>
 
-          <span class="dg-action-divider" aria-hidden="true" ?hidden="${() => !r.has("actions").value}"></span>
+          <span class="dg-action-divider" aria-hidden="true" ?hidden="${() => !i.has("actions").value}"></span>
 
           <slot name="actions"></slot>
 
           <!-- Search toggle: rightmost, expands in-place -->
-          <div class="${() => `dg-search${P.searchActive.value ? " dg-search--open" : ""}`}">
-            ${() => P.searchActive.value ? l`
+          <div class="${() => `dg-search${I.searchActive.value ? " dg-search--open" : ""}`}">
+            ${() => I.searchActive.value ? d`
                     <ore-input
                       class="dg-search-input"
                       type="search"
                       variant="flat"
                       size="sm"
                       rounded="full"
-                      aria-label="${() => a.value.search}"
-                      placeholder="${() => e.searchPlaceholder.value ?? `${a.value.search}…`}"
-                      disabled="${() => c.value || void 0}"
+                      aria-label="${() => o.value.search}"
+                      placeholder="${() => e.searchPlaceholder.value ?? `${o.value.search}…`}"
+                      disabled="${() => l.value || void 0}"
                       ref="${(e) => {
 			e && requestAnimationFrame(() => e.focus());
 		}}"
                       @input="${(e) => {
-			I(e.currentTarget.value);
+			B(e.currentTarget.value);
 		}}"
                       @keydown="${(t) => {
-			if (t.key === "Escape") {
-				let t = e.source.value;
-				t?.setQuery && t.setQuery({ search: "" }), P.toggleSearch();
-			}
+			t.key === "Escape" && (e.source.value?.setParams && z(""), I.toggleSearch());
 		}}">
                       <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                     </ore-input>
-                  ` : l``}
+                  ` : d``}
             <ore-button
               variant="ghost"
               size="sm"
               icon-only
               label="${() => {
-			let [t, n] = e.searchLabel.value ?? [a.value.search, a.value.closeSearch];
-			return P.searchActive.value ? n : t;
+			let [t, n] = e.searchLabel.value ?? [o.value.search, o.value.closeSearch];
+			return I.searchActive.value ? n : t;
 		}}"
               @click="${() => {
-			let t = e.source.value;
-			t?.setQuery && P.searchActive.value && t.setQuery({ search: "" }), P.toggleSearch();
+			e.source.value?.setParams && I.searchActive.value && z(""), I.toggleSearch();
 		}}">
               <ore-icon
-                name="${() => P.searchActive.value ? "x" : "search"}"
+                name="${() => I.searchActive.value ? "x" : "search"}"
                 size="15"
                 stroke-width="1.75"
                 aria-hidden="true"></ore-icon>
@@ -631,7 +630,7 @@ c(S, {
         </div>
       </div>
 
-      <div id="dg-tabpanel" class="dg-scroll" role="tabpanel" aria-label="${() => a.value.data}">
+      <div id="dg-tabpanel" class="dg-scroll" role="tabpanel" aria-label="${() => o.value.data}">
         <div class="dg-loading-overlay">
           <ore-icon name="loader-2" size="24" class="dg-spin" aria-hidden="true"></ore-icon>
         </div>
@@ -640,181 +639,181 @@ c(S, {
           part="table"
           role="grid"
           aria-label="${() => e.label.value ?? void 0}"
-          aria-busy="${() => K.value ? "true" : null}"
-          aria-disabled="${() => c.value ? "true" : null}">
+          aria-busy="${() => ie.value ? "true" : null}"
+          aria-disabled="${() => l.value ? "true" : null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${() => d.value === "multi" ? l`
+              ${() => m.value === "multi" ? d`
                       <th
                         class="dg-th dg-th-check"
                         role="columnheader"
                         scope="col"
-                        tabindex="${() => Q.activeCell.value.row === 0 && Q.activeCell.value.col === 0 && w.value >= 1 ? "0" : "-1"}">
+                        tabindex="${() => $.activeCell.value.row === 0 && $.activeCell.value.col === 0 && D.value >= 1 ? "0" : "-1"}">
                         <ore-checkbox
                           class="dg-check"
-                          checked="${() => P.isAllSelected()}"
-                          indeterminate="${H}"
-                          ?disabled="${c}"
-                          aria-label="${() => a.value.selectAllRows}"
+                          checked="${() => I.isAllSelected()}"
+                          indeterminate="${K}"
+                          ?disabled="${l}"
+                          aria-label="${() => o.value.selectAllRows}"
                           @change="${() => {
-			c.value || P.selectAll();
+			l.value || I.selectAll();
 		}}"></ore-checkbox>
                       </th>
-                    ` : l``}
-              ${() => z.value.map((e, t) => {
-			let n = t === z.value.length - 1;
-			return l`
+                    ` : d``}
+              ${() => U.value.map((e, t) => {
+			let n = t === U.value.length - 1;
+			return d`
                     <th
-                      class="${`dg-th${n && C.value ? " dg-th-last" : ""}`}"
+                      class="${`dg-th${n && E.value ? " dg-th-last" : ""}`}"
                       role="columnheader"
                       scope="col"
                       tabindex="${() => {
-				let e = Q.activeCell.value;
-				return e.row === 0 && e.col === t + w.value ? "0" : "-1";
+				let e = $.activeCell.value;
+				return e.row === 0 && e.col === t + D.value ? "0" : "-1";
 			}}"
                       data-align="${e.align ?? "left"}"
-                      aria-sort="${() => e.sortable ? b(P.sortState.value, e.key) : void 0}"
+                      aria-sort="${() => e.sortable ? C(I.sortState.value, e.key) : void 0}"
                       aria-label="${e.sortable ? void 0 : e.headerLabel ?? e.label}"
                       style="${() => {
-				let t = L.value[e.key];
+				let t = V.value[e.key];
 				return t ? `width:${t}px` : e.width ? `width:${e.width}` : "";
 			}}">
                       <div class="dg-th-inner">
-                        ${() => e.sortable ? l`
+                        ${() => e.sortable ? d`
                                 <ore-button
                                   class="dg-sort-btn"
                                   variant="text"
                                   size="sm"
                                   fullwidth
                                   label="${e.headerLabel ?? e.label}"
-                                  disabled="${() => c.value || void 0}"
+                                  disabled="${() => l.value || void 0}"
                                   @click="${() => {
-				c.value || P.sortBy(e.key);
+				l.value || I.sortBy(e.key);
 			}}">
                                   ${e.label}
                                   <ore-icon
                                     slot="suffix"
                                     class="dg-sort-icon"
-                                    name="${() => y(P.sortState.value, e.key)}"
+                                    name="${() => S(I.sortState.value, e.key)}"
                                     size="14"
                                     stroke-width="2"></ore-icon>
                                 </ore-button>
                               ` : e.label}
-                        ${e.resizable ? l`
+                        ${e.resizable ? d`
                                 <span
                                   class="dg-col-resize"
                                   aria-hidden="true"
                                   ref="${(t) => {
 				if (!t) return;
 				let n = t.closest("th");
-				n && t.addEventListener("pointerdown", R(e.key, n));
+				n && t.addEventListener("pointerdown", H(e.key, n));
 			}}"></span>
-                              ` : l``}
+                              ` : d``}
                       </div>
                     </th>
                   `;
 		})}
-              ${() => C.value ? l`
+              ${() => E.value ? d`
                       <th
                         class="dg-th dg-th-expand"
                         role="columnheader"
                         scope="col"
-                        aria-label="${() => a.value.rowDetails}"
+                        aria-label="${() => o.value.rowDetails}"
                         tabindex="-1"></th>
-                    ` : l``}
+                    ` : d``}
             </tr>
           </thead>
 
           <!-- Body -->
           <tbody class="dg-body" part="tbody">
-            ${() => P.currentPageItems.value.length === 0 ? l`
+            ${() => I.currentPageItems.value.length === 0 ? d`
                     <tr role="row">
-                      <td class="dg-empty" role="gridcell" colspan="${() => String(U.value)}">
+                      <td class="dg-empty" role="gridcell" colspan="${() => String(q.value)}">
                         <div class="dg-empty-content">
                           ${() => e.emptyText.value ?? "No data"}
-                          ${() => P.searchQuery.value || P.filterValues.value.size ? l`
+                          ${() => I.searchQuery.value || I.filterValues.value.size ? d`
                                   <div class="dg-empty-actions">
                                     <ore-button
                                       variant="text"
                                       size="sm"
                                       @click="${() => {
-			P.resetSearch(), P.resetFilters();
+			I.resetSearch(), I.resetFilters();
 		}}">
-                                      ${() => a.value.clearFiltersAndSearch}
+                                      ${() => o.value.clearFiltersAndSearch}
                                     </ore-button>
                                   </div>
-                                ` : l``}
+                                ` : d``}
                         </div>
                       </td>
                     </tr>
-                  ` : P.currentPageItems.value.map((e, t) => {
-			let n = k(e), r = d.value !== "none" && !c.value, i = t + 1;
-			return l`
+                  ` : I.currentPageItems.value.map((e, t) => {
+			let n = j(e), r = m.value !== "none" && !l.value, i = t + 1;
+			return d`
                       <tr
                         class="dg-tr"
                         part="row"
                         role="row"
-                        aria-selected="${() => d.value === "none" ? null : String(P.selectedKeys.value.has(n))}"
-                        aria-expanded="${() => C.value ? String(S.value.has(n)) : null}"
+                        aria-selected="${() => m.value === "none" ? null : String(I.selectedKeys.value.has(n))}"
+                        aria-expanded="${() => E.value ? String(T.value.has(n)) : null}"
                         ?data-selectable="${r}"
-                        ?data-disabled="${c}"
+                        ?data-disabled="${l}"
                         @click="${() => {
-				r && d.value === "single" && P.toggleRow(n);
+				r && m.value === "single" && I.toggleRow(n);
 			}}"
                         @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && r && d.value === "single" && (e.preventDefault(), P.toggleRow(n));
+				(e.key === "Enter" || e.key === " ") && r && m.value === "single" && (e.preventDefault(), I.toggleRow(n));
 			}}">
-                        ${() => d.value === "multi" ? l`
+                        ${() => m.value === "multi" ? d`
                                 <td
                                   class="dg-td dg-td-check"
                                   role="gridcell"
                                   tabindex="${() => {
-				let e = Q.activeCell.value;
+				let e = $.activeCell.value;
 				return e.row === i && e.col === 0 ? "0" : "-1";
 			}}"
                                   @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c.value || P.toggleRow(n));
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.value || I.toggleRow(n));
 			}}">
                                   <ore-checkbox
                                     class="dg-check"
-                                    checked="${() => P.selectedKeys.value.has(n)}"
-                                    ?disabled="${c}"
-                                    aria-label="${() => a.value.selectRow}"
+                                    checked="${() => I.selectedKeys.value.has(n)}"
+                                    ?disabled="${l}"
+                                    aria-label="${() => o.value.selectRow}"
                                     tabindex="-1"
                                     @click="${(e) => e.stopPropagation()}"
                                     @change="${() => {
-				c.value || P.toggleRow(n);
+				l.value || I.toggleRow(n);
 			}}"></ore-checkbox>
                                 </td>
-                              ` : l``}
-                        ${z.value.map((t, n) => {
-				let r = e, a = B(t, r), o = t.renderCell?.(r) ?? a, s = n === z.value.length - 1;
-				return l`
+                              ` : d``}
+                        ${U.value.map((t, n) => {
+				let r = e, a = W(t, r), o = t.renderCell?.(r) ?? a, s = n === U.value.length - 1;
+				return d`
                             <td
-                              class="${`dg-td${s && C.value ? " dg-td-last" : ""}`}"
+                              class="${`dg-td${s && E.value ? " dg-td-last" : ""}`}"
                               part="cell"
                               role="gridcell"
                               data-align="${t.align ?? "left"}"
                               tabindex="${() => {
-					let e = Q.activeCell.value;
-					return e.row === i && e.col === n + w.value ? "0" : "-1";
+					let e = $.activeCell.value;
+					return e.row === i && e.col === n + D.value ? "0" : "-1";
 				}}"
                               title="${a}">
                               ${o}
                             </td>
                           `;
 			})}
-                        ${() => C.value ? l`
+                        ${() => E.value ? d`
                                 <td
                                   class="dg-td dg-td-expand"
                                   role="gridcell"
                                   tabindex="${() => {
-				let e = Q.activeCell.value;
-				return e.row === i && e.col === U.value - 1 ? "0" : "-1";
+				let e = $.activeCell.value;
+				return e.row === i && e.col === q.value - 1 ? "0" : "-1";
 			}}"
                                   @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c.value || Z(n));
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.value || Q(n));
 			}}">
                                   <ore-button
                                     class="dg-expand-btn"
@@ -822,31 +821,31 @@ c(S, {
                                     size="sm"
                                     icon-only
                                     tabindex="-1"
-                                    label="${() => S.value.has(n) ? a.value.collapseRow : a.value.expandRow}"
-                                    aria-expanded="${() => String(S.value.has(n))}"
-                                    disabled="${() => c.value || void 0}"
+                                    label="${() => T.value.has(n) ? o.value.collapseRow : o.value.expandRow}"
+                                    aria-expanded="${() => String(T.value.has(n))}"
+                                    disabled="${() => l.value || void 0}"
                                     @click="${(e) => {
-				e.stopPropagation(), c.value || Z(n);
+				e.stopPropagation(), l.value || Q(n);
 			}}">
                                     <ore-icon
-                                      name="${() => S.value.has(n) ? "chevron-up" : "chevron-down"}"
+                                      name="${() => T.value.has(n) ? "chevron-up" : "chevron-down"}"
                                       size="14"
                                       stroke-width="2"
                                       aria-hidden="true"></ore-icon>
                                   </ore-button>
                                 </td>
-                              ` : l``}
+                              ` : d``}
                       </tr>
-                      ${() => C.value && S.value.has(n) ? l`
+                      ${() => E.value && T.value.has(n) ? d`
                               <tr class="dg-tr-expanded" role="row">
                                 <td
                                   class="dg-td-expanded"
                                   role="gridcell"
-                                  colspan="${() => String(U.value)}">
-                                  ${f(() => D.value.find((e) => typeof e.renderExpanded == "function")?.renderExpanded?.(e) ?? "")}
+                                  colspan="${() => String(q.value)}">
+                                  ${h(() => A.value.find((e) => typeof e.renderExpanded == "function")?.renderExpanded?.(e) ?? "")}
                                 </td>
                               </tr>
-                            ` : l``}
+                            ` : d``}
                     `;
 		})}
           </tbody>
@@ -854,47 +853,47 @@ c(S, {
       </div>
 
       <!-- Footer / Pagination -->
-      ${() => W.value ? l`
-              <div class="dg-footer" part="footer" role="navigation" aria-label="${() => a.value.pagination}">
+      ${() => J.value ? d`
+              <div class="dg-footer" part="footer" role="navigation" aria-label="${() => o.value.pagination}">
                 <div class="dg-footer-start">
                   <span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true">
-                    ${G}
+                    ${Y}
                   </span>
                   ${() => {
 			let t = e.pageSizeOptions.value ?? [];
-			return t.length ? l`
+			return t.length ? d`
                           <div class="dg-page-size-wrap">
                             <ore-select
                               class="dg-page-size-select"
                               fullwidth
                               hide-label
-                              label="${() => a.value.rowsPerPage}"
-                              value="${() => String(T.value)}"
+                              label="${() => o.value.rowsPerPage}"
+                              value="${() => String(O.value)}"
                               options="${() => t.map((e) => ({
 				label: String(e),
 				value: String(e)
 			}))}"
-                              disabled="${() => c.value || void 0}"
+                              disabled="${() => l.value || void 0}"
                               @change="${(e) => {
-				let t = parseInt(x(e)[0] ?? "", 10);
-				Number.isNaN(t) || (T.value = t, P.goToPage(0), n("page-change", {
+				let t = parseInt(w(e)[0] ?? "", 10);
+				Number.isNaN(t) || (O.value = t, I.goToPage(0), r("page-change", {
 					pageIndex: 0,
 					pageSize: t
 				}));
 			}}"></ore-select>
                           </div>
-                        ` : l``;
+                        ` : d``;
 		}}
                 </div>
-                <div class="dg-pagination" role="group" aria-label="${() => a.value.pageNavigation}">
+                <div class="dg-pagination" role="group" aria-label="${() => o.value.pageNavigation}">
                     <ore-button
                       class="dg-page-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
-                      label="${() => a.value.previousPage}"
-                      disabled="${() => !q.value || c.value}"
-                      @click="${() => V("prev")}">
+                      label="${() => o.value.previousPage}"
+                      disabled="${() => !ae.value || l.value}"
+                      @click="${() => G("prev")}">
                       <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
                     <span
@@ -904,27 +903,27 @@ c(S, {
                       role="status"
                       aria-live="polite"
                       aria-atomic="true">
-                      ${() => ae.value}
+                      ${() => se.value}
                     </span>
                     <ore-button
                       class="dg-page-btn"
                       variant="ghost"
                       size="sm"
                       icon-only
-                      label="${() => a.value.nextPage}"
-                      disabled="${() => !J.value || c.value}"
-                      @click="${() => V("next")}">
+                      label="${() => o.value.nextPage}"
+                      disabled="${() => !oe.value || l.value}"
+                      @click="${() => G("next")}">
                       <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                     </ore-button>
                 </div>
               </div>
-            ` : l``}
+            ` : d``}
     `;
 	},
 	shadow: { delegatesFocus: !0 },
-	styles: [e("datagrid"), r]
+	styles: [e("datagrid"), i]
 });
 //#endregion
-export { a as COLUMN_TAG, S as DATAGRID_TAG, b as ariaSortValue, y as sortIconName };
+export { o as COLUMN_TAG, T as DATAGRID_TAG, C as ariaSortValue, S as sortIconName };
 
 //# sourceMappingURL=datagrid.js.map