@fundar/data-chart-telling 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,59 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.2.0] - 2026-10-24
+
+### Added
+
+- `LollipopPlot`, a dot on a stem for the value of each category.
+- `DumbbellPlot`, two series joined by a connector for each category.
+- `ClevelandPlot`, any number of series per category joined from the lowest to the highest value, with connectors you can color, turn into arrows and sort by series value or range.
+- `ForestPlot`, a dot per row on a stem spanning its confidence interval.
+- `BulletPlot`, a bar against a target tick and shaded qualitative ranges.
+- `SlopePlot`, the change of each series between two moments, labelled at both ends.
+- `SparklinePlot`, a small axisless line with a dot and a label on its last point.
+- `DensityPlot`, a kernel density curve of one numeric field, and `ViolinPlot`, the mirrored density of each category with a box inside.
+- Step lines through `styles.curve: 'step'`, `'step-after'` or `'step-before'` on `LinePlot`.
+- A `deviation` statistic that draws an estimator of the values and a band around it, with optional labels.
+- `styles.values.select` chooses which points get a value label (`'first'`, `'last'`, `'min'`, `'max'` or a list), for line, area and Cleveland-family plots.
+- The size channel (`r`) works on the dots of the Cleveland family, and its automatic legend is configured under the `r` key.
+- Every marker takes `dx` and `dy` to move it a number of pixels, on a map too, and `dot`, `text` and `image` markers also take a function of the row to move each row on its own.
+- `setConfiguration({ palette })` takes the name of a d3-scale-chromatic scheme (`'viridis'`, `'dark2'`...) or `{ scheme, count, schemeRange }` instead of just a list of colors.
+- `continuous.scheme` and `continuous.schemeRange` in the configuration set the default continuous ramp by the name of a d3-scale-chromatic ramp, as an alternative to its `min` and `max` colors.
+- Tick labels turn or thin out on small plots when they would not fit, and the last label of an axis that is not rounded to nice values stays inside the plot.
+- A timeline can free one axis at a time (`scales: 'free-x'` or `'free-y'`) while the other keeps its shared domain.
+- `link` markers on a map can lift their arcs off the surface (`altitude`) and cut them where a globe hides them (`occlusion`).
+
+### Changed
+
+- The default palette is Tableau 10, and the default continuous ramp, the timeline and player accents and the connector colors follow it.
+
+### Fixed
+
+- The example datasets moved out of the stories into `examples/datasets`, where real data replaces the synthetic rows and the docs, examples and stories all read the same files.
+- The Minard map of Napoleon's march is rebuilt with `GeoPlot` and `LinePlot` markers instead of a hand-assembled svelteplot chart.
+
+## [1.1.0] - 2026-10-20
+
+### Added
+
+- `BoxPlot`, a new plot kind for the distribution of values per category. It draws one box per category of each series: the quartiles, the median, whiskers that reach the farthest values within 1.5 times the interquartile range, and the values past them as outlier dots.
+  - Boxes stand upright when the categories are on `x` and lie sideways when they are on `y`.
+  - `grouping` or `color` gives each group its own box and color, and `facet` compares groups in separate panels.
+  - The tooltip reads one box at a time instead of every value inside it. The hovered row carries `category`, `min`, `p25`, `median`, `p75`, `max`, `count` and `outliers` for a custom `format`.
+  - Categories keep the order the data gives them, and the value axis fits the values without reaching for zero.
+  - It takes the same props as every other plot: `segments` to restyle whole categories, the interactive legend, `markers`, `styles.frame` and the rest.
+  - New `box` block in the configuration for the box fill opacity and the spacing between boxes (`fillOpacity`, `paddingInner`, `paddingOuter`).
+
+### Fixed
+
+- Nice axis domains no longer grow a whole extra step when the data ends just past a round value (parts that sum to `100.00000000000001` stay on `100`). `niceTolerance` on a scale sets how far past a tick, as a share of the step, the data may end and still stay on it.
+- Ticks at the data's first and last values no longer crowd the nice tick next to them. `axis.edgeTicks` in the configuration (or `edgeTicks` on a scale) chooses what happens then: `collision` is `'drop-nice'`, `'drop-edge'` or `'extend'`.
+- A tooltip that lists several rows shows them highest value first.
+- The timeline accepts steps given as `Date` objects or date strings (ISO, or any pattern set with `dateFormat`), not only numbers.
+- The `delta` marker's label offset and anchor have defaults per axis in the configuration (`delta.text`).
+- Documentation and examples brought up to date with the current API.
+
 ## [1.0.0] - 2026-10-16
 
 First stable release.

package/README.md

@@ -18,24 +18,21 @@ Svelte 5 plots for data storytelling, built on [svelteplot](https://svelteplot.d
 
 It aims for a sweet spot between the flexibility of `d3`, the declarative spirit of the _grammar of graphics_ (data mapped to channels, scales and marks) and the convenience of a classic plotting library, where each plot kind is a first-class component.
 
+<!-- example: examples/LineByRegion.svelte -->
+
 ```svelte
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-
-	const rows = [
-		{ year: 2020, region: 'North', value: 3.1 },
-		{ year: 2021, region: 'North', value: 3.8 },
-		{ year: 2020, region: 'South', value: 2.2 },
-		{ year: 2021, region: 'South', value: 2.9 }
-	];
+	import { REGION_VALUES } from './datasets';
 </script>
 
+<!-- One line per region, with a title, the automatic legend, end-of-line values and a tooltip. -->
 <LinePlot
 	width={720}
 	height={400}
-	title="Value by region"
-	data={rows}
-	x="year"
+	title="Monthly inflation by region (%)"
+	data={REGION_VALUES}
+	x="date"
 	y="value"
 	color="region"
 	tooltip
@@ -44,9 +41,13 @@ It aims for a sweet spot between the flexibility of `d3`, the declarative spirit
 />
 ```
 
-![A line plot with a title, a legend, end-of-line value labels and a tooltip](docs/images/readme-hero.png)
+<!-- /example -->
+
+![A line plot with a title, a legend, end-of-line value labels and a tooltip](docs/images/line-by-region.png)
 
-Eight plot kinds - line, area, bar, histogram, heatmap, pyramid, scatter and geographic maps - share one vocabulary: the same channels (`x`, `y`, `color`, `grouping`, `opacity`, `symbol`, `r`), the same `scales`, `styles`, `segments`, `markers`, `transforms`, `tooltip`, `legend`, `timeline` and `facet` props, and one global theme.
+Every Svelte snippet in this README is a runnable file in [examples/](examples/), and the data comes from [examples/datasets/](examples/datasets/).
+
+Every plot kind shares one vocabulary: the same channels (`x`, `y`, `color`, `grouping`, `opacity`, `symbol`, `r`), the same `scales`, `styles`, `segments`, `markers`, `transforms`, `tooltip`, `legend`, `timeline` and `facet` props, and one global theme.
 
 ## Install
 
@@ -62,26 +63,64 @@ The package ships Svelte components, so the app needs the Svelte compiler (`@sve
 
 `timeline` slices the rows by a field and steps through them. It draws as a **player** by default: play and pause, the current step and a slider, in the figure's chrome.
 
+<!-- example: examples/TimelinePlayer.svelte -->
+
 ```svelte
-<BarPlot {width} {height} data={rows} x="region" y="value" timeline={{ accessor: 'year' }} />
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './datasets';
+</script>
+
+<!--
+	`timeline` slices the rows by `accessor`. A timeline is a player by default:
+	play/pause, the current step and a slider in the chrome. `progress` sets where
+	it starts. `type: 'rule'` draws a guide beside the plot with no controls
+	instead (see TimelineRule). To build your own widget, read
+	`useFigure().timeline` (seek, play, pause, next, ...).
+-->
+<BarPlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="region"
+	y="value"
+	scales={{ y: { domain: [0, 30] } }}
+	timeline={{ accessor: 'date', progress: 0.25, player: { autoplay: false, loop: true } }}
+/>
 ```
 
+<!-- /example -->
+
 ![A bar plot with a player bar](docs/images/timeline-player.png)
 
 `type: 'rule'` draws a **rule** beside the plot instead, a line with the steps written along it. The page drives it through `progress` (`0` to `1`), from a slider, scroll position or anything else.
 
+<!-- example: examples/TimelineRule.svelte -->
+
 ```svelte
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './datasets';
+
+	// A rule has no controls of its own: the page moves it through `progress` (0 to 1).
+	// One step per year; a line plot shows every row up to the current step.
+	let progress = $state(0.5);
+</script>
+
+<input type="range" min="0" max="1" step="0.001" bind:value={progress} />
 <LinePlot
-	{width}
-	{height}
-	data={rows}
-	x="year"
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="date"
 	y="value"
 	color="region"
-	timeline={{ accessor: 'year', type: 'rule', progress }}
+	timeline={{ accessor: (row) => row.date.getUTCFullYear(), type: 'rule', progress }}
 />
 ```
 
+<!-- /example -->
+
 ![A line plot revealed up to the current step, with a timeline rule](docs/images/timeline-rule.png)
 
 See [Timeline](docs/timeline.md) for both in detail.
@@ -94,7 +133,7 @@ Start with the concepts; the rest is organised by what you want a plot to do.
 | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
 | [Getting started](docs/getting-started.md)                     | Installing, a first plot, sizing a plot to its container, loading data                       |
 | [Concepts](docs/concepts.md)                                   | Plots and figures, rows and series, channels, the props every plot shares                    |
-| [Plots](docs/plots.md)                                         | The eight plot kinds: what each one draws and what it needs                                  |
+| [Plots](docs/plots.md)                                         | Every plot kind: what it draws and what it needs                                             |
 | [Scales](docs/scales.md)                                       | Axes (`x`, `y`) and channel scales (`color`, `grouping`, `opacity`, `symbol`, `r`, `length`) |
 | [Styles and segments](docs/styles-and-segments.md)             | Value labels, frames, gap filling, and styling ranges of the data                            |
 | [Markers](docs/markers.md)                                     | Extra marks on a plot: annotations, regions, hover highlights, custom components             |

package/dist/configuration/config.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PlotStylesConfig, PlotStylesConfigInput } from '../types/configura
 export declare const DEFAULT_CONFIG: PlotStylesConfig;
 /** Read the live, reactive configuration. */
 export declare function getConfiguration(): PlotStylesConfig;
-/** Deep-merge a partial override into the global configuration. Reactive. */
+/** Deep-merge a partial override into the global configuration - a `palette` may be a scheme name. Reactive. */
 export declare function setConfiguration(patch: PlotStylesConfigInput): PlotStylesConfig;
 /** Restore the shipped defaults. */
 export declare function resetConfiguration(): void;

package/dist/configuration/config.svelte.js

@@ -1,4 +1,5 @@
 import { merge } from '../utils/merge';
+import { Palette } from '../utils/color';
 /**
  * Global, reactive styling configuration. Chrome reads it as CSS custom
  * properties ({@link configToCssVars}); plots read it as plain values.
@@ -16,9 +17,17 @@ const text = (over) => ({
     ...over
 });
 export const DEFAULT_CONFIG = {
+    // ── General look ────────────────────────────────────────────────────────────
     font: 'inherit',
     color: 'currentColor',
     background: 'transparent',
+    title: text({ size: '1.5rem', weight: 500, leading: '1.2' }),
+    subtitle: text({
+        size: '1rem',
+        weight: 400,
+        color: 'color-mix(in srgb, currentColor 85%, transparent)'
+    }),
+    caption: text({ size: '0.75rem', color: 'color-mix(in srgb, currentColor 75%, transparent)' }),
     spacing: {
         headerPadding: '0.5rem 0',
         legendPadding: '0.5rem 0',
@@ -48,13 +57,32 @@ export const DEFAULT_CONFIG = {
         ],
         rowGap: '1rem'
     },
-    title: text({ size: '1.5rem', weight: 500, leading: '1.2' }),
-    subtitle: text({
-        size: '1rem',
-        weight: 400,
-        color: 'color-mix(in srgb, currentColor 85%, transparent)'
-    }),
-    caption: text({ size: '0.75rem', color: 'color-mix(in srgb, currentColor 75%, transparent)' }),
+    // Tableau 10 - qualitative, with a muted blue first, and distinct enough to tell ten series apart.
+    palette: Palette.resolve('tableau10'),
+    symbols: ['circle', 'square', 'triangle', 'diamond', 'star', 'cross'],
+    // A light tint of the palette's first color up to the color itself.
+    continuous: { min: '#eaf0f6', max: '#4e79a7', labelColor: '#111827', opacityRange: [0.2, 1] },
+    margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
+    frameClip: { tolerance: 2 },
+    // ── Features ────────────────────────────────────────────────────────────────
+    axis: {
+        color: 'currentColor',
+        fontSize: 14,
+        labelFontSize: 14,
+        titleFontSize: 14,
+        xTickSize: 5,
+        yTickSize: 5,
+        xTickPadding: 10,
+        yTickPadding: 10,
+        grid: false,
+        locale: 'es-AR',
+        compactDisplay: 'short',
+        edgeTicks: {
+            x: { enabled: true, collision: 'drop-nice' },
+            y: { enabled: false, collision: 'drop-nice' }
+        },
+        autoRotate: true
+    },
     legend: {
         font: 'inherit',
         size: '0.875rem',
@@ -79,6 +107,10 @@ export const DEFAULT_CONFIG = {
             height: 20,
             barHeight: 12,
             barRadius: 2,
+            opacity: {
+                color: '#000',
+                checker: { size: 4, light: '#fff', dark: '#d4d4d8' }
+            },
             // A slim vertical bar handle, taller than the 12px gradient track.
             handle: {
                 width: '6px',
@@ -105,19 +137,6 @@ export const DEFAULT_CONFIG = {
             }
         }
     },
-    axis: {
-        color: 'currentColor',
-        fontSize: 14,
-        labelFontSize: 14,
-        titleFontSize: 14,
-        xTickSize: 5,
-        yTickSize: 5,
-        xTickPadding: 10,
-        yTickPadding: 10,
-        grid: false,
-        locale: 'es-AR',
-        compactDisplay: 'short'
-    },
     tooltip: {
         background: '#111827',
         color: '#ffffff',
@@ -126,41 +145,31 @@ export const DEFAULT_CONFIG = {
         radius: '0.375rem',
         border: 'none'
     },
-    margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
-    frameClip: { tolerance: 5 },
-    // ColorBrewer Dark2 - qualitative, harmonious, and dark enough to read on white.
-    palette: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666'],
-    symbols: ['circle', 'square', 'triangle', 'diamond', 'star', 'cross'],
-    continuous: { min: '#f7fcfd', max: '#1b9e77', labelColor: '#111827', opacityRange: [0.2, 1] },
-    line: {
-        strokeWidth: 3,
-        dotRadius: 4,
-        gap: {
-            stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
-            dots: {}
-        }
+    hover: {
+        rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
+        dot: { dotRadius: 5, dotFill: 'currentColor' },
+        font: { fill: 'currentColor', fontSize: 12, dy: -18 },
+        area: { fill: '#94a3b8', fillOpacity: 0.4 }
     },
-    text: {
-        declutter: {
-            elbowGap: 10,
-            laneStep: 7,
-            labelGap: 6,
-            connector: { stroke: '#94a3b8', strokeWidth: 0.5 }
+    facet: {
+        indicator: {
+            background: '#111827',
+            color: '#ffffff',
+            fontSize: '0.8125rem',
+            padding: '0.125rem 0.5rem',
+            radius: '999px'
+        },
+        navButton: {
+            background: '#111827',
+            color: '#ffffff',
+            size: '2rem',
+            fontSize: '1.1rem',
+            disabledOpacity: 0.3
         }
     },
-    bar: {
-        gap: { fillOpacity: 0.5 },
-        seriesPadding: 0.2,
-        paddingInner: 0.15,
-        paddingOuter: 0.15
-    },
-    pyramid: { gap: { fillOpacity: 0.5 } },
-    area: { fillOpacity: 0.6 },
-    histogram: { inset: 1, fillOpacity: 1 },
-    scatter: { dotRadius: 5 },
     timeline: {
         axisColor: 'currentColor',
-        activeColor: '#1b9e77',
+        activeColor: '#4e79a7',
         thickness: 60,
         gap: '12px',
         rule: {
@@ -185,22 +194,22 @@ export const DEFAULT_CONFIG = {
             valueWidth: '3rem',
             button: {
                 size: '2rem',
-                background: '#1b9e77',
+                background: '#4e79a7',
                 color: '#ffffff',
-                hoverBackground: '#0c4937',
+                hoverBackground: '#24384d',
                 radius: '999px'
             },
             track: {
                 height: '3px',
                 color: 'color-mix(in srgb, currentColor 25%, transparent)',
-                fillColor: '#1b9e77',
+                fillColor: '#4e79a7',
                 radius: '999px'
             },
-            thumb: { size: '14px', color: '#1b9e77' },
+            thumb: { size: '14px', color: '#4e79a7' },
             toggle: {
                 background: 'transparent',
                 color: 'currentColor',
-                activeBackground: '#1b9e77',
+                activeBackground: '#4e79a7',
                 activeColor: '#ffffff',
                 radius: '0.375rem',
                 fontSize: '0.75rem',
@@ -208,28 +217,96 @@ export const DEFAULT_CONFIG = {
             }
         }
     },
-    hover: {
-        rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
-        dot: { dotRadius: 5, dotFill: 'currentColor' },
-        font: { fill: 'currentColor', fontSize: 12, dy: -18 },
-        area: { fill: '#94a3b8', fillOpacity: 0.25 }
+    connector: {
+        sign: { positive: '#59a14f', negative: '#e15759', zero: '#9ca3af' },
+        lengthScheme: ['#d1d5db', '#374151'],
+        differenceScheme: ['#e15759', '#e5e7eb', '#59a14f'],
+        arrow: { width: 2, headLength: 8, headAngle: 60 },
+        capLength: 8,
+        outsideOpacity: 0.4,
+        labelFontSize: 11,
+        labelGap: 4
     },
-    facet: {
-        indicator: {
-            background: '#111827',
-            color: '#ffffff',
-            fontSize: '0.8125rem',
-            padding: '0.125rem 0.5rem',
-            radius: '999px'
-        },
-        navButton: {
-            background: '#111827',
-            color: '#ffffff',
-            size: '2rem',
-            fontSize: '1.1rem',
-            disabledOpacity: 0.3
+    // Beside a vertical delta (taken on x), above a horizontal one (on y).
+    delta: {
+        text: {
+            x: { dx: 12, dy: 0, lineAnchor: 'middle', textAnchor: 'start' },
+            y: { dx: 0, dy: -10, lineAnchor: 'middle', textAnchor: 'middle' }
+        }
+    },
+    text: {
+        declutter: {
+            elbowGap: 10,
+            laneStep: 7,
+            labelGap: 6,
+            connector: { stroke: '#94a3b8', strokeWidth: 0.5 }
         }
-    }
+    },
+    // ── Plot kinds ──────────────────────────────────────────────────────────────
+    area: { fillOpacity: 0.6 },
+    bar: {
+        gap: { fillOpacity: 0.5 },
+        seriesPadding: 0.2,
+        paddingInner: 0.15,
+        paddingOuter: 0.15
+    },
+    box: { fillOpacity: 0.9, paddingInner: 0.4, paddingOuter: 0.2 },
+    bullet: {
+        barThickness: 10,
+        rangeWidth: 28,
+        rangeColors: ['#9ca3af', '#d1d5db', '#eceff3'],
+        targetLength: 22,
+        targetWidth: 3,
+        paddingInner: 0.4,
+        paddingOuter: 0.3
+    },
+    cleveland: {
+        dotRadius: 5,
+        stemWidth: 5,
+        connectorColor: '#9ca3af',
+        labelGap: 10,
+        paddingInner: 0.5,
+        paddingOuter: 0.5
+    },
+    density: { fillOpacity: 0.6, strokeWidth: 2 },
+    dumbbell: {
+        dotRadius: 6,
+        stemWidth: 'dots',
+        connectorColor: '#9ca3af',
+        labelGap: 10,
+        paddingInner: 0.5,
+        paddingOuter: 0.5
+    },
+    forest: {
+        dotRadius: 5,
+        stemWidth: 2,
+        caps: true,
+        labelGap: 10,
+        paddingInner: 0.5,
+        paddingOuter: 0.5
+    },
+    histogram: { inset: 1, fillOpacity: 1 },
+    line: {
+        curve: 'auto',
+        strokeWidth: 3,
+        dotRadius: 4,
+        gap: {
+            stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
+            dots: {}
+        }
+    },
+    lollipop: {
+        dotRadius: 6,
+        stemWidth: 2,
+        labelGap: 10,
+        paddingInner: 0.5,
+        paddingOuter: 0.5
+    },
+    pyramid: { gap: { fillOpacity: 0.5 } },
+    scatter: { dotRadius: 5 },
+    slope: { strokeWidth: 2, dotRadius: 5, padding: 0 },
+    sparkline: { strokeWidth: 1.5, dotRadius: 3 },
+    violin: { fillOpacity: 0.6, paddingInner: 0.2, paddingOuter: 0.2, boxWidth: 8 }
 };
 // ── Reactive store ──────────────────────────────────────────────────────────
 let current = $state(structuredClone(DEFAULT_CONFIG));
@@ -237,9 +314,9 @@ let current = $state(structuredClone(DEFAULT_CONFIG));
 export function getConfiguration() {
     return current;
 }
-/** Deep-merge a partial override into the global configuration. Reactive. */
+/** Deep-merge a partial override into the global configuration - a `palette` may be a scheme name. Reactive. */
 export function setConfiguration(patch) {
-    current = merge(current, patch);
+    current = merge(current, Palette.resolveIn(patch));
     return current;
 }
 /** Restore the shipped defaults. */
@@ -261,6 +338,9 @@ export function configToCssVars(c) {
         '--dct-font': c.font,
         '--dct-fg': c.color,
         '--dct-bg': c.background,
+        ...t('title', c.title),
+        ...t('subtitle', c.subtitle),
+        ...t('caption', c.caption),
         '--dct-header-pad': c.spacing.headerPadding,
         '--dct-legend-pad': c.spacing.legendPadding,
         '--dct-caption-pad': c.spacing.captionPadding,
@@ -270,9 +350,10 @@ export function configToCssVars(c) {
         '--dct-divider-style': c.divider.style,
         '--dct-divider-margin': c.divider.margin,
         '--dct-row-gap': c.chrome.rowGap,
-        ...t('title', c.title),
-        ...t('subtitle', c.subtitle),
-        ...t('caption', c.caption),
+        '--dct-heat-min': c.continuous.min,
+        '--dct-heat-max': c.continuous.max,
+        '--dct-heat-text': c.continuous.labelColor,
+        '--dct-axis-color': c.axis.color,
         '--dct-legend-font': c.legend.font,
         '--dct-legend-size': c.legend.size,
         '--dct-legend-weight': String(c.legend.weight),
@@ -300,13 +381,22 @@ export function configToCssVars(c) {
         '--dct-continuous-label-size': c.legend.continuous.label.size,
         '--dct-continuous-label-weight': String(c.legend.continuous.label.weight),
         '--dct-continuous-label-overlap-rotate': c.legend.continuous.label.overlap.rotate,
-        '--dct-axis-color': c.axis.color,
         '--dct-tooltip-bg': c.tooltip.background,
         '--dct-tooltip-color': c.tooltip.color,
         '--dct-tooltip-size': c.tooltip.fontSize,
         '--dct-tooltip-pad': c.tooltip.padding,
         '--dct-tooltip-radius': c.tooltip.radius,
         '--dct-tooltip-border': c.tooltip.border,
+        '--dct-facet-indicator-bg': c.facet.indicator.background,
+        '--dct-facet-indicator-color': c.facet.indicator.color,
+        '--dct-facet-indicator-size': c.facet.indicator.fontSize,
+        '--dct-facet-indicator-pad': c.facet.indicator.padding,
+        '--dct-facet-indicator-radius': c.facet.indicator.radius,
+        '--dct-facet-nav-bg': c.facet.navButton.background,
+        '--dct-facet-nav-color': c.facet.navButton.color,
+        '--dct-facet-nav-btn-size': c.facet.navButton.size,
+        '--dct-facet-nav-font-size': c.facet.navButton.fontSize,
+        '--dct-facet-nav-disabled-opacity': String(c.facet.navButton.disabledOpacity),
         '--dct-timeline-axis': c.timeline.axisColor,
         '--dct-timeline-active': c.timeline.activeColor,
         '--dct-timeline-gap': c.timeline.gap,
@@ -335,20 +425,7 @@ export function configToCssVars(c) {
         '--dct-player-toggle-active-color': c.timeline.player.toggle.activeColor,
         '--dct-player-toggle-radius': c.timeline.player.toggle.radius,
         '--dct-player-toggle-size': c.timeline.player.toggle.fontSize,
-        '--dct-player-toggle-pad': c.timeline.player.toggle.padding,
-        '--dct-heat-min': c.continuous.min,
-        '--dct-heat-max': c.continuous.max,
-        '--dct-heat-text': c.continuous.labelColor,
-        '--dct-facet-indicator-bg': c.facet.indicator.background,
-        '--dct-facet-indicator-color': c.facet.indicator.color,
-        '--dct-facet-indicator-size': c.facet.indicator.fontSize,
-        '--dct-facet-indicator-pad': c.facet.indicator.padding,
-        '--dct-facet-indicator-radius': c.facet.indicator.radius,
-        '--dct-facet-nav-bg': c.facet.navButton.background,
-        '--dct-facet-nav-color': c.facet.navButton.color,
-        '--dct-facet-nav-btn-size': c.facet.navButton.size,
-        '--dct-facet-nav-font-size': c.facet.navButton.fontSize,
-        '--dct-facet-nav-disabled-opacity': String(c.facet.navButton.disabledOpacity)
+        '--dct-player-toggle-pad': c.timeline.player.toggle.padding
     };
 }
 /** Serialize a CSS-vars record into a `style` attribute string. */