@c2n/table 0.0.7

package/dist/table.js

@@ -0,0 +1,1029 @@
+import { n as TableColumn, r as __decorate, t as COLUMN_CHANGE_EVENT } from "./table-column-Dsv4HKrd.js";
+import { getFieldValue, sortModelConverter } from "./table-types.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { arrayPropertyConverter, jsonPropertyConverter } from "@c2n/core/lit-helper.js";
+import { VirtualScrollController } from "@c2n/core/controllers/virtual-scroll.js";
+import { defaultCompare } from "@c2n/core/data-helper.js";
+import { provide } from "@lit/context";
+import { PAGER_CONNECT_EVENT, pagerContext } from "@c2n/core/contexts/pager.js";
+import "@c2n/checkbox";
+import "@c2n/spinner";
+//#region src/table.scss?inline
+var table_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n  max-height: var(--c2-table--max-height,none);\n  overflow: hidden;\n  background: var(--c2-table--background,#ffffff);\n  color: var(--c2-table--color,#18181b);\n  font-size: var(--c2-table--font-size,14px);\n  border-top: var(--c2-table--border-top,1px solid #e4e4e7);\n  border-right: var(--c2-table--border-right,1px solid #e4e4e7);\n  border-bottom: var(--c2-table--border-bottom,1px solid #e4e4e7);\n  border-left: var(--c2-table--border-left,1px solid #e4e4e7);\n  border-top-left-radius: var(--c2-table--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-table--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-table--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-table--border-bottom-right-radius,8px);\n  box-shadow: var(--c2-table--box-shadow,none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.definitions {\n  display: none;\n}\n\n.toolbar,\n.footer {\n  flex: 0 0 auto;\n}\n\n.toolbar {\n  background: var(--c2-table__toolbar--background,transparent);\n  padding: var(--c2-table__toolbar--padding,8px 12px);\n  border-bottom: var(--c2-table__toolbar--border-bottom,1px solid #e4e4e7);\n}\n\n.footer {\n  background: var(--c2-table__footer--background,transparent);\n  padding: var(--c2-table__footer--padding,8px 12px);\n  border-top: var(--c2-table__footer--border-top,1px solid #e4e4e7);\n}\n\n.viewport {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  overflow-anchor: none;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: var(--_grid-template, 1fr);\n  align-content: start;\n}\n\n.spacer {\n  grid-column: 1/-1;\n}\n\n.row {\n  display: grid;\n  grid-column: 1/-1;\n  grid-template-columns: subgrid;\n  height: var(--c2-table__row--height,36px);\n  border-bottom: var(--c2-table__row--border-bottom,1px solid #e4e4e7);\n  background: var(--c2-table--background,#ffffff);\n}\n\n.row--header {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n  height: var(--c2-table__header--height,36px);\n  background: var(--c2-table__header--background,#fafafa);\n  border-bottom: var(--c2-table__header--border-bottom,1px solid #e4e4e7);\n}\n\n:host([stripe]) .row--odd {\n  background: var(--c2-table__row__odd--background,#fafafa);\n}\n\n.row--clickable {\n  cursor: pointer;\n}\n\n.row:not(.row--header):not(.row--state):hover {\n  background: var(--c2-table__row__hover--background,#fafafa);\n}\n\n.row--selected,\n.row--selected:hover {\n  background: var(--c2-table__row__selected--background,#edf1fe);\n  color: var(--c2-table__row__selected--color,#18181b);\n}\n\n.cell {\n  display: flex;\n  align-items: center;\n  gap: var(--c2-table__cell--gap,8px);\n  padding: var(--c2-table__cell--padding,0 12px);\n  box-sizing: border-box;\n  min-width: 0;\n  overflow: hidden;\n  font-size: var(--c2-table__cell--font-size,14px);\n  color: var(--c2-table__cell--color,#18181b);\n  border-right: var(--c2-table__cell--border-right,none);\n}\n\n.cell:focus {\n  outline: none;\n}\n\n.cell:focus-visible {\n  outline: var(--c2-table__cell__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-table__cell__focus--outline-offset,-2px);\n}\n\n.cell-content {\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.cell--align-center {\n  justify-content: center;\n}\n\n.cell--align-end {\n  justify-content: flex-end;\n}\n\n.cell--pinned {\n  position: sticky;\n  z-index: 2;\n  background: inherit;\n}\n\n.cell--pinned-edge-start {\n  box-shadow: var(--c2-table__pinned-start--box-shadow,1px 0 0 0 #e4e4e7);\n}\n\n.cell--pinned-edge-end {\n  box-shadow: var(--c2-table__pinned-end--box-shadow,-1px 0 0 0 #e4e4e7);\n}\n\n.cell--selection {\n  justify-content: center;\n  padding: 0;\n}\n\n.cell--header {\n  position: relative;\n  gap: var(--c2-table__header-cell--gap,6px);\n  padding: var(--c2-table__header-cell--padding,0 12px);\n  color: var(--c2-table__header--color,#71717a);\n  font-size: var(--c2-table__header--font-size,12px);\n  font-weight: var(--c2-table__header--font-weight,600);\n  letter-spacing: var(--c2-table__header--letter-spacing,0.02em);\n  user-select: none;\n}\n\n.row--header .cell--pinned {\n  position: sticky;\n  z-index: 4;\n}\n\n.cell--sortable {\n  cursor: pointer;\n}\n\n.cell--sortable:hover {\n  background: var(--c2-table__header-cell__hover--background,#f4f4f5);\n}\n\n.cell--sorted {\n  color: var(--c2-table__header-cell__sorted--color,#18181b);\n}\n\n.sort-icon {\n  flex: 0 0 auto;\n  width: var(--c2-table__sort-icon--width,14px);\n  height: var(--c2-table__sort-icon--height,14px);\n  color: var(--c2-table__sort-icon--color,#a1a1aa);\n  opacity: 0;\n}\n\n.cell--sortable:hover .sort-icon {\n  opacity: 1;\n}\n\n.sort-icon--active {\n  color: var(--c2-table__sort-icon__active--color,rgb(2, 101, 220));\n  opacity: 1;\n}\n\n.sort-icon--desc {\n  transform: rotate(180deg);\n}\n\n.sort-order {\n  flex: 0 0 auto;\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--c2-table__sort-icon__active--color,rgb(2, 101, 220));\n}\n\n.resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  width: var(--c2-table__resizer--width,9px);\n  cursor: col-resize;\n  touch-action: none;\n}\n\n.resizer::after {\n  content: \"\";\n  width: var(--c2-table__resizer--line-width,1px);\n  height: var(--c2-table__resizer--height,56%);\n  background: var(--c2-table__resizer--color,#e4e4e7);\n  border-radius: 999px;\n  transition: height 120ms ease, width 120ms ease, background-color 120ms ease;\n}\n\n.resizer:hover::after,\n.resizer--active::after {\n  width: var(--c2-table__resizer__hover--line-width,2px);\n  height: var(--c2-table__resizer__hover--height,100%);\n  background: var(--c2-table__resizer__hover--color,rgb(2, 101, 220));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .resizer::after {\n    transition: none;\n  }\n}\n.skeleton {\n  display: block;\n  width: 64px;\n  height: 10px;\n  background: var(--c2-table__skeleton--background,#f4f4f5);\n  border-radius: var(--c2-table__skeleton--border-radius,4px);\n}\n\n.row--state {\n  height: auto;\n  border-bottom: none;\n  background: var(--c2-table--background,#ffffff);\n}\n\n.cell--state {\n  grid-column: 1/-1;\n  justify-content: center;\n  padding: var(--c2-table__state--padding,32px 12px);\n  color: var(--c2-table__state--color,#71717a);\n  font-size: var(--c2-table__state--font-size,14px);\n  white-space: normal;\n  overflow: visible;\n}\n\n.cell--state-error {\n  color: var(--c2-table__state__error--color,rgb(211, 21, 16));\n}";
+//#endregion
+//#region src/table.ts
+/** Field of the synthetic checkbox column, so it can live in the same render pipeline as the real columns. */
+var SELECTION_FIELD = "__c2-selection";
+var HEADER_ROW = -1;
+function numberFormatOptions(base, extra) {
+	return Object.assign({}, base, extra ?? {});
+}
+function dateFormatOptions(base, extra) {
+	return Object.assign({}, base, extra ?? {});
+}
+function humanize(field) {
+	const spaced = (field.split(".").pop() ?? field).replace(/[_-]+/g, " ").replace(/([a-z\d])([A-Z])/g, "$1 $2");
+	return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+var Table = class Table extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.rows = [];
+		this.rowKey = "";
+		this.selection = "none";
+		this.checkboxSelection = false;
+		this.value = [];
+		this.sortModel = [];
+		this.multiSort = false;
+		this.sortable = false;
+		this.resizable = false;
+		this.stripe = false;
+		this.virtual = "auto";
+		this.rowHeight = 36;
+		this.overscan = 6;
+		this.virtualThreshold = 100;
+		this.blockSize = 100;
+		this.loading = false;
+		this.error = "";
+		this.emptyMessage = "No rows";
+		this.page = 1;
+		this.pageSize = 0;
+		this.columnElements = [];
+		this.widthOverrides = {};
+		this.focusedCell = {
+			row: HEADER_ROW,
+			column: 0
+		};
+		this.hasToolbar = false;
+		this.hasFooter = false;
+		this.remoteTotal = -1;
+		this.#sortedRows = [];
+		this.#blocks = /* @__PURE__ */ new Map();
+		this.#pendingBlocks = /* @__PURE__ */ new Set();
+		this.#measuredWidths = /* @__PURE__ */ new Map();
+		this.#measuredRowHeight = 0;
+		this.#selectionAnchor = -1;
+		this.#pendingFocus = false;
+		this.#requestToken = 0;
+		this.#pagers = /* @__PURE__ */ new WeakSet();
+		this.#pendingScrollTop = false;
+		this.pager = void 0;
+		this.#virtualizer = new VirtualScrollController(this, {
+			scrollElement: () => this.viewport,
+			itemCount: () => this.rowCount,
+			itemHeight: () => this.#rowHeightPx,
+			overscan: () => this.overscan,
+			enabled: () => this.isVirtualized
+		});
+		this.#handleDefinitionsChange = (event) => {
+			this.#collectColumns(event.target);
+		};
+		this.#handleColumnChange = (event) => {
+			event.stopPropagation();
+			this.#collectColumns();
+		};
+		this.#handlePagerConnect = (event) => {
+			event.stopPropagation();
+			if (event.target) this.#pagers.add(event.target);
+			if (this.pageSize === 0) {
+				const pageSize = Math.floor(event.detail?.pageSize ?? 0);
+				if (Number.isFinite(pageSize) && pageSize > 0) this.pageSize = pageSize;
+			}
+		};
+		this.#handlePagerEvent = (event) => {
+			if (!this.paginated || event.target === this) return;
+			if (event.target && this.#pagers.has(event.target)) event.stopImmediatePropagation();
+		};
+		this.#handleSelectAll = (event) => {
+			event.stopPropagation();
+			if (event.target.checked) this.selectAll();
+			else this.clearSelection();
+		};
+		this.#handleKeyDown = (event) => {
+			const columns = this.#renderColumns();
+			if (columns.length === 0) return;
+			let { row, column } = this.focusedCell;
+			const first = this.#pageStart;
+			const last = first + this.rowCount - 1;
+			const viewportRows = Math.max(1, Math.floor((this.viewport?.clientHeight ?? 0) / this.#rowHeightPx) - 1);
+			switch (event.key) {
+				case "ArrowDown":
+					row = Math.min(last, row + 1);
+					break;
+				case "ArrowUp":
+					row = row <= first ? HEADER_ROW : row - 1;
+					break;
+				case "ArrowRight":
+					column = Math.min(columns.length - 1, column + 1);
+					break;
+				case "ArrowLeft":
+					column = Math.max(0, column - 1);
+					break;
+				case "Home":
+					if (event.ctrlKey || event.metaKey) row = HEADER_ROW;
+					column = 0;
+					break;
+				case "End":
+					if (event.ctrlKey || event.metaKey) row = last;
+					column = columns.length - 1;
+					break;
+				case "PageDown":
+					row = Math.min(last, Math.max(first, row) + viewportRows);
+					break;
+				case "PageUp":
+					row = Math.max(first, row - viewportRows);
+					break;
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					if (row === HEADER_ROW) this.#toggleSort(columns[column], event.shiftKey);
+					else if (this.selection !== "none") this.#applySelection(row, {
+						toggle: event.key === " " || event.ctrlKey || event.metaKey,
+						range: event.shiftKey
+					});
+					return;
+				default: return;
+			}
+			event.preventDefault();
+			this.focusedCell = {
+				row,
+				column
+			};
+			this.#pendingFocus = true;
+			if (row >= 0) this.scrollToIndex(row);
+		};
+	}
+	static {
+		this.styles = unsafeCSS(table_default);
+	}
+	#sortedRows;
+	#blocks;
+	#pendingBlocks;
+	#measuredWidths;
+	#measuredRowHeight;
+	#selectionAnchor;
+	#pendingFocus;
+	#requestToken;
+	/** The pagers that have announced themselves, so only their events are swallowed — not a pager inside a cell. */
+	#pagers;
+	#pendingScrollTop;
+	#virtualizer;
+	/** Total number of rows the table knows about: `rows.length`, or the `dataSource` total. */
+	get totalRows() {
+		return this.dataSource ? Math.max(0, this.remoteTotal) : this.#sortedRows.length;
+	}
+	/**
+	* Number of rows on screen right now: the whole dataset, or one page of it while `paginated`. This is what the
+	* virtualizer windows and what `virtual="auto"` measures, so a 25-row page is never virtualized against a
+	* million-row total.
+	*/
+	get rowCount() {
+		if (!this.paginated) return this.totalRows;
+		const onPage = Math.max(0, Math.min(this.pageSize, this.totalRows - this.#pageStart));
+		if (!this.dataSource) return onPage;
+		const loaded = this.#blocks.get(this.page - 1)?.length;
+		if (loaded !== void 0) return loaded;
+		return this.remoteTotal < 0 ? 0 : onPage;
+	}
+	/**
+	* Whether the table is paging its rows. `rows` are sliced in place; a `dataSource` is asked for one page per
+	* request. Either way `page-size` is the switch, and a pager slotted into the `footer` sets it.
+	*/
+	get paginated() {
+		return this.pageSize > 0;
+	}
+	/** Number of pages, at least 1. */
+	get pageCount() {
+		if (!this.paginated) return 1;
+		return Math.max(1, Math.ceil(this.totalRows / this.pageSize));
+	}
+	/** Index of the first row of the current page within the whole dataset. */
+	get #pageStart() {
+		return this.paginated ? (this.page - 1) * this.pageSize : 0;
+	}
+	/** A page is one block, so the existing block cache and request de-duplication carry paging unchanged. */
+	get #effectiveBlockSize() {
+		return this.paginated ? this.pageSize : this.blockSize;
+	}
+	/** Whether the rows are currently windowed. */
+	get isVirtualized() {
+		if (this.virtual === "never") return false;
+		if (this.virtual === "always") return true;
+		return this.rowCount > this.virtualThreshold;
+	}
+	get #rowHeightPx() {
+		return this.#measuredRowHeight || this.rowHeight;
+	}
+	get #isBootstrapping() {
+		return Boolean(this.dataSource) && this.remoteTotal < 0 && !this.error;
+	}
+	/** The resolved, ordered, visible columns — children first, then the `columns` property, then one per key of the first row. */
+	get resolvedColumns() {
+		const visible = (this.columnElements.length ? this.columnElements : this.columns ?? this.#autoColumns()).filter((column) => column.field && !column.hidden);
+		return [
+			...visible.filter((column) => column.pinned === "start"),
+			...visible.filter((column) => !column.pinned),
+			...visible.filter((column) => column.pinned === "end")
+		];
+	}
+	/** The rows currently selected. Only the loaded ones when a `dataSource` is used. */
+	getSelectedRows() {
+		const keys = new Set(this.value);
+		const selected = [];
+		for (let index = 0; index < this.rowCount; index++) {
+			const row = this.#rowAt(index);
+			if (row && keys.has(this.#keyAt(index, row))) selected.push(row);
+		}
+		return selected;
+	}
+	/** Selects every loaded row. No-op unless `selection="multiple"`. */
+	selectAll() {
+		if (this.selection !== "multiple") return;
+		const keys = [];
+		for (let index = 0; index < this.rowCount; index++) {
+			const row = this.#rowAt(index);
+			if (row) keys.push(this.#keyAt(index, row));
+		}
+		this.#commitSelection(keys);
+	}
+	/** Clears the selection. */
+	clearSelection() {
+		this.#commitSelection([]);
+	}
+	/** Scrolls the row at `index` into view. */
+	scrollToIndex(index) {
+		this.#virtualizer.scrollToIndex(index - this.#pageStart, this.#headerHeight());
+	}
+	/** Drops the `dataSource` cache and reloads the visible rows. */
+	refresh() {
+		this.error = "";
+		if (this.dataSource) this.#resetRemote();
+		this.requestUpdate();
+	}
+	willUpdate(changed) {
+		if (!this.hasUpdated || changed.has("rows") || changed.has("sortModel") || changed.has("columns") || changed.has("columnElements")) this.#applySort();
+		if (changed.has("dataSource") || changed.has("blockSize") || changed.has("pageSize") || this.dataSource && changed.has("sortModel")) this.#resetRemote();
+		if (this.paginated) {
+			if (changed.has("sortModel") && changed.get("sortModel") !== void 0) this.page = 1;
+			if (!this.dataSource || this.remoteTotal >= 0) {
+				const clamped = Math.min(Math.max(1, Math.floor(this.page) || 1), this.pageCount);
+				if (clamped !== this.page) this.page = clamped;
+			}
+			if ((changed.has("page") || changed.has("pageSize")) && this.error) this.error = "";
+			if (changed.has("page") && this.hasUpdated) {
+				this.#selectionAnchor = -1;
+				this.#pendingScrollTop = true;
+			}
+		}
+		this.#syncPagerContext();
+		if (this.rowCount === 0 && this.focusedCell.row !== HEADER_ROW) this.focusedCell = {
+			row: HEADER_ROW,
+			column: this.focusedCell.column
+		};
+	}
+	#syncPagerContext() {
+		const current = this.pager;
+		if (!this.paginated) {
+			if (current) this.pager = void 0;
+			return;
+		}
+		const busy = this.loading || this.#isBootstrapping;
+		if (current && current.page === this.page && current.pageSize === this.pageSize && current.totalItems === this.totalRows && current.busy === busy) return;
+		this.pager = {
+			page: this.page,
+			pageSize: this.pageSize,
+			totalItems: this.totalRows,
+			busy,
+			pageChanged: (page) => this.goToPage(page),
+			pageSizeChanged: (pageSize) => this.setPageSize(pageSize)
+		};
+	}
+	/** Shows `page`, clamped to the available range, and loads it. Fires `page-change` when the page actually moves. */
+	goToPage(page) {
+		if (!this.paginated) return;
+		const previousPage = this.page;
+		const next = Math.min(Math.max(1, Math.floor(page) || 1), this.pageCount);
+		if (next === previousPage) return;
+		this.page = next;
+		this.dispatchEvent(new CustomEvent("page-change", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				page: next,
+				previousPage,
+				pageSize: this.pageSize,
+				pageCount: this.pageCount,
+				start: (next - 1) * this.pageSize,
+				count: this.pageSize,
+				totalRows: this.totalRows
+			}
+		}));
+	}
+	/** Changes the rows per page, keeping the first row of the current page on screen. */
+	setPageSize(pageSize) {
+		const next = Math.floor(pageSize);
+		if (!Number.isFinite(next) || next <= 0 || next === this.pageSize) return;
+		const firstRow = this.#pageStart;
+		this.pageSize = next;
+		this.page = Math.floor(firstRow / next) + 1;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (this.#pendingScrollTop) {
+			this.#pendingScrollTop = false;
+			if (this.viewport) this.viewport.scrollTop = 0;
+		}
+		this.#measureRowHeight();
+		this.#measureColumnWidths();
+		this.#syncFocusToWindow();
+		if (this.#pendingFocus) {
+			this.#pendingFocus = false;
+			this.renderRoot.querySelector(".cell[tabindex=\"0\"]")?.focus();
+		}
+		if (this.dataSource) this.#ensureBlocks();
+	}
+	render() {
+		const columns = this.#renderColumns();
+		const pins = this.#pinPlacements(columns);
+		const range = this.#virtualizer.range;
+		const offset = this.#pageStart;
+		return html`
+      <div class="toolbar" part="toolbar" ?hidden=${!this.hasToolbar}>
+        <slot name="toolbar" @slotchange=${(event) => this.hasToolbar = this.#slotHasContent(event)}></slot>
+      </div>
+      <div class="viewport" part="viewport">
+        <div
+          class="grid"
+          role="grid"
+          part="grid"
+          aria-rowcount=${this.totalRows + 1}
+          aria-colcount=${columns.length}
+          aria-busy=${this.loading || this.#isBootstrapping ? "true" : "false"}
+          style=${styleMap({ "--_grid-template": this.#gridTemplate(columns) })}
+          @keydown=${this.#handleKeyDown}
+        >
+          ${this.#renderHeaderRow(columns, pins)} ${range.paddingTop > 0 ? html`<div class="spacer" style="height:${range.paddingTop}px"></div>` : nothing}
+          ${this.#renderBody(columns, pins, offset + range.start, offset + range.end)}
+          ${range.paddingBottom > 0 ? html`<div class="spacer" style="height:${range.paddingBottom}px"></div>` : nothing}
+        </div>
+      </div>
+      <div class="footer" part="footer" ?hidden=${!this.hasFooter}>
+        <slot name="footer" @slotchange=${(event) => this.hasFooter = this.#slotHasContent(event)}></slot>
+      </div>
+      <slot class="definitions" @slotchange=${this.#handleDefinitionsChange}></slot>
+    `;
+	}
+	#renderBody(columns, pins, start, end) {
+		if (this.error) return html`<div class="row row--state" role="row">
+        <div class="cell cell--state cell--state-error" role="gridcell" part="state"><slot name="error">${this.error}</slot></div>
+      </div>`;
+		if (this.rowCount === 0) {
+			const isLoading = this.loading || this.#isBootstrapping;
+			return html`<div class="row row--state" role="row">
+        <div class="cell cell--state" role="gridcell" part="state">
+          ${isLoading ? html`<slot name="loading"><c2-spinner></c2-spinner></slot>` : html`<slot name="empty">${this.emptyMessage}</slot>`}
+        </div>
+      </div>`;
+		}
+		const rows = [];
+		for (let index = start; index < end; index++) rows.push(this.#renderRow(index, columns, pins));
+		return rows;
+	}
+	#renderHeaderRow(columns, pins) {
+		return html`
+      <div class="row row--header" role="row" aria-rowindex="1" part="header-row">
+        ${columns.map((column, columnIndex) => this.#renderHeaderCell(column, columnIndex, pins))}
+      </div>
+    `;
+	}
+	#renderHeaderCell(column, columnIndex, pins) {
+		if (column.field === SELECTION_FIELD) {
+			const total = this.rowCount;
+			const selected = this.value.length;
+			const allSelected = total > 0 && selected >= total;
+			return html`
+        <div
+          class=${classMap({
+				cell: true,
+				"cell--header": true,
+				"cell--selection": true,
+				...this.#pinClasses(column, pins)
+			})}
+          role="columnheader"
+          part="header-cell selection-header-cell"
+          data-field=${column.field}
+          aria-colindex=${columnIndex + 1}
+          tabindex=${this.#tabIndexFor(HEADER_ROW, columnIndex)}
+          style=${styleMap(this.#pinStyle(column, pins))}
+        >
+          <c2-checkbox
+            aria-label="Select all rows"
+            ?checked=${allSelected}
+            ?indeterminate=${selected > 0 && !allSelected}
+            ?disabled=${this.selection !== "multiple" || Boolean(this.dataSource)}
+            @change=${this.#handleSelectAll}
+          ></c2-checkbox>
+        </div>
+      `;
+		}
+		const sortable = column.sortable ?? this.sortable;
+		const sortIndex = this.sortModel.findIndex((entry) => entry.field === column.field);
+		const sort = sortIndex >= 0 ? this.sortModel[sortIndex] : void 0;
+		const resizable = column.resizable ?? this.resizable;
+		return html`
+      <div
+        class=${classMap({
+			cell: true,
+			"cell--header": true,
+			"cell--sortable": sortable,
+			"cell--sorted": Boolean(sort),
+			[`cell--align-${column.align ?? "start"}`]: true,
+			...this.#pinClasses(column, pins)
+		})}
+        role="columnheader"
+        part="header-cell"
+        data-field=${column.field}
+        aria-colindex=${columnIndex + 1}
+        aria-sort=${ifDefined(sortable ? sort ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0)}
+        tabindex=${this.#tabIndexFor(HEADER_ROW, columnIndex)}
+        style=${styleMap(this.#pinStyle(column, pins))}
+        @click=${(event) => {
+			this.focusedCell = {
+				row: HEADER_ROW,
+				column: columnIndex
+			};
+			this.#toggleSort(column, event.shiftKey);
+		}}
+      >
+        <span class="cell-content">${column.renderHeader ? column.renderHeader({ column }) : column.header ?? humanize(column.field)}</span>
+        ${sortable ? this.#renderSortIcon(sort?.direction) : nothing}
+        ${sort && this.sortModel.length > 1 ? html`<span class="sort-order">${sortIndex + 1}</span>` : nothing}
+        ${resizable ? html`<span class="resizer" part="resizer" @pointerdown=${(event) => this.#startResize(event, column)}></span>` : nothing}
+      </div>
+    `;
+	}
+	#renderSortIcon(direction) {
+		return html`
+      <svg
+        class=${classMap({
+			"sort-icon": true,
+			"sort-icon--active": Boolean(direction),
+			"sort-icon--desc": direction === "desc"
+		})}
+        part="sort-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M12 19V5" />
+        <path d="M5 12l7-7 7 7" />
+      </svg>
+    `;
+	}
+	#renderRow(index, columns, pins) {
+		const row = this.#rowAt(index);
+		const key = row ? this.#keyAt(index, row) : "";
+		const selected = key !== "" && this.value.includes(key);
+		const selectable = this.selection !== "none";
+		return html`
+      <div
+        class=${classMap({
+			row: true,
+			"row--odd": index % 2 === 1,
+			"row--selected": selected,
+			"row--clickable": selectable
+		})}
+        role="row"
+        part=${selected ? "row row-selected" : "row"}
+        aria-rowindex=${index + 2}
+        aria-selected=${ifDefined(selectable ? String(selected) : void 0)}
+        @click=${(event) => this.#handleRowClick(event, index)}
+      >
+        ${columns.map((column, columnIndex) => this.#renderCell(row, index, column, columnIndex, pins))}
+      </div>
+    `;
+	}
+	#renderCell(row, rowIndex, column, columnIndex, pins) {
+		const classes = {
+			cell: true,
+			[`cell--align-${column.align ?? "start"}`]: true,
+			"cell--selection": column.field === SELECTION_FIELD,
+			...this.#pinClasses(column, pins),
+			...column.cellClass ? { [column.cellClass]: true } : {}
+		};
+		const shared = {
+			class: classMap(classes),
+			tabindex: this.#tabIndexFor(rowIndex, columnIndex),
+			style: styleMap(this.#pinStyle(column, pins))
+		};
+		if (column.field === SELECTION_FIELD) {
+			const key = row ? this.#keyAt(rowIndex, row) : "";
+			return html`
+        <div
+          class=${shared.class}
+          role="gridcell"
+          part="cell selection-cell"
+          aria-colindex=${columnIndex + 1}
+          tabindex=${shared.tabindex}
+          style=${shared.style}
+        >
+          ${row ? html`<c2-checkbox
+                  aria-label="Select row"
+                  ?checked=${this.value.includes(key)}
+                  @click=${(event) => event.stopPropagation()}
+                  @change=${() => this.#handleCheckboxToggle(rowIndex)}
+                ></c2-checkbox>` : nothing}
+        </div>
+      `;
+		}
+		const value = getFieldValue(row, column.field);
+		const rendered = row ? column.renderCell ? column.renderCell({
+			value,
+			row,
+			rowIndex,
+			column
+		}) : this.#formatValue(column, value) : void 0;
+		const content = row ? column.cellSlot ? html`<slot name=${`cell:${this.#keyAt(rowIndex, row)}:${column.field}`}>${rendered}</slot>` : rendered : html`<span class="skeleton" part="skeleton"></span>`;
+		const fieldPart = column.field.replace(/[^\w-]/g, "-");
+		return html`
+      <div
+        class=${shared.class}
+        role="gridcell"
+        part="cell cell-${fieldPart}"
+        aria-colindex=${columnIndex + 1}
+        tabindex=${shared.tabindex}
+        style=${shared.style}
+        @click=${() => this.#handleCellClick(rowIndex, columnIndex, column, value)}
+      >
+        <span class="cell-content" part="cell-content cell-content-${fieldPart}">${content}</span>
+      </div>
+    `;
+	}
+	#renderColumns() {
+		const columns = this.resolvedColumns;
+		if (!this.checkboxSelection) return columns;
+		return [{
+			field: SELECTION_FIELD,
+			header: "",
+			width: "var(--c2-table__selection-cell--width, 44px)",
+			minWidth: 32,
+			align: "center",
+			pinned: "start"
+		}, ...columns];
+	}
+	#autoColumns() {
+		const first = Array.isArray(this.rows) ? this.rows[0] : void 0;
+		if (!first) return [];
+		return Object.keys(first).map((field) => ({
+			field,
+			header: humanize(field)
+		}));
+	}
+	#gridTemplate(columns) {
+		return columns.map((column) => this.widthOverrides[column.field] ? `${this.widthOverrides[column.field]}px` : column.width || "1fr").join(" ");
+	}
+	#pinPlacements(columns) {
+		const placements = /* @__PURE__ */ new Map();
+		const startColumns = columns.filter((column) => column.pinned === "start");
+		const endColumns = columns.filter((column) => column.pinned === "end");
+		let offset = 0;
+		startColumns.forEach((column, index) => {
+			placements.set(column.field, {
+				side: "start",
+				offset,
+				edge: index === startColumns.length - 1
+			});
+			offset += this.#columnWidth(column);
+		});
+		offset = 0;
+		for (let index = endColumns.length - 1; index >= 0; index--) {
+			const column = endColumns[index];
+			placements.set(column.field, {
+				side: "end",
+				offset,
+				edge: index === 0
+			});
+			offset += this.#columnWidth(column);
+		}
+		return placements;
+	}
+	#columnWidth(column) {
+		return this.widthOverrides[column.field] ?? this.#measuredWidths.get(column.field) ?? 0;
+	}
+	#pinClasses(column, pins) {
+		const pin = pins.get(column.field);
+		if (!pin) return {};
+		return {
+			"cell--pinned": true,
+			"cell--pinned-edge-start": pin.side === "start" && pin.edge,
+			"cell--pinned-edge-end": pin.side === "end" && pin.edge
+		};
+	}
+	#pinStyle(column, pins) {
+		const pin = pins.get(column.field);
+		if (!pin) return {};
+		return pin.side === "start" ? { left: `${pin.offset}px` } : { right: `${pin.offset}px` };
+	}
+	#tabIndexFor(rowIndex, columnIndex) {
+		return this.focusedCell.row === rowIndex && this.focusedCell.column === columnIndex ? 0 : -1;
+	}
+	#formatValue(column, value) {
+		if (value === null || value === void 0 || value === "") return "";
+		const locale = column.locale;
+		const extra = column.formatOptions;
+		try {
+			switch (column.format) {
+				case "number": return new Intl.NumberFormat(locale, numberFormatOptions({}, extra)).format(Number(value));
+				case "percent": return new Intl.NumberFormat(locale, numberFormatOptions({ style: "percent" }, extra)).format(Number(value));
+				case "currency": return new Intl.NumberFormat(locale, numberFormatOptions({
+					style: "currency",
+					currency: column.currency ?? "USD"
+				}, extra)).format(Number(value));
+				case "date": return new Intl.DateTimeFormat(locale, dateFormatOptions({ dateStyle: "medium" }, extra)).format(new Date(value));
+				case "datetime": return new Intl.DateTimeFormat(locale, dateFormatOptions({
+					dateStyle: "medium",
+					timeStyle: "short"
+				}, extra)).format(new Date(value));
+				case "time": return new Intl.DateTimeFormat(locale, dateFormatOptions({ timeStyle: "short" }, extra)).format(new Date(value));
+				default: return String(value);
+			}
+		} catch {
+			return String(value);
+		}
+	}
+	/** `index` is the row's position in the whole dataset, on every page. */
+	#rowAt(index) {
+		if (this.dataSource) {
+			const size = this.#effectiveBlockSize;
+			return this.#blocks.get(Math.floor(index / size))?.[index % size];
+		}
+		return this.#sortedRows[index];
+	}
+	#keyAt(index, row) {
+		if (!this.rowKey) return String(index);
+		const value = getFieldValue(row, this.rowKey);
+		return value === null || value === void 0 ? String(index) : String(value);
+	}
+	#applySort() {
+		const rows = Array.isArray(this.rows) ? this.rows : [];
+		if (this.dataSource || this.sortModel.length === 0) {
+			this.#sortedRows = rows;
+			return;
+		}
+		const columns = this.resolvedColumns;
+		this.#sortedRows = [...rows].sort((left, right) => {
+			for (const entry of this.sortModel) {
+				const result = (columns.find((candidate) => candidate.field === entry.field)?.comparator ?? defaultCompare)(getFieldValue(left, entry.field), getFieldValue(right, entry.field));
+				if (result !== 0) return entry.direction === "desc" ? -result : result;
+			}
+			return 0;
+		});
+	}
+	#resetRemote() {
+		this.#requestToken++;
+		this.#blocks.clear();
+		this.#pendingBlocks.clear();
+		this.remoteTotal = -1;
+	}
+	#ensureBlocks() {
+		if (!this.dataSource || this.error) return;
+		if (this.paginated) {
+			this.#fetchBlock(this.page - 1);
+			return;
+		}
+		if (this.remoteTotal < 0) {
+			this.#fetchBlock(0);
+			return;
+		}
+		const { start, end } = this.#virtualizer.range;
+		if (end <= start) return;
+		const firstBlock = Math.floor(start / this.blockSize);
+		const lastBlock = Math.floor((end - 1) / this.blockSize);
+		for (let block = firstBlock; block <= lastBlock; block++) this.#fetchBlock(block);
+	}
+	async #fetchBlock(block) {
+		const dataSource = this.dataSource;
+		if (!dataSource || this.#blocks.has(block) || this.#pendingBlocks.has(block)) return;
+		this.#pendingBlocks.add(block);
+		const token = this.#requestToken;
+		try {
+			const size = this.#effectiveBlockSize;
+			const result = await dataSource.getRows({
+				start: block * size,
+				count: size,
+				sort: this.sortModel
+			});
+			if (token !== this.#requestToken) return;
+			this.#blocks.set(block, result.rows ?? []);
+			if (typeof result.total === "number") this.remoteTotal = result.total;
+			else if (this.remoteTotal < 0) this.remoteTotal = block * size + (result.rows?.length ?? 0);
+			this.requestUpdate();
+		} catch (error) {
+			if (token === this.#requestToken) {
+				this.error = error instanceof Error ? error.message : String(error);
+				if (this.remoteTotal < 0) this.remoteTotal = 0;
+			}
+		} finally {
+			this.#pendingBlocks.delete(block);
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(COLUMN_CHANGE_EVENT, this.#handleColumnChange);
+		this.addEventListener(PAGER_CONNECT_EVENT, this.#handlePagerConnect);
+		this.addEventListener("page-change", this.#handlePagerEvent);
+		this.addEventListener("page-size-change", this.#handlePagerEvent);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(COLUMN_CHANGE_EVENT, this.#handleColumnChange);
+	}
+	#handleDefinitionsChange;
+	/** A column definition changed one of its own properties: re-read them all, keeping the event inside the table. */
+	#handleColumnChange;
+	/**
+	* A pager connected somewhere inside the table. Adopt its page size when the table has none, so the nested form
+	* needs no configuration, and keep the event inside the table.
+	*/
+	#handlePagerConnect;
+	/**
+	* A pager the table drives re-emits what it just asked for, so the table swallows it and answers with its own
+	* event — one `page-change` leaves the table, not two. Three things must still get through: the table's own event
+	* (it fires this listener at-target), a `c2-pagination` used inside a cell renderer, and any pager on a table that
+	* is not paging, which the author is wiring up by hand.
+	*/
+	#handlePagerEvent;
+	#collectColumns(slot) {
+		const target = slot ?? this.renderRoot.querySelector("slot.definitions");
+		if (!target) return;
+		this.columnElements = target.assignedElements({ flatten: true }).map((element) => element instanceof TableColumn ? element : element.firstElementChild).filter((element) => element instanceof TableColumn);
+	}
+	#slotHasContent(event) {
+		return event.target.assignedNodes({ flatten: true }).some((node) => node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()));
+	}
+	#toggleSort(column, additive) {
+		if (column.field === SELECTION_FIELD) return;
+		if (!(column.sortable ?? this.sortable)) return;
+		const existing = this.sortModel.find((entry) => entry.field === column.field);
+		const direction = !existing ? "asc" : existing.direction === "asc" ? "desc" : void 0;
+		const rest = additive && this.multiSort ? this.sortModel.filter((entry) => entry.field !== column.field) : [];
+		this.sortModel = direction ? [...rest, {
+			field: column.field,
+			direction
+		}] : rest;
+		this.dispatchEvent(new CustomEvent("sort-change", {
+			detail: { sort: this.sortModel },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#handleRowClick(event, index) {
+		const row = this.#rowAt(index);
+		if (!row) return;
+		const key = this.#keyAt(index, row);
+		this.dispatchEvent(new CustomEvent("row-click", {
+			detail: {
+				row,
+				rowIndex: index,
+				key
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (this.selection === "none") return;
+		this.#applySelection(index, {
+			toggle: event.metaKey || event.ctrlKey,
+			range: event.shiftKey
+		});
+	}
+	#handleCellClick(rowIndex, columnIndex, column, value) {
+		const row = this.#rowAt(rowIndex);
+		if (!row) return;
+		this.focusedCell = {
+			row: rowIndex,
+			column: columnIndex
+		};
+		this.dispatchEvent(new CustomEvent("cell-click", {
+			detail: {
+				row,
+				rowIndex,
+				key: this.#keyAt(rowIndex, row),
+				column,
+				value
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#handleCheckboxToggle(index) {
+		this.#applySelection(index, {
+			toggle: true,
+			range: false
+		});
+	}
+	#handleSelectAll;
+	#applySelection(index, modifiers) {
+		const row = this.#rowAt(index);
+		if (!row) return;
+		const key = this.#keyAt(index, row);
+		if (this.selection === "single") {
+			this.#selectionAnchor = index;
+			this.#commitSelection(modifiers.toggle && this.value.includes(key) ? [] : [key]);
+			return;
+		}
+		if (modifiers.range && this.#selectionAnchor >= 0) {
+			const from = Math.min(this.#selectionAnchor, index);
+			const to = Math.max(this.#selectionAnchor, index);
+			const keys = new Set(modifiers.toggle ? this.value : []);
+			for (let cursor = from; cursor <= to; cursor++) {
+				const rangeRow = this.#rowAt(cursor);
+				if (rangeRow) keys.add(this.#keyAt(cursor, rangeRow));
+			}
+			this.#commitSelection([...keys]);
+			return;
+		}
+		this.#selectionAnchor = index;
+		if (modifiers.toggle) {
+			this.#commitSelection(this.value.includes(key) ? this.value.filter((entry) => entry !== key) : [...this.value, key]);
+			return;
+		}
+		this.#commitSelection([key]);
+	}
+	#commitSelection(keys) {
+		this.value = keys;
+		this.dispatchEvent(new CustomEvent("selection-change", {
+			detail: {
+				value: keys,
+				rows: this.getSelectedRows()
+			},
+			bubbles: false,
+			composed: true
+		}));
+	}
+	#startResize(event, column) {
+		event.preventDefault();
+		event.stopPropagation();
+		const handle = event.currentTarget;
+		const headerCell = handle.parentElement;
+		if (!headerCell) return;
+		const startWidth = headerCell.getBoundingClientRect().width;
+		const startX = event.clientX;
+		const minWidth = column.minWidth ?? 64;
+		let width = Math.round(startWidth);
+		const move = (moveEvent) => {
+			width = Math.max(minWidth, Math.round(startWidth + moveEvent.clientX - startX));
+			this.widthOverrides = {
+				...this.widthOverrides,
+				[column.field]: width
+			};
+		};
+		const finish = (upEvent) => {
+			handle.releasePointerCapture(upEvent.pointerId);
+			handle.removeEventListener("pointermove", move);
+			handle.removeEventListener("pointerup", finish);
+			handle.removeEventListener("pointercancel", finish);
+			handle.classList.remove("resizer--active");
+			this.dispatchEvent(new CustomEvent("column-resize", {
+				detail: {
+					field: column.field,
+					width
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		handle.setPointerCapture(event.pointerId);
+		handle.classList.add("resizer--active");
+		handle.addEventListener("pointermove", move);
+		handle.addEventListener("pointerup", finish);
+		handle.addEventListener("pointercancel", finish);
+	}
+	#handleKeyDown;
+	#headerHeight() {
+		return this.renderRoot.querySelector(".row--header")?.getBoundingClientRect().height ?? 0;
+	}
+	#measureRowHeight() {
+		const first = this.renderRoot.querySelector(".row:not(.row--header):not(.row--state)");
+		if (!first) return;
+		const height = first.getBoundingClientRect().height;
+		if (height > 0 && Math.abs(height - this.#measuredRowHeight) > .01) {
+			this.#measuredRowHeight = height;
+			this.requestUpdate();
+		}
+	}
+	#measureColumnWidths() {
+		const cells = this.renderRoot.querySelectorAll(".cell--header[data-field]");
+		let pinnedChanged = false;
+		for (const cell of cells) {
+			const field = cell.dataset.field;
+			if (!field) continue;
+			const width = Math.round(cell.getBoundingClientRect().width);
+			if (width > 0 && this.#measuredWidths.get(field) !== width) {
+				this.#measuredWidths.set(field, width);
+				if (cell.classList.contains("cell--pinned")) pinnedChanged = true;
+			}
+		}
+		if (pinnedChanged) this.requestUpdate();
+	}
+	/** Keeps the roving tabindex on a rendered cell: follows the window when focused, falls back to the header otherwise. */
+	#syncFocusToWindow() {
+		const { row, column } = this.focusedCell;
+		if (row < 0) return;
+		const offset = this.#pageStart;
+		const start = offset + this.#virtualizer.range.start;
+		const end = offset + this.#virtualizer.range.end;
+		if (row >= start && row < end) return;
+		if (this.renderRoot.activeElement) {
+			this.focusedCell = {
+				row: Math.min(Math.max(row, start), Math.max(start, end - 1)),
+				column
+			};
+			this.#pendingFocus = true;
+		} else this.focusedCell = {
+			row: HEADER_ROW,
+			column
+		};
+	}
+};
+__decorate([query(".viewport")], Table.prototype, "viewport", void 0);
+__decorate([property({ converter: jsonPropertyConverter })], Table.prototype, "rows", void 0);
+__decorate([property({ converter: jsonPropertyConverter })], Table.prototype, "columns", void 0);
+__decorate([property({
+	type: String,
+	attribute: "row-key"
+})], Table.prototype, "rowKey", void 0);
+__decorate([property({ type: String })], Table.prototype, "selection", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "checkbox-selection"
+})], Table.prototype, "checkboxSelection", void 0);
+__decorate([property({
+	converter: arrayPropertyConverter,
+	reflect: true
+})], Table.prototype, "value", void 0);
+__decorate([property({
+	converter: sortModelConverter,
+	attribute: "sort",
+	reflect: true
+})], Table.prototype, "sortModel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "multi-sort"
+})], Table.prototype, "multiSort", void 0);
+__decorate([property({ type: Boolean })], Table.prototype, "sortable", void 0);
+__decorate([property({ type: Boolean })], Table.prototype, "resizable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Table.prototype, "stripe", void 0);
+__decorate([property({ type: String })], Table.prototype, "virtual", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "row-height"
+})], Table.prototype, "rowHeight", void 0);
+__decorate([property({ type: Number })], Table.prototype, "overscan", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "virtual-threshold"
+})], Table.prototype, "virtualThreshold", void 0);
+__decorate([property({ attribute: false })], Table.prototype, "dataSource", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "block-size"
+})], Table.prototype, "blockSize", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Table.prototype, "loading", void 0);
+__decorate([property({ type: String })], Table.prototype, "error", void 0);
+__decorate([property({
+	type: String,
+	attribute: "empty-message"
+})], Table.prototype, "emptyMessage", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], Table.prototype, "page", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "page-size"
+})], Table.prototype, "pageSize", void 0);
+__decorate([state()], Table.prototype, "columnElements", void 0);
+__decorate([state()], Table.prototype, "widthOverrides", void 0);
+__decorate([state()], Table.prototype, "focusedCell", void 0);
+__decorate([state()], Table.prototype, "hasToolbar", void 0);
+__decorate([state()], Table.prototype, "hasFooter", void 0);
+__decorate([state()], Table.prototype, "remoteTotal", void 0);
+__decorate([provide({ context: pagerContext })], Table.prototype, "pager", void 0);
+Table = __decorate([customElement("c2-table")], Table);
+//#endregion
+export { Table };