@fundar/data-chart-telling 0.0.48 → 0.0.50

package/dist/configuration/config.svelte.js

@@ -123,7 +123,7 @@ export const DEFAULT_CONFIG = {
         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: { stroke: '#e6580d', strokeWidth: 2, fillOpacity: 0 }
+        area: { fill: '#94a3b8', fillOpacity: 0.25 }
     },
     facet: {
         indicator: {

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 export type { ThemeName } from './configuration/themes';
-export { groupBy, buildSeries } from './utils/grouping';
+export { groupBy } from './utils/grouping';
 export { makeColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
 export { estimateCategoricalAxisMargin } from './plots/utils/categoricalAxisMargin';
 export { estimateLineValueLabelMargin } from './plots/line/valueLabelMargin';
@@ -58,7 +58,7 @@ export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, Geo
 export type { ChartPlotContext, ChartPlotSnippet } from './types/charts/common';
 export type { TimeValue, Orientation, TimelineConfig } from './types/layout/timeline';
 export type { Responsive, FacetColumns, FacetMode, FacetNavLayout, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet } from './types/layout/facet';
-export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendItemsLayout, LegendInteractiveStyle, DiscreteInteractiveConfig, ContinuousInteractiveConfig, LegendNavDirection, LegendNavContext, LegendNavSnippet, LegendInteractionStore, LegendPlotContext } from './types/layout/legend';
+export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendDisabledAction, LegendItemsLayout, LegendInteractiveStyle, DiscreteInteractiveConfig, ContinuousInteractiveConfig, LegendNavDirection, LegendNavContext, LegendNavSnippet, LegendInteractionStore, LegendPlotContext } from './types/layout/legend';
 export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY } from './types/layout/tooltip';
 export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
 export type { ChartProps, GapsAwareChartProps } from './types/charts/props';

package/dist/index.js

@@ -41,7 +41,7 @@ export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 // ── Utils ─────────────────────────────────────────────────────────────────────
-export { groupBy, buildSeries } from './utils/grouping';
+export { groupBy } from './utils/grouping';
 export { makeColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
 export { estimateCategoricalAxisMargin } from './plots/utils/categoricalAxisMargin';
 export { estimateLineValueLabelMargin } from './plots/line/valueLabelMargin';

package/dist/layout/legend/DiscreteBadgeItem.svelte

@@ -4,18 +4,23 @@
 	import type { LegendItem } from '../../types/layout/legend';
 
 	/**
-	 * The `interactive.legendStyle: 'badge'` item look: a pill filled with the
-	 * series color, its symbol icon (unless `showIcon` is off) and label
-	 * auto-contrasted against that fill, and an eye icon that's crossed out
-	 * while `disabled`. The toggled-off dim itself is applied by the parent
-	 * `.dct-discrete__item`.
+	 * The `interactive.legendStyle: 'badge'` item look: a pill with the series
+	 * color, symbol icon, label, and a toggle icon — an eye (crossed out when
+	 * `disabled`) for `'style'` mode, or a plus/cross pair for `'omit'`.
 	 */
 	let {
 		item,
 		color,
 		disabled,
-		showIcon = true
-	}: { item: LegendItem; color: string; disabled: boolean; showIcon?: boolean } = $props();
+		showIcon = true,
+		omitMode = false
+	}: {
+		item: LegendItem;
+		color: string;
+		disabled: boolean;
+		showIcon?: boolean;
+		omitMode?: boolean;
+	} = $props();
 	const textColor = $derived(contrastTextColor(color));
 </script>
 
@@ -25,7 +30,15 @@
 	{/if}
 	<span class="dct-discrete__label">{item.label || item.name}</span>
 	<svg class="dct-discrete__eye" viewBox="0 0 24 24" aria-hidden="true">
-		{#if disabled}
+		{#if omitMode}
+			{#if disabled}
+				<line x1="12" y1="5" x2="12" y2="19" />
+				<line x1="5" y1="12" x2="19" y2="12" />
+			{:else}
+				<line x1="6" y1="6" x2="18" y2="18" />
+				<line x1="6" y1="18" x2="18" y2="6" />
+			{/if}
+		{:else if disabled}
 			<path
 				d="M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a18.5 18.5 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
 			/>

package/dist/layout/legend/DiscreteBadgeItem.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     color: string;
     disabled: boolean;
     showIcon?: boolean;
+    omitMode?: boolean;
 };
 declare const DiscreteBadgeItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type DiscreteBadgeItem = ReturnType<typeof DiscreteBadgeItem>;

package/dist/layout/legend/DiscreteSection.svelte

@@ -6,18 +6,25 @@
 		getLegendInteraction,
 		createLegendInteraction
 	} from './interaction.svelte';
+	import { resolveDisabledStyle } from '../../plots/utils/legendDisabled';
 	import DiscreteBadgeItem from './DiscreteBadgeItem.svelte';
 	import DiscreteSwatchItem from './DiscreteSwatchItem.svelte';
 	import type {
 		DiscreteLegendSection,
+		LegendDisabledAction,
 		LegendItem,
+		LegendItemsLayout,
 		LegendNavDirection
 	} from '../../types/layout/legend';
 
-	let { section }: { section: DiscreteLegendSection } = $props();
+	/** `defaultItemsLayout` is the fallback used when `section.layout` isn't set. */
+	let {
+		section,
+		defaultItemsLayout = { type: 'vertical' }
+	}: { section: DiscreteLegendSection; defaultItemsLayout?: LegendItemsLayout } = $props();
 
 	const cfg = $derived(getConfiguration());
-	const layout = $derived(section.layout ?? { type: 'vertical' as const });
+	const layout = $derived(section.layout ?? defaultItemsLayout);
 	const isHorizontal = $derived(layout.type === 'horizontal');
 	const maxRows = $derived(layout.type === 'horizontal' ? Math.max(1, layout.maxRows ?? 1) : 1);
 	const columns = $derived(section.columns ?? 1);
@@ -26,8 +33,8 @@
 		isInteractive && (section.interactive?.legendStyle ?? 'badge') === 'badge'
 	);
 	const showIcon = $derived(section.interactive?.showIcon ?? true);
-	const disabledStyle = $derived(
-		section.interactive?.disabledStyle ?? { opacity: cfg.legend.disabledOpacity }
+	const disabledAction = $derived<LegendDisabledAction>(
+		section.interactive?.disabled ?? { mode: 'style' }
 	);
 	const interaction = getLegendInteraction() ?? createLegendInteraction();
 
@@ -37,7 +44,7 @@
 			if (seeded.has(item.name)) continue;
 			seeded.add(item.name);
 			if (item.disabled) {
-				interaction.disabledSeries.set(item.name, disabledStyle);
+				interaction.disabledSeries.set(item.name, disabledAction);
 			}
 		}
 	});
@@ -47,7 +54,7 @@
 		if (interaction.disabledSeries.has(item.name)) {
 			interaction.disabledSeries.delete(item.name);
 		} else {
-			interaction.disabledSeries.set(item.name, disabledStyle);
+			interaction.disabledSeries.set(item.name, disabledAction);
 		}
 	}
 
@@ -142,8 +149,14 @@
 </script>
 
 {#snippet discreteItem(item: LegendItem, i: number)}
-	{@const disabledStyle = interaction.disabledSeries.get(item.name)}
-	{@const isDisabled = disabledStyle != null}
+	{@const action = interaction.disabledSeries.get(item.name)}
+	{@const isDisabled = action != null}
+	{@const omitMode = disabledAction.mode === 'omit'}
+	{@const disabledStyle = isDisabled
+		? omitMode
+			? { opacity: cfg.legend.disabledOpacity }
+			: resolveDisabledStyle(action, cfg.legend.disabledOpacity)
+		: undefined}
 	{@const color =
 		disabledStyle?.fill ??
 		disabledStyle?.stroke?.stroke ??
@@ -167,7 +180,7 @@
 			: {}}
 	>
 		{#if useBadge}
-			<DiscreteBadgeItem {item} {color} disabled={isDisabled} {showIcon} />
+			<DiscreteBadgeItem {item} {color} disabled={isDisabled} {showIcon} {omitMode} />
 		{:else}
 			<DiscreteSwatchItem {item} {color} />
 		{/if}

package/dist/layout/legend/DiscreteSection.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { DiscreteLegendSection } from '../../types/layout/legend';
+import type { DiscreteLegendSection, LegendItemsLayout } from '../../types/layout/legend';
 type $$ComponentProps = {
     section: DiscreteLegendSection;
+    defaultItemsLayout?: LegendItemsLayout;
 };
 declare const DiscreteSection: import("svelte").Component<$$ComponentProps, {}, "">;
 type DiscreteSection = ReturnType<typeof DiscreteSection>;

package/dist/layout/legend/LegendLayout.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-  import type { LegendSection } from '../../types/layout/legend';
+  import type { LegendItemsLayout, LegendSection } from '../../types/layout/legend';
   import DiscreteSection from './DiscreteSection.svelte';
   import ContinuousSection from './ContinuousSection.svelte';
 
   /**
    * Renders one or more legend sections side by side, dispatching each to the
    * matching section renderer. Discrete and continuous sections can be mixed.
+   * A lone discrete section's items default to horizontal flow; vertical once
+   * a second section joins. A section's own `layout` always wins.
    */
   let { sections }: { sections: LegendSection[] } = $props();
+  const defaultItemsLayout = $derived<LegendItemsLayout>(
+    sections.length === 1 ? { type: 'horizontal' } : { type: 'vertical' }
+  );
 </script>
 
 <div class="dct-legend">
@@ -17,7 +22,7 @@
         <div class="dct-legend__title">{section.title}</div>
       {/if}
       {#if section.type === 'discrete'}
-        <DiscreteSection {section} />
+        <DiscreteSection {section} {defaultItemsLayout} />
       {:else if section.type === 'continuous'}
         <ContinuousSection {section} />
       {/if}

package/dist/markers/BarMarker.svelte

@@ -5,8 +5,9 @@
   /**
    * Renders one `'bar'` marker — `role: 'segment'` is a visible bar
    * (`<BarX>`/`<BarY>`, per `isHorizontal`); `role: 'hitArea'` is an
-   * invisible hit region for one category, resolved against the live scale
-   * via `usePlot()`.
+   * invisible hit region for one category; `role: 'highlight'` is a visible,
+   * non-interactive area highlight. The latter two resolve their geometry
+   * against the live scale via `usePlot()`.
    */
   let { marker }: { marker: BarMarkerConfig } = $props();
 
@@ -66,27 +67,65 @@
     {@const bandwidth = categoryScale.fn.bandwidth()}
     {@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
     {@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    {#if marker.isHorizontal}
-      <rect
-        x={valueMin}
-        y={bandStart}
-        width={Math.max(0, valueMax - valueMin)}
-        height={bandwidth}
-        fill="transparent"
-        onpointerenter={marker.onpointerenter}
-        onpointerleave={marker.onpointerleave}
-      />
+    {#if marker.role === 'hitArea'}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      {#if marker.isHorizontal}
+        <rect
+          x={valueMin}
+          y={bandStart}
+          width={Math.max(0, valueMax - valueMin)}
+          height={bandwidth}
+          fill="transparent"
+          onpointerenter={marker.onpointerenter}
+          onpointerleave={marker.onpointerleave}
+        />
+      {:else}
+        <rect
+          x={bandStart}
+          y={valueMin}
+          width={bandwidth}
+          height={Math.max(0, valueMax - valueMin)}
+          fill="transparent"
+          onpointerenter={marker.onpointerenter}
+          onpointerleave={marker.onpointerleave}
+        />
+      {/if}
     {:else}
-      <rect
-        x={bandStart}
-        y={valueMin}
-        width={bandwidth}
-        height={Math.max(0, valueMax - valueMin)}
-        fill="transparent"
-        onpointerenter={marker.onpointerenter}
-        onpointerleave={marker.onpointerleave}
-      />
+      {@const thickness = bandwidth + 2}
+      {@const center = bandStart + bandwidth / 2}
+      {#if marker.isHorizontal}
+        <rect
+          class="hover-area"
+          x={valueMin}
+          y={center - thickness / 2}
+          width={Math.max(0, valueMax - valueMin)}
+          height={thickness}
+          fill={marker.style?.fill}
+          fill-opacity={marker.style?.fillOpacity}
+          stroke={marker.style?.stroke}
+          stroke-width={marker.style?.strokeWidth}
+          stroke-opacity={marker.style?.strokeOpacity}
+          stroke-dasharray={marker.style?.strokeDasharray}
+          rx={marker.style?.borderRadius}
+          pointer-events="none"
+        />
+      {:else}
+        <rect
+          class="hover-area"
+          x={center - thickness / 2}
+          y={valueMin}
+          width={thickness}
+          height={Math.max(0, valueMax - valueMin)}
+          fill={marker.style?.fill}
+          fill-opacity={marker.style?.fillOpacity}
+          stroke={marker.style?.stroke}
+          stroke-width={marker.style?.strokeWidth}
+          stroke-opacity={marker.style?.strokeOpacity}
+          stroke-dasharray={marker.style?.strokeDasharray}
+          ry={marker.style?.borderRadius}
+          pointer-events="none"
+        />
+      {/if}
     {/if}
   {/if}
 {/if}

package/dist/markers/HoverMarker.svelte

@@ -2,6 +2,7 @@
   import DotMarker from './DotMarker.svelte';
   import TextMarker from './TextMarker.svelte';
   import RuleMarker from './RuleMarker.svelte';
+  import BarMarker from './BarMarker.svelte';
   import { getConfiguration } from '../configuration/config.svelte';
   import type { MarkerProps } from '../types/markers/props';
   import type { HoverMarkerConfig } from '../types/markers/common';
@@ -22,10 +23,19 @@
    * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
    * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
    * "no crosshair".
+   *
+   * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
+   * default) for a thickened area highlight in place of the thin crosshair —
+   * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
+   * `role: 'highlight'`, so it renders nothing on an axis without a band
+   * scale (e.g. a line/scatter plot's continuous axis).
    */
   interface Props extends MarkerProps<HoverDisplayPoint> {
     /** Narrowed to just the fields this component reads — `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'showLabels' | 'format' | 'ruleStyle' | 'dotStyle' | 'fontStyle'>;
+    marker: Pick<
+      HoverMarkerConfig,
+      'ruleX' | 'ruleY' | 'areaX' | 'areaY' | 'showLabels' | 'format' | 'ruleStyle' | 'areaStyle' | 'dotStyle' | 'fontStyle'
+    >;
     activePoint?: HoverDisplayPoint | null;
     impliesCrosshairX?: boolean;
     impliesCrosshairY?: boolean;
@@ -46,9 +56,13 @@
   const showCrosshairY = $derived(marker.ruleY !== false && (impliesCrosshairY || marker.ruleY === true));
   const ruleX = $derived(showCrosshairX ? (activePoint?.x ?? null) : null);
   const ruleY = $derived(showCrosshairY ? (activePoint?.y ?? null) : null);
+  // areaX/areaY have no implied default — always off unless explicitly set.
+  const areaX = $derived(marker.areaX === true ? (activePoint?.x ?? null) : null);
+  const areaY = $derived(marker.areaY === true ? (activePoint?.y ?? null) : null);
   const showLabels = $derived(marker.showLabels ?? true);
   const format = $derived(marker.format);
   const ruleStyle = $derived(marker.ruleStyle);
+  const areaStyle = $derived({ ...cfg.hover.area, ...marker.areaStyle });
   const dotStyle = $derived(marker.dotStyle);
   const fontStyle = $derived(marker.fontStyle);
 
@@ -93,6 +107,32 @@
   }
 </script>
 
+{#if areaX != null}
+  <BarMarker
+    marker={{
+      type: 'bar',
+      role: 'highlight',
+      isHorizontal: false,
+      data: [],
+      category: areaX,
+      style: areaStyle,
+    }}
+  />
+{/if}
+
+{#if areaY != null}
+  <BarMarker
+    marker={{
+      type: 'bar',
+      role: 'highlight',
+      isHorizontal: true,
+      data: [],
+      category: areaY,
+      style: areaStyle,
+    }}
+  />
+{/if}
+
 {#if ruleX != null}
   <RuleMarker axis="x" value={ruleX} style={{ ...cfg.hover.rule, ...ruleStyle }} />
 {/if}

package/dist/markers/HoverMarker.svelte.d.ts

@@ -16,10 +16,16 @@ import type { HoverDisplayPoint } from '../types/layout/tooltip';
  * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
  * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
  * "no crosshair".
+ *
+ * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
+ * default) for a thickened area highlight in place of the thin crosshair —
+ * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
+ * `role: 'highlight'`, so it renders nothing on an axis without a band
+ * scale (e.g. a line/scatter plot's continuous axis).
  */
 interface Props extends MarkerProps<HoverDisplayPoint> {
     /** Narrowed to just the fields this component reads — `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'showLabels' | 'format' | 'ruleStyle' | 'dotStyle' | 'fontStyle'>;
+    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'areaX' | 'areaY' | 'showLabels' | 'format' | 'ruleStyle' | 'areaStyle' | 'dotStyle' | 'fontStyle'>;
     activePoint?: HoverDisplayPoint | null;
     impliesCrosshairX?: boolean;
     impliesCrosshairY?: boolean;

package/dist/plots/bar/Plot.svelte

@@ -2,7 +2,12 @@
 	import { paletteColor } from '../../utils/color';
 	import { buildSeries } from '../../utils/grouping';
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import { disabledFillOverride } from '../utils/legendDisabled';
+	import {
+		disabledFillOverride,
+		resolveEffectiveDisabledStyle,
+		omitDisabledSeries,
+		buildSeriesColorIndex
+	} from '../utils/legendDisabled';
 	import { resolveAccessor } from '../utils/accessors';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import {
@@ -71,7 +76,15 @@
 	});
 
 	const cfg = $derived(getConfiguration());
-	const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const legendInteraction = $derived(getLegendInteraction());
+	// Unfiltered series list, for stable per-name color indexing.
+	const fullSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const colorIndex = $derived(buildSeriesColorIndex(fullSeries));
+	function colorForSeries(name: string): string {
+		return paletteColor(colorIndex.get(name) ?? 0, cfg.palette);
+	}
+	// Drops series toggled off with `disabled: { mode: 'omit' }`.
+	const resolvedSeries = $derived(omitDisabledSeries(fullSeries, legendInteraction));
 	const groupedSeries = $derived(
 		// connect: false — bars are discrete; there's no visual gap between
 		// adjacent categories to bridge (see buildGroupedSeries's own doc).
@@ -104,7 +117,7 @@
 		buildScopedMarkerGroups<TData, Series<TData>, BarSegmentStyle>({
 			groupedSeries,
 			segments,
-			colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			colorFor: (series) => colorForSeries(series.name),
 			segmentColorFor: (style, defaultColor) => style?.fill ?? defaultColor
 		})
 	);
@@ -181,7 +194,6 @@
 	// which drive tick/domain computation and the Pointer's hit-testing) —
 	// `row` (see BasePlotLayout/HoverPoint) is what lets the template recover the
 	// semantic category regardless of which axis it landed on.
-	const legendInteraction = $derived(getLegendInteraction());
 	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
 
 	// A value label hovered while `styles.values.hoverIsolate` is on dims
@@ -191,18 +203,19 @@
 	let hoverIsolatedSeries = $state<string | null>(null);
 
 	function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
-		return (
-			legendInteraction?.disabledSeries.get(name) ??
-			(hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
-				? { opacity: cfg.legend.disabledOpacity }
-				: undefined)
+		return resolveEffectiveDisabledStyle(
+			name,
+			legendInteraction,
+			cfg.legend.disabledOpacity,
+			hoverIsolate,
+			hoverIsolatedSeries
 		);
 	}
 
 	// A legend-disabled series is dimmed on the bar itself, but never surfaces
 	// in hover/tooltip — its points are simply absent from the candidate list.
 	const hoverPoints = $derived(
-		buildHoverPoints(resolvedSeries, isHorizontal, barLayout, cfg.palette).filter(
+		buildHoverPoints(resolvedSeries, isHorizontal, barLayout, colorForSeries).filter(
 			(p) => !legendInteraction?.disabledSeries.has(p.series!)
 		)
 	);
@@ -294,7 +307,7 @@
 			barLayout,
 			isHorizontal,
 			hoverPoints,
-			palette: cfg.palette,
+			colorFor: colorForSeries,
 			disabledFillFor: (name) => disabledFillOverride(effectiveDisabledFor(name)),
 			active: hover.active,
 			setHoverMatch,

package/dist/plots/bar/buildBarMarkers.d.ts

@@ -25,7 +25,7 @@ export declare function buildBarMarkers<TData extends Record<string, unknown>>(a
     barLayout: BarLayout<TData>;
     isHorizontal: boolean;
     hoverPoints: HoverPoint<TData>[];
-    palette: string[];
+    colorFor: (seriesName: string) => string;
     disabledFillFor: (seriesName: string) => {
         fill?: string;
         fillOpacity?: number;

package/dist/plots/bar/buildBarMarkers.js

@@ -1,5 +1,4 @@
 import { resolveAccessor } from '../utils/accessors';
-import { paletteColor } from '../../utils/color';
 import { getConfiguration } from '../../configuration/config.svelte';
 import { isGapValue, resolveGapAreaStyle } from '../utils/gaps';
 const GAP_KINDS = ['start', 'middle', 'end'];
@@ -19,13 +18,13 @@ const GAP_KINDS = ['start', 'middle', 'end'];
  * where the marker actually renders.
  */
 export function buildBarMarkers(args) {
-    const { groupedSeries, barLayout, isHorizontal, hoverPoints, palette, disabledFillFor, active, setHoverMatch, clearHoverMatch, gapFillMaps } = args;
+    const { groupedSeries, barLayout, isHorizontal, hoverPoints, colorFor, disabledFillFor, active, setHoverMatch, clearHoverMatch, gapFillMaps } = args;
     const gapDefaults = getConfiguration().bar.gap;
     const segmentMarkers = [];
     groupedSeries.forEach((group, seriesIndex) => {
         const xFn = resolveAccessor(group.series.x);
         const yFn = resolveAccessor(group.series.y);
-        const defaultColor = paletteColor(seriesIndex, palette);
+        const defaultColor = colorFor(group.series.name);
         const disabledFill = disabledFillFor(group.series.name);
         // Places one series' bar(s) — real or gap-fill — using whichever
         // layout mode (stacked baseline, or flat baseline + grouped insets) is

package/dist/plots/bar/hoverPoints.d.ts

@@ -12,4 +12,4 @@ import type { BarLayout } from './layout.svelte';
  * height instead of `dx`/`dy`, since that offset is representable as a
  * regular data value (unlike 'grouped''s pixel-only slice offset).
  */
-export declare function buildHoverPoints<TData extends Record<string, unknown>>(resolvedSeries: Series<TData>[], isHorizontal: boolean, geometry: Pick<BarLayout<TData>, 'layout' | 'stackedBaseline' | 'groupOffset'>, palette: string[]): HoverPoint<TData>[];
+export declare function buildHoverPoints<TData extends Record<string, unknown>>(resolvedSeries: Series<TData>[], isHorizontal: boolean, geometry: Pick<BarLayout<TData>, 'layout' | 'stackedBaseline' | 'groupOffset'>, colorFor: (seriesName: string) => string): HoverPoint<TData>[];

package/dist/plots/bar/hoverPoints.js

@@ -1,5 +1,4 @@
 import { resolveAccessor } from '../utils/accessors';
-import { paletteColor } from '../../utils/color';
 import { isGapValue } from '../utils/gaps';
 /**
  * Builds hover-marker candidate points for every row across every series.
@@ -12,7 +11,7 @@ import { isGapValue } from '../utils/gaps';
  * height instead of `dx`/`dy`, since that offset is representable as a
  * regular data value (unlike 'grouped''s pixel-only slice offset).
  */
-export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, palette) {
+export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, colorFor) {
     return resolvedSeries.flatMap((s, idx) => {
         const sx = resolveAccessor(s.x);
         const sy = resolveAccessor(s.y);
@@ -29,7 +28,7 @@ export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, palette
                 row: d,
                 label: String(sy(d)),
                 series: s.name,
-                color: paletteColor(idx, palette),
+                color: colorFor(s.name),
             };
         });
     });

package/dist/plots/line/Plot.svelte

@@ -4,7 +4,13 @@
 	import { paletteColor } from '../../utils/color';
 	import { buildSeries } from '../../utils/grouping';
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import { disabledStrokeOverride, disabledDotsOverride } from '../utils/legendDisabled';
+	import {
+		disabledStrokeOverride,
+		disabledDotsOverride,
+		resolveEffectiveDisabledStyle,
+		omitDisabledSeries,
+		buildSeriesColorIndex
+	} from '../utils/legendDisabled';
 	import { buildLineMarkers } from './buildLineMarkers';
 	import { buildGapMarkers } from './buildGapMarkers';
 	import { isGapValue } from '../utils/gaps';
@@ -64,8 +70,16 @@
 	// resolved per series.
 	const gaps = $derived(styles.gaps ?? {});
 
-	const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const cfg = $derived(getConfiguration());
 	const legendInteraction = $derived(getLegendInteraction());
+	// Unfiltered series list, for stable per-name color indexing.
+	const fullSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const colorIndex = $derived(buildSeriesColorIndex(fullSeries));
+	function colorForSeries(name: string): string {
+		return paletteColor(colorIndex.get(name) ?? 0, cfg.palette);
+	}
+	// Drops series toggled off with `disabled: { mode: 'omit' }`.
+	const resolvedSeries = $derived(omitDisabledSeries(fullSeries, legendInteraction));
 
 	$effect(() => {
 		validateSegments(segments);
@@ -75,7 +89,6 @@
 		buildGroupedSeries<Series<TData>, LineSegmentStyle>(resolvedSeries, segments)
 	);
 
-	const cfg = $derived(getConfiguration());
 	const showVals = $derived(styles.values?.show ?? false);
 	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
 	const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'start');
@@ -86,11 +99,12 @@
 	let hoverIsolatedSeries = $state<string | null>(null);
 
 	function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
-		return (
-			legendInteraction?.disabledSeries.get(name) ??
-			(hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
-				? { opacity: cfg.legend.disabledOpacity }
-				: undefined)
+		return resolveEffectiveDisabledStyle(
+			name,
+			legendInteraction,
+			cfg.legend.disabledOpacity,
+			hoverIsolate,
+			hoverIsolatedSeries
 		);
 	}
 
@@ -99,7 +113,7 @@
 	const flat = $derived(resolvedSeries.flatMap((s) => s.data));
 	// Legend-disabled series and gap rows are excluded from hover candidates.
 	const hoverPoints = $derived(
-		resolvedSeries.flatMap((s, idx) => {
+		resolvedSeries.flatMap((s) => {
 			if (legendInteraction?.disabledSeries.has(s.name)) return [];
 			const sx = resolveAccessor(s.x);
 			const sy = resolveAccessor(s.y);
@@ -111,7 +125,7 @@
 					row: d,
 					label: String(sy(d)),
 					series: s.name,
-					color: paletteColor(idx, cfg.palette)
+					color: colorForSeries(s.name)
 				}));
 		})
 	);
@@ -128,6 +142,7 @@
 	const lineMarkers = $derived(
 		buildLineMarkers({
 			groupedSeries,
+			colorFor: colorForSeries,
 			disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
 			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
 		})
@@ -137,7 +152,7 @@
 		buildGapMarkers<TData>({
 			seriesList: resolvedSeries,
 			gaps,
-			colorFor: (seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			colorFor: (seriesIndex) => colorForSeries(resolvedSeries[seriesIndex].name),
 			disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
 			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
 		})
@@ -147,14 +162,14 @@
 		buildScopedMarkerGroups<TData, Series<TData>, LineSegmentStyle>({
 			groupedSeries,
 			segments,
-			colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			colorFor: (series) => colorForSeries(series.name),
 			segmentColorFor: (style, defaultColor) => style?.stroke?.stroke ?? defaultColor
 		})
 	);
 
 	const lastPoints = $derived(
 		resolvedSeries
-			.map((s, idx) => {
+			.map((s) => {
 				const sy = resolveAccessor(s.y);
 				const lastRow = [...s.data].reverse().find((d) => !isGapValue(sy(d)));
 				if (lastRow === undefined) return undefined;
@@ -164,7 +179,7 @@
 					matchedSeg?.color ??
 					group?.segments[0]?.color ??
 					group?.color ??
-					paletteColor(idx, cfg.palette);
+					colorForSeries(s.name);
 				return { series: s, lastRow, color };
 			})
 			.filter((p): p is { series: Series<TData>; lastRow: TData; color: string } => p !== undefined)

package/dist/plots/line/buildLineMarkers.d.ts

@@ -10,6 +10,7 @@ import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/comm
  */
 export declare function buildLineMarkers<TData extends Record<string, unknown>>(args: {
     groupedSeries: VisualGroup<Series<TData>, LineSegmentStyle>[];
+    colorFor: (seriesName: string) => string;
     disabledStrokeFor: (seriesName: string) => StrokeStyle | undefined;
     disabledDotsFor: (seriesName: string) => DotStyle | undefined;
 }): (LineMarkerConfig | DotMarkerConfig)[];

package/dist/plots/line/buildLineMarkers.js

@@ -1,5 +1,4 @@
 import { resolveAccessor } from '../utils/accessors';
-import { paletteColor } from '../../utils/color';
 import { getConfiguration } from '../../configuration/config.svelte';
 /**
  * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
@@ -7,11 +6,11 @@ import { getConfiguration } from '../../configuration/config.svelte';
  * `'dot'` marker right after it when that segment sets `style.dots`.
  */
 export function buildLineMarkers(args) {
-    const { groupedSeries, disabledStrokeFor, disabledDotsFor } = args;
+    const { groupedSeries, colorFor, disabledStrokeFor, disabledDotsFor } = args;
     const cfg = getConfiguration();
     const markers = [];
-    groupedSeries.forEach((group, seriesIndex) => {
-        const defaultColor = paletteColor(seriesIndex, cfg.palette);
+    groupedSeries.forEach((group) => {
+        const defaultColor = colorFor(group.series.name);
         const disabledStroke = disabledStrokeFor(group.series.name);
         const disabledDots = disabledDotsFor(group.series.name);
         const xFn = resolveAccessor(group.series.x);

package/dist/plots/pyramid/Plot.svelte

@@ -4,7 +4,10 @@
 	import { paletteColor } from '../../utils/color';
 	import { buildSeries } from '../../utils/grouping';
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import { disabledFillOverride } from '../utils/legendDisabled';
+	import {
+		disabledFillOverride,
+		resolveEffectiveDisabledStyle
+	} from '../utils/legendDisabled';
 	import { buildPyramidBarMarkers } from './buildPyramidBarMarkers';
 	import {
 		createLabelMarginTracker,
@@ -90,11 +93,12 @@
 	let hoverIsolatedSeries = $state<string | null>(null);
 
 	function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
-		return (
-			legendInteraction?.disabledSeries.get(name) ??
-			(hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
-				? { opacity: cfg.legend.disabledOpacity }
-				: undefined)
+		return resolveEffectiveDisabledStyle(
+			name,
+			legendInteraction,
+			cfg.legend.disabledOpacity,
+			hoverIsolate,
+			hoverIsolatedSeries
 		);
 	}
 

package/dist/plots/scatter/Plot.svelte

@@ -4,7 +4,12 @@
 	import { paletteColor } from '../../utils/color';
 	import { buildSeries } from '../../utils/grouping';
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import { disabledDotsOverride } from '../utils/legendDisabled';
+	import {
+		disabledDotsOverride,
+		resolveEffectiveDisabledStyle,
+		omitDisabledSeries,
+		buildSeriesColorIndex
+	} from '../utils/legendDisabled';
 	import { buildScatterMarkers } from './buildScatterMarkers';
 	import { resolveRadiusPaddedDomain } from './resolveRadiusPaddedDomain';
 	import {
@@ -67,8 +72,16 @@
 		tooltip = undefined
 	}: Props = $props();
 
-	const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const cfg = $derived(getConfiguration());
 	const legendInteraction = $derived(getLegendInteraction());
+	// Unfiltered series list, for stable per-name color indexing.
+	const fullSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const colorIndex = $derived(buildSeriesColorIndex(fullSeries));
+	function colorForSeries(name: string): string {
+		return paletteColor(colorIndex.get(name) ?? 0, cfg.palette);
+	}
+	// Drops series toggled off with `disabled: { mode: 'omit' }`.
+	const resolvedSeries = $derived(omitDisabledSeries(fullSeries, legendInteraction));
 
 	$effect(() => {
 		validateSegments(segments);
@@ -81,7 +94,6 @@
 		buildGroupedSeries<Series<TData>, ScatterSegmentStyle>(resolvedSeries, segments, false)
 	);
 
-	const cfg = $derived(getConfiguration());
 	const showVals = $derived(styles.values?.show ?? false);
 	const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
 	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
@@ -93,11 +105,12 @@
 	let hoverIsolatedSeries = $state<string | null>(null);
 
 	function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
-		return (
-			legendInteraction?.disabledSeries.get(name) ??
-			(hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
-				? { opacity: cfg.legend.disabledOpacity }
-				: undefined)
+		return resolveEffectiveDisabledStyle(
+			name,
+			legendInteraction,
+			cfg.legend.disabledOpacity,
+			hoverIsolate,
+			hoverIsolatedSeries
 		);
 	}
 
@@ -108,7 +121,7 @@
 	// A legend-disabled series is dimmed on the mark itself, but never surfaces
 	// in hover/tooltip — its points are simply absent from the candidate list.
 	const hoverPoints = $derived(
-		resolvedSeries.flatMap((s, idx) => {
+		resolvedSeries.flatMap((s) => {
 			if (legendInteraction?.disabledSeries.has(s.name)) return [];
 			const sx = resolveAccessor(s.x);
 			const sy = resolveAccessor(s.y);
@@ -118,7 +131,7 @@
 				row: d,
 				label: `${sx(d)}, ${sy(d)}`,
 				series: s.name,
-				color: paletteColor(idx, cfg.palette)
+				color: colorForSeries(s.name)
 			}));
 		})
 	);
@@ -138,6 +151,7 @@
 		buildScatterMarkers({
 			groupedSeries,
 			r,
+			colorFor: colorForSeries,
 			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
 		})
 	);
@@ -146,7 +160,7 @@
 		buildScopedMarkerGroups<TData, Series<TData>, ScatterSegmentStyle>({
 			groupedSeries,
 			segments,
-			colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			colorFor: (series) => colorForSeries(series.name),
 			segmentColorFor: (style, defaultColor) => style?.dotFill ?? defaultColor
 		})
 	);

package/dist/plots/scatter/buildScatterMarkers.d.ts

@@ -7,5 +7,6 @@ import type { DotMarkerConfig } from '../../types/markers/common';
 export declare function buildScatterMarkers<TData extends Record<string, unknown>>(args: {
     groupedSeries: VisualGroup<Series<TData>, ScatterSegmentStyle>[];
     r?: Accessor<TData, number> | number;
+    colorFor: (seriesName: string) => string;
     disabledDotsFor: (seriesName: string) => DotStyle | undefined;
 }): DotMarkerConfig[];

package/dist/plots/scatter/buildScatterMarkers.js

@@ -1,14 +1,13 @@
 import { resolveAccessor } from '../utils/accessors';
-import { paletteColor } from '../../utils/color';
 import { getConfiguration } from '../../configuration/config.svelte';
 /** Every `'dot'` marker for one ScatterPlot render: one per visual segment. */
 export function buildScatterMarkers(args) {
-    const { groupedSeries, r, disabledDotsFor } = args;
+    const { groupedSeries, r, colorFor, disabledDotsFor } = args;
     const cfg = getConfiguration();
     const rFn = r === undefined || typeof r === 'number' ? r : resolveAccessor(r);
     const markers = [];
-    groupedSeries.forEach((group, seriesIndex) => {
-        const defaultColor = paletteColor(seriesIndex, cfg.palette);
+    groupedSeries.forEach((group) => {
+        const defaultColor = colorFor(group.series.name);
         const disabledDots = disabledDotsFor(group.series.name);
         const xFn = resolveAccessor(group.series.x);
         const yFn = resolveAccessor(group.series.y);

package/dist/plots/utils/legendDisabled.d.ts

@@ -1,5 +1,17 @@
-import type { LegendDisabledStyle } from '../../types/layout/legend';
+import type { LegendDisabledAction, LegendDisabledStyle, LegendInteractionStore } from '../../types/layout/legend';
 import type { StrokeStyle, DotStyle } from '../../types/plots/styling';
+/** Resolves a {@link LegendDisabledAction} into the style a mark should render with — `'omit'` resolves to fully transparent. */
+export declare function resolveDisabledStyle(action: LegendDisabledAction | undefined, fallbackOpacity: number): LegendDisabledStyle | undefined;
+/** Drops series toggled off with `disabled: { mode: 'omit' }` from a series list. */
+export declare function omitDisabledSeries<S extends {
+    name: string;
+}>(series: S[], legendInteraction: LegendInteractionStore | null | undefined): S[];
+/** Builds a per-series-name → palette index from the full series list, before {@link omitDisabledSeries} filters it. */
+export declare function buildSeriesColorIndex<S extends {
+    name: string;
+}>(series: S[]): Map<string, number>;
+/** Resolves the disabled style for a series by name: legend-off state, falling back to hover-isolate dim. */
+export declare function resolveEffectiveDisabledStyle(name: string, legendInteraction: LegendInteractionStore | null | undefined, disabledOpacity: number, hoverIsolate: boolean, hoverIsolatedSeries: string | null): LegendDisabledStyle | undefined;
 /**
  * The three per-mark override layers a legend "disabled" state can apply,
  * derived once from a {@link LegendDisabledStyle}. Each is `undefined` when

package/dist/plots/utils/legendDisabled.js

@@ -1,3 +1,30 @@
+/** Resolves a {@link LegendDisabledAction} into the style a mark should render with — `'omit'` resolves to fully transparent. */
+export function resolveDisabledStyle(action, fallbackOpacity) {
+    if (!action)
+        return undefined;
+    if (action.mode === 'omit')
+        return { opacity: 0 };
+    return action.style ?? { opacity: fallbackOpacity };
+}
+/** Drops series toggled off with `disabled: { mode: 'omit' }` from a series list. */
+export function omitDisabledSeries(series, legendInteraction) {
+    if (!legendInteraction)
+        return series;
+    return series.filter((s) => legendInteraction.disabledSeries.get(s.name)?.mode !== 'omit');
+}
+/** Builds a per-series-name → palette index from the full series list, before {@link omitDisabledSeries} filters it. */
+export function buildSeriesColorIndex(series) {
+    const index = new Map();
+    series.forEach((s, i) => index.set(s.name, i));
+    return index;
+}
+/** Resolves the disabled style for a series by name: legend-off state, falling back to hover-isolate dim. */
+export function resolveEffectiveDisabledStyle(name, legendInteraction, disabledOpacity, hoverIsolate, hoverIsolatedSeries) {
+    return (resolveDisabledStyle(legendInteraction?.disabledSeries.get(name), disabledOpacity) ??
+        (hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
+            ? { opacity: disabledOpacity }
+            : undefined));
+}
 /**
  * The three per-mark override layers a legend "disabled" state can apply,
  * derived once from a {@link LegendDisabledStyle}. Each is `undefined` when

package/dist/types/configuration/styling.d.ts

@@ -37,7 +37,7 @@ export type ChartConfig = {
         gap: string;
         /** swatch square size */
         swatchSize: string;
-        /** Fallback opacity for a legend-disabled series/value when a section doesn't set its own `disabledStyle`. */
+        /** Fallback opacity for a legend-disabled series/value when a section doesn't set its own style. */
         disabledOpacity: number;
         /** Prev/next arrows shown when a `layout: { type: 'horizontal' }` discrete section overflows `maxRows`. */
         navButton: {
@@ -160,7 +160,11 @@ export type ChartConfig = {
         activeColor: string;
         thickness: number;
     };
-    /** In-SVG hover highlight: crosshair rule, dot + value label, and geo feature restyle. */
+    /**
+     * In-SVG hover highlight: crosshair rule, dot + value label, and the area
+     * highlight — a restyled feature on `GeoPlot`, or an `areaX`/`areaY` band
+     * on an axis-based plot's band scale.
+     */
     hover: {
         rule: StrokeStyle;
         dot: DotStyle;

package/dist/types/layout/legend.d.ts

@@ -17,6 +17,13 @@ export type LegendDisabledStyle = {
     fill?: string;
     fillOpacity?: number;
 };
+/** What a legend toggle does to a series once it's off: `'style'` dims it in place, `'omit'` removes it from the plot entirely. */
+export type LegendDisabledAction = {
+    mode: 'style';
+    style?: LegendDisabledStyle;
+} | {
+    mode: 'omit';
+};
 export type LegendItem = {
     name: string;
     label?: string;
@@ -28,11 +35,9 @@ export type LegendItem = {
     disabled?: boolean;
 };
 /**
- * How a discrete section's items flow. `'vertical'` (the default) stacks them
- * in a `columns`-wide grid, as it always has. `'horizontal'` flows them left
- * to right, wrapping to new rows as needed — and once wrapped rows exceed
- * `maxRows` (default 1), the section paginates instead of growing taller,
- * surfacing prev/next arrows to page through the rest.
+ * How a discrete section's items flow. `'vertical'` stacks them in a
+ * `columns`-wide grid; `'horizontal'` flows them left to right, paginating
+ * past `maxRows` (default 1) with prev/next arrows.
  */
 export type LegendItemsLayout = {
     type: 'vertical';
@@ -75,8 +80,8 @@ export type DiscreteInteractiveConfig = {
     enabled?: boolean;
     /** Item look while `enabled`. Defaults to `'badge'`. */
     legendStyle?: LegendInteractiveStyle;
-    /** Style applied to a toggled-off item. Defaults to `{ opacity: cfg.legend.disabledOpacity }`. */
-    disabledStyle?: LegendDisabledStyle;
+    /** What happens to a toggled-off item. Defaults to `{ mode: 'style' }`. */
+    disabled?: LegendDisabledAction;
     /** Shows the symbol icon inside a `'badge'` pill. Defaults to `true`; ignored by `'basic'`, which always shows it. */
     showIcon?: boolean;
 };
@@ -85,7 +90,7 @@ export type DiscreteLegendSection = {
     title?: string;
     items: LegendItem[];
     columns?: number;
-    /** Item flow direction. Defaults to `{ type: 'vertical' }` (unchanged prior behaviour). */
+    /** Item flow direction. Defaults to horizontal for a lone section, vertical once there's more than one. */
     layout?: LegendItemsLayout;
     interactive?: DiscreteInteractiveConfig;
     navButton?: LegendNavSnippet;
@@ -129,8 +134,8 @@ export type LegendSection = DiscreteLegendSection | ContinuousLegendSection;
  * own private store via `createLegendInteraction`.
  */
 export type LegendInteractionStore = {
-    /** Legend item name → resolved style to apply. Presence in the map means "disabled". */
-    disabledSeries: SvelteMap<string, LegendDisabledStyle>;
+    /** Legend item name → action to apply. Presence in the map means "disabled". */
+    disabledSeries: SvelteMap<string, LegendDisabledAction>;
     /**
      * The active drag state of the (first) interactive continuous section, or
      * `null` when none is interactive or the user hasn't narrowed it yet (full

package/dist/types/markers/common.d.ts

@@ -22,9 +22,18 @@ export type HoverMarkerConfig = {
     sync?: boolean;
     ruleX?: boolean;
     ruleY?: boolean;
+    /**
+     * Thickened area in place of a thin crosshair — sized to the hovered
+     * bar/cell's own width, spanning the full opposite axis. Off by default;
+     * meaningful only on a band (categorical) scale, so it renders nothing on
+     * a line/scatter plot's continuous axis.
+     */
+    areaX?: boolean;
+    areaY?: boolean;
     showLabels?: boolean;
     format?: (point: HoverDisplayPoint) => string;
     ruleStyle?: StrokeStyle;
+    areaStyle?: AreaStyle;
     dotStyle?: DotStyle;
     fontStyle?: FontStyle;
 };
@@ -40,11 +49,14 @@ export type LineMarkerConfig = {
  * A single bar mark. `role: 'segment'` is a visible bar
  * (`x`/`y`/`x1`/`x2`/`y1`/`y2` map to svelteplot's `<BarX>`/`<BarY>` per
  * `isHorizontal`); `role: 'hitArea'` is an invisible per-category hit region
- * for hover, resolved against the live scale at render time.
+ * for hover, resolved against the live scale at render time; `role:
+ * 'highlight'` is `HoverMarkerConfig`'s `areaX`/`areaY` highlight — a
+ * visible, non-interactive rect centered on `category`, spanning the full
+ * opposite axis, sized to the category band's own width plus 2px.
  */
 export type BarMarkerConfig = {
     type: 'bar';
-    role: 'segment' | 'hitArea';
+    role: 'segment' | 'hitArea' | 'highlight';
     isHorizontal: boolean;
     data: Record<string, unknown>[];
     x?: (d: any) => AxisValue;

package/dist/utils/color.js

@@ -23,6 +23,40 @@ export function paletteColor(index, palette) {
         return 'currentColor';
     return palette[index % palette.length];
 }
+function clamp01(v) {
+    return Math.max(0, Math.min(1, v));
+}
+function linearToSrgb8(c) {
+    const s = c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+    return clamp01(s) * 255;
+}
+/**
+ * Parses `oklch(L C H)` directly instead of round-tripping through the
+ * browser's computed style: Chromium/Firefox serialize computed oklch()
+ * values back as oklch() (not rgb()), so the generic browser-fallback
+ * below sees an unchanged string on the second pass and its
+ * infinite-loop guard mistakes that for a parse failure.
+ */
+function parseOklch(color) {
+    const match = /^oklch\(\s*([\d.]+)(%)?\s+([\d.]+)\s+([\d.]+)/i.exec(color.trim());
+    if (!match)
+        return null;
+    const L = match[2] ? Number(match[1]) / 100 : Number(match[1]);
+    const C = Number(match[3]);
+    const H = (Number(match[4]) * Math.PI) / 180;
+    const a = C * Math.cos(H);
+    const b = C * Math.sin(H);
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+    const l = l_ ** 3;
+    const m = m_ ** 3;
+    const s = s_ ** 3;
+    const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+    const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+    const bl = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+    return [linearToSrgb8(r), linearToSrgb8(g), linearToSrgb8(bl)];
+}
 function parseRgb(color) {
     const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
     if (hex) {
@@ -33,6 +67,9 @@ function parseRgb(color) {
     const rgb = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i.exec(color);
     if (rgb)
         return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+    const oklch = parseOklch(color);
+    if (oklch)
+        return oklch;
     // Named colors, hsl(), and any other CSS color syntax: resolved to
     // `rgb(...)` via the browser's computed style, then reparsed.
     if (!isBrowser)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "type": "module",
   "files": [
     "dist"