@vielzeug/refine 1.8.0 → 2.0.0

package/dist/datagrid.js

@@ -1,194 +1,196 @@
+import "./_dev.js";
 import { tableBaseMixin as e } from "./styles/mixins/table-base.css.js";
-import { warn as t } from "./_dev.js";
-import { disablableBundle as n, loadableBundle as r } from "./shared/prop-bundles.js";
-import { lifecycleSignal as i } from "./headless/ore.js";
-import { createDataGridControl as a } from "./headless/datagrid.js";
-import { COLUMN_OBSERVED_ATTRS as o, COLUMN_TAG as s, parseColumnChildren as c } from "./inputs/datagrid/datagrid-column.js";
-import { createDataGridControls as ee } from "./inputs/datagrid/datagrid-controls.js";
-import { createGridNav as l } from "./inputs/datagrid/datagrid-nav.js";
-import u from "./inputs/datagrid/datagrid.css.js";
-import { define as d, getHost as f, html as p, onCleanup as m, onMounted as h, prop as g, useEmit as te, useSlots as ne } from "@vielzeug/ore";
-import { computed as _, signal as v, watch as y } from "@vielzeug/ripple";
-import { debounce as b } from "@vielzeug/arsenal";
-import { raw as re } from "@vielzeug/ore/directives";
+import { disablableBundle as t, loadableBundle as n } from "./shared/prop-bundles.js";
+import { COLUMN_OBSERVED_ATTRS as r, COLUMN_TAG as i, parseColumnChildren as a } from "./inputs/datagrid/datagrid-column.js";
+import { createDataGridModel as o } from "./inputs/datagrid/datagrid-model.js";
+import { createGridNav as s } from "./inputs/datagrid/datagrid-nav.js";
+import c from "./inputs/datagrid/datagrid.css.js";
+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 ee } from "@vielzeug/ore";
+import { computed as _, signal as v } from "@vielzeug/ripple";
+import { watch as y } from "@vielzeug/ripple/watch";
+import { debounce as te } from "@vielzeug/arsenal/function";
 //#region src/inputs/datagrid/datagrid.ts
-function x(e, t) {
+function b(e, t) {
 	return e.key !== t || e.direction === "none" ? "chevrons-up-down" : e.direction === "asc" ? "chevron-up" : "chevron-down";
 }
-function S(e, t) {
+function x(e, t) {
 	return e.key !== t || e.direction === "none" ? "none" : e.direction === "asc" ? "ascending" : "descending";
 }
-var C = "ore-datagrid";
-d(C, {
+var S = "ore-datagrid";
+l(S, {
 	props: {
-		activeView: g.string(),
-		density: g.string(),
+		activeView: m.string(),
+		density: m.string(),
+		...t,
 		...n,
-		...r,
-		columns: g.data(),
-		emptyText: g.string("No data"),
-		expandable: g.bool(!1),
-		filterOptions: g.data(),
-		fullwidth: g.bool(!1),
-		getRowKey: g.data(),
-		label: g.string(),
-		pageSize: g.number(10),
-		pageSizeOptions: g.data(),
-		rows: g.data(),
-		searchLabel: g.data(),
-		searchPlaceholder: g.string("Search…"),
-		selectedKeys: g.data(),
-		selectionMode: g.string("none"),
-		sortMode: g.string("client"),
-		source: g.data(),
-		striped: g.bool(!1),
-		views: g.data()
+		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(),
+		pageSize: m.number(10),
+		pageSizeOptions: m.data(),
+		rows: m.data(),
+		searchLabel: m.data(),
+		searchPlaceholder: m.string("Search…"),
+		selectedKeys: m.data(),
+		selectionMode: m.string("none"),
+		sortMode: m.string("client"),
+		source: m.data(),
+		striped: m.bool(!1),
+		views: m.data()
 	},
 	setup(e) {
-		let n = f(), r = te(), s = ne(), u = _(() => e.disabled.value === !0), d = _(() => e.selectionMode.value ?? "none"), g = v(/* @__PURE__ */ new Set()), C = _(() => e.expandable.value === !0 && D.value.some((e) => typeof e.renderExpanded == "function")), w = _(() => +(d.value === "multi")), T = v(e.pageSize.value ?? 10);
+		let t = u(), n = g(), i = ee(), c = _(() => e.disabled.value === !0), l = _(() => e.selectionMode.value ?? "none"), m = v(/* @__PURE__ */ new Set()), S = _(() => e.expandable.value === !0 && E.value.some((e) => typeof e.renderExpanded == "function")), C = _(() => +(l.value === "multi")), w = v(e.pageSize.value ?? 10);
 		y(e.pageSize, (e) => {
-			e != null && (T.value = e);
+			e != null && (w.value = e);
 		});
-		let E = v([]);
-		h(() => {
-			E.value = c(n);
+		let T = v([]);
+		p(() => {
+			T.value = a(t);
 			let e = new MutationObserver(() => {
-				E.value = c(n);
+				T.value = a(t);
 			});
-			return e.observe(n, {
-				attributeFilter: o,
+			return e.observe(t, {
+				attributeFilter: r,
 				attributes: !0,
 				childList: !0,
 				subtree: !0
 			}), () => e.disconnect();
 		});
-		let D = _(() => {
+		let E = _(() => {
 			let t = e.columns.value;
-			return t === void 0 ? E.value : t;
-		}), O = (n) => {
-			let r = e.getRowKey.value;
-			if (r) return r(n);
-			let i = n.id;
-			return i == null ? (t("ore-datagrid: row missing `id` — keys will collide. Provide `getRowKey` or add a unique `id` field."), `__missing_${Math.random().toString(36).slice(2)}`) : String(i);
-		}, k = ee({
-			columns: D,
-			filterOptions: e.filterOptions,
-			rows: _(() => e.rows.value ?? [])
-		}), A = b((t) => {
-			let n = t, r = e.source.value;
-			r?.search ? r.search(n) : k.setSearchQuery(n);
-		}, 250), j = _(() => e.source.value != null), M = v([]), N = v({
+			return t === void 0 ? T.value : t;
+		}), D = (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);
+		}, O = _(() => e.source.value != null), k = v([]), A = v({
 			error: null,
 			isLoading: !1,
 			pageCount: 1,
 			pageNumber: 1,
-			pageSize: T.value,
+			pageSize: w.value,
 			totalItems: 0
-		}), P = null;
-		m(() => {
-			P?.(), P = null;
+		}), j = null;
+		f(() => {
+			j?.(), j = null;
 		}), y(e.source, (e) => {
-			if (P?.(), P = null, !e) {
-				M.value = [], N.value = {
+			if (j?.(), j = null, !e) {
+				k.value = [], A.value = {
 					error: null,
 					isLoading: !1,
 					pageCount: 1,
 					pageNumber: 1,
-					pageSize: T.value,
+					pageSize: w.value,
 					totalItems: 0
 				};
 				return;
 			}
-			let t = () => {
-				M.value = e.current, N.value = e.meta;
+			let t = (t = e.snapshot) => {
+				k.value = t.data, A.value = {
+					error: t.error,
+					isLoading: t.isFetching,
+					pageCount: t.pagination.count,
+					pageNumber: t.pagination.index,
+					pageSize: t.pagination.size,
+					totalItems: t.pagination.total
+				};
 			};
-			t(), P = e.subscribe(t);
+			t(), j = e.subscribe(t);
 		}, { immediate: !0 });
-		let F = a({
-			columns: () => D.value,
-			getRowKey: O,
-			items: _(() => j.value ? M.value : k.filteredRows.value),
+		let M = o({
+			clientSide: _(() => !O.value),
+			columns: E,
+			filterOptions: e.filterOptions,
+			getRowKey: D,
+			items: _(() => O.value ? k.value : e.rows.value ?? []),
 			onSelectionChange: (e) => {
-				r("selection-change", {
+				n("selection-change", {
 					keys: [...e],
-					rows: F.selectedRows.value
+					rows: M.selectedRows.value
 				});
 			},
 			onSortChange: (e) => {
-				r("sort-change", e);
+				n("sort-change", e);
 			},
-			pageSize: () => j.value ? 0 : T.value,
-			selectionMode: () => d.value,
-			signal: i(m)
-		});
+			pageSize: _(() => O.value ? 0 : w.value),
+			selectionMode: l,
+			sortMode: _(() => e.sortMode.value ?? "client")
+		}), N = te((t) => {
+			let n = e.source.value;
+			n?.setQuery ? n.setQuery({ search: t }) : M.setSearchQuery(t);
+		}, 250);
 		y(e.selectedKeys, (e) => {
-			Array.isArray(e) && F.setSelection(new Set(e));
+			Array.isArray(e) && M.setSelection(new Set(e));
 		}, { immediate: !0 });
-		let I = v({}), L = (e, t) => (n) => {
+		let P = v({}), F = (e, t) => (n) => {
 			n.preventDefault();
 			let r = n.clientX, i = t.getBoundingClientRect().width, a = new AbortController(), { signal: o } = a;
 			window.addEventListener("pointermove", (t) => {
-				I.value = {
-					...I.value,
+				P.value = {
+					...P.value,
 					[e]: Math.max(40, i + t.clientX - r)
 				};
 			}, { signal: o }), window.addEventListener("pointerup", () => a.abort(), { signal: o });
-		}, R = _(() => D.value.filter((e) => !k.hiddenColumns.value.has(e.key))), z = (e, t) => {
+		}, I = M.visibleColumns, ne = (e, t) => {
 			if (e.cell) return e.cell(t);
 			let n = t[e.key];
 			return n == null ? "" : String(n);
 		};
-		y(k.filteredRows, () => F.goToPage(0), { immediate: !1 });
-		function B(t) {
-			let n = e.source.value;
-			if (n) {
-				t === "prev" ? n.prev?.() : n.next?.();
+		function L(t) {
+			let r = e.source.value;
+			if (r) {
+				t === "prev" ? r.page?.previous() : r.page?.next();
 				return;
 			}
-			t === "prev" ? F.prevPage() : F.nextPage(), r("page-change", {
-				pageIndex: F.pageIndex.value,
-				pageSize: T.value
+			t === "prev" ? M.prevPage() : M.nextPage(), n("page-change", {
+				pageIndex: M.pageIndex.value,
+				pageSize: w.value
 			});
 		}
-		let V = _(() => {
-			let e = F.currentPageItems.value;
-			return !e.length || F.isAllSelected() ? !1 : e.some((e) => F.selectedKeys.value.has(O(e)));
-		}), H = _(() => R.value.length + +(d.value === "multi") + +!!C.value), U = _(() => j.value ? N.value.pageCount > 1 : T.value > 0), W = _(() => {
-			if (j.value) {
-				let { pageNumber: e, pageSize: t, totalItems: n } = N.value, r = Math.max(1, t);
-				if (!U.value) return `${n} row${n === 1 ? "" : "s"}`;
+		let R = _(() => {
+			let e = M.currentPageItems.value;
+			return !e.length || M.isAllSelected() ? !1 : e.some((e) => M.selectedKeys.value.has(D(e)));
+		}), z = _(() => I.value.length + +(l.value === "multi") + +!!S.value), B = _(() => O.value ? A.value.pageCount > 1 : w.value > 0), V = _(() => {
+			if (O.value) {
+				let { pageNumber: e, pageSize: t, totalItems: n } = A.value, r = Math.max(1, t);
+				if (!B.value) return `${n} row${n === 1 ? "" : "s"}`;
 				if (n === 0) return "0 to 0 of 0";
 				let i = (e - 1) * r + 1;
 				return `${i} to ${Math.min(i + r - 1, n)} of ${n}`;
 			}
-			let e = F.totalItems.value;
-			if (!U.value) return `${e} row${e === 1 ? "" : "s"}`;
+			let e = M.totalItems.value;
+			if (!B.value) return `${e} row${e === 1 ? "" : "s"}`;
 			if (e === 0) return "0 to 0 of 0";
-			let t = F.pageIndex.value * T.value + 1;
-			return `${t} to ${Math.min(t + T.value - 1, e)} of ${e}`;
-		}), G = _(() => e.loading.value === !0 || j.value && N.value.isLoading), K = _(() => j.value ? N.value.pageNumber > 1 : F.hasPrevPage.value), q = _(() => j.value ? N.value.pageNumber < N.value.pageCount : F.hasNextPage.value), J = _(() => j.value ? N.value.totalItems === 0 ? "0 / 0" : `${N.value.pageNumber} / ${N.value.pageCount}` : `${F.pageIndex.value + 1} / ${F.pageCount.value}`), Y = [
+			let t = M.pageIndex.value * w.value + 1;
+			return `${t} to ${Math.min(t + w.value - 1, e)} of ${e}`;
+		}), H = _(() => e.loading.value === !0 || O.value && A.value.isLoading), U = _(() => O.value ? A.value.pageNumber > 1 : M.hasPrevPage.value), W = _(() => O.value ? A.value.pageNumber < A.value.pageCount : M.hasNextPage.value), G = _(() => O.value ? A.value.totalItems === 0 ? "0 / 0" : `${A.value.pageNumber} / ${A.value.pageCount}` : `${M.pageIndex.value + 1} / ${M.pageCount.value}`), K = [
 			"compact",
 			"cozy",
 			"comfortable"
-		], ie = {
+		], q = {
 			comfortable: "rows-2",
 			compact: "rows-4",
 			cozy: "rows-3"
-		}, ae = {
+		}, J = {
 			comfortable: "Density: Comfortable",
 			compact: "Density: Compact",
 			cozy: "Density: Cozy"
-		}, X = v(e.density.value ?? "cozy");
+		}, Y = v(e.density.value ?? "cozy");
 		y(e.density, (e) => {
-			e && (X.value = e);
+			e && (Y.value = e);
 		});
-		let oe = () => {
-			let e = Y.indexOf(X.value), t = Y[(e + 1) % Y.length];
-			X.value = t, n.setAttribute("density", t), r("density-change", { density: t });
+		let X = () => {
+			let e = K.indexOf(Y.value), r = K[(e + 1) % K.length];
+			Y.value = r, t.setAttribute("density", r), n("density-change", { density: r });
 		}, Z = v(!1), Q = (e) => {
-			let t = new Set(g.value), n = !t.has(e);
-			n ? t.add(e) : t.delete(e), g.value = t, r("row-expand", {
-				expanded: n,
+			let t = new Set(m.value), r = !t.has(e);
+			r ? t.add(e) : t.delete(e), m.value = t, n("row-expand", {
+				expanded: r,
 				key: e
 			});
 		}, $ = {
@@ -198,20 +200,21 @@ d(C, {
 			}),
 			focusCell: () => {}
 		};
-		h(() => {
-			let e = n.shadowRoot, t = e.querySelector(".dg-table");
-			if (!t) return;
-			let { cleanup: r, handle: i } = l(t, e);
+		p(() => {
+			let e = t.shadowRoot, n = e.querySelector(".dg-table");
+			if (!n) return;
+			let { cleanup: r, handle: i } = s(n, e);
 			return $ = i, r;
-		}), n.focusCell = (e) => $.focusCell(e);
-		let se = () => {
-			let t = e.views.value ?? [], n = e.activeView.value;
-			return p`<div
-        class="dg-tabs"
-        role="tablist"
-        aria-label="Views"
-        aria-controls="dg-tabpanel"
-        @keydown="${(e) => {
+		}), t.focusCell = (e) => $.focusCell(e);
+		let re = () => {
+			let t = e.views.value ?? [], r = e.activeView.value;
+			return d`
+        <div
+          class="dg-tabs"
+          role="tablist"
+          aria-label="Views"
+          aria-controls="dg-tabpanel"
+          @keydown="${(e) => {
 				if (![
 					"ArrowLeft",
 					"ArrowRight",
@@ -225,25 +228,29 @@ d(C, {
 					n.focus(), n.click();
 				}
 			}}">
-        ${t.map((e) => p`<ore-button
-              class="${() => `dg-tab${n === e.id ? " dg-tab--active" : ""}`}"
-              role="tab"
-              variant="ghost"
-              rounded="full"
-              size="sm"
-              :tabindex="${() => n === e.id ? "0" : "-1"}"
-              :aria-selected="${() => String(n === e.id)}"
-              aria-controls="dg-tabpanel"
-              @click="${() => {
-				r("view-change", {
+          ${t.map((e) => d`
+              <ore-button
+                class="${() => `dg-tab${r === 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)}"
+                aria-controls="dg-tabpanel"
+                @click="${() => {
+				n("view-change", {
 					id: e.id,
 					label: e.label
 				});
 			}}">
-              ${e.label}
-            </ore-button>`)}
-      </div>`;
-		}, ce = () => p`<ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
+                ${e.label}
+              </ore-button>
+            `)}
+        </div>
+      `;
+		}, ie = () => d`
+      <ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
         <ore-button variant="ghost" size="sm" icon-only label="Sort">
           <ore-icon name="arrow-up-down" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
@@ -256,8 +263,8 @@ d(C, {
               size="sm"
               icon-only
               label="Clear sort"
-              :disabled="${() => F.sortState.value.direction === "none" || void 0}"
-              @click="${() => F.sortTo("", "none")}">
+              disabled="${() => M.sortState.value.direction === "none" || void 0}"
+              @click="${() => M.sortTo("", "none")}">
               <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
             </ore-button>
           </div>
@@ -269,14 +276,14 @@ d(C, {
               rounded="lg"
               placeholder="Property"
               fullwidth
-              :value="${() => F.sortState.value.key}"
-              :options="${() => D.value.map((e) => ({
+              value="${() => M.sortState.value.key}"
+              options="${() => E.value.map((e) => ({
 			label: e.label,
 			value: e.key
 		}))}"
               @change="${(e) => {
-			let t = e.detail.values[0] ?? "", n = F.sortState.value.direction === "none" ? "asc" : F.sortState.value.direction;
-			F.sortTo(t, n);
+			let t = e.detail.values[0] ?? "", n = M.sortState.value.direction === "none" ? "asc" : M.sortState.value.direction;
+			M.sortTo(t, n);
 		}}"></ore-select>
             <ore-select
               class="dg-pop-dir-select"
@@ -284,9 +291,9 @@ d(C, {
               size="sm"
               rounded="lg"
               fullwidth
-              :disabled="${() => !F.sortState.value.key || void 0}"
-              :value="${() => F.sortState.value.direction === "none" ? "asc" : F.sortState.value.direction}"
-              :options="${() => [{
+              disabled="${() => !M.sortState.value.key || void 0}"
+              value="${() => M.sortState.value.direction === "none" ? "asc" : M.sortState.value.direction}"
+              options="${() => [{
 			label: "A → Z",
 			value: "asc"
 		}, {
@@ -294,45 +301,53 @@ d(C, {
 			value: "desc"
 		}]}"
               @change="${(e) => {
-			F.sortState.value.key && F.sortTo(F.sortState.value.key, e.detail.values[0] ?? "asc");
+			M.sortState.value.key && M.sortTo(M.sortState.value.key, e.detail.values[0] ?? "asc");
 		}}"></ore-select>
           </div>
         </div>
-      </ore-popover>`, le = () => p`<ore-popover
+      </ore-popover>
+    `, ae = () => d`
+      <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Filter"
         style="--popover-min-width:16rem;--popover-max-height:min(90vh,48rem)">
-        ${() => k.filterDefs.value.length ? p`<ore-badge
-                anchor="top-end"
-                color="primary"
-                size="xs"
-                :count="${() => Z.value ? k.filterDefs.value.length : void 0}"
-                :dot="${() => !Z.value || void 0}"
-                :label="${() => `${k.filterDefs.value.length} active filter${k.filterDefs.value.length > 1 ? "s" : ""}`}"
-                aria-hidden="true"
-                @mouseenter="${() => Z.value = !0}"
-                @mouseleave="${() => Z.value = !1}"
-                @focusin="${() => Z.value = !0}"
-                @focusout="${() => Z.value = !1}">
-                <ore-button slot="target" variant="ghost" size="sm" icon-only label="Filter">
+        ${() => M.filterDefs.value.length ? d`
+                <ore-badge
+                  anchor="top-end"
+                  color="primary"
+                  size="xs"
+                  count="${() => Z.value ? M.filterDefs.value.length : void 0}"
+                  dot="${() => !Z.value || void 0}"
+                  label="${() => `${M.filterDefs.value.length} active filter${M.filterDefs.value.length > 1 ? "s" : ""}`}"
+                  aria-hidden="true"
+                  @mouseenter="${() => Z.value = !0}"
+                  @mouseleave="${() => Z.value = !1}"
+                  @focusin="${() => Z.value = !0}"
+                  @focusout="${() => Z.value = !1}">
+                  <ore-button slot="target" variant="ghost" size="sm" icon-only label="Filter">
+                    <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                  </ore-button>
+                </ore-badge>
+              ` : d`
+                <ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
                   <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
                 </ore-button>
-              </ore-badge>` : p`<ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="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">Filter by</span>
-            ${() => k.filterDefs.value.length ? p`<ore-button
-                    class="dg-icon-btn"
-                    variant="ghost"
-                    size="sm"
-                    icon-only
-                    label="Clear all filters"
-                    @click="${() => k.clearAllFilters()}">
-                    <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-button>` : p``}
+            ${() => M.filterDefs.value.length ? d`
+                    <ore-button
+                      class="dg-icon-btn"
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      label="Clear all filters"
+                      @click="${() => M.clearAllFilters()}">
+                      <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                    </ore-button>
+                  ` : d``}
           </div>
 
           <!-- Always-visible field picker: select columns to add filter rules -->
@@ -342,20 +357,19 @@ d(C, {
               multiple
               fullwidth
               autoclose
-              :options="${() => D.value.map((e) => ({
+              options="${() => E.value.map((e) => ({
 			label: e.label,
 			value: e.key
 		}))}"
-              :value="${() => k.filterDefs.value.map((e) => e.key)}"
+              value="${() => M.filterDefs.value.map((e) => e.key)}"
               @change="${(e) => {
-			k.setActiveFilterKeys(e.detail.values);
-		}}">
-            </ore-combobox>
+			M.setActiveFilterKeys(e.detail.values);
+		}}"></ore-combobox>
           </div>
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
-          <div class="dg-pop-filter-rules" ?hidden="${() => !k.filterDefs.value.length}">
-            ${() => k.filterDefs.value.map((e) => p`
+          <div class="dg-pop-filter-rules" ?hidden="${() => !M.filterDefs.value.length}">
+            ${() => M.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>
@@ -364,10 +378,10 @@ d(C, {
                         variant="ghost"
                         size="sm"
                         fullwidth
-                        :value="${() => k.filterValues.value.get(e.key)?.operator ?? "contains"}"
-                        :options="${() => e.operators ?? []}"
+                        value="${() => M.filterValues.value.get(e.key)?.operator ?? "contains"}"
+                        options="${() => e.operators ?? []}"
                         @change="${(t) => {
-			k.setFilterOperator(e.key, t.detail.values[0]);
+			M.setFilterOperator(e.key, t.detail.values[0]);
 		}}"></ore-select>
                       <ore-button
                         class="dg-icon-btn"
@@ -375,27 +389,29 @@ d(C, {
                         size="sm"
                         icon-only
                         label="Remove filter"
-                        @click="${() => k.removeFilter(e.key)}">
+                        @click="${() => M.removeFilter(e.key)}">
                         <ore-icon name="trash-2" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                       </ore-button>
                     </div>
                     <ore-combobox
                       class="dg-filter"
-                      :placeholder="${() => e.label}"
-                      :options="${() => e.options}"
-                      :value="${() => [...k.filterValues.value.get(e.key)?.values ?? []]}"
-                      :disabled="${() => u.value || void 0}"
+                      placeholder="${() => e.label}"
+                      options="${() => e.options}"
+                      value="${() => [...M.filterValues.value.get(e.key)?.values ?? []]}"
+                      disabled="${() => c.value || void 0}"
                       multiple
                       fullwidth
                       autoclose
                       @change="${(t) => {
-			k.setFilter(e.key, t.detail.values);
+			M.setFilter(e.key, t.detail.values);
 		}}"></ore-combobox>
                   </div>
                 `)}
           </div>
         </div>
-      </ore-popover>`, ue = () => p`<ore-popover
+      </ore-popover>
+    `, oe = () => d`
+      <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Column options"
@@ -404,32 +420,35 @@ d(C, {
           <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-list" role="menu" aria-label="Column visibility">
-          ${() => D.value.map((e) => p`<ore-button
+          ${() => E.value.map((e) => d`
+                <ore-button
                   class="dg-pop-col-item"
                   role="menuitemcheckbox"
                   variant="ghost"
                   size="sm"
-                  :aria-checked="${() => String(!k.hiddenColumns.value.has(e.key))}"
-                  @click="${() => k.toggleColumnVisibility(e.key)}">
+                  aria-checked="${() => String(!M.hiddenColumns.value.has(e.key))}"
+                  @click="${() => M.toggleColumnVisibility(e.key)}">
                   <ore-icon
                     slot="prefix"
-                    :name="${() => k.hiddenColumns.value.has(e.key) ? "eye-off" : "eye"}"
+                    name="${() => M.hiddenColumns.value.has(e.key) ? "eye-off" : "eye"}"
                     size="13"
                     stroke-width="2"
                     aria-hidden="true"></ore-icon>
                   ${e.label}
-                </ore-button>`)}
+                </ore-button>
+              `)}
         </div>
-      </ore-popover>`;
-		return p`
+      </ore-popover>
+    `;
+		return d`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
-        ${() => se()}
+        ${() => re()}
 
         <!-- Right: Action bar -->
         <div class="dg-actions">
-          ${() => ce()} ${() => le()} ${() => ue()}
+          ${() => ie()} ${() => ae()} ${() => oe()}
 
           <!-- Density toggle -->
           <ore-button
@@ -437,57 +456,59 @@ d(C, {
             variant="ghost"
             size="sm"
             icon-only
-            :label="${() => ae[X.value]}"
-            @click="${oe}">
+            label="${() => J[Y.value]}"
+            @click="${X}">
             <ore-icon
-              :name="${() => ie[X.value]}"
+              name="${() => q[Y.value]}"
               size="15"
               stroke-width="1.75"
               aria-hidden="true"></ore-icon>
           </ore-button>
 
-          <span class="dg-action-divider" aria-hidden="true" ?hidden="${() => !s.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${k.searchActive.value ? " dg-search--open" : ""}`}">
-            ${() => k.searchActive.value ? p`<ore-input
-                    class="dg-search-input"
-                    type="search"
-                    variant="flat"
-                    size="sm"
-                    rounded="full"
-                    :placeholder="${() => e.searchPlaceholder.value ?? "Search…"}"
-                    :disabled="${() => u.value || void 0}"
-                    ref="${(e) => {
+          <div class="${() => `dg-search${M.searchActive.value ? " dg-search--open" : ""}`}">
+            ${() => M.searchActive.value ? d`
+                    <ore-input
+                      class="dg-search-input"
+                      type="search"
+                      variant="flat"
+                      size="sm"
+                      rounded="full"
+                      placeholder="${() => e.searchPlaceholder.value ?? "Search…"}"
+                      disabled="${() => c.value || void 0}"
+                      ref="${(e) => {
 			e && requestAnimationFrame(() => e.focus());
 		}}"
-                    @input="${(e) => {
-			A(e.detail.value);
+                      @input="${(e) => {
+			N(e.detail.value);
 		}}"
-                    @keydown="${(t) => {
+                      @keydown="${(t) => {
 			if (t.key === "Escape") {
 				let t = e.source.value;
-				t?.search && t.search(""), k.toggleSearch();
+				t?.setQuery && t.setQuery({ search: "" }), M.toggleSearch();
 			}
 		}}">
-                    <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-input>` : p``}
+                      <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                    </ore-input>
+                  ` : d``}
             <ore-button
               variant="ghost"
               size="sm"
               icon-only
-              :label="${() => {
+              label="${() => {
 			let [t, n] = e.searchLabel.value ?? ["Search", "Close search"];
-			return k.searchActive.value ? n : t;
+			return M.searchActive.value ? n : t;
 		}}"
               @click="${() => {
 			let t = e.source.value;
-			t?.search && k.searchActive.value && t.search(""), k.toggleSearch();
+			t?.setQuery && M.searchActive.value && t.setQuery({ search: "" }), M.toggleSearch();
 		}}">
               <ore-icon
-                :name="${() => k.searchActive.value ? "x" : "search"}"
+                name="${() => M.searchActive.value ? "x" : "search"}"
                 size="15"
                 stroke-width="1.75"
                 aria-hidden="true"></ore-icon>
@@ -504,260 +525,293 @@ d(C, {
           class="dg-table"
           part="table"
           role="grid"
-          :aria-label="${() => e.label.value ?? void 0}"
-          :aria-busy="${() => G.value ? "true" : null}"
-          :aria-disabled="${() => u.value ? "true" : null}">
+          aria-label="${() => e.label.value ?? void 0}"
+          aria-busy="${() => H.value ? "true" : null}"
+          aria-disabled="${() => c.value ? "true" : null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${() => d.value === "multi" ? p`<th
-                      class="dg-th dg-th-check"
-                      role="columnheader"
-                      scope="col"
-                      :tabindex="${() => $.activeCell.value.row === 0 && $.activeCell.value.col === 0 && w.value >= 1 ? "0" : "-1"}">
-                      <ore-checkbox
-                        class="dg-check"
-                        :checked="${() => F.isAllSelected()}"
-                        :indeterminate="${V}"
-                        ?disabled="${u}"
-                        aria-label="Select all rows on this page"
-                        @change="${() => {
-			u.value || F.selectAll();
+              ${() => l.value === "multi" ? d`
+                      <th
+                        class="dg-th dg-th-check"
+                        role="columnheader"
+                        scope="col"
+                        tabindex="${() => $.activeCell.value.row === 0 && $.activeCell.value.col === 0 && C.value >= 1 ? "0" : "-1"}">
+                        <ore-checkbox
+                          class="dg-check"
+                          checked="${() => M.isAllSelected()}"
+                          indeterminate="${R}"
+                          ?disabled="${c}"
+                          aria-label="Select all rows on this page"
+                          @change="${() => {
+			c.value || M.selectAll();
 		}}"></ore-checkbox>
-                    </th>` : p``}
-              ${() => R.value.map((e, t) => p`<th
-                    class="${`dg-th${t === R.value.length - 1 && C.value ? " dg-th-last" : ""}`}"
-                    role="columnheader"
-                    scope="col"
-                    :tabindex="${() => {
-			let e = $.activeCell.value;
-			return e.row === 0 && e.col === t + w.value ? "0" : "-1";
-		}}"
-                    data-align="${e.align ?? "left"}"
-                    :aria-sort="${() => e.sortable ? S(F.sortState.value, e.key) : void 0}"
-                    :aria-label="${e.sortable ? void 0 : e.headerLabel ?? e.label}"
-                    :style="${() => {
-			let t = I.value[e.key];
-			return t ? `width:${t}px` : e.width ? `width:${e.width}` : "";
-		}}">
-                    <div class="dg-th-inner">
-                      ${() => e.sortable ? p`<ore-button
-                              class="dg-sort-btn"
-                              variant="text"
-                              size="sm"
-                              fullwidth
-                              :label="${e.headerLabel ?? e.label}"
-                              :disabled="${() => u.value || void 0}"
-                              @click="${() => {
-			u.value || F.sortBy(e.key);
-		}}">
-                              ${e.label}
-                              <ore-icon
-                                slot="suffix"
-                                class="dg-sort-icon"
-                                :name="${() => x(F.sortState.value, e.key)}"
-                                size="14"
-                                stroke-width="2"></ore-icon>
-                            </ore-button>` : e.label}
-                      ${e.resizable ? p`<span
-                              class="dg-col-resize"
-                              aria-hidden="true"
-                              ref="${(t) => {
-			if (!t) return;
-			let n = t.closest("th");
-			n && t.addEventListener("pointerdown", L(e.key, n));
-		}}"></span>` : p``}
-                    </div>
-                  </th>`)}
-              ${() => C.value ? p`<th
-                      class="dg-th dg-th-expand"
+                      </th>
+                    ` : d``}
+              ${() => I.value.map((e, t) => {
+			let n = t === I.value.length - 1;
+			return d`
+                    <th
+                      class="${`dg-th${n && S.value ? " dg-th-last" : ""}`}"
                       role="columnheader"
                       scope="col"
-                      aria-label="Row details"
-                      tabindex="-1"></th>` : p``}
-            </tr>
-          </thead>
-
-          <!-- Body -->
-          <tbody class="dg-body" part="tbody">
-            ${() => F.currentPageItems.value.length === 0 ? p`<tr role="row">
-                    <td class="dg-empty" role="gridcell" :colspan="${() => String(H.value)}">
-                      <div class="dg-empty-content">
-                        ${() => e.emptyText.value ?? "No data"}
-                        ${() => k.searchQuery.value || k.filterValues.value.size ? p`<div class="dg-empty-actions">
+                      tabindex="${() => {
+				let e = $.activeCell.value;
+				return e.row === 0 && e.col === t + C.value ? "0" : "-1";
+			}}"
+                      data-align="${e.align ?? "left"}"
+                      aria-sort="${() => e.sortable ? x(M.sortState.value, e.key) : void 0}"
+                      aria-label="${e.sortable ? void 0 : e.headerLabel ?? e.label}"
+                      style="${() => {
+				let t = P.value[e.key];
+				return t ? `width:${t}px` : e.width ? `width:${e.width}` : "";
+			}}">
+                      <div class="dg-th-inner">
+                        ${() => e.sortable ? d`
                                 <ore-button
+                                  class="dg-sort-btn"
                                   variant="text"
                                   size="sm"
+                                  fullwidth
+                                  label="${e.headerLabel ?? e.label}"
+                                  disabled="${() => c.value || void 0}"
                                   @click="${() => {
-			k.resetSearch(), k.resetFilters();
-		}}">
-                                  Clear all filters & search
+				c.value || M.sortBy(e.key);
+			}}">
+                                  ${e.label}
+                                  <ore-icon
+                                    slot="suffix"
+                                    class="dg-sort-icon"
+                                    name="${() => b(M.sortState.value, e.key)}"
+                                    size="14"
+                                    stroke-width="2"></ore-icon>
                                 </ore-button>
-                              </div>` : p``}
+                              ` : e.label}
+                        ${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", F(e.key, n));
+			}}"></span>
+                              ` : d``}
                       </div>
-                    </td>
-                  </tr>` : F.currentPageItems.value.map((e, t) => {
-			let n = O(e), r = d.value !== "none" && !u.value, i = t + 1;
-			return p`<tr
+                    </th>
+                  `;
+		})}
+              ${() => S.value ? d`
+                      <th
+                        class="dg-th dg-th-expand"
+                        role="columnheader"
+                        scope="col"
+                        aria-label="Row details"
+                        tabindex="-1"></th>
+                    ` : d``}
+            </tr>
+          </thead>
+
+          <!-- Body -->
+          <tbody class="dg-body" part="tbody">
+            ${() => M.currentPageItems.value.length === 0 ? d`
+                    <tr role="row">
+                      <td class="dg-empty" role="gridcell" colspan="${() => String(z.value)}">
+                        <div class="dg-empty-content">
+                          ${() => e.emptyText.value ?? "No data"}
+                          ${() => M.searchQuery.value || M.filterValues.value.size ? d`
+                                  <div class="dg-empty-actions">
+                                    <ore-button
+                                      variant="text"
+                                      size="sm"
+                                      @click="${() => {
+			M.resetSearch(), M.resetFilters();
+		}}">
+                                      Clear all filters & search
+                                    </ore-button>
+                                  </div>
+                                ` : d``}
+                        </div>
+                      </td>
+                    </tr>
+                  ` : M.currentPageItems.value.map((e, t) => {
+			let n = D(e), r = l.value !== "none" && !c.value, i = t + 1;
+			return d`
+                      <tr
                         class="dg-tr"
                         part="row"
                         role="row"
-                        :aria-selected="${() => d.value === "none" ? null : String(F.selectedKeys.value.has(n))}"
-                        :aria-expanded="${() => C.value ? String(g.value.has(n)) : null}"
+                        aria-selected="${() => l.value === "none" ? null : String(M.selectedKeys.value.has(n))}"
+                        aria-expanded="${() => S.value ? String(m.value.has(n)) : null}"
                         ?data-selectable="${r}"
-                        ?data-disabled="${u}"
+                        ?data-disabled="${c}"
                         @click="${() => {
-				r && d.value === "single" && F.toggleRow(n);
+				r && l.value === "single" && M.toggleRow(n);
 			}}"
                         @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && r && d.value === "single" && (e.preventDefault(), F.toggleRow(n));
+				(e.key === "Enter" || e.key === " ") && r && l.value === "single" && (e.preventDefault(), M.toggleRow(n));
 			}}">
-                        ${() => d.value === "multi" ? p`<td
-                                class="dg-td dg-td-check"
-                                role="gridcell"
-                                :tabindex="${() => {
+                        ${() => l.value === "multi" ? d`
+                                <td
+                                  class="dg-td dg-td-check"
+                                  role="gridcell"
+                                  tabindex="${() => {
 				let e = $.activeCell.value;
 				return e.row === i && e.col === 0 ? "0" : "-1";
 			}}"
-                                @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u.value || F.toggleRow(n));
+                                  @keydown="${(e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c.value || M.toggleRow(n));
 			}}">
-                                <ore-checkbox
-                                  class="dg-check"
-                                  :checked="${() => F.selectedKeys.value.has(n)}"
-                                  ?disabled="${u}"
-                                  aria-label="Select row"
-                                  tabindex="-1"
-                                  @click="${(e) => e.stopPropagation()}"
-                                  @change="${() => {
-				u.value || F.toggleRow(n);
+                                  <ore-checkbox
+                                    class="dg-check"
+                                    checked="${() => M.selectedKeys.value.has(n)}"
+                                    ?disabled="${c}"
+                                    aria-label="Select row"
+                                    tabindex="-1"
+                                    @click="${(e) => e.stopPropagation()}"
+                                    @change="${() => {
+				c.value || M.toggleRow(n);
 			}}"></ore-checkbox>
-                              </td>` : p``}
-                        ${R.value.map((t, n) => {
-				let r = z(t, e);
-				return p`<td
-                            class="${`dg-td${n === R.value.length - 1 && C.value ? " dg-td-last" : ""}`}"
-                            part="cell"
-                            role="gridcell"
-                            data-align="${t.align ?? "left"}"
-                            :tabindex="${() => {
+                                </td>
+                              ` : d``}
+                        ${I.value.map((t, n) => {
+				let r = ne(t, e), a = n === I.value.length - 1;
+				return d`
+                            <td
+                              class="${`dg-td${a && S.value ? " dg-td-last" : ""}`}"
+                              part="cell"
+                              role="gridcell"
+                              data-align="${t.align ?? "left"}"
+                              tabindex="${() => {
 					let e = $.activeCell.value;
-					return e.row === i && e.col === n + w.value ? "0" : "-1";
+					return e.row === i && e.col === n + C.value ? "0" : "-1";
 				}}"
-                            :title="${r}">
-                            ${r}
-                          </td>`;
+                              title="${r}">
+                              ${r}
+                            </td>
+                          `;
 			})}
-                        ${() => C.value ? p`<td
-                                class="dg-td dg-td-expand"
-                                role="gridcell"
-                                :tabindex="${() => {
+                        ${() => S.value ? d`
+                                <td
+                                  class="dg-td dg-td-expand"
+                                  role="gridcell"
+                                  tabindex="${() => {
 				let e = $.activeCell.value;
-				return e.row === i && e.col === H.value - 1 ? "0" : "-1";
+				return e.row === i && e.col === z.value - 1 ? "0" : "-1";
 			}}"
-                                @keydown="${(e) => {
-				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u.value || Q(n));
+                                  @keydown="${(e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c.value || Q(n));
 			}}">
-                                <ore-button
-                                  class="dg-expand-btn"
-                                  variant="ghost"
-                                  size="sm"
-                                  icon-only
-                                  tabindex="-1"
-                                  :label="${() => g.value.has(n) ? "Collapse row" : "Expand row"}"
-                                  :aria-expanded="${() => String(g.value.has(n))}"
-                                  :disabled="${() => u.value || void 0}"
-                                  @click="${(e) => {
-				e.stopPropagation(), u.value || Q(n);
+                                  <ore-button
+                                    class="dg-expand-btn"
+                                    variant="ghost"
+                                    size="sm"
+                                    icon-only
+                                    tabindex="-1"
+                                    label="${() => m.value.has(n) ? "Collapse row" : "Expand row"}"
+                                    aria-expanded="${() => String(m.value.has(n))}"
+                                    disabled="${() => c.value || void 0}"
+                                    @click="${(e) => {
+				e.stopPropagation(), c.value || Q(n);
 			}}">
-                                  <ore-icon
-                                    :name="${() => g.value.has(n) ? "chevron-up" : "chevron-down"}"
-                                    size="14"
-                                    stroke-width="2"
-                                    aria-hidden="true"></ore-icon>
-                                </ore-button>
-                              </td>` : p``}
+                                    <ore-icon
+                                      name="${() => m.value.has(n) ? "chevron-up" : "chevron-down"}"
+                                      size="14"
+                                      stroke-width="2"
+                                      aria-hidden="true"></ore-icon>
+                                  </ore-button>
+                                </td>
+                              ` : d``}
                       </tr>
-                      ${() => C.value && g.value.has(n) ? p`<tr class="dg-tr-expanded" role="row">
-                              <td
-                                class="dg-td-expanded"
-                                role="gridcell"
-                                :colspan="${() => String(H.value)}">
-                                ${re(() => D.value.find((e) => typeof e.renderExpanded == "function")?.renderExpanded?.(e) ?? "")}
-                              </td>
-                            </tr>` : p``} `;
+                      ${() => S.value && m.value.has(n) ? d`
+                              <tr class="dg-tr-expanded" role="row">
+                                <td
+                                  class="dg-td-expanded"
+                                  role="gridcell"
+                                  colspan="${() => String(z.value)}">
+                                  ${h(() => E.value.find((e) => typeof e.renderExpanded == "function")?.renderExpanded?.(e) ?? "")}
+                                </td>
+                              </tr>
+                            ` : d``}
+                    `;
 		})}
           </tbody>
         </table>
       </div>
 
       <!-- Footer / Pagination -->
-      ${() => U.value ? p`<div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
-              ${() => (e.pageSizeOptions.value ?? []).length ? p`` : p`<span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true"
-                      >${W}</span
-                    >`}
-              <div class="dg-footer-end">
-                ${() => {
+      ${() => B.value ? d`
+              <div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
+                ${() => (e.pageSizeOptions.value ?? []).length ? d`` : d`
+                        <span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true">
+                          ${V}
+                        </span>
+                      `}
+                <div class="dg-footer-end">
+                  ${() => {
 			let t = e.pageSizeOptions.value ?? [];
-			return t.length ? p`<div class="dg-page-size-wrap">
-                        <ore-select
-                          class="dg-page-size-select"
-                          fullwidth
-                          aria-label="Rows per page"
-                          :value="${() => String(T.value)}"
-                          :options="${() => t.map((e) => ({
+			return t.length ? d`
+                          <div class="dg-page-size-wrap">
+                            <ore-select
+                              class="dg-page-size-select"
+                              fullwidth
+                              aria-label="Rows per page"
+                              value="${() => String(w.value)}"
+                              options="${() => t.map((e) => ({
 				label: String(e),
 				value: String(e)
 			}))}"
-                          :disabled="${() => u.value || void 0}"
-                          @change="${(e) => {
+                              disabled="${() => c.value || void 0}"
+                              @change="${(e) => {
 				let t = parseInt(e.detail.values[0], 10);
-				isNaN(t) || (T.value = t, F.goToPage(0), r("page-change", {
+				isNaN(t) || (w.value = t, M.goToPage(0), n("page-change", {
 					pageIndex: 0,
 					pageSize: t
 				}));
 			}}"></ore-select>
-                      </div>` : p``;
+                          </div>
+                        ` : d``;
 		}}
-                <div class="dg-pagination" role="group" aria-label="Page navigation">
-                  <ore-button
-                    class="dg-page-btn"
-                    variant="ghost"
-                    size="sm"
-                    icon-only
-                    label="Previous page"
-                    :disabled="${() => !K.value || u.value}"
-                    @click="${() => B("prev")}">
-                    <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-                  </ore-button>
-                  <span
-                    class="dg-page-label"
-                    dir="ltr"
-                    aria-current="page"
-                    role="status"
-                    aria-live="polite"
-                    aria-atomic="true">
-                    ${() => J.value}
-                  </span>
-                  <ore-button
-                    class="dg-page-btn"
-                    variant="ghost"
-                    size="sm"
-                    icon-only
-                    label="Next page"
-                    :disabled="${() => !q.value || u.value}"
-                    @click="${() => B("next")}">
-                    <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-                  </ore-button>
+                  <div class="dg-pagination" role="group" aria-label="Page navigation">
+                    <ore-button
+                      class="dg-page-btn"
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      label="Previous page"
+                      disabled="${() => !U.value || c.value}"
+                      @click="${() => L("prev")}">
+                      <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                    </ore-button>
+                    <span
+                      class="dg-page-label"
+                      dir="ltr"
+                      aria-current="page"
+                      role="status"
+                      aria-live="polite"
+                      aria-atomic="true">
+                      ${() => G.value}
+                    </span>
+                    <ore-button
+                      class="dg-page-btn"
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      label="Next page"
+                      disabled="${() => !W.value || c.value}"
+                      @click="${() => L("next")}">
+                      <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                    </ore-button>
+                  </div>
                 </div>
               </div>
-            </div>` : p``}
+            ` : d``}
     `;
 	},
 	shadow: { delegatesFocus: !0 },
-	styles: [e("datagrid"), u]
+	styles: [e("datagrid"), c]
 });
 //#endregion
-export { s as COLUMN_TAG, C as DATAGRID_TAG, S as ariaSortValue, x as sortIconName };
+export { i as COLUMN_TAG, S as DATAGRID_TAG, x as ariaSortValue, b as sortIconName };
 
 //# sourceMappingURL=datagrid.js.map