@svgrid/grid 2.2.31 → 2.2.33

package/dist/themes/index.js

@@ -8,6 +8,12 @@
  * browser. `@svgrid/enterprise`'s Studio layer builds its `ProjectTheme`-aware
  * wrapper on top of this module instead of keeping its own copy.
  */
+/** Status-color defaults per mode - dark mode lifts them so they stay legible
+ *  on a dark ground. Values match the components' own inline fallbacks. */
+const STATUS_DEFAULTS = {
+    light: { danger: '#dc2626', success: '#16a34a', warning: '#d97706', info: '#0891b2' },
+    dark: { danger: '#f87171', success: '#4ade80', warning: '#fbbf24', info: '#22d3ee' },
+};
 /** The built-in theme presets, in gallery order (SvGrid's own theme first). */
 export const themePresets = [
     // Ember is SvGrid's signature look - the palette svgrid.com itself runs on, so
@@ -108,6 +114,7 @@ export function resolveThemeTokens(preset, mode, accentOverride) {
     const resolved = preset ?? defaultThemePreset;
     const p = resolved[mode];
     const accent = accentOverride || p.accent;
+    const status = STATUS_DEFAULTS[mode];
     return {
         '--sg-bg': p.bg,
         '--sg-fg': p.fg,
@@ -146,6 +153,25 @@ export function resolveThemeTokens(preset, mode, accentOverride) {
         '--sg-on-accent': onAccent(accent),
         '--sg-radius': `${resolved.radius}px`,
         '--sg-font': resolved.font,
+        // Semantic status colors. Same reasoning as the scrollbar tokens below:
+        // the UI kit consumes these (destructive buttons, alerts, validation,
+        // badges, the rating star), so a preset that doesn't define them leaves
+        // every status color at a hard-coded red/green/amber that ignores the
+        // theme and, on dark presets, sits at the wrong lightness.
+        '--sg-danger': p.danger ?? status.danger,
+        '--sg-success': p.success ?? status.success,
+        '--sg-warning': p.warning ?? status.warning,
+        '--sg-info': p.info ?? status.info,
+        // A COLOR, not a shadow - consumed as `outline: 2px solid var(...)`.
+        '--sg-focus-ring': p.focusRing ?? accent,
+        // Derived surfaces + shape the kit reads. Deriving from the palette keeps
+        // them following the preset and the light/dark mode.
+        '--sg-muted-bg': p.rowHover,
+        '--sg-skeleton-bg': p.rowHover,
+        '--sg-radius-lg': `${resolved.radius * 2}px`,
+        '--sg-rating-on': p.warning ?? status.warning,
+        '--sg-rating-empty': p.border,
+        '--sg-invalid-fg': p.danger ?? status.danger,
         // The grid's custom scrollbar is a shadow-DOM web component that reads its
         // OWN --sg-scrollbar-* tokens (with fixed light-mode fallbacks). Without
         // these it ignores the theme entirely - a light scrollbar left on a dark

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.2.31",
+  "version": "2.2.33",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -104,7 +104,8 @@
     "test:types": "svelte-check --tsconfig ./tsconfig.json",
     "test:lib": "vitest run --coverage",
     "test:build": "publint --strict",
-    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs"
+    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
+    "lint": "eslint ./src"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",

package/src/DockNodeView.svelte

@@ -42,7 +42,7 @@
 
     const onMove = (ev: PointerEvent) => {
       const delta = ((vertical ? ev.clientY : ev.clientX) - startPos) / total
-      let fa = Math.min(Math.max(startSizes[a]! + delta, minA), pairTotal - minB)
+      const fa = Math.min(Math.max(startSizes[a]! + delta, minA), pairTotal - minB)
       const next = startSizes.slice()
       next[a] = fa
       next[b] = pairTotal - fa

package/src/GridFooter.svelte

@@ -1,50 +1,13 @@
 <script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
   import {
-      getGridCellA11yProps,
-      getGridCellDomId,
-      getGridHeaderA11yProps,
-      getGridRootA11yProps,
-      getGridRowA11yProps,
-      type EditorContext,
-      type CellEditorOption,
-      type Column,
-      type Row,
       type RowData,
       type TableFeatures,
     } from "./index";
   import "./sv-grid-scrollbar";
-  import type { Snippet } from "svelte";
-  import {
-      RenderSnippetConfig,
-      RenderComponentConfig,
-    } from "./render-component";
-  import {
-      buildSparkline,
-      toSparklineValues,
-    } from "./sparkline";
   import SvGridDropdown from "./SvGridDropdown.svelte";
-  import type {
-      Props,
-      SelectionPoint,
-      SelectionRange,
-      CellEditState,
-      FilterOperator,
-      FilterOption,
-      MenuPosition,
-    } from "./SvGrid.types";
   import {
-      cfTextStyle,
       fmtStat,
-      getEditableInputValue,
-      getEditorInputType,
-      toValueArray,
-      getOptionLabel,
-      getOptionColor,
-      colorfulChipStyle,
-      getEditorClass,
     } from "./SvGrid.helpers";
-  import {
-    } from "./SvGrid.controller.svelte";
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
   let {
@@ -68,9 +31,6 @@
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
   const paginationEnabled = $derived(ctrl.paginationEnabled);
-  const grid = $derived(ctrl.grid);
-  const paginationState = $derived(ctrl.paginationState);
-  const allRowsBeforePagination = $derived(ctrl.allRowsBeforePagination);
   const statusBarEnabled = $derived(ctrl.statusBarEnabled);
   const statusBarAggregates = $derived(ctrl.statusBarAggregates);
   const statusBarStats = $derived(ctrl.statusBarStats);

package/src/GridMenus.svelte

@@ -1,97 +1,21 @@
 <script lang="ts" generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData">
   import {
-    applyExcelFilter,
-    normalizeForFilter,
     splitInTokens,
     trailingInToken,
-    createColumnVirtualizer,
-    createCoreRowModel,
-    createExpandedRowModel,
-    createFilteredRowModel,
-    createGroupedRowModel,
-    createPaginatedRowModel,
-    createSvelteVirtualizer,
-    createSortedRowModel,
-    createSvGrid,
-    filterFns,
-    getGridCellA11yProps,
-    getGridCellDomId,
-    getGridHeaderA11yProps,
-    getGridRootA11yProps,
-    getGridRowA11yProps,
-    parseEditorValue,
-    normalizeEditorOptions,
-    sortFns,
-    tableFeatures,
-    rowSortingFeature,
-    columnFilteringFeature,
-    columnGroupingFeature,
-    type CellContext,
-    type EditorContext,
-    type CellEditorOption,
     type CellEditorType,
-    type CellFormatter,
-    type CellFormatConfig,
     type Column,
-    type ColumnDef,
-    type Row,
     type RowData,
-    type SvGridApi,
     type TableFeatures,
   } from "./index";
   import "./sv-grid-scrollbar";
   import { onScrollOutside } from "./a11y/dismissable";
   import type { Snippet } from "svelte";
-  import { getKeyboardIntent, getNextActiveCell } from "./keyboard";
-  import {
-    formatNumericWithConfig,
-    getDateFormatter,
-    resolveDatePattern,
-  } from "./cell-formatting";
-  import {
-    RenderSnippetConfig,
-    RenderComponentConfig,
-  } from "./render-component";
-  import { buildFillPattern } from "./fill-patterns";
-  import { buildSparkline, toSparklineValues } from "./sparkline";
-  import {
-    resolveCellFormat,
-    computeColumnStat,
-    formatsNeedingStats,
-    type ColumnStat,
-    type ResolvedCellFormat,
-  } from "./conditional-formatting";
-  import SvGridDropdown from "./SvGridDropdown.svelte";
   import SvListBox from "./SvListBox.svelte";
   import type {
-    Props,
-    SelectionPoint,
-    SelectionRange,
-    CellEditState,
     FilterOperator,
-    FilterOption,
-    MenuPosition,
   } from "./SvGrid.types";
   import {
-    cfTextStyle,
-    fmtStat,
-    getCellKey,
-    resolveClassList,
-    toDateInputValue,
-    toDateTimeLocalInputValue,
-    getEditableInputValue,
     getEditorInputType,
-    toValueArray,
-    getOptionLabel,
-    getOptionColor,
-    colorfulChipStyle,
-    getEditorClass,
-    asDate,
-    clampMenuX,
-    cssEscape,
-    rawToNumber,
-    formatFacetNumber,
-    formatFacetDate,
   } from "./SvGrid.helpers";
 
   import type { SvGridController } from "./SvGrid.controller.svelte";
@@ -103,7 +27,6 @@
   const groupingControlsEnabled = $derived(ctrl.groupingControlsEnabled);
   const filterMenuValues = $derived(ctrl.filterMenuValues);
   const tooltip = $derived(ctrl.tooltip);
-  const showTooltipFor = $derived(ctrl.showTooltipFor);
   const columnMenuFor = $derived(ctrl.columnMenuFor);
   const columnMenuPos = $derived(ctrl.columnMenuPos);
   const filterMenuFor = $derived(ctrl.filterMenuFor);

package/src/SvAccordion.test.ts

@@ -32,11 +32,11 @@ describe('SvAccordion', () => {
     try {
       const headers = [...target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')]
       expect(headers).toHaveLength(3)
-      expect(headers[0].getAttribute('aria-expanded')).toBe('true')
-      expect(headers[1].getAttribute('aria-expanded')).toBe('false')
+      expect(headers[0]!.getAttribute('aria-expanded')).toBe('true')
+      expect(headers[1]!.getAttribute('aria-expanded')).toBe('false')
       const region = target.querySelector<HTMLElement>('.sv-acc__panel')!
       expect(region.getAttribute('role')).toBe('region')
-      expect(region.getAttribute('aria-labelledby')).toBe(headers[0].id)
+      expect(region.getAttribute('aria-labelledby')).toBe(headers[0]!.id)
       // Only one panel region is rendered (the open one).
       expect(target.querySelectorAll('.sv-acc__panel')).toHaveLength(1)
     } finally { destroy() }
@@ -47,7 +47,7 @@ describe('SvAccordion', () => {
     const { target, destroy } = mountAcc({ items, expanded: ['a'], expandMode: 'single', onChange: (ids: string[]) => (got = ids) })
     try {
       const headers = target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')
-      headers[1].click()
+      headers[1]!.click()
       flushSync()
       expect(got).toEqual(['b'])
     } finally { destroy() }
@@ -58,7 +58,7 @@ describe('SvAccordion', () => {
     const { target, destroy } = mountAcc({ items, expanded: ['a'], expandMode: 'multiple', onChange: (ids: string[]) => (got = ids) })
     try {
       const headers = target.querySelectorAll<HTMLButtonElement>('.sv-acc__header')
-      headers[2].click()
+      headers[2]!.click()
       flushSync()
       expect(got).toEqual(['a', 'c'])
     } finally { destroy() }

package/src/SvAvatar.svelte

@@ -71,5 +71,5 @@
   .sv-avatar__status.is-online { background: var(--sg-success, #16a34a); }
   .sv-avatar__status.is-offline { background: var(--sg-muted, #94a3b8); }
   .sv-avatar__status.is-busy { background: var(--sg-danger, #dc2626); }
-  .sv-avatar__status.is-away { background: var(--sg-warning, #f59e0b); }
+  .sv-avatar__status.is-away { background: var(--sg-warning, #d97706); }
 </style>

package/src/SvButtonGroup.test.ts

@@ -28,10 +28,10 @@ describe('SvButtonGroup', () => {
       expect(group.getAttribute('role')).toBe('radiogroup')
       const btns = [...target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')]
       expect(btns.map((b) => b.getAttribute('role'))).toEqual(['radio', 'radio', 'radio'])
-      expect(btns[1].getAttribute('aria-checked')).toBe('true')
+      expect(btns[1]!.getAttribute('aria-checked')).toBe('true')
       // Roving tabindex: only the checked/active button is tabbable.
-      expect(btns[1].tabIndex).toBe(0)
-      expect(btns[0].tabIndex).toBe(-1)
+      expect(btns[1]!.tabIndex).toBe(0)
+      expect(btns[0]!.tabIndex).toBe(-1)
     } finally { destroy() }
   })
 
@@ -40,7 +40,7 @@ describe('SvButtonGroup', () => {
     const { target, destroy } = mountBg({ items, value: 'day', mode: 'single', onChange: (v: unknown) => (got = v) })
     try {
       const btns = target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')
-      btns[2].click()
+      btns[2]!.click()
       flushSync()
       expect(got).toBe('month')
     } finally { destroy() }
@@ -53,8 +53,8 @@ describe('SvButtonGroup', () => {
       const group = target.querySelector<HTMLElement>('.sv-bg')!
       expect(group.getAttribute('role')).toBe('group')
       const btns = target.querySelectorAll<HTMLButtonElement>('.sv-bg__btn')
-      expect(btns[0].getAttribute('aria-pressed')).toBe('true')
-      btns[1].click()
+      expect(btns[0]!.getAttribute('aria-pressed')).toBe('true')
+      btns[1]!.click()
       flushSync()
       expect(got).toEqual(['day', 'week'])
     } finally { destroy() }

package/src/SvCalendar.test.ts

@@ -86,7 +86,7 @@ describe('SvCalendar selection', () => {
 
   it('range mode: two clicks emit the inclusive span', () => {
     let got: Date[] = []
-    const { target, destroy } = mountCal({
+    const { destroy } = mountCal({
       value: null,
       selectionMode: 'range',
       displayMode: 'month',

package/src/SvCheckBox.svelte

@@ -56,8 +56,9 @@
 
 <SvField id={uid} {hint} {error} {required} {dir}>
   <label class="sv-check sv-check--{size}" class:is-disabled={disabled} class:is-readonly={readonly} class:is-invalid={invalid}>
+    <!-- role="checkbox" arrives via boxProps(), which the a11y pass cannot see through -->
+    <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
     <button
-      role="checkbox"
       class="sv-check__box"
       class:is-checked={checked && !indeterminate}
       class:is-indeterminate={indeterminate}

package/src/SvCircularProgress.svelte

@@ -89,7 +89,7 @@
     position: relative; display: inline-flex; flex: none;
   }
   .sv-circ--success { --_c: var(--sg-success, #16a34a); }
-  .sv-circ--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-circ--warning { --_c: var(--sg-warning, #d97706); }
   .sv-circ--danger { --_c: var(--sg-danger, #dc2626); }
   .sv-circ__svg { display: block; transform: rotate(-90deg); }
   .sv-circ__track { stroke: var(--sg-border, #e2e8f0); }

package/src/SvDateRangeInput.svelte

@@ -20,7 +20,7 @@
   import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
   import { editorAria, nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { formatDate } from './datetime/date-format'
-  import { toDate, startOfDay, type DateLike } from './datetime/date-core'
+  import { startOfDay, type DateLike } from './datetime/date-core'
   import { rangeDays } from './datetime/date-selection'
   import type { CalendarPreset } from './createCalendar.svelte'
 

package/src/SvFileUpload.test.ts

@@ -53,7 +53,7 @@ describe('SvFileUpload', () => {
       target.querySelector<HTMLButtonElement>('.sv-file__remove')!.click()
       flushSync()
       expect(got).toHaveLength(1)
-      expect(got![0].name).toBe('b.png')
+      expect(got![0]!.name).toBe('b.png')
     } finally { destroy() }
   })
 })