@fundar/data-chart-telling 0.0.33 → 0.0.34

package/dist/configuration/config.svelte.js

@@ -22,7 +22,7 @@ const text = (over) => ({
     color: 'inherit',
     leading: '1.3',
     spacing: 'normal',
-    ...over,
+    ...over
 });
 export const DEFAULT_CONFIG = {
     font: 'inherit',
@@ -32,10 +32,14 @@ export const DEFAULT_CONFIG = {
     spacing: {
         headerPadding: '0.75rem 0 1rem',
         legendPadding: '0.75rem 0',
-        captionPadding: '0.5rem 0',
+        captionPadding: '0.5rem 0'
     },
     title: text({ size: '1.5rem', weight: 500, leading: '1.2' }),
-    subtitle: text({ size: '1rem', weight: 400, color: 'color-mix(in srgb, currentColor 85%, transparent)' }),
+    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)' }),
     legend: {
         font: 'inherit',
@@ -47,6 +51,13 @@ export const DEFAULT_CONFIG = {
         gap: '0.5rem 2rem',
         swatchSize: '1.25rem',
         disabledOpacity: 0.12,
+        navButton: {
+            background: 'transparent',
+            color: 'currentColor',
+            size: '1.5rem',
+            fontSize: '1rem',
+            disabledOpacity: 0.3
+        }
     },
     axis: {
         color: 'currentColor',
@@ -57,7 +68,7 @@ export const DEFAULT_CONFIG = {
         yTickSize: 5,
         xTickPadding: 10,
         yTickPadding: 10,
-        grid: false,
+        grid: false
     },
     tooltip: {
         background: '#111827',
@@ -65,7 +76,7 @@ export const DEFAULT_CONFIG = {
         fontSize: '0.8125rem',
         padding: '0.5rem 0.75rem',
         radius: '0.375rem',
-        border: 'none',
+        border: 'none'
     },
     margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
     palette: ['#4f46e5', '#e6580d', '#16a34a', '#dc2626', '#0891b2', '#9333ea', '#ca8a04', '#db2777'],
@@ -75,15 +86,15 @@ export const DEFAULT_CONFIG = {
         dotRadius: 4,
         gap: {
             stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
-            dots: {},
+            dots: {}
         },
         valueLabels: {
             elbowGap: 10,
             laneStep: 7,
             labelGap: 6,
             connectorColor: '#94a3b8',
-            connectorWidth: 0.5,
-        },
+            connectorWidth: 0.5
+        }
     },
     bar: { gap: { fillOpacity: 0.5 } },
     pyramid: { gap: { fillOpacity: 0.5 } },
@@ -93,7 +104,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: { stroke: '#e6580d', strokeWidth: 2, fillOpacity: 0 }
     },
     facet: {
         indicator: {
@@ -101,16 +112,16 @@ export const DEFAULT_CONFIG = {
             color: '#ffffff',
             fontSize: '0.8125rem',
             padding: '0.125rem 0.5rem',
-            radius: '999px',
+            radius: '999px'
         },
         navButton: {
             background: '#111827',
             color: '#ffffff',
             size: '2rem',
             fontSize: '1.1rem',
-            disabledOpacity: 0.3,
-        },
-    },
+            disabledOpacity: 0.3
+        }
+    }
 };
 // ── Merge ─────────────────────────────────────────────────────────────────────
 function isPlainObject(v) {
@@ -151,7 +162,7 @@ export function configToCssVars(c) {
         [`--dct-${prefix}-weight`]: String(s.weight),
         [`--dct-${prefix}-color`]: s.color,
         [`--dct-${prefix}-leading`]: s.leading,
-        [`--dct-${prefix}-spacing`]: s.spacing,
+        [`--dct-${prefix}-spacing`]: s.spacing
     });
     return {
         '--dct-font': c.font,
@@ -172,6 +183,11 @@ export function configToCssVars(c) {
         '--dct-legend-title-weight': String(c.legend.titleWeight),
         '--dct-legend-gap': c.legend.gap,
         '--dct-legend-swatch': c.legend.swatchSize,
+        '--dct-legend-nav-bg': c.legend.navButton.background,
+        '--dct-legend-nav-color': c.legend.navButton.color,
+        '--dct-legend-nav-size': c.legend.navButton.size,
+        '--dct-legend-nav-font-size': c.legend.navButton.fontSize,
+        '--dct-legend-nav-disabled-opacity': String(c.legend.navButton.disabledOpacity),
         '--dct-axis-color': c.axis.color,
         '--dct-tooltip-bg': c.tooltip.background,
         '--dct-tooltip-color': c.tooltip.color,
@@ -193,7 +209,7 @@ export function configToCssVars(c) {
         '--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-facet-nav-disabled-opacity': String(c.facet.navButton.disabledOpacity)
     };
 }
 /** Serialize a CSS-vars record into a `style` attribute string. */

package/dist/configuration/themes/index.d.ts

@@ -49,6 +49,13 @@ export declare const THEMES: {
             gap?: string | undefined;
             swatchSize?: string | undefined;
             disabledOpacity?: number | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -249,6 +256,13 @@ export declare const THEMES: {
             gap?: string | undefined;
             swatchSize?: string | undefined;
             disabledOpacity?: number | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -449,6 +463,13 @@ export declare const THEMES: {
             gap?: string | undefined;
             swatchSize?: string | undefined;
             disabledOpacity?: number | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -649,6 +670,13 @@ export declare const THEMES: {
             gap?: string | undefined;
             swatchSize?: string | undefined;
             disabledOpacity?: number | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
 export { default as FacetIndicator } from './layout/facet/FacetIndicator.svelte';
 export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
 export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
-export { getLegendInteraction, provideLegendInteraction, createLegendInteraction, } from './layout/legend/interaction.svelte';
+export { getLegendInteraction, provideLegendInteraction, createLegendInteraction } from './layout/legend/interaction.svelte';
 export { default as BarMarker } from './markers/BarMarker.svelte';
 export { default as CellMarker } from './markers/CellMarker.svelte';
 export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
@@ -31,31 +31,31 @@ export { default as LineMarker } from './markers/LineMarker.svelte';
 export { default as PeakMarker } from './markers/PeakMarker.svelte';
 export { default as RuleMarker } from './markers/RuleMarker.svelte';
 export { default as TextMarker } from './markers/TextMarker.svelte';
-export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.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 { makeColorScale, normalize, resolveCssColor, paletteColor } from './utils/color';
 export type { AxisValue, AxisScale, AxisBasedScalesConfig } from './types/layout/scales';
 export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
-export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig, PointMatchingStrategy, } from './types/plots/props';
-export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, AxisBasedStylesConfig, GapsAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig, } from './types/layout/styles';
-export type { GapsConfig, GapZonesConfig, GapZoneConfig, OpenGapZoneConfig, } from './types/plots/gaps';
+export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig, PointMatchingStrategy } from './types/plots/props';
+export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, AxisBasedStylesConfig, GapsAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
+export type { GapsConfig, GapZonesConfig, GapZoneConfig, OpenGapZoneConfig } from './types/plots/gaps';
 export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle, ScatterSegmentStyle } from './types/plots/segments/common';
 export type { Range, Area, Segment } from './types/plots/segments/config';
-export type { ValueAnchor, SymbolType, LineStyle, LineCap, LineJoin, FontWeight, FontStyleKeyword, TextAnchor, LineAnchor, } from './types/plots/constants';
+export type { ValueAnchor, SymbolType, LineStyle, LineCap, LineJoin, FontWeight, FontStyleKeyword, TextAnchor, LineAnchor } from './types/plots/constants';
 export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
 export type { AxisBasedMarkersConfig } from './types/markers/common';
 export type { LineMarkersConfig, DeltaMarkerConfig, DeltaConfig, DeltaTarget } from './types/markers/line';
 export type { MarkerProps } from './types/markers/props';
 export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';
 export type { ScatterDataProps } from './types/plots/data/scatter';
-export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, GeoZoomConfig, CoordinatesConfig, } from './types/layout/coordinates';
-export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/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, LegendInteractionStore, LegendPlotContext, } from './types/layout/legend';
-export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY, } from './types/layout/tooltip';
+export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, GeoZoomConfig, CoordinatesConfig } from './types/layout/coordinates';
+export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig } from './types/markers/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, 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

@@ -27,7 +27,7 @@ export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
 export { default as FacetIndicator } from './layout/facet/FacetIndicator.svelte';
 export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
 export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
-export { getLegendInteraction, provideLegendInteraction, createLegendInteraction, } from './layout/legend/interaction.svelte';
+export { getLegendInteraction, provideLegendInteraction, createLegendInteraction } from './layout/legend/interaction.svelte';
 // Markers
 export { default as BarMarker } from './markers/BarMarker.svelte';
 export { default as CellMarker } from './markers/CellMarker.svelte';
@@ -38,7 +38,7 @@ export { default as LineMarker } from './markers/LineMarker.svelte';
 export { default as PeakMarker } from './markers/PeakMarker.svelte';
 export { default as RuleMarker } from './markers/RuleMarker.svelte';
 export { default as TextMarker } from './markers/TextMarker.svelte';
-export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.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';

package/dist/layout/legend/DiscreteSection.svelte

@@ -1,139 +1,354 @@
 <script lang="ts">
-  import { SvelteSet } from 'svelte/reactivity';
-  import { getConfiguration } from '../../configuration/config.svelte';
-  import { paletteColor } from '../../utils/color';
-  import { getLegendInteraction, createLegendInteraction } from './interaction.svelte';
-  import type { DiscreteLegendSection, LegendItem } from '../../types/layout/legend';
-  import type { LineStyle } from '../../types/plots/constants';
-
-  let { section }: { section: DiscreteLegendSection } = $props();
-
-  const cfg = $derived(getConfiguration());
-  const columns = $derived(section.columns ?? 1);
-  const interaction = getLegendInteraction() ?? createLegendInteraction();
-
-  const seeded = new SvelteSet<string>();
-  $effect(() => {
-    for (const item of section.items) {
-      if (seeded.has(item.name)) continue;
-      seeded.add(item.name);
-      if (item.disabled) {
-        interaction.disabledSeries.set(item.name, section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity });
-      }
-    }
-  });
-
-  function toggle(item: LegendItem): void {
-    if (!section.interactive) return;
-    if (interaction.disabledSeries.has(item.name)) {
-      interaction.disabledSeries.delete(item.name);
-    } else {
-      interaction.disabledSeries.set(item.name, section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity });
-    }
-  }
-
-  function onKeydown(event: KeyboardEvent, item: LegendItem): void {
-    if (event.key !== 'Enter' && event.key !== ' ') return;
-    event.preventDefault();
-    toggle(item);
-  }
-
-  function dashArray(style?: LineStyle): string | undefined {
-    switch (style) {
-      case 'dashed':
-        return '2,5';
-      case 'dotted':
-        return '1,4';
-      case 'dashdot':
-        return '5,3,1,3';
-      default:
-        return undefined;
-    }
-  }
+	import { SvelteSet } from 'svelte/reactivity';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { paletteColor } from '../../utils/color';
+	import {
+		getLegendInteraction,
+		createLegendInteraction
+	} from './interaction.svelte';
+	import type {
+		DiscreteLegendSection,
+		LegendItem,
+		LegendNavDirection
+	} from '../../types/layout/legend';
+	import type { LineStyle } from '../../types/plots/constants';
+
+	let { section }: { section: DiscreteLegendSection } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const layout = $derived(section.layout ?? { type: 'vertical' as const });
+	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);
+	const interaction = getLegendInteraction() ?? createLegendInteraction();
+
+	const seeded = new SvelteSet<string>();
+	$effect(() => {
+		for (const item of section.items) {
+			if (seeded.has(item.name)) continue;
+			seeded.add(item.name);
+			if (item.disabled) {
+				interaction.disabledSeries.set(
+					item.name,
+					section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity }
+				);
+			}
+		}
+	});
+
+	function toggle(item: LegendItem): void {
+		if (!section.interactive) return;
+		if (interaction.disabledSeries.has(item.name)) {
+			interaction.disabledSeries.delete(item.name);
+		} else {
+			interaction.disabledSeries.set(
+				item.name,
+				section.disabledStyle ?? { opacity: cfg.legend.disabledOpacity }
+			);
+		}
+	}
+
+	function onKeydown(event: KeyboardEvent, item: LegendItem): void {
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		event.preventDefault();
+		toggle(item);
+	}
+
+	function dashArray(style?: LineStyle): string | undefined {
+		switch (style) {
+			case 'dashed':
+				return '2,5';
+			case 'dotted':
+				return '1,4';
+			case 'dashdot':
+				return '5,3,1,3';
+			default:
+				return undefined;
+		}
+	}
+
+	// ── Horizontal pagination ──────────────────────────────────────────────
+	// Rows are discovered by measuring where each item actually lands (its
+	// `offsetTop`) in a full, hidden copy of the list, laid out *in normal
+	// flow* right alongside the visible (paginated) one rather than
+	// `position: absolute`. That in-flow placement is deliberate, not
+	// incidental: an absolutely-positioned element is excluded from its
+	// ancestors' own width calculations, so once pagination narrowed the
+	// visible box down to one or two items, every ancestor up to the legend
+	// section — which sizes itself to fit its content, not the other way
+	// around — shrank down to hug that now-narrow content instead of staying
+	// pinned at the section's actual available width. Each further
+	// remeasurement then ran at that smaller width, wrapping even fewer
+	// items per row and shrinking again — a runaway feedback loop that read
+	// as items "disappearing" into ever-smaller pages. Keeping the full
+	// (wide) measurer in flow means its width, not the narrow visible page's,
+	// is what ancestors size against — `height: 0; overflow: hidden` below
+	// then clips away the vertical space it would otherwise take, so only
+	// its width — never its height — affects the layout, and the legend
+	// still visually shrinks the moment pagination reduces what's shown.
+	let measurerEl: HTMLDivElement | undefined = $state();
+	// Resize trigger only, so a later container resize re-runs the effect —
+	// its value isn't otherwise used (see the effect body).
+	let containerWidth = $state(0);
+	let rows = $state<number[][]>([]);
+
+	$effect(() => {
+		if (!isHorizontal || !measurerEl) {
+			rows = [];
+			return;
+		}
+		void section.items;
+		void containerWidth;
+		const children = Array.from(measurerEl.children) as HTMLElement[];
+		const grouped: number[][] = [];
+		let lastTop = Number.NaN;
+		for (let i = 0; i < children.length; i++) {
+			const top = children[i].offsetTop;
+			if (top !== lastTop) {
+				grouped.push([i]);
+				lastTop = top;
+			} else {
+				grouped[grouped.length - 1].push(i);
+			}
+		}
+		rows = grouped;
+	});
+
+	const totalPages = $derived(isHorizontal ? Math.max(1, Math.ceil(rows.length / maxRows)) : 1);
+	let page = $state(0);
+	$effect(() => {
+		if (page > totalPages - 1) page = Math.max(0, totalPages - 1);
+	});
+
+	const showNav = $derived(isHorizontal && totalPages > 1);
+
+	const visibleItems = $derived.by((): { item: LegendItem; i: number }[] => {
+		const all = section.items.map((item, i) => ({ item, i }));
+		if (!isHorizontal || rows.length === 0) return all;
+		const start = page * maxRows;
+		const end = Math.min(rows.length, start + maxRows);
+		// `rows` entries are already index-ascending, so flattening the page's
+		// row slice preserves item order without needing a lookup set.
+		return rows
+			.slice(start, end)
+			.flat()
+			.map((i) => all[i]);
+	});
+
+	function prevPage(): void {
+		page = Math.max(0, page - 1);
+	}
+	function nextPage(): void {
+		page = Math.min(totalPages - 1, page + 1);
+	}
 </script>
 
-<div class="dct-discrete" style:grid-template-columns="repeat({columns}, max-content)">
-  {#each section.items as item, i (item.name)}
-    {@const disabledStyle = interaction.disabledSeries.get(item.name)}
-    {@const color = disabledStyle?.fill ?? disabledStyle?.stroke?.stroke ?? item.color ?? paletteColor(i, cfg.palette)}
-    {@const itemOpacity = disabledStyle ? (disabledStyle.opacity ?? cfg.legend.disabledOpacity) : (item.opacity ?? 1)}
-    <div
-      class="dct-discrete__item"
-      class:dct-discrete__item--interactive={section.interactive}
-      style:opacity={itemOpacity}
-      {...section.interactive
-        ? {
-            role: 'button',
-            tabindex: 0,
-            'aria-pressed': disabledStyle != null,
-            onclick: () => toggle(item),
-            onkeydown: (e: KeyboardEvent) => onKeydown(e, item),
-          }
-        : {}}
-    >
-      <svg class="dct-discrete__swatch" viewBox="0 0 15 10">
-        {#if item.symbol === 'circle'}
-          <circle cx="5" cy="5" r="4" fill={color} />
-        {:else if item.symbol === 'square'}
-          <rect x="1" y="1" width="8" height="8" rx="2" fill={color} />
-        {:else if item.symbol === 'triangle'}
-          <path
-            d="M 6 2 L 9 7.5 A 1.5 1.5 0 0 1 7.8 10 L 2.2 10 A 1.5 1.5 0 0 1 1 7.5 L 4 2 A 1.5 1.5 0 0 1 6 2"
-            fill={color}
-            transform="translate(0,-1)"
-          />
-        {:else if item.symbol === 'line'}
-          <line
-            x1="2"
-            y1="5"
-            x2="13"
-            y2="5"
-            stroke={color}
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-dasharray={dashArray(item.lineStyle)}
-          />
-        {:else}
-          <rect x="1" y="1" width="8" height="8" fill={color} />
-        {/if}
-      </svg>
-      <span class="dct-discrete__label">{item.label || item.name}</span>
-    </div>
-  {/each}
-</div>
+{#snippet discreteItem(item: LegendItem, i: number)}
+	{@const disabledStyle = interaction.disabledSeries.get(item.name)}
+	{@const color =
+		disabledStyle?.fill ??
+		disabledStyle?.stroke?.stroke ??
+		item.color ??
+		paletteColor(i, cfg.palette)}
+	{@const itemOpacity = disabledStyle
+		? (disabledStyle.opacity ?? cfg.legend.disabledOpacity)
+		: (item.opacity ?? 1)}
+	<div
+		class="dct-discrete__item"
+		class:dct-discrete__item--interactive={section.interactive}
+		style:opacity={itemOpacity}
+		{...section.interactive
+			? {
+					role: 'button',
+					tabindex: 0,
+					'aria-pressed': disabledStyle != null,
+					onclick: () => toggle(item),
+					onkeydown: (e: KeyboardEvent) => onKeydown(e, item)
+				}
+			: {}}
+	>
+		<svg class="dct-discrete__swatch" viewBox="0 0 15 10">
+			{#if item.symbol === 'circle'}
+				<circle cx="5" cy="5" r="4" fill={color} />
+			{:else if item.symbol === 'square'}
+				<rect x="1" y="1" width="8" height="8" rx="2" fill={color} />
+			{:else if item.symbol === 'triangle'}
+				<path
+					d="M 6 2 L 9 7.5 A 1.5 1.5 0 0 1 7.8 10 L 2.2 10 A 1.5 1.5 0 0 1 1 7.5 L 4 2 A 1.5 1.5 0 0 1 6 2"
+					fill={color}
+					transform="translate(0,-1)"
+				/>
+			{:else if item.symbol === 'line'}
+				<line
+					x1="2"
+					y1="5"
+					x2="13"
+					y2="5"
+					stroke={color}
+					stroke-width="3"
+					stroke-linecap="round"
+					stroke-dasharray={dashArray(item.lineStyle)}
+				/>
+			{:else}
+				<rect x="1" y="1" width="8" height="8" fill={color} />
+			{/if}
+		</svg>
+		<span class="dct-discrete__label">{item.label || item.name}</span>
+	</div>
+{/snippet}
+
+{#snippet navButtonSlot(
+	direction: LegendNavDirection,
+	disabled: boolean,
+	onclick: () => void,
+	label: string
+)}
+	{#if section.navButton}
+		{@render section.navButton({ direction, disabled, onclick })}
+	{:else}
+		<button
+			type="button"
+			class="dct-discrete-paginated__btn"
+			{disabled}
+			{onclick}
+			aria-label={label}
+		>
+			{direction === 'prev' ? '‹' : '›'}
+		</button>
+	{/if}
+{/snippet}
+
+{#if isHorizontal}
+	<div class="dct-discrete-paginated">
+		{#if showNav}
+			{@render navButtonSlot('prev', page === 0, prevPage, 'Página anterior de referencias')}
+		{/if}
+		<div class="dct-discrete-horizontal" bind:clientWidth={containerWidth}>
+			<div class="dct-discrete dct-discrete--horizontal">
+				{#each visibleItems as { item, i } (item.name)}
+					{@render discreteItem(item, i)}
+				{/each}
+			</div>
+			<div
+				class="dct-discrete dct-discrete--horizontal dct-discrete--measure"
+				bind:this={measurerEl}
+				aria-hidden="true"
+			>
+				{#each section.items as item, i (item.name)}
+					{@render discreteItem(item, i)}
+				{/each}
+			</div>
+		</div>
+		{#if showNav}
+			{@render navButtonSlot(
+				'next',
+				page >= totalPages - 1,
+				nextPage,
+				'Página siguiente de referencias'
+			)}
+		{/if}
+	</div>
+{:else}
+	<div class="dct-discrete" style:grid-template-columns="repeat({columns}, max-content)">
+		{#each section.items as item, i (item.name)}
+			{@render discreteItem(item, i)}
+		{/each}
+	</div>
+{/if}
 
 <style>
-  .dct-discrete {
-    display: grid;
-    column-gap: 1.25rem;
-    row-gap: 0.4rem;
-    max-width: 100%;
-  }
-  .dct-discrete__item {
-    display: flex;
-    align-items: center;
-    gap: 0.35rem;
-    min-width: 0;
-    transition: opacity 0.15s ease;
-  }
-  .dct-discrete__item--interactive {
-    cursor: pointer;
-  }
-  .dct-discrete__item--interactive:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-  }
-  .dct-discrete__swatch {
-    width: var(--dct-legend-swatch, 1.25rem);
-    height: var(--dct-legend-swatch, 1.25rem);
-    flex-shrink: 0;
-  }
-  .dct-discrete__label {
-    font-size: var(--dct-legend-size, 0.875rem);
-    font-weight: var(--dct-legend-weight, 400);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 0;
-  }
+	.dct-discrete {
+		display: grid;
+		column-gap: 1.25rem;
+		row-gap: 0.4rem;
+		max-width: 100%;
+	}
+	.dct-discrete--horizontal {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	/* Items keep their natural (max-content) width and wrap to a new row
+     instead of shrinking/truncating — matching the grid variant, where
+     `grid-template-columns: repeat(n, max-content)` never shrinks a column
+     either. Without this, flex's default `flex-shrink: 1` would cram every
+     item onto one line by squeezing labels down via their own
+     `overflow: hidden` before ever wrapping. */
+	.dct-discrete--horizontal .dct-discrete__item {
+		flex-shrink: 0;
+	}
+	/* Flanks the rows with the prev/next buttons (when present) instead of
+	   stacking them below — `align-items: center` keeps each button centered
+	   against the full block of rows, not pinned to its first/last row. */
+	.dct-discrete-paginated {
+		display: flex;
+		align-items: center;
+		gap: var(--dct-legend-nav-gap, 0.35rem);
+	}
+	.dct-discrete-horizontal {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	/* Full, untruncated copy of the list used only to measure row breaks — kept
+     in normal flow (see the long comment on the measurement effect for why
+     it must NOT be `position: absolute` here), with its height collapsed to
+     0 and clipped so it never adds any visible space of its own. Reading
+     `offsetTop` off its children still works: `overflow: hidden` only clips
+     what's *painted*, not each child's actual computed layout position. */
+	.dct-discrete--measure {
+		height: 0;
+		overflow: hidden;
+		visibility: hidden;
+		pointer-events: none;
+	}
+	.dct-discrete__item {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		min-width: 0;
+		transition: opacity 0.15s ease;
+	}
+	.dct-discrete__item--interactive {
+		cursor: pointer;
+	}
+	.dct-discrete__item--interactive:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+	.dct-discrete__swatch {
+		width: var(--dct-legend-swatch, 1.25rem);
+		height: var(--dct-legend-swatch, 1.25rem);
+		flex-shrink: 0;
+	}
+	.dct-discrete__label {
+		font-size: var(--dct-legend-size, 0.875rem);
+		font-weight: var(--dct-legend-weight, 400);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 0;
+	}
+
+	.dct-discrete-paginated__btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		border: none;
+		border-radius: var(--dct-legend-nav-radius, 999px);
+		width: var(--dct-legend-nav-size, 1.5rem);
+		height: var(--dct-legend-nav-size, 1.5rem);
+		padding: 0;
+		font-size: var(--dct-legend-nav-font-size, 1rem);
+		line-height: 1;
+		background: var(--dct-legend-nav-bg, transparent);
+		color: var(--dct-legend-nav-color, currentColor);
+		cursor: pointer;
+	}
+	.dct-discrete-paginated__btn:hover:not(:disabled) {
+		background: var(--dct-legend-nav-hover-bg, color-mix(in srgb, currentColor 10%, transparent));
+	}
+	.dct-discrete-paginated__btn:disabled {
+		opacity: var(--dct-legend-nav-disabled-opacity, 0.3);
+		cursor: default;
+	}
 </style>

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

@@ -39,6 +39,14 @@ export type ChartConfig = {
         swatchSize: string;
         /** Fallback opacity for a legend-disabled series/value when a section doesn't set its own `disabledStyle`. */
         disabledOpacity: number;
+        /** Prev/next arrows shown when a `layout: { type: 'horizontal' }` discrete section overflows `maxRows`. */
+        navButton: {
+            background: string;
+            color: string;
+            size: string;
+            fontSize: string;
+            disabledOpacity: number;
+        };
     };
     axis: {
         color: string;

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { SvelteMap } from 'svelte/reactivity';
 import type { SymbolType, LineStyle } from '../plots/constants';
 import type { StrokeStyle, DotStyle } from '../plots/styling';
@@ -26,15 +27,37 @@ export type LegendItem = {
     /** Initial toggled-off state (uncontrolled — the user can still click it back on). */
     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.
+ */
+export type LegendItemsLayout = {
+    type: 'vertical';
+} | {
+    type: 'horizontal';
+    maxRows?: number;
+};
+export type LegendNavDirection = 'prev' | 'next';
+export type LegendNavContext = {
+    direction: LegendNavDirection;
+    disabled: boolean;
+    onclick: () => void;
+};
+/** Custom prev/next button renderer for a paginated horizontal section. Falls back to a small default arrow button. */
+export type LegendNavSnippet = Snippet<[LegendNavContext]>;
 export type DiscreteLegendSection = {
     type: 'discrete';
     title?: string;
     items: LegendItem[];
     columns?: number;
-    /** Enables click-to-toggle on each item. */
+    /** Item flow direction. Defaults to `{ type: 'vertical' }` (unchanged prior behaviour). */
+    layout?: LegendItemsLayout;
     interactive?: boolean;
-    /** Style applied to a toggled-off item's series. Falls back to `cfg.legend.disabledOpacity`. */
     disabledStyle?: LegendDisabledStyle;
+    navButton?: LegendNavSnippet;
 };
 export type ContinuousLegendSection = {
     type: 'continuous';
@@ -47,7 +70,6 @@ export type ContinuousLegendSection = {
     ticks?: number[];
     width?: number;
     format?: (v: number) => string;
-    /** Enables drag handles on the bar's edges to narrow the visible range. */
     interactive?: boolean;
     /**
      * How the color ramp responds to a narrowed range: `'rescale'` reprojects
@@ -55,7 +77,6 @@ export type ContinuousLegendSection = {
      * excludes out-of-range values. Defaults to `'filter'`.
      */
     mode?: 'rescale' | 'filter';
-    /** Style applied to values outside the active range. Falls back to `cfg.legend.disabledOpacity`. */
     disabledStyle?: LegendDisabledStyle;
 };
 export type LegendSection = DiscreteLegendSection | ContinuousLegendSection;

package/package.json

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