@svgrid/grid 3.0.1 → 3.0.2

package/dist/GridFooter.svelte

@@ -7,16 +7,25 @@
   import {
       fmtStat,
     } from "./SvGrid.helpers";
+  import type { Snippet } from "svelte";
+  import type { GridIconName } from "./grid-icons";
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
   let {
     ctrl,
+    icon,
     pager = true,
     showStatus = true,
     top = false,
     pageSizeOptions,
   }: {
     ctrl: SvGridController<TFeatures, TData>;
+    /**
+     * The grid's icon resolver, so the pager arrows honour the `icons` prop.
+     * Required rather than optional: SvGrid is the only thing that mounts this
+     * component, so a missing icon would be a bug, not a supported call.
+     */
+    icon: Snippet<[GridIconName]>;
     /** Render the pagination controls in this instance. */
     pager?: boolean;
     /** Render the status bar in this instance. */
@@ -132,7 +141,7 @@
                   onclick={openPageSize}
                 >
                   <span class="sv-grid-dropdown-label">{pageSize}</span>
-                  <span class="sv-grid-dropdown-caret" aria-hidden="true">▾</span>
+                  <span class="sv-grid-dropdown-caret" aria-hidden="true">{@render icon("page-size-caret")}</span>
                 </button>
               </div>
             {/if}
@@ -149,14 +158,14 @@
             class="sv-grid-pagination-btn"
             disabled={onFirst}
             onclick={() => goToPage(0)}
-            aria-label={messages.firstPage}>⇤</button
+            aria-label={messages.firstPage}>{@render icon("page-first")}</button
           >
           <button
             type="button"
             class="sv-grid-pagination-btn"
             disabled={onFirst}
             onclick={() => changePage(-1)}
-            aria-label={messages.prevPage}>‹</button
+            aria-label={messages.prevPage}>{@render icon("page-prev")}</button
           >
           <span class="sv-grid-pagination-label">
             {messages.page} <strong>{currentPage.toLocaleString()}</strong> {messages.of}
@@ -167,14 +176,14 @@
             class="sv-grid-pagination-btn"
             disabled={onLast}
             onclick={() => changePage(1)}
-            aria-label={messages.nextPage}>›</button
+            aria-label={messages.nextPage}>{@render icon("page-next")}</button
           >
           <button
             type="button"
             class="sv-grid-pagination-btn"
             disabled={onLast}
             onclick={() => goToPage(pageCount - 1)}
-            aria-label={messages.lastPage}>⇥</button
+            aria-label={messages.lastPage}>{@render icon("page-last")}</button
           >
         </div>
       </div>

package/dist/GridFooter.svelte.d.ts

@@ -1,9 +1,17 @@
 import { type RowData, type TableFeatures } from "./index.js";
 import "./sv-grid-scrollbar.js";
+import type { Snippet } from "svelte";
+import type { GridIconName } from "./grid-icons.js";
 import type { SvGridController } from "./SvGrid.controller.svelte.js";
 declare function $$render<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(): {
     props: {
         ctrl: SvGridController<TFeatures, TData>;
+        /**
+         * The grid's icon resolver, so the pager arrows honour the `icons` prop.
+         * Required rather than optional: SvGrid is the only thing that mounts this
+         * component, so a missing icon would be a bug, not a supported call.
+         */
+        icon: Snippet<[GridIconName]>;
         /** Render the pagination controls in this instance. */
         pager?: boolean;
         /** Render the status bar in this instance. */

package/dist/GridMenus.svelte

@@ -10,6 +10,7 @@
   import "./sv-grid-scrollbar";
   import { onScrollOutside } from "./a11y/dismissable";
   import type { Snippet } from "svelte";
+  import type { GridIconName } from "./grid-icons";
   import SvListBox from "./SvListBox.svelte";
   import type {
     FilterOperator,
@@ -23,7 +24,7 @@
 
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
-  let { ctrl, icon }: { ctrl: SvGridController<TFeatures, TData>; icon: Snippet<[string]> } = $props();
+  let { ctrl, icon }: { ctrl: SvGridController<TFeatures, TData>; icon: Snippet<[GridIconName]> } = $props();
 
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
@@ -403,7 +404,7 @@
               onclick={() => patchFilter(colId, { join: "OR" })}>OR</button>
             <button type="button" class="sv-grid-menu-join-x" title="Remove second condition"
               aria-label="Remove second condition"
-              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>×</button>
+              onclick={() => patchFilter(colId, { operator2: undefined, value2: undefined, valueTo2: undefined, join: undefined })}>{@render icon("remove")}</button>
           </div>
           <select
             class="sv-grid-menu-operator-select"
@@ -452,11 +453,18 @@
           <span class="sv-grid-menu-head-note">{pickedCount} of {totalCount}</span>
         {/if}
       </div>
-      <input
-        class="sv-grid-menu-search"
-        placeholder="Search values..."
-        bind:value={ctrl.columnMenuSearch}
-      />
+      <!-- The magnifier used to be a background-image data URI in SvGrid.css
+           with a hard-coded stroke colour, so it ignored every theme and could
+           not be overridden. It is markup now, and the input keeps its own
+           class: focusFilterPanel() and a test both resolve `.sv-grid-menu-search`. -->
+      <span class="sv-grid-menu-search-wrap">
+        {@render icon("search")}
+        <input
+          class="sv-grid-menu-search"
+          placeholder="Search values..."
+          bind:value={ctrl.columnMenuSearch}
+        />
+      </span>
       <label class="sv-grid-facet sv-grid-facet-all">
         <input type="checkbox" checked={isAllFacetsChecked(colId)} onchange={() => toggleAllFacets(colId)} />
         <!-- Says what it will actually do: with a query typed it acts on the
@@ -593,7 +601,7 @@
           onclick={() => pinColumnLeft(menuColumnId)}
         >
           <span class="sv-grid-header-icon"
-            >{@render icon("op-startsWith")}</span
+            >{@render icon("pin-left")}</span
           > Pin to left
         </button>
         <button
@@ -604,7 +612,7 @@
           onclick={() => pinColumnRight(menuColumnId)}
         >
           <span class="sv-grid-header-icon"
-            >{@render icon("op-greaterThan")}</span
+            >{@render icon("pin-right")}</span
           > Pin to right
         </button>
         <button
@@ -614,7 +622,7 @@
           disabled={!menuPinSide}
           onclick={() => unpinColumn(menuColumnId)}
         >
-          <span class="sv-grid-header-icon">{@render icon("x")}</span> Unpin column
+          <span class="sv-grid-header-icon">{@render icon("unpin")}</span> Unpin column
         </button>
       {/if}
       <div class="sv-grid-menu-sep"></div>

package/dist/GridMenus.svelte.d.ts

@@ -1,11 +1,12 @@
 import { type RowData, type TableFeatures } from "./index.js";
 import "./sv-grid-scrollbar.js";
 import type { Snippet } from "svelte";
+import type { GridIconName } from "./grid-icons.js";
 import type { SvGridController } from "./SvGrid.controller.svelte.js";
 declare function $$render<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(): {
     props: {
         ctrl: SvGridController<TFeatures, TData>;
-        icon: Snippet<[string]>;
+        icon: Snippet<[GridIconName]>;
     };
     exports: {};
     bindings: "";

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

@@ -371,6 +371,11 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
             field: string;
             label: string;
         }[];
+        dates: {
+            id: string;
+            field: string;
+            label: string;
+        }[];
     };
     readonly chartSpec: ChartSpec | null;
     applyChartCrossFilter: (category: string) => void;
@@ -389,6 +394,11 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
         dimension: string | null;
         series: string | null;
         measure: string | null;
+        measure2: string | null;
+        orientation: "horizontal" | "vertical" | null;
+        stacked100: boolean | null;
+        donut: boolean | null;
+        palette: string[] | null;
         reduce: "sum" | "avg" | "count";
         stacked: boolean | null;
         dataLabels: boolean | null;
@@ -397,6 +407,13 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
         valueFormat: ChartValueFormat | null;
     }[];
     applyChartsState(list: ReadonlyArray<Record<string, unknown>>, active?: number): void;
+    readonly chartCrossFilterable: boolean;
+    chartOrientation: "horizontal" | "vertical";
+    chartStacked100: boolean;
+    chartDonut: boolean;
+    chartPalette: string[] | null;
+    chartMeasure2Id: string | null;
+    readonly effectiveChartMeasure2Id: string | null;
     chartAiHandler: ((prompt: string) => Promise<Record<string, unknown> | null>) | null;
     applyChartConfig(config: {
         open?: boolean;

package/dist/SvGrid.controller.svelte.js

@@ -1661,6 +1661,11 @@ export function createSvGridController(rawProps, domIdBase) {
         dimensionId: null,
         measureId: null,
         seriesId: undefined,
+        measure2Id: null,
+        orientation: null,
+        stacked100: null,
+        donut: null,
+        palette: null,
         stacked: null,
         dataLabels: null,
         logScale: null,
@@ -1703,6 +1708,11 @@ export function createSvGridController(rawProps, domIdBase) {
     const chartableColumns = $derived.by(function chartableColumns_d() {
         const dims = [];
         const measures = [];
+        // Dates are a subset of dims, tracked separately so the panel can tell
+        // whether a calendar chart is possible at all before the user picks
+        // anything. Offering a type that can only render blank is worse than not
+        // offering it.
+        const dates = [];
         for (const col of allColumns) {
             const field = col.columnDef.field;
             if (!field)
@@ -1710,10 +1720,13 @@ export function createSvGridController(rawProps, domIdBase) {
             const entry = { id: col.id, field, label: columnLabel(col) };
             if (isNumericColumn(col))
                 measures.push(entry);
-            else
+            else {
                 dims.push(entry);
+                if (columnIsDate(col))
+                    dates.push(entry);
+            }
         }
-        return { dims, measures };
+        return { dims, measures, dates };
     });
     const chartColumnDefaults = $derived.by(function chartColumnDefaults_d() {
         const { dims, measures } = chartableColumns;
@@ -1759,6 +1772,15 @@ export function createSvGridController(rawProps, domIdBase) {
             return configured;
         return chartColumnDefaults.measureIds;
     });
+    /** Scatter's Y measure. Defaults to the second numeric column, so picking
+     *  scatter plots something immediately rather than nothing. */
+    const effectiveChartMeasure2Id = $derived(activeChart.measure2Id ??
+        chartableColumns.measures.find((m) => m.id !== effectiveChartMeasureId)?.id ??
+        null);
+    const effectiveChartOrientation = $derived(activeChart.orientation ?? chartCfg?.orientation ?? "vertical");
+    const effectiveChartStacked100 = $derived(activeChart.stacked100 ?? chartCfg?.stacked100 === true);
+    const effectiveChartDonut = $derived(activeChart.donut ?? !!chartCfg?.donut);
+    const effectiveChartPalette = $derived(activeChart.palette ?? chartCfg?.palette ?? null);
     const effectiveChartStacked = $derived(chartStacked ?? chartCfg?.stacked ?? false);
     const effectiveChartDataLabels = $derived(chartDataLabels ?? chartCfg?.dataLabels ?? false);
     const effectiveChartLogScale = $derived(chartLogScale ?? chartCfg?.yScale === "log");
@@ -1784,8 +1806,13 @@ export function createSvGridController(rawProps, domIdBase) {
             ? "Count"
             : `${chartReduce === "avg" ? "Average" : "Sum"} of ${label}`;
     });
-    const chartDimensionIsDate = $derived.by(() => {
-        const col = allColumns.find((c) => c.id === effectiveChartDimensionId);
+    /**
+     * Does this column hold dates? Declared type first, then a probe of the
+     * first non-empty value. Lifted out of `chartDimensionIsDate` so the chart
+     * panel can also ask it of columns the user has NOT picked yet, which is
+     * what decides whether a calendar chart is offerable at all.
+     */
+    function columnIsDate(col) {
         if (!col)
             return false;
         if (col.columnDef.cellDataType === "date")
@@ -1801,7 +1828,8 @@ export function createSvGridController(rawProps, domIdBase) {
             return typeof v === "string" && /^\d{4}-\d{2}(-\d{2})?/.test(v);
         }
         return false;
-    });
+    }
+    const chartDimensionIsDate = $derived.by(() => columnIsDate(allColumns.find((c) => c.id === effectiveChartDimensionId)));
     const chartRows = $derived.by(() => {
         const rects = getSelectionRects();
         const pushLeaf = (out, row) => {
@@ -1893,11 +1921,27 @@ export function createSvGridController(rawProps, domIdBase) {
     // null until it resolves, a tick after the panel itself starts loading (which it
     // already does). The `getAggregate` server path uses the local bucketsToSpec and
     // does not need the engine.
+    // The whole module, not just `rowsToChartSpec`: the panel can now reach
+    // every chart type, and the ones that do not read a categories-by-series
+    // grid (scatter, gauge, treemap, calendar, sankey) need their own builders
+    // from the same lazy chunk. Same `import()`, same boundary.
     let chartEngine = $state(null);
     $effect(() => {
         if (chartingEnabled && !chartEngine)
-            import("./chart.js").then((m) => (chartEngine = m.rowsToChartSpec));
-    });
+            import("./chart.js").then((m) => (chartEngine = m));
+    });
+    /** Put the chart's numbers in the same locale as the grid's. A grid that set
+     *  `localization.locale` has already said which locale its data is in, and a
+     *  chart of that data reading in a different one is a bug nobody would think
+     *  to look for; `charting.locale` overrides when they really should differ.
+     *  Currency has no such default - only the app knows what the numbers are. */
+    const applyChartLocale = (spec) => {
+        const locale = chartCfg?.locale ?? props.localization?.locale;
+        if (locale)
+            spec.locale = locale;
+        if (chartCfg?.currency)
+            spec.currency = chartCfg.currency;
+    };
     const chartSpec = $derived.by(() => {
         if (!chartingEnabled || !chartCfg)
             return null;
@@ -1917,6 +1961,7 @@ export function createSvGridController(rawProps, domIdBase) {
                 spec.yScale = "log";
             if (effectiveChartValueFormat)
                 spec.valueFormat = effectiveChartValueFormat;
+            applyChartLocale(spec);
             return spec;
         }
         if (chartCfg.buildSpec)
@@ -1929,33 +1974,69 @@ export function createSvGridController(rawProps, domIdBase) {
         if (!chartEngine)
             return null;
         const seriesField = fieldOf(effectiveChartSeriesId);
-        const spec = chartEngine(chartRows, {
+        const rowsForChart = chartRows;
+        // Some types read the rows directly rather than a grouped grid: a scatter
+        // point is one row, a gauge has no category axis at all, and a box plot
+        // needs the whole sample per group rather than one reduced number. The
+        // engine owns that dispatch - naming each type here would put them in the
+        // base bundle, which every grid pays for whether or not it ever charts.
+        // Everything else falls through to the aggregation below and is reshaped
+        // afterwards, so reduce / sort / topN / "Other" keep working for all of it.
+        const direct = chartEngine.rowsToDirectSpec(chartType, rowsForChart, {
+            category: category,
+            ...(values[0] ? { value: values[0] } : {}),
+            ...(fieldOf(effectiveChartMeasure2Id) ? { value2: fieldOf(effectiveChartMeasure2Id) } : {}),
+            ...(seriesField ? { series: seriesField } : {}),
+            reduce: chartReduce,
+            ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
+        });
+        if (direct)
+            return direct;
+        // A direct type that could not build (scatter with no Y picked yet, for
+        // instance) must not fall through to the bar-chart path and draw the wrong
+        // chart - it renders the panel's empty state instead.
+        if (chartType === "scatter" || chartType === "gauge" || chartType === "boxplot")
+            return null;
+        const spec = chartEngine.rowsToChartSpec(rowsForChart, {
             type: chartType,
             category: category,
             value: values.length === 1 ? values[0] : values,
             ...(seriesField ? { series: seriesField } : {}),
             reduce: chartReduce,
-            stacked: effectiveChartStacked || chartCfg.stacked100 === true,
-            stacked100: chartCfg.stacked100 === true,
-            ...(chartCfg.palette ? { palette: chartCfg.palette } : {}),
+            stacked: effectiveChartStacked || effectiveChartStacked100,
+            stacked100: effectiveChartStacked100,
+            ...(effectiveChartPalette ? { palette: effectiveChartPalette } : {}),
             ...(chartCfg.topN ? { topN: chartCfg.topN } : {}),
             ...(chartCfg.otherLabel ? { otherLabel: chartCfg.otherLabel } : {}),
             ...(chartCfg.sort ? { sort: chartCfg.sort } : {}),
         });
-        if (chartCfg.orientation)
-            spec.orientation = chartCfg.orientation;
+        // Reshape the aggregated grid into whatever this type actually reads.
+        // These run AFTER the aggregation so grouping, reduce, sort, topN and the
+        // "Other" bucket apply to them exactly as they do to a bar chart.
+        if (chartType === "treemap")
+            spec.treemap = chartEngine.specToTreemap(spec);
+        else if (chartType === "calendar")
+            spec.calendarValues = chartEngine.specToCalendar(spec);
+        else if (chartType === "sankey") {
+            const flow = chartEngine.specToSankey(spec);
+            spec.sankeyNodes = flow.nodes;
+            spec.sankeyLinks = flow.links;
+        }
+        if (effectiveChartOrientation === "horizontal")
+            spec.orientation = "horizontal";
         if (effectiveChartTimeAxis)
             spec.xType = "time";
         if (effectiveChartLogScale)
             spec.yScale = "log";
         if (effectiveChartValueFormat)
             spec.valueFormat = effectiveChartValueFormat;
+        applyChartLocale(spec);
         if (chartType !== "pie" && spec.orientation !== "horizontal" && !spec.yAxisTitle && chartAutoYAxisTitle) {
             spec.yAxisTitle = chartAutoYAxisTitle;
         }
         if (effectiveChartValueFormat && activeChart.valueFormat === null) { /* inherited default */ }
         if (chartType === "pie") {
-            if (chartCfg.donut)
+            if (effectiveChartDonut)
                 spec.innerRadius = typeof chartCfg.donut === "number" ? chartCfg.donut : 0.6;
         }
         if (chartCfg.annotations)
@@ -1982,7 +2063,18 @@ export function createSvGridController(rawProps, domIdBase) {
         }
         return spec;
     });
+    /**
+     * Can a click on this chart be turned back into a grid filter?
+     *
+     * Only where a clicked mark maps to exactly one value of the charted
+     * dimension. It does not for a sankey (clicking a TARGET would filter the
+     * SOURCE column by a target value and empty the grid), a gauge (no category
+     * at all), or a scatter (the mark carries a point label, not a group).
+     */
+    const chartCrossFilterable = $derived(chartType !== "sankey" && chartType !== "gauge" && chartType !== "scatter");
     function applyChartCrossFilter(category) {
+        if (!chartCrossFilterable)
+            return;
         const dimId = effectiveChartDimensionId;
         if (!dimId)
             return;
@@ -3418,6 +3510,11 @@ export function createSvGridController(rawProps, domIdBase) {
                 dimension: c.dimensionId,
                 series: c.seriesId ?? null,
                 measure: c.measureId,
+                measure2: c.measure2Id,
+                orientation: c.orientation,
+                stacked100: c.stacked100,
+                donut: c.donut,
+                palette: c.palette,
                 reduce: c.reduce,
                 stacked: c.stacked,
                 dataLabels: c.dataLabels,
@@ -3435,6 +3532,11 @@ export function createSvGridController(rawProps, domIdBase) {
                 dimensionId: c.dimension ?? null,
                 measureId: c.measure ?? null,
                 seriesId: c.series,
+                measure2Id: c.measure2 ?? null,
+                orientation: c.orientation ?? null,
+                stacked100: c.stacked100 ?? null,
+                donut: c.donut ?? null,
+                palette: c.palette ?? null,
                 stacked: c.stacked ?? null,
                 dataLabels: c.dataLabels ?? null,
                 logScale: c.logScale ?? null,
@@ -3444,6 +3546,18 @@ export function createSvGridController(rawProps, domIdBase) {
             charts = restored.length ? restored : [makeChart("Chart 1")];
             activeChartIndex = Math.max(0, Math.min(charts.length - 1, active ?? 0));
         },
+        get chartCrossFilterable() { return chartCrossFilterable; },
+        get chartOrientation() { return effectiveChartOrientation; },
+        set chartOrientation(v) { activeChart.orientation = v; },
+        get chartStacked100() { return effectiveChartStacked100; },
+        set chartStacked100(v) { activeChart.stacked100 = v; },
+        get chartDonut() { return effectiveChartDonut; },
+        set chartDonut(v) { activeChart.donut = v; },
+        get chartPalette() { return effectiveChartPalette; },
+        set chartPalette(v) { activeChart.palette = v; },
+        get chartMeasure2Id() { return activeChart.measure2Id; },
+        set chartMeasure2Id(v) { activeChart.measure2Id = v; },
+        get effectiveChartMeasure2Id() { return effectiveChartMeasure2Id; },
         get chartAiHandler() { return chartAiHandler; },
         set chartAiHandler(v) { chartAiHandler = v; },
         applyChartConfig(config) {

package/dist/SvGrid.css

@@ -153,6 +153,10 @@
 /* Advanced-filter indicator. Reads as state rather than as another action, so
    it uses the accent fill the toolbar buttons reserve for `is-active` instead
    of the neutral button shell. */
+.sv-grid-advf-chip > .sv-grid-icon {
+  width: 13px;
+  height: 13px;
+}
 .sv-grid-advf-chip {
   display: inline-flex;
   align-items: center;
@@ -261,6 +265,12 @@
   flex-shrink: 0;
 }
 .sv-grid-tool-panel-btn {
+  /* Centred as flex because these draw an icon now, not a bare character: a
+     glyph default still centres, and an SVG override no longer sits on the
+     text baseline. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 22px;
   height: 22px;
   border: 0;
@@ -807,9 +817,18 @@
   color: var(--sg-accent, #2563eb);
 }
 .sv-grid-group-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
   flex-shrink: 0;
   transition: transform 140ms ease;
 }
+.sv-grid-group-caret > .sv-grid-icon {
+  width: 100%;
+  height: 100%;
+}
 /* Collapsed: point the caret right (like a closed disclosure). */
 .sv-grid-group-toggle.is-collapsed .sv-grid-group-caret {
   transform: rotate(-90deg);
@@ -1855,6 +1874,23 @@ select.sv-grid-fr-editor {
   display: block;
   flex: none;
 }
+/* A consumer icon from the `icons` prop. SvGrid wraps the override in this box
+   rather than asking the consumer to add `.sv-grid-icon` themselves, so it
+   inherits every per-site size rule below and the expander's rotate-on-open
+   without needing to know those rules exist. Must stay AFTER .sv-grid-icon:
+   equal specificity, and this display has to win. */
+.sv-grid-icon-custom {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.sv-grid-icon-custom > svg,
+.sv-grid-icon-custom > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 
 .sv-grid-header-cell {
   display: flex;
@@ -2453,14 +2489,19 @@ select.sv-grid-fr-editor {
    group banners and auto-group columns, SvGroupCell and SvTree all draw the
    same `chevron-right` and rotate it open, rather than swapping between two
    different glyphs. */
-.sv-grid-tree-toggle .sv-grid-icon,
-.sv-grid-group-toggle .sv-grid-icon {
+/* Direct child, not descendant. The column-group header button also carries
+   `sv-grid-group-toggle` + `aria-expanded`, and its caret is wrapped one level
+   deeper - a descendant selector would rotate that caret 90deg too, so an
+   expanded down-caret would point left. The three row/tree expanders render
+   their icon as an immediate child, so `>` changes nothing for them. */
+.sv-grid-tree-toggle > .sv-grid-icon,
+.sv-grid-group-toggle > .sv-grid-icon {
   width: 12px;
   height: 12px;
   transition: transform 0.15s ease;
 }
-.sv-grid-tree-toggle[aria-expanded="true"] .sv-grid-icon,
-.sv-grid-group-toggle[aria-expanded="true"] .sv-grid-icon {
+.sv-grid-tree-toggle[aria-expanded="true"] > .sv-grid-icon,
+.sv-grid-group-toggle[aria-expanded="true"] > .sv-grid-icon {
   transform: rotate(90deg);
 }
 .sv-grid-tree-toggle:focus-visible {
@@ -2624,7 +2665,7 @@ select.sv-grid-fr-editor {
   box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
   min-width: 280px;
 }
-.sv-grid-find-icon {
+.sv-grid-find > .sv-grid-icon {
   width: 14px; height: 14px;
   color: var(--sg-muted, #94a3b8);
   flex: none;
@@ -2868,13 +2909,26 @@ select.sv-grid-fr-editor {
   opacity: 1;
 }
 
-/* Magnifier prefix on the menu's search input. */
+/* Magnifier prefix on the menu's search input. Real markup rather than a
+   background-image, so it follows the theme and the `icons` prop can replace
+   it; the input keeps its own class because focusFilterPanel() and a test both
+   resolve `.sv-grid-menu-search`. */
 .sv-grid-menu-search {
   padding-left: 28px;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
-  background-position: 8px center;
-  background-repeat: no-repeat;
-  background-size: 14px 14px;
+}
+.sv-grid-menu-search-wrap {
+  position: relative;
+  display: block;
+}
+.sv-grid-menu-search-wrap > .sv-grid-icon {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: var(--sg-muted, #94a3b8);
+  pointer-events: none;
 }
 
 /* Filter menu vertical rhythm. */
@@ -2910,6 +2964,11 @@ select.sv-grid-fr-editor {
   opacity: 1;
 }
 
+.sv-grid-board-search > .sv-grid-icon {
+  width: 14px;
+  height: 14px;
+}
+
 /* Kanban board mode search box (board.searchable) */
 .sv-grid-board-search {
   display: flex;
@@ -3048,6 +3107,16 @@ select.sv-grid-fr-editor {
 .sv-grid-chart-actions { display: inline-flex; align-items: center; gap: 6px; }
 .sv-grid-chart-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
 .sv-grid-chart-controls:empty { display: none; }
+/* Says why the chosen chart type cannot draw yet - a missing Split by, too few
+   groups. The picker deliberately does NOT hide such a type: options that come
+   and go as the user filters are worse than one sentence of explanation. */
+.sv-grid-chart-hint {
+  flex-basis: 100%;
+  margin: 2px 0 0;
+  font-size: 11.5px;
+  font-weight: 400;
+  color: var(--sg-muted, #64748b);
+}
 .sv-grid-chart-ctl { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--sg-muted, #64748b); }
 .sv-grid-chart-ctl select {
   font: inherit; font-size: 12.5px; font-weight: 400; color: var(--sg-fg, #0f172a);