@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/components/nano-table.js

@@ -1,1950 +1,275 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { consoleError, h, Fragment, getElement, getRenderingRef, writeTask, readTask, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { h as h$1 } from './renderer.js';
-import { a as cyrb53 } from './math.js';
+import { proxyCustomElement, HTMLElement, Build, Host } from '@stencil/core/internal/client';
 import { d as debounce } from './throttle.js';
-import { f as findScrollParent } from './scroll-parent.js';
-import { c as createStore } from './index2.js';
-import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './progress-bar.js';
-import { d as defineCustomElement$5 } from './resize-observe.js';
-import { d as defineCustomElement$4 } from './skeleton.js';
-import { d as defineCustomElement$3 } from './spinner.js';
+import { t as transformTag, h } from './renderer.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './masked-overflow.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const CSSNAMESPACE = 'nano-tbl';
+const tableCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
 
-const isInstanceOf = (value, className) => {
-  const C = globalThis[className];
-  return C != null && value instanceof C;
-};
-const getTransferables = (value) => {
-  if (value != null) {
-    if (
-      isInstanceOf(value, "ArrayBuffer") ||
-      isInstanceOf(value, "MessagePort") ||
-      isInstanceOf(value, "ImageBitmap") ||
-      isInstanceOf(value, "OffscreenCanvas")
-    ) {
-      return [value];
-    }
-    if (typeof value === "object") {
-      if (value.constructor === Object) {
-        value = Object.values(value);
-      }
-      if (Array.isArray(value)) {
-        return value.flatMap(getTransferables);
-      }
-      return getTransferables(value.buffer);
-    }
-  }
-  return [];
-};
-
-let pendingIds = 0;
-let callbackIds = 0;
-const pending = new Map();
-const callbacks = new Map();
-
-const createWorker = (workerPath, workerName, workerMsgId) => {
-  const worker = new Worker(workerPath, {name:workerName});
-
-  worker.addEventListener('message', ({data}) => {
-    if (data) {
-      const workerMsg = data[0];
-      const id = data[1];
-      const value = data[2];
-
-      if (workerMsg === workerMsgId) {
-        const err = data[3];
-        const [resolve, reject, callbackIds] = pending.get(id);
-        pending.delete(id);
-
-        if (err) {
-          const errObj = (err.isError)
-            ? Object.assign(new Error(err.value.message), err.value)
-            : err.value;
-
-          consoleError(errObj);
-          reject(errObj);
-        } else {
-          if (callbackIds) {
-            callbackIds.forEach(id => callbacks.delete(id));
-          }
-          resolve(value);
-        }
-      } else if (workerMsg === workerMsgId + '.cb') {
-        try {
-          callbacks.get(id)(...value);
-        } catch (e) {
-          consoleError(e);
-        }
-      }
-    }
-  });
-
-  return worker;
-};
-
-const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
-  (...args) => new Promise((resolve, reject) => {
-    let pendingId = pendingIds++;
-    let i = 0;
-    let argLen = args.length;
-    let mainData = [resolve, reject];
-    pending.set(pendingId, mainData);
-
-    for (; i < argLen; i++) {
-      if (typeof args[i] === 'function') {
-        const callbackId = callbackIds++;
-        callbacks.set(callbackId, args[i]);
-        args[i] = [workerMsgId + '.cb', callbackId];
-        (mainData[2] = mainData[2] || []).push(callbackId);
-      }
-    }
-    const postMessage = (w) => (
-      w.postMessage(
-        [workerMsgId, pendingId, exportedMethod, args],
-        getTransferables(args)
-      )
-    );
-    if (worker.then) {
-      worker.then(postMessage);
-    } else {
-      postMessage(worker);
-    }
-  })
-);
-
-const workerPromise = import('./table.worker.js').then(m => m.worker);
-const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
-const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
-const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
-const workerFilter = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'workerFilter');
-const workerSearch = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'workerSearch');
-const workerSort = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'workerSort');
-
-function colsToWorker(columns) {
-    const safeColumns = JSON.parse(JSON.stringify(columns));
-    columns.forEach((c) => {
-        if (c?.sortCompareFn) {
-            const safeCol = safeColumns.find((sc) => sc.prop === c.prop);
-            safeCol.sortCompareFn = c.sortCompareFn.toString();
-        }
-    });
-    return safeColumns;
-}
-const stores = new WeakMap();
-async function generateStore(host, columns, scrollParent, isReady) {
-    const store = {
-        data: createStore({ rows: [] }),
-        config: createStore({ columns }),
-        general: createStore({ workerId: null, scrollParent, host, isReady }),
-    };
-    const id = await createWorkerStore(store.data.state.rows, colsToWorker(store.config.state.columns));
-    store.general.state.workerId = id;
-    stores.set(host, store);
-    // sync data from our store to our worker
-    store.data.use({
-        reset: () => {
-            if (store.general.state.workerId)
-                syncDataToWorker(store.general.state.workerId, null);
-        },
-        dispose: () => {
-            if (store.general.state.workerId)
-                syncDataToWorker(store.general.state.workerId, null);
-        },
-    });
-    store.config.use({
-        reset: () => {
-            if (store.general.state.workerId)
-                syncConfigToWorker(store.general.state.workerId, null);
-        },
-        dispose: () => {
-            if (store.general.state.workerId)
-                syncConfigToWorker(store.general.state.workerId, null);
-        },
-    });
-    return store;
-}
-function getStore(host) {
-    return stores.get(host);
-}
-function getDataType(value) {
-    if (value instanceof Date) {
-        return 'date';
-    }
-    if (['number', 'string', 'boolean'].includes(typeof value)) {
-        return typeof value;
-    }
-    return 'unknown';
-}
-function storeSetData(host, rows) {
-    const store = stores.get(host);
-    if (!store)
-        return;
-    const cols = store.config.state.columns;
-    const dateCols = cols
-        .filter((col) => col.type === 'date')
-        .reduce((prev, curr) => {
-        return [...prev, curr.prop];
-    }, []);
-    const unknownCols = cols.filter((col) => !col.type);
-    // augments data with some internal props.
-    // discern unknown column types
-    // convert dates to numbers for worker
-    rows = rows.map((row, i) => {
-        // try our best to discern the column type (from first row) if unset
-        if (unknownCols.length && i === 0) {
-            store.config.state.columns = cols.map((col) => {
-                if (unknownCols.includes(col) && row[col.prop] && !col.type) {
-                    col.type = getDataType(row[col.prop]);
-                    if (col.type === 'date')
-                        dateCols.push(col.prop);
-                }
-                return col;
-            });
-        }
-        // convert date columns into numbers to send to our worker
-        dateCols.forEach((colName) => {
-            // coerce any date type;
-            // Date(), timestamp, valid date string
-            const coerceDate = new Date(row[colName]);
-            if (!!coerceDate && Number(coerceDate))
-                row[colName] = Number(coerceDate);
-        });
-        row['__index'] = i;
-        row['__uuid'] = cyrb53(cols.map((c) => row[c.prop]).join());
-        return row;
-    });
-    store.data.state.rows = rows;
-    if (store.general.state.workerId)
-        return syncDataToWorker(store.general.state.workerId, rows);
-}
-function storeSetConfig(host, columns) {
-    const store = stores.get(host);
-    if (!store)
-        return;
-    store.config.state.columns = columns;
-    if (store.general.state.workerId)
-        return syncConfigToWorker(store.general.state.workerId, colsToWorker(columns));
-}
-async function storeSearch(host, term) {
-    const store = stores.get(host);
-    if (!store || !store.general.state.workerId)
-        return;
-    try {
-        store.data.state.rows = await workerSearch(store.general.state.workerId, term);
-    }
-    catch (e) {
-        console.warn(e);
-    }
-}
-async function storeFilter(host, filters) {
-    const store = stores.get(host);
-    if (!store || !store.general.state.workerId)
-        return;
-    try {
-        store.data.state.rows = await workerFilter(store.general.state.workerId, filters);
-    }
-    catch (e) {
-        console.warn(e);
-    }
-}
-async function storeSort(host, prop, order) {
-    const store = stores.get(host);
-    if (!store || !store.general.state.workerId)
-        return;
-    try {
-        store.data.state.rows = await workerSort(store.general.state.workerId, prop, order);
-    }
-    catch (e) {
-        console.warn(e);
-    }
-}
-
-/**
- * Get a model object for custom cell / property renderers.
- * @param rowIndex - the current row index being rendered
- * @param colIndex - the current column index being rendered
- * @returns a model object which will be passed to custom renderers
- */
-function colDataModel(rowIndex, colIndex) {
-    const store = fetchStores();
-    const columns = store.config.state.columns;
-    const rows = store.data.state.rows;
-    const column = columns[colIndex];
-    const prop = column?.prop;
-    const rowModel = rows[rowIndex];
-    const cellModel = rowModel ? rowModel[columns[colIndex].prop] : '';
-    return {
-        prop,
-        cellModel,
-        column,
-        rowIndex,
-        rowModel,
-    };
-}
-/**
- * Get a model object for custom row renderers.
- * @param rowIndex
- * @returns a model object passed to custom row renderers
- */
-function rowDataModel(rowIndex) {
-    const store = fetchStores();
-    const rows = store.data.state.rows;
-    const rowModel = rows[rowIndex];
-    return {
-        rowModel,
-        rowIndex,
-    };
-}
-/**
- * Merges 2 objects of properties together
- * @param current - property object
- * @param extra - additional object property
- * @returns - merged properties that can be applied to a node
- */
-function mergeProperties(current, extra) {
-    if (!extra)
-        return current;
-    // top level merge
-    const props = { ...extra, ...current };
-    // deeper merge
-    // merge classes maps or strings
-    if (extra.class) {
-        if (typeof extra.class === 'object' && typeof props.class === 'object') {
-            props.class = { ...extra.class, ...props.class };
-        }
-        else if (typeof extra.class === 'string' &&
-            typeof props.class === 'object') {
-            props.class[extra.class] = true;
-        }
-        else if (typeof props.class === 'string' &&
-            typeof extra.class === 'string') {
-            props.class += ' ' + extra.class;
-        }
-    }
-    // merge style
-    if (extra.style) {
-        props.style = { ...extra.style, ...props.style };
-    }
-    return props;
-}
-/**
- * Returns the current nano-table's stores.
- * @returns the current nano-table stores
- */
-function fetchStores() {
-    return getStore(getElement(getRenderingRef()));
-}
-/**
- * Merges any defined cell properties with properties
- * required by `nano-table` functionality
- * @param rowIndex - the current row index being rendered
- * @param colIndex = the current column index being rendered
- * @param defaultProps - default properties required by `nano-table`
- * @returns - the merged properties that will be applied to a node
- */
-function mergeCellProperties(rowIndex, colIndex, defaultProps) {
-    const props = { ...defaultProps };
-    const extraPropsFunc = fetchStores().config.state.columns[colIndex]?.cellProperties;
-    if (!extraPropsFunc)
-        return props;
-    const data = colDataModel(rowIndex, colIndex);
-    const extra = extraPropsFunc(data);
-    if (!extra)
-        return props;
-    return mergeProperties(props, extra);
-}
-/**
- * Renders a table header (within a thead) using a custom template if set.
- * @param col - the current column config object
- * @returns - a JSX node
- */
-function colheadFootRender(col) {
-    const tpl = col?.columnTemplate;
-    return tpl ? (tpl(h, col)) : (h(Fragment, null, col.title));
-}
-function headerPinClasses(type, vPinned, toString = false) {
-    const classes = {
-        [`${CSSNAMESPACE}__${type}`]: true,
-        [`${CSSNAMESPACE}__pin`]: !!vPinned,
-        [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',
-        [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',
-    };
-    if (toString)
-        return classListToStr(classes);
-    return classes;
-}
-/**
- * Turns a class map {'string': boolean} to class string
- * @param classes - the class map to convert
- * @returns a class string
- */
-function classListToStr(classes) {
-    let classString = '';
-    Object.entries(classes).forEach(([className, on]) => {
-        if (on)
-            classString += className + ' ';
-    });
-    return classString;
-}
-/**
- * Checks whether an element is currently viewable within the viewport
- * @param el - element to check
- * @param percentVisible - the percentage of the element that should be within the viewport
- * @returns true if the element's area percentage is visible
- */
-function isInViewport(el, percentVisible = 100) {
-    const r = el.getBoundingClientRect();
-    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
-    if (!r.bottom &&
-        !r.top &&
-        !r.left &&
-        !r.right &&
-        !r.height &&
-        !r.width &&
-        !r.x &&
-        !r.y)
-        return false;
-    return !(Math.floor(100 - ((r.top >= 0 ? 0 : r.top) / +-r.height) * 100) <
-        percentVisible ||
-        Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <
-            percentVisible);
-}
-
-const TableColHead = ({ column, onColumnSortClick, defaults, }) => {
-    // Sort handling
-    function handleColumnSortClick(e) {
-        let order;
-        switch (column.order) {
-            case 'asc':
-                order = 'desc';
-                break;
-            case 'desc':
-                order = null;
-                break;
-            default:
-                order = 'asc';
-        }
-        onColumnSortClick(order, column.prop, e.target.closest('th'));
-    }
-    function isSortable() {
-        return ((!!defaults.sortable && column.sortable !== false) ||
-            (!defaults.sortable && column.sortable === true));
-    }
-    let extraProps = {};
-    if (column.columnProperties) {
-        extraProps = column.columnProperties(column) || extraProps;
-    }
-    const baseProps = {
-        class: {
-            ...headerPinClasses('th', column.pinned),
-            [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
-            [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
-            [`${CSSNAMESPACE}__ordered`]: !!column.order,
-            [`${CSSNAMESPACE}__filtered`]: column.filter !== undefined && column.filter !== null,
-        },
-    };
-    let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-    const content = colheadFootRender(column);
-    if (!content)
-        return h$1(Fragment, null);
-    props =
-        Number(props.colSpan) > 1
-            ? { ...props, scope: 'colgroup' }
-            : { ...props, scope: 'col' };
-    if (isSortable()) {
-        const sort = column.order
-            ? column.order === 'asc'
-                ? 'ascending'
-                : 'descending'
-            : 'none';
-        props = { ...props, 'aria-sort': sort };
-    }
-    return (h$1("th", { ...props, key: column.prop }, isSortable() ? (h$1("button", { class: {
-            [`${CSSNAMESPACE}__order-btn`]: true,
-            [`${CSSNAMESPACE}__cell-content`]: true,
-        }, onClick: handleColumnSortClick },
-        colheadFootRender(column),
-        column.filter !== undefined && column.filter !== null && (h$1("nano-icon", { name: "light/filter" })),
-        !!column.order &&
-            (column.order === 'desc' ? (h$1("nano-icon", { name: "solid/arrow-down-long" })) : (h$1("nano-icon", { name: "solid/arrow-up-long" }))),
-        h$1("div", { class: `${CSSNAMESPACE}__status-icons` },
-            h$1("nano-icon", { name: "light/chevron-down" })))) : (h$1("div", { class: `${CSSNAMESPACE}__cell-content` },
-        colheadFootRender(column),
-        column.filter !== undefined && column.filter !== null && (h$1("nano-icon", { name: "light/bars-filter" }))))));
-};
-
-// TABLE CELL
-// (tbody > tr > td, tbody > tr > th)
-/**
- * Renders a cell using a custom renderer if set.
- * @param rowIndex - the current row index being rendered
- * @param colIndex - the current column index being rendered
- * @returns - a JSX node
- */
-function cellRender(rowIndex, colIndex) {
-    const store = fetchStores();
-    const columns = store.config.state.columns;
-    const tpl = columns[colIndex]?.cellTemplate;
-    const model = colDataModel(rowIndex, colIndex);
-    const tableInstance = getRenderingRef();
-    if (!!model.cellModel && columns[colIndex].type === 'date') {
-        const d = new Date(model.cellModel);
-        if (d instanceof Date && !isNaN(d)) {
-            model.cellModel = !tpl
-                ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(model.cellModel).toLocaleTimeString()}`
-                : d;
-        }
-    }
-    // Wrap the h pragma, then we can know if we're using Stencil's
-    // jsx renderer or a different one
-    let hCalled = false;
-    const hWrap = (...args) => {
-        hCalled = true;
-        // @ts-expect-error - h mismatch
-        return h$1(...args);
-    };
-    let tplResult = tpl ? tpl(hWrap, model) : undefined;
-    if (tplResult &&
-        tableInstance.customRenderer &&
-        tplResult['$attrs$'] === undefined &&
-        !(tplResult instanceof Element) &&
-        typeof tplResult !== 'string' &&
-        !hCalled) {
-        // template result is jsx *not* from Stencil.
-        // Render it now and output it later.
-        const templateEle = document.createElement('template');
-        const result = tableInstance.customRenderer(tplResult, templateEle.content);
-        // custom rendering can render to the templateEle OR return a promise<string>
-        tplResult = result && result['then'] ? result : templateEle;
-    }
-    return tplResult ? (tplResult) : model.cellModel !== undefined && model.cellModel !== null ? (h$1(Fragment, null, model.cellModel?.toString())) : ('');
-}
-const baseCellClasses = (colIndex, toString = false) => {
-    const store = fetchStores();
-    const column = store.config.state.columns[colIndex];
-    const classes = {
-        [`${CSSNAMESPACE}__td`]: true,
-        [`${CSSNAMESPACE}__ordered`]: !!column.order,
-        [`${CSSNAMESPACE}__pin`]: !!column.pinned,
-        [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',
-        [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',
-    };
-    if (toString)
-        return classListToStr(classes);
-    return classes;
-};
-const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
-    const Content = () => nestedContent
-        ? nestedContent()
-        : cellRender(rowIndex, colIndex) || (h$1("span", { class: "placeholder" }, "\u00A0"));
-    let CellType = 'td';
-    const tableInstance = getRenderingRef();
-    const store = fetchStores();
-    const column = store.config.state.columns[colIndex];
-    let props = mergeCellProperties(rowIndex, colIndex, {
-        class: baseCellClasses(colIndex),
-    });
-    if (column.rowHeader) {
-        props =
-            Number(props.rowSpan) > 1
-                ? { ...props, scope: 'rowgroup' }
-                : { ...props, scope: 'row' };
-        CellType = 'th';
-    }
-    const ContentWrap = (props) => {
-        const content = Content();
-        return (h$1("div", { ref: (d) => {
-                if (!d)
-                    return;
-                if (content instanceof Element) {
-                    // custom rendered an element
-                    d.replaceChildren();
-                    d.append(content['content'] || content);
-                }
-                else if (content['then']) {
-                    // custom rendered a promise. Most likely within SSR.
-                    content.then((res) => (d.innerHTML = res));
-                }
-            }, ...props, class: {
-                [`${CSSNAMESPACE}__cell-content`]: true,
-                [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,
-            }, innerHTML: typeof content === 'string' && content.includes('<')
-                ? content
-                : undefined }, (typeof content !== 'string' || !content.includes('<')) &&
-            !content['then'] &&
-            !(content instanceof Element) &&
-            content));
-    };
-    return (h$1(CellType, { role: tableInstance.type === 'grid' ? 'gridcell' : undefined, ...props }, column.autoTooltip && !column.wrap ? (h$1("nano-resize-observe", { notifyContentFit: "x", onNanoResizeContentFitChange: (e) => (e.target.firstElementChild.disabled =
-            e.detail.x) },
-        h$1("nano-tooltip", { disabled: true, placement: "top", onNanoShow: (e) => (e.target.closest(CellType).style.zIndex = '100'), onNanoHide: (e) => (e.target.closest(CellType).style.zIndex = '') },
-            h$1(ContentWrap, null),
-            h$1("span", { slot: "content" },
-                h$1(Content, null))))) : (h$1(ContentWrap, null))));
-};
-
-const tableCellContent = (props, children, ctx) => {
-    const cell = (h$1("div", { ...props.wrapperProps, class: {
-            [`${CSSNAMESPACE}__cell-content`]: true,
-            [`${CSSNAMESPACE}__cell-content--wrap`]: props.wrap,
-        } }, children));
-    return props.header ? (h$1("th", { scope: ctx, ...props.cellProps }, cell)) : (h$1("td", { ...props.cellProps }, cell));
-};
-const TableRow = ({ rowRenderer, rowIndex, rowModel }, children, utils) => {
-    // helper, generates <td> or <th>
-    const TableCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
-        return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'row');
-    };
-    let extraProps = {};
-    if (!rowModel) {
-        const model = rowDataModel(rowIndex);
-        rowModel = model.rowModel;
-    }
-    if (rowRenderer?.rowProperties) {
-        extraProps =
-            rowRenderer.rowProperties({ rowModel, rowIndex }) || extraProps;
-    }
-    let rowPinned;
-    if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {
-        rowPinned = rowRenderer.pinned({ rowModel, rowIndex });
-    }
-    const props = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, extraProps);
-    const tpl = rowRenderer?.template;
-    /**
-     * Applies appropriate classes to td / th VNodes;
-     * which can be supplied by user defined templates
-     * @param children virtual / jsx node array
-     * @returns virtual / jsx node array
-     */
-    const applyCellClasses = (children) => {
-        return utils.map(children, (cNode, i) => {
-            if (['td', 'th'].includes(cNode.vtag.toString())) {
-                cNode.vattrs = mergeProperties({
-                    class: baseCellClasses(i, true),
-                }, cNode.vattrs);
-            }
-            return cNode;
-        });
-    };
-    if (tpl) {
-        let toRender = tpl(h$1, {
-            renderedRow: (h$1("tr", { ...props, key: rowModel.__uuid }, children)),
-            rowModel,
-            rowIndex,
-        }, TableCell);
-        if (Array.isArray(toRender)) {
-            toRender = utils.map(toRender, (node, i) => {
-                if (node.vtag === 'tr') {
-                    if (!node.vkey)
-                        node.vkey = `${rowModel.__uuid}_${i}`;
-                    node.vattrs = mergeProperties({ class: headerPinClasses('tr', rowPinned, true) }, node.vattrs);
-                    if (node.vchildren) {
-                        node.vchildren = applyCellClasses(node.vchildren);
-                    }
-                }
-                return node;
-            });
-        }
-        return toRender;
-    }
-    return (h$1("tr", { ...props, key: rowModel.__uuid }, applyCellClasses(children)));
-};
-const TableHeadFootRow = ({ rowRenderer }, // onRowPinned, onColPinned
-children, utils) => {
-    let extraProps = {};
-    if (rowRenderer.rowProperties) {
-        extraProps = rowRenderer.rowProperties() || {};
-    }
-    const TableHeadFootCell = ({ header, wrap, cellProps, wrapperProps }, children) => {
-        return tableCellContent({ header, wrap, cellProps, wrapperProps }, children, 'col');
-    };
-    const pinned = rowRenderer.pinned || null;
-    const baseProps = { class: headerPinClasses('tr', pinned) };
-    const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-    const tpl = rowRenderer?.template;
-    if (tpl) {
-        let toRender = tpl(h$1, {
-            renderedRow: h$1("tr", { ...props }, children),
-        }, TableHeadFootCell);
-        if (Array.isArray(toRender)) {
-            toRender = utils.map(toRender, (node) => {
-                if (node.vtag === 'tr') {
-                    node.vattrs = mergeProperties({ class: headerPinClasses('tr', pinned, true) }, node.vattrs);
-                    if (node.vchildren) {
-                        node.vchildren = utils.map(node.vchildren, (cNode) => {
-                            if (['td', 'th'].includes(cNode.vtag.toString())) {
-                                cNode.vattrs = mergeProperties({
-                                    class: headerPinClasses(cNode.vtag.toString(), pinned, true),
-                                }, cNode.vattrs);
-                            }
-                            return cNode;
-                        });
-                    }
-                }
-                return node;
-            });
-        }
-        return toRender;
-    }
-    return h$1("tr", { ...props }, children);
-};
-
-function addStyleSheet(id, css) {
-    const styleSheet = document.getElementById(id) ||
-        document.createElement('style');
-    styleSheet.id = id;
-    styleSheet.innerHTML = css;
-    if (!styleSheet.isConnected)
-        document.head.append(styleSheet);
-}
-/**
- * Manages the complex business of table 'pinning'; sticking columns and rows to the scrolling parent element.
- *
- * *knowing* when an element is pinned is tricky.
- * Managing the display of multiple, side-by-side pinned elements is trickier still.
- *
- * Pinning table columns are very different from pinning table rows:
- * - Rows are actual elements we can select, measure and apply styles to.
- * - Columns are disparate collections of elements that are much harder to select, measure and apply styles to.
- *
- * With this in mind, how columns and rows are pinned is different:
- * Rows can have changes applied directly, Columns have changes applied via dynamic stylesheets.
- *
- * The service is slightly opinionated on how it pins rows and columns (with some room for override):
- * - Pinned columns are stuck consecutively, without overlapping.
- * e.g. If column 'name' and 'surname' are both `pin: 'start'`; 'surname' will display **next** to name.
- * Both columns are important for context
- *
- * - Pinned rows are set to overlap *when* they have the same ancestor,
- * and stuck consecutively when they have a different ancestor.
- * e.g. `tbody > tr.pin ~ tr.pin` the second row will **overlap** the first; it's unlikely both rows will be important for context.
- * `thead > tr.pin`, `tbody > tr.pin`. Both rows are required for context so will require next to each other.
- *
- * Devs can override this behaviour by setting `--pin-start`, `--pin-end`, `--pin-top`, `--pin-bottom` custom vars.
- */
-class TablePinService {
-    // Private state
-    cachedColMeta = new WeakMap();
-    tableId;
-    tableEle;
-    scrollElement;
-    startColumns;
-    endColumns;
-    topRows;
-    bottomRows;
-    tableDims;
-    constructor(table, scrollElement) {
-        this.tableEle = table;
-        this.tableId = this.tableEle.id;
-        this.scrollElement = scrollElement;
-        // Secret sauce - `getElementsByClassName` is a live collection.
-        // An HTMLCollection will keep itself up-to-date as elements come and go
-        // So we can keep assessing on scroll
-        this.startColumns = table
-            .querySelector('thead')
-            .getElementsByClassName(`${CSSNAMESPACE}__pin--start`);
-        this.endColumns = table
-            .querySelector('thead')
-            .getElementsByClassName(`${CSSNAMESPACE}__pin--end`);
-        this.topRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--top`);
-        this.bottomRows = table.getElementsByClassName(`${CSSNAMESPACE}__pin--bottom`);
-        this.onResize();
-    }
-    // Pinned cols & change detection
-    get pinnedStart() {
-        return this._pinnedStart;
-    }
-    set pinnedStart(cols) {
-        this._pinnedStart = cols;
-        this.handlePinnedStartChange();
-    }
-    _pinnedStart = [];
-    /**
-     * Called when columns are either pinned or unpinned.
-     * Attaches a tiny stylesheet to target the 'last' start column.
-     * (e.g. We only want to apply drop shadow on last pinned start column - not all pinned columns)
-     */
-    handlePinnedStartChange() {
-        writeTask(() => {
-            if (this.pinnedStart.length) {
-                this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--start`);
-                const lastActiveCol = this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length - 1]);
-                addStyleSheet(`${this.tableId}-col-start-active-style`, 
-                /* css */ `
-          #${this.tableId} tr > :nth-child(${lastActiveCol.idx + 1}) {
-            --pin-start-active: 1;
-          }
-        `);
-            }
-            else {
-                this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--start`);
-                addStyleSheet(`${this.tableId}-col-start-active-style`, ``);
-            }
-        });
-    }
-    get pinnedEnd() {
-        return this._pinnedEnd;
-    }
-    set pinnedEnd(cols) {
-        this._pinnedEnd = cols;
-        this.handlePinnedEndChange();
-    }
-    _pinnedEnd = [];
-    /**
-     * Called when columns are either pinned or unpinned.
-     * Attaches a tiny stylesheet to target the 'first' end column.
-     * (e.g. We only want to apply drop shadow on first pinned end column - not all pinned columns)
-     */
-    handlePinnedEndChange() {
-        writeTask(() => {
-            if (this.pinnedEnd.length) {
-                this.tableEle.classList.add(`${CSSNAMESPACE}__pinned--end`);
-                const firstActiveCol = this.cachedColMeta.get(this.pinnedEnd[0]);
-                addStyleSheet(`${this.tableId}-col-end-active-style`, 
-                /* css */ `
-          #${this.tableId} tr > :nth-child(${firstActiveCol.idx + 1}) { --pin-end-active: 1; }
-        `);
+const NanoTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoTable extends HTMLElement {
+    get host() { return this; }
+    propsReady = false;
+    /** If true, the table will be rendered in a compact style. */
+    compact = 'auto';
+    handleCompactChange() {
+        this.setupProperties();
+    }
+    /** If true, will render any nested table in a scrollable container (using `overflow: auto`) */
+    scrollable = true;
+    /** Visually hide the table's caption */
+    hideCaption = false;
+    handleHideCaptionChange() {
+        const caption = this.caption;
+        if (!caption)
+            return;
+        caption.classList.toggle('visually-hidden', this.hideCaption);
+    }
+    resizeObserver;
+    mutationObserver;
+    intersectionObserver;
+    settingUp = false;
+    get table() {
+        return this.host.querySelector('table');
+    }
+    get caption() {
+        const caption = this.host.querySelector('caption');
+        if (!caption) {
+            console.error('nano-table: No caption found. For better a11y, please add a <caption> element to the table.');
+            return null;
+        }
+        return caption;
+    }
+    setupProperties = () => {
+        const table = this.table;
+        if (!table || this.settingUp)
+            return;
+        this.settingUp = true;
+        // Clickable rows
+        const rows = Array.from(this.host.querySelectorAll('tr'));
+        for (const row of rows) {
+            if (this.getRowClickElements(row).length === 1) {
+                row.setAttribute('clickable', 'true');
+                row.addEventListener('click', this.rowClickHandler);
             }
             else {
-                this.tableEle.classList.remove(`${CSSNAMESPACE}__pinned--end`);
-                addStyleSheet(`${this.tableId}-col-end-active-style`, ``);
+                row.removeAttribute('clickable');
+                row.removeEventListener('click', this.rowClickHandler);
             }
-        });
-    }
-    get cssColDimensionCacheKey() {
-        return this._cssColDimensionCacheKey;
-    }
-    set cssColDimensionCacheKey(key) {
-        if (key === this._cssColDimensionCacheKey)
-            return;
-        this._cssColDimensionCacheKey = key;
-        this.createPinnedColDimensionStyles();
-    }
-    _cssColDimensionCacheKey = '';
-    /**
-     * To only generate column dimension styles when necessary we
-     * maintain a cache key string via serialised column meta.
-     * Only when this key changes do we generate a new stylesheet
-     */
-    generateCssCacheKey() {
-        let key = '';
-        for (const col of this.startColumns) {
-            const colMeta = this.cachedColMeta.get(col);
-            key += `${colMeta.idx}-start-${colMeta.width}`;
         }
-        for (const col of this.endColumns) {
-            const colMeta = this.cachedColMeta.get(col);
-            key += `${colMeta.idx}-start-${colMeta.width}`;
-        }
-        this.cssColDimensionCacheKey = key;
-    }
-    /**
-     * Generates pinned column width offset styles
-     * so pinned columns can appear stuck together,
-     * then attaches a stylesheet.
-     */
-    createPinnedColDimensionStyles() {
-        let widthS = 0;
-        let widthE = 0;
-        const startCols = Array.from(this.startColumns);
-        const endCols = Array.from(this.endColumns).reverse();
-        const css = /* css */ `
-      ${startCols
-            .map((col) => {
-            const colMeta = this.cachedColMeta.get(col);
-            widthS += colMeta.width - 1 || -1;
-            return /* css */ `
-            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ td,
-            #${this.tableId} tr > :nth-child(${colMeta.idx + 1}) ~ th {
-              --pin-start: ${widthS - 1}px;
+        // Sticky columns and rows
+        const tableSections = table.querySelectorAll('thead, tbody, tfoot');
+        let offset = 0;
+        if (table.querySelector('[sticky=start], [sticky=end]')) {
+            for (const section of tableSections) {
+                const sectionHeight = section.offsetHeight;
+                // this is used to make the column shadows when the columns stick;
+                // it allows to have one long shadow instead of one per row
+                section.style.setProperty('--section-height', `${sectionHeight}px`);
             }
-          `;
-        })
-            .join('')}
-      ${endCols
-            .map((col) => {
-            const colMeta = this.cachedColMeta.get(col);
-            widthE += colMeta.width - 1 || -1;
-            return /* css */ `
-            #${this.tableId} tr > td:has(~ :nth-child(${colMeta.idx + 1})),
-            #${this.tableId} tr > th:has(~ :nth-child(${colMeta.idx + 1})) {
-              --pin-end: ${widthE - 1}px;
-            }
-          `;
-        })
-            .join('')}
-    `;
-        addStyleSheet(`${this.tableId}-dimension-style`, css);
-    }
-    getParentOffsets() {
-        const { x, y } = this.scrollElement.getBoundingClientRect();
-        let offsetX = x;
-        let offsetY = y;
-        if (this.scrollElement === document.documentElement) {
-            offsetX = this.scrollElement.offsetLeft;
-            offsetY = this.scrollElement.offsetTop;
-        }
-        return { offsetX, offsetY };
-    }
-    /**
-     * Loops through all 'top' & 'bottom' rows (on scroll or resize)
-     * Manages their visual state by applying classes on stuck / unstuck
-     * And their pinned offset / distance
-     */
-    assessRows() {
-        if (!this.topRows.length && !this.bottomRows.length)
-            return;
-        // top rows
-        if (this.topRows.length) {
-            readTask(async () => {
-                let heightAggregate = 0;
-                let cacheParent;
-                const { offsetY } = this.getParentOffsets();
-                for (const topRow of this.topRows) {
-                    const { y, height } = topRow.getBoundingClientRect();
-                    const currParent = topRow.parentElement;
-                    // we'll use the applied `--pin-top` css var to decide row offset.
-                    // This allows devs to override this behaviour through selector specificity
-                    const pinTop = getComputedStyle(topRow).getPropertyValue('--pin-top');
-                    const offset = pinTop !== '' ? parseFloat(pinTop) : heightAggregate;
-                    // we need to wait for the row to finish sticking
-                    // and generating it's offset (`--pin-top`) so we can see, on
-                    // subsequent rows *if* the offset was applied
-                    writeTask(() => {
-                        if (y - offsetY <= offset) {
-                            topRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
-                        }
-                        else {
-                            topRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--top`);
-                        }
-                        // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
-                        // so only aggregate height / offset when cacheParent is different from current parent.
-                        // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
-                        if (cacheParent !== currParent) {
-                            currParent.style.setProperty('--pin-top', `${heightAggregate - 1}px`);
-                            heightAggregate += height - 1;
-                            cacheParent = currParent;
-                        }
-                    });
-                }
-            });
-        }
-        // bottom rows
-        if (this.bottomRows.length) {
-            const bottomRows = Array.from(this.bottomRows).reverse();
-            readTask(async () => {
-                let cacheParent;
-                let heightAggregate = 0;
-                const { offsetY } = this.getParentOffsets();
-                for (const bottomRow of bottomRows) {
-                    if (!bottomRow.isConnected)
-                        continue;
-                    const { y, height } = bottomRow.getBoundingClientRect();
-                    const currParent = bottomRow.parentElement;
-                    // we'll use the applied `--pin-bottom` css var to decide row offset.
-                    // This allows devs to override this behaviour through selector specificity
-                    const pinBottom = getComputedStyle(bottomRow).getPropertyValue('--pin-bottom');
-                    const offset = pinBottom !== '' ? parseFloat(pinBottom) : heightAggregate;
-                    // we need to wait for the row to finish sticking
-                    // and generating it's offset (`--pin-bottom`) to we can see, on
-                    // subsequent rows *if* the offset was applied
-                    await new Promise((resolve) => writeTask(() => {
-                        if (this.tableDims.height + offsetY - (y + height) <= offset) {
-                            bottomRow.classList.add(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
-                        }
-                        else {
-                            bottomRow.classList.remove(`${CSSNAMESPACE}__pinned`, `${CSSNAMESPACE}__pinned--bottom`);
-                        }
-                        // by default, we only want to stick one row from each parental block (thead, tbody, tfoot)
-                        // so only aggregate height / offset when cacheParent is different from current parent.
-                        // Devs can override this behaviour by manually setting `--pin-bottom` on the table row
-                        if (cacheParent !== currParent) {
-                            currParent.style.setProperty('--pin-bottom', `${heightAggregate - 1}px`);
-                            heightAggregate += height - 1;
-                            cacheParent = currParent;
-                        }
-                        resolve();
-                    }));
-                }
-            });
-        }
-    }
-    /**
-     * Loops through all 'start' & 'end' columns (on scroll or resize)
-     * Caches meta about each column (e.g. size, position-index)
-     * and decides which columns are pinned
-     */
-    async assessCols() {
-        if (!this.startColumns.length && !this.endColumns.length)
-            return;
-        let boundBox;
-        let currPinned;
-        let parentEles;
-        const done = new Promise((resolve) => {
-            // start cols
-            if (this.startColumns.length) {
-                readTask(() => {
-                    const { offsetX } = this.getParentOffsets();
-                    // cumulatively add widths of columns together
-                    // 'cos columns stick together
-                    let widthAggregate = offsetX;
-                    parentEles = Array.from(this.startColumns[0].parentElement.children);
-                    for (const startCol of this.startColumns) {
-                        boundBox = startCol.getBoundingClientRect();
-                        // cache meta for later
-                        this.cachedColMeta.set(startCol, {
-                            width: boundBox.width,
-                            idx: parentEles.indexOf(startCol),
-                        });
-                        currPinned = this.pinnedStart.find((c) => c === startCol);
-                        if (boundBox.x < widthAggregate) {
-                            // this column is pinned
-                            if (!currPinned)
-                                this.pinnedStart = [
-                                    ...this.pinnedStart,
-                                    startCol,
-                                ];
-                        }
-                        else if (currPinned) {
-                            // this column is unpinned
-                            this.pinnedStart = this.pinnedStart.filter((c) => c !== startCol);
-                        }
-                        widthAggregate += boundBox.width;
+            const headCols = Array.from(this.host.querySelectorAll('thead th, thead td'));
+            for (const col of headCols) {
+                if (col.matches('[sticky=start]')) {
+                    this.makeCellsSticky(col, 'start', offset);
+                    if (offset > 0) {
+                        col.style.setProperty('--sticky-start', `${offset}px`);
                     }
-                    if (!this.endColumns.length)
-                        resolve();
-                });
+                    offset += col.offsetWidth - 1;
+                }
             }
-            // end cols
-            if (this.endColumns.length) {
-                readTask(() => {
-                    const endCols = Array.from(this.endColumns).reverse();
-                    parentEles = Array.from(this.endColumns[0].parentElement.children);
-                    const { offsetX } = this.getParentOffsets();
-                    // cumulatively add widths of columns together
-                    // 'cos columns stick together
-                    let widthAggregate = 0;
-                    for (const endCol of endCols) {
-                        boundBox = endCol.getBoundingClientRect();
-                        // cache meta for later
-                        this.cachedColMeta.set(endCol, {
-                            width: boundBox.width,
-                            idx: parentEles.indexOf(endCol),
-                        });
-                        currPinned = this.pinnedEnd.find((c) => c === endCol);
-                        if (this.tableDims.width + offsetX - boundBox.right <=
-                            widthAggregate) {
-                            // this column is pinned
-                            if (!currPinned)
-                                this.pinnedEnd = [endCol, ...this.pinnedEnd];
-                        }
-                        else if (currPinned) {
-                            // this column is unpinned
-                            this.pinnedEnd = this.pinnedEnd.filter((c) => c !== endCol);
-                        }
-                        widthAggregate += boundBox.width;
+            offset = 0;
+            for (const col of [...headCols].reverse()) {
+                if (col.matches('[sticky=end]')) {
+                    this.makeCellsSticky(col, 'end', offset);
+                    if (offset > 0) {
+                        col.style.setProperty('--sticky-end', `${offset}px`);
                     }
-                    resolve();
-                });
-            }
-        });
-        await done;
-        // potentially generate a new css stylesheet if anything changed
-        this.generateCssCacheKey();
-    }
-    cacheX = 0;
-    cacheY = 0;
-    onScroll(pos) {
-        if (this.cacheX !== pos.x) {
-            this.cacheX = pos.x;
-            this.assessCols();
-        }
-        if (this.cacheY !== pos.y) {
-            this.cacheY = pos.y;
-            this.assessRows();
-        }
-    }
-    onResize() {
-        const width = this.scrollElement.clientWidth;
-        const height = this.scrollElement.clientHeight;
-        this.tableDims = { width, height };
-        this.assessCols();
-        this.assessRows();
-    }
-}
-
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:\"\";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl .nano-skeleton{line-height:var(--cell-line-height)}";
-const NanoTableStyle0 = tableCss;
-
-const measurePerf = false;
-function perMark(name, end = false) {
-    if (!performance || !measurePerf)
-        return;
-    if (end) {
-        performance?.mark('end' + name);
-        performance?.measure(name, 'start' + name, 'end' + name);
-        const entries = performance?.getEntriesByName(name);
-        console.info(entries[entries.length ? entries.length - 1 : 0]);
-    }
-    else {
-        performance?.mark('start' + name);
-    }
-}
-let id = 0;
-const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.nanoTblReady = createEvent(this, "nanoTblReady", 7);
-        this.nanoTblBlockRendered = createEvent(this, "nanoTblBlockRendered", 7);
-        this.nanoTblBeforeSort = createEvent(this, "nanoTblBeforeSort", 7);
-        this.nanoTblAfterSort = createEvent(this, "nanoTblAfterSort", 7);
-        this.nanoTblBeforeFilter = createEvent(this, "nanoTblBeforeFilter", 7);
-        this.nanoTblAfterFilter = createEvent(this, "nanoTblAfterFilter", 7);
-        this.nanoTblBeforeSearch = createEvent(this, "nanoTblBeforeSearch", 7);
-        this.nanoTblAfterSearch = createEvent(this, "nanoTblAfterSearch", 7);
-        this.nanoTblBeforeEdit = createEvent(this, "nanoTblBeforeEdit", 7);
-        this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
-    }
-    // Public API
-    // Props
-    /** Function called whenever `col.cellTemplate` renders an unknown object.
-     * The function should render a valid HTMLElement to the cell arg.
-     * Example usage - render JSX from a 3rd party lib and append the result to the cell element. */
-    customRenderer;
-    /** The type of table. Grid type will make cells navigable by keyboard */
-    type = 'table';
-    /** A descriptive title of the table.
-     * You must use this or the `slot="caption"` for accessibility */
-    caption;
-    /** Show the caption on-screen */
-    showCaption = false;
-    /** Will show a loading state when set to true.
-     * By default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy
-     * *or* when performing custom filtering or sorting.
-     * *Note* when set manually, will overwrite any internal loading state.
-     * Set to 'undefined' to revert to default behaviour. */
-    loading = undefined;
-    get _loading() {
-        return this.loading !== undefined ? this.loading : this.internalLoading;
-    }
-    set _loading(l) {
-        if (this.loading !== undefined)
-            return;
-        this.debounceSetLoading(l);
-    }
-    debounceSetLoading(l) {
-        this.internalLoading = l;
-    }
-    internalLoading = true;
-    /** When loading rows asynchronously, this will render this number of placeholder rows */
-    placeholderSize = 5;
-    /** The data to place in the table */
-    rows;
-    handleRowsChange() {
-        if (!this.rows) {
-            this._loading = true;
-            return;
-        }
-        this._loading = true;
-        Promise.resolve(this.rows).then(async (rows) => {
-            await storeSetData(this.host, rows);
-            // reset everything
-            this.currentFilters = '';
-            this.currentSort = '';
-            await this.columnInit();
-            if (!this.isReady)
-                requestAnimationFrame(() => this.setInitialBlockDimension());
-            this._loading = false;
-            if (this.tablePinnedService)
-                this.tablePinnedService.assessRows();
-        });
-    }
-    /** The column config used to present the rows of data */
-    columns = [];
-    async handleColsChange() {
-        await storeSetConfig(this.host, this.columns);
-        if (this.isReady)
-            this.columnInit();
-    }
-    /** Used for custom thead row rendering */
-    headRender = { pinned: 'top' };
-    /** Used for custom row rendering */
-    rowRender;
-    /** Used for custom tfoot row rendering */
-    footRender = { pinned: 'bottom' };
-    /** Whether to show a `<tfoot>` component */
-    showFooter = false;
-    /** To improve performance, data is split into blocks
-     * which are shown / hidden and rendered as they become visible.
-     * Use this to control the number of hits within a block -
-     * A block should fill a scrolling viewport.
-     * The less perBlock the better for performance */
-    perBlock = 50;
-    /** The number of total blocks currently rendered in the table. @readonly */
-    get blocksLength() {
-        return this.blocks.length;
-    }
-    /** Term to search for in the data */
-    searchTerm;
-    /** A custom filtering function. Should return a promise.
-     * If the promise resolves as `true` the column UI will be updated.
-     * If the promise resolves as falsy, the sort will be performed by the component.
-     * A good use-case would be performing the filter on a server / via fetch.
-     * Then on success, updating the table's data via the `rows` property */
-    customFilterFn;
-    /** A custom sorting function. Should return a promise.
-     * If the promise resolves as `true` the column UI will be updated.
-     * If the promise resolves as falsey, the sort will be performed by the component.
-     * A good use-case would be performing the sort on a server / via fetch.
-     * Then on success, updating the table's data via the `rows` property */
-    customSortFn;
-    /**
-     * The default sortable option for all columns.
-     * `true` will enable column sorting unless you set `sortable: false` on a column
-     * `false` will disable column sorting unless you set `sortable: true` on a column
-     */
-    defaultSort = true;
-    handleSearchTermChange() {
-        this.searchStart();
-    }
-    /** Use this to render the table with roughly the correct dimensions.
-     * a use-case might be; fetch a small initial dataset to minimise load-time,
-     * render the table with the correct dimensions, the table becomes interactive,
-     * load the rest of the data
-     */
-    virtualTotalItems = 0;
-    virtualTotalItemsChangeHandler() {
-        this.setBlocks();
-    }
-    /** @readonly - shows the currently applied filters */
-    get appliedFilters() {
-        return this.filters;
-    }
-    /** Fired when the table has done it's first complete render */
-    nanoTblReady;
-    /** Fired whenever a block is activated by scrolling into view / becoming visible
-     * This could be leveraged for infinite scrolling / to fetch more data.
-     */
-    nanoTblBlockRendered;
-    /** Fired before a column is sorted.
-     * `event.preventDefault()` to stop sorting.  */
-    nanoTblBeforeSort;
-    /** Fired after a column is sorted */
-    nanoTblAfterSort;
-    /** Fired before a column is filtered.
-     * `event.preventDefault()` to stop filtering. */
-    nanoTblBeforeFilter;
-    /** Fired after a column is sorted */
-    nanoTblAfterFilter;
-    /** Fired before a general search.
-     * `event.preventDefault()` to stop searching.  */
-    nanoTblBeforeSearch;
-    /** Fired after a general / cross column search */
-    nanoTblAfterSearch;
-    /** Fired before a general search.
-     * `event.preventDefault()` to stop searching.  */
-    nanoTblBeforeEdit;
-    /** Remove any column sorts currently applied
-     * @returns a promise which resolves when complete */
-    async resetSorting() {
-        const col = this.columns.find((c) => !!c.order);
-        if (!col)
-            return;
-        return this.sortStart(null, col.prop);
-    }
-    /** Apply a sort on a column
-     * @returns a promise which resolves when complete */
-    async addSort(column, order) {
-        const col = this.columns.find((c) => c.prop === column);
-        if (!col)
-            throw new Error('Cannot find column with ' + column);
-        return this.sortStart(order, col.prop);
-    }
-    /** Remove any column filters currently applied
-     * @returns a promise which resolves when complete */
-    async resetFilters() {
-        this.filters = [];
-        return this.filterStart();
-    }
-    /** Apply a filter on a column
-     * @param filters - the filters to apply
-     * @param additive - if true, will add the filters to any currently applied
-     * @returns a promise which resolves when complete
-     */
-    async addFilters(filters, additive = true) {
-        if (!additive)
-            this.filters = [];
-        return this.filterStart(filters, additive);
-    }
-    /** Remove filters from a column
-     * @param columnNames - the filters to apply
-     * @returns a promise which resolves when complete
-     */
-    async removeFilters(columnNames) {
-        this.filters = this.filters.filter((f) => !columnNames.includes(f.prop));
-        return this.filterStart();
-    }
-    /** Updates a row model at a given index
-     * @param row - the row to update.
-     * @param rowIndex - the row index to insert this row
-     */
-    async updateRow(row, rowIndex) {
-        this.rows.splice(rowIndex, 1, row);
-        this.handleRowsChange();
-    }
-    get host() { return this; }
-    renderId = 'tbl-' + id++;
-    store;
-    filters = [];
-    currentFilters = '[]';
-    currentSort = '';
-    tableEle;
-    topAnchorEle;
-    tableWrapperEle;
-    activeWatcherIo;
-    tablePinnedService;
-    // Block view management
-    /** `tr` elements split into units - defined by `perBlock`
-      These are show / hidden for perf */
-    blocks = [];
-    activeBlocks = [0, 1];
-    measureHeight = 0;
-    blockElements;
-    blockHeights = [];
-    // uses the first 'tr' of an active block as our yard stick
-    set measureEle(el) {
-        if (!el)
-            return;
-        const potentialHeight = el.getBoundingClientRect().height;
-        this.measureHeight =
-            Math.abs(this.measureHeight - potentialHeight) < 5
-                ? this.measureHeight
-                : potentialHeight;
-        this.unitHeight =
-            el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
-    }
-    unitHeight = 0;
-    get scrollParent() {
-        return this._scrollParent;
-    }
-    set scrollParent(ele) {
-        if (ele === this._scrollParent)
-            return;
-        if (this._scrollParent) {
-            (this._scrollParent === document.documentElement
-                ? document
-                : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
-        }
-        (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
-        this._scrollParent = ele;
-    }
-    _scrollParent;
-    // used to fire `nanoTblBlockRendered` on block render change
-    get primaryBlockIndex() {
-        return this._primaryBlockIndex;
-    }
-    set primaryBlockIndex(blockIndex) {
-        if (this._primaryBlockIndex === blockIndex)
-            return;
-        this._primaryBlockIndex = blockIndex;
-        // fire block change event
-        this.nanoTblBlockRendered.emit({
-            block: blockIndex,
-            totalBlocks: this.blockElements.length,
-        });
-    }
-    _primaryBlockIndex;
-    // Misc.
-    get isReady() {
-        return this._isReady;
-    }
-    set isReady(ready) {
-        if (ready === this._isReady)
-            return;
-        this._isReady = ready;
-        if (this.isReady)
-            requestAnimationFrame(() => this.handleReady());
-    }
-    _isReady = false;
-    // Private Logic
-    // Listeners
-    handleReady() {
-        const hash = window.location.hash;
-        if (hash.length > 1) {
-            try {
-                const idRow = document.querySelector(hash);
-                if (idRow)
-                    idRow.scrollIntoView();
-                // eslint-disable-next-line no-empty
+                    offset += col.offsetWidth - 1;
+                }
             }
-            catch (_e) { }
         }
-        this.nanoTblReady.emit();
-    }
-    /**
-     * Start a sort - can be cancelled by `preventDefault`
-     * @param order - column order
-     * @param column - column config object
-     * @returns A promise
-     */
-    sortStart = async (order, column, element) => {
-        // did order change?
-        if (this.currentSort === order + ':' + column)
-            return;
-        this._loading = true;
-        const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
-        if (sortEvent.defaultPrevented)
-            return;
-        perMark('sort');
-        this.currentSort = order + ':' + column;
-        // doesn't make sense to leave user in place for a sort
-        this.scrollToTop(element);
-        if (this.customSortFn) {
-            try {
-                const res = await this.customSortFn(column, order);
-                // if the response is 'true', the custom sort did it's thing
-                // handover to finish and stop loading state.
-                // if response is falsey, carry on to do a FE sort
-                if (res === true) {
-                    this.sortComplete(order, column);
-                    this._loading = false;
-                    return;
+        if (table.querySelector('[sticky=top]')) {
+            // sticky rows are slightly different; we only want one per section to be visible (the rest will overlap)
+            // e.g. 1 tr in thead, 1 tr in tbody, 1 tr in tfoot
+            offset = 0;
+            for (const section of tableSections) {
+                const stickyRows = Array.from(section.querySelectorAll('tr[sticky]'));
+                for (const [idx, row] of stickyRows.entries()) {
+                    if (row.matches('[sticky=top]') && offset > 0) {
+                        row.style.setProperty('--sticky-top', `${offset}px`);
+                    }
+                    if (idx === stickyRows.length - 1) {
+                        offset += row.offsetHeight - 1;
+                    }
                 }
             }
-            catch (e) {
-                // if response errored, stop loading state
-                // clear current sort cache
-                console.warn('custom sort failed', e);
-                this.currentSort = '';
-                this._loading = false;
-                return;
-            }
-        }
-        try {
-            await storeSort(this.host, column, order);
-            this.sortComplete(order, column);
-        }
-        catch (e) {
-            console.warn('sort failed', e);
-            this.currentSort = '';
-        }
-        finally {
-            if (this.blocks.length)
-                this._loading = false;
         }
+        this.settingUp = false;
+        this.propsReady = true;
     };
-    /**
-     * Complete a sort. Reflects the order to ui.
-     * @param order - column order
-     * @param column - column config object
-     */
-    sortComplete(order, column) {
-        this.columns = this.columns.map((c) => {
-            if (c.prop === column)
-                return { ...c, order };
-            return { ...c, order: null };
+    getRowClickElements(row) {
+        const anchors = row.querySelectorAll('a');
+        const buttons = row.querySelectorAll('button');
+        const cbs = Array.from(row.querySelectorAll('input[type="checkbox"]')).filter((cb) => {
+            // filter out checkboxes that are not nano-checkboxes
+            return !cb.closest('nano-checkbox');
+        });
+        const radios = Array.from(row.querySelectorAll('input[type="radio"]')).filter((radio) => {
+            // filter out radios that are not nano-checkboxes
+            return !radio.closest('nano-checkbox');
         });
-        this.nanoTblAfterSort.emit({ column: column, order });
-        perMark('sort', true);
+        const nanoCbs = row.querySelectorAll('nano-checkbox');
+        return [...anchors, ...buttons, ...nanoCbs, ...cbs, ...radios];
     }
-    async searchStart() {
-        this._loading = true;
-        const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
-        if (sortEvent.defaultPrevented)
+    rowClickHandler = (e) => {
+        const target = e.target;
+        const row = target.closest('tr');
+        if (!row)
             return;
-        perMark('search');
-        // doesn't make sense to leave user in place for a search
-        this.scrollToTop();
-        try {
-            await storeSearch(this.host, this.searchTerm);
-            this.nanoTblAfterSearch.emit({ term: this.searchTerm });
-            perMark('search', true);
-        }
-        catch (e) {
-            console.warn('search failed', e);
-        }
-        finally {
-            this._loading = false;
-        }
-    }
-    async filterStart(filters, additive = true) {
-        if (filters) {
-            if (additive) {
-                this.filters = [
-                    ...this.filters.filter((f) => !filters.find((ff) => ff.prop === f.prop)),
-                    ...filters,
-                ];
-            }
-            else {
-                this.filters = filters;
-            }
+        const clickEle = this.getRowClickElements(row);
+        if (clickEle.length === 1 &&
+            target.closest(clickEle[0].tagName) !== clickEle[0]) {
+            clickEle[0].click();
         }
-        if (this.currentFilters === JSON.stringify(this.filters))
-            return;
-        this._loading = true;
-        const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
-        if (sortEvent.defaultPrevented)
-            return;
-        perMark('filter');
-        this.currentFilters = JSON.stringify(this.filters);
-        // doesn't make sense to leave user in place for a search
-        this.scrollToTop();
-        if (this.customFilterFn) {
-            try {
-                const res = await this.customFilterFn(this.filters);
-                // if the response is 'true', the custom filter did it's thing
-                // handover to finish and stop loading state.
-                // if response is falsy, carry on to do a FE filter
-                if (res === true) {
-                    await this.filterComplete();
-                    this._loading = false;
-                    return;
+    };
+    makeCellsSticky(thElement, sticky, offset = 0) {
+        const table = thElement.closest('table');
+        const theadRow = thElement.closest('tr');
+        const ths = Array.from(theadRow.cells);
+        // Step 1: Get the visual column index of the target th (respecting colspan)
+        let targetColIndex = 0;
+        for (const th of ths) {
+            if (th === thElement)
+                break;
+            targetColIndex += th.colSpan || 1;
+        }
+        // Step 2: Iterate through tbody rows and find the corresponding cell
+        for (const tbody of table.tBodies) {
+            for (const row of tbody.rows) {
+                let colIndex = 0;
+                for (const cell of row.cells) {
+                    const span = cell.colSpan || 1;
+                    if (colIndex <= targetColIndex && targetColIndex < colIndex + span) {
+                        cell.setAttribute('sticky', sticky);
+                        if (offset > 0) {
+                            cell.style.setProperty('--sticky-' + sticky, `${offset}px`);
+                        }
+                        break;
+                    }
+                    colIndex += span;
                 }
             }
-            catch (e) {
-                // if response errored, stop loading state
-                // clear current sort cache
-                console.warn('custom filter failed', e);
-                this.currentFilters = '';
-                this._loading = false;
-                return;
-            }
-        }
-        try {
-            await this.filterComplete();
-        }
-        catch (e) {
-            console.warn('filter failed', e);
-        }
-        finally {
-            this._loading = false;
         }
     }
-    async filterComplete() {
-        this.columns = this.columns.map((c) => {
-            const cFilter = this.filters.find((f) => f.prop === c.prop);
-            // if we found a filter AND
-            // it isn't true / false and has a length OR
-            // it is true or false
-            if (cFilter &&
-                ((typeof cFilter.filter !== 'boolean' && cFilter.filter.length) ||
-                    typeof cFilter.filter === 'boolean'))
-                c.filter = cFilter.filter;
-            // if a filter value is not set OR
-            // it isn't true / false and has no length
-            else if ((c.filter !== null && c.filter !== undefined) ||
-                (!!c.filter && typeof c.filter !== 'boolean' && !c.filter.length))
-                c.filter = undefined;
-            return c;
-        });
-        await storeFilter(this.host, this.filters);
-        this.nanoTblAfterFilter.emit({ filters: this.filters });
-        perMark('filter', true);
-    }
-    /** Scrolls to the top immediately - used whilst sorting / filtering */
-    scrollToTop(element) {
-        const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
-        const scrollX = this.scrollParent.scrollLeft;
-        this.scrollParent.style.scrollBehavior = 'auto';
-        if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {
-            this.host.scrollIntoView();
-        }
-        if (element && !isInViewport(element, 1))
-            setTimeout(() => element.scrollIntoView({ block: 'start' }), 500);
-        if (scrollX)
-            this.scrollParent.scrollLeft = scrollX;
-        if (scrollBehaviour)
-            this.scrollParent.style.scrollBehavior = scrollBehaviour;
-        this.scrollHandler();
-    }
-    setMeasureElement() {
-        return new Promise((resolve) => {
-            readTask(() => {
-                this.measureEle = this.blockElements.find((b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`));
-                resolve();
-            });
-        });
-    }
-    /**
-     * Makes sure we have dimensions on at least one, active tbody element.
-     * We'll use this is a yard stick for inactive tbody elements in future.
-     * These elements have no natural height (on account of all their rows being hidden)
-     */
-    setInitialBlockDimension() {
-        if (!this.blockElements?.length)
+    addObservers() {
+        if (!Build.isBrowser)
             return;
-        perMark('blockDims');
-        const testForDimensions = async () => {
-            await this.setMeasureElement();
-            if (this.unitHeight)
-                return true;
-            return false;
-        };
-        const dimensionsReady = new Promise((resolve) => {
-            testForDimensions().then(async (ready) => {
-                if (ready)
-                    resolve();
-                else {
-                    // it's likely this table is hidden in the dom.
-                    // we need to wait until it's visible
-                    const observer = new IntersectionObserver(async () => {
-                        if (await testForDimensions()) {
-                            resolve();
-                            observer.disconnect();
-                        }
-                    }, { root: this.scrollParent });
-                    observer.observe(this.tableEle);
-                }
-            });
+        this.resizeObserver = new ResizeObserver(() => {
+            this.setupProperties();
         });
-        // we're all finished.
-        dimensionsReady.then(() => {
-            perMark('blockDims', true);
-            perMark('init', true);
-            requestAnimationFrame(() => (this.isReady = true));
+        this.resizeObserver.observe(this.host);
+        this.mutationObserver = new MutationObserver(() => {
+            this.setupProperties();
         });
-    }
-    /** Apply initial columns settings */
-    async columnInit() {
-        this.filters = this.columns
-            .filter((c) => c.filter !== undefined && c.filter !== null)
-            .map((c) => {
-            const { filter, prop } = c;
-            return { prop, filter };
+        const table = this.table;
+        this.mutationObserver.observe(table, {
+            childList: true,
+            subtree: true,
         });
-        if (this.searchTerm) {
-            await this.searchStart();
-        }
-        if (this.filters.length) {
-            await this.filterStart();
-        }
-        // apply sort
-        const col = this.columns.find((c) => !!c.order);
-        if (col) {
-            await this.sortStart(col.order, col.prop);
-        }
-        if (this.tablePinnedService)
-            this.tablePinnedService.assessCols();
+        // dimensions will not be accurate until table is in the viewport
+        this.intersectionObserver = new IntersectionObserver(() => {
+            this.setupProperties();
+            this.intersectionObserver.disconnect();
+        }, { threshold: 1 });
+        this.intersectionObserver.observe(table);
     }
-    /** Split up all incoming rows into 'blocks' split amongst tbody elements.
-     * These can then be hidden / shown to improve performance.
-     */
-    setBlocks() {
-        const dRows = this.store.data.state.rows;
-        if (!dRows.length) {
-            this.blocks = [];
-            return;
+    cleanUpObservers() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
         }
-        perMark('setBlocks');
-        // this.ignoreIO = true;
-        let i = 1;
-        const l = this.virtualTotalItems > dRows.length
-            ? this.virtualTotalItems
-            : dRows.length;
-        let rows = [];
-        const blocks = [];
-        // old skool loop for perf
-        for (i; i <= l; i++) {
-            rows.push(this.store.data.state.rows[i - 1] || { __uuid: '' });
-            if (i % this.perBlock === 0) {
-                // assign a UUID for the whole block
-                // for block diffing
-                blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
-                rows = [];
-            }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
         }
-        // any leftover rows
-        if (rows.length) {
-            blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
         }
-        this.blocks = blocks;
-        perMark('setBlocks', true);
     }
-    /**
-     * Returns a block render height.
-     * If it's currently active - let auto do it's thing
-     * If we've rendered it before - return that
-     * If all else fails, let's guess it
-     * @param blockIndex
-     * @returns a height string (incl px)
-     */
-    getBlockHeight(blockIndex) {
-        if (this.blockHeights.length) {
-            const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
-            if (cachedBlockHeight && cachedBlockHeight.height)
-                return cachedBlockHeight.height;
-        }
-        const blockLength = this.blocks[blockIndex].rows.length;
-        if (blockLength === this.perBlock && this.measureHeight) {
-            return this.measureHeight;
-        }
-        return this.unitHeight ? this.unitHeight * blockLength : 100;
-    }
-    /** cache the height for all active blocks for later renders */
-    setBlockHeight() {
-        this.activeBlocks.forEach((blockIndex) => {
-            const el = this.blockElements[blockIndex];
-            if (!el)
-                return;
-            readTask(() => {
-                if (el.classList.contains(`${CSSNAMESPACE}__inactive`))
-                    return;
-                const height = el.getBoundingClientRect().height;
-                // cache height to our block heights array
-                // for subsequent renders
-                const fBhIdx = this.blockHeights.findIndex((bh) => bh.blockIndex === blockIndex);
-                if (fBhIdx > -1) {
-                    this.blockHeights[fBhIdx] = { height, blockIndex };
-                }
-                else
-                    this.blockHeights.push({ height, blockIndex });
-            });
-        });
-    }
-    /**
-     * On scroll, loop through all blocks' heights and cumulatively, add them together.
-     * When we find that the scroll position is less than this cumulative block height -
-     * stop loop - it's on the current active block.
-     */
-    scrollHandler = () => {
-        let scrollPos = 0;
-        perMark('scrollHandler');
-        // don't listen if this table isn't in the viewport
-        if (!this.store?.general.state.isActive || !this.rows)
-            return;
-        if (this.primaryBlockIndex === undefined)
-            this.primaryBlockIndex = 0;
-        readTask(() => {
-            scrollPos =
-                typeof this.scrollParent.scrollTop !== 'undefined'
-                    ? this.scrollParent.scrollTop
-                    : window.scrollY;
-            scrollPos += this.host.offsetTop;
-            if (this.tablePinnedService) {
-                this.tablePinnedService.onScroll({
-                    x: typeof this.scrollParent.scrollLeft !== 'undefined'
-                        ? this.scrollParent.scrollLeft
-                        : window.scrollX,
-                    y: scrollPos,
-                });
-            }
-            let cumulativeHeight = this.host.offsetTop;
-            let blockIndex = 0;
-            const blockLen = this.blocks.length;
-            while (blockIndex < blockLen && scrollPos >= cumulativeHeight) {
-                cumulativeHeight += this.getBlockHeight(blockIndex);
-                if (scrollPos < cumulativeHeight) {
-                    const potentialBlocks = [
-                        blockIndex,
-                        blockIndex + 1,
-                        // Math.max(0, blockIndex - 1),
-                    ];
-                    if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
-                        this.activeBlocks = potentialBlocks;
-                    }
-                    this.primaryBlockIndex = blockIndex;
-                }
-                blockIndex++;
-            }
-            perMark('scrollHandler', true);
-        });
-    };
-    /** Process slotted content */
-    processSlots() {
-        // see if we have slot content
-        if (!this.caption && !this.host.querySelector('[slot="caption"]')) {
-            console.error('For accessibility you must set a `caption` prop or use the `caption` slot');
-        }
-    }
-    handleResizeChange = (e) => {
-        this.tableWrapperEle.className = '';
-        let classes = [`${CSSNAMESPACE}__wrap`];
-        if (e.target?.className)
-            classes = [...e.target.className.split(' '), ...classes];
-        this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
-    };
-    /** Adds an IO. Makes sure our scroll listener is only active when
-     * the table is in viewport */
-    setupActiveWatcher() {
-        if (!this.host || !this.scrollParent || !this.store)
-            return;
-        if (this.activeWatcherIo) {
-            this.activeWatcherIo.disconnect();
-            this.activeWatcherIo = undefined;
-        }
-        const io = (this.activeWatcherIo = new IntersectionObserver(([e]) => {
-            if (e.isIntersecting)
-                this.store.general.state.isActive = true;
-            else
-                this.store.general.state.isActive = false;
-        }, { root: this.scrollParent, threshold: 0 }));
-        io.observe(this.host);
-    }
-    // Component lifecycle
-    async componentWillLoad() {
-        perMark('init');
-        // setup stores
-        this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
-        this.handleRowsChange();
-        this.store.general.onChange('isActive', () => {
-            this.scrollHandler();
-        });
-        this.store.data.onChange('rows', () => this.setBlocks());
-        // setup dom and attach listeners
-        this.processSlots();
-        this.setBlocks();
-        this.scrollParent = findScrollParent(this.host);
-        this.setupActiveWatcher();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.setupProperties = debounce(this.setupProperties, 100);
     }
     connectedCallback() {
-        this.scrollParent = findScrollParent(this.host);
-        this.setupActiveWatcher();
-    }
-    componentDidLoad() {
-        this.setInitialBlockDimension();
-        if (!this.tablePinnedService) {
-            this.tablePinnedService = new TablePinService(this.tableEle, this.scrollParent);
-        }
-    }
-    componentShouldUpdate(_newVal, _oldVal, stateName) {
-        // stop double rendering - we use the store for rendering internally
-        // the public facing props are kept in-sync with the store
-        // but we don't want it to cause renders
-        if (['rows', 'columns'].includes(stateName))
-            return false;
-    }
-    componentWillRender() {
-        perMark('render');
+        this.addObservers();
+        this.handleHideCaptionChange();
     }
     componentDidRender() {
-        this.setMeasureElement().then(() => this.setBlockHeight());
-        perMark('render', true);
+        if (this.scrollable !== false && this.table) {
+            // a hack. Revise in-future.
+            // the table is always rendered in the light DOM - so it should always be visible, but
+            // if we conditionally render the slot within the masked overflow there's quite a noticeable
+            //  CLS as it moves before the nano-masked-overflow is bootstrapped.
+            customElements
+                .whenDefined(transformTag('nano-masked-overflow'))
+                .then(() => {
+                this.host
+                    .querySelector('.nano-table__overflow')
+                    ?.appendChild(this.table);
+            });
+        }
     }
     disconnectedCallback() {
-        if (!this.activeWatcherIo)
-            return;
-        this.activeWatcherIo.disconnect();
-        this.activeWatcherIo = undefined;
-        (this.scrollParent === document.documentElement
-            ? document
-            : this.scrollParent).removeEventListener('scroll', this.scrollHandler);
+        this.cleanUpObservers();
     }
     render() {
-        this.blockElements = [];
-        return (h$1(Host, { key: '7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa', class: "nano-table" }, h$1("div", { key: 'acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9', class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h$1("nano-resize-observe", { key: '9a38da33f0cfb64329331510f196ef7c42e51ca3', states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange, onNanoResize: () => {
-                if (this.tablePinnedService)
-                    this.tablePinnedService.onResize();
-            } }), h$1("div", { key: '25aad643f108a5e48319a20a70a36066eb099d5d', class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h$1("nano-progress-bar", { key: '519fc388c4926af6bd9dfaba2112fa2db1dbc3cd', indeterminate: true, class: {
-                [`${CSSNAMESPACE}__progress-bar`]: true,
-                [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-            } }), h$1("table", { key: 'b58a665666893b4b15aad6ab7e7a08bd20527cb2', role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-table-' + this.renderId }, h$1("caption", { key: '5bc653ff3a487546e652cd787996dfde662fdf67', class: {
-                [`${CSSNAMESPACE}__caption`]: true,
-                [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
-            }, id: 'nano-table-caption-' + this.renderId }, h$1("slot", { key: 'a6c855db5a74c123d08ad4e65954f17573c9ea3a', name: "caption" }, this.caption)), h$1("thead", { key: '743820b2abc85adac1fe4babf918be10a8e62a26' }, h$1(TableHeadFootRow, { key: 'e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036', rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
-            h$1(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
-                    sortable: this.defaultSort,
-                } }),
-        ]))), this._loading && !this.blocks.length && (h$1("tbody", { key: '6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa', class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(10).keys()].map((rowIndex) => (h$1("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h$1("nano-skeleton", null) })))))))), h$1("tr", { key: '092f27f8726f12b7fa10d166b560d6df6593bbc1', hidden: !!this._loading || !!this.blocks.length }, h$1("th", { key: 'edfbca925f99550897c3b460a6efcb326863a591', class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h$1("div", { key: '5d4b996c3141b6583317a2b28357fe7af3a873bc', class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h$1("slot", { key: '00db3e5649ccdc97062881ff7b3801fb1847c2db', name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h$1("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
-                this.blockElements.push(tb);
-            }, class: {
-                [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
-                [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
-            } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
-            const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
-            return (h$1(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h$1(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
-        })) : (h$1("tr", { class: `${CSSNAMESPACE}__tr--placeholder` }, h$1("td", { colSpan: this.store.config.state.columns.length, style: {
-                height: this.getBlockHeight(blockIndex) + 'px',
-            } })))))), this.showFooter && (h$1("tfoot", { key: '15a1a79049ad87f63c87e2d905bc401a7d4bbb60' }, h$1(TableHeadFootRow, { key: 'ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea', rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
-            h$1(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
-                    sortable: this.defaultSort,
-                } }),
-        ]))))), !!this.blocks.length && (h$1("nano-spinner", { key: 'dd0041a5232a79a9f1882d2b9e5beebd79587a5d', type: "circle", class: {
-                [`${CSSNAMESPACE}__spinner`]: true,
-                [`${CSSNAMESPACE}__spinner--show`]: this._loading,
-            } })))));
+        return (h(Host, { key: '61d6bc7ce049b636466f22e2ebec084752ecfd29', class: {
+                'nano-table': true,
+                'nano-table--props-ready': this.propsReady,
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '0534fae03c985ea7f1247bce7abdb5deac889feb', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '8e911ddbf727b07c8cd56dab2d56568b73a745b2', class: "nano-table__overflow" }))), h("slot", { key: '2d57257dc468275502d1c1a1d2c07e32f8cfa881' })));
     }
     static get watchers() { return {
-        "rows": ["handleRowsChange"],
-        "columns": ["handleColsChange"],
-        "searchTerm": ["handleSearchTermChange"],
-        "virtualTotalItems": ["virtualTotalItemsChangeHandler"]
+        "compact": ["handleCompactChange"],
+        "hideCaption": ["handleHideCaptionChange"]
     }; }
-    static get style() { return NanoTableStyle0; }
+    static get style() { return tableCss; }
 }, [4, "nano-table", {
-        "customRenderer": [16],
-        "type": [1],
-        "caption": [1],
-        "showCaption": [4, "show-caption"],
-        "loading": [4],
-        "placeholderSize": [2, "placeholder-size"],
-        "rows": [16],
-        "columns": [1040],
-        "headRender": [16],
-        "rowRender": [16],
-        "footRender": [16],
-        "showFooter": [4, "show-footer"],
-        "perBlock": [2, "per-block"],
-        "blocksLength": [2050, "blocks-length"],
-        "searchTerm": [1, "search-term"],
-        "customFilterFn": [16],
-        "customSortFn": [16],
-        "defaultSort": [4, "default-sort"],
-        "virtualTotalItems": [2, "virtual-total-items"],
-        "appliedFilters": [2064],
-        "internalLoading": [32],
-        "blocks": [32],
-        "activeBlocks": [32],
-        "resetSorting": [64],
-        "addSort": [64],
-        "resetFilters": [64],
-        "addFilters": [64],
-        "removeFilters": [64],
-        "updateRow": [64]
+        "compact": [520],
+        "scrollable": [516],
+        "hideCaption": [516, "hide-caption"],
+        "propsReady": [32]
     }, undefined, {
-        "rows": ["handleRowsChange"],
-        "columns": ["handleColsChange"],
-        "searchTerm": ["handleSearchTermChange"],
-        "virtualTotalItems": ["virtualTotalItemsChangeHandler"]
+        "compact": ["handleCompactChange"],
+        "hideCaption": ["handleHideCaptionChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nano-table", "nano-icon", "nano-progress-bar", "nano-resize-observe", "nano-skeleton", "nano-spinner", "nano-tooltip"];
+    const components = ["nano-table", "nano-icon", "nano-icon-button", "nano-masked-overflow", "nano-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "nano-table":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, Table);
+                customElements.define(tagName, NanoTable$1);
             }
             break;
         case "nano-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "nano-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "nano-resize-observe":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "nano-skeleton":
+        case "nano-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "nano-spinner":
+        case "nano-masked-overflow":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
@@ -1957,9 +282,7 @@ function defineCustomElement$1() {
     } });
 }
 
-const NanoTable = Table;
+const NanoTable = NanoTable$1;
 const defineCustomElement = defineCustomElement$1;
 
-export { NanoTable, createWorker as c, defineCustomElement };
-
-//# sourceMappingURL=nano-table.js.map
+export { NanoTable, defineCustomElement };