@svgrid/grid 2.2.18 → 2.2.20

package/dist/themes/index.d.ts

@@ -21,6 +21,22 @@ export type ThemePalette = {
     rowAlt: string;
     rowHover: string;
     selectionBg: string;
+    /** Inset surface (master-detail region, generated auth pages). Defaults to `headerBg`. */
+    bgSubtle?: string;
+    /** Underline below the leaf header row, when it should read stronger than a cell border. */
+    headerBorder?: string;
+    /** Header label color, when it should differ from `headerFg`. */
+    headerLabel?: string;
+    /** Frozen-column body cells. Without it the grid derives a tint from `headerBg` + `accent`. */
+    pinnedBg?: string;
+    /** Frozen-column header cells. */
+    pinnedHeaderBg?: string;
+    /** The 1px line on a pinned column's inside edge. Defaults to `border`. */
+    pinnedDivider?: string;
+    /** Top/bottom border of pinned ROWS. Defaults to a translucent accent. */
+    pinnedBorder?: string;
+    /** Drop shadow cast by a pinned column into the scroll area. */
+    pinnedShadow?: string;
 };
 export type ThemePreset = {
     /** Stable id, e.g. used as a CSS file name (`themes/<id>.css`). */
@@ -31,10 +47,17 @@ export type ThemePreset = {
     radius: number;
     /** Font stack applied to the app surface. */
     font: string;
+    /** Header label typography. Mode-independent, like `radius` and `font`. */
+    headerType?: {
+        weight?: string;
+        size?: string;
+        transform?: string;
+        tracking?: string;
+    };
     light: ThemePalette;
     dark: ThemePalette;
 };
-/** The built-in theme presets, in gallery order (default first). */
+/** The built-in theme presets, in gallery order (SvGrid's own theme first). */
 export declare const themePresets: ThemePreset[];
 /** The default preset (used when nothing is chosen). */
 export declare const defaultThemePreset: ThemePreset;

package/dist/themes/index.js

@@ -8,8 +8,27 @@
  * browser. `@svgrid/enterprise`'s Studio layer builds its `ProjectTheme`-aware
  * wrapper on top of this module instead of keeping its own copy.
  */
-/** The built-in theme presets, in gallery order (default first). */
+/** 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
+    // a screenshot of the site's grids is reproducible with one stylesheet import.
+    // It is shaped like the shadcn/ui preset below - white ground, stone neutrals,
+    // 6px rounding, a medium-weight muted header row, no zebra - with SvGrid's
+    // orange standing in for shadcn's near-black primary. Stone rather than zinc
+    // because the neutral has to sit next to orange without going cold, which is
+    // the same pairing shadcn's own orange base color makes.
+    // Orange is spent only on selection, focus and the active-cell ring; nothing
+    // in the chrome is tinted. The frozen columns name a neutral explicitly
+    // instead of letting the grid derive a tint from the accent (that tint landed
+    // right on top of the selection color).
+    { id: 'ember', name: 'Ember', radius: 6, font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+        headerType: { weight: '500' },
+        light: { bg: '#ffffff', fg: '#1c1917', muted: '#78716c', border: '#e7e5e4', headerBg: '#fafaf9', headerFg: '#78716c', accent: '#ff3e00', rowAlt: '#ffffff', rowHover: '#f5f5f4', selectionBg: '#ffece3',
+            bgSubtle: '#fafaf9',
+            pinnedBg: '#fafaf9', pinnedHeaderBg: '#f5f5f4', pinnedDivider: '#e7e5e4', pinnedBorder: '#e7e5e4', pinnedShadow: 'rgba(28, 25, 23, 0.10)' },
+        dark: { bg: '#0c0a09', fg: '#fafaf9', muted: '#a8a29e', border: '#292524', headerBg: '#1c1917', headerFg: '#a8a29e', accent: '#ff5a1f', rowAlt: '#0c0a09', rowHover: '#1c1917', selectionBg: '#3a2318',
+            bgSubtle: '#1c1917',
+            pinnedBg: '#151312', pinnedHeaderBg: '#1c1917', pinnedDivider: '#292524', pinnedBorder: '#292524', pinnedShadow: 'rgba(0, 0, 0, 0.50)' } },
     { id: 'shadcn', name: 'shadcn/ui', radius: 6, font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
         light: { bg: '#ffffff', fg: '#09090b', muted: '#71717a', border: '#e4e4e7', headerBg: '#fafafa', headerFg: '#71717a', accent: '#18181b', rowAlt: '#ffffff', rowHover: '#f4f4f5', selectionBg: '#f4f4f5' },
         dark: { bg: '#0a0a0a', fg: '#fafafa', muted: '#a1a1aa', border: '#27272a', headerBg: '#18181b', headerFg: '#a1a1aa', accent: '#fafafa', rowAlt: '#0a0a0a', rowHover: '#18181b', selectionBg: '#27272a' } },
@@ -96,12 +115,28 @@ export function resolveThemeTokens(preset, mode, accentOverride) {
         '--sg-border': p.border,
         '--sg-header-bg': p.headerBg,
         '--sg-header-fg': p.headerFg,
+        ...(p.headerBorder ? { '--sg-header-border': p.headerBorder } : {}),
+        ...(p.headerLabel ? { '--sg-header-label-color': p.headerLabel } : {}),
+        ...(resolved.headerType?.weight ? { '--sg-header-weight': resolved.headerType.weight } : {}),
+        ...(resolved.headerType?.size ? { '--sg-header-size': resolved.headerType.size } : {}),
+        ...(resolved.headerType?.transform ? { '--sg-header-transform': resolved.headerType.transform } : {}),
+        ...(resolved.headerType?.tracking ? { '--sg-header-tracking': resolved.headerType.tracking } : {}),
         // A subtle inset surface (used by e.g. the master-detail region behind the
         // nested grid). Themed so it isn't a fixed light grey on dark presets.
-        '--sg-bg-subtle': p.headerBg,
+        // Presets whose header sits almost on the page ground set `bgSubtle`
+        // separately, otherwise their inset surfaces would vanish.
+        '--sg-bg-subtle': p.bgSubtle ?? p.headerBg,
         '--sg-row-alt-bg': p.rowAlt,
         '--sg-row-hover-bg': p.rowHover,
         '--sg-selection-bg': p.selectionBg,
+        // Frozen columns/rows. Left unset the grid mixes the accent into the header
+        // color, which suits presets with a cool, low-chroma accent; a preset with a
+        // saturated accent should name these instead.
+        ...(p.pinnedBg ? { '--sg-pinned-bg': p.pinnedBg } : {}),
+        ...(p.pinnedHeaderBg ? { '--sg-pinned-header-bg': p.pinnedHeaderBg } : {}),
+        ...(p.pinnedDivider ? { '--sg-pinned-divider': p.pinnedDivider } : {}),
+        ...(p.pinnedBorder ? { '--sg-pinned-border': p.pinnedBorder } : {}),
+        ...(p.pinnedShadow ? { '--sg-pinned-shadow-color': p.pinnedShadow } : {}),
         // Inputs/checkboxes: pin to the theme's own surface so they never borrow the
         // host page's input tokens (which is how a themed grid ended up with dark
         // checkboxes on a light page when the host mode differed).
@@ -117,7 +152,7 @@ export function resolveThemeTokens(preset, mode, accentOverride) {
         // grid. CSS custom properties pierce shadow DOM, so defining them here (on
         // the themed container) reaches the scrollbar. Derive them from the palette
         // so the scrollbar tracks the preset + light/dark mode like everything else.
-        '--sg-scrollbar-bg': p.headerBg,
+        '--sg-scrollbar-bg': p.bgSubtle ?? p.headerBg,
         '--sg-scrollbar-border': p.border,
         '--sg-scrollbar-thumb': p.muted,
         '--sg-scrollbar-thumb-hover': p.fg,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.2.18",
+  "version": "2.2.20",
   "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -23,7 +23,8 @@
   ],
   "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/sv-grid-scrollbar.*"
   ],
   "types": "dist/index.d.ts",
   "module": "dist/index.js",

package/src/SvGrid.css

@@ -394,8 +394,10 @@
 }
 
 /* Pinned columns read as "frozen" via three layered cues:
-     1. A distinct tint (slightly stronger than the header) so the
-        pinned strip is visible even before you scroll.
+     1. A distinct fill (slightly stronger than the header) so the
+        pinned strip is visible even before you scroll. Themes with a
+        saturated accent set --sg-pinned-bg / --sg-pinned-header-bg to a
+        neutral instead of taking the accent mix below.
      2. A solid 1px divider on the inside edge (toward the scrollable
         middle) and a soft drop shadow extending into the scroll area.
      3. A thin accent stripe on the outermost edge that turns on when
@@ -407,14 +409,14 @@
   background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
   box-shadow:
     inset -1px 0 0 var(--sg-pinned-divider, var(--sg-border, #cbd5e1)),
-    8px 0 12px -6px rgba(15, 23, 42, 0.22);
+    8px 0 12px -6px var(--sg-pinned-shadow-color, rgba(15, 23, 42, 0.22));
 }
 .sv-grid-cell[data-pinned="right"],
 .sv-grid-column[data-pinned="right"] {
   background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
   box-shadow:
     inset 1px 0 0 var(--sg-pinned-divider, var(--sg-border, #cbd5e1)),
-    -8px 0 12px -6px rgba(15, 23, 42, 0.22);
+    -8px 0 12px -6px var(--sg-pinned-shadow-color, rgba(15, 23, 42, 0.22));
 }
 /* Header row pinned cells get a slightly darker variant + bolder font
    so the frozen header itself reads as part of the grid chrome. */
@@ -586,6 +588,10 @@
   font-size: var(--sg-header-size, inherit);
   text-transform: var(--sg-header-transform, none);
   letter-spacing: var(--sg-header-tracking, normal);
+  /* Themes that keep the header close to the page ground lean on this line
+     rather than a fill to separate header from body. Scoped to the leaf header
+     row so strengthening it doesn't thicken every cell border. */
+  border-bottom-color: var(--sg-header-border, var(--sg-border, #e2e8f0));
 }
 
 /* Header drag-to-reorder. The `draggable` attribute is only set
@@ -815,7 +821,8 @@
   inset-inline-end: 0;
   width: 16px;
   background: var(--sg-header-bg, #f5f7fb);
-  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  /* Continues the leaf-header underline across the scrollbar gutter. */
+  border-bottom: 1px solid var(--sg-header-border, rgba(15, 23, 42, 0.08));
   /* Above pinned header cells (z-index 30) so the gap above the
      vertical scrollbar stays clean over a frozen column. */
   z-index: 41;
@@ -1625,6 +1632,11 @@ select.sv-grid-fr-editor {
   background: transparent;
   font: inherit;
   color: inherit;
+  /* Form controls get `text-transform: none` from the UA sheet, which the
+     `font` shorthand doesn't undo. Without this the label ignores
+     --sg-header-transform on every sortable column. */
+  text-transform: inherit;
+  letter-spacing: inherit;
   text-align: left;
   cursor: pointer;
 }

package/src/themes/index.ts

@@ -16,6 +16,25 @@ export type ThemePalette = {
   bg: string; fg: string; muted: string; border: string
   headerBg: string; headerFg: string; accent: string
   rowAlt: string; rowHover: string; selectionBg: string
+  /* Optional refinements. A preset that leaves these out keeps the derived
+     behaviour it had before they existed, so adding one to a single preset
+     never shifts the others. */
+  /** Inset surface (master-detail region, generated auth pages). Defaults to `headerBg`. */
+  bgSubtle?: string
+  /** Underline below the leaf header row, when it should read stronger than a cell border. */
+  headerBorder?: string
+  /** Header label color, when it should differ from `headerFg`. */
+  headerLabel?: string
+  /** Frozen-column body cells. Without it the grid derives a tint from `headerBg` + `accent`. */
+  pinnedBg?: string
+  /** Frozen-column header cells. */
+  pinnedHeaderBg?: string
+  /** The 1px line on a pinned column's inside edge. Defaults to `border`. */
+  pinnedDivider?: string
+  /** Top/bottom border of pinned ROWS. Defaults to a translucent accent. */
+  pinnedBorder?: string
+  /** Drop shadow cast by a pinned column into the scroll area. */
+  pinnedShadow?: string
 }
 
 export type ThemePreset = {
@@ -27,12 +46,33 @@ export type ThemePreset = {
   radius: number
   /** Font stack applied to the app surface. */
   font: string
+  /** Header label typography. Mode-independent, like `radius` and `font`. */
+  headerType?: { weight?: string; size?: string; transform?: string; tracking?: string }
   light: ThemePalette
   dark: ThemePalette
 }
 
-/** The built-in theme presets, in gallery order (default first). */
+/** The built-in theme presets, in gallery order (SvGrid's own theme first). */
 export const themePresets: ThemePreset[] = [
+  // Ember is SvGrid's signature look - the palette svgrid.com itself runs on, so
+  // a screenshot of the site's grids is reproducible with one stylesheet import.
+  // It is shaped like the shadcn/ui preset below - white ground, stone neutrals,
+  // 6px rounding, a medium-weight muted header row, no zebra - with SvGrid's
+  // orange standing in for shadcn's near-black primary. Stone rather than zinc
+  // because the neutral has to sit next to orange without going cold, which is
+  // the same pairing shadcn's own orange base color makes.
+  // Orange is spent only on selection, focus and the active-cell ring; nothing
+  // in the chrome is tinted. The frozen columns name a neutral explicitly
+  // instead of letting the grid derive a tint from the accent (that tint landed
+  // right on top of the selection color).
+  { id: 'ember', name: 'Ember', radius: 6, font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    headerType: { weight: '500' },
+    light: { bg: '#ffffff', fg: '#1c1917', muted: '#78716c', border: '#e7e5e4', headerBg: '#fafaf9', headerFg: '#78716c', accent: '#ff3e00', rowAlt: '#ffffff', rowHover: '#f5f5f4', selectionBg: '#ffece3',
+      bgSubtle: '#fafaf9',
+      pinnedBg: '#fafaf9', pinnedHeaderBg: '#f5f5f4', pinnedDivider: '#e7e5e4', pinnedBorder: '#e7e5e4', pinnedShadow: 'rgba(28, 25, 23, 0.10)' },
+    dark: { bg: '#0c0a09', fg: '#fafaf9', muted: '#a8a29e', border: '#292524', headerBg: '#1c1917', headerFg: '#a8a29e', accent: '#ff5a1f', rowAlt: '#0c0a09', rowHover: '#1c1917', selectionBg: '#3a2318',
+      bgSubtle: '#1c1917',
+      pinnedBg: '#151312', pinnedHeaderBg: '#1c1917', pinnedDivider: '#292524', pinnedBorder: '#292524', pinnedShadow: 'rgba(0, 0, 0, 0.50)' } },
   { id: 'shadcn', name: 'shadcn/ui', radius: 6, font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
     light: { bg: '#ffffff', fg: '#09090b', muted: '#71717a', border: '#e4e4e7', headerBg: '#fafafa', headerFg: '#71717a', accent: '#18181b', rowAlt: '#ffffff', rowHover: '#f4f4f5', selectionBg: '#f4f4f5' },
     dark: { bg: '#0a0a0a', fg: '#fafafa', muted: '#a1a1aa', border: '#27272a', headerBg: '#18181b', headerFg: '#a1a1aa', accent: '#fafafa', rowAlt: '#0a0a0a', rowHover: '#18181b', selectionBg: '#27272a' } },
@@ -123,12 +163,28 @@ export function resolveThemeTokens(preset: ThemePreset | undefined, mode: ThemeM
     '--sg-border': p.border,
     '--sg-header-bg': p.headerBg,
     '--sg-header-fg': p.headerFg,
+    ...(p.headerBorder ? { '--sg-header-border': p.headerBorder } : {}),
+    ...(p.headerLabel ? { '--sg-header-label-color': p.headerLabel } : {}),
+    ...(resolved.headerType?.weight ? { '--sg-header-weight': resolved.headerType.weight } : {}),
+    ...(resolved.headerType?.size ? { '--sg-header-size': resolved.headerType.size } : {}),
+    ...(resolved.headerType?.transform ? { '--sg-header-transform': resolved.headerType.transform } : {}),
+    ...(resolved.headerType?.tracking ? { '--sg-header-tracking': resolved.headerType.tracking } : {}),
     // A subtle inset surface (used by e.g. the master-detail region behind the
     // nested grid). Themed so it isn't a fixed light grey on dark presets.
-    '--sg-bg-subtle': p.headerBg,
+    // Presets whose header sits almost on the page ground set `bgSubtle`
+    // separately, otherwise their inset surfaces would vanish.
+    '--sg-bg-subtle': p.bgSubtle ?? p.headerBg,
     '--sg-row-alt-bg': p.rowAlt,
     '--sg-row-hover-bg': p.rowHover,
     '--sg-selection-bg': p.selectionBg,
+    // Frozen columns/rows. Left unset the grid mixes the accent into the header
+    // color, which suits presets with a cool, low-chroma accent; a preset with a
+    // saturated accent should name these instead.
+    ...(p.pinnedBg ? { '--sg-pinned-bg': p.pinnedBg } : {}),
+    ...(p.pinnedHeaderBg ? { '--sg-pinned-header-bg': p.pinnedHeaderBg } : {}),
+    ...(p.pinnedDivider ? { '--sg-pinned-divider': p.pinnedDivider } : {}),
+    ...(p.pinnedBorder ? { '--sg-pinned-border': p.pinnedBorder } : {}),
+    ...(p.pinnedShadow ? { '--sg-pinned-shadow-color': p.pinnedShadow } : {}),
     // Inputs/checkboxes: pin to the theme's own surface so they never borrow the
     // host page's input tokens (which is how a themed grid ended up with dark
     // checkboxes on a light page when the host mode differed).
@@ -144,7 +200,7 @@ export function resolveThemeTokens(preset: ThemePreset | undefined, mode: ThemeM
     // grid. CSS custom properties pierce shadow DOM, so defining them here (on
     // the themed container) reaches the scrollbar. Derive them from the palette
     // so the scrollbar tracks the preset + light/dark mode like everything else.
-    '--sg-scrollbar-bg': p.headerBg,
+    '--sg-scrollbar-bg': p.bgSubtle ?? p.headerBg,
     '--sg-scrollbar-border': p.border,
     '--sg-scrollbar-thumb': p.muted,
     '--sg-scrollbar-thumb-hover': p.fg,

package/themes/ember.css

@@ -0,0 +1,71 @@
+/* Ember - generated from packages/grid/src/themes/index.ts. Do not edit by hand. */
+:root {
+  --sg-bg: #ffffff;
+  --sg-fg: #1c1917;
+  --sg-muted: #78716c;
+  --sg-border: #e7e5e4;
+  --sg-header-bg: #fafaf9;
+  --sg-header-fg: #78716c;
+  --sg-header-weight: 500;
+  --sg-bg-subtle: #fafaf9;
+  --sg-row-alt-bg: #ffffff;
+  --sg-row-hover-bg: #f5f5f4;
+  --sg-selection-bg: #ffece3;
+  --sg-pinned-bg: #fafaf9;
+  --sg-pinned-header-bg: #f5f5f4;
+  --sg-pinned-divider: #e7e5e4;
+  --sg-pinned-border: #e7e5e4;
+  --sg-pinned-shadow-color: rgba(28, 25, 23, 0.10);
+  --sg-input-bg: #ffffff;
+  --sg-input-border: #e7e5e4;
+  --sg-accent: #ff3e00;
+  --sg-on-accent: #ffffff;
+  --sg-radius: 6px;
+  --sg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --sg-scrollbar-bg: #fafaf9;
+  --sg-scrollbar-border: #e7e5e4;
+  --sg-scrollbar-thumb: #78716c;
+  --sg-scrollbar-thumb-hover: #1c1917;
+  --sg-scrollbar-thumb-active: #1c1917;
+  --sg-scrollbar-arrow: #78716c;
+  --sg-scrollbar-arrow-hover: #1c1917;
+  --sg-scrollbar-arrow-hover-bg: #f5f5f4;
+  --sg-scrollbar-arrow-active: #1c1917;
+  --sg-scrollbar-arrow-active-bg: #ffece3;
+  --sg-scrollbar-arrow-disabled: #e7e5e4;
+}
+:root[data-theme='dark'] {
+  --sg-bg: #0c0a09;
+  --sg-fg: #fafaf9;
+  --sg-muted: #a8a29e;
+  --sg-border: #292524;
+  --sg-header-bg: #1c1917;
+  --sg-header-fg: #a8a29e;
+  --sg-header-weight: 500;
+  --sg-bg-subtle: #1c1917;
+  --sg-row-alt-bg: #0c0a09;
+  --sg-row-hover-bg: #1c1917;
+  --sg-selection-bg: #3a2318;
+  --sg-pinned-bg: #151312;
+  --sg-pinned-header-bg: #1c1917;
+  --sg-pinned-divider: #292524;
+  --sg-pinned-border: #292524;
+  --sg-pinned-shadow-color: rgba(0, 0, 0, 0.50);
+  --sg-input-bg: #0c0a09;
+  --sg-input-border: #292524;
+  --sg-accent: #ff5a1f;
+  --sg-on-accent: #ffffff;
+  --sg-radius: 6px;
+  --sg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --sg-scrollbar-bg: #1c1917;
+  --sg-scrollbar-border: #292524;
+  --sg-scrollbar-thumb: #a8a29e;
+  --sg-scrollbar-thumb-hover: #fafaf9;
+  --sg-scrollbar-thumb-active: #fafaf9;
+  --sg-scrollbar-arrow: #a8a29e;
+  --sg-scrollbar-arrow-hover: #fafaf9;
+  --sg-scrollbar-arrow-hover-bg: #1c1917;
+  --sg-scrollbar-arrow-active: #fafaf9;
+  --sg-scrollbar-arrow-active-bg: #3a2318;
+  --sg-scrollbar-arrow-disabled: #292524;
+}