@fundar/data-chart-telling 1.1.0 → 1.3.0

package/dist/layout/coordinates/camera.svelte.js

@@ -17,6 +17,11 @@ function tweenState(args) {
     let from;
     let to;
     let raf;
+    function stop() {
+        if (raf != null)
+            cancelAnimationFrame(raf);
+        raf = undefined;
+    }
     function setCurrent(value) {
         current = value;
         lastValue = value;
@@ -37,16 +42,16 @@ function tweenState(args) {
             from = atStart ? target : (lastValue ?? target);
             to = target;
         }
-        if (raf != null) {
-            cancelAnimationFrame(raf);
-            raf = undefined;
-        }
         if (progress != null) {
+            stop();
             setCurrent(args.lerp(from, to, Interpolation.buildEasing(transition?.easing)(clamp01(progress)), direction));
             return;
         }
+        // A rerun with the same target (the caller rebuilds `transition` on every
+        // render) leaves a tween in flight alone.
         if (!changed)
             return;
+        stop();
         const duration = Math.max(0, transition?.duration ?? 750);
         const easing = Interpolation.buildEasing(transition?.easing);
         const startFrom = from;
@@ -58,11 +63,9 @@ function tweenState(args) {
             raf = t < 1 ? requestAnimationFrame(tick) : undefined;
         }
         raf = requestAnimationFrame(tick);
-        return () => {
-            if (raf != null)
-                cancelAnimationFrame(raf);
-        };
     });
+    // Only leaving the page stops a tween the effect above started.
+    $effect(() => stop);
     return {
         get current() {
             return current;

package/dist/layout/coordinates/projections/argentina.js

@@ -1,7 +1,7 @@
 import { geoAzimuthalEquidistant } from 'd3-geo';
 import { pointsToFitFeature } from './fit';
 // Representative extremity points - not real border geometry (which stays
-// out of `src/lib`, see stories/plots/geo/data.ts), just enough for
+// out of `src/lib`, see stories/plots/map/geo/data.ts), just enough for
 // `fitSize` to frame Argentina's full territorial claim sensibly. These are
 // plain real-world coordinates, not derived from any particular dataset, so
 // they work the same way regardless of which Argentina GeoJSON actually

package/dist/layout/coordinates/projections/fit.d.ts

@@ -2,7 +2,7 @@
  * Wraps a handful of representative `[lon, lat]` points as a `MultiPoint`
  * Feature, just so `projection.fitExtent`/`fitSize` has something to
  * measure. Custom projections built on these live in `src/lib` (see
- * `stories/plots/geo/data.ts` for why real border geometry doesn't), so a
+ * `stories/plots/map/geo/data.ts` for why real border geometry doesn't), so a
  * few hand-picked extremity points stand in for a region's true extent.
  */
 export declare function pointsToFitFeature(points: [number, number][]): GeoJSON.Feature;

package/dist/layout/coordinates/projections/fit.js

@@ -2,7 +2,7 @@
  * Wraps a handful of representative `[lon, lat]` points as a `MultiPoint`
  * Feature, just so `projection.fitExtent`/`fitSize` has something to
  * measure. Custom projections built on these live in `src/lib` (see
- * `stories/plots/geo/data.ts` for why real border geometry doesn't), so a
+ * `stories/plots/map/geo/data.ts` for why real border geometry doesn't), so a
  * few hand-picked extremity points stand in for a region's true extent.
  */
 export function pointsToFitFeature(points) {

package/dist/layout/coordinates/zoom.svelte.d.ts

@@ -6,15 +6,14 @@ export type GeoZoomTransform = {
 };
 /**
  * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
- * resulting transform as reactive Svelte state, applied by the caller as an
- * SVG `<g transform="translate(x,y) scale(k)">` wrapper.
+ * resulting transform as reactive Svelte state, which the caller applies to
+ * the plot's projection (see `ProjectionZoom`).
  *
  * `panEnabled`/`zoomEnabled` gate drag-translate and wheel/pinch-scale
  * independently, as separate `.filter()`s on the same underlying instance.
  *
- * Limitations: hover/tooltip hit-testing doesn't compensate for an active
- * transform. Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled`
- * (d3-zoom can't distinguish a pinch from a one-finger drag until underway).
+ * Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled` (d3-zoom
+ * can't distinguish a pinch from a one-finger drag until underway).
  */
 export declare function createGeoZoom(args: {
     panEnabled: () => boolean;

package/dist/layout/coordinates/zoom.svelte.js

@@ -2,15 +2,14 @@ import { select } from 'd3-selection';
 import { zoom as d3zoom, zoomIdentity } from 'd3-zoom';
 /**
  * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
- * resulting transform as reactive Svelte state, applied by the caller as an
- * SVG `<g transform="translate(x,y) scale(k)">` wrapper.
+ * resulting transform as reactive Svelte state, which the caller applies to
+ * the plot's projection (see `ProjectionZoom`).
  *
  * `panEnabled`/`zoomEnabled` gate drag-translate and wheel/pinch-scale
  * independently, as separate `.filter()`s on the same underlying instance.
  *
- * Limitations: hover/tooltip hit-testing doesn't compensate for an active
- * transform. Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled`
- * (d3-zoom can't distinguish a pinch from a one-finger drag until underway).
+ * Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled` (d3-zoom
+ * can't distinguish a pinch from a one-finger drag until underway).
  */
 export function createGeoZoom(args) {
     let transform = $state({ x: 0, y: 0, k: 1 });

package/dist/layout/facet/FacetLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
 	import { isMobile } from '../../stores/device';
-	import { resolveAccessor } from '../../plots/utils/accessors';
+	import { resolveAccessor } from '../../utils/accessors';
 	import FacetIndicator from './FacetIndicator.svelte';
 	import Grid from '../grid/Grid.svelte';
 	import GridCell from '../grid/GridCell.svelte';

package/dist/layout/facet/config.js

@@ -1,4 +1,4 @@
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 /** Whether a facet config wraps one facet per `by` value, rather than laying out a `rows`/`cols` grid. */
 export function isFacetWrap(facet) {
     return facet.by !== undefined;

package/dist/layout/facet/scope.d.ts

@@ -0,0 +1,40 @@
+import type { FacetTarget } from '../../types/layout/facet';
+import type { SlicePlace } from '../../types/layout/plot';
+import type { FacetPanel } from '../../types/phases';
+/** Where a facet panel sits, as a segment's or a marker's `facet` names it. */
+type PanelPlace = SlicePlace['facet'];
+/**
+ * Limiting a plot's segments and markers to some facet panels: which panels a `facet` names, and each
+ * panel's share of a list of them. A plot with no facet has no panel, so what names one is left out.
+ */
+export declare class FacetScope {
+    /** Where a panel the "facet" phase laid out sits. */
+    static placeOf(panel: FacetPanel): NonNullable<PanelPlace>;
+    /**
+     * Whether something limited to `target` applies at the facet panel `place`. Without a target it
+     * applies everywhere; with one, only to the panels it names, and to no plot that has no facet.
+     */
+    static targets(target: FacetTarget | undefined, place: PanelPlace): boolean;
+    /**
+     * `items` as the facet panel `place` sees them: those that name no facet, or name this one, with
+     * their `facet` taken off. The same list comes back when none names a facet.
+     */
+    static scope<T extends object>(items: T[] | undefined, place: PanelPlace): T[] | undefined;
+    /** A `segments` config as the facet panel `place` sees it: each series' segments, {@link FacetScope.scope}d. */
+    static scopeSegments<T extends object>(segments: Record<string, T[]> | undefined, place: PanelPlace): Record<string, T[]> | undefined;
+    /**
+     * `segments` for a plot whose series are split by facet panel: each segment that names a facet moves
+     * under the key of its series in every panel it names - the id of that series' part there, as
+     * {@link FacetPanels.buildSeriesId} writes it, or `default` for the panel's series without their own -
+     * and loses its `facet`. Segments that name none stay where they were. The same config comes back
+     * when none names a facet.
+     */
+    static distributeSegments<T extends object>(segments: Record<string, T[]> | undefined, panels: FacetPanel[]): Record<string, T[]> | undefined;
+    /**
+     * `markers` for a plot split by facet panel: each marker that names a facet becomes one copy per
+     * panel it names, tagged with that panel ({@link PANEL_KEY}) and without its `facet`, in the marker's
+     * own place in the list. Markers that name none stay as they are, for every panel.
+     */
+    static distributeMarkers<T extends object>(markers: T[] | undefined, panels: FacetPanel[]): T[] | undefined;
+}
+export {};

package/dist/layout/facet/scope.js

@@ -0,0 +1,104 @@
+import { FacetPanels, PANEL_KEY } from '../../phases/facet/FacetPanels';
+/**
+ * Limiting a plot's segments and markers to some facet panels: which panels a `facet` names, and each
+ * panel's share of a list of them. A plot with no facet has no panel, so what names one is left out.
+ */
+export class FacetScope {
+    /** Where a panel the "facet" phase laid out sits. */
+    static placeOf(panel) {
+        return {
+            facetValue: panel.label,
+            ...(panel.row !== undefined ? { row: panel.row } : {}),
+            ...(panel.col !== undefined ? { col: panel.col } : {})
+        };
+    }
+    /**
+     * Whether something limited to `target` applies at the facet panel `place`. Without a target it
+     * applies everywhere; with one, only to the panels it names, and to no plot that has no facet.
+     */
+    static targets(target, place) {
+        if (target === undefined)
+            return true;
+        if (!place)
+            return false;
+        const names = (value) => (Array.isArray(value) ? value : [value]).map(String);
+        if (typeof target === 'object' && !Array.isArray(target)) {
+            const matches = (wanted, actual) => wanted === undefined || (actual !== undefined && names(wanted).includes(actual));
+            return matches(target.row, place.row) && matches(target.col, place.col);
+        }
+        return names(target).includes(place.facetValue);
+    }
+    /**
+     * `items` as the facet panel `place` sees them: those that name no facet, or name this one, with
+     * their `facet` taken off. The same list comes back when none names a facet.
+     */
+    static scope(items, place) {
+        const facetOf = (item) => item.facet;
+        if (!items || items.every((item) => facetOf(item) === undefined))
+            return items;
+        return items
+            .filter((item) => FacetScope.targets(facetOf(item), place))
+            .map((item) => {
+            const rest = { ...item };
+            delete rest.facet;
+            return rest;
+        });
+    }
+    /** A `segments` config as the facet panel `place` sees it: each series' segments, {@link FacetScope.scope}d. */
+    static scopeSegments(segments, place) {
+        if (!segments)
+            return segments;
+        const scoped = Object.entries(segments).map(([series, list]) => [series, FacetScope.scope(list, place) ?? list]);
+        if (scoped.every(([series, list]) => list === segments[series]))
+            return segments;
+        return Object.fromEntries(scoped);
+    }
+    /**
+     * `segments` for a plot whose series are split by facet panel: each segment that names a facet moves
+     * under the key of its series in every panel it names - the id of that series' part there, as
+     * {@link FacetPanels.buildSeriesId} writes it, or `default` for the panel's series without their own -
+     * and loses its `facet`. Segments that name none stay where they were. The same config comes back
+     * when none names a facet.
+     */
+    static distributeSegments(segments, panels) {
+        if (!segments)
+            return segments;
+        const named = Object.values(segments).some((list) => list.some((item) => item.facet !== undefined));
+        if (!named)
+            return segments;
+        const distributed = {};
+        for (const [series, list] of Object.entries(segments)) {
+            for (const item of list) {
+                const { facet, ...rest } = item;
+                if (facet === undefined) {
+                    (distributed[series] ??= []).push(item);
+                    continue;
+                }
+                for (const panel of panels) {
+                    if (!FacetScope.targets(facet, FacetScope.placeOf(panel)))
+                        continue;
+                    (distributed[FacetPanels.buildSeriesId(panel.key, series)] ??= []).push(rest);
+                }
+            }
+        }
+        return distributed;
+    }
+    /**
+     * `markers` for a plot split by facet panel: each marker that names a facet becomes one copy per
+     * panel it names, tagged with that panel ({@link PANEL_KEY}) and without its `facet`, in the marker's
+     * own place in the list. Markers that name none stay as they are, for every panel.
+     */
+    static distributeMarkers(markers, panels) {
+        if (!markers || markers.every((marker) => marker.facet === undefined)) {
+            return markers;
+        }
+        return markers.flatMap((marker) => {
+            const { facet, ...rest } = marker;
+            if (facet === undefined)
+                return [marker];
+            return panels
+                .filter((panel) => FacetScope.targets(facet, FacetScope.placeOf(panel)))
+                .map((panel) => ({ ...rest, [PANEL_KEY]: panel.key }));
+        });
+    }
+}

package/dist/layout/figure/Figure.svelte

@@ -90,6 +90,8 @@
 	// svelte-ignore state_referenced_locally
 	const ownLegend = (legend !== undefined && legend !== false) || !outer;
 	const legendState = ownLegend ? LegendState.provide() : outer!;
+	// svelte-ignore state_referenced_locally
+	if (outer && legend === false) LegendState.silence();
 
 	/** What the figure adds to its automatic legend, when `legend` is `{ items, sections }`. */
 	const extension = $derived(

package/dist/layout/geometry/GeometryLayout.svelte

@@ -23,6 +23,7 @@
 	import RasterMarker from '../../markers/raster/RasterMarker.svelte';
 	import TickMarker from '../../markers/tick/TickMarker.svelte';
 	import TrailMarker from '../../markers/trail/TrailMarker.svelte';
+	import ViolinMarker from '../../markers/violin/ViolinMarker.svelte';
 	import WaffleMarker from '../../markers/waffle/WaffleMarker.svelte';
 	import DotMarker from '../../markers/dot/DotMarker.svelte';
 	import TextMarker from '../../markers/text/TextMarker.svelte';
@@ -39,6 +40,7 @@
 	import ContourClipMarker from '../../markers/contour/ContourClipMarker.svelte';
 	import InsetMarker from '../../markers/inset/InsetMarker.svelte';
 	import FrameClip from './FrameClip.svelte';
+	import MarkerOffset from './MarkerOffset.svelte';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { usePlot } from '../plot/usePlot';
 	import { PlotMargins } from '../margins/PlotMargins.svelte';
@@ -48,7 +50,6 @@
 	import type { PlotHover } from '../hover/PlotHover.svelte';
 	import type { ScopedMarkerGroup } from '../../types/layout/geometry';
 	import type { GeoFeature } from '../../types/plots/data/geo';
-	import type { ChannelScalesConfig } from '../../types/layout/scales';
 	import { MarkerGrouping } from '../../phases/statistics/MarkerGrouping';
 	import { FrameClipping } from './FrameClipping';
 
@@ -75,7 +76,6 @@
 		markers = [],
 		seriesData = [],
 		scopedGroups = [],
-		channelScales = undefined,
 		ctrl,
 		numericMargins,
 		data = [],
@@ -91,8 +91,6 @@
 		seriesData?: Series<TSeries>[];
 		/** One entry per series that can own a `series`-scoped marker. Same `TSeries` as `seriesData`. */
 		scopedGroups?: ScopedMarkerGroup<TSeries>[];
-		/** This plot kind's own `color`/`grouping` channel config - the fallback a marker's own `scales` inherits when it sets none of its own. */
-		channelScales?: ChannelScalesConfig;
 		/** `BasePlotLayout`'s own hover controller. */
 		ctrl: PlotHover<TData>;
 		/** The plot's own resolved margins - places the content box an `inset` marker needs. */
@@ -122,7 +120,8 @@
 		const scope = scopedSeriesOf(marker);
 		if (scope) return `${scope}-${marker.type}-${i}`;
 		if (marker.type === 'rule') {
-			const v = typeof marker.value === 'function' ? i : marker.value;
+			// A rule over rows (`data`) has no value of its own to tell it from another one.
+			const v = typeof marker.value === 'function' || marker.data ? i : marker.value;
 			return `rule-${marker.axis}-${v}`;
 		}
 		if (marker.type === 'bar') return `bar-${marker.role}-${i}`;
@@ -130,7 +129,7 @@
 	}
 </script>
 
-{#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
+{#snippet drawMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
 	{#if marker.type === 'bar'}
 		<BarMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'line'}
@@ -173,12 +172,12 @@
 		<TickMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'trail'}
 		<TrailMarker marker={{ ...marker, data: marker.data ?? rows }} />
+	{:else if marker.type === 'violin'}
+		<ViolinMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'waffle'}
 		<WaffleMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'dot'}
-		<DotMarker
-			marker={{ ...marker, data: marker.data ?? rows, scales: marker.scales ?? channelScales }}
-		/>
+		<DotMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'text'}
 		<TextMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'rule'}
@@ -236,6 +235,12 @@
 	{/if}
 {/snippet}
 
+{#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
+	<MarkerOffset {marker}>
+		{@render drawMarker(marker, rows)}
+	</MarkerOffset>
+{/snippet}
+
 {#snippet renderScoped(marker: MarkerConfig, group: ScopedMarkerGroup<TSeries>)}
 	{#if marker.type === 'hover'}
 		{@const seriesPoints = ctrl.points.filter((p) => p.series === group.name)}

package/dist/layout/geometry/GeometryLayout.svelte.d.ts

@@ -4,7 +4,6 @@ import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip'
 import type { PlotHover } from '../hover/PlotHover.svelte';
 import type { ScopedMarkerGroup } from '../../types/layout/geometry';
 import type { GeoFeature } from '../../types/plots/data/geo';
-import type { ChannelScalesConfig } from '../../types/layout/scales';
 declare function $$render<TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData>(): {
     props: {
         /** The plot's own outer width/height - sizes the content box an `inset` marker needs. */
@@ -15,8 +14,6 @@ declare function $$render<TData extends Record<string, unknown>, TSeries extends
         seriesData?: Series<TSeries>[];
         /** One entry per series that can own a `series`-scoped marker. Same `TSeries` as `seriesData`. */
         scopedGroups?: ScopedMarkerGroup<TSeries>[];
-        /** This plot kind's own `color`/`grouping` channel config - the fallback a marker's own `scales` inherits when it sets none of its own. */
-        channelScales?: ChannelScalesConfig;
         /** `BasePlotLayout`'s own hover controller. */
         ctrl: PlotHover<TData>;
         /** The plot's own resolved margins - places the content box an `inset` marker needs. */

package/dist/layout/geometry/MarkerOffset.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { RowOffset } from '../../markers/utils/RowOffset';
+	import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+
+	/**
+	 * Moves what it draws by the marker's `dx` and `dy` (the numbers; a function of
+	 * the row is each marker's own), as a translate of the whole marker - so any
+	 * marker kind can be offset, on a map too, where svelteplot ignores a mark's
+	 * own `dx`/`dy`. A `text` marker places its own labels, since its lanes and
+	 * flips depend on the offset.
+	 */
+	let {
+		marker,
+		children
+	}: {
+		marker: { type: string; dx?: RowOffsetConfig; dy?: RowOffsetConfig };
+		children: Snippet;
+	} = $props();
+
+	const offset = $derived(marker.type === 'text' ? { dx: 0, dy: 0 } : RowOffset.whole(marker));
+</script>
+
+{#if offset.dx !== 0 || offset.dy !== 0}
+	<g transform="translate({offset.dx},{offset.dy})">{@render children()}</g>
+{:else}
+	{@render children()}
+{/if}

package/dist/layout/geometry/MarkerOffset.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+type $$ComponentProps = {
+    marker: {
+        type: string;
+        dx?: RowOffsetConfig;
+        dy?: RowOffsetConfig;
+    };
+    children: Snippet;
+};
+declare const MarkerOffset: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkerOffset = ReturnType<typeof MarkerOffset>;
+export default MarkerOffset;

package/dist/layout/grid/GridCell.svelte

@@ -96,14 +96,12 @@
 		</div>
 	{/if}
 	{#if ready && layout && layout.box.width > 0 && layout.box.height > 0}
-		{#key JSON.stringify(layout.box.margins ?? null)}
-			{@render children({
-				width: layout.box.width,
-				height: layout.box.height,
-				margins: layout.box.margins,
-				edges: layout.edges
-			})}
-		{/key}
+		{@render children({
+			width: layout.box.width,
+			height: layout.box.height,
+			margins: layout.box.margins,
+			edges: layout.edges
+		})}
 	{/if}
 </div>
 

package/dist/layout/legend/ContinuousSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import type { ContinuousLegendSection } from '../../types/layout/legend';
-	import { makeColorScale, resolveColorScale } from '../../utils/color';
+	import { ColorRamp } from '../../utils/color';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { AxisNumberFormat } from './AxisNumberFormat';
 	import { LegendState } from './LegendState.svelte';
@@ -10,6 +10,7 @@
 
 	const cfg = $derived(getConfiguration());
 	const gradientId = `dct-grad-${Math.random().toString(36).slice(2)}`;
+	const checkerId = `dct-checker-${Math.random().toString(36).slice(2)}`;
 	const barWidth = $derived(section.width ?? 170);
 
 	const fmt = $derived(section.format ?? AxisNumberFormat.of([section.min, section.max], cfg));
@@ -31,6 +32,7 @@
 	const svgHeight = $derived(cfg.legend.continuous.height);
 	const barHeight = $derived(cfg.legend.continuous.barHeight);
 	const barRadius = $derived(cfg.legend.continuous.barRadius);
+	const opacityLook = $derived(cfg.legend.continuous.opacity);
 
 	// Fill/opacity for the excluded-margin rects.
 	const excludedStyle = $derived.by((): { fill: string; opacity: number } => {
@@ -79,16 +81,18 @@
 	);
 	const colorScale = $derived(
 		section.scheme !== undefined
-			? resolveColorScale({ scheme: section.scheme, pivot: section.pivot }, colorDomain, [
+			? ColorRamp.resolve({ scheme: section.scheme, pivot: section.pivot }, colorDomain, [
 					cfg.continuous.min,
 					cfg.continuous.max
 				])
-			: makeColorScale(
-					colorDomain[0],
-					colorDomain[1],
-					section.colorMin ?? cfg.continuous.min,
-					section.colorMax ?? cfg.continuous.max
-				)
+			: cfg.continuous.scheme && section.colorMin === undefined && section.colorMax === undefined
+				? ColorRamp.continuous(cfg, undefined, colorDomain)
+				: ColorRamp.between(
+						colorDomain[0],
+						colorDomain[1],
+						section.colorMin ?? cfg.continuous.min,
+						section.colorMax ?? cfg.continuous.max
+					)
 	);
 
 	const stops = $derived(
@@ -98,7 +102,7 @@
 			return section.opacity
 				? {
 						offset: t * 100,
-						color: section.colorMin ?? 'currentColor',
+						color: section.colorMin ?? opacityLook.color,
 						opacity: section.opacity[0] + t * (section.opacity[1] - section.opacity[0])
 					}
 				: { offset: t * 100, color: colorScale(v), opacity: 1 };
@@ -203,7 +207,38 @@
 					<stop offset="{s.offset}%" stop-color={s.color} stop-opacity={s.opacity} />
 				{/each}
 			</linearGradient>
+			{#if section.opacity}
+				<pattern
+					id={checkerId}
+					width={opacityLook.checker.size * 2}
+					height={opacityLook.checker.size * 2}
+					patternUnits="userSpaceOnUse"
+				>
+					<rect width="100%" height="100%" fill={opacityLook.checker.light} />
+					<rect
+						width={opacityLook.checker.size}
+						height={opacityLook.checker.size}
+						fill={opacityLook.checker.dark}
+					/>
+					<rect
+						x={opacityLook.checker.size}
+						y={opacityLook.checker.size}
+						width={opacityLook.checker.size}
+						height={opacityLook.checker.size}
+						fill={opacityLook.checker.dark}
+					/>
+				</pattern>
+			{/if}
 		</defs>
+		{#if section.opacity}
+			<rect
+				x={handleBleed}
+				width={trackWidth}
+				height={barHeight}
+				rx={barRadius}
+				fill="url(#{checkerId})"
+			/>
+		{/if}
 		<rect
 			x={handleBleed}
 			width={trackWidth}

package/dist/layout/legend/DiscreteBadgeItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { contrastTextColor } from '../../utils/color';
+	import { CssColor } from '../../utils/color';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { LegendText } from './LegendText';
 	import DiscreteSymbolIcon from './DiscreteSymbolIcon.svelte';
@@ -24,7 +24,7 @@
 		omitMode?: boolean;
 	} = $props();
 	const cfg = $derived(getConfiguration());
-	const textColor = $derived(contrastTextColor(color));
+	const textColor = $derived(CssColor.contrastText(color));
 </script>
 
 <span class="dct-discrete__badge" style:background={color} style:color={textColor}>

package/dist/layout/legend/DiscreteSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { SvelteSet } from 'svelte/reactivity';
 	import { getConfiguration } from '../../configuration/config.svelte';
-	import { paletteColor } from '../../utils/color';
+	import { Palette } from '../../utils/color';
 	import { LegendState } from './LegendState.svelte';
 	import { DisabledStyle } from './DisabledStyle';
 	import DiscreteBadgeItem from './DiscreteBadgeItem.svelte';
@@ -167,7 +167,7 @@
 		disabledStyle?.fill ??
 		disabledStyle?.stroke?.stroke ??
 		item.color ??
-		paletteColor(i, cfg.palette)}
+		Palette.at(i, cfg.palette)}
 	{@const itemOpacity = disabledStyle
 		? (disabledStyle.opacity ?? cfg.legend.disabledOpacity)
 		: (item.opacity ?? 1)}