xv-webcomponents 2.0.0-beta.2 → 2.0.0-beta.28

package/dist/collection/components/xv-table/xv-table.js

@@ -1,43 +1,1043 @@
-import { Host, h, Fragment } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { SIZE_VAR } from "../../types/enum";
+import { deleteLayout, readLayout, writeLayout } from "../../utils/table-layout";
+import { XV_TABLE_CONTROL_WIDTH, XV_TABLE_CELL_TAG, XV_TABLE_MIN_COLUMN_WIDTH, XV_TABLE_ROW_TAG, } from "./xv-table.model";
+import { applyLayout, buildColumnTemplate, buildColumnTracks, cellValue, clampPage, clampWidth, columnAllows, diffLayout, formatCell, hideableColumns, isLayoutChanged, mergeVisibleOrder, moveItem, nextSortDirection, pageSlice, parsePageSizes, parseProp, parseSortBy, sortName, sortRows, tableMinWidth, totalPages, visibleColumns, } from "./xv-table.utils";
+const CHECKBOX_EVENT = 'eventChange';
+const INTERACTIVE = 'a,button,input,select,textarea,[role="button"],xv-button-v2,xv-link-v2,xv-checkbox-v2,xv-radio-v2,xv-overflow-menu-v2,xv-tooltip-v2';
+/**
+ * A data table built on CSS grid with `subgrid` rows, so a row keeps its own box while its cells
+ * stay aligned to the table's columns and an expanded panel can span the full width.
+ *
+ * `columns` always describes the structure — widths, order, sorting, resizing, hiding and the
+ * stored layout all read from it. Rows come either from `rows` as data, or as slotted
+ * `xv-table-row` children when the cells hold arbitrary markup.
+ *
+ * @slot - Slotted `xv-table-row` children, used instead of the `rows` prop.
+ * @slot toolbar - Controls above the table. Slotted content spans the bar; `flex: 0 0 auto` opts out.
+ * @slot batch - Actions shown in the bar that replaces the toolbar while rows are selected.
+ * @slot footer - Rows rendered after the body, for subtotals.
+ * @slot empty - Shown instead of the body when there is nothing to render.
+ * @slot label - Replaces the `label` prop with markup.
+ * @slot description - Replaces the `description` prop with markup.
+ * @part heading - The title block.
+ * @part title - The title text.
+ * @part description - The description text.
+ * @part bar - The toolbar and batch bar wrapper.
+ * @part toolbar - The toolbar.
+ * @part batch - The batch actions bar.
+ * @part scroll - The horizontal scroll container.
+ * @part grid - The grid itself.
+ * @part head - The header row.
+ * @part header-cell - One header cell.
+ * @part body - The body wrapper.
+ * @part pagination - The pagination block.
+ * @part column-picker - The menu that hides and shows columns.
+ * @part empty - The empty state.
+ * @part loading - The loading overlay.
+ */
 export class XvTable {
     constructor() {
+        /** Column definitions. Accepts its JSON string form so it is settable from plain markup. */
+        this.columns = [];
+        /** Row data. Ignored when `xv-table-row` children are slotted. */
+        this.rows = [];
+        /** Property of a row object that identifies it in selection and expansion payloads. */
+        this.rowKey = 'id';
+        /** Row height ladder. */
         this.size = SIZE_VAR.MD;
-        this.selected = new Map();
-        this.selectedCount = 0;
+        /** Stretches the table to the full width of its container. */
+        this.block = false;
+        /** Covers the body with a loading state. */
+        this.loading = false;
+        /** Placeholder rows drawn while `loading`. Zero draws a spinner instead. */
+        this.skeletonRows = 0;
+        /** Highlights a row on pointer hover. */
+        this.hover = false;
+        /** Emits `rowClick` when a row is clicked outside an interactive element. */
+        this.rowClickable = false;
+        /** Title above the table. */
+        this.label = '';
+        /** Supporting text under the title. */
+        this.description = '';
+        /** Shown when there are no rows. */
+        this.emptyLabel = '';
+        /** Text of the batch bar counter. `{count}` is replaced with the number of selected rows. */
+        this.selectedLabel = '';
+        /** Tooltip on the column picker trigger. */
+        this.columnsLabel = 'Columns';
+        /** Text of the button that restores the declared column layout. */
+        this.resetLabel = 'Reset';
+        /** Accessible name of a row's expand toggle. */
+        this.expandLabel = 'Toggle row';
+        /** Accessible name of a row's drag grip. */
+        this.reorderLabel = 'Drag to reorder';
+        /**
+         * `none` makes headers inert whatever the column says; `client` sorts the `rows` prop itself;
+         * `server` offers the affordance and only emits `sortChange` for the consumer to reload.
+         */
+        this.sortMode = 'none';
+        /** Active sort, as `asc(field)` / `desc(field)` or an object. */
+        this.sortBy = '';
+        /** `multiple` renders checkboxes, `single` renders radios. */
+        this.selection = 'none';
+        /** Values of the selected rows. */
+        this.selected = [];
+        /** Whether rows expand, and whether more than one may be open. */
+        this.expandMode = 'none';
+        /** Values of the expanded rows. */
+        this.expanded = [];
+        /** `client` slices the `rows` prop; `server` only emits `pageChange`. */
+        this.paginationMode = 'none';
+        /** Current page, 1-based. */
+        this.page = 1;
+        /** Rows per page. */
+        this.pageSize = 10;
+        /** Total row count, for `server` pagination. */
+        this.total = 0;
+        /** Page size choices. Accepts a comma-separated attribute. */
+        this.pageSizeOptions = [10, 20, 30, 40, 50, 100];
+        /**
+         * Allows dragging column edges. Off by default: no handle is rendered and nothing is bound
+         * until it is switched on. A column may switch itself off, never on.
+         */
+        this.resizable = false;
+        /** Allows dragging column headers into a new order. Off by default, like `resizable`. */
+        this.reorderable = false;
+        /**
+         * Allows dragging rows into a new order. Off by default: nothing is bound and no handle is
+         * rendered until it is switched on.
+         */
+        this.rowReorderable = false;
+        /** Whether the whole row drags, or only a grip in a leading control cell. */
+        this.rowReorderHandle = 'icon';
+        /** Keeps the header visible while the body scrolls. */
+        this.stickyHeader = false;
+        /**
+         * Width below which the table scrolls instead of squeezing, at any viewport. Left unset, a table
+         * only stops squeezing below 1180px, where it scrolls at the width its columns declared.
+         */
+        this.minWidth = 0;
+        /** Persists the column layout under this key. Empty means the layout is not remembered. */
+        this.storageKey = '';
+        /** Scopes the stored layout to a user. */
+        this.storageOwner = 'anonymous';
+        /** Controlled column layout. Overrides whatever is stored. */
+        this.layout = null;
+        /** Locale used for sorting and cell formatting. Falls back to the nearest `[lang]` ancestor. */
+        this.locale = '';
+        this.columnState = [];
+        this.sortState = null;
+        this.selectedValues = [];
+        this.expandedValues = [];
+        this.layoutPending = false;
+        this.columnDragging = false;
+        this.dragOverId = '';
+        this.dropRowIndex = -1;
+        this.slottedRowCount = 0;
+        this.derivedTracks = [];
+        this.hasSlottedHeader = false;
+        this.hasSlottedHeading = false;
+        this.hasSlottedEmpty = false;
+        this.overflowing = false;
+        this.declared = [];
+        this.declaredSignature = '';
+        /** Whether the columns came from a slotted header rather than the `columns` prop. */
+        this.fromMarkup = false;
+        this.rowData = [];
+        this.seededExpanded = false;
+        // Only rows this table collapsed are re-shown, so a consumer's own [hidden] is left alone.
+        this.collapsed = new WeakSet();
+        this.dragRowIndex = -1;
+        this.layoutToken = 0;
+        this.dragColumnId = '';
+        /**
+         * A declared width is a floor, so columns that cannot fit overflow rather than squeeze. The table
+         * scrolls them into reach instead of letting them hang outside the block they were given.
+         */
+        this.measureOverflow = () => {
+            if (!this.scrollEl)
+                return;
+            const overflowing = this.scrollEl.scrollWidth - this.scrollEl.clientWidth > 1;
+            if (overflowing !== this.overflowing)
+                this.overflowing = overflowing;
+        };
+        this.toggleSort = (column) => {
+            var _a;
+            // A finished column drag still fires a click on the header — that must not sort it.
+            if (!this.isSortable(column) || this.columnDragging)
+                return;
+            const name = sortName(column);
+            const direction = nextSortDirection(((_a = this.sortState) === null || _a === void 0 ? void 0 : _a.name) === name ? this.sortState.direction : null);
+            this.sortState = { name, direction };
+            this.sortChange.emit(this.sortState);
+        };
+        this.resizeStart = (event, column, handle) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const shown = this.visible;
+            const index = shown.indexOf(column);
+            // Trading with a neighbour keeps the total, so the table never stops filling its container.
+            const pairIndex = index + 1 < shown.length ? index + 1 : index - 1;
+            const pair = shown[pairIndex];
+            const cells = this.headerCells();
+            const startWidth = cells[index].getBoundingClientRect().width;
+            const pairStart = pair ? cells[pairIndex].getBoundingClientRect().width : 0;
+            const startX = event.clientX;
+            const offset = this.leadingTracks.length;
+            let width = startWidth;
+            let pairWidth = pairStart;
+            handle.setPointerCapture(event.pointerId);
+            // Written straight onto the grid: a re-render per pointermove stutters on a full page.
+            const move = (moveEvent) => {
+                var _a;
+                width = clampWidth(startWidth + moveEvent.clientX - startX, column);
+                if (pair) {
+                    // The neighbour's own floor caps the drag, so neither column is squeezed past its minimum.
+                    pairWidth = clampWidth(pairStart - (width - startWidth), pair);
+                    width = clampWidth(startWidth + (pairStart - pairWidth), column);
+                }
+                const tracks = buildColumnTracks(this.columnState, this.leadingTracks, this.trailingTracks);
+                tracks[index + offset] = `${width}px`;
+                if (pair)
+                    tracks[pairIndex + offset] = `${pairWidth}px`;
+                (_a = this.gridEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('--xv-table-columns', tracks.join(' '));
+            };
+            const stop = () => {
+                handle.removeEventListener('pointermove', move);
+                handle.removeEventListener('pointerup', stop);
+                handle.removeEventListener('pointercancel', stop);
+                this.columnState = this.columnState.map(item => {
+                    if (item.id === column.id)
+                        return Object.assign(Object.assign({}, item), { width });
+                    if (pair && item.id === pair.id)
+                        return Object.assign(Object.assign({}, item), { width: pairWidth });
+                    return item;
+                });
+                this.commitLayout();
+            };
+            handle.addEventListener('pointermove', move);
+            handle.addEventListener('pointerup', stop);
+            handle.addEventListener('pointercancel', stop);
+        };
+        this.resizeReset = (column) => {
+            var _a;
+            const width = (_a = this.declared.find(item => item.id === column.id)) === null || _a === void 0 ? void 0 : _a.width;
+            this.columnState = this.columnState.map(item => (item.id === column.id ? Object.assign(Object.assign({}, item), { width }) : item));
+            this.commitLayout();
+        };
+        this.headPointerDown = (event) => {
+            const hit = this.headerCellFrom(event);
+            if (!hit)
+                return;
+            const path = event.composedPath();
+            if (!path.some(node => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains('resize'); }))
+                return;
+            this.resizeStart(event, hit.column, event.composedPath()[0]);
+        };
+        this.headKeyDown = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            const hit = this.headerCellFrom(event);
+            if (!hit)
+                return;
+            event.preventDefault();
+            this.toggleSort(hit.column);
+        };
+        this.headDblClick = (event) => {
+            const path = event.composedPath();
+            if (!path.some(node => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains('resize'); }))
+                return;
+            const hit = this.headerCellFrom(event);
+            if (hit)
+                this.resizeReset(hit.column);
+        };
+        this.headDragStart = (event) => {
+            const hit = this.headerCellFrom(event);
+            if (hit)
+                this.dragStart(event, hit.column);
+        };
+        this.headDragOver = (event) => {
+            const hit = this.headerCellFrom(event);
+            if (hit)
+                this.dragOver(event, hit.column, hit.cell);
+        };
+        this.headDrop = (event) => {
+            const hit = this.headerCellFrom(event);
+            if (hit)
+                this.drop(event, hit.column);
+        };
+        this.dragStart = (event, column) => {
+            var _a;
+            this.dragColumnId = column.id;
+            this.columnDragging = true;
+            (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('text/plain', column.id);
+            if (event.dataTransfer)
+                event.dataTransfer.effectAllowed = 'move';
+        };
+        this.dragOver = (event, column, cell) => {
+            if (!this.dragColumnId || column.id === this.dragColumnId)
+                return;
+            if (!columnAllows(column, this.reorderable, 'reorderable'))
+                return;
+            event.preventDefault();
+            if (this.dragOverId === column.id)
+                return;
+            this.dragOverId = column.id;
+            this.headerCells().forEach(item => item.classList.toggle('drag-over', item === cell));
+        };
+        this.drop = (event, column) => {
+            event.preventDefault();
+            this.clearDragOver();
+            if (!this.dragColumnId || column.id === this.dragColumnId)
+                return;
+            if (!columnAllows(column, this.reorderable, 'reorderable'))
+                return;
+            const shown = this.visible;
+            const from = shown.findIndex(item => item.id === this.dragColumnId);
+            const to = shown.findIndex(item => item.id === column.id);
+            if (from < 0 || to < 0)
+                return;
+            this.columnState = mergeVisibleOrder(this.columnState, moveItem(shown, from, to));
+            this.commitLayout();
+        };
+        this.dragEnd = () => {
+            this.dragColumnId = '';
+            this.clearDragOver();
+            // The trailing click lands after dragend, so the sort guard has to outlive the gesture.
+            setTimeout(() => (this.columnDragging = false), 0);
+        };
+        this.toggleSelectAll = () => {
+            // Tri-state: a partial box clears what is picked rather than completing the set.
+            this.setSelection(this.selectedValues.length ? [] : this.rowValues());
+        };
+        this.toggleColumn = (column) => {
+            this.columnState = this.columnState.map(item => item.id === column.id ? Object.assign(Object.assign({}, item), { hidden: !item.hidden }) : item);
+            this.commitLayout();
+        };
+        this.rowDragStart = (event) => {
+            const row = this.rowFrom(event);
+            if (!row || row.group || row.disabled)
+                return;
+            this.dragRowIndex = this.bodyRows().indexOf(row);
+            if (this.dragRowIndex < 0)
+                return;
+            row.classList.add('is-dragging');
+            if (event.dataTransfer)
+                event.dataTransfer.effectAllowed = 'move';
+        };
+        this.rowDragOver = (event) => {
+            if (this.dragRowIndex < 0)
+                return;
+            const row = this.rowFrom(event);
+            if (!row || row.group)
+                return;
+            const index = this.bodyRows().indexOf(row);
+            if (index < 0 || index === this.dragRowIndex)
+                return;
+            event.preventDefault();
+            if (index === this.dropRowIndex)
+                return;
+            this.dropRowIndex = index;
+            // The line marks the edge the row will land against, so its side follows the drag direction.
+            this.bodyRows().forEach((item, i) => {
+                item.classList.toggle('drop-above', i === index && index < this.dragRowIndex);
+                item.classList.toggle('drop-below', i === index && index > this.dragRowIndex);
+            });
+        };
+        this.rowDrop = (event) => {
+            if (this.dragRowIndex < 0)
+                return;
+            event.preventDefault();
+            const to = this.dropRowIndex;
+            const from = this.dragRowIndex;
+            this.rowDragEnd();
+            if (to < 0 || from === to)
+                return;
+            this.rowOrderChange.emit({ from, to });
+        };
+        this.rowDragEnd = () => {
+            this.bodyRows().forEach(row => row.classList.remove('is-dragging', 'drop-above', 'drop-below'));
+            this.dragRowIndex = -1;
+            this.dropRowIndex = -1;
+        };
+        /** One listener for the whole body instead of a child event per row. */
+        this.bodyChange = (event) => {
+            var _a;
+            const path = event.composedPath();
+            const row = path.find(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === XV_TABLE_ROW_TAG; });
+            if (!row || row.disabled)
+                return;
+            // A checkbox the consumer put in a cell is its own; only the row's own control selects a row.
+            const control = path.find(node => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains('control_input'); });
+            if (!control || !((_a = row.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(control)))
+                return;
+            event.stopPropagation();
+            if (row.hasAttribute('header'))
+                return this.toggleSelectAll();
+            this.toggleRowSelection(row.value);
+        };
+        this.gridClick = (event) => {
+            const path = event.composedPath();
+            if (path.some(node => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.classList) === null || _a === void 0 ? void 0 : _a.contains('resize'); }))
+                return;
+            const header = this.headerCellFrom(event);
+            if (header)
+                return this.toggleSort(header.column);
+            this.bodyClick(event);
+        };
+        this.bodyClick = (event) => {
+            const path = event.composedPath();
+            const row = path.find(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === XV_TABLE_ROW_TAG; });
+            if (!row || row.disabled)
+                return;
+            if (path.some(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.getAttribute) === null || _a === void 0 ? void 0 : _a.call(node, 'part')) === 'expand-button'; })) {
+                this.toggleExpanded(row.value);
+                return;
+            }
+            if (!this.rowClickable)
+                return;
+            // event.target is retargeted to the row at this boundary, so the path is the only honest check.
+            if (path.some(node => { var _a; return node !== row && ((_a = node === null || node === void 0 ? void 0 : node.matches) === null || _a === void 0 ? void 0 : _a.call(node, INTERACTIVE)); }))
+                return;
+            this.rowClick.emit({ value: row.value, index: this.renderedRows().indexOf(row) });
+        };
+        this.paginationChanged = (event) => {
+            event.stopPropagation();
+            this.page = event.detail.page || this.page;
+            this.pageSize = event.detail.itemsPerPage || this.pageSize;
+            this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+        };
+    }
+    componentWillLoad() {
+        this.declared = parseProp(this.columns, []);
+        this.rowData = parseProp(this.rows, []);
+        this.columnState = this.declared.map(column => (Object.assign({}, column)));
+        this.sortState = parseSortBy(this.sortBy);
+        this.selectedValues = parseProp(this.selected, []);
+        this.expandedValues = parseProp(this.expanded, []);
+        this.slottedRowCount = this.slottedRows().length;
+        if (this.storageKey || this.layout)
+            this.restoreLayout();
+    }
+    componentDidLoad() {
+        // Bound imperatively: a custom event has no typed JSX handler on a plain element.
+        this.el.addEventListener(CHECKBOX_EVENT, this.bodyChange);
+        // Absent in mock-doc and in hydrate builds; componentDidRender still keeps the rows in sync.
+        if (typeof MutationObserver !== 'undefined') {
+            this.rowObserver = new MutationObserver(records => {
+                // A framework re-rendering its own markup inside a cell must not trigger a full resync.
+                if (!records.some(record => this.touchesStructure(record)))
+                    return;
+                this.syncStructure();
+                this.syncRows();
+            });
+            this.rowObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+                // A framework can reflect these after the table has already read the header once.
+                attributes: true,
+                attributeFilter: ['column-id', 'width', 'sortable', 'hideable', 'parent'],
+            });
+        }
+        // Fires after layout, so reading the two widths costs no extra reflow.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.sizeObserver = new ResizeObserver(() => this.measureOverflow());
+            if (this.scrollEl)
+                this.sizeObserver.observe(this.scrollEl);
+            if (this.gridEl)
+                this.sizeObserver.observe(this.gridEl);
+        }
+        this.syncStructure();
+        this.syncRows();
+    }
+    componentDidRender() {
+        this.syncRows();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.el.removeEventListener(CHECKBOX_EVENT, this.bodyChange);
+        (_a = this.rowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.rowObserver = undefined;
+        (_b = this.sizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.sizeObserver = undefined;
     }
-    handleCheckedChange({ detail }) {
-        if (detail.header || detail.expandable)
+    columnsChanged() {
+        this.declared = parseProp(this.columns, []);
+        this.restoreLayout();
+    }
+    layoutInputChanged() {
+        this.restoreLayout();
+    }
+    sortByChanged() {
+        this.sortState = parseSortBy(this.sortBy);
+    }
+    selectedChanged() {
+        this.selectedValues = parseProp(this.selected, []);
+    }
+    expandedChanged() {
+        this.expandedValues = parseProp(this.expanded, []);
+    }
+    rowsChanged() {
+        this.rowData = parseProp(this.rows, []);
+    }
+    /** Selects every selectable row. */
+    async selectAll() {
+        this.setSelection(this.rowValues());
+    }
+    /** Clears the selection. */
+    async clearSelection() {
+        this.setSelection([]);
+    }
+    /** Drops the stored layout and returns to the declared columns. */
+    async resetLayout() {
+        this.columnState = this.declared.map(column => (Object.assign({}, column)));
+        await deleteLayout(this.storageOwner, this.storageKey);
+        this.layoutChange.emit(diffLayout(this.columnState, this.declared));
+    }
+    /** The layout as it would be stored: only the deviations from the declared columns. */
+    async getLayout() {
+        return diffLayout(this.columnState, this.declared);
+    }
+    async restoreLayout() {
+        const token = ++this.layoutToken;
+        const controlled = parseProp(this.layout, null);
+        if (controlled) {
+            this.columnState = applyLayout(this.declared, controlled);
+            return;
+        }
+        if (!this.storageKey) {
+            this.columnState = this.declared.map(column => (Object.assign({}, column)));
             return;
-        if (detail.checked) {
-            this.selected.set(detail.name, detail);
         }
-        else {
-            this.selected.delete(detail.name);
+        // Painting declared widths and correcting them afterwards is visible, so the body waits.
+        this.layoutPending = true;
+        const stored = await readLayout(this.storageOwner, this.storageKey);
+        if (token !== this.layoutToken)
+            return;
+        this.columnState = applyLayout(this.declared, stored);
+        this.layoutPending = false;
+    }
+    commitLayout() {
+        const next = diffLayout(this.columnState, this.declared);
+        void writeLayout(this.storageOwner, this.storageKey, next);
+        this.layoutChange.emit(next);
+    }
+    get localeTag() {
+        var _a;
+        return this.locale || ((_a = this.el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang')) || 'de';
+    }
+    get visible() {
+        return visibleColumns(this.columnState);
+    }
+    get hasSelection() {
+        return this.selection !== 'none';
+    }
+    get hasExpand() {
+        return this.expandMode !== 'none';
+    }
+    get template() {
+        if (this.columnState.length) {
+            return buildColumnTemplate(this.columnState, this.leadingTracks, this.trailingTracks);
+        }
+        // No columns declared: a plain table takes its structure from the markup itself.
+        return [...this.leadingTracks.map(w => `${w}px`), ...this.derivedTracks, ...this.trailingTracks.map(w => `${w}px`)].join(' ');
+    }
+    /** Grip, then the expand toggle, then selection — one track each, in render order. */
+    get leadingTracks() {
+        return [
+            ...(this.rowReorderable ? [XV_TABLE_CONTROL_WIDTH] : []),
+            ...(this.hasExpand ? [XV_TABLE_CONTROL_WIDTH] : []),
+            ...(this.hasSelection ? [XV_TABLE_CONTROL_WIDTH] : []),
+        ];
+    }
+    get trailingTracks() {
+        return [];
+    }
+    get dataRows() {
+        const all = this.rowData;
+        const sorted = this.sortMode === 'client' && this.sortState
+            ? sortRows(all, this.columnBySortName(this.sortState.name), this.sortState.direction, this.localeTag)
+            : all;
+        return this.paginationMode === 'client' ? pageSlice(sorted, this.page, this.pageSize) : sorted;
+    }
+    get rowTotal() {
+        if (this.paginationMode === 'server')
+            return this.total;
+        const slotted = this.topRows(this.slottedRows()).length;
+        return slotted || this.rowData.length;
+    }
+    // Nothing to show is not the same as something to say: a consumer that draws its own empty state
+    // next to the table would otherwise get an empty frame above it.
+    get isEmpty() {
+        return !this.loading && !this.rowTotal && (!!this.emptyLabel || this.hasSlottedEmpty);
+    }
+    columnBySortName(name) {
+        return this.columnState.find(column => sortName(column) === name) || null;
+    }
+    touchesStructure(record) {
+        // The filter already narrows attributes to the ones that shape a column.
+        if (record.type === 'attributes')
+            return true;
+        const structural = (node) => {
+            var _a;
+            const tag = (_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            // Anything that fills a slot shapes the table; markup inside a cell does not.
+            return tag === XV_TABLE_ROW_TAG || tag === XV_TABLE_CELL_TAG || !!node.slot;
+        };
+        return (Array.from(record.addedNodes).some(structural) || Array.from(record.removedNodes).some(structural));
+    }
+    isBodyRow(row) {
+        return !row.hasAttribute('header') && row.getAttribute('slot') !== 'footer';
+    }
+    /** Body rows only — these are the ones selection and expansion count. */
+    slottedRows() {
+        return this.slottedRowsAll().filter(row => this.isBodyRow(row));
+    }
+    /** A page is counted in top-level rows: a group and its children travel together. */
+    topRows(rows) {
+        return rows.filter(row => this.isBodyRow(row) && !this.parentOf(row));
+    }
+    /** Every slotted row, footer included: they all need the column tracks lined up. */
+    slottedRowsAll() {
+        return Array.from(this.el.children).filter(child => child.tagName.toLowerCase() === XV_TABLE_ROW_TAG);
+    }
+    /** Every row on screen, whichever mode produced it. */
+    renderedRows() {
+        var _a;
+        const slotted = this.slottedRows();
+        if (slotted.length)
+            return slotted;
+        return Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${XV_TABLE_ROW_TAG}:not([header])`)) || []);
+    }
+    rowValues() {
+        const slotted = this.slottedRows();
+        if (slotted.length) {
+            const parents = this.parentValues(slotted);
+            return slotted
+                .filter(row => !this.isDisabled(row))
+                .map(row => row.value)
+                .filter(value => !parents.has(String(value)));
+        }
+        return this.dataRows.map(row => row === null || row === void 0 ? void 0 : row[this.rowKey]);
+    }
+    /** A disabled row is not selectable, so it stays out of every selection set. */
+    isDisabled(row) {
+        return !!row.disabled || row.hasAttribute('disabled');
+    }
+    /** `parent` may arrive as an attribute or as a property, depending on the consumer. */
+    parentOf(row) {
+        return String(row.parent || row.getAttribute('parent') || '');
+    }
+    parentValues(rows) {
+        return new Set(rows.map(row => this.parentOf(row)).filter(Boolean));
+    }
+    childValuesOf(value) {
+        return this.buildTree(this.slottedRows()).get(String(value)) || [];
+    }
+    /** One walk of the rows answers every parent/child question asked during a sync. */
+    buildTree(rows) {
+        const children = new Map();
+        rows.forEach(row => {
+            const parent = this.parentOf(row);
+            if (!parent)
+                return;
+            const values = children.get(parent) || [];
+            if (!this.isDisabled(row))
+                values.push(row.value);
+            children.set(parent, values);
+        });
+        return children;
+    }
+    /**
+     * Child rows declare their parent by value. They stay siblings in the grid — that is what keeps
+     * them in the table's columns, rather than a nested table inside a panel.
+     */
+    syncRowTree(rows, children, expanded) {
+        const page = this.pageWindow(rows);
+        const groups = new Map();
+        rows.forEach(row => {
+            var _a;
+            const value = String((_a = row.value) !== null && _a !== void 0 ? _a : '');
+            if (value && !this.parentOf(row))
+                groups.set(value, row);
+        });
+        rows.forEach(row => {
+            var _a;
+            const props = row;
+            const parent = this.parentOf(row);
+            const value = String((_a = props.value) !== null && _a !== void 0 ? _a : '');
+            if (parent) {
+                const group = groups.get(parent);
+                // A child follows its group: it shows when the group is open and on the current page.
+                const show = expanded.has(parent) && (!page || (!!group && page.has(group)));
+                this.showRow(row, show);
+                props.expandable = false;
+                return;
+            }
+            const hasChildren = children.has(value);
+            const panel = !!row.querySelector('[slot="expand"]');
+            // a row is expandable when it has children, or content for the panel
+            props.expandable = hasChildren || panel;
+            props.hasPanel = panel;
+            row.classList.toggle('has-children', hasChildren);
+            this.showRow(row, !page || !this.isBodyRow(row) || page.has(row));
+        });
+    }
+    /** Only rows this table hid are shown again, so a consumer's own `hidden` survives a sync. */
+    showRow(row, show) {
+        if (!show) {
+            this.collapsed.add(row);
+            row.hidden = true;
+            return;
         }
-        this.selectedCount = this.selected.size;
+        if (this.collapsed.delete(row))
+            row.hidden = false;
+    }
+    /** The rows of the current page, or null while the table is not the one paging. */
+    pageWindow(rows) {
+        if (this.paginationMode !== 'client')
+            return null;
+        const top = this.topRows(rows);
+        if (!top.length)
+            return null;
+        const size = this.pageSize || 10;
+        const start = (clampPage(this.page, totalPages(top.length, size)) - 1) * size;
+        return new Set(top.slice(start, start + size));
+    }
+    /** Cells are written in declared order; hiding and reordering only move them visually. */
+    syncCells(row, order) {
+        const cells = Array.from(row.children).filter(cell => cell.getAttribute('slot') !== 'expand');
+        cells.forEach((cell, index) => {
+            var _a;
+            const column = this.declared[index];
+            if (!column)
+                return;
+            const current = this.columnState.find(item => item.id === column.id);
+            const props = cell;
+            props.columnId = column.id;
+            if (column.align)
+                props.align = column.align;
+            if (column.overflow)
+                props.overflow = column.overflow;
+            if (column.clampLines)
+                props.clampLines = column.clampLines;
+            cell.style.order = String((_a = order.get(column.id)) !== null && _a !== void 0 ? _a : index);
+            cell.hidden = !!(current === null || current === void 0 ? void 0 : current.hidden);
+        });
+    }
+    /** Structure writes @State, so it runs outside the render cycle: on load and on childList. */
+    syncStructure() {
+        const rows = this.slottedRowsAll();
+        this.slottedRowCount = this.slottedRows().length;
+        // The heading block is not rendered at all unless something fills it, and a slotted title is
+        // just as much a title as the prop.
+        const heading = Array.from(this.el.children).some(child => child.slot === 'label' || child.slot === 'description');
+        if (this.hasSlottedHeading !== heading)
+            this.hasSlottedHeading = heading;
+        const empty = Array.from(this.el.children).some(child => child.slot === 'empty');
+        if (this.hasSlottedEmpty !== empty)
+            this.hasSlottedEmpty = empty;
+        this.seedExpanded(rows);
+        this.syncDerivedTracks(rows);
+    }
+    /**
+     * A row may declare itself open in markup. Read once, before the table starts writing the
+     * attribute itself — after that there is no telling a declared value from a toggled one.
+     */
+    seedExpanded(rows) {
+        // Rows that arrive from an HTTP call are not there on the first pass, so seeding waits for them.
+        if (this.seededExpanded || !rows.length)
+            return;
+        this.seededExpanded = true;
+        const open = rows
+            .filter(row => row.hasAttribute('expanded'))
+            .map(row => row.value)
+            .filter(value => value !== '' && value !== undefined);
+        const merged = [...this.expandedValues, ...open.filter(v => !this.expandedValues.includes(v))];
+        if (merged.length !== this.expandedValues.length)
+            this.expandedValues = merged;
+    }
+    /** Pushing props onto children is safe during render; nothing here touches @State. */
+    syncRows() {
+        const rows = this.slottedRowsAll();
+        const tree = this.buildTree(rows);
+        // A value may reach the table as a number and come back from an attribute as a string.
+        const expanded = new Set(this.expandedValues.map(String));
+        const selected = new Set(this.selectedValues.map(String));
+        const order = new Map(this.columnState.map((column, index) => [column.id, index]));
+        this.syncRowTree(rows, tree, expanded);
+        this.syncHeaderCells(rows.find(row => row.hasAttribute('header')));
+        rows.forEach(row => {
+            const value = row.value;
+            const props = row;
+            props.selectionMode = this.selection;
+            props.expandMode = this.expandMode;
+            props.size = this.size;
+            props.hover = this.hover;
+            props.rowReorderable = this.rowReorderable;
+            props.rowReorderHandle = this.rowReorderHandle;
+            props.expandLabel = this.expandLabel;
+            props.reorderLabel = this.reorderLabel;
+            if (row.hasAttribute('header')) {
+                // A slotted header carries select-all too, so it reflects the whole table.
+                const all = this.rowValues();
+                const picked = this.selectedValues.length;
+                props.selected = !!picked && picked === all.length;
+                props.partial = !!picked && picked < all.length;
+                props.selectable = all.length > 0;
+                this.syncCells(row, order);
+                return;
+            }
+            const children = tree.get(String(value)) || [];
+            if (children.length) {
+                const picked = children.filter(child => selected.has(String(child)));
+                props.selected = picked.length === children.length;
+                props.partial = !!picked.length && picked.length < children.length;
+            }
+            else {
+                props.selected = selected.has(String(value));
+                props.partial = false;
+            }
+            props.expanded = expanded.has(String(value));
+            this.syncCells(row, order);
+        });
+    }
+    /** Sorting is offered only when a mode asks for it, so `none` and `server` cannot look alike. */
+    isSortable(column) {
+        return !!column.sortable && this.sortMode !== 'none';
+    }
+    /**
+     * A slotted header is the consumer's markup, so the table pushes the column state onto its cells
+     * rather than rendering a second header of its own.
+     */
+    syncHeaderCells(header) {
+        if (!header)
+            return;
+        const cells = Array.from(header.children).filter(child => child.tagName.toLowerCase() === XV_TABLE_CELL_TAG);
+        cells.forEach((cell, index) => {
+            var _a;
+            const declared = cell.columnId || cell.getAttribute('column-id');
+            const column = declared
+                ? this.columnState.find(item => item.id === declared)
+                : this.visible[index];
+            const props = cell;
+            props.header = true;
+            props.reorderLabel = this.reorderLabel;
+            if (!column) {
+                props.resizable = false;
+                props.reorderable = false;
+                return;
+            }
+            const sortable = this.isSortable(column);
+            props.columnId = column.id;
+            // A markup header declares `sortable` itself. Writing the table's own idea of it back would
+            // overwrite what the consumer just bound, and the table would then read its own answer.
+            if (!this.fromMarkup)
+                props.sortable = sortable;
+            props.sortDirection =
+                sortable && ((_a = this.sortState) === null || _a === void 0 ? void 0 : _a.name) === sortName(column) ? this.sortState.direction : '';
+            props.resizable = columnAllows(column, this.resizable, 'resizable');
+            props.reorderable = columnAllows(column, this.reorderable, 'reorderable');
+            if (column.headerAlign)
+                props.align = column.headerAlign;
+            cell.draggable = props.reorderable;
+        });
+    }
+    /** Reads the column shape out of the markup when no `columns` prop was given. */
+    syncDerivedTracks(rows) {
+        const header = rows.find(row => row.hasAttribute('header')) || null;
+        if (this.hasSlottedHeader !== !!header)
+            this.hasSlottedHeader = !!header;
+        // Re-read the header while it is the declaration: a framework sets `sortable`, `hideable` or a
+        // width as properties, and those can land after the first read. `columns` wins when it is given.
+        if (header && (this.fromMarkup || !this.declared.length))
+            this.deriveColumns(header);
+        if (this.columnState.length)
+            return;
+        const source = header || rows[0];
+        if (!source)
+            return;
+        const cells = Array.from(source.children).filter(cell => cell.getAttribute('slot') !== 'expand');
+        const widths = cells.map(cell => String(cell.width || cell.getAttribute('width') || ''));
+        // Every width fixed leaves nothing to absorb the slack, so they share it by weight.
+        const share = widths.length > 0 && widths.every(width => /^[0-9.]+$/.test(width));
+        const tracks = widths.map(width => {
+            if (!width)
+                return `minmax(${XV_TABLE_MIN_COLUMN_WIDTH}px,1fr)`;
+            if (!/^[0-9.]+$/.test(width))
+                return width;
+            return share ? `minmax(${width}px,${width}fr)` : `${width}px`;
+        });
+        if (tracks.join(' ') !== this.derivedTracks.join(' '))
+            this.derivedTracks = tracks;
+    }
+    /**
+     * With no `columns` prop the header cells are the declaration: their attributes carry the id,
+     * width and switches, so a markup-only table still resizes, reorders and remembers its layout.
+     */
+    deriveColumns(header) {
+        const cells = Array.from(header.children).filter(child => child.tagName.toLowerCase() === XV_TABLE_CELL_TAG);
+        if (!cells.length)
+            return;
+        const taken = new Set();
+        const derived = cells.map((cell, index) => {
+            var _a;
+            // The property wins over the attribute: a framework binds properties, and it may have done so
+            // before the cell upgraded. The attribute is the fallback for plain markup.
+            const props = cell;
+            const flag = (name, value) => (value !== null && value !== void 0 ? value : cell.hasAttribute(name));
+            // `240` and `240px` are both pixels; `25%`, `auto` or `12rem` land in the track as written.
+            const width = String(props.width || cell.getAttribute('width') || '');
+            const pixels = /^([0-9.]+)(px)?$/.exec(width);
+            // Two columns may honestly carry the same name — a details and a delete cell both keyed by
+            // `id`. Ids address a column, so a repeat is made unique here rather than silently sharing
+            // a track with the column it collides with.
+            let id = props.columnId || cell.getAttribute('column-id') || `col-${index}`;
+            while (taken.has(id))
+                id = `${id}-${index}`;
+            taken.add(id);
+            return {
+                id,
+                label: ((_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
+                sortable: flag('sortable', props.sortable),
+                hideable: flag('hideable', props.hideable),
+                width: !width ? undefined : pixels ? Number(pixels[1]) : width,
+            };
+        });
+        // Compared on everything the header declares, not only the ids: a framework sets `sortable` as
+        // a property, and it may land after the table first read the markup. Ids alone would freeze
+        // that first reading and quietly drop the sort affordance the consumer asked for.
+        const signature = derived.map(c => `${c.id}|${c.sortable}|${c.hideable}|${c.width}`).join();
+        if (signature === this.declaredSignature)
+            return;
+        this.declaredSignature = signature;
+        this.fromMarkup = true;
+        this.declared = derived;
+        this.columnState = derived.map(column => (Object.assign({}, column)));
+        if (this.storageKey)
+            this.restoreLayout();
     }
-    setColsSizeTemplate() {
+    /** Every header cell on screen, whether the table rendered it or the consumer slotted it. */
+    headerCells() {
         var _a;
-        if (!this.colsSize || !((_a = this.colsSize) === null || _a === void 0 ? void 0 : _a.length))
+        const row = this.slottedRowsAll().find(item => item.hasAttribute('header')) ||
+            ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${XV_TABLE_ROW_TAG}[header]`));
+        if (!row)
+            return [];
+        return Array.from(row.children).filter(
+        // Hidden cells are left out: these are indexed against the visible columns.
+        child => child.tagName.toLowerCase() === XV_TABLE_CELL_TAG && !child.hidden);
+    }
+    /** A header cell knows its column by id, or failing that by its position in the row. */
+    columnOf(cell) {
+        const id = cell.columnId || cell.getAttribute('column-id');
+        if (id)
+            return this.columnState.find(column => column.id === id) || null;
+        const index = this.headerCells().indexOf(cell);
+        return this.visible[index] || null;
+    }
+    headerCellFrom(event) {
+        const path = event.composedPath();
+        const cell = path.find(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === XV_TABLE_CELL_TAG && node.hasAttribute('header'); });
+        if (!cell)
+            return null;
+        const column = this.columnOf(cell);
+        return column ? { cell, column } : null;
+    }
+    clearDragOver() {
+        this.dragOverId = '';
+        this.headerCells().forEach(item => item.classList.remove('drag-over'));
+    }
+    setSelection(values) {
+        this.selectedValues = values;
+        const all = !!values.length && values.length === this.rowValues().length;
+        this.selectedChange.emit({ values, all, partial: !!values.length && !all });
+    }
+    toggleRowSelection(value) {
+        const children = this.childValuesOf(value);
+        if (children.length) {
+            const picked = children.some(child => this.selectedValues.includes(child));
+            this.setSelection(picked
+                ? this.selectedValues.filter(item => !children.includes(item))
+                : [...this.selectedValues, ...children]);
+            return;
+        }
+        if (this.selection === 'single') {
+            this.setSelection(this.selectedValues.includes(value) ? [] : [value]);
             return;
-        this.el.style.setProperty('--xv-table-cols-template', this.colsSize
-            .map((v) => {
-            if (!v)
-                return 'minmax(0, 1fr)';
-            if (v === 'auto')
-                return 'minmax(0, auto)';
-            return `calc(${v} - ${50 / this.colsSize.length}px)`;
-        })
-            .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
+        }
+        const next = this.selectedValues.includes(value)
+            ? this.selectedValues.filter(item => item !== value)
+            : [...this.selectedValues, value];
+        this.setSelection(next);
     }
-    render() {
-        return (h(Host, { key: '1f954a0f71091fec58ed541ab9b71e07e756acf2', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'cc4af9285051a8ce0eda8df5d306b9834815513c', name: "title" }, !!this.el.title && h("h2", { key: 'd74ca7c913d6b5239acce4a6e154dae57a325dd4', class: "xv-table-title" }, this.el.title)), h("slot", { key: '00df66a0aae78ac291ed818f123fa508e7437b91', name: "toolbar" }), h("div", { key: 'b5d81c782aa533dc591ec77ffe4fc71cffeafc86', class: "xv-table" }, h("div", { key: 'efa26ad85d880de121d53ecae616f0b0468b8c74', class: "batch-actions" }, h(Fragment, { key: '4a808f4de6683dd524057c6199c2e80b11860d8d' }, h("div", { key: 'ae5cce54e37780f32724e7ff9ef2549e5020b7f7', class: "batch-actions_content" }, h("slot", { key: 'f5b19fc73ca2e7cb1af08fcf23d42c817d531870', name: "batch" })), h("p", { key: '2f445105146d1d2ebb080f76c5bb81848e3e2a43', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '6f41e51583e6d2a5dc076999fee3e573b062ad1f', class: "xv-table_wrapper" }, h("slot", { key: 'acccd9efedf38d59bde44f2f9d6ac2aec0ffa948' }), h("slot", { key: 'db6b9a957e4bc4e670f5c082c999c1931e36b6c1', name: "footer" })), !!this.loading && (h("div", { key: '3096c66919118c66992dd13e7b868c588876974c', class: "xv-table_loading" }, h("xv-loader-v2", { key: 'f469390775597fcfb9787749a915098eb0567d64', size: SIZE_VAR.LG }))))));
+    toggleExpanded(value) {
+        const open = this.expandedValues.includes(value);
+        const next = open
+            ? this.expandedValues.filter(item => item !== value)
+            : this.expandMode === 'single'
+                ? [value]
+                : [...this.expandedValues, value];
+        this.expandedValues = next;
+        this.expandedChange.emit({ values: next });
     }
-    componentWillLoad() {
-        this.setColsSizeTemplate();
+    bodyRows() {
+        // A collapsed child is not on screen, so it must not take an index in `rowOrderChange`.
+        return this.renderedRows().filter(row => row.getAttribute('slot') !== 'footer' && !row.hidden);
+    }
+    rowFrom(event) {
+        if (!this.rowReorderable)
+            return null;
+        const path = event.composedPath();
+        return path.find(node => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === XV_TABLE_ROW_TAG; }) || null;
+    }
+    /** The same row and cell components the consumer would write by hand. */
+    renderHead() {
+        const values = this.rowValues();
+        const count = this.selectedValues.length;
+        return (h("xv-table-row", { header: true, part: "head", size: this.size, selectionMode: this.selection, expandMode: this.expandMode, expandable: this.expandMode !== 'none', rowReorderable: this.rowReorderable, rowReorderHandle: this.rowReorderHandle, selected: !!count && count === values.length, partial: !!count && count < values.length, selectable: values.length > 0 }, this.visible.map(column => {
+            var _a;
+            const sortable = this.isSortable(column);
+            const active = sortable && ((_a = this.sortState) === null || _a === void 0 ? void 0 : _a.name) === sortName(column);
+            return (h("xv-table-cell", { key: column.id, header: true, part: "header-cell", columnId: column.id, align: column.headerAlign || 'start', tooltip: column.headerTooltip || '', sortable: sortable, sortDirection: active ? this.sortState.direction : '', resizable: columnAllows(column, this.resizable, 'resizable'), reorderable: columnAllows(column, this.reorderable, 'reorderable'), reorderLabel: this.reorderLabel, ref: element => element && (element.draggable = columnAllows(column, this.reorderable, 'reorderable')) }, column.label));
+        })));
+    }
+    renderDataRow(row, index) {
+        const value = row === null || row === void 0 ? void 0 : row[this.rowKey];
+        return (h("xv-table-row", { key: value !== null && value !== void 0 ? value : index, value: value, size: this.size, hover: this.hover, selectionMode: this.selection, expandMode: this.expandMode, expandable: this.expandMode !== 'none', rowReorderable: this.rowReorderable, rowReorderHandle: this.rowReorderHandle, expandLabel: this.expandLabel, reorderLabel: this.reorderLabel, selected: this.selectedValues.includes(value), expanded: this.expandedValues.includes(value) }, this.visible.map(column => (h("xv-table-cell", { key: column.id, columnId: column.id, align: column.align || 'start', overflow: column.overflow || 'ellipsis', clampLines: column.clampLines || 2 }, formatCell(cellValue(row, column), column, this.localeTag))))));
+    }
+    renderSkeleton() {
+        return Array.from({ length: this.skeletonRows }).map((_, index) => (h("div", { class: "skeleton_row", key: `skeleton-${index}`, "aria-hidden": "true" }, this.visible.map(column => (h("div", { class: "skeleton_cell", key: column.id }, h("span", { class: "skeleton_bar" })))))));
+    }
+    renderColumnPicker() {
+        const hideable = hideableColumns(this.columnState);
+        if (!hideable.length)
+            return null;
+        const changed = isLayoutChanged(diffLayout(this.columnState, this.declared));
+        return (
+        // The picker sits at the right edge, so it opens inward or a container with overflow clips it.
+        h("xv-overflow-menu-v2", { class: "picker", part: "column-picker", position: "right", tooltip: this.columnsLabel }, h("span", { slot: "trigger", class: "picker_trigger" }, h("svg", { viewBox: "0 0 640 512", width: "16", height: "16", role: "img", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M448 80l0 352 128 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L448 80zm-48 0L240 80l0 352 160 0 0-352zM192 432l0-352L64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l128 0zM0 96C0 60.7 28.7 32 64 32l512 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96z" })), changed && h("span", { class: "picker_marker" })), h("div", { class: "picker_list" }, hideable.map(column => (h("xv-checkbox-v2", { key: column.id, class: "picker_item", checked: !column.hidden, label: column.label || column.id, size: this.size, onEventChange: () => this.toggleColumn(column) }))), changed && (h("xv-button-v2", { variant: "tertiary", size: "sm", onClick: () => this.resetLayout() }, this.resetLabel)))));
     }
-    static get is() { return "xv-table-v2"; }
+    render() {
+        const hasHeading = !!this.label || !!this.description || this.hasSlottedHeading;
+        const count = this.selectedValues.length;
+        const composed = !!this.slottedRowCount;
+        const pages = totalPages(this.rowTotal, this.pageSize);
+        return (h(Host, { key: 'c2f1eeb31477c009112ea67964859a06f32fb0be', class: { 'is-dragging': this.columnDragging } }, hasHeading && (h("div", { key: 'b16d5ed6a0ec41e1e93938c136720a9b3f076718', class: "heading", part: "heading" }, h("slot", { key: 'b5597ee8f3e1b43c8a003bf51f0dd1fdea307584', name: "label" }, this.label && h("h3", { key: '7b5c70866bbea7f38bd9ed3f12f5f79abdec9b5b', class: "heading_title", part: "title" }, this.label)), h("slot", { key: 'e3fc65553d7d8afa5617116ef03c0e71c4083092', name: "description" }, this.description && h("p", { key: 'f3545d3da1697eadb58b081db1f63dbc758446a2', class: "heading_description", part: "description" }, this.description)))), h("div", { key: 'b2363cd4706ef813a7986a46e634c7a17c2887e7', class: "bar", part: "bar" }, h("div", { key: 'b4ed99838d302c23e539d3f0aed986d6597cfa97', class: "bar_toolbar", part: "toolbar" }, h("slot", { key: '7dfe5fe111ac94245b57d9b16db98e86df96e14d', name: "toolbar" }), this.renderColumnPicker()), !!count && (h("div", { key: '00e6baa9e59099c688f398f98552e96accfcfdbd', class: "bar_batch", part: "batch" }, h("slot", { key: '719ccca8dc2d5728ceec0fa5953ec45148fbfca7', name: "batch" }), !!this.selectedLabel && (h("span", { key: 'ae71c3c543d5faef29145a32c0cee9f2d9c5441e', class: "bar_count" }, this.selectedLabel.replace('{count}', String(count))))))), h("div", { key: '0739869a681a870c611b50b8cec858bf8c60b2fb', class: { scroll: true, 'scroll--overflowing': this.overflowing }, part: "scroll", ref: element => (this.scrollEl = element) }, h("div", { key: '978390fa1eed594533ac9911eae893cdbcb48f01', class: "grid", part: "grid", role: "table", onPointerDown: this.headPointerDown, onDblClick: this.headDblClick, onKeyDown: this.headKeyDown, onDragStart: this.headDragStart, onDragOver: this.headDragOver, onDrop: this.headDrop, onDragEnd: this.dragEnd, ref: element => (this.gridEl = element), style: {
+                '--xv-table-columns': this.template,
+                // Handed to CSS rather than applied here: a wide table squeezes like a real one, and
+                // only a narrow viewport turns this into the width it scrolls at.
+                '--xv-table-min-width': `${tableMinWidth(this.columnState, this.minWidth, [...this.leadingTracks, ...this.trailingTracks].reduce((a, b) => a + b, 0))}px`,
+            }, onClick: this.gridClick }, !this.hasSlottedHeader && this.renderHead(), h("div", { key: '22295be916a60272a46fe01cf3399b345e274948', class: "body", part: "body", role: "rowgroup", hidden: this.layoutPending, onDragStart: this.rowReorderable ? this.rowDragStart : undefined, onDragOver: this.rowReorderable ? this.rowDragOver : undefined, onDrop: this.rowReorderable ? this.rowDrop : undefined, onDragEnd: this.rowReorderable ? this.rowDragEnd : undefined }, this.loading && this.skeletonRows > 0
+            ? this.renderSkeleton()
+            : composed
+                ? null
+                : this.dataRows.map((row, index) => this.renderDataRow(row, index)), h("slot", { key: '05441531d73c716d3846794bea921eafa2b61533' })), h("slot", { key: 'e9f573271b2a6b19f212b598cd4471ee0070e340', name: "footer" }))), this.isEmpty && (h("div", { key: '4ceb6586322442b2fe48c3191641ce7857ef8f4b', class: "empty", part: "empty" }, h("slot", { key: '6213459f9c9657174edbb8b41daa48672b8f0a51', name: "empty" }, this.emptyLabel))), this.loading && !this.skeletonRows && (h("div", { key: 'edd362ca185dcd335b76b6c1c1369b886a97864c', class: "loading", part: "loading" }, h("xv-loader-v2", { key: '8d73899654faa6bb8b403f1aad2a426ad595bfa9', size: SIZE_VAR.LG }))), this.paginationMode !== 'none' && !!this.rowTotal && (h("xv-pagination", { key: '64f7884cf9dd446c5cad790f5bca97fbe33522b9', class: "pagination", part: "pagination", size: this.size, variant: "full", block: true, total: pages, page: this.page, totalItems: this.rowTotal, itemsPerPage: this.pageSize, itemsPerPageOptions: parsePageSizes(this.pageSizeOptions), responsiveVariant: { compact: [0, 768] }, onPageChange: this.paginationChanged }))));
+    }
+    static get is() { return "xv-table"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
@@ -51,6 +1051,73 @@ export class XvTable {
     }
     static get properties() {
         return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | XvTableColumn[]",
+                    "resolved": "XvTableColumn[] | string",
+                    "references": {
+                        "XvTableColumn": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableColumn",
+                            "referenceLocation": "XvTableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column definitions. Accepts its JSON string form so it is settable from plain markup."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row data. Ignored when `xv-table-row` children are slotted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "[]"
+            },
+            "rowKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property of a row object that identifies it in selection and expansion payloads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-key",
+                "defaultValue": "'id'"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -70,7 +1137,7 @@ export class XvTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Row height ladder."
                 },
                 "getter": false,
                 "setter": false,
@@ -78,7 +1145,7 @@ export class XvTable {
                 "attribute": "size",
                 "defaultValue": "SIZE_VAR.MD"
             },
-            "hover": {
+            "block": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -87,15 +1154,16 @@ export class XvTable {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Stretches the table to the full width of its container."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "hover"
+                "attribute": "block",
+                "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
@@ -106,55 +1174,980 @@ export class XvTable {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Covers the body with a loading state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "loading"
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "skeletonRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder rows drawn while `loading`. Zero draws a spinner instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skeleton-rows",
+                "defaultValue": "0"
             },
-            "colsSize": {
-                "type": "unknown",
+            "hover": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "(string | null)[]",
-                    "resolved": "string[]",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Highlights a row on pointer hover."
                 },
                 "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "selected": {},
-            "selectedCount": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "colsSize",
-                "methodName": "setColsSizeTemplate"
-            }];
-    }
-    static get listeners() {
+                "setter": false,
+                "reflect": true,
+                "attribute": "hover",
+                "defaultValue": "false"
+            },
+            "rowClickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rowClick` when a row is clicked outside an interactive element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-clickable",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title above the table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Supporting text under the title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "emptyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shown when there are no rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-label",
+                "defaultValue": "''"
+            },
+            "selectedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the batch bar counter. `{count}` is replaced with the number of selected rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-label",
+                "defaultValue": "''"
+            },
+            "columnsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip on the column picker trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns-label",
+                "defaultValue": "'Columns'"
+            },
+            "resetLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the button that restores the declared column layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reset-label",
+                "defaultValue": "'Reset'"
+            },
+            "expandLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of a row's expand toggle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-label",
+                "defaultValue": "'Toggle row'"
+            },
+            "reorderLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of a row's drag grip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorder-label",
+                "defaultValue": "'Drag to reorder'"
+            },
+            "sortMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvTableMode",
+                    "resolved": "\"client\" | \"none\" | \"server\"",
+                    "references": {
+                        "XvTableMode": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableMode",
+                            "referenceLocation": "XvTableMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`none` makes headers inert whatever the column says; `client` sorts the `rows` prop itself;\n`server` offers the affordance and only emits `sortChange` for the consumer to reload."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-mode",
+                "defaultValue": "'none'"
+            },
+            "sortBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | XvTableSort",
+                    "resolved": "XvTableSort | string",
+                    "references": {
+                        "XvTableSort": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableSort",
+                            "referenceLocation": "XvTableSort"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active sort, as `asc(field)` / `desc(field)` or an object."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-by",
+                "defaultValue": "''"
+            },
+            "selection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvTableSelectionMode",
+                    "resolved": "\"multiple\" | \"none\" | \"single\"",
+                    "references": {
+                        "XvTableSelectionMode": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableSelectionMode",
+                            "referenceLocation": "XvTableSelectionMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`multiple` renders checkboxes, `single` renders radios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selection",
+                "defaultValue": "'none'"
+            },
+            "selected": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | unknown[]",
+                    "resolved": "string | unknown[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Values of the selected rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "[]"
+            },
+            "expandMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvTableExpandMode",
+                    "resolved": "\"multiple\" | \"none\" | \"single\"",
+                    "references": {
+                        "XvTableExpandMode": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableExpandMode",
+                            "referenceLocation": "XvTableExpandMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether rows expand, and whether more than one may be open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expand-mode",
+                "defaultValue": "'none'"
+            },
+            "expanded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | unknown[]",
+                    "resolved": "string | unknown[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Values of the expanded rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded",
+                "defaultValue": "[]"
+            },
+            "paginationMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvTableMode",
+                    "resolved": "\"client\" | \"none\" | \"server\"",
+                    "references": {
+                        "XvTableMode": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableMode",
+                            "referenceLocation": "XvTableMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`client` slices the `rows` prop; `server` only emits `pageChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pagination-mode",
+                "defaultValue": "'none'"
+            },
+            "page": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page, 1-based."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page",
+                "defaultValue": "1"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rows per page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total row count, for `server` pagination."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "0"
+            },
+            "pageSizeOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number[]",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Page size choices. Accepts a comma-separated attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size-options",
+                "defaultValue": "[10, 20, 30, 40, 50, 100]"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows dragging column edges. Off by default: no handle is rendered and nothing is bound\nuntil it is switched on. A column may switch itself off, never on."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "false"
+            },
+            "reorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows dragging column headers into a new order. Off by default, like `resizable`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorderable",
+                "defaultValue": "false"
+            },
+            "rowReorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows dragging rows into a new order. Off by default: nothing is bound and no handle is\nrendered until it is switched on."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-reorderable",
+                "defaultValue": "false"
+            },
+            "rowReorderHandle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'icon' | 'row'",
+                    "resolved": "\"icon\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the whole row drags, or only a grip in a leading control cell."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-reorder-handle",
+                "defaultValue": "'icon'"
+            },
+            "stickyHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keeps the header visible while the body scrolls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sticky-header",
+                "defaultValue": "false"
+            },
+            "minWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width below which the table scrolls instead of squeezing, at any viewport. Left unset, a table\nonly stops squeezing below 1180px, where it scrolls at the width its columns declared."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min-width",
+                "defaultValue": "0"
+            },
+            "storageKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Persists the column layout under this key. Empty means the layout is not remembered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "storage-key",
+                "defaultValue": "''"
+            },
+            "storageOwner": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scopes the stored layout to a user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "storage-owner",
+                "defaultValue": "'anonymous'"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | XvTableLayout",
+                    "resolved": "XvTableLayout | string",
+                    "references": {
+                        "XvTableLayout": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableLayout",
+                            "referenceLocation": "XvTableLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled column layout. Overrides whatever is stored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "null"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale used for sorting and cell formatting. Falls back to the nearest `[lang]` ancestor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "columnState": {},
+            "sortState": {},
+            "selectedValues": {},
+            "expandedValues": {},
+            "layoutPending": {},
+            "columnDragging": {},
+            "dragOverId": {},
+            "dropRowIndex": {},
+            "slottedRowCount": {},
+            "derivedTracks": {},
+            "hasSlottedHeader": {},
+            "hasSlottedHeading": {},
+            "hasSlottedEmpty": {},
+            "overflowing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sortChange",
+                "name": "sortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a sortable header is activated."
+                },
+                "complexType": {
+                    "original": "XvTableSort",
+                    "resolved": "XvTableSort",
+                    "references": {
+                        "XvTableSort": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableSort",
+                            "referenceLocation": "XvTableSort"
+                        }
+                    }
+                }
+            }, {
+                "method": "selectedChange",
+                "name": "selectedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the set of selected rows changes. Named after the `selected` prop it reports:\n`selectionChange` is refused by Stencil as a native DOM event name."
+                },
+                "complexType": {
+                    "original": "XvTableSelectionDetail",
+                    "resolved": "XvTableSelectionDetail",
+                    "references": {
+                        "XvTableSelectionDetail": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableSelectionDetail",
+                            "referenceLocation": "XvTableSelectionDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "expandedChange",
+                "name": "expandedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the set of expanded rows changes."
+                },
+                "complexType": {
+                    "original": "XvTableExpandedDetail",
+                    "resolved": "XvTableExpandedDetail",
+                    "references": {
+                        "XvTableExpandedDetail": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableExpandedDetail",
+                            "referenceLocation": "XvTableExpandedDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pageChange",
+                "name": "pageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the page or the page size changes."
+                },
+                "complexType": {
+                    "original": "XvTablePage",
+                    "resolved": "XvTablePage",
+                    "references": {
+                        "XvTablePage": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTablePage",
+                            "referenceLocation": "XvTablePage"
+                        }
+                    }
+                }
+            }, {
+                "method": "layoutChange",
+                "name": "layoutChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after a column is resized, reordered, hidden or reset."
+                },
+                "complexType": {
+                    "original": "XvTableLayout",
+                    "resolved": "XvTableLayout",
+                    "references": {
+                        "XvTableLayout": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableLayout",
+                            "referenceLocation": "XvTableLayout"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowClick",
+                "name": "rowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a row is clicked, while `rowClickable` is set."
+                },
+                "complexType": {
+                    "original": "XvTableRowClickDetail",
+                    "resolved": "XvTableRowClickDetail",
+                    "references": {
+                        "XvTableRowClickDetail": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableRowClickDetail",
+                            "referenceLocation": "XvTableRowClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowOrderChange",
+                "name": "rowOrderChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a row is dropped in a new position. The table does not move the row itself \u2014\nreorder the data and it re-renders, which keeps the DOM and the data from drifting apart."
+                },
+                "complexType": {
+                    "original": "XvTableRowOrder",
+                    "resolved": "XvTableRowOrder",
+                    "references": {
+                        "XvTableRowOrder": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableRowOrder",
+                            "referenceLocation": "XvTableRowOrder"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "selectAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects every selectable row.",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the selection.",
+                    "tags": []
+                }
+            },
+            "resetLayout": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Drops the stored layout and returns to the declared columns.",
+                    "tags": []
+                }
+            },
+            "getLayout": {
+                "complexType": {
+                    "signature": "() => Promise<XvTableLayout>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "XvTableLayout": {
+                            "location": "import",
+                            "path": "./xv-table.model",
+                            "id": "src/components/xv-table/xv-table.model.ts::XvTableLayout",
+                            "referenceLocation": "XvTableLayout"
+                        }
+                    },
+                    "return": "Promise<XvTableLayout>"
+                },
+                "docs": {
+                    "text": "The layout as it would be stored: only the deviations from the declared columns.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
         return [{
-                "name": "checkedChange",
-                "method": "handleCheckedChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
+                "propName": "columns",
+                "methodName": "columnsChanged"
+            }, {
+                "propName": "layout",
+                "methodName": "layoutInputChanged"
+            }, {
+                "propName": "storageKey",
+                "methodName": "layoutInputChanged"
+            }, {
+                "propName": "storageOwner",
+                "methodName": "layoutInputChanged"
+            }, {
+                "propName": "sortBy",
+                "methodName": "sortByChanged"
+            }, {
+                "propName": "selected",
+                "methodName": "selectedChanged"
+            }, {
+                "propName": "expanded",
+                "methodName": "expandedChanged"
+            }, {
+                "propName": "rows",
+                "methodName": "rowsChanged"
             }];
     }
 }