@svgrid/grid 1.0.0

package/dist/svgrid.locale-filtering.test.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Integration tests for the `filterLocale` prop. Mounts a real
+ * <SvGrid> with accented data, drives the column-menu filter via
+ * `api.setFilter()`, then asserts the visible row count via
+ * `api.getDisplayedRows()`.
+ *
+ * Covers:
+ *   - Accent-insensitive `contains` operator on the menu filter
+ *   - Diacritic-stripped global filter (via `setGlobalFilter` not in
+ *     the public api yet; here we use `api.setFilter('city', ...)`
+ *     which exercises the same pipeline)
+ *   - filterLocale prop pass-through (es-ES, de-DE)
+ *   - Regression: ASCII queries still narrow rows
+ */
+export {};

package/dist/svgrid.locale-filtering.test.js

@@ -0,0 +1,261 @@
+/**
+ * Integration tests for the `filterLocale` prop. Mounts a real
+ * <SvGrid> with accented data, drives the column-menu filter via
+ * `api.setFilter()`, then asserts the visible row count via
+ * `api.getDisplayedRows()`.
+ *
+ * Covers:
+ *   - Accent-insensitive `contains` operator on the menu filter
+ *   - Diacritic-stripped global filter (via `setGlobalFilter` not in
+ *     the public api yet; here we use `api.setFilter('city', ...)`
+ *     which exercises the same pipeline)
+ *   - filterLocale prop pass-through (es-ES, de-DE)
+ *   - Regression: ASCII queries still narrow rows
+ */
+import { describe, expect, it } from 'vitest';
+import { mount, unmount } from 'svelte';
+import SvGrid from './SvGrid.svelte';
+import { columnFilteringFeature, createCoreRowModel, createFilteredRowModel, createSortedRowModel, rowSortingFeature, sortFns, tableFeatures, } from './index';
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature });
+const rows = [
+    { id: 1, city: 'München', country: 'Deutschland', region: 'Europe', population: 1510000 },
+    { id: 2, city: 'Köln', country: 'Deutschland', region: 'Europe', population: 1080000 },
+    { id: 3, city: 'Genève', country: 'Suisse', region: 'Europe', population: 203000 },
+    { id: 4, city: 'Montréal', country: 'Canada', region: 'Americas', population: 1780000 },
+    { id: 5, city: 'México', country: 'México', region: 'Americas', population: 9210000 },
+    { id: 6, city: 'São Paulo', country: 'Brasil', region: 'Americas', population: 12330000 },
+    { id: 7, city: 'Tōkyō', country: '日本', region: 'Asia', population: 13960000 },
+    { id: 8, city: 'İstanbul', country: 'Türkiye', region: 'Asia', population: 15840000 },
+    { id: 9, city: 'Málaga', country: 'España', region: 'Europe', population: 580000 },
+    { id: 10, city: 'Berlin', country: 'Deutschland', region: 'Europe', population: 3770000 },
+];
+const cols = [
+    { field: 'city', header: 'City', width: 180, editable: false },
+    { field: 'country', header: 'Country', width: 160, editable: false },
+    { field: 'region', header: 'Region', width: 110, editable: false },
+    { field: 'population', header: 'Population', width: 130, editable: false, align: 'right' },
+];
+function mountGrid(opts = {}) {
+    return new Promise((res, rej) => {
+        const target = document.createElement('div');
+        document.body.appendChild(target);
+        let api = null;
+        const app = mount(SvGrid, {
+            target,
+            props: {
+                data: rows,
+                columns: cols,
+                features,
+                _rowModels: {
+                    coreRowModel: createCoreRowModel(),
+                    filteredRowModel: createFilteredRowModel(),
+                    sortedRowModel: createSortedRowModel(sortFns),
+                },
+                containerHeight: 360,
+                virtualization: false,
+                columnVirtualization: false,
+                showPagination: false,
+                showColumnFilters: false,
+                showGlobalFilter: false,
+                showRowSelection: false,
+                filterLocale: opts.filterLocale,
+                onApiReady(received) {
+                    api = received;
+                    res({
+                        api,
+                        destroy: () => { unmount(app); target.remove(); },
+                    });
+                },
+            },
+        });
+        queueMicrotask(() => { if (!api)
+            rej(new Error('onApiReady never fired')); });
+    });
+}
+const tick = () => new Promise((r) => queueMicrotask(r));
+describe('SvGrid filter - default locale (no prop)', () => {
+    it('"munch" matches "München" via contains operator', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'munch' });
+            await tick();
+            const visible = api.getDisplayedRows();
+            expect(visible.map((r) => r.city)).toEqual(['München']);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('"geneve" matches "Genève"', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'geneve' });
+            await tick();
+            const visible = api.getDisplayedRows();
+            expect(visible.map((r) => r.city)).toEqual(['Genève']);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('"sao paulo" matches "São Paulo"', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'sao paulo' });
+            await tick();
+            const visible = api.getDisplayedRows();
+            expect(visible.map((r) => r.city)).toEqual(['São Paulo']);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('"tokyo" matches "Tōkyō"', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'tokyo' });
+            await tick();
+            const visible = api.getDisplayedRows();
+            expect(visible.map((r) => r.city)).toEqual(['Tōkyō']);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('"istanbul" matches "İstanbul" (dotted-I default folding)', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'istanbul' });
+            await tick();
+            const visible = api.getDisplayedRows();
+            expect(visible.map((r) => r.city)).toEqual(['İstanbul']);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('"deutschland" matches all German cities', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('country', { operator: 'contains', value: 'deutschland' });
+            await tick();
+            const visible = api.getDisplayedRows();
+            expect(visible.map((r) => r.city).sort()).toEqual(['Berlin', 'Köln', 'München']);
+        }
+        finally {
+            destroy();
+        }
+    });
+});
+describe('SvGrid filter - filterLocale="de-DE"', () => {
+    it('explicit German locale - "munchen" still matches "München"', async () => {
+        const { api, destroy } = await mountGrid({ filterLocale: 'de-DE' });
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'munchen' });
+            await tick();
+            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['München']);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('"koln" matches "Köln"', async () => {
+        const { api, destroy } = await mountGrid({ filterLocale: 'de-DE' });
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'koln' });
+            await tick();
+            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['Köln']);
+        }
+        finally {
+            destroy();
+        }
+    });
+});
+describe('SvGrid filter - filterLocale="es-ES"', () => {
+    it('"mexico" matches "México"', async () => {
+        const { api, destroy } = await mountGrid({ filterLocale: 'es-ES' });
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'mexico' });
+            await tick();
+            const cities = api.getDisplayedRows().map((r) => r.city);
+            expect(cities).toContain('México');
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('"malaga" matches "Málaga"', async () => {
+        const { api, destroy } = await mountGrid({ filterLocale: 'es-ES' });
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'malaga' });
+            await tick();
+            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['Málaga']);
+        }
+        finally {
+            destroy();
+        }
+    });
+});
+describe('SvGrid filter - startsWith + equals operators', () => {
+    it('startsWith "mun" matches München', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'startsWith', value: 'mun' });
+            await tick();
+            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['München']);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('equals "berlin" matches exactly "Berlin" (case-insensitive)', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'equals', value: 'berlin' });
+            await tick();
+            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['Berlin']);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('equals "kolN" matches "Köln" (case + accent insensitive)', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'equals', value: 'kolN' });
+            await tick();
+            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['Köln']);
+        }
+        finally {
+            destroy();
+        }
+    });
+});
+describe('SvGrid filter - clear + compose', () => {
+    it('clearFilter removes the narrowing', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('city', { operator: 'contains', value: 'munch' });
+            await tick();
+            expect(api.getDisplayedRows().length).toBe(1);
+            api.clearFilter('city');
+            await tick();
+            expect(api.getDisplayedRows().length).toBe(rows.length);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('two column filters compose (AND across columns)', async () => {
+        const { api, destroy } = await mountGrid();
+        try {
+            api.setFilter('country', { operator: 'contains', value: 'deutschland' });
+            api.setFilter('city', { operator: 'contains', value: 'mun' });
+            await tick();
+            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['München']);
+        }
+        finally {
+            destroy();
+        }
+    });
+});

package/dist/svgrid.new-features.wrapper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/svgrid.new-features.wrapper.test.js

@@ -0,0 +1,136 @@
+/**
+ * Source-level smoke tests for the wrapper additions: `getRowId` prop,
+ * `cellClass` / `rowClass` rendering, the column-layout API surface
+ * (`setColumnWidth` / `getColumnWidths` / `setColumnPinning` /
+ * `getColumnPinning`), the `between` operator UI, and the multi-cell
+ * paste / cut keyboard plumbing.
+ *
+ * These are deliberately source-string assertions, not jsdom mounts -
+ * Svelte 5 mount inside vitest is brittle (the existing
+ * `svgrid.wrapper.test.ts` follows the same pattern). The behaviour
+ * itself is covered by integration probes in the gallery (see the
+ * pivot expansion + paste/cut probes that were run during build) and
+ * the upstream unit tests of the headless engine + Pro pivot.
+ */
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+const sourcePath = resolve(__dirname, './SvGrid.svelte');
+const source = readFileSync(sourcePath, 'utf-8');
+const typesPath = resolve(__dirname, './svgrid-wrapper.types.ts');
+const types = readFileSync(typesPath, 'utf-8');
+describe('SvGrid wrapper - getRowId prop', () => {
+    it('declares the getRowId prop on the Props type', () => {
+        expect(source).toMatch(/getRowId\?:\s*\(row:\s*TData,\s*index:\s*number\)\s*=>\s*string/);
+    });
+    it('forwards the prop into createSvGrid options', () => {
+        expect(source).toMatch(/get getRowId\(\)[\s\S]*?return props\.getRowId/);
+    });
+});
+describe('SvGrid wrapper - cellClass + rowClass', () => {
+    it('declares the rowClass prop on the Props type', () => {
+        expect(source).toMatch(/rowClass\?:\s*\(ctx:\s*\{/);
+    });
+    it('exposes a resolveClassList helper that normalises array / record / string forms', () => {
+        expect(source).toMatch(/function resolveClassList\(/);
+        expect(source).toMatch(/Array\.isArray\(value\)/);
+    });
+    it('computes the row-level class once per render row and threads it onto the <tr>', () => {
+        expect(source).toMatch(/function computeRowClass/);
+        expect(source).toMatch(/userRowClass = computeRowClass\(row, rowIndex\)/);
+        expect(source).toMatch(/class=\{`sv-grid-row \$\{userRowClass\}`\}/);
+    });
+    it('computes the cell-level class per column and threads it onto the <td>', () => {
+        expect(source).toMatch(/function computeCellClass/);
+        expect(source).toMatch(/userCellClass = computeCellClass\(row, rendered\.column\)/);
+        expect(source).toMatch(/class=\{`sv-grid-cell \$\{userCellClass\}`\}/);
+    });
+});
+describe('SvGrid wrapper - column-layout API', () => {
+    it('declares setColumnWidth + getColumnWidths in the public type', () => {
+        expect(types).toContain('setColumnWidth(columnId: string, width: number): void');
+        expect(types).toContain('getColumnWidths(): Record<string, number>');
+    });
+    it('declares setColumnPinning + getColumnPinning in the public type', () => {
+        expect(types).toMatch(/setColumnPinning\(pinning:\s*\{/);
+        expect(types).toContain('getColumnPinning(): { left: string[]; right: string[] }');
+    });
+    it('implements all four methods in the api object', () => {
+        expect(source).toMatch(/setColumnWidth\(columnId: string, width: number\)/);
+        expect(source).toMatch(/getColumnWidths\(\)/);
+        expect(source).toMatch(/setColumnPinning\(pinning\)/);
+        expect(source).toMatch(/getColumnPinning\(\)/);
+    });
+    it('clamps setColumnWidth to MIN_COLUMN_WIDTH', () => {
+        // Confirm the clamp is in the code path so a caller can't drop a
+        // column below the minimum by passing 0 or a negative number.
+        expect(source).toMatch(/Math\.max\(MIN_COLUMN_WIDTH/);
+    });
+    it('defensive-copies setColumnPinning inputs so callers cannot mutate state', () => {
+        expect(source).toMatch(/Array\.from\(new Set\(pinning\.left/);
+        expect(source).toMatch(/Array\.from\(new Set\(pinning\.right/);
+    });
+});
+describe('SvGrid wrapper - between filter operator', () => {
+    it("includes 'between' in the FilterOperator type", () => {
+        expect(source).toMatch(/"between"/);
+    });
+    it("includes 'between' in NUMBER_OPERATORS + DATE_OPERATORS but NOT in TEXT_OPERATORS", () => {
+        // The list literals appear in order, so we slice each block out
+        // separately and check membership.
+        const numOps = source.match(/const NUMBER_OPERATORS[^]*?\];/)?.[0] ?? '';
+        expect(numOps).toContain('"between"');
+        const dateOps = source.match(/const DATE_OPERATORS[^]*?\];/)?.[0] ?? '';
+        expect(dateOps).toContain('"between"');
+        const textOps = source.match(/const TEXT_OPERATORS[^]*?\];/)?.[0] ?? '';
+        expect(textOps).not.toContain('"between"');
+    });
+    it('renders a second input ("To") when the operator is between', () => {
+        expect(source).toMatch(/menuActiveOperator === "between"/);
+        expect(source).toMatch(/placeholder="To"/);
+    });
+    it('treats the filter as inactive until BOTH endpoints are non-empty', () => {
+        // The active-filters filter() should require value AND valueTo.
+        expect(source).toMatch(/if \(f\.operator === "between"\) \{[^}]*f\.value\.trim\(\)\.length > 0[^}]*f\.valueTo[^}]*\.trim\(\)\.length > 0/);
+    });
+    it('forwards valueTo through applyExcelFilter', () => {
+        expect(source).toMatch(/valueTo: filter\.operator === "between" \? filter\.valueTo : undefined/);
+    });
+    it('publishes valueTo in the onFiltersChange payload only for between clauses', () => {
+        expect(source).toMatch(/f\.operator === "between" && f\.valueTo\s*\?\s*\{ valueTo: f\.valueTo \}/);
+    });
+    it('exposes valueTo on the imperative setFilter input + getFilters output', () => {
+        expect(types).toMatch(/setFilter\(\s*columnId: string,[\s\S]*?valueTo\?: string/);
+        expect(types).toMatch(/getFilters\(\)[\s\S]*?valueTo\?: string/);
+    });
+});
+describe('SvGrid wrapper - multi-cell paste + cut + delete', () => {
+    it('fills the selection range when the clipboard payload is 1x1', () => {
+        expect(source).toMatch(/clipboardIsSingleCell\s*=\s*\n?\s*lines\.length === 1 && \(lines\[0\]\?\.split\("\\t"\)\.length \?\? 0\) === 1/);
+        expect(source).toMatch(/selectionIsRange = startRow !== endRow \|\| startCol !== endCol/);
+        expect(source).toMatch(/fillRange = clipboardIsSingleCell && selectionIsRange/);
+    });
+    it('walks the entire selection rect when filling', () => {
+        expect(source).toMatch(/const rowSpan = fillRange \? endRow - startRow \+ 1 : lines\.length/);
+        expect(source).toMatch(/const colSpan = fillRange/);
+    });
+    it('implements clearSelectedCells() that touches every editable cell in the range', () => {
+        expect(source).toMatch(/function clearSelectedCells\(\): boolean/);
+        expect(source).toMatch(/parseEditorValue\(editorType, ""\)/);
+    });
+    it('wires Ctrl/Cmd+X to cutSelectionToClipboard', () => {
+        expect(source).toMatch(/lower === "x"/);
+        expect(source).toMatch(/void cutSelectionToClipboard\(\)/);
+        expect(source).toMatch(/async function cutSelectionToClipboard/);
+        // Confirm both calls live inside the cutSelectionToClipboard body
+        // (copy first, then clear). A comment between them is fine.
+        const body = source.match(/async function cutSelectionToClipboard\(\)[^{]*\{([\s\S]*?)^\s\s\}/m)?.[1] ?? '';
+        expect(body).toContain('copySelectionToClipboard();');
+        expect(body).toContain('clearSelectedCells();');
+        expect(body.indexOf('copySelectionToClipboard()')).toBeLessThan(body.indexOf('clearSelectedCells()'));
+    });
+    it('wires Delete + Backspace to clearSelectedCells (without clipboard interaction)', () => {
+        expect(source).toMatch(/event\.key === "Delete" \|\| event\.key === "Backspace"/);
+        expect(source).toMatch(/if \(clearSelectedCells\(\)\)\s*\{/);
+    });
+});

package/dist/svgrid.row-pinning.test.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Component tests for the engine-level row pinning props
+ * (`pinnedTopRows` / `pinnedBottomRows`). Mount a real <SvGrid>,
+ * pass the props, then assert on the rendered DOM:
+ *
+ *   - pinned-top / pinned-bottom <tbody>s are rendered
+ *   - each pinned row carries the expected class + data attributes
+ *   - column widths + cell values match the schema
+ *   - read-only invariants hold (no editor cell, no checkbox cell)
+ *   - reactive prop changes re-render
+ *   - stacking attributes (data-pinned-index) are present
+ *   - CSS variables for sticky offsets are set on the shell
+ */
+export {};

package/dist/svgrid.row-pinning.test.js

@@ -0,0 +1,250 @@
+/**
+ * Component tests for the engine-level row pinning props
+ * (`pinnedTopRows` / `pinnedBottomRows`). Mount a real <SvGrid>,
+ * pass the props, then assert on the rendered DOM:
+ *
+ *   - pinned-top / pinned-bottom <tbody>s are rendered
+ *   - each pinned row carries the expected class + data attributes
+ *   - column widths + cell values match the schema
+ *   - read-only invariants hold (no editor cell, no checkbox cell)
+ *   - reactive prop changes re-render
+ *   - stacking attributes (data-pinned-index) are present
+ *   - CSS variables for sticky offsets are set on the shell
+ */
+import { describe, expect, it } from 'vitest';
+import { mount, unmount, flushSync } from 'svelte';
+import SvGrid from './SvGrid.svelte';
+import { columnFilteringFeature, createCoreRowModel, createFilteredRowModel, createSortedRowModel, rowSortingFeature, sortFns, tableFeatures, } from './index';
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature });
+const rows = [
+    { id: 'ACC-1', account: 'Helios', arr: 120000, seats: 40 },
+    { id: 'ACC-2', account: 'Vertex', arr: 85000, seats: 22 },
+    { id: 'ACC-3', account: 'Atlas', arr: 250000, seats: 80 },
+    { id: 'ACC-4', account: 'Quantum', arr: 60000, seats: 15 },
+];
+const cols = [
+    { field: 'id', header: 'ID', width: 100, editable: false },
+    { field: 'account', header: 'Account', width: 200, editable: false },
+    { field: 'arr', header: 'ARR', width: 130, editable: false, align: 'right',
+        format: { type: 'number', options: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } } },
+    { field: 'seats', header: 'Seats', width: 90, editable: false, align: 'right' },
+];
+function mountGrid(opts = {}) {
+    return new Promise((res, rej) => {
+        const target = document.createElement('div');
+        document.body.appendChild(target);
+        const propsState = { ...opts };
+        let api = null;
+        const app = mount(SvGrid, {
+            target,
+            props: {
+                data: rows,
+                columns: cols,
+                features,
+                _rowModels: {
+                    coreRowModel: createCoreRowModel(),
+                    filteredRowModel: createFilteredRowModel(),
+                    sortedRowModel: createSortedRowModel(sortFns),
+                },
+                containerHeight: 480,
+                virtualization: false,
+                columnVirtualization: false,
+                enableInlineEditing: false,
+                showPagination: false,
+                showColumnFilters: false,
+                showGlobalFilter: false,
+                showRowSelection: false,
+                pinnedTopRows: propsState.pinnedTopRows,
+                pinnedBottomRows: propsState.pinnedBottomRows,
+                onApiReady(received) {
+                    api = received;
+                    res({
+                        target,
+                        api,
+                        destroy: () => {
+                            unmount(app);
+                            target.remove();
+                        },
+                        setProps(next) {
+                            propsState.pinnedTopRows = next.pinnedTopRows;
+                            propsState.pinnedBottomRows = next.pinnedBottomRows;
+                            app
+                                .pinnedTopRows = next.pinnedTopRows;
+                            app
+                                .pinnedBottomRows = next.pinnedBottomRows;
+                            flushSync();
+                        },
+                    });
+                },
+            },
+        });
+        queueMicrotask(() => { if (!api)
+            rej(new Error('onApiReady never fired')); });
+    });
+}
+const tick = () => new Promise((r) => queueMicrotask(r));
+const TOTALS = {
+    id: '⌃ TOTALS', account: 'All accounts',
+    arr: rows.reduce((s, r) => s + r.arr, 0),
+    seats: rows.reduce((s, r) => s + r.seats, 0),
+};
+const BENCHMARK = {
+    id: '⌃ BENCH', account: 'Industry benchmark',
+    arr: 180000, seats: 95,
+};
+const PAGE = {
+    id: '⌄ PAGE', account: 'Visible page',
+    arr: rows.reduce((s, r) => s + r.arr, 0),
+    seats: rows.reduce((s, r) => s + r.seats, 0),
+};
+describe('SvGrid - pinnedTopRows render', () => {
+    it('renders a pinned-top tbody when prop is provided', async () => {
+        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
+        try {
+            await tick();
+            const topBody = target.querySelector('tbody.sv-grid-pinned-top-body');
+            expect(topBody, 'pinned-top tbody should exist').not.toBeNull();
+            const trs = topBody.querySelectorAll('tr.sv-grid-pinned-row-top');
+            expect(trs.length).toBe(1);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('does NOT render the tbody when prop is empty / undefined', async () => {
+        const { target, destroy } = await mountGrid({ pinnedTopRows: [] });
+        try {
+            await tick();
+            const topBody = target.querySelector('tbody.sv-grid-pinned-top-body');
+            expect(topBody).toBeNull();
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('renders the row values using the column schema (format applied)', async () => {
+        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
+        try {
+            await tick();
+            const tds = target
+                .querySelectorAll('tr.sv-grid-pinned-row-top td');
+            expect(tds.length).toBe(cols.length);
+            // ARR cell should be currency-formatted ($515,000) - currency
+            // symbol exact form may vary by ICU build; assert a "$" plus the
+            // raw number with grouping is present.
+            const arrCellText = (tds[2]?.textContent ?? '').trim();
+            expect(arrCellText).toMatch(/\$/);
+            expect(arrCellText).toContain('515');
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('stacks multiple pinned-top rows with data-pinned-index', async () => {
+        const { target, destroy } = await mountGrid({
+            pinnedTopRows: [TOTALS, BENCHMARK],
+        });
+        try {
+            await tick();
+            const trs = target.querySelectorAll('tr.sv-grid-pinned-row-top');
+            expect(trs.length).toBe(2);
+            expect(trs[0].getAttribute('data-pinned-row')).toBe('top');
+            expect(trs[0].getAttribute('data-pinned-index')).toBe('0');
+            expect(trs[1].getAttribute('data-pinned-index')).toBe('1');
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('marks pinned cells with the data-pinned-row attribute', async () => {
+        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
+        try {
+            await tick();
+            const tr = target.querySelector('tr.sv-grid-pinned-row-top');
+            expect(tr.getAttribute('data-pinned-row')).toBe('top');
+        }
+        finally {
+            destroy();
+        }
+    });
+});
+describe('SvGrid - pinnedBottomRows render', () => {
+    it('renders a pinned-bottom tbody when prop is provided', async () => {
+        const { target, destroy } = await mountGrid({ pinnedBottomRows: [PAGE] });
+        try {
+            await tick();
+            const bottomBody = target.querySelector('tbody.sv-grid-pinned-bottom-body');
+            expect(bottomBody).not.toBeNull();
+            const trs = bottomBody.querySelectorAll('tr.sv-grid-pinned-row-bottom');
+            expect(trs.length).toBe(1);
+            expect(trs[0].getAttribute('data-pinned-row')).toBe('bottom');
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('renders bottom rows AFTER the regular tbody', async () => {
+        const { target, destroy } = await mountGrid({ pinnedBottomRows: [PAGE] });
+        try {
+            await tick();
+            const bodies = target.querySelectorAll('tbody');
+            // [regular .sv-grid-body, .sv-grid-pinned-bottom-body]
+            // In the DOM order, the bottom tbody must come after the main body.
+            const classes = Array.from(bodies).map((b) => b.className);
+            const mainIdx = classes.findIndex((c) => c.includes('sv-grid-body') && !c.includes('pinned'));
+            const botIdx = classes.findIndex((c) => c.includes('sv-grid-pinned-bottom-body'));
+            expect(mainIdx).toBeGreaterThanOrEqual(0);
+            expect(botIdx).toBeGreaterThan(mainIdx);
+        }
+        finally {
+            destroy();
+        }
+    });
+});
+describe('SvGrid - pinned rows are read-only', () => {
+    it('pinned-row cells do not carry the editing class even with inline editing enabled', async () => {
+        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
+        try {
+            await tick();
+            const editingCells = target.querySelectorAll('tr.sv-grid-pinned-row-top td.sv-grid-cell-editing');
+            expect(editingCells.length).toBe(0);
+        }
+        finally {
+            destroy();
+        }
+    });
+    it('pinned rows do not carry the selection checkbox cell', async () => {
+        const { target, destroy } = await mountGrid({ pinnedTopRows: [TOTALS] });
+        try {
+            await tick();
+            // The selection cell class is `.sv-grid-selection-cell`. It may
+            // appear in the regular row when row-selection is on, but never
+            // with a working <button role="checkbox"> inside it on a pinned
+            // row (the snippet renders an empty <td>).
+            const checkboxes = target.querySelectorAll('tr.sv-grid-pinned-row-top button[role="checkbox"]');
+            expect(checkboxes.length).toBe(0);
+        }
+        finally {
+            destroy();
+        }
+    });
+});
+describe('SvGrid - pinned rows + CSS variables', () => {
+    it('sets --sg-thead-h and --sg-pinned-row-h CSS variables on the shell', async () => {
+        const { target, destroy } = await mountGrid({
+            pinnedTopRows: [TOTALS],
+            pinnedBottomRows: [PAGE],
+        });
+        try {
+            await tick();
+            const shell = target.querySelector('.sv-grid-shell');
+            expect(shell, 'shell should exist').not.toBeNull();
+            const style = shell.getAttribute('style') ?? '';
+            expect(style).toContain('--sg-thead-h');
+            expect(style).toContain('--sg-pinned-row-h');
+        }
+        finally {
+            destroy();
+        }
+    });
+});