@xplortech/apollo-core 3.0.0 → 3.2.0

package/dist/esm/xpl-table.entry.js

@@ -1,67 +1,148 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { T as TimerManager } from './lifecycle-Dqb1pIRo.js';
+import { R as ROW_REORDER_MARK, S as SELECTION_MARK, c as cycleSortDirection, g as getGridColumnWidthFromHeaderCell, a as getIconType } from './table-internal-O7gQjVdS.js';
 
-const getIconType = (sortType) => {
-    switch (sortType) {
-        case 'asc':
-            return 'arrow-up';
-        case 'desc':
-            return 'arrow-down';
-        default:
-            return 'dash';
+function getNearestTableBodyRowFromNode(node) {
+    const el = node instanceof HTMLElement ? node : null;
+    if (!el) {
+        return null;
     }
-};
+    const row = el.closest('xpl-table-row');
+    return row != null ? row : null;
+}
+function getNextVisibleTableBodyRowAfter(element) {
+    const parent = element.parentElement;
+    if (!parent)
+        return null;
+    const siblings = Array.from(parent.children);
+    const idx = siblings.indexOf(element);
+    if (idx === -1)
+        return null;
+    for (let i = idx + 1; i < siblings.length; i += 1) {
+        const n = siblings[i];
+        if (n.tagName.toLowerCase() === 'xpl-table-row' && !n.hasAttribute('hidden')) {
+            return n;
+        }
+    }
+    return null;
+}
+function moveRowInTableBody(body, draggedRow, dropTargetRow) {
+    if (draggedRow === dropTargetRow || draggedRow.parentElement !== body) {
+        return;
+    }
+    if (dropTargetRow.parentElement !== body) {
+        return;
+    }
+    const visible = Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row' && !c.hasAttribute('hidden'));
+    const fromIndex = visible.indexOf(draggedRow);
+    const toIndex = visible.indexOf(dropTargetRow);
+    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+        return;
+    }
+    if (fromIndex < toIndex) {
+        const nextVisible = getNextVisibleTableBodyRowAfter(dropTargetRow);
+        if (nextVisible) {
+            body.insertBefore(draggedRow, nextVisible);
+        }
+        else {
+            body.insertBefore(draggedRow, null);
+        }
+    }
+    else {
+        body.insertBefore(draggedRow, dropTargetRow);
+    }
+}
+
+function bodyRowFromDragTarget(target) {
+    return getNearestTableBodyRowFromNode(target);
+}
+function tableBodyRowFromEvent(ev) {
+    const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+    const row = path.find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-table-row');
+    return row ?? bodyRowFromDragTarget(ev.target);
+}
+function reorderDragHandleFromEvent(ev) {
+    const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+    const handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
+    return handle ?? null;
+}
 const Table = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.tableSelect = createEvent(this, "tableSelect", 7);
+        this.rowOrderChange = createEvent(this, "rowOrderChange", 3);
+        this.rowSelectionChange = createEvent(this, "rowSelectionChange", 3);
         this.sortChanged = createEvent(this, "sortChanged", 3);
-        this.selectedValues = [];
-        this.isSortable = false;
-        this.sortableColumns = [];
+        this.tableSelect = createEvent(this, "tableSelect", 7);
+        this.columnWidthsToken = '';
+        this.lastEmittedRowSelectionKey = '';
+        this.draggedRow = null;
+        this.pendingDragRow = null;
+        this.pointerUpClearPending = null;
+        this.reorderKeyboardTimers = new TimerManager();
+        this.onReorderHandleKeydown = (ev) => {
+            this.handleReorderHandleKeyDown(ev);
+        };
         this.areAllSelected = false;
+        this.colCount = 0;
         this.hasScrolled = false;
+        this.keyboardReorderRowId = null;
+        this.reorderLiveMessage = '';
+        this.rowData = [];
+        this.rowFooterData = [];
+        this.selected = [];
+        this.selectedRowIds = [];
         this.sortTypeArray = [];
+        this.isSortable = false;
+        this.rowReorderable = false;
+        this.selectedValues = [];
+        this.sortableColumns = [];
+        this.onGridScroll = (e) => {
+            this.hasScrolled = e.target.scrollLeft > 0;
+        };
         this.selectAll = (e) => {
-            const checked = e.detail;
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked } = target;
             this.areAllSelected = checked;
             this.selected =
-                this.selectedValues.length > 0
-                    ? Array.from(this.el.querySelectorAll('tbody td:first-child xpl-checkbox')).map((checkbox) => (checked ? (checkbox.value ?? checked) : checked))
+                this.selectedValues && this.selectedValues.length > 0
+                    ? Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => (checked ? input?.value : checked))
                     : this.selected.map(() => checked);
-            this.onChange();
+            this.onSelectionChange();
         };
         this.selectOne = (e, checkboxIdx) => {
-            const checked = e.detail;
-            const { value } = e.target;
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked, value } = target;
+            this.areAllSelected = false;
             this.selected = this.selected.map((v, selectedIdx) => {
                 if (selectedIdx !== checkboxIdx)
                     return v;
-                return this.selectedValues.length > 0
+                return this.selectedValues && this.selectedValues.length > 0
                     ? checked
-                        ? (value ?? checked)
+                        ? value
                         : checked
                     : checked;
             });
-            this.areAllSelected = this.selected.every((v) => !!v);
-            this.onChange();
+            this.onSelectionChange();
         };
-        this.onChange = () => {
+        this.onSelectionChange = () => {
             this.tableSelect.emit({
                 selected: this.selected,
                 areAllSelected: this.areAllSelected,
             });
         };
-        this.onScroll = () => {
+        this.onLegacyScroll = () => {
             this.hasScrolled = this.container.scrollLeft > 0;
         };
         this.sortBy = (col, sortTypeArray) => {
             const handleSort = (a, b) => {
-                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase()) {
+                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase())
                     return -1;
-                }
-                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {
+                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase())
                     return 1;
-                }
                 return 0;
             };
             switch (sortTypeArray[col]) {
@@ -72,7 +153,7 @@ const Table = class {
                     this.rowData.sort((a, b) => handleSort(b, a));
                     break;
                 default:
-                    this.rowData = this.data ? Array.from(this.data) : [];
+                    this.rowData = this.data !== undefined ? Array.from(this.data) : [];
                     this.sortTypeArray[col] = null;
                     break;
             }
@@ -81,44 +162,69 @@ const Table = class {
         this.setData = () => {
             this.rowData = this.data !== undefined ? Array.from(this.data) : [];
         };
+        this.setFooterData = () => {
+            this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
+        };
     }
-    handleSort(clickEvt, isColumnSortable, colNum, colName) {
-        clickEvt.preventDefault();
-        clickEvt.stopPropagation();
-        if (!isColumnSortable)
-            return;
-        this.sortTypeArray = this.sortTypeArray.map((val, i) => {
-            if (i !== colNum)
-                return null;
-            switch (val) {
-                case 'asc':
-                    return 'desc';
-                case 'desc':
-                    return null;
-                default:
-                    return 'asc';
-            }
-        });
-        const evt = this.sortChanged.emit({
-            colNum,
-            colName,
-            sortTypeArr: this.sortTypeArray,
-        });
-        if (!evt.defaultPrevented)
-            this.sortBy(colNum, this.sortTypeArray);
+    watchColumns() {
+        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
     }
     watchData() {
         this.setData();
     }
-    watchColumns() {
-        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+    watchFooterData() {
+        this.setFooterData();
+    }
+    watchReorderHandleIcon() {
+        if (this.isLegacyMode || !this.rowReorderable)
+            return;
+        this.syncInjectedReorderHandleIcons();
+    }
+    watchReorderHandleIconKeyboard() {
+        if (this.isLegacyMode || !this.rowReorderable)
+            return;
+        this.syncInjectedReorderHandleIcons();
+    }
+    watchRowReorderable(next) {
+        if (this.isLegacyMode)
+            return;
+        if (!next) {
+            this.keyboardReorderRowId = null;
+            this.syncReorderHandleKeyboardA11y(null);
+            this.removeManagedReorderCells();
+            this.draggedRow = null;
+            this.pendingDragRow = null;
+            this.clearPendingDragListeners();
+            this.reorderLiveMessage = '';
+            this.queryBodyRows().forEach((r) => {
+                r.removeAttribute('draggable');
+                r.querySelector('.xpl-table__row-drag-handle')?.removeAttribute('draggable');
+                r.classList.remove('xpl-table-row--dragging', 'xpl-table-row--drag-over');
+            });
+            this.colCount = 0;
+            this.columnWidthsToken = '';
+        }
+    }
+    watchSelectable(next) {
+        if (this.isLegacyMode)
+            return;
+        if (!next) {
+            this.selectedRowIds = [];
+            this.lastEmittedRowSelectionKey = '';
+            this.colCount = 0;
+            this.columnWidthsToken = '';
+            this.syncRowSelectedProps();
+        }
     }
     componentWillLoad() {
-        this.ensureSelectAllValue();
-        this.areAllSelected = false;
-        this.setData();
-        this.selected = new Array(this.rowData.length).fill(false);
-        this.ensureSortTypeArray();
+        if (this.isLegacyMode) {
+            this.ensureSelectAllValue();
+            this.areAllSelected = false;
+            this.setData();
+            this.setFooterData();
+            this.selected = new Array(this.rowData.length).fill(false);
+            this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+        }
     }
     ensureSelectAllValue() {
         if (this.selectAllValue !== undefined) {
@@ -138,43 +244,1061 @@ const Table = class {
         this.selectAllValue = `select-all-${Table.selectAllSeq}`;
         this.el.setAttribute('data-select-all-value', this.selectAllValue);
     }
-    ensureSortTypeArray() {
+    componentDidLoad() {
+        if (!this.isLegacyMode) {
+            this.syncCompositionalLayout();
+        }
+    }
+    componentDidUpdate() {
+        if (!this.isLegacyMode) {
+            this.syncCompositionalLayout();
+        }
+    }
+    disconnectedCallback() {
+        this.clearPendingDragListeners();
+        this.detachReorderHandleKeydownListeners();
+        this.reorderKeyboardTimers.dispose();
+        if (this.reorderAnnounceRaf !== undefined) {
+            cancelAnimationFrame(this.reorderAnnounceRaf);
+            this.reorderAnnounceRaf = undefined;
+        }
+    }
+    handleHeaderCellColumnWidthsChange(ev) {
+        if (this.isLegacyMode)
+            return;
+        const t = ev.target;
+        if (!(t instanceof Node) || !this.el.contains(t))
+            return;
+        this.updateColumnWidths();
+    }
+    handleCompositionalCheckboxChange(ev) {
+        if (this.isLegacyMode || !this.selectable)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        const path = ev.composedPath?.() ?? [];
+        let checkboxHost = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-checkbox');
+        if (!checkboxHost &&
+            ev.target &&
+            typeof ev.target.closest === 'function') {
+            checkboxHost = ev.target.closest('xpl-checkbox') ?? undefined;
+        }
+        if (!checkboxHost || !this.el.contains(checkboxHost))
+            return;
+        const row = checkboxHost.closest('xpl-table-row');
+        if (!row || !this.isDirectChildBodyRow(row))
+            return;
+        const cell = checkboxHost.closest('xpl-table-cell');
+        if (!cell)
+            return;
+        const selectionIdx = this.getSelectionColumnIndex();
+        if (selectionIdx === null)
+            return;
+        const bodyCells = Table.getBodyRowCells(row);
+        const colIdx = bodyCells.indexOf(cell);
+        if (colIdx !== selectionIdx)
+            return;
+        ev.stopPropagation();
+        const rowId = Table.getRowIdForRow(row);
+        if (!rowId || row.disabled)
+            return;
+        const input = checkboxHost.querySelector('input[type="checkbox"]');
+        if (!input)
+            return;
+        const { checked } = input;
+        if (checked) {
+            if (!this.selectedRowIds.includes(rowId)) {
+                this.selectedRowIds = [...this.selectedRowIds, rowId];
+            }
+        }
+        else {
+            this.selectedRowIds = this.selectedRowIds.filter((id) => id !== rowId);
+        }
+        this.applyHeaderCheckboxState();
+        this.syncRowSelectedProps();
+        this.emitCompositionalSelection();
+    }
+    handleCompositionalHeaderCheckboxChange(ev) {
+        if (this.isLegacyMode || !this.selectable)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        const path = ev.composedPath?.() ?? [];
+        let headerCell = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement &&
+            n.tagName.toLowerCase() === 'xpl-table-header-cell' &&
+            n.getAttribute('type') === 'checkbox');
+        if (!headerCell && ev.target && typeof ev.target.closest === 'function') {
+            const maybeCell = ev.target.closest('xpl-table-header-cell[type="checkbox"]');
+            if (maybeCell instanceof HTMLElement) {
+                headerCell = maybeCell;
+            }
+        }
+        if (!headerCell || !this.el.contains(headerCell))
+            return;
+        if (!this.isCellInOurCompositionalHeader(headerCell))
+            return;
+        const headerCells = this.getCompositionalHeaderCells();
+        if (!headerCells.includes(headerCell))
+            return;
+        const checked = !!ev.detail;
+        const selectableRows = this.querySelectableBodyRows();
+        const ids = selectableRows
+            .map((r) => Table.getRowIdForRow(r))
+            .filter((id) => !!id);
+        if (checked) {
+            this.selectedRowIds = [...ids];
+        }
+        else {
+            this.selectedRowIds = [];
+        }
+        this.applyBodyCheckboxStates();
+        this.syncRowSelectedProps();
+        this.emitCompositionalSelection();
+    }
+    handlePointerDownExitKeyboardReorder(ev) {
+        if (this.isLegacyMode || !this.rowReorderable || this.keyboardReorderRowId === null) {
+            return;
+        }
+        const t = ev.target;
+        if (!(t instanceof Node) || !this.el.contains(t)) {
+            return;
+        }
+        const row = t instanceof Element ? t.closest('xpl-table-row') : null;
+        if (!row || !this.isDirectChildBodyRow(row)) {
+            return;
+        }
+        this.keyboardReorderRowId = null;
+        this.syncReorderHandleKeyboardA11y(null);
+    }
+    handleReorderHandleKeyDown(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const rawPath = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
+        const path = rawPath.length > 0 ? rawPath : ev.target ? [ev.target] : [];
+        let handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
+        if (!handle &&
+            ev.target instanceof HTMLElement &&
+            ev.target.classList.contains('xpl-table__row-drag-handle')) {
+            handle = ev.target;
+        }
+        if (!handle || !this.el.contains(handle)) {
+            return;
+        }
+        const row = handle.closest('xpl-table-row');
+        if (!row || !this.isDirectChildBodyRow(row)) {
+            return;
+        }
+        const rowId = Table.getRowIdForRow(row) ?? '';
+        if (!rowId) {
+            return;
+        }
+        const isKbd = this.keyboardReorderRowId === rowId;
+        const isEscapeKey = ev.key === 'Escape' ||
+            ev.key === 'Esc' ||
+            ev.code === 'Escape' ||
+            ev.keyCode === 27;
+        if (row.disabled) {
+            if (isEscapeKey && isKbd) {
+                ev.preventDefault();
+                this.keyboardReorderRowId = null;
+                this.syncReorderHandleKeyboardA11y(null);
+            }
+            return;
+        }
+        if (isEscapeKey) {
+            if (isKbd) {
+                ev.preventDefault();
+                this.keyboardReorderRowId = null;
+                this.syncReorderHandleKeyboardA11y(null);
+            }
+            return;
+        }
+        if (!isKbd) {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                this.keyboardReorderRowId = rowId;
+                this.syncReorderHandleKeyboardA11y(rowId);
+            }
+            return;
+        }
+        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
+            ev.preventDefault();
+            const dir = ev.key === 'ArrowUp' ? 'up' : 'down';
+            this.performKeyboardRowReorder(rowId, dir);
+        }
+    }
+    handleRowReorderPointerDown(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const handle = reorderDragHandleFromEvent(ev);
+        if (!handle) {
+            return;
+        }
+        const table = handle.closest('xpl-table');
+        if (table !== this.el) {
+            return;
+        }
+        const row = bodyRowFromDragTarget(handle);
+        if (!row || row.disabled) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || row.parentElement !== body) {
+            return;
+        }
+        this.clearPendingDragListeners();
+        this.pendingDragRow = row;
+        const onPointerEnd = () => {
+            this.clearPendingDragListeners();
+            this.pendingDragRow = null;
+        };
+        document.addEventListener('pointerup', onPointerEnd, true);
+        document.addEventListener('pointercancel', onPointerEnd, true);
+        this.pointerUpClearPending = () => {
+            document.removeEventListener('pointerup', onPointerEnd, true);
+            document.removeEventListener('pointercancel', onPointerEnd, true);
+        };
+    }
+    handleRowReorderDragStart(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row) {
+            return;
+        }
+        if (row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || row.parentElement !== body) {
+            return;
+        }
+        if (row.disabled || this.pendingDragRow !== row) {
+            ev.preventDefault();
+            return;
+        }
+        this.keyboardReorderRowId = null;
+        this.syncReorderHandleKeyboardA11y(null);
+        this.clearPendingDragListeners();
+        this.pendingDragRow = null;
+        this.draggedRow = row;
+        if (ev.dataTransfer) {
+            ev.dataTransfer.effectAllowed = 'move';
+            ev.dataTransfer.setData('text/plain', Table.getRowIdForRow(row) ?? '');
+        }
+        row.classList.add('xpl-table-row--dragging');
+    }
+    handleRowReorderDragEnd(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row || row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        row.classList.remove('xpl-table-row--dragging');
+        this.clearReorderDragOverClasses();
+        this.draggedRow = null;
+    }
+    handleRowReorderDragOver(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row || row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || row.parentElement !== body || row.disabled) {
+            return;
+        }
+        ev.preventDefault();
+        if (ev.dataTransfer) {
+            ev.dataTransfer.dropEffect = 'move';
+        }
+    }
+    handleRowReorderDragEnter(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row || row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || row.parentElement !== body || row.disabled) {
+            return;
+        }
+        ev.preventDefault();
+        row.classList.add('xpl-table-row--drag-over');
+    }
+    handleRowReorderDragLeave(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        const row = tableBodyRowFromEvent(ev);
+        if (!row || row.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const related = ev.relatedTarget;
+        if (related && row.contains(related)) {
+            return;
+        }
+        row.classList.remove('xpl-table-row--drag-over');
+    }
+    handleRowReorderDrop(ev) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        ev.preventDefault();
+        const dropRow = tableBodyRowFromEvent(ev);
+        if (!dropRow || dropRow.closest('xpl-table') !== this.el) {
+            return;
+        }
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body || dropRow.parentElement !== body || dropRow.disabled) {
+            return;
+        }
+        const source = this.draggedRow;
+        if (!source || source.disabled) {
+            this.draggedRow = null;
+            this.clearReorderDragOverClasses();
+            return;
+        }
+        if (source === dropRow) {
+            this.clearReorderDragOverClasses();
+            return;
+        }
+        const visible = this.getVisibleBodyRowsForReorder();
+        const fromIndex = visible.indexOf(source);
+        const toIndex = visible.indexOf(dropRow);
+        if (fromIndex === -1 || toIndex === -1) {
+            this.clearReorderDragOverClasses();
+            return;
+        }
+        const direction = fromIndex > toIndex ? 'up' : 'down';
+        const rowId = Table.getRowIdForRow(source) ?? '';
+        const runMove = () => {
+            moveRowInTableBody(body, source, dropRow);
+        };
+        runMove();
+        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => Table.getRowIdForRow(r) ?? '');
+        this.rowOrderChange.emit({
+            rowId,
+            direction,
+            orderedRowIds,
+            fromIndex,
+            toIndex,
+        });
+        this.announceRowReorder(rowId, orderedRowIds);
+        this.clearReorderDragOverClasses();
+        if (this.selectable) {
+            this.applyBodyCheckboxStates();
+            this.applyHeaderCheckboxState();
+            this.syncRowSelectedProps();
+        }
+        this.updateColumnWidths();
+    }
+    get isLegacyMode() {
+        return this.columns !== undefined || this.data !== undefined || this.footer !== undefined;
+    }
+    ensureTableInstanceId() {
+        if (this.tableInstanceId)
+            return;
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            this.tableInstanceId = crypto.randomUUID();
+        }
+        else {
+            this.tableInstanceId = Math.random().toString(36).slice(2);
+        }
+    }
+    generateRowId() {
+        this.ensureTableInstanceId();
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return `${this.tableInstanceId}-${crypto.randomUUID()}`;
+        }
+        return `${this.tableInstanceId}-${Math.random().toString(36).slice(2)}`;
+    }
+    syncCompositionalLayout() {
+        if (this.isLegacyMode)
+            return;
+        if (this.rowReorderable) {
+            this.syncReorderColumn();
+        }
+        else {
+            this.removeManagedReorderCells();
+        }
+        if (this.selectable) {
+            this.ensureTableInstanceId();
+            this.pruneStaleSelectedRowIds();
+            this.ensureBodyRowIds();
+            this.applyBodyCheckboxStates();
+            this.applyHeaderCheckboxState();
+            this.syncRowSelectedProps();
+        }
+        if (this.rowReorderable && this.selectable) {
+            this.normalizeManagedColumnsOrder();
+        }
+        this.updateColumnWidths();
+    }
+    getDirectChildTableSection(tag) {
+        const el = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === tag);
+        return el ?? null;
+    }
+    isDirectChildBodyRow(row) {
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        return body !== null && row.parentElement === body;
+    }
+    isCellInOurCompositionalHeader(cell) {
+        const header = cell.closest('xpl-table-header');
+        return header !== null && header.parentElement === this.el;
+    }
+    getSelectionColumnIndex() {
+        const headerCells = this.getCompositionalHeaderCells();
+        const idx = headerCells.findIndex((c) => c.getAttribute('type') === 'checkbox');
+        return idx >= 0 ? idx : null;
+    }
+    static getBodyRowCells(row) {
+        return Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell');
+    }
+    queryBodyRows() {
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body)
+            return [];
+        return Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+    }
+    querySelectableBodyRows() {
+        return this.queryBodyRows().filter((row) => !row.disabled);
+    }
+    static getRowIdForRow(row) {
+        const id = row.getAttribute('row-id')?.trim();
+        return id || null;
+    }
+    ensureBodyRowIds() {
+        this.queryBodyRows().forEach((row) => {
+            if (Table.getRowIdForRow(row))
+                return;
+            row.setAttribute('row-id', this.generateRowId());
+        });
+    }
+    removeManagedReorderCells() {
+        this.el.querySelectorAll(`[${ROW_REORDER_MARK}]`).forEach((node) => {
+            if (!(node instanceof Element))
+                return;
+            if (node.closest('xpl-table') !== this.el)
+                return;
+            node.parentElement?.removeChild(node);
+        });
+    }
+    getSelectionSlotCellForReorderOrder(row) {
+        const idx = this.getSelectionColumnIndex();
+        if (idx === null) {
+            return null;
+        }
+        const cells = Array.from(row.children);
+        const cell = cells[idx];
+        if (!cell) {
+            return null;
+        }
+        const tag = cell.tagName.toLowerCase();
+        if (tag === 'xpl-table-header-cell') {
+            return cell.getAttribute('type') === 'checkbox' ? cell : null;
+        }
+        if (tag === 'xpl-table-cell') {
+            if (cell.hasAttribute(SELECTION_MARK)) {
+                return cell;
+            }
+            return cell.querySelector('xpl-checkbox') ? cell : null;
+        }
+        if (tag === 'xpl-table-footer-cell') {
+            return cell;
+        }
+        return null;
+    }
+    normalizeManagedColumnsOrder() {
+        const fix = (row) => {
+            const re = row.querySelector(`:scope > [${ROW_REORDER_MARK}]`);
+            const se = this.getSelectionSlotCellForReorderOrder(row);
+            if (!re || !se) {
+                return;
+            }
+            const siblings = Array.from(row.children);
+            const iRe = siblings.indexOf(re);
+            const iSe = siblings.indexOf(se);
+            if (iRe > iSe) {
+                row.insertBefore(re, se);
+            }
+        };
+        const header = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
+        if (header) {
+            const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+            const container = firstRow ?? header;
+            fix(container);
+        }
+        this.queryBodyRows().forEach((row) => fix(row));
+        const footer = this.getDirectChildTableSection('xpl-table-footer');
+        if (footer) {
+            Array.from(footer.children)
+                .filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
+                .forEach((row) => fix(row));
+        }
+    }
+    syncReorderColumn() {
+        if (!this.rowReorderable || this.isLegacyMode)
+            return;
+        this.ensureBodyRowIds();
+        this.ensureHeaderReorderCell();
+        this.ensureBodyReorderCells();
+        this.ensureFooterReorderCells();
+        this.applyReorderRowDraggableState();
+    }
+    ensureHeaderReorderCell() {
+        const header = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
+        if (!header)
+            return;
+        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+        const container = firstRow ?? header;
+        if (Array.from(container.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell' &&
+            c.hasAttribute(ROW_REORDER_MARK))) {
+            return;
+        }
+        const cell = document.createElement('xpl-table-header-cell');
+        cell.setAttribute(ROW_REORDER_MARK, '');
+        cell.setAttribute('type', 'empty');
+        cell.setAttribute('width', '48');
+        cell.setAttribute('align', 'center');
+        container.insertBefore(cell, container.firstChild);
+    }
+    ensureBodyReorderCells() {
+        this.queryBodyRows().forEach((row) => {
+            const managed = Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell' &&
+                c.hasAttribute(ROW_REORDER_MARK));
+            if (managed.length > 1) {
+                for (let i = 1; i < managed.length; i += 1) {
+                    managed[i].remove();
+                }
+            }
+            let cell = managed[0];
+            if (!cell) {
+                const newCell = document.createElement('xpl-table-cell');
+                newCell.setAttribute(ROW_REORDER_MARK, '');
+                newCell.setAttribute('width', '48');
+                newCell.setAttribute('align', 'center');
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'xpl-table__row-drag-handle';
+                btn.setAttribute('aria-label', 'Reorder row');
+                btn.setAttribute('aria-pressed', 'false');
+                const iconName = this.getResolvedIconForRow(Table.getRowIdForRow(row) ?? '');
+                if (iconName) {
+                    const icon = document.createElement('xpl-icon');
+                    icon.setAttribute('icon', iconName);
+                    icon.setAttribute('size', '16');
+                    btn.appendChild(icon);
+                }
+                newCell.appendChild(btn);
+                row.insertBefore(newCell, row.firstChild);
+                cell = newCell;
+            }
+            else {
+                cell.setAttribute('align', 'center');
+            }
+            const btn = cell.querySelector('.xpl-table__row-drag-handle');
+            if (btn) {
+                btn.disabled = row.disabled;
+            }
+        });
+        this.syncInjectedReorderHandleIcons();
+        this.attachReorderHandleKeydownListeners();
+    }
+    getResolvedIconForRow(rowId) {
+        const inKeyboardMode = this.keyboardReorderRowId !== null &&
+            rowId !== '' &&
+            rowId === this.keyboardReorderRowId;
+        if (inKeyboardMode) {
+            if (this.reorderHandleIconKeyboard === '') {
+                return null;
+            }
+            return this.reorderHandleIconKeyboard ?? 'caret-expand-y';
+        }
+        if (this.reorderHandleIcon === '') {
+            return null;
+        }
+        return this.reorderHandleIcon ?? 'grip-dots-vertical';
+    }
+    syncInjectedReorderHandleIcons() {
+        this.queryBodyRows().forEach((row) => {
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            if (!btn) {
+                return;
+            }
+            const rowId = Table.getRowIdForRow(row) ?? '';
+            const iconName = this.getResolvedIconForRow(rowId);
+            btn.querySelectorAll('xpl-icon').forEach((n) => n.remove());
+            if (iconName) {
+                const icon = document.createElement('xpl-icon');
+                icon.setAttribute('icon', iconName);
+                icon.setAttribute('size', '16');
+                btn.appendChild(icon);
+            }
+        });
+    }
+    syncReorderHandleKeyboardA11y(activeId) {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        this.queryBodyRows().forEach((row) => {
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            if (!btn) {
+                return;
+            }
+            const rid = Table.getRowIdForRow(row) ?? '';
+            const isActive = activeId !== null && rid === activeId;
+            btn.classList.toggle('xpl-table__row-drag-handle--keyboard-mode', isActive);
+            btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+            btn.setAttribute('aria-label', isActive
+                ? 'Press arrow up or down to reorder, Escape to exit'
+                : 'Press Enter or Space to activate keyboard reorder mode, or drag to reorder');
+        });
+        this.syncInjectedReorderHandleIcons();
+    }
+    attachReorderHandleKeydownListeners() {
+        if (this.isLegacyMode || !this.rowReorderable) {
+            return;
+        }
+        this.queryBodyRows().forEach((row) => {
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            if (!btn || btn.dataset.xplReorderKbdBound === 'true') {
+                return;
+            }
+            btn.dataset.xplReorderKbdBound = 'true';
+            btn.addEventListener('keydown', this.onReorderHandleKeydown);
+        });
+    }
+    detachReorderHandleKeydownListeners() {
+        if (!this.el) {
+            return;
+        }
+        this.el
+            .querySelectorAll('.xpl-table__row-drag-handle[data-xpl-reorder-kbd-bound="true"]')
+            .forEach((btn) => {
+            btn.removeEventListener('keydown', this.onReorderHandleKeydown);
+            delete btn.dataset.xplReorderKbdBound;
+        });
+    }
+    performKeyboardRowReorder(rowId, direction) {
+        const body = this.getDirectChildTableSection('xpl-table-body');
+        if (!body) {
+            return false;
+        }
+        const visible = this.getVisibleBodyRowsForReorder();
+        const itemIndex = visible.findIndex((r) => Table.getRowIdForRow(r) === rowId);
+        if (itemIndex === -1) {
+            return false;
+        }
+        const targetIndex = direction === 'up' ? itemIndex - 1 : itemIndex + 1;
+        if (targetIndex < 0 || targetIndex >= visible.length) {
+            return false;
+        }
+        const fromIndex = itemIndex;
+        const item = visible[itemIndex];
+        const targetItem = visible[targetIndex];
+        if (direction === 'up') {
+            body.insertBefore(item, targetItem);
+        }
+        else {
+            const nextVisible = getNextVisibleTableBodyRowAfter(targetItem);
+            if (nextVisible) {
+                body.insertBefore(item, nextVisible);
+            }
+            else {
+                body.appendChild(item);
+            }
+        }
+        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => Table.getRowIdForRow(r) ?? '');
+        const toIndex = orderedRowIds.indexOf(rowId);
+        this.rowOrderChange.emit({
+            rowId,
+            direction,
+            orderedRowIds,
+            fromIndex,
+            toIndex,
+        });
+        this.announceRowReorder(rowId, orderedRowIds);
+        this.clearReorderDragOverClasses();
+        if (this.selectable) {
+            this.applyBodyCheckboxStates();
+            this.applyHeaderCheckboxState();
+            this.syncRowSelectedProps();
+        }
+        this.updateColumnWidths();
+        this.reorderKeyboardTimers.requestAnimationFrame(() => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            const moved = this.getVisibleBodyRowsForReorder().find((r) => Table.getRowIdForRow(r) === rowId);
+            const btn = moved?.querySelector('.xpl-table__row-drag-handle');
+            btn?.focus();
+        });
+        return true;
+    }
+    ensureFooterReorderCells() {
+        const footer = this.getDirectChildTableSection('xpl-table-footer');
+        if (!footer)
+            return;
+        Array.from(footer.children)
+            .filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
+            .forEach((row) => {
+            if (Array.from(row.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-footer-cell' &&
+                c.hasAttribute(ROW_REORDER_MARK))) {
+                return;
+            }
+            const cell = document.createElement('xpl-table-footer-cell');
+            cell.setAttribute(ROW_REORDER_MARK, '');
+            cell.setAttribute('width', '48');
+            cell.setAttribute('align', 'center');
+            row.insertBefore(cell, row.firstChild);
+        });
+    }
+    static supportsSubgridBodyRow() {
+        return (typeof CSS !== 'undefined' &&
+            typeof CSS.supports === 'function' &&
+            CSS.supports('grid-template-columns', 'subgrid'));
+    }
+    applyReorderRowDraggableState() {
+        const useRowDrag = Table.supportsSubgridBodyRow();
+        this.queryBodyRows().forEach((row) => {
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            btn?.removeAttribute('draggable');
+            row.removeAttribute('draggable');
+            if (!this.rowReorderable || row.disabled) {
+                return;
+            }
+            if (!btn) {
+                return;
+            }
+            if (useRowDrag) {
+                row.setAttribute('draggable', 'true');
+            }
+            else {
+                btn.setAttribute('draggable', 'true');
+            }
+        });
+    }
+    getVisibleBodyRowsForReorder() {
+        return this.queryBodyRows().filter((r) => !r.hasAttribute('hidden'));
+    }
+    clearReorderDragOverClasses() {
+        this.queryBodyRows().forEach((r) => r.classList.remove('xpl-table-row--drag-over'));
+    }
+    clearPendingDragListeners() {
+        if (this.pointerUpClearPending) {
+            this.pointerUpClearPending();
+            this.pointerUpClearPending = null;
+        }
+    }
+    announceRowReorder(movedRowId, orderedRowIds) {
+        if (!this.rowReorderable || !movedRowId) {
+            return;
+        }
+        const index = orderedRowIds.indexOf(movedRowId);
+        if (index < 0) {
+            return;
+        }
+        this.reorderLiveMessage = '';
+        if (this.reorderAnnounceRaf !== undefined) {
+            cancelAnimationFrame(this.reorderAnnounceRaf);
+        }
+        this.reorderAnnounceRaf = requestAnimationFrame(() => {
+            this.reorderAnnounceRaf = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.reorderLiveMessage = `Row ${movedRowId}, now position ${index + 1} of ${orderedRowIds.length}`;
+        });
+    }
+    pruneStaleSelectedRowIds() {
+        const validIds = new Set(this.queryBodyRows()
+            .map((r) => Table.getRowIdForRow(r))
+            .filter((id) => !!id));
+        const next = this.selectedRowIds.filter((id) => validIds.has(id));
+        if (next.length === this.selectedRowIds.length)
+            return;
+        this.selectedRowIds = next;
+        this.applyBodyCheckboxStates();
+        this.applyHeaderCheckboxState();
+        this.syncRowSelectedProps();
+        this.emitCompositionalSelection();
+    }
+    static getBodyRowCheckboxAriaLabel(row, selectionColIndex) {
+        const cells = Table.getBodyRowCells(row);
+        const labelCell = cells.find((c, i) => (selectionColIndex === null || i !== selectionColIndex) &&
+            !c.hasAttribute(ROW_REORDER_MARK));
+        const first = labelCell ?? cells[0];
+        if (!first)
+            return 'Select row';
+        const raw = first.textContent?.replace(/\s+/g, ' ').trim() ?? '';
+        if (!raw)
+            return 'Select row';
+        const truncated = raw.length > 100 ? `${raw.slice(0, 100)}…` : raw;
+        return `Select row, ${truncated}`;
+    }
+    applyBodyCheckboxStates() {
+        const selectionIdx = this.getSelectionColumnIndex();
+        if (selectionIdx === null)
+            return;
+        this.queryBodyRows().forEach((row) => {
+            const rowId = Table.getRowIdForRow(row);
+            const cells = Table.getBodyRowCells(row);
+            const cell = cells[selectionIdx];
+            const cb = cell?.querySelector('xpl-checkbox');
+            if (!cb || !rowId)
+                return;
+            cb.checked = this.selectedRowIds.includes(rowId);
+            cb.disabled = row.disabled;
+            cb.value = rowId;
+            cb.setAttribute('aria-label', Table.getBodyRowCheckboxAriaLabel(row, selectionIdx));
+        });
+    }
+    getHeaderCheckboxCell() {
+        const idx = this.getSelectionColumnIndex();
+        if (idx === null)
+            return null;
+        const cells = this.getCompositionalHeaderCells();
+        const cell = cells[idx];
+        if (!cell || cell.getAttribute('type') !== 'checkbox')
+            return null;
+        return cell;
+    }
+    applyHeaderCheckboxState() {
+        const cell = this.getHeaderCheckboxCell();
+        if (!cell)
+            return;
+        const selectableRows = this.querySelectableBodyRows();
+        const ids = selectableRows
+            .map((r) => Table.getRowIdForRow(r))
+            .filter((id) => !!id);
+        const selectedCount = ids.filter((id) => this.selectedRowIds.includes(id)).length;
+        const allSelected = ids.length > 0 && selectedCount === ids.length;
+        const indeterminate = selectedCount > 0 && !allSelected;
+        cell.checked = allSelected;
+        cell.indeterminate = indeterminate;
+    }
+    syncRowSelectedProps() {
+        this.queryBodyRows().forEach((row) => {
+            const id = Table.getRowIdForRow(row);
+            const selected = id ? this.selectedRowIds.includes(id) : false;
+            row.selected = selected;
+        });
+    }
+    emitCompositionalSelection() {
+        const ids = this.selectedRowIds;
+        const key = ids.join('\u0001');
+        if (key === this.lastEmittedRowSelectionKey) {
+            return;
+        }
+        this.lastEmittedRowSelectionKey = key;
+        this.rowSelectionChange.emit({ selectedRowIds: [...ids] });
+    }
+    isEventFromThisTable(target) {
+        if (target == null || typeof target !== 'object')
+            return false;
+        const t = target;
+        const start = 'closest' in t && typeof t.closest === 'function'
+            ? t
+            : 'parentElement' in t
+                ? t.parentElement
+                : null;
+        if (!start)
+            return false;
+        const nearest = start.closest('xpl-table');
+        return nearest === this.el;
+    }
+    static sortKeyFromHeaderCell(cell, columnIndex) {
+        const c = cell;
+        const raw = (c.sortKey ?? c.label ?? '').trim();
+        if (raw.length > 0) {
+            return raw.replace(/ /g, '-').toLowerCase();
+        }
+        return `column-${columnIndex}`;
+    }
+    handleCompositionalHeaderSort(ev) {
+        if (this.isLegacyMode)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        ev.stopPropagation();
+        const source = ev.target;
+        const headerRow = source.closest('xpl-table-header xpl-table-row') ?? source.closest('xpl-table-row');
+        if (!headerRow || !this.el.contains(headerRow))
+            return;
+        const cells = Array.from(headerRow.querySelectorAll('xpl-table-header-cell'));
+        const { columnIndex } = ev.detail;
+        const target = cells[columnIndex];
+        if (!target?.sortable)
+            return;
+        const next = cycleSortDirection(target.sortDirection);
+        cells.forEach((cell, i) => {
+            const hc = cell;
+            if (!hc.sortable)
+                return;
+            hc.sortDirection = i === columnIndex ? next : null;
+        });
+        const sortState = {};
+        cells.forEach((cell, i) => {
+            const hc = cell;
+            if (!hc.sortable)
+                return;
+            sortState[Table.sortKeyFromHeaderCell(hc, i)] = hc.sortDirection ?? null;
+        });
+        const sortTypeArr = cells.map((cell) => {
+            const hc = cell;
+            return hc.sortable ? (hc.sortDirection ?? null) : null;
+        });
+        const colName = Table.sortKeyFromHeaderCell(cells[columnIndex], columnIndex);
+        const detail = {
+            ...sortState,
+            colNum: columnIndex,
+            colName,
+            sortTypeArr,
+        };
+        this.sortChanged.emit(detail);
+    }
+    legacySortStatePayload() {
+        const out = {};
+        if (!this.columns?.length)
+            return out;
+        this.columns.forEach((col, i) => {
+            const key = col.replace(/ /g, '-').toLowerCase();
+            out[key] = this.sortTypeArray[i] ?? null;
+        });
+        return out;
+    }
+    legacySortChangedDetail(colNum) {
+        const base = this.legacySortStatePayload();
+        const title = this.columns?.[colNum] ?? '';
+        const colName = title.replace(/ /g, '-').toLowerCase();
+        return {
+            ...base,
+            colNum,
+            colName,
+            sortTypeArr: [...this.sortTypeArray],
+        };
+    }
+    getCompositionalHeaderCells() {
+        const header = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
+        if (!header)
+            return [];
+        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+        const container = firstRow ?? header;
+        return Array.from(container.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell');
+    }
+    updateColumnWidths() {
+        const headerCells = this.getCompositionalHeaderCells();
+        const columnWidths = headerCells.map((cell) => getGridColumnWidthFromHeaderCell(cell));
+        const next = columnWidths.join(' ');
+        const n = headerCells.length;
+        if (n === this.colCount && this.colCount > 0 && this.columnWidthsToken === next) {
+            return;
+        }
+        this.el.style.setProperty('--column-widths', next);
+        this.colCount = n;
+        this.columnWidthsToken = next;
+    }
+    handleSort(clickEvt, isColumnSortable, colNum) {
+        clickEvt.preventDefault();
+        clickEvt.stopPropagation();
+        if (!isColumnSortable)
+            return;
+        this.sortTypeArray = this.sortTypeArray.map((val, i) => {
+            if (i !== colNum)
+                return null;
+            switch (val) {
+                case 'asc':
+                    return 'desc';
+                case 'desc':
+                    return null;
+                default:
+                    return 'asc';
+            }
+        });
+        const evt = this.sortChanged.emit(this.legacySortChangedDetail(colNum));
+        if (!evt.defaultPrevented)
+            this.sortBy(colNum, this.sortTypeArray);
+    }
+    renderLegacy() {
         if (this.columns &&
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        else if (!this.columns) {
-            this.sortTypeArray = [];
-        }
-    }
-    render() {
-        const rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
-        return (h(Host, { key: '1e6bf436320a44e1e22e8590a881bc90c4a091d5' }, h("div", { key: '3d2e5361fbe615a6ae8ebe916ce07e00f82c444c', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (h(Host, null, h("div", { class: "xpl-table-container", onScroll: this.onLegacyScroll, ref: (el) => {
                 if (el)
                     this.container = el;
-            } }, h("table", { key: '036672b3ba45a90a42f906c155ce3d59e33c8a7a', class: {
+            } }, h("table", { class: {
                 'xpl-table': true,
+                'xpl-table--legacy': true,
                 'xpl-table--striped': !!this.striped,
                 'xpl-table--freeze': !!this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (h("thead", { key: 'bf0d5a808624234ba985c1c32064f1dab11bfefa' }, this.columns.map((column, i) => {
-            const iconType = getIconType(this.sortTypeArray?.[i]);
-            const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
-            return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("xpl-checkbox", { checked: this.areAllSelected, indeterminate: !this.areAllSelected &&
-                    this.selected.some((a) => a), onClick: (e) => e.stopPropagation(), onCheckboxChange: (e) => this.selectAll(e), value: this.selectAllValue, "aria-label": "Select all rows" })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", { key: '7915dbfbf1a9b68719c4168e09c5f0e3ab7fa35a' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+            } }, this.columns && (h("thead", null, this.columns.map((column, i) => {
+            const iconType = getIconType(this.sortTypeArray?.[i] ?? null);
+            const isColumnSortable = !!(this.isSortable && this.sortableColumns?.[i]);
+            return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("input", { checked: this.areAllSelected, id: "__xpl-table-th", indeterminate: !this.areAllSelected &&
+                    this.selected.some((a) => a), onClick: (e) => {
+                    e.stopPropagation();
+                    this.selectAll(e);
+                }, type: "checkbox", value: this.selectAllValue })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
+        }))), h("tbody", null, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
-                : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", null, h("xpl-checkbox", { checked: !!this.selected[rowNum], onCheckboxChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
+                : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", { htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues &&
+                this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), rowFooterData.length > 0 && (h("tfoot", { key: '78ee72f80c77e61c6234be9500770780952ca669' }, rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), this.rowFooterData?.length > 0 && (h("tfoot", null, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+    }
+    renderCompositional() {
+        const selectionToolbarCount = this.selectedRowIds.length;
+        return (h(Host, { role: "grid", "aria-label": this.label, "aria-colcount": this.colCount > 0 ? this.colCount : undefined, class: {
+                'xpl-table': true,
+                'xpl-table--striped': !!this.striped,
+                'xpl-table--freeze': !!this.freeze,
+                'xpl-table--has-scrolled': this.hasScrolled,
+                'xpl-table--selectable': !!this.selectable,
+                'xpl-table--selection-active': !!this.selectable && this.selectedRowIds.length > 0,
+                'xpl-table--row-reorderable': !!this.rowReorderable,
+            }, onScroll: this.onGridScroll }, this.rowReorderable && (h("div", { class: "xpl-table__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)), this.selectable && (h("div", { class: {
+                'xpl-toolbar': true,
+                hidden: selectionToolbarCount === 0,
+                'xpl-table__toolbar': true,
+            } }, h("div", { class: "toolbar" }, h("p", { class: "selected-item-count" }, selectionToolbarCount, " Selected"), h("div", { class: "actions" }, h("slot", { name: "toolbar-actions-left" }), h("slot", { name: "toolbar-actions-right" }))))), h("slot", null)));
+    }
+    render() {
+        return this.isLegacyMode ? this.renderLegacy() : this.renderCompositional();
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "columns": [{
+                "watchColumns": 0
+            }],
         "data": [{
                 "watchData": 0
             }],
-        "columns": [{
-                "watchColumns": 0
+        "footer": [{
+                "watchFooterData": 0
+            }],
+        "reorderHandleIcon": [{
+                "watchReorderHandleIcon": 0
+            }],
+        "reorderHandleIconKeyboard": [{
+                "watchReorderHandleIconKeyboard": 0
+            }],
+        "rowReorderable": [{
+                "watchRowReorderable": 0
+            }],
+        "selectable": [{
+                "watchSelectable": 0
             }]
     }; }
 };