@svgrid/grid 1.2.22 → 1.2.23

package/dist/SvForm.svelte.d.ts

@@ -0,0 +1,29 @@
+export type FormFieldType = 'text' | 'email' | 'tel' | 'textarea' | 'number' | 'password' | 'select' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating';
+export type FormField = {
+    name: string;
+    label: string;
+    type?: FormFieldType;
+    required?: boolean;
+    placeholder?: string;
+    options?: Array<{
+        value: string | number;
+        label: string;
+    }>;
+    /** Return an error message, or null/undefined when valid. */
+    validate?: (value: any, values: Record<string, any>) => string | null | undefined;
+    /** Span full width in the grid. */
+    full?: boolean;
+};
+type Props = {
+    fields: ReadonlyArray<FormField>;
+    initial?: Record<string, any>;
+    onSubmit?: (values: Record<string, any>) => void;
+    onChange?: (values: Record<string, any>) => void;
+    submitLabel?: string;
+    /** Columns in the responsive field grid. */
+    columns?: number;
+    disabled?: boolean;
+};
+declare const SvForm: import("svelte").Component<Props, {}, "">;
+type SvForm = ReturnType<typeof SvForm>;
+export default SvForm;

package/dist/SvGauge.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  /**
+   * SvGauge - a radial arc gauge (SVG) that renders a value within [min, max]
+   * with optional colored threshold bands, a needle, and a center label. Parity:
+   * Smart `smart-gauge` (radial). Display control; theme-driven.
+   */
+  type Band = { from: number; to: number; color: string }
+
+  type Props = {
+    value?: number
+    min?: number
+    max?: number
+    /** Sweep angle in degrees (default 270, a classic dashboard gauge). */
+    sweep?: number
+    /** Colored threshold bands along the arc. */
+    bands?: Band[]
+    /** Show the needle. */
+    needle?: boolean
+    /** Center label (defaults to the formatted value). */
+    label?: string
+    unit?: string
+    size?: number
+    thickness?: number
+    formatValue?: (v: number) => string
+    ariaLabel?: string
+  }
+
+  let {
+    value = 0,
+    min = 0,
+    max = 100,
+    sweep = 270,
+    bands = [],
+    needle = true,
+    label,
+    unit = '',
+    size = 180,
+    thickness = 14,
+    formatValue,
+    ariaLabel,
+  }: Props = $props()
+
+  const clamped = $derived(Math.min(max, Math.max(min, value)))
+  const startAngle = $derived(90 + (360 - sweep) / 2) // symmetric around the bottom
+  const cx = $derived(size / 2)
+  const cy = $derived(size / 2)
+  const r = $derived(size / 2 - thickness / 2 - 2)
+
+  function frac(v: number) { return (v - min) / (max - min) }
+  function angleOf(v: number) { return startAngle + frac(v) * sweep }
+  function polar(angleDeg: number, radius: number) {
+    const a = (angleDeg * Math.PI) / 180
+    return { x: cx + radius * Math.cos(a), y: cy + radius * Math.sin(a) }
+  }
+  function arcPath(v0: number, v1: number, radius: number): string {
+    const a0 = angleOf(v0)
+    const a1 = angleOf(v1)
+    const p0 = polar(a0, radius)
+    const p1 = polar(a1, radius)
+    const large = a1 - a0 > 180 ? 1 : 0
+    return `M ${p0.x} ${p0.y} A ${radius} ${radius} 0 ${large} 1 ${p1.x} ${p1.y}`
+  }
+
+  const needleEnd = $derived(polar(angleOf(clamped), r - thickness / 2))
+  const display = $derived(label ?? `${formatValue ? formatValue(clamped) : Math.round(clamped)}${unit}`)
+</script>
+
+<div class="sv-gauge" role="meter" aria-valuenow={clamped} aria-valuemin={min} aria-valuemax={max} aria-label={ariaLabel ?? 'Gauge'}>
+  <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} class="sv-gauge__svg">
+    <!-- track -->
+    <path d={arcPath(min, max, r)} class="sv-gauge__track" fill="none" stroke-width={thickness} stroke-linecap="round" />
+    <!-- bands (or accent fill up to value when no bands) -->
+    {#if bands.length}
+      {#each bands as band (band.from + '-' + band.to)}
+        <path d={arcPath(band.from, band.to, r)} fill="none" stroke={band.color} stroke-width={thickness} stroke-linecap="round" />
+      {/each}
+    {:else}
+      <path d={arcPath(min, clamped, r)} class="sv-gauge__value" fill="none" stroke-width={thickness} stroke-linecap="round" />
+    {/if}
+    {#if needle}
+      <line x1={cx} y1={cy} x2={needleEnd.x} y2={needleEnd.y} class="sv-gauge__needle" stroke-linecap="round" />
+      <circle cx={cx} cy={cy} r="5" class="sv-gauge__hub" />
+    {/if}
+  </svg>
+  <div class="sv-gauge__label">{display}</div>
+</div>
+
+<style>
+  .sv-gauge { position: relative; display: inline-flex; flex-direction: column; align-items: center; color: var(--sg-fg, #0f172a); }
+  .sv-gauge__svg { display: block; }
+  .sv-gauge__track { stroke: var(--sg-border, #e2e8f0); }
+  .sv-gauge__value { stroke: var(--sg-accent, #2563eb); }
+  .sv-gauge__needle { stroke: var(--sg-fg, #0f172a); stroke-width: 3; }
+  .sv-gauge__hub { fill: var(--sg-fg, #0f172a); }
+  .sv-gauge__label {
+    position: absolute; left: 0; right: 0; bottom: 22%; text-align: center;
+    font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums;
+  }
+</style>

package/dist/SvGauge.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * SvGauge - a radial arc gauge (SVG) that renders a value within [min, max]
+ * with optional colored threshold bands, a needle, and a center label. Parity:
+ * Smart `smart-gauge` (radial). Display control; theme-driven.
+ */
+type Band = {
+    from: number;
+    to: number;
+    color: string;
+};
+type Props = {
+    value?: number;
+    min?: number;
+    max?: number;
+    /** Sweep angle in degrees (default 270, a classic dashboard gauge). */
+    sweep?: number;
+    /** Colored threshold bands along the arc. */
+    bands?: Band[];
+    /** Show the needle. */
+    needle?: boolean;
+    /** Center label (defaults to the formatted value). */
+    label?: string;
+    unit?: string;
+    size?: number;
+    thickness?: number;
+    formatValue?: (v: number) => string;
+    ariaLabel?: string;
+};
+declare const SvGauge: import("svelte").Component<Props, {}, "">;
+type SvGauge = ReturnType<typeof SvGauge>;
+export default SvGauge;

package/dist/SvGrid.controller.svelte.d.ts

@@ -225,6 +225,10 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly sortDirectionByColumn: Record<string, false | "asc" | "desc">;
     readonly groupingColumns: any;
     readonly paginationState: any;
+    readonly externalPaginationEnabled: boolean;
+    readonly paginationTotalRows: number;
+    readonly paginationPageIndex: any;
+    readonly paginationPageSize: any;
     readonly getRowColumnValue: (row: Row<TData>, columnId: string) => unknown;
     readonly allRowsBeforePagination: Row<TData>[];
     readonly allRows: Row<TData>[];
@@ -327,6 +331,10 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly computeRowClass: (row: Row<TData>, rowIndex: number) => string;
     readonly computeCellClass: (row: Row<TData>, column: Column<TData>) => string;
     readonly computeCellTooltip: (row: Row<TData>, column: Column<TData>) => string | null;
+    readonly computeCellValidity: (row: Row<TData>, column: Column<TData>) => {
+        invalid: boolean;
+        message: string | null;
+    };
     readonly computeCellNote: (row: Row<TData>, column: Column<TData>) => string | null;
     readonly getCellDisplayValue: (rowId: string, columnId: string, baseValue: unknown) => any;
     readonly getColumnAlign: typeof getColumnAlign;
@@ -339,7 +347,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly computePinnedCellClass: (rowData: TData, column: Column<TData>) => string;
     readonly isRowSelected: (rowId: string) => boolean;
     readonly toggleRowSelectionById: (rowId: string) => void;
-    readonly headerSelectionState: "none" | "all" | "some";
+    readonly headerSelectionState: "all" | "none" | "some";
     readonly toggleSelectAllRows: () => void;
     userHasActivatedCell: boolean;
     readonly setActiveCell: (rowIndex: number, colIndex: number) => void;
@@ -372,6 +380,12 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
         colIndex: any;
     } | null;
     readonly isInFillPreview: (rowIndex: number, colIndex: number) => boolean;
+    readonly fillMarqueeEdges: (rowIndex: number, colIndex: number) => {
+        top: boolean;
+        bottom: boolean;
+        left: boolean;
+        right: boolean;
+    } | null;
     readonly findColumnById: (columnId: string) => any;
     readonly readCellRaw: (rowIndex: number, columnId: string) => unknown;
     readonly writeCellRaw: (rowIndex: number, columnId: string, value: unknown) => void;
@@ -408,7 +422,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
         before: unknown;
         after: unknown;
     }, direction: "undo" | "redo") => void;
-    readonly updateEditingCellValue: (value: string) => void;
+    readonly updateEditingCellValue: (value: unknown) => void;
     readonly onEditorKeyDown: (event: KeyboardEvent) => void;
     readonly focusOnMount: (node: HTMLInputElement | HTMLTextAreaElement) => void;
     readonly onHeaderSortClick: (event: MouseEvent, columnId: string) => void;

package/dist/SvGrid.controller.svelte.js

@@ -243,6 +243,10 @@ export function createSvGridController(props) {
     });
     let columnVirtualizerVersion = $state(0);
     let gridStateVersion = $state(0);
+    // Bumps only when a row-model-affecting slice changes (see the store
+    // subscription below) - the row-model derivation depends on THIS, not the
+    // catch-all gridStateVersion, so navigation doesn't rebuild 1M rows.
+    let dataStateVersion = $state(0);
     const selectionColumnWidth = 44;
     const rowNumberColumnWidth = $derived(props.rowNumberWidth ?? 56);
     const showRowNumbersEffective = $derived(props.showRowNumbers ?? false);
@@ -391,6 +395,10 @@ export function createSvGridController(props) {
     // the wrapper records filter state but does not actually filter rows.
     // svelte-ignore state_referenced_locally
     const externalFilterEnabled = props.externalFilter === true;
+    // Server-side pagination: the footer reads rowCount/pageIndex from props and
+    // emits onPaginationChange instead of slicing locally. Controlled by the
+    // consumer. Reactive (unlike sort/filter) so pageIndex/rowCount can change.
+    const externalPaginationEnabled = $derived(props.externalPagination === true);
     const passthroughSortedRowModel = ({ rows }) => rows;
     const grid = createSvGrid({
         get _features() {
@@ -434,9 +442,34 @@ export function createSvGridController(props) {
             activeCell: { rowIndex: 0, colIndex: 0, cellId: null },
         },
     });
+    // `gridStateVersion` bumps on EVERY store change (incl. moving the active
+    // cell). `dataStateVersion` bumps ONLY when a slice that actually changes the
+    // row model changes (sort / filter / pagination / grouping / expansion /
+    // selection) - so the O(rows) row-model derivation does NOT re-run on plain
+    // keyboard navigation. Without this, arrow-keying a 1,000,000-row grid re-ran
+    // the entire core->filter->sort->group pipeline on every keystroke.
+    let prevDataSlices = null;
     $effect(() => {
         const unsubscribe = grid.store.subscribe(() => {
             gridStateVersion += 1;
+            const s = grid.getState();
+            if (!prevDataSlices ||
+                prevDataSlices.sorting !== s.sorting ||
+                prevDataSlices.columnFilters !== s.columnFilters ||
+                prevDataSlices.pagination !== s.pagination ||
+                prevDataSlices.grouping !== s.grouping ||
+                prevDataSlices.expanded !== s.expanded ||
+                prevDataSlices.rowSelection !== s.rowSelection) {
+                dataStateVersion += 1;
+                prevDataSlices = {
+                    sorting: s.sorting,
+                    columnFilters: s.columnFilters,
+                    pagination: s.pagination,
+                    grouping: s.grouping,
+                    expanded: s.expanded,
+                    rowSelection: s.rowSelection,
+                };
+            }
         });
         return unsubscribe;
     });
@@ -707,7 +740,11 @@ export function createSvGridController(props) {
      * filters reduce the dataset.
      */
     const allRowsBeforePagination = $derived.by(() => {
-        gridStateVersion;
+        // Depend on dataStateVersion (row-model-affecting store changes) NOT
+        // gridStateVersion - so moving the active cell / selection does not force
+        // this O(rows) pipeline to re-run. Filter-input state (globalFilter etc.)
+        // and internalData are read below and tracked as their own dependencies.
+        dataStateVersion;
         // Touch internalData + internalColumns so the row model re-derives when
         // the consumer replaces the data array (e.g. via a "Reset" button).
         void internalData;
@@ -794,7 +831,8 @@ export function createSvGridController(props) {
      */
     const allRows = $derived.by(() => {
         const rows = allRowsBeforePagination;
-        if (!paginationEnabled)
+        // External pagination: `data` already IS the current page - never slice.
+        if (!paginationEnabled || externalPaginationEnabled)
             return rows;
         const { pageIndex, pageSize } = paginationState;
         const start = pageIndex * pageSize;
@@ -802,8 +840,9 @@ export function createSvGridController(props) {
     });
     // When a filter reduces the dataset, the stored pageIndex can point beyond
     // the last valid page. Reset to page 0 so the grid never shows a blank body.
+    // Skipped for external pagination, where the consumer owns pageIndex.
     $effect(() => {
-        if (!paginationEnabled)
+        if (!paginationEnabled || externalPaginationEnabled)
             return;
         const { pageIndex, pageSize } = paginationState;
         const pageCount = Math.ceil(allRowsBeforePagination.length / pageSize);
@@ -811,6 +850,11 @@ export function createSvGridController(props) {
             grid.setPagination({ pageIndex: 0, pageSize });
         }
     });
+    // Footer-facing pagination values. In external mode they come from the
+    // consumer-controlled props; otherwise from the local row model + state.
+    const paginationTotalRows = $derived(externalPaginationEnabled ? (props.rowCount ?? 0) : allRowsBeforePagination.length);
+    const paginationPageIndex = $derived(externalPaginationEnabled ? (props.pageIndex ?? 0) : paginationState.pageIndex);
+    const paginationPageSize = $derived(externalPaginationEnabled ? (props.pageSize ?? 10) : paginationState.pageSize);
     const rowSelectionState = $derived.by(() => {
         gridStateVersion;
         return grid.getState().rowSelection ?? {};
@@ -1179,9 +1223,14 @@ export function createSvGridController(props) {
     const SUMMARY_DEFER_CELL_LIMIT = 50000;
     let summaryByColumn = $state({});
     $effect(() => {
-        // Re-aggregate whenever the visible data, columns, edits, or any
-        // state that reorders/filters rows changes.
-        gridStateVersion;
+        // Re-aggregate whenever the data / columns / edits change. We depend on
+        // `allRows` / `allColumns` / `editedCellValues` DIRECTLY - not the
+        // catch-all `gridStateVersion` - because that version bumps on EVERY store
+        // change, including moving the active cell or selection. `allRows` stays
+        // referentially stable across those (sort/filter/paginate produce a new
+        // rows array; navigation does not), so this now skips the
+        // O(rows x cols) aggregation on plain keyboard navigation - which was
+        // making arrow-key movement crawl on huge grids (e.g. 1,000,000 rows).
         void editedCellValues;
         const rows = allRows;
         const columns = allColumns;
@@ -1776,6 +1825,10 @@ export function createSvGridController(props) {
         get sortDirectionByColumn() { return sortDirectionByColumn; },
         get groupingColumns() { return groupingColumns; },
         get paginationState() { return paginationState; },
+        get externalPaginationEnabled() { return externalPaginationEnabled; },
+        get paginationTotalRows() { return paginationTotalRows; },
+        get paginationPageIndex() { return paginationPageIndex; },
+        get paginationPageSize() { return paginationPageSize; },
         get getRowColumnValue() { return getRowColumnValue; },
         get allRowsBeforePagination() { return allRowsBeforePagination; },
         get allRows() { return allRows; },
@@ -1841,6 +1894,7 @@ export function createSvGridController(props) {
         get computeRowClass() { return computeRowClass; },
         get computeCellClass() { return computeCellClass; },
         get computeCellTooltip() { return computeCellTooltip; },
+        get computeCellValidity() { return computeCellValidity; },
         get computeCellNote() { return computeCellNote; },
         get getCellDisplayValue() { return getCellDisplayValue; },
         get getColumnAlign() { return getColumnAlign; },
@@ -1876,6 +1930,7 @@ export function createSvGridController(props) {
         get getSelectionRects() { return getSelectionRects; },
         get fillHandleCell() { return fillHandleCell; },
         get isInFillPreview() { return isInFillPreview; },
+        get fillMarqueeEdges() { return fillMarqueeEdges; },
         get findColumnById() { return findColumnById; },
         get readCellRaw() { return readCellRaw; },
         get writeCellRaw() { return writeCellRaw; },
@@ -1969,9 +2024,9 @@ export function createSvGridController(props) {
     const { onGridKeyDown, onWindowKeydown, onHeaderSortClick } = createKeyboard(ctx);
     const { computeSummaries, hasRenderedColumn } = createSummaries(ctx);
     const { updateFilterRow, updateFilterOperator, updateFilterMenuValue, updateFilterMenuValueTo, toggleCheckboxWithKeyboard, isColumnFiltered, closeMenus, openChooseColumns, openColumnMenu, openFilterMenu, openOperatorMenu, sortColumnFromMenu, clearColumnSort, groupByColumnFromMenu, clearGroupingFromMenu, isFacetChecked, toggleFacetValue, isAllFacetsChecked, toggleAllFacets, clearColumnFilter, changePage, goToPage, setPageSize, openContextMenu, closeContextMenu, contextMenuItems, saveComment, removeComment, closeCommentEditor } = createMenus(ctx);
-    const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender(ctx);
+    const { cellConditionalFormat, computeRowClass, computeCellClass, computeCellTooltip, computeCellValidity, computeCellNote, getColumnEditorOptions, formatListCellValue, formatCellValue, formatPinnedValue, computePinnedCellClass } = createCellRender(ctx);
     const { isCellEditable, isCellEditableAt, getRowColumnValue, getCellDisplayValue, startEditingWithChar, startEditing, stopEditing, startFullRowEdit, setFullRowDraft, commitFullRowEdit, cancelFullRowEdit, saveEditingCell, applyHistoryStep, updateEditingCellValue, onEditorKeyDown, focusOnMount, onCellDoubleClick, pasteFromClipboard, onGridPaste } = createEditing(ctx);
-    const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection(ctx);
+    const { isRowSelected, toggleRowSelectionById, toggleSelectAllRows, setActiveCell, scrollActiveCellIntoView, setSelection, extendSelection, isCellInSelectedRange, getCellRangeEdges, getSelectionRects, isInFillPreview, fillMarqueeEdges, findColumnById, onCellPointerDown, onCellPointerEnter, endDragSelection, onWindowPointerMove, onCellClick, emitCellDoubleClick } = createSelection(ctx);
     const { cellPinStyle, isColumnPinned, getCurrentColumnOrder, emitColumnOrder, setColumnOrderInternal, applyColumnDrop, onColumnHeaderDragStart, onColumnHeaderDragOver, onColumnHeaderDragLeave, onColumnHeaderDrop, onColumnHeaderDragEnd, pinColumnLeft, pinColumnRight, unpinColumn, toggleColumnVisibleInPanel, moveColumnInPanel, toggleGroupInPanel, getColumnBaseWidth, getColumnWidth, startColumnResize, onColumnResizeMove, endColumnResize, measureText, autosizeColumn, autosizeAllColumns, resetColumns } = createColumns(ctx);
     const { onRowDragStart, onRowDragOver, onRowDragLeave, onRowDrop, onRowsContainerDragOver, onRowsContainerDrop, onRowDragEnd } = createRowDrag(ctx);
     const { register: registerAlignedGrid, broadcastScroll: broadcastAlignedScroll, broadcastWidths: broadcastAlignedWidths } = createAlignedGrids(ctx);

package/dist/SvGrid.css

@@ -348,9 +348,13 @@
 .sv-grid-table tr > :last-child.sv-grid-cell {
   border-right: 0;
 }
-/* Row hover tint. */
-.sv-grid-table tbody tr:hover > .sv-grid-cell {
-  background: var(--sg-row-hover-bg, #eef2ff);
+/* Row hover tint - opt-in via `enableRowHover` (off by default; the class is
+   present unless the grid opts in). Uses `background-color` (not the shorthand)
+   so it never resets the fill-marquee `background-image`, and skips selected
+   cells so the selection stays visible under a hovered row. */
+.sv-grid-table:not(.sv-grid-no-row-hover)
+  tbody tr:hover > .sv-grid-cell:not([data-selected-range="true"]) {
+  background-color: var(--sg-row-hover-bg, #eef2ff);
 }
 /* Only the active cell + the cell hosting the fill handle become a
    positioning context (so the absolutely-positioned handle anchors
@@ -441,8 +445,10 @@
     ),
     var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
 }
-/* Hovered row keeps the pinned tint distinguishable from the hover. */
-.sv-grid-row:hover > .sv-grid-cell[data-pinned] {
+/* Hovered row keeps the pinned tint distinguishable from the hover. Selected
+   cells are excluded so the selection stays visible under hover. */
+.sv-grid-table:not(.sv-grid-no-row-hover)
+  .sv-grid-row:hover > .sv-grid-cell[data-pinned]:not([data-selected-range="true"]) {
   background:
     linear-gradient(
       color-mix(in srgb, var(--sg-row-hover-bg, #eef2ff) 55%, transparent),
@@ -1062,18 +1068,52 @@ select.sv-grid-fr-editor {
   transform-origin: bottom right;
 }
 
-/* Fill-preview overlay paints an accent border on the cells the user is
-   about to fill. Source cells (still in the selection range) keep their
-   normal range styling. The border + tint derive from the theme accent
-   (`--sg-accent`) so they match each theme instead of a fixed blue;
-   `--sg-fill-preview-border` / `--sg-fill-preview-bg` let a theme override
-   them directly. */
-.sv-grid-cell[data-fill-preview="true"] {
-  box-shadow: inset 0 0 0 2px
-    var(--sg-fill-preview-border,
-      color-mix(in srgb, var(--sg-accent, #0b63f3) 50%, transparent));
-  background: var(--sg-fill-preview-bg,
-    color-mix(in srgb, var(--sg-accent, #0b63f3) 8%, transparent));
+/* Excel-style fill-handle drag marquee: ONE thin dashed rectangle around the
+   whole target range (source + fill-into area), not a thick per-cell border or
+   fill tint. Drawn as four background-image layers on the boundary cells - no
+   `border`, so it paints on the compositor with zero reflow while dragging.
+   `--sg-fill-marquee` overrides the colour (defaults to a theme-aware grey). */
+/* Step 1 (LOW specificity): default every edge layer to `none`, then light up
+   the edges this cell sits on. These are custom properties, which the
+   `background:` shorthands on selected / zebra cells do NOT reset - so they can
+   safely live at low specificity and just compete with each other by source
+   order (gradient rules come after the defaults, so they win). */
+.sv-grid-cell[data-fill-top="true"],
+.sv-grid-cell[data-fill-bottom="true"],
+.sv-grid-cell[data-fill-left="true"],
+.sv-grid-cell[data-fill-right="true"] {
+  --sv-fill-top: none;
+  --sv-fill-bottom: none;
+  --sv-fill-left: none;
+  --sv-fill-right: none;
+  /* Match the selection colour (the grid accent) by default. */
+  --sv-fill-color: var(--sg-fill-marquee, var(--sg-accent, #2563eb));
+}
+.sv-grid-cell[data-fill-top="true"] {
+  --sv-fill-top: repeating-linear-gradient(to right, var(--sv-fill-color) 0 3px, transparent 3px 6px);
+}
+.sv-grid-cell[data-fill-bottom="true"] {
+  --sv-fill-bottom: repeating-linear-gradient(to right, var(--sv-fill-color) 0 3px, transparent 3px 6px);
+}
+.sv-grid-cell[data-fill-left="true"] {
+  --sv-fill-left: repeating-linear-gradient(to bottom, var(--sv-fill-color) 0 3px, transparent 3px 6px);
+}
+.sv-grid-cell[data-fill-right="true"] {
+  --sv-fill-right: repeating-linear-gradient(to bottom, var(--sv-fill-color) 0 3px, transparent 3px 6px);
+}
+/* Step 2 (HIGH specificity, `.sv-grid-table` prefix): compose the resolved edge
+   layers into `background-image` so it beats the `background:` shorthands on
+   selected / zebra / hover cells (which would otherwise reset background-image).
+   The cell keeps its background-COLOR; this only adds the dashed lines on top. */
+.sv-grid-table .sv-grid-cell[data-fill-top="true"],
+.sv-grid-table .sv-grid-cell[data-fill-bottom="true"],
+.sv-grid-table .sv-grid-cell[data-fill-left="true"],
+.sv-grid-table .sv-grid-cell[data-fill-right="true"] {
+  background-image: var(--sv-fill-top), var(--sv-fill-bottom),
+    var(--sv-fill-left), var(--sv-fill-right);
+  background-repeat: no-repeat;
+  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
+  background-position: top left, bottom left, top left, top right;
 }
 
 .sv-grid-cell-editing {
@@ -1338,6 +1378,17 @@ select.sv-grid-fr-editor {
 .sv-grid-cell-cf {
   position: relative;
 }
+/* Declarative cell validation (column `validate` hook). Invalid cells get a
+ * soft red wash and a red inset ring - Handsontable's `htInvalid` look. The
+ * value keeps rendering as-is; the message (if any) shows as the tooltip. */
+.sv-grid-cell-invalid {
+  background-color: var(--sg-invalid-bg, rgba(239, 68, 68, 0.14)) !important;
+  box-shadow: inset 0 0 0 1px var(--sg-invalid-border, rgba(239, 68, 68, 0.45));
+  color: var(--sg-invalid-fg, #b91c1c);
+}
+.sv-grid-cell-invalid.sv-grid-cell-active {
+  box-shadow: inset 0 0 0 2px var(--sg-invalid-border, rgba(239, 68, 68, 0.7));
+}
 .sv-grid-status-bar {
   display: flex;
   flex-wrap: wrap;
@@ -2103,32 +2154,34 @@ select.sv-grid-fr-editor {
   color: var(--sg-fg, #0f172a);
   font-size: 13px;
 }
+/* Top-positioned pager: rounded + bordered on the top edge instead. */
+.sv-grid-pagination-top {
+  border-top: 1px solid var(--sg-border, #e2e8f0);
+  border-bottom: 0;
+  border-radius: var(--sg-radius, 6px) var(--sg-radius, 6px) 0 0;
+}
 .sv-grid-pagination-pagesize {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--sg-muted, #64748b);
 }
-.sv-grid-pagination-pagesize select {
+.sv-grid-pagination-pagesize-dd {
+  position: relative;
   height: 28px;
-  padding: 0 22px 0 8px;
+  min-width: 62px;
   border: 1px solid var(--sg-input-border, #cbd5e1);
   border-radius: 5px;
   background: var(--sg-input-bg, #fff);
-  color: var(--sg-fg, #0f172a);
-  font: inherit;
+}
+.sv-grid-pagination-pagesize-dd .sv-grid-dropdown,
+.sv-grid-pagination-pagesize-dd .sv-grid-dropdown-trigger {
+  background: transparent;
+  border-radius: 5px;
   font-size: 13px;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
-  background-size: 4px 4px, 4px 4px;
-  background-repeat: no-repeat;
+  color: var(--sg-fg, #0f172a);
 }
-.sv-grid-pagination-pagesize select:focus {
-  outline: none;
+.sv-grid-pagination-pagesize-dd:focus-within {
   border-color: var(--sg-accent, #2563eb);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
 }

package/dist/SvGrid.helpers.d.ts

@@ -12,6 +12,10 @@ export declare function getCellKey(rowId: string, columnId: string): string;
 export declare function resolveClassList(value: string | ReadonlyArray<string> | Record<string, boolean> | undefined | null): string;
 export declare function toDateInputValue(value: unknown): string;
 export declare function toDateTimeLocalInputValue(value: unknown): string;
+/** 'HH:MM[:SS]' string (or Date) to a Date carrying that time (today's date). */
+export declare function timeStringToDate(value: unknown): Date | null;
+/** A Date to an 'HH:MM' string (the `time` editor's stored form). */
+export declare function dateToTimeString(d: Date | null): string | null;
 export declare function getEditableInputValue(editorType: CellEditorType, value: unknown): string;
 export declare function getEditorInputType(editorType: CellEditorType): "number" | "date" | "text" | "time" | "password" | "color" | "datetime-local";
 /** Resolve a stored value to an array form (for list/chips multi-select). */

package/dist/SvGrid.helpers.js

@@ -57,25 +57,52 @@ export function toDateTimeLocalInputValue(value) {
         return "";
     return parsed.toISOString().slice(0, 16);
 }
+/** Strip the `-native` opt-out suffix so the native-input helpers treat
+ *  `date-native` exactly like `date` (the rich pickers own the bare types). */
+function baseEditor(editorType) {
+    return String(editorType).replace(/-native$/, "");
+}
+/** 'HH:MM[:SS]' string (or Date) to a Date carrying that time (today's date). */
+export function timeStringToDate(value) {
+    if (value instanceof Date)
+        return value;
+    if (typeof value === "string") {
+        const m = value.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?/);
+        if (m) {
+            const d = new Date();
+            d.setHours(Math.min(23, +m[1]), Math.min(59, +m[2]), m[3] ? +m[3] : 0, 0);
+            return d;
+        }
+    }
+    return null;
+}
+/** A Date to an 'HH:MM' string (the `time` editor's stored form). */
+export function dateToTimeString(d) {
+    if (!d)
+        return null;
+    return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
 export function getEditableInputValue(editorType, value) {
-    if (editorType === "date")
+    const base = baseEditor(editorType);
+    if (base === "date")
         return toDateInputValue(value);
-    if (editorType === "datetime")
+    if (base === "datetime")
         return toDateTimeLocalInputValue(value);
     return String(value ?? "");
 }
 export function getEditorInputType(editorType) {
-    if (editorType === "number")
+    const base = baseEditor(editorType);
+    if (base === "number")
         return "number";
-    if (editorType === "date")
+    if (base === "date")
         return "date";
-    if (editorType === "datetime")
+    if (base === "datetime")
         return "datetime-local";
-    if (editorType === "time")
+    if (base === "time")
         return "time";
-    if (editorType === "password")
+    if (base === "password")
         return "password";
-    if (editorType === "color")
+    if (base === "color")
         return "color";
     return "text";
 }
@@ -111,13 +138,14 @@ export function colorfulChipStyle(color) {
         `color: color-mix(in srgb, ${color} 80%, var(--sg-fg, #0f172a));`);
 }
 export function getEditorClass(editorType) {
-    if (editorType === "number")
+    const base = baseEditor(editorType);
+    if (base === "number")
         return "sv-grid-cell-editor sv-grid-cell-editor-number";
-    if (editorType === "date")
+    if (base === "date")
         return "sv-grid-cell-editor sv-grid-cell-editor-date";
-    if (editorType === "datetime")
+    if (base === "datetime")
         return "sv-grid-cell-editor sv-grid-cell-editor-datetime";
-    if (editorType === "color")
+    if (base === "color")
         return "sv-grid-cell-editor sv-grid-cell-editor-color";
     return "sv-grid-cell-editor";
 }