@mmlogic/components 0.1.0

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

@@ -0,0 +1,522 @@
+import { h, Host } from "@stencil/core";
+import { CellRenderer } from "../../utils/cell-renderer";
+const BUFFER = 10;
+/** Wacht deze tijd (ms) na het laatste scroll-event voordat pagina's worden
+ *  aangevraagd. Pagina's die de gebruiker snel voorbij scrollt worden zo geskipt. */
+const REQUEST_DEBOUNCE_MS = 150;
+export class MrdTable {
+    constructor() {
+        // ── Debounce internals (geen @State — triggert geen re-render) ─────────────
+        /** Pagina's die wachten op debounce-flush. */
+        this.pendingPages = new Set();
+        /** Handle van de actieve debounce-timer. */
+        this.debounceTimer = null;
+        // ── Props ──────────────────────────────────────────────────────────────────
+        this.columns = [];
+        /** Direct rows (non-paginated mode, used when totalElements === 0). */
+        this.rows = [];
+        this.locale = navigator.language;
+        /** Total number of records across all pages. 0 = non-paginated mode. */
+        this.totalElements = 0;
+        /** Records per page (must match the API page size). */
+        this.pageSize = 20;
+        /** Row height in px — used for spacer and scroll-position maths. */
+        this.rowHeight = 36;
+        /** Height of the scroll container in px. */
+        this.tableHeight = 500;
+        /** Initial sort applied on load, e.g. "timestamp,desc" or "name".
+         *  Parsed by init() into sortField + sortDir. */
+        this.defaultSort = '';
+        // ── Internal state ─────────────────────────────────────────────────────────
+        /** Pages injected via setPage(). Always replaced by a new Map to trigger re-render. */
+        this.loadedPages = new Map();
+        /** Pages already requested via mrdLoadPage (to avoid duplicate events). */
+        this.requestedPages = new Set();
+        /** Absolute index of the first row currently in the render window. */
+        this.renderStart = 0;
+        /** Absolute index of the last row currently in the render window. */
+        this.renderEnd = 0;
+        /** Locked column widths (px) — measured after first page renders, then fixed. */
+        this.colWidths = [];
+        /** Column currently used for sorting (empty = no sort). */
+        this.sortField = '';
+        /** Sort direction for sortField. */
+        this.sortDir = 'asc';
+        this.handleScroll = (e) => {
+            const scroller = e.currentTarget;
+            const scrollTop = scroller.scrollTop;
+            const total = this.totalElements;
+            const visStart = Math.floor(scrollTop / this.rowHeight);
+            const visEnd = Math.min(visStart + this.visibleCount(), total - 1);
+            this.renderStart = Math.max(0, visStart - BUFFER);
+            this.renderEnd = Math.min(total - 1, visEnd + BUFFER);
+            this.requestPagesForWindow(this.renderStart, this.renderEnd);
+        };
+    }
+    // ── Public API ─────────────────────────────────────────────────────────────
+    /**
+     * Initialise (or reset) the virtual scroll.
+     * Call after setting all props and registering the mrdLoadPage listener,
+     * but before calling setPage(0, rows).
+     */
+    async init() {
+        var _a;
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        this.pendingPages.clear();
+        this.loadedPages = new Map();
+        this.requestedPages = new Set();
+        this.colWidths = [];
+        // Apply defaultSort prop as the initial sort state.
+        if (this.defaultSort) {
+            const parts = this.defaultSort.split(',');
+            this.sortField = parts[0].trim();
+            this.sortDir = ((_a = parts[1]) === null || _a === void 0 ? void 0 : _a.trim()) === 'desc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortField = '';
+            this.sortDir = 'asc';
+        }
+        this.renderStart = 0;
+        this.renderEnd = Math.max(0, Math.min(this.visibleCount() + BUFFER, this.totalElements - 1));
+        // Scroll the container back to the top when switching datasets.
+        const scroller = this.el.querySelector('.mrd-table__scroll');
+        if (scroller)
+            scroller.scrollTop = 0;
+        // Do NOT emit mrdLoadPage here — the host injects page 0 via setPage().
+    }
+    /**
+     * Inject the rows for a given page (0-based).
+     * Creates a new Map reference so Stencil detects the state change.
+     */
+    async setPage(pageNumber, rows) {
+        const next = new Map(this.loadedPages);
+        next.set(pageNumber, rows);
+        this.loadedPages = next;
+    }
+    // ── Private helpers ────────────────────────────────────────────────────────
+    visibleCount() {
+        return Math.ceil(this.tableHeight / this.rowHeight);
+    }
+    /** Returns the current sort value for use in ?sort= query params. */
+    sortParam() {
+        if (!this.sortField)
+            return '';
+        return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
+    }
+    /** Called when a header cell is clicked. Toggles direction or sets a new column. */
+    handleSortClick(col) {
+        if (this.sortField === col.name) {
+            this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortField = col.name;
+            this.sortDir = 'asc';
+        }
+        // Cancel any pending scroll debounce.
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        this.pendingPages.clear();
+        // Wipe all loaded data so the new sort order is fetched fresh.
+        this.loadedPages = new Map();
+        this.requestedPages = new Set();
+        this.colWidths = [];
+        this.renderStart = 0;
+        this.renderEnd = Math.max(0, Math.min(this.visibleCount() + BUFFER, this.totalElements - 1));
+        const scroller = this.el.querySelector('.mrd-table__scroll');
+        if (scroller)
+            scroller.scrollTop = 0;
+        // Emit immediately — no debounce for intentional sort clicks.
+        this.emitPagesForWindow(this.renderStart, this.renderEnd);
+    }
+    /** Emits mrdLoadPage immediately for all missing pages in [start, end]. */
+    emitPagesForWindow(start, end) {
+        const firstPage = Math.floor(start / this.pageSize);
+        const lastPage = Math.floor(end / this.pageSize);
+        const next = new Set(this.requestedPages);
+        let changed = false;
+        for (let p = firstPage; p <= lastPage; p++) {
+            if (!this.loadedPages.has(p) && !next.has(p)) {
+                next.add(p);
+                this.mrdLoadPage.emit({ page: p, sort: this.sortParam() });
+                changed = true;
+            }
+        }
+        if (changed)
+            this.requestedPages = next;
+    }
+    getRow(i) {
+        var _a;
+        const page = this.loadedPages.get(Math.floor(i / this.pageSize));
+        return (_a = page === null || page === void 0 ? void 0 : page[i % this.pageSize]) !== null && _a !== void 0 ? _a : null;
+    }
+    requestPagesForWindow(start, end) {
+        const firstPage = Math.floor(start / this.pageSize);
+        const lastPage = Math.floor(end / this.pageSize);
+        let anyNew = false;
+        for (let p = firstPage; p <= lastPage; p++) {
+            if (!this.loadedPages.has(p) && !this.requestedPages.has(p) && !this.pendingPages.has(p)) {
+                this.pendingPages.add(p);
+                anyNew = true;
+            }
+        }
+        if (!anyNew)
+            return;
+        // Reset de timer: wacht tot het scrollen even stopt.
+        if (this.debounceTimer !== null)
+            clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => this.flushPendingPages(), REQUEST_DEBOUNCE_MS);
+    }
+    /** Emitteert mrdLoadPage alleen voor pagina's die na de debounce-wachttijd
+     *  nog steeds binnen het huidige render-venster vallen. */
+    flushPendingPages() {
+        this.debounceTimer = null;
+        if (this.pendingPages.size === 0)
+            return;
+        const next = new Set(this.requestedPages);
+        let changed = false;
+        for (const page of this.pendingPages) {
+            // Sla over als pagina inmiddels geladen of al aangevraagd is.
+            if (this.loadedPages.has(page) || next.has(page))
+                continue;
+            // Sla over als de pagina buiten het huidige venster is geraakt.
+            const pageStart = page * this.pageSize;
+            const pageEnd = pageStart + this.pageSize - 1;
+            if (pageEnd < this.renderStart || pageStart > this.renderEnd)
+                continue;
+            next.add(page);
+            this.mrdLoadPage.emit({ page, sort: this.sortParam() });
+            changed = true;
+        }
+        this.pendingPages.clear();
+        if (changed)
+            this.requestedPages = next;
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    /** After the first page of data renders, lock column widths so subsequent
+     *  page loads don't cause layout shifts. */
+    componentDidRender() {
+        if (this.colWidths.length === 0 && this.loadedPages.size > 0 && this.totalElements > 0) {
+            const ths = this.el.querySelectorAll('.mrd-table__header');
+            if (ths.length > 0) {
+                this.colWidths = Array.from(ths).map(th => th.offsetWidth);
+            }
+        }
+    }
+    // ── Render ─────────────────────────────────────────────────────────────────
+    render() {
+        var _a, _b;
+        if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
+        // ── Non-paginated mode ──────────────────────────────────────────────────
+        if (this.totalElements === 0) {
+            return (h(Host, null, h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => (h("th", { class: "mrd-table__header" }, col.label))))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
+                var _a;
+                const value = CellRenderer.render(col, row, this.locale);
+                const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
+                return (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+            })))))), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden.")))));
+        }
+        // ── Paginated / virtual-scroll mode ────────────────────────────────────
+        const total = this.totalElements;
+        const colCount = this.columns.length;
+        const topSpacerHeight = this.renderStart * this.rowHeight;
+        const bottomSpacerHeight = Math.max(0, (total - 1 - this.renderEnd) * this.rowHeight);
+        const renderedRows = [];
+        for (let i = this.renderStart; i <= this.renderEnd; i++) {
+            const row = this.getRow(i);
+            if (row === null) {
+                renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--loading" }, h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, h("span", { class: "mrd-table__placeholder-bar" }))));
+            }
+            else {
+                renderedRows.push(h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
+                    var _a;
+                    const value = CellRenderer.render(col, row, this.locale);
+                    const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
+                    return (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+                })));
+            }
+        }
+        const tableStyle = this.colWidths.length > 0
+            ? { tableLayout: 'fixed' }
+            : undefined;
+        return (h(Host, null, h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
+            const isActive = this.sortField === col.name;
+            const cls = `mrd-table__header mrd-table__header--sortable${isActive ? ` mrd-table__header--sorted-${this.sortDir}` : ''}`;
+            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, h("span", { class: "mrd-table__header-label" }, col.label), h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
+        }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))))), total === 0 && (h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden."))));
+    }
+    static get is() { return "mrd-table"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TableColumn[]",
+                    "resolved": "TableColumn[]",
+                    "references": {
+                        "TableColumn": {
+                            "location": "import",
+                            "path": "../../utils/cell-renderer",
+                            "id": "src/utils/cell-renderer.ts::TableColumn",
+                            "referenceLocation": "TableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any>[]",
+                    "resolved": "Record<string, any>[]",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Direct rows (non-paginated mode, used when totalElements === 0)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            },
+            "totalElements": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of records across all pages. 0 = non-paginated mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-elements",
+                "defaultValue": "0"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Records per page (must match the API page size)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "20"
+            },
+            "rowHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row height in px \u2014 used for spacer and scroll-position maths."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-height",
+                "defaultValue": "36"
+            },
+            "tableHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the scroll container in px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "table-height",
+                "defaultValue": "500"
+            },
+            "defaultSort": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial sort applied on load, e.g. \"timestamp,desc\" or \"name\".\nParsed by init() into sortField + sortDir."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-sort",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loadedPages": {},
+            "requestedPages": {},
+            "renderStart": {},
+            "renderEnd": {},
+            "colWidths": {},
+            "sortField": {},
+            "sortDir": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdLoadPage",
+                "name": "mrdLoadPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a page needs to be fetched. Host fetches and calls setPage().\n`sort` is the raw query-param value, e.g. \"name\" or \"name,desc\"."
+                },
+                "complexType": {
+                    "original": "{ page: number; sort: string }",
+                    "resolved": "{ page: number; sort: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "init": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Initialise (or reset) the virtual scroll.\nCall after setting all props and registering the mrdLoadPage listener,\nbut before calling setPage(0, rows).",
+                    "tags": []
+                }
+            },
+            "setPage": {
+                "complexType": {
+                    "signature": "(pageNumber: number, rows: Record<string, any>[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "pageNumber",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "rows",
+                            "type": "Record<string, any>[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inject the rows for a given page (0-based).\nCreates a new Map reference so Stencil detects the state change.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/mrd-table/mrd-table.scss

@@ -0,0 +1,158 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ── Scroll container (paginated mode) ─────────────────────────────────── */
+.mrd-table__scroll {
+  overflow-y: auto;
+  overflow-x: auto;
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  /* Voorkomt dat de browser scrollTop automatisch aanpast wanneer de
+     top-spacer groeit (scroll anchoring feedbackloop). */
+  overflow-anchor: none;
+}
+
+/* ── Inner wrapper: horizontal scroll in non-paginated mode ────────────── */
+/* Only used in non-paginated path; paginated mode scrolls via .mrd-table__scroll */
+.mrd-table {
+  overflow-x: auto;
+}
+
+/* ── Table ─────────────────────────────────────────────────────────────── */
+.mrd-table__table {
+  width: auto;
+  min-width: 100%;
+  border-collapse: collapse;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-900);
+}
+
+/* When table-layout: fixed is applied (after col widths are locked), allow
+   horizontal overflow so the scroll container can scroll. */
+.mrd-table__scroll .mrd-table__table {
+  min-width: max-content;
+}
+
+/* ── Sticky header ─────────────────────────────────────────────────────── */
+.mrd-table__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--mrd-color-white);
+  text-align: left;
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  border-bottom: 2px solid var(--mrd-border-color);
+  color: var(--mrd-color-neutral-600);
+  font-weight: var(--mrd-font-weight-medium);
+  white-space: nowrap;
+  font-size: var(--mrd-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.mrd-table__header--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.mrd-table__header--sortable:hover {
+  background: var(--mrd-color-neutral-50);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__header--sorted-asc,
+.mrd-table__header--sorted-desc {
+  color: var(--mrd-color-primary);
+  border-bottom-color: var(--mrd-color-primary);
+}
+
+.mrd-table__header-label {
+  margin-right: var(--mrd-space-1);
+}
+
+.mrd-table__sort-icon {
+  font-size: 0.65rem;
+  opacity: 0.4;
+  vertical-align: middle;
+}
+
+.mrd-table__header--sorted-asc .mrd-table__sort-icon,
+.mrd-table__header--sorted-desc .mrd-table__sort-icon {
+  opacity: 1;
+  color: var(--mrd-color-primary);
+}
+
+/* ── Data rows ─────────────────────────────────────────────────────────── */
+/* Background is set via inline style based on absolute row index,
+   so zebra striping stays correct even with virtual spacer rows. */
+.mrd-table__row {
+  border-bottom: 1px solid var(--mrd-border-color);
+}
+
+/* !important overrides the inline zebra background on hover */
+.mrd-table__row:hover {
+  background: var(--mrd-color-neutral-200) !important;
+}
+
+/* ── Spacer rows (virtual scroll padding above/below render window) ─────── */
+.mrd-table__spacer {
+  border: none;
+}
+
+.mrd-table__spacer td {
+  padding: 0;
+  border: none;
+}
+
+/* ── Cells ─────────────────────────────────────────────────────────────── */
+.mrd-table__cell {
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.mrd-table__cell--numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Loading placeholder row ───────────────────────────────────────────── */
+.mrd-table__row--loading {
+  background: transparent;
+}
+
+.mrd-table__cell--placeholder {
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  border-bottom: 1px solid var(--mrd-border-color);
+}
+
+.mrd-table__placeholder-bar {
+  display: block;
+  height: 0.75rem;
+  width: 55%;
+  border-radius: var(--mrd-border-radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--mrd-color-neutral-200) 25%,
+    var(--mrd-color-neutral-100) 50%,
+    var(--mrd-color-neutral-200) 75%
+  );
+  background-size: 200% 100%;
+  animation: mrd-shimmer 1.4s ease infinite;
+}
+
+@keyframes mrd-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Empty state ───────────────────────────────────────────────────────── */
+.mrd-table__empty {
+  padding: var(--mrd-space-4) var(--mrd-space-3);
+  color: var(--mrd-color-neutral-500);
+  font-size: var(--mrd-font-size-sm);
+  text-align: center;
+  margin: 0;
+}