@sekiui/elements 0.1.3 → 0.1.5

package/dist/collection/components/command/seki-command-item.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Command item - selectable option in the command list
  *
@@ -21,6 +22,16 @@ export class SekiCommandItem {
          * Whether this item matches the current filter
          */
         this._visible = true;
+        // Visibility and highlight come from the parent's context, so an item added
+        // after mount is filtered against the current search right away and
+        // filtering works in the lazy build, where seki-command cannot call this
+        // class's plain methods through the host element (#323).
+        this.commandConsumer = new ContextConsumer('seki-command', '_commandContext', context => {
+            if (!context)
+                return;
+            this._visible = context.isItemMatch(this.el);
+            this._highlighted = context.highlightedItem === this.el;
+        });
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -38,6 +49,12 @@ export class SekiCommandItem {
         };
         this.instanceId = `seki-command-item-${++SekiCommandItem.instanceCount}`;
     }
+    connectedCallback() {
+        this.commandConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.commandConsumer.disconnect();
+    }
     /**
      * Get the searchable text for this item
      */

package/dist/collection/components/command/seki-command-list.js

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCommandList {
     render() {
-        return (h(Host, { key: '0dd7fcd6cdfe1838518b67883ed44e754c25057b' }, h("div", { key: '246f9d3c04d0e19297e0de8276576fc2ef3b799c', part: "list", role: "listbox", class: "command-list" }, h("slot", { key: 'ea9c8b0680e8c9a7a13560b4c00fc6d8428fd3df' }))));
+        return (h(Host, { key: '292b7c7bb59dfe3936168c8c8a16db64cfa724d0' }, h("div", { key: '11cf25240d8708959eebc774ee1cf8b11c8db6be', part: "list", role: "listbox", class: "command-list" }, h("slot", { key: 'ad145cf40c56deca70a2ed2d6e213bf294444fda' }))));
     }
     static get is() { return "seki-command-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command-separator.js

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCommandSeparator {
     render() {
-        return (h(Host, { key: 'de5946e6f4f370a50a35acdb785e0b94e30ccaae' }, h("div", { key: '3ce9e5a654e110f8e7bec6b5b058f8a8688e41c0', part: "separator", role: "separator", class: "command-separator" })));
+        return (h(Host, { key: '4a32f7e1ad9a8d159257742a73ae1c55b7f16c30' }, h("div", { key: '164ada9cec84397e7fedcca5967ff945a253a5df', part: "separator", role: "separator", class: "command-separator" })));
     }
     static get is() { return "seki-command-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Command root component - command palette for navigation
  *
@@ -24,31 +25,61 @@ export class SekiCommand {
          * Currently highlighted item index
          */
         this._highlightedIndex = 0;
+        /**
+         * Whether an item matches the current search. Computed from the item's host
+         * (text + `keywords`) rather than by calling methods on it: the item's plain
+         * class methods do not exist on the host element in the lazy-loaded build,
+         * which is why filtering never happened there before #323.
+         */
+        this.matchesItem = (item) => {
+            var _a, _b, _c, _d;
+            if (!this.filter)
+                return true;
+            const searchValue = this._value.toLowerCase().trim();
+            if (searchValue === '')
+                return true;
+            const keywords = (_b = (_a = item.keywords) !== null && _a !== void 0 ? _a : item.getAttribute('keywords')) !== null && _b !== void 0 ? _b : '';
+            const searchText = `${(_d = (_c = item.textContent) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : ''} ${keywords}`.toLowerCase();
+            return searchText.includes(searchValue);
+        };
     }
     valueChanged(newValue) {
         this._value = newValue;
-        this.applyFilter();
+        // resetHighlight() republishes the context, which refilters every part.
         this.resetHighlight();
     }
+    filterChanged() {
+        this.resetHighlight();
+    }
+    connectedCallback() {
+        // Filtering, the empty state and the highlight all derive from which
+        // items exist, so a later DOM change has to be republished to the parts.
+        if (typeof MutationObserver !== 'undefined') {
+            this.itemObserver = new MutationObserver(() => this.updateContext());
+            this.itemObserver.observe(this.el, { childList: true, subtree: true, characterData: true });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.itemObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.itemObserver = undefined;
+    }
     componentWillLoad() {
         this._value = this.value;
+        // Publish before the first render so parts see `value` declared in HTML
+        // (#323).
+        this.updateContext();
     }
     componentDidLoad() {
-        // Set initial context
-        this.updateContext();
-        // Apply initial filter
-        this.applyFilter();
         // Set initial highlight
         requestAnimationFrame(() => this.resetHighlight());
     }
     handleInputChange(event) {
         event.stopPropagation();
         this._value = event.detail;
+        // @Watch('value') refilters, resets the highlight and republishes.
         this.value = event.detail;
         this.sekiValueChange.emit(event.detail);
-        this.applyFilter();
-        this.resetHighlight();
-        this.updateContext();
     }
     handleItemSelect(event) {
         event.stopPropagation();
@@ -109,37 +140,12 @@ export class SekiCommand {
     getAllItems() {
         return Array.from(this.el.querySelectorAll('seki-command-item'));
     }
-    getVisibleItems() {
-        return this.getAllItems().filter((item) => {
-            var _a, _b, _c, _d;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const isVisible = (_c = (_b = (_a = item).isVisible) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : true;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const isDisabled = (_d = item.disabled) !== null && _d !== void 0 ? _d : false;
-            return isVisible && !isDisabled;
-        });
+    isItemDisabled(item) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return Boolean(item.disabled);
     }
-    applyFilter() {
-        if (!this.filter)
-            return;
-        const searchValue = this._value.toLowerCase().trim();
-        const items = this.getAllItems();
-        items.forEach((item) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const searchText = (_e = (_c = (_b = (_a = item).getSearchText) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : (_d = item.textContent) === null || _d === void 0 ? void 0 : _d.toLowerCase()) !== null && _e !== void 0 ? _e : '';
-            const matches = searchValue === '' || searchText.includes(searchValue);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_g = (_f = item).setVisible) === null || _g === void 0 ? void 0 : _g.call(_f, matches);
-        });
-        // Update groups visibility
-        const groups = Array.from(this.el.querySelectorAll('seki-command-group'));
-        groups.forEach((group) => {
-            var _a, _b;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_b = (_a = group).updateVisibility) === null || _b === void 0 ? void 0 : _b.call(_a);
-        });
-        this.updateContext();
+    getVisibleItems() {
+        return this.getAllItems().filter(item => this.matchesItem(item) && !this.isItemDisabled(item));
     }
     resetHighlight() {
         this._highlightedIndex = 0;
@@ -147,20 +153,10 @@ export class SekiCommand {
         this.updateHighlight(items);
     }
     updateHighlight(items) {
-        var _a, _b, _c;
-        // Clear all highlights
-        this.getAllItems().forEach((item) => {
-            var _a, _b;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_b = (_a = item).setHighlighted) === null || _b === void 0 ? void 0 : _b.call(_a, false);
-        });
-        // Set new highlight
+        var _a, _b;
+        // Items render their highlight from context.highlightedItem.
         if (items.length > 0 && this._highlightedIndex >= 0 && this._highlightedIndex < items.length) {
-            const item = items[this._highlightedIndex];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (_b = (_a = item).setHighlighted) === null || _b === void 0 ? void 0 : _b.call(_a, true);
-            // Scroll into view
-            (_c = item.scrollIntoView) === null || _c === void 0 ? void 0 : _c.call(item, { block: 'nearest' });
+            (_b = (_a = items[this._highlightedIndex]).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'nearest' });
         }
         this.updateContext();
     }
@@ -174,7 +170,10 @@ export class SekiCommand {
             value: this._value,
             highlightedIndex: this._highlightedIndex,
             highlightedId,
-            isEmpty: visibleItems.length === 0,
+            highlightedItem: highlightedItem !== null && highlightedItem !== void 0 ? highlightedItem : null,
+            // Disabled items still render, so they count as results.
+            isEmpty: !this.getAllItems().some(this.matchesItem),
+            isItemMatch: this.matchesItem,
             filter: (text) => {
                 const searchValue = this._value.toLowerCase().trim();
                 return searchValue === '' || text.toLowerCase().includes(searchValue);
@@ -182,11 +181,10 @@ export class SekiCommand {
         };
     }
     updateContext() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._commandContext = this.getContext();
+        publishContext(this.el, '_commandContext', this.getContext(), this.commandContextChange);
     }
     render() {
-        return (h(Host, { key: 'c9623610f679b3bda03500c54cd269a6830afd77' }, h("div", { key: '4ff6ad934f5e28020389521c381f2d7af1b40153', part: "command", class: "command" }, h("slot", { key: '8e318bd7bc0a213eb5b1564d26711e4a63153f5b' }))));
+        return (h(Host, { key: 'dcc26f27f62734cf346ed59ac9d6c7cdd7a271de' }, h("div", { key: '39977b01a9f1908ca3dc156d958b4a237da54dc8', part: "command", class: "command" }, h("slot", { key: 'af15a5d125e224c752ab20c4a54c986be2f673b6' }))));
     }
     static get is() { return "seki-command"; }
     static get encapsulation() { return "shadow"; }
@@ -281,6 +279,21 @@ export class SekiCommand {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "commandContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies command parts (input, items, groups, empty state) that\n`_commandContext` changed. Not part of the public API; listen to\n`sekiValueChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -288,6 +301,9 @@ export class SekiCommand {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "filter",
+                "methodName": "filterChanged"
             }];
     }
     static get listeners() {

package/dist/collection/components/context-menu/seki-context-menu-trigger.js

@@ -77,7 +77,7 @@ export class SekiContextMenuTrigger {
         this.cancelLongPress();
     }
     render() {
-        return (h(Host, { key: 'd15079dc6048db3b250d49b9a4805a9277d587fd', onContextMenu: this.handleContextMenu, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchCancel: this.handleTouchEnd }, h("slot", { key: '56b4c1128093d7fccf4c5463195c1ea3cd4eefe0' })));
+        return (h(Host, { key: '3105e26b352f1c544a67e35f723dcc180a14da69', onContextMenu: this.handleContextMenu, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchCancel: this.handleTouchEnd }, h("slot", { key: 'cadea7d9c1769b9c859099ac51c0b09e20cce43d' })));
     }
     static get is() { return "seki-context-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/context-menu/seki-context-menu.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { composedContains, getDeepActiveElement } from "../../utils/menu-navigation";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Context Menu component - right-click context menu with items
  *
@@ -25,6 +26,19 @@ export class SekiContextMenu {
          * Y coordinate for menu position
          */
         this._y = 0;
+        /**
+         * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+         * component only when nothing is open on top of it, so one key press closes
+         * one layer (#332).
+         */
+        this.layer = new OverlayLayer({
+            onEscape: (event) => {
+                if (this._isOpen) {
+                    event.preventDefault();
+                    this.closeMenu();
+                }
+            },
+        });
     }
     componentWillLoad() {
         this._isOpen = this.open;
@@ -88,15 +102,6 @@ export class SekiContextMenu {
         this.sekiSelect.emit(event.detail);
         this.closeMenu();
     }
-    /**
-     * Handle Escape key to close menu
-     */
-    handleKeyDown(event) {
-        if (this._isOpen && event.key === 'Escape') {
-            event.preventDefault();
-            this.closeMenu();
-        }
-    }
     /**
      * Return focus to the element that had it before the menu opened (Radix
      * context menu does not focus the trigger). Skipped when focus already moved
@@ -160,11 +165,15 @@ export class SekiContextMenu {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._contextMenuContext = this.getContext();
     }
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
+    }
     disconnectedCallback() {
         this.removeClickOutside();
+        this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: 'ccb4e37bea995adf6cc2cbc688274d182a8f90ec', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '1d11eb89125f7c75f1d3409440cf1516f73a9a01', part: "context-menu", class: "context-menu" }, h("slot", { key: 'd6f08c4aacf8f581a08e1ffd2015471472e98ab3' }))));
+        return (h(Host, { key: '3b5bcf8bddbf856566437a16af2b78d667d6b9aa', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'cfb47dcf5c79696cf6fbe2746e2be3c59d79cb81', part: "context-menu", class: "context-menu" }, h("slot", { key: 'b4f31ddb24fb5ca635f9e1f503c70201a81b1d5a' }))));
     }
     static get is() { return "seki-context-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -314,12 +323,6 @@ export class SekiContextMenu {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

package/dist/collection/components/data-table/seki-data-table.js

@@ -66,6 +66,8 @@ export class SekiDataTable {
         };
         /** Viewport height for virtual scroll */
         this.viewportHeight = 400;
+        /** Monotonic id of the latest loadData call; older responses are discarded. */
+        this.loadSeq = 0;
         this.handleScroll = (event) => {
             if (!this.virtualScroll)
                 return;
@@ -102,15 +104,15 @@ export class SekiDataTable {
         this.handleSearchInput = (event) => {
             const value = event.target.value;
             this.searchInputValue = value;
-            if (this.searchTimeout) {
-                clearTimeout(this.searchTimeout);
-            }
+            this.cancelPendingSearch();
             this.searchTimeout = setTimeout(() => {
+                this.searchTimeout = undefined;
                 this.updateState({ search: value, page: 0 });
                 this.loadData();
             }, this.searchDebounce);
         };
         this.handleClearSearch = () => {
+            this.cancelPendingSearch();
             this.searchInputValue = '';
             this.updateState({ search: '', page: 0 });
             this.loadData();
@@ -204,6 +206,7 @@ export class SekiDataTable {
         this.setupVirtualScroll();
     }
     disconnectedCallback() {
+        this.cancelPendingSearch();
         this.cleanupVirtualScroll();
         // If the table is removed mid column-resize, tear down the document-level
         // drag listeners so they don't leak and keep firing against a dead instance.
@@ -212,6 +215,9 @@ export class SekiDataTable {
     // =========================================================================
     // Watchers
     // =========================================================================
+    fetchDataChanged() {
+        this.loadData();
+    }
     columnsChanged() {
         this.initializeColumns();
     }
@@ -366,6 +372,7 @@ export class SekiDataTable {
         if (!this.fetchData) {
             return;
         }
+        const seq = ++this.loadSeq;
         this.updateState({ loading: true });
         const request = {
             page: this.state.page,
@@ -376,6 +383,19 @@ export class SekiDataTable {
         };
         try {
             const response = await this.fetchData(request);
+            // A newer load started while this one was in flight: its result wins.
+            if (seq !== this.loadSeq)
+                return;
+            // The result set may have shrunk below the current page (filter, external
+            // change + refresh()). Move to the last valid page and refetch it. This
+            // terminates: lastPage < page strictly, and is 0 when there are no rows.
+            const lastPage = Math.max(0, Math.ceil(response.totalRows / this.state.pageSize) - 1);
+            if (this.state.page > lastPage) {
+                this.updateState({ page: lastPage, totalRows: response.totalRows });
+                this.pageChange.emit({ page: lastPage, pageSize: this.state.pageSize });
+                await this.loadData();
+                return;
+            }
             this.updateState({
                 rows: response.rows,
                 totalRows: response.totalRows,
@@ -387,10 +407,18 @@ export class SekiDataTable {
             }
         }
         catch (error) {
+            if (seq !== this.loadSeq)
+                return;
             console.error('[seki-data-table] Error fetching data:', error);
             this.updateState({ loading: false });
         }
     }
+    cancelPendingSearch() {
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = undefined;
+        }
+    }
     // =========================================================================
     // Render Helpers
     // =========================================================================
@@ -400,7 +428,7 @@ export class SekiDataTable {
             .sort((a, b) => a.orderIndex - b.orderIndex);
     }
     getTotalPages() {
-        return Math.ceil(this.state.totalRows / this.state.pageSize);
+        return Math.max(1, Math.ceil(this.state.totalRows / this.state.pageSize));
     }
     isAllSelected() {
         if (this.state.rows.length === 0)
@@ -420,10 +448,10 @@ export class SekiDataTable {
         const visibleColumns = this.getVisibleColumns();
         const totalPages = this.getTotalPages();
         const isLoading = this.state.loading || this.loading;
-        return (h(Host, { key: 'c04fd92ce353ad13bdac6e06c62e0d4c49df7fde' }, h("div", { key: '3af3f6f85702103871892e57d81e26b8fcb8ecc8', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '380ed854e25f2fc1a3836d1c159f0ef0d7ce043e', class: "data-table__toolbar" }, this.searchable && (h("div", { key: '168edbf3bb61cb9a6451df5c24278c5a822bc426', class: "data-table__search" }, h("input", { key: 'd2a61ead41bc15fc10d88d5371595728d022e616', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: 'aaa7308f94b9f4a1cf225cba796b6b7173bacc7e', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: 'e305bee4964a6a21426831e1a05ce49a1d7ea02d', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '46a57cc4174a26a6f6b6233dbbdb4e8ac7e96809', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: '12f509df155529d2d7797d3756e16affcd4b3dbe', class: {
+        return (h(Host, { key: 'ef7266d08b7f59aed85189526cfd396d7065ec70' }, h("div", { key: '93d095c6f554e87dd8772de1965413573f68053c', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '3bc4368791a26f54704790d76992f6032006697d', class: "data-table__toolbar" }, this.searchable && (h("div", { key: 'db29b0c781ea9156916cfc846695b18f4bdfa34b', class: "data-table__search" }, h("input", { key: 'bdc57d3f0aafe38b10d8adb5d40f75f262e07d4e', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: 'd9ae5008168f17cbf37064f2ef6f8982c75b4be0', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: 'd7c0c68d9f30c218d476b80ff099cc1d32120ffb', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '9f9e2e9cd861585cc8633a8609c3a0d86c872b19', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: 'be86855eb822e478e5335564b2b761112c64a77a', class: {
                 'data-table__container': true,
                 'data-table__container--virtual': this.virtualScroll,
-            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: 'e1ec10b01a7532c235fbf4c88be0ccf98b92770a', class: "data-table__table", role: "grid" }, h("thead", { key: 'e0f501dd110457bff2c475b09563209d71551964', class: "data-table__head" }, h("tr", { key: '9542a39008d2b10772abf640ec3d62abe4afd308', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: '1a03b19a6716e96885fddc0a7b047634e0a60e4a', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: 'f3c3cde54af22263033cec4ecd735d1af0500e77', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: '3470c4685f529805142e756c7b609ab4b17c9130', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '6fdba33e0ef797c0259fca1a51b922bd8c8ad1ec', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
+            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: 'ebd3c34018b944a0f2b6fe628121ec85a33e7434', class: "data-table__table", role: "grid" }, h("thead", { key: '5ff99f94676259161550501547e80d70c0ad3504', class: "data-table__head" }, h("tr", { key: '39cf1c498490bf2a4f77cfa4eda6c84bd013e77c', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: '4f42cf205f41e14ebc0753474c7ef3dffd4d7621', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: 'c92983de7f4f6a76c5e59b2229603b671258c3db', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: 'a985e1bcf41c50789036a753a6201b0ce8b329e6', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '5348325ae5babe41971ec38baadcb643786ba2a7', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
             var _a, _b, _c;
             return (h("th", { key: column.field, class: {
                     'data-table__th': true,
@@ -439,7 +467,7 @@ export class SekiDataTable {
                     ? '↑'
                     : '↓'
                 : '↕'))), column.resizable && (h("div", { class: "data-table__resize-handle", onMouseDown: (e) => this.startResize(e, column) }))));
-        }))), h("tbody", { key: '6ea94f1ce74f3a89f47b4ac639c84c0717b5bda8', class: "data-table__body", style: this.virtualScroll
+        }))), h("tbody", { key: '990dd4e9513edd19707524f2070dafa2118e9637', class: "data-table__body", style: this.virtualScroll
                 ? {
                     height: `${this.virtualScrollState.totalHeight}px`,
                     position: 'relative',
@@ -482,12 +510,12 @@ export class SekiDataTable {
                 /* Expanded content row */
                 isExpanded && this.renderExpandedRow && (h("tr", { key: `${rowKey}-expanded`, class: "data-table__row data-table__row--expanded-content" }, h("td", { class: "data-table__td data-table__td--expanded-content", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__expanded-content", innerHTML: this.renderExpandedRow(row) })))),
             ];
-        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: 'e0ca3f7b11df8a49252740a524c55fc494d17cb0', class: "data-table__loading-overlay" }, h("div", { key: 'a1ee63ae5045ba68371ad5d5bcbc286cf58f1141', class: "data-table__loading" }, "Loading...")))), h("div", { key: '567c17e0b546e9cbf0b151f5e058a1e5c8128d5f', class: "data-table__pagination" }, h("div", { key: '39b814ecda85ebb41d3e2bcbbb3015367edfc47e', class: "data-table__pagination-info" }, this.state.totalRows > 0
+        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: '1bd3786f7f62223ece07ecb4a0584fa571cdd1f5', class: "data-table__loading-overlay" }, h("div", { key: '5ea48299d4904c40c85bb8febca80d9003bac931', class: "data-table__loading" }, "Loading...")))), h("div", { key: '7e5ee89bc773833f70ee97fc78ce90f195476fd3', class: "data-table__pagination" }, h("div", { key: '16ff12879240b0d3ca554c2d54060b463cd3b880', class: "data-table__pagination-info" }, this.state.totalRows > 0
             ? `${this.state.page * this.state.pageSize + 1}-${Math.min((this.state.page + 1) * this.state.pageSize, this.state.totalRows)} of ${this.state.totalRows}`
-            : '0 results'), h("div", { key: 'e937607ecfcdd6257f5b34c38c24ca3caa04a736', class: "data-table__pagination-controls" }, h("select", { key: 'dd39176cb21e8f1c8000c87710ea22e8100d8de7', class: "data-table__page-size", onChange: (e) => {
+            : '0 results'), h("div", { key: '4e22693aa84afffc1fca03ca88ad8235f7b22b04', class: "data-table__pagination-controls" }, h("select", { key: '0b08e5b10b5c9d313abed8995f116cff0d499d76', class: "data-table__page-size", onChange: (e) => {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.handlePageSizeChange(Number(e.target.value));
-            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '70b60eaf9c0193ea8ef9ff95bacb05d720e3cba9', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: 'cf36b9fae6c3cb821101a23abe071daceae5bd45', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '060b12a98b60f4888f280322547505ce42734f2d', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '6b1962a2c3b75e979e69db4817e3b754ab9d9296', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: '47662fbec3bf8912e7beb740aa591ef94cc3a527', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
+            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: 'ebac0679723c2769dfdeee0c78c91cbd43083d34', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: '03fdb7e083597370d0fb54a9dd7cc4ea77d19181', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '90bb4c5f8b1a8350c956b354fd3a0570909c1613', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '2d16b396615b4bb091154e27edcca428042f620d', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: 'bf9b1446d2eb123acc05eb83e8df8416a8a2a7a1', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
     }
     static get is() { return "seki-data-table"; }
     static get encapsulation() { return "shadow"; }
@@ -848,6 +876,58 @@ export class SekiDataTable {
                 "reflect": false,
                 "attribute": "empty-message",
                 "defaultValue": "'No data'"
+            },
+            "fetchData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FetchDataCallback",
+                    "resolved": "((request: FetchRequest) => Promise<FetchResponse>) | undefined",
+                    "references": {
+                        "FetchDataCallback": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::FetchDataCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "Prop",
+                            "text": ": in the lazy-loader build only\ndecorated members are proxied from the host element to the instance."
+                        }],
+                    "text": "Callback to fetch data. Set it as a JS property. Assigning or replacing it\n(re)loads the table. Must be a"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "renderExpandedRow": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RenderExpandedRowCallback",
+                    "resolved": "((row: Record<string, unknown>) => string) | undefined",
+                    "references": {
+                        "RenderExpandedRowCallback": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/data-table/interfaces.ts::RenderExpandedRowCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "Prop",
+                            "text": ", see fetchData)"
+                        }],
+                    "text": "Callback to render expanded row content (must be a"
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -1262,6 +1342,9 @@ export class SekiDataTable {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "fetchData",
+                "methodName": "fetchDataChanged"
+            }, {
                 "propName": "columns",
                 "methodName": "columnsChanged"
             }, {