@svgrid/grid 2.1.6 → 2.1.8

package/dist/chart-export.d.ts

@@ -1,3 +1,15 @@
+/**
+ * Export a rendered `SvGridChart` to a standalone SVG file or a PNG image.
+ *
+ * The on-screen chart styles its axes / labels / gridlines with CSS classes
+ * and `--sg-*` theme variables, which don't survive a raw serialization. So
+ * we clone the SVG, read the live computed colors, and inline a small `<style>`
+ * block with concrete values - the export looks like what's on screen.
+ *
+ * Pass the chart's `<svg class="sv-grid-chart-svg">` element (or any ancestor
+ * that contains it).
+ */
+import type { ChartSpec } from './chart';
 export type ChartExportOptions = {
     /** Background color of the exported image. Default: the grid background. */
     background?: string;
@@ -12,3 +24,12 @@ export declare function downloadChartSvg(source: SVGSVGElement | HTMLElement, fi
 export declare function chartToPngBlob(source: SVGSVGElement | HTMLElement, options?: ChartExportOptions): Promise<Blob>;
 /** Download the chart as a `.png` file. */
 export declare function downloadChartPng(source: SVGSVGElement | HTMLElement, filename?: string, options?: ChartExportOptions): Promise<void>;
+/**
+ * Serialize a chart's data to CSV: one row per category, one column per series
+ * (`Category, <series 1>, ...`). Empty for exotic specs (sankey/treemap/gauge/
+ * calendar) that don't carry a rectangular categories x series grid.
+ */
+export declare function chartSpecToCsv(spec: ChartSpec): string;
+/** Download the chart's data as a `.csv` file. Returns false if there's no
+ *  rectangular category/series data to export. */
+export declare function downloadChartCsv(spec: ChartSpec, filename?: string): boolean;

package/dist/chart-export.js

@@ -1,14 +1,3 @@
-/**
- * Export a rendered `SvGridChart` to a standalone SVG file or a PNG image.
- *
- * The on-screen chart styles its axes / labels / gridlines with CSS classes
- * and `--sg-*` theme variables, which don't survive a raw serialization. So
- * we clone the SVG, read the live computed colors, and inline a small `<style>`
- * block with concrete values - the export looks like what's on screen.
- *
- * Pass the chart's `<svg class="sv-grid-chart-svg">` element (or any ancestor
- * that contains it).
- */
 function resolveSvg(el) {
     if (el instanceof SVGSVGElement)
         return el;
@@ -34,6 +23,29 @@ export function chartToSvgString(source, options = {}) {
     clone.setAttribute('width', String(w));
     clone.setAttribute('height', String(h));
     clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    // Inline computed paint/text styles so the export is what's on screen -
+    // dynamic SVG presentation attributes (a line's `stroke={color}`) and scoped
+    // component CSS don't survive a raw clone + XMLSerializer. Walk the live tree
+    // and its clone (1:1 here, before we prune hit layers) and copy the resolved
+    // style, so line paths etc. export with their real stroke instead of nothing.
+    const PAINT_PROPS = [
+        'fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-opacity',
+        'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin', 'opacity',
+        'font-size', 'font-family', 'font-weight', 'text-anchor',
+    ];
+    const liveNodes = svg.querySelectorAll('*');
+    const cloneNodes = clone.querySelectorAll('*');
+    for (let i = 0; i < liveNodes.length; i += 1) {
+        const el = cloneNodes[i];
+        if (!el || !el.style)
+            continue;
+        const cs = getComputedStyle(liveNodes[i]);
+        for (const prop of PAINT_PROPS) {
+            const v = cs.getPropertyValue(prop);
+            if (v && v !== 'normal')
+                el.style.setProperty(prop, v);
+        }
+    }
     // Drop interaction-only hit layers.
     clone.querySelectorAll('.sv-grid-chart-hit').forEach((n) => n.remove());
     const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
@@ -110,3 +122,32 @@ export async function downloadChartPng(source, filename = 'chart.png', options =
     triggerDownload(url, filename);
     setTimeout(() => URL.revokeObjectURL(url), 1000);
 }
+const csvCell = (v) => {
+    const s = v == null ? '' : String(v);
+    return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+};
+/**
+ * Serialize a chart's data to CSV: one row per category, one column per series
+ * (`Category, <series 1>, ...`). Empty for exotic specs (sankey/treemap/gauge/
+ * calendar) that don't carry a rectangular categories x series grid.
+ */
+export function chartSpecToCsv(spec) {
+    const cats = spec.categories ?? [];
+    const series = spec.series ?? [];
+    if (!cats.length || !series.length)
+        return '';
+    const header = ['Category', ...series.map((s) => s.label)].map(csvCell).join(',');
+    const rows = cats.map((cat, i) => [cat, ...series.map((s) => s.values[i] ?? '')].map(csvCell).join(','));
+    return [header, ...rows].join('\n');
+}
+/** Download the chart's data as a `.csv` file. Returns false if there's no
+ *  rectangular category/series data to export. */
+export function downloadChartCsv(spec, filename = 'chart.csv') {
+    const csv = chartSpecToCsv(spec);
+    if (!csv)
+        return false;
+    const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
+    triggerDownload(url, filename);
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    return true;
+}

package/dist/chart.d.ts

@@ -101,6 +101,19 @@ export type ChartSpec = {
     height?: number;
     /** Palette used when a series has no explicit `color`. */
     palette?: string[];
+    /** Per-category color overrides (by category label) - for pie / donut slice
+     *  recolouring, where colour follows the category, not a series. */
+    categoryColors?: Record<string, string>;
+    /** Number format for the value axis, tooltips, data labels and reference
+     *  lines. Unset = the default compact `1.2k` / `1.2M` style. */
+    valueFormat?: ChartValueFormat;
+    /** Grouped (nested) category axis: a parent tier spanning consecutive leaf
+     *  categories (spans must sum to `categories.length`). Vertical category
+     *  charts only (ignored for time / horizontal / pie). */
+    categoryGroups?: Array<{
+        label: string;
+        span: number;
+    }>;
     /** Stack bar / area series (per axis) instead of grouping them. */
     stacked?: boolean;
     /** Stack to 100% (each category normalized to its total). Implies stacked. */
@@ -441,6 +454,14 @@ export type ChartGeometry = {
     y2Ticks: ChartAxisTick[];
     hasRightAxis: boolean;
     xTicks: ChartCategoryTick[];
+    /** Grouped category axis parent tier: label + span extent (pixels). Empty
+     *  unless `spec.categoryGroups` is set on a vertical category chart. */
+    categoryGroupTicks: Array<{
+        label: string;
+        xCenter: number;
+        x0: number;
+        x1: number;
+    }>;
     /** True when x labels are long/many and should be rotated. */
     xLabelRotated: boolean;
     legend: ChartLegendItem[];
@@ -558,6 +579,15 @@ export declare function exponentialMovingAverage(values: number[], period: numbe
 export declare function computeOverlay(values: number[], spec: SeriesOverlay): number[];
 /** Round a [min,max] domain out to nice tick boundaries. */
 export declare function niceScale(min: number, max: number, tickCount?: number): NiceScale;
+/** Value-axis / tooltip / label number format. */
+export type ChartValueFormat = 'number' | 'currency' | 'percent' | 'compact';
+/**
+ * Format a numeric value for display, honouring an optional `valueFormat`.
+ * Builds on the compact `1.2k` / `1.2M` base: currency prefixes `$` (sign
+ * outside), percent multiplies by 100 and suffixes `%`. Unset / `'number'` /
+ * `'compact'` = the plain compact form.
+ */
+export declare function formatChartValue(n: number, format?: ChartValueFormat): string;
 export declare function buildChart(spec: ChartSpec, theme?: 'light' | 'dark'): ChartGeometry;
 /**
  * Aggregate flat rows into a chart spec. Group by a category field, reduce a

package/dist/chart.js

@@ -314,6 +314,23 @@ function fmtTick(n) {
         return `${(n / 1000).toFixed(abs % 1000 ? 1 : 0)}k`;
     return String(Math.round(n * 100) / 100);
 }
+/**
+ * Format a numeric value for display, honouring an optional `valueFormat`.
+ * Builds on the compact `1.2k` / `1.2M` base: currency prefixes `$` (sign
+ * outside), percent multiplies by 100 and suffixes `%`. Unset / `'number'` /
+ * `'compact'` = the plain compact form.
+ */
+export function formatChartValue(n, format) {
+    if (!Number.isFinite(n))
+        return '';
+    if (format === 'currency')
+        return `${n < 0 ? '-' : ''}$${fmtTick(Math.abs(n))}`;
+    if (format === 'percent') {
+        const p = n * 100;
+        return `${Math.round(p * 10) / 10}%`;
+    }
+    return fmtTick(n);
+}
 const DAY = 86400000;
 /** Nice date-tick timestamps across [min, max]. */
 function dateTicks(tMin, tMax) {
@@ -413,6 +430,7 @@ export function buildChart(spec, theme = 'light') {
         y2Ticks: [],
         hasRightAxis: false,
         xTicks: [],
+        categoryGroupTicks: [],
         xLabelRotated: false,
         legend,
         donut: null,
@@ -527,7 +545,7 @@ export function buildChart(spec, theme = 'light') {
             x: round(padL + slotW * i + slotW / 2),
         }));
         const yTicks = dom.ticks.map((value) => ({
-            value, y: yOfW(value), label: fmtTick(value),
+            value, y: yOfW(value), label: formatChartValue(value, spec.valueFormat),
         }));
         return {
             ...empty,
@@ -723,7 +741,7 @@ export function buildChart(spec, theme = 'light') {
         const legend = Array.from({ length: 5 }, (_, i) => {
             const t = i / 4;
             const value = vMin + (vMax - vMin) * t;
-            return { value, color: colorAt(value), label: fmtTick(value) };
+            return { value, color: colorAt(value), label: formatChartValue(value, spec.valueFormat) };
         });
         return {
             ...empty,
@@ -1110,7 +1128,7 @@ export function buildChart(spec, theme = 'light') {
         const heatmapLegend = Array.from({ length: 5 }, (_, i) => {
             const t = i / 4;
             const value = vMin + (vMax - vMin) * t;
-            return { value, color: colorAt(value), label: fmtTick(value) };
+            return { value, color: colorAt(value), label: formatChartValue(value, spec.valueFormat) };
         });
         return {
             ...empty,
@@ -1163,10 +1181,11 @@ export function buildChart(spec, theme = 'light') {
             else {
                 path = `M${round(cx)},${round(cy)} L${round(ox0)},${round(oy0)} A${r},${r} 0 ${large} 1 ${round(ox1)},${round(oy1)} Z`;
             }
+            const catLabel = spec.categories[i] ?? String(i);
             return {
                 path,
-                color: palette[i % palette.length],
-                label: spec.categories[i] ?? String(i),
+                color: spec.categoryColors?.[catLabel] ?? palette[i % palette.length],
+                label: catLabel,
                 value: v,
                 percent: frac * 100,
                 cx: round(cx + labelR * Math.cos(mid)),
@@ -1176,7 +1195,7 @@ export function buildChart(spec, theme = 'light') {
         return {
             ...empty,
             slices,
-            legend: spec.categories.map((label, i) => ({ label, color: palette[i % palette.length] })),
+            legend: spec.categories.map((label, i) => ({ label, color: spec.categoryColors?.[label] ?? palette[i % palette.length] })),
             donut: ir > 0 ? { cx: round(cx), cy: round(cy), r: round(ir), total: s.values.reduce((a, b) => a + Math.max(0, b), 0) } : null,
         };
     }
@@ -1239,7 +1258,7 @@ export function buildChart(spec, theme = 'light') {
         }
         const referenceLines = (spec.referenceLines ?? []).map((ref) => ({
             y: yOf(ref.value),
-            label: ref.label ?? fmtTick(ref.value),
+            label: ref.label ?? formatChartValue(ref.value, spec.valueFormat),
             color: ref.color ?? '#ef4444',
             dashed: ref.dashed !== false,
         }));
@@ -1248,7 +1267,7 @@ export function buildChart(spec, theme = 'light') {
             plot,
             scatterPoints,
             referenceLines,
-            yTicks: yDom.ticks.map((value) => ({ value, y: yOf(value), label: fmtTick(value) })),
+            yTicks: yDom.ticks.map((value) => ({ value, y: yOf(value), label: formatChartValue(value, spec.valueFormat) })),
             xTicks: xDom.ticks.map((value) => ({ label: fmtTick(value), x: xOf(value) })),
         };
     }
@@ -1331,7 +1350,7 @@ export function buildChart(spec, theme = 'light') {
             });
         }
         const valueTicks = dom.ticks.map((value) => ({
-            label: spec.stacked100 ? `${fmtTick(value)}%` : fmtTick(value),
+            label: spec.stacked100 ? `${fmtTick(value)}%` : formatChartValue(value, spec.valueFormat),
             x: xOf(value),
         }));
         const catTicks = spec.categories.map((label, i) => ({
@@ -1341,7 +1360,7 @@ export function buildChart(spec, theme = 'light') {
         }));
         const referenceLinesV = (spec.referenceLines ?? []).map((ref) => ({
             x: xOf(ref.value),
-            label: ref.label ?? fmtTick(ref.value),
+            label: ref.label ?? formatChartValue(ref.value, spec.valueFormat),
             color: ref.color ?? '#ef4444',
             dashed: ref.dashed !== false,
         }));
@@ -1362,10 +1381,19 @@ export function buildChart(spec, theme = 'light') {
     const hasRightAxis = rightSeries.length > 0;
     const maxLabel = spec.categories.reduce((m, c) => Math.max(m, c.length), 0);
     const xLabelRotated = spec.categories.length > 8 || maxLabel > 9;
+    // Grouped (nested) category axis: valid only when the spans cover every leaf.
+    const validGroups = spec.categoryGroups &&
+        spec.categoryGroups.length > 0 &&
+        spec.xType !== 'time' &&
+        spec.orientation !== 'horizontal' &&
+        spec.categoryGroups.reduce((a, g) => a + g.span, 0) === spec.categories.length
+        ? spec.categoryGroups
+        : null;
+    const groupTierH = validGroups ? 18 : 0;
     const padL = 48 + (spec.yAxisTitle ? 16 : 0);
     const padR = (hasRightAxis ? 48 : 12) + (spec.y2AxisTitle ? 16 : 0);
     const padT = 10;
-    const padB = (xLabelRotated ? 54 : 28) + (spec.xAxisTitle ? 16 : 0);
+    const padB = (xLabelRotated ? 54 : 28) + (spec.xAxisTitle ? 16 : 0) + groupTierH;
     const plotW = Math.max(1, width - padL - padR);
     const plotH = Math.max(1, height - padT - padB);
     const plot = { x: padL, y: padT, w: plotW, h: plotH };
@@ -1410,6 +1438,17 @@ export function buildChart(spec, theme = 'light') {
             x: round(padL + ((t - tMin) / tSpan) * plotW),
         }))
         : spec.categories.map((label, i) => ({ label, x: xCenter(i) }));
+    // Parent-tier ticks for a grouped category axis: each spans its leaves.
+    const categoryGroupTicks = [];
+    if (validGroups && !timeOk) {
+        let start = 0;
+        for (const g of validGroups) {
+            const x0 = round(padL + slot * start);
+            const x1 = round(padL + slot * (start + g.span));
+            categoryGroupTicks.push({ label: g.label, x0, x1, xCenter: round((x0 + x1) / 2) });
+            start += g.span;
+        }
+    }
     const barSeries = series.filter((s) => s.kind === 'bar');
     const bars = [];
     if (barSeries.length) {
@@ -1607,14 +1646,14 @@ export function buildChart(spec, theme = 'light') {
         }
         lines.push({ path, areaPath, color: s.color, label: s.label, points: pts, bandPath });
     }
-    const tickFor = (dom, log) => dom.ticks.map((value) => ({ value, y: yOf(dom, value, log), label: fmtTick(value) }));
+    const tickFor = (dom, log) => dom.ticks.map((value) => ({ value, y: yOf(dom, value, log), label: formatChartValue(value, spec.valueFormat) }));
     const referenceLines = (spec.referenceLines ?? []).map((ref) => {
         const onRight = ref.axis === 'right';
         const dom = onRight ? (rightDom ?? leftDom) : leftDom;
         const log = onRight ? rightLog : leftLog;
         return {
             y: yOf(dom, ref.value, log),
-            label: ref.label ?? fmtTick(ref.value),
+            label: ref.label ?? formatChartValue(ref.value, spec.valueFormat),
             color: ref.color ?? '#ef4444',
             dashed: ref.dashed !== false,
         };
@@ -1699,6 +1738,7 @@ export function buildChart(spec, theme = 'light') {
         y2Ticks: rightDom ? tickFor(rightDom, rightLog) : [],
         hasRightAxis,
         xTicks,
+        categoryGroupTicks,
         xLabelRotated: timeOk ? false : xLabelRotated,
         referenceLines,
         overlays,

package/dist/createAutocomplete.svelte.d.ts

@@ -46,6 +46,8 @@ export declare function createAutocomplete(config: AutocompleteConfig): {
     readonly filtered: ListOption[];
     /** Controlled text value. */
     readonly value: string;
+    /** id of the listbox element (matches inputProps `aria-controls`). */
+    listId: string;
     isActive: (i: number) => boolean;
     setActive: (i: number) => void;
     maybeOpen: () => void;
@@ -67,14 +69,18 @@ export declare function createAutocomplete(config: AutocompleteConfig): {
         id: string | undefined;
         role: "combobox";
         'aria-expanded': boolean;
+        'aria-controls': string;
         'aria-autocomplete': "list";
+        'aria-activedescendant': string | undefined;
     };
     /** Spread onto the listbox container. */
     listboxProps: () => {
+        id: string;
         role: "listbox";
     };
     /** Spread onto the suggestion at `index` (index into `filtered`). */
     optionProps: (index: number) => {
+        id: string;
         role: "option";
         tabindex: number;
         'aria-selected': boolean;

package/dist/createAutocomplete.svelte.js

@@ -21,7 +21,11 @@
  */
 import { filterOptions } from './list-option';
 import { editorAria } from './editor-contract';
+let uid = 0;
 export function createAutocomplete(config) {
+    const id = `sv-ac-${uid++}`;
+    const listId = `${id}-list`;
+    const optionId = (index) => `${listId}-opt-${index}`;
     const minChars = () => config.minChars?.() ?? 1;
     const ariaState = () => ({
         id: config.id?.(),
@@ -73,6 +77,8 @@ export function createAutocomplete(config) {
         get filtered() { return filtered; },
         /** Controlled text value. */
         get value() { return config.value(); },
+        /** id of the listbox element (matches inputProps `aria-controls`). */
+        listId,
         isActive: (i) => i === active,
         setActive: (i) => { active = i; },
         maybeOpen,
@@ -85,7 +91,9 @@ export function createAutocomplete(config) {
             id: config.id?.(),
             role: 'combobox',
             'aria-expanded': open,
+            'aria-controls': listId,
             'aria-autocomplete': 'list',
+            'aria-activedescendant': open && filtered[active] ? optionId(active) : undefined,
             ...editorAria(ariaState()),
             value: config.value(),
             disabled: config.disabled?.() ?? false,
@@ -95,10 +103,12 @@ export function createAutocomplete(config) {
         }),
         /** Spread onto the listbox container. */
         listboxProps: () => ({
+            id: listId,
             role: 'listbox',
         }),
         /** Spread onto the suggestion at `index` (index into `filtered`). */
         optionProps: (index) => ({
+            id: optionId(index),
             role: 'option',
             tabindex: -1,
             'aria-selected': index === active,

package/dist/createCombobox.svelte.d.ts

@@ -84,6 +84,7 @@ export declare function createCombobox(config: ComboboxConfig): {
         'aria-expanded': boolean;
         'aria-controls': string;
         'aria-autocomplete': "list";
+        'aria-activedescendant': string | undefined;
     };
     /** Spread onto the chevron/toggle <button>. */
     triggerProps: () => {

package/dist/createCombobox.svelte.js

@@ -143,6 +143,7 @@ export function createCombobox(config) {
             'aria-expanded': open,
             'aria-controls': listId,
             'aria-autocomplete': 'list',
+            'aria-activedescendant': open && filtered[active] ? optionId(active) : undefined,
             ...editorAria(ariaState()),
             value: shownText,
             disabled: disabled(),

package/dist/createCountryInput.svelte.d.ts

@@ -71,21 +71,26 @@ export declare function createCountryInput(config: CountryInputConfig): {
         type: "button";
         'aria-haspopup': "listbox";
         'aria-expanded': boolean;
+        'aria-controls': string;
     };
     /** Spread onto the search <input> inside the panel. */
     searchProps: () => {
         type: "text";
         value: string;
         'aria-label': string;
+        'aria-controls': string;
+        'aria-activedescendant': string | undefined;
         oninput: (e: Event) => void;
         onkeydown: (e: KeyboardEvent) => void;
     };
     /** Spread onto the listbox container. */
     listboxProps: () => {
+        id: string;
         role: "listbox";
     };
     /** Spread onto the country option at `index` (index into `filtered`). */
     optionProps: (index: number) => {
+        id: string;
         role: "option";
         tabindex: number;
         'aria-selected': boolean;

package/dist/createCountryInput.svelte.js

@@ -22,7 +22,11 @@
  */
 import { COUNTRIES, COUNTRY_BY_CODE } from './countries';
 import { editorAria } from './editor-contract';
+let uid = 0;
 export function createCountryInput(config) {
+    const id = `sv-country-${uid++}`;
+    const listId = `${id}-list`;
+    const optionId = (i) => `${listId}-opt-${i}`;
     const disabled = () => config.disabled?.() ?? false;
     const ariaState = () => ({
         id: config.id?.(),
@@ -53,6 +57,8 @@ export function createCountryInput(config) {
     function pick(code) { config.onChange?.(code); open = false; config.focusTrigger?.(); }
     function setQuery(v) { query = v; active = 0; }
     function onSearchInput(e) { setQuery(e.currentTarget.value); }
+    /** The current active-descendant id (for the focused search input), or undefined. */
+    const activeDescendant = () => (open && filtered.length > 0 ? optionId(active) : undefined);
     function onKeydown(e) {
         if (!open)
             return;
@@ -103,6 +109,7 @@ export function createCountryInput(config) {
             type: 'button',
             'aria-haspopup': 'listbox',
             'aria-expanded': open,
+            'aria-controls': listId,
             ...editorAria(ariaState()),
             disabled: disabled(),
             onclick: toggle,
@@ -112,17 +119,21 @@ export function createCountryInput(config) {
             type: 'text',
             value: query,
             'aria-label': config.searchLabel?.() ?? 'Search countries',
+            'aria-controls': listId,
+            'aria-activedescendant': activeDescendant(),
             oninput: onSearchInput,
             onkeydown: onKeydown,
         }),
         /** Spread onto the listbox container. */
         listboxProps: () => ({
+            id: listId,
             role: 'listbox',
         }),
         /** Spread onto the country option at `index` (index into `filtered`). */
         optionProps: (index) => {
             const c = filtered[index];
             return {
+                id: optionId(index),
                 role: 'option',
                 tabindex: -1,
                 'aria-selected': c ? c.code === config.value() : false,

package/dist/createDropdownList.svelte.d.ts

@@ -67,15 +67,19 @@ export declare function createDropdownList(config: DropdownListConfig): {
         type: "button";
         'aria-haspopup': "listbox";
         'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-activedescendant': string | undefined;
     };
     /** Spread onto the listbox container. */
     listboxProps: () => {
+        id: string;
         role: "listbox";
         tabindex: number;
     };
     /** Spread onto the option at `index` (index into `options`). */
     optionProps: (index: number) => {
         role: "option";
+        id: string;
         tabindex: number;
         'aria-selected': boolean;
         'aria-disabled': boolean | undefined;

package/dist/createDropdownList.svelte.js

@@ -21,7 +21,10 @@
  */
 import { createTypeaheadBuffer, isTypeaheadKey, nextTypeaheadIndex } from './list-option';
 import { editorAria } from './editor-contract';
+let uid = 0;
 export function createDropdownList(config) {
+    const listId = `sv-ddl-${uid++}`;
+    const optionId = (index) => `${listId}-opt-${index}`;
     const opts = () => config.options();
     const disabled = () => config.disabled?.() ?? false;
     const ariaState = () => ({
@@ -138,6 +141,8 @@ export function createDropdownList(config) {
             type: 'button',
             'aria-haspopup': 'listbox',
             'aria-expanded': open,
+            'aria-controls': listId,
+            'aria-activedescendant': open && opts()[active] ? optionId(active) : undefined,
             ...editorAria(ariaState()),
             disabled: disabled(),
             onclick: toggle,
@@ -145,6 +150,7 @@ export function createDropdownList(config) {
         }),
         /** Spread onto the listbox container. */
         listboxProps: () => ({
+            id: listId,
             role: 'listbox',
             tabindex: -1,
         }),
@@ -153,6 +159,7 @@ export function createDropdownList(config) {
             const o = opts()[index];
             return {
                 role: 'option',
+                id: optionId(index),
                 tabindex: -1,
                 'aria-selected': o ? o.value === config.value() : false,
                 'aria-disabled': o?.disabled,

package/dist/createPopoverSelect.svelte.d.ts

@@ -62,9 +62,11 @@ export declare function createPopoverSelect(config: PopoverSelectConfig): {
     onPanelKeydown: (e: KeyboardEvent) => void;
     /** True when item `i` is the roving-active one. */
     isActive: (i: number) => boolean;
-    /** Spread onto the trigger button. */
-    triggerProps: () => {
-        'aria-haspopup': "listbox";
+    /** Spread onto the trigger button. Pass the ARIA popup type the panel
+     *  exposes (mirrors `focusOwnerProps(role)`); defaults to 'listbox' for
+     *  the classic select panels. */
+    triggerProps: (haspopup?: "listbox" | "tree" | "grid") => {
+        'aria-haspopup': "listbox" | "grid" | "tree";
         'aria-expanded': boolean;
         'aria-controls': string | undefined;
         onkeydown: (e: KeyboardEvent) => void;

package/dist/createPopoverSelect.svelte.js

@@ -171,9 +171,11 @@ export function createPopoverSelect(config) {
         onPanelKeydown,
         /** True when item `i` is the roving-active one. */
         isActive: (i) => i === active,
-        /** Spread onto the trigger button. */
-        triggerProps: () => ({
-            'aria-haspopup': 'listbox',
+        /** Spread onto the trigger button. Pass the ARIA popup type the panel
+         *  exposes (mirrors `focusOwnerProps(role)`); defaults to 'listbox' for
+         *  the classic select panels. */
+        triggerProps: (haspopup = 'listbox') => ({
+            'aria-haspopup': haspopup,
             'aria-expanded': open,
             'aria-controls': open ? panelId : undefined,
             onkeydown: onTriggerKeydown,

package/dist/createTree.svelte.d.ts

@@ -106,6 +106,7 @@ export declare function createTree(config: TreeConfig): {
         'aria-selected': boolean;
         'aria-expanded': boolean | undefined;
         'aria-checked': "true" | "mixed" | "false" | undefined;
+        'aria-disabled': true | undefined;
         'data-row': number;
         tabindex: number;
         onclick: () => void;

package/dist/createTree.svelte.js

@@ -184,6 +184,18 @@ export function createTree(config) {
             currentlyOn ? next.delete(id) : next.add(id);
         config.onCheck?.([...next]);
     }
+    // Step from `from` towards `dir` (+1/-1), skipping disabled rows, so roving
+    // focus never lands on a node with zero semantic affordance for AT users.
+    // Falls back to `from` if every row in that direction is disabled.
+    function stepEnabled(from, dir) {
+        let i = from;
+        while (i + dir >= 0 && i + dir <= rows.length - 1) {
+            i += dir;
+            if (!rows[i]?.node.disabled)
+                return i;
+        }
+        return from;
+    }
     function onKeydown(e) {
         const item = rows[active];
         if (!item)
@@ -209,11 +221,11 @@ export function createTree(config) {
         switch (e.key) {
             case 'ArrowDown':
                 e.preventDefault();
-                setActive(Math.min(active + 1, rows.length - 1), true);
+                setActive(stepEnabled(active, 1), true);
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                setActive(Math.max(active - 1, 0), true);
+                setActive(stepEnabled(active, -1), true);
                 break;
             case 'ArrowRight':
                 e.preventDefault();
@@ -277,6 +289,7 @@ export function createTree(config) {
                 'aria-selected': row.node.id === selected(),
                 'aria-expanded': row.hasChildren ? row.open : undefined,
                 'aria-checked': ariaChecked,
+                'aria-disabled': row.node.disabled || undefined,
                 'data-row': row.index,
                 tabindex: row.index === active ? 0 : -1,
                 onclick: () => { setActive(row.index); select(row.node); },

package/dist/index.d.ts

@@ -137,8 +137,10 @@ export { isDisabledDay, isOutOfRange, isRestricted, isImportant, type RestrictOp
 export { default as FlexRender } from './FlexRender.svelte';
 export { renderComponent, renderSnippet } from './render-component';
 export { default as SvGridChart } from './SvGridChart.svelte';
-export { buildChart, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, type ChartType, type ChartSpec, type ChartSeries, type ChartGeometry, type ChartBar, type ChartLine, type ChartLinePoint, type ChartPieSlice, type ChartSelection, type ChartReferenceLine, type ChartRefLineGeo, type ChartRefLineGeoV, type ChartScatterDot, type ScatterPoint, type NiceScale, type SeriesOverlay, type SeriesPattern, type ChartAnnotation, type ChartHeatmapCell, type ChartFunnelSegment, type ChartRadarSeries, type ChartRadarAxis, type ChartTreemapCell, type ChartCalendarCell, type ChartGaugeLayout, type ChartSankeyNode, type ChartSankeyLink, type TreeNode, } from './chart';
-export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, type ChartExportOptions, } from './chart-export';
+export { default as SvGridChartPanel } from './SvGridChartPanel.svelte';
+export type { ChartingConfig, ChartAggregateRequest, ChartAggregateBucket } from './SvGrid.types';
+export { buildChart, formatChartValue, rowsToChartSpec, niceScale, niceLogScale, linearTrend, simpleMovingAverage, exponentialMovingAverage, computeOverlay, buildLinePath, sampleGradient, pickContrastText, DEFAULT_PALETTE, type ChartType, type ChartSpec, type ChartSeries, type ChartGeometry, type ChartBar, type ChartLine, type ChartLinePoint, type ChartPieSlice, type ChartSelection, type ChartReferenceLine, type ChartRefLineGeo, type ChartRefLineGeoV, type ChartScatterDot, type ScatterPoint, type NiceScale, type SeriesOverlay, type SeriesPattern, type ChartAnnotation, type ChartHeatmapCell, type ChartFunnelSegment, type ChartRadarSeries, type ChartRadarAxis, type ChartTreemapCell, type ChartCalendarCell, type ChartGaugeLayout, type ChartSankeyNode, type ChartSankeyLink, type ChartValueFormat, type TreeNode, } from './chart';
+export { chartToSvgString, downloadChartSvg, chartToPngBlob, downloadChartPng, chartSpecToCsv, downloadChartCsv, type ChartExportOptions, } from './chart-export';
 export { buildSparkline, toSparklineValues, type SparklineConfig, type SparklineType, type SparklineGeometry, } from './sparkline';
 export { spreadsheetLayout, spansToMerges, type SpanColumn, type SpreadsheetActionOptions, type MergeSpec, type CellBorderSpec, type BorderSpec, } from './spreadsheet';
 export { rowResize, type RowResizeOptions } from './row-resize';