@sentropic/design-system-svelte 0.34.25 → 0.34.27

package/dist/AreaChart.svelte

@@ -25,6 +25,7 @@
   } from "./chartAnnotations.js";
   import { formatDataLabel, normalizeDataLabels, type DataLabelsProp } from "./chartDataLabels.js";
   import { keyForX, resolveActiveIndex } from "./chartCrosshair.js";
+  import { datapointAriaLabel, datapointNavAction, rovingTabIndex } from "./chartKeyboardNav.js";
 
   type AreaChartProps = {
     data: (number | AreaChartDatum)[];
@@ -61,6 +62,21 @@
      * keep the shared hover channel in sync.
      */
     onHoverKeyChange?: (key: string | null) => void;
+    /**
+     * FR-5 — keyboard navigation of the data points (roving tabindex). When `true`
+     * (or implied by wiring `onSelectKey`), a thin focusable overlay is rendered
+     * over the points: the chart owns ONE tab stop, ←/↑/→/↓ move the focus between
+     * points (data order), Home/End jump to the first/last, Enter/Space select the
+     * focused point (`onSelectKey`), Escape leaves the navigation. Each focused
+     * point announces its `x` + value. Absent ⇒ no overlay, rendering unchanged.
+     */
+    keyboardNav?: boolean;
+    /**
+     * Emitted when the user selects the focused point via Enter/Space (its key,
+     * `String(x)`), or `null` when the navigation is left via Escape. Wiring it
+     * also turns the keyboard navigation on.
+     */
+    onSelectKey?: (key: string | null) => void;
     class?: string;
   };
 
@@ -75,6 +91,8 @@
     dataLabels,
     hoverKey,
     onHoverKeyChange,
+    keyboardNav,
+    onSelectKey,
     class: className
   }: AreaChartProps = $props();
 
@@ -133,6 +151,9 @@
   ]);
 
   let hoveredIndex: number | null = $state(null);
+  // FR-5 — roving keyboard focus over the data points (separate from hover).
+  let focusedIndex: number = $state(-1);
+  let datapointRefs: Array<SVGRectElement | null> = [];
 
   const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
   const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
@@ -316,6 +337,35 @@
   // provided (resolved against `hoverKeys`), else the internal pointer index.
   const activeIndex = $derived(resolveActiveIndex(hoverKey, hoveredIndex, hoverKeys));
 
+  // --- Keyboard navigation (FR-5) ------------------------------------------
+  // Active when wired explicitly (`keyboardNav`) or implicitly (`onSelectKey`).
+  // Renders a focusable overlay (one transparent hit-rect per point) carrying a
+  // single roving tab stop. Arrow/Home/End move focus, Enter/Space select,
+  // Escape leaves. Focus also feeds the shared hover channel (FR-3 synergy).
+  const navEnabled = $derived((keyboardNav === true || onSelectKey !== undefined) && points.length > 0);
+  // Comfortable square hit area centred on each dot.
+  const NAV_HIT = 18;
+  function focusDatum(index: number) {
+    focusedIndex = index;
+    datapointRefs[index]?.focus();
+    emitHoverKey(index);
+  }
+  function handleDatapointKeyDown(event: KeyboardEvent, index: number) {
+    const action = datapointNavAction(event.key, index, points.length);
+    if (!action) return;
+    event.preventDefault();
+    if (action.kind === "move") {
+      focusDatum(action.index);
+    } else if (action.kind === "select") {
+      onSelectKey?.(hoverKeys[index] ?? null);
+    } else {
+      focusedIndex = -1;
+      emitHoverKey(null);
+      onSelectKey?.(null);
+      (event.currentTarget as SVGElement).blur();
+    }
+  }
+
   // Generates a unique gradient id to avoid conflicts when rendering multiple charts on the same page
   const gradientId = $derived.by(() => {
     return `st-areachart-gradient-${Math.random().toString(36).substring(2, 9)}`;
@@ -484,6 +534,42 @@
       </g>
     {/if}
     </svg>
+
+    <!-- Keyboard navigation overlay (FR-5) — a focusable, transparent hit layer
+         over the points. NOT aria-hidden: it is the accessible roving cursor.
+         Each rect announces its category + value; the focus ring is tokenised
+         via CSS. Absent unless keyboard nav is enabled. -->
+    {#if navEnabled}
+      <svg
+        class="st-areaChart__navLayer"
+        viewBox="0 0 {width} {height}"
+        preserveAspectRatio="xMidYMid meet"
+        width="100%"
+        height="100%"
+        role="group"
+        aria-label={`${label} — points de données`}
+      >
+        {#each points as p, i (p.index)}
+          <rect
+            bind:this={datapointRefs[i]}
+            class="st-areaChart__navDatum"
+            x={p.x - NAV_HIT / 2}
+            y={p.y - NAV_HIT / 2}
+            width={NAV_HIT}
+            height={NAV_HIT}
+            rx="3"
+            role="img"
+            tabindex={rovingTabIndex(i, focusedIndex, points.length)}
+            aria-label={datapointAriaLabel(p.datum.x, p.datum.y)}
+            onkeydown={(event) => handleDatapointKeyDown(event, i)}
+            onfocus={() => {
+              focusedIndex = i;
+              emitHoverKey(i);
+            }}
+          />
+        {/each}
+      </svg>
+    {/if}
   </div>
 
   <ChartDataList {label} items={dataValueItems} />
@@ -526,6 +612,7 @@
 
   .st-areaChart__visual {
     display: block;
+    position: relative;
   }
 
   .st-areaChart__grid {

package/dist/AreaChart.svelte.d.ts

@@ -40,6 +40,21 @@ type AreaChartProps = {
      * keep the shared hover channel in sync.
      */
     onHoverKeyChange?: (key: string | null) => void;
+    /**
+     * FR-5 — keyboard navigation of the data points (roving tabindex). When `true`
+     * (or implied by wiring `onSelectKey`), a thin focusable overlay is rendered
+     * over the points: the chart owns ONE tab stop, ←/↑/→/↓ move the focus between
+     * points (data order), Home/End jump to the first/last, Enter/Space select the
+     * focused point (`onSelectKey`), Escape leaves the navigation. Each focused
+     * point announces its `x` + value. Absent ⇒ no overlay, rendering unchanged.
+     */
+    keyboardNav?: boolean;
+    /**
+     * Emitted when the user selects the focused point via Enter/Space (its key,
+     * `String(x)`), or `null` when the navigation is left via Escape. Wiring it
+     * also turns the keyboard navigation on.
+     */
+    onSelectKey?: (key: string | null) => void;
     class?: string;
 };
 declare const AreaChart: import("svelte").Component<AreaChartProps, {}, "">;

package/dist/AreaChart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AreaChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAIJ,OAAO,EAIH,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AACjC,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI/F,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkYJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AreaChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AreaChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAIJ,OAAO,EAIH,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AACjC,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAK/F,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAibJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/BarChart.svelte

@@ -58,6 +58,7 @@
   } from "./chartAnnotations.js";
   import { formatDataLabel, normalizeDataLabels, type DataLabelsProp } from "./chartDataLabels.js";
   import { resolveActiveIndex } from "./chartCrosshair.js";
+  import { datapointAriaLabel, datapointNavAction, rovingTabIndex } from "./chartKeyboardNav.js";
 
   type BarChartProps = {
     data: BarChartDatum[];
@@ -139,6 +140,21 @@
      * keep the shared hover channel in sync.
      */
     onHoverKeyChange?: (key: string | null) => void;
+    /**
+     * FR-5 — keyboard navigation of the data points (roving tabindex). When `true`
+     * (or implied by wiring `onSelectKey`), a thin focusable overlay is rendered
+     * over the bars: the chart owns ONE tab stop, ←/↑/→/↓ move the focus between
+     * bars (data order), Home/End jump to the first/last, Enter/Space select the
+     * focused bar (`onSelectKey`), Escape leaves the navigation. Each focused bar
+     * announces its `label` + value. Absent ⇒ no overlay, rendering unchanged.
+     */
+    keyboardNav?: boolean;
+    /**
+     * Emitted when the user selects the focused bar via Enter/Space (its `label`),
+     * or `null` when the navigation is left via Escape. Wiring it also turns the
+     * keyboard navigation on. Independent of `onSelect`/`selectedKeys`.
+     */
+    onSelectKey?: (key: string | null) => void;
     class?: string;
   };
 
@@ -161,6 +177,8 @@
     showLegend,
     hoverKey,
     onHoverKeyChange,
+    keyboardNav,
+    onSelectKey,
     class: className
   }: BarChartProps = $props();
 
@@ -643,6 +661,36 @@
   // provided (resolved against `hoverKeys`), else the internal pointer index.
   const activeIndex = $derived(resolveActiveIndex(hoverKey, hoveredIndex, hoverKeys));
 
+  // --- Keyboard navigation (FR-5) ------------------------------------------
+  // Active when wired explicitly (`keyboardNav`) or implicitly (`onSelectKey`).
+  // Renders a focusable overlay (one transparent hit-rect per bar) carrying a
+  // single roving tab stop. Arrow/Home/End move focus, Enter/Space select,
+  // Escape leaves. Focus also feeds the shared hover channel (FR-3 synergy).
+  let focusedIndex: number = $state(-1);
+  let datapointRefs: Array<SVGRectElement | null> = [];
+  const navEnabled = $derived((keyboardNav === true || onSelectKey !== undefined) && bars.length > 0);
+  function focusDatum(index: number) {
+    focusedIndex = index;
+    datapointRefs[index]?.focus();
+    emitHoverKey(index);
+  }
+  function handleDatapointKeyDown(event: KeyboardEvent, index: number) {
+    const action = datapointNavAction(event.key, index, bars.length);
+    if (!action) return;
+    event.preventDefault();
+    if (action.kind === "move") {
+      focusDatum(action.index);
+    } else if (action.kind === "select") {
+      onSelectKey?.(bars[index].datum.label);
+    } else {
+      // Escape — leave the navigation: clear focus + hover channel.
+      focusedIndex = -1;
+      emitHoverKey(null);
+      onSelectKey?.(null);
+      (event.currentTarget as SVGElement).blur();
+    }
+  }
+
   const classes = () => ["st-barChart", className].filter(Boolean).join(" ");
 </script>
 
@@ -882,6 +930,41 @@
       </g>
     {/if}
     </svg>
+
+    <!-- Keyboard navigation overlay (FR-5) — a focusable, transparent hit layer
+         over the bars. NOT aria-hidden: it is the accessible roving cursor. Each
+         rect announces its category + value; the focus ring is tokenised via CSS.
+         Absent unless keyboard nav is enabled. -->
+    {#if navEnabled}
+      <svg
+        class="st-barChart__navLayer"
+        viewBox="0 0 {width} {height}"
+        preserveAspectRatio="xMidYMid meet"
+        width="100%"
+        height="100%"
+        role="group"
+        aria-label={`${label} — points de données`}
+      >
+        {#each bars as bar, i (bar.datum.label)}
+          <rect
+            bind:this={datapointRefs[i]}
+            class="st-barChart__navDatum"
+            x={bar.x}
+            y={bar.y}
+            width={bar.width}
+            height={bar.height}
+            role="img"
+            tabindex={rovingTabIndex(i, focusedIndex, bars.length)}
+            aria-label={datapointAriaLabel(bar.datum.label, bar.datum.value)}
+            onkeydown={(event) => handleDatapointKeyDown(event, i)}
+            onfocus={() => {
+              focusedIndex = i;
+              emitHoverKey(i);
+            }}
+          />
+        {/each}
+      </svg>
+    {/if}
   </div>
 
   {#if interactive}

package/dist/BarChart.svelte.d.ts

@@ -113,6 +113,21 @@ type BarChartProps = {
      * keep the shared hover channel in sync.
      */
     onHoverKeyChange?: (key: string | null) => void;
+    /**
+     * FR-5 — keyboard navigation of the data points (roving tabindex). When `true`
+     * (or implied by wiring `onSelectKey`), a thin focusable overlay is rendered
+     * over the bars: the chart owns ONE tab stop, ←/↑/→/↓ move the focus between
+     * bars (data order), Home/End jump to the first/last, Enter/Space select the
+     * focused bar (`onSelectKey`), Escape leaves the navigation. Each focused bar
+     * announces its `label` + value. Absent ⇒ no overlay, rendering unchanged.
+     */
+    keyboardNav?: boolean;
+    /**
+     * Emitted when the user selects the focused bar via Enter/Space (its `label`),
+     * or `null` when the navigation is left via Escape. Wiring it also turns the
+     * keyboard navigation on. Independent of `onSelect`/`selectedKeys`.
+     */
+    onSelectKey?: (key: string | null) => void;
     class?: string;
 };
 declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;

package/dist/BarChart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/BarChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,YAAY,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,sEAAsE;AACtE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;AAI5C,OAAO,EAIH,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AACjC,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI/F,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,+DAA+D;IAC/D,cAAc,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8qBJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/BarChart.svelte.ts"],"names":[],"mappings":"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"}

package/dist/ComboChart.svelte

@@ -33,6 +33,15 @@
     leftAxisLabel?: string;
     rightAxisLabel?: string;
     legend?: boolean;
+    /**
+     * Interactive legend (FR-4). Ids/labels of bar/line series hidden from the
+     * render (controlled by the parent; default = all visible). Hidden series
+     * are omitted and their legend item is shown "off" (`aria-pressed`).
+     * Undefined → legacy non-interactive legend, unless `onToggleSeries` is set.
+     */
+    hiddenSeries?: string[];
+    /** Emitted on click / Enter / Space on a legend item. */
+    onToggleSeries?: (seriesId: string) => void;
     width?: number;
     height?: number;
     label: string;
@@ -46,12 +55,18 @@
     leftAxisLabel,
     rightAxisLabel,
     legend = true,
+    hiddenSeries,
+    onToggleSeries,
     width = 480,
     height = 240,
     label,
     class: className
   }: ComboChartProps = $props();
 
+  // Interactive legend is active as soon as the parent wires either prop.
+  const legendInteractive = $derived(onToggleSeries !== undefined || hiddenSeries !== undefined);
+  const hiddenSet = $derived(new Set(hiddenSeries ?? []));
+
   const MARGIN = { top: 12, right: 52, bottom: 32, left: 52 };
 
   function niceTicks(min: number, max: number, target = 5): number[] {
@@ -92,8 +107,9 @@
   const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
 
   // Left axis (bars): include zero in the domain so bars rest on a baseline.
+  // Hidden series are excluded so the axis rescales to what is visible.
   const leftScale = $derived.by(() => {
-    const values = bars.flatMap((s) => s.data);
+    const values = bars.filter((s) => !hiddenSet.has(s.label)).flatMap((s) => s.data);
     const minRaw = Math.min(0, ...(values.length ? values : [0]));
     const maxRaw = Math.max(0, ...(values.length ? values : [0]));
     const ticks = niceTicks(minRaw, maxRaw, 5);
@@ -102,7 +118,7 @@
 
   // Right axis (lines): padded domain like LineChart.
   const rightScale = $derived.by(() => {
-    const values = lines.flatMap((s) => s.data);
+    const values = lines.filter((s) => !hiddenSet.has(s.label)).flatMap((s) => s.data);
     if (values.length === 0) {
       const ticks = niceTicks(0, 1, 5);
       return { ticks, domainMin: ticks[0], domainMax: ticks[ticks.length - 1] };
@@ -136,6 +152,7 @@
       const groupX = MARGIN.left + band * ci + (band - groupWidth) / 2;
       const segments = bars
         .map((series, si) => {
+          if (hiddenSet.has(series.label)) return null;
           const raw = series.data[ci];
           if (!isPresent(raw)) return null;
           const value = raw;
@@ -203,6 +220,7 @@
         path,
         points,
         seriesLabel: series.label,
+        hidden: hiddenSet.has(series.label),
         tone: series.tone ?? `category${((bars.length + li) % 8) + 1}`
       };
     });
@@ -240,12 +258,12 @@
   ]);
 
   const dataValueItems = $derived([
-    ...bars.flatMap((s) =>
-      categories.map((c, ci) => `${s.label}, ${c}: ${s.data[ci] ?? 0}`)
-    ),
-    ...lines.flatMap((s) =>
-      categories.map((c, ci) => `${s.label}, ${c}: ${s.data[ci] ?? 0}`)
-    )
+    ...bars
+      .filter((s) => !hiddenSet.has(s.label))
+      .flatMap((s) => categories.map((c, ci) => `${s.label}, ${c}: ${s.data[ci] ?? 0}`)),
+    ...lines
+      .filter((s) => !hiddenSet.has(s.label))
+      .flatMap((s) => categories.map((c, ci) => `${s.label}, ${c}: ${s.data[ci] ?? 0}`))
   ]);
 
   type Hover =
@@ -404,25 +422,27 @@
 
       <!-- lines -->
       {#each lineSeries as series, li (li)}
-        <path
-          class="st-comboChart__line st-comboChart__line--{series.tone}"
-          d={series.path}
-          fill="none"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        {#each series.points as p, pi (pi)}
-          <circle
-            class="st-comboChart__dot st-comboChart__dot--{series.tone}"
-            cx={p.x}
-            cy={p.y}
-            r="4"
-            data-chart-kind="line"
-            data-chart-a={li}
-            data-chart-b={pi}
+        {#if !series.hidden}
+          <path
+            class="st-comboChart__line st-comboChart__line--{series.tone}"
+            d={series.path}
+            fill="none"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           />
-        {/each}
+          {#each series.points as p, pi (pi)}
+            <circle
+              class="st-comboChart__dot st-comboChart__dot--{series.tone}"
+              cx={p.x}
+              cy={p.y}
+              r="4"
+              data-chart-kind="line"
+              data-chart-a={li}
+              data-chart-b={pi}
+            />
+          {/each}
+        {/if}
       {/each}
     </svg>
   </div>
@@ -430,13 +450,28 @@
   <ChartDataList {label} items={dataValueItems} />
 
   {#if legend && legendItems.length > 0}
-    <ul class="st-comboChart__legend" aria-hidden="true">
+    <ul class="st-comboChart__legend" aria-hidden={legendInteractive ? undefined : "true"}>
       {#each legendItems as item (item.key)}
-        <li class="st-comboChart__legendItem">
-          <span
-            class="st-comboChart__legendSwatch st-comboChart__legendSwatch--{item.kind} st-comboChart__legendSwatch--{item.tone}"
-          ></span>
-          {item.label}
+        {@const off = hiddenSet.has(item.label)}
+        <li class="st-comboChart__legendItem" class:st-comboChart__legendItem--off={legendInteractive && off}>
+          {#if legendInteractive}
+            <button
+              type="button"
+              class="st-comboChart__legendButton"
+              aria-pressed={off}
+              onclick={() => onToggleSeries?.(item.label)}
+            >
+              <span
+                class="st-comboChart__legendSwatch st-comboChart__legendSwatch--{item.kind} st-comboChart__legendSwatch--{item.tone}"
+              ></span>
+              {item.label}
+            </button>
+          {:else}
+            <span
+              class="st-comboChart__legendSwatch st-comboChart__legendSwatch--{item.kind} st-comboChart__legendSwatch--{item.tone}"
+            ></span>
+            {item.label}
+          {/if}
         </li>
       {/each}
     </ul>
@@ -567,6 +602,28 @@
     gap: var(--st-spacing-1, 0.25rem);
   }
 
+  .st-comboChart__legendItem--off {
+    opacity: 0.45;
+  }
+
+  .st-comboChart__legendButton {
+    align-items: center;
+    background: none;
+    border: 0;
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    gap: var(--st-spacing-1, 0.25rem);
+    padding: 0.125rem 0.25rem;
+  }
+
+  .st-comboChart__legendButton:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive);
+    outline-offset: 2px;
+  }
+
   .st-comboChart__legendSwatch {
     display: inline-block;
     flex: none;

package/dist/ComboChart.svelte.d.ts

@@ -17,6 +17,15 @@ type ComboChartProps = {
     leftAxisLabel?: string;
     rightAxisLabel?: string;
     legend?: boolean;
+    /**
+     * Interactive legend (FR-4). Ids/labels of bar/line series hidden from the
+     * render (controlled by the parent; default = all visible). Hidden series
+     * are omitted and their legend item is shown "off" (`aria-pressed`).
+     * Undefined → legacy non-interactive legend, unless `onToggleSeries` is set.
+     */
+    hiddenSeries?: string[];
+    /** Emitted on click / Enter / Space on a legend item. */
+    onToggleSeries?: (seriesId: string) => void;
     width?: number;
     height?: number;
     label: string;

package/dist/ComboChart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ComboChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0VJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ComboChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ComboChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAMF,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,yDAAyD;IACzD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6WJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/LineChart.svelte

@@ -61,6 +61,7 @@
   } from "./chartAnnotations.js";
   import { formatDataLabel, normalizeDataLabels, type DataLabelsProp } from "./chartDataLabels.js";
   import { keyForX, resolveActiveIndex } from "./chartCrosshair.js";
+  import { datapointAriaLabel, datapointNavAction, rovingTabIndex } from "./chartKeyboardNav.js";
 
   type LineChartProps = {
     data: LineChartDatum[];
@@ -126,6 +127,21 @@
      * keep the shared hover channel in sync.
      */
     onHoverKeyChange?: (key: string | null) => void;
+    /**
+     * FR-5 — keyboard navigation of the data points (roving tabindex). When `true`
+     * (or implied by wiring `onSelectKey`), a thin focusable overlay is rendered
+     * over the points: the chart owns ONE tab stop, ←/↑/→/↓ move the focus between
+     * points (data order), Home/End jump to the first/last, Enter/Space select the
+     * focused point (`onSelectKey`), Escape leaves the navigation. Each focused
+     * point announces its `x` + value. Absent ⇒ no overlay, rendering unchanged.
+     */
+    keyboardNav?: boolean;
+    /**
+     * Emitted when the user selects the focused point via Enter/Space (its key,
+     * `String(x)`), or `null` when the navigation is left via Escape. Wiring it
+     * also turns the keyboard navigation on.
+     */
+    onSelectKey?: (key: string | null) => void;
     class?: string;
   };
 
@@ -149,6 +165,8 @@
     showLegend,
     hoverKey,
     onHoverKeyChange,
+    keyboardNav,
+    onSelectKey,
     class: className
   }: LineChartProps = $props();
 
@@ -323,6 +341,9 @@
   }
 
   let hoveredIndex: number | null = $state(null);
+  // FR-5 — roving keyboard focus over the data points (separate from hover).
+  let focusedIndex: number = $state(-1);
+  let datapointRefs: Array<SVGRectElement | null> = [];
 
   const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
   const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
@@ -661,6 +682,35 @@
   // provided (resolved against `hoverKeys`), else the internal pointer index.
   const activeIndex = $derived(resolveActiveIndex(hoverKey, hoveredIndex, hoverKeys));
 
+  // --- Keyboard navigation (FR-5) ------------------------------------------
+  // Active when wired explicitly (`keyboardNav`) or implicitly (`onSelectKey`).
+  // Renders a focusable overlay (one transparent hit-rect per point) carrying a
+  // single roving tab stop. Arrow/Home/End move focus, Enter/Space select,
+  // Escape leaves. Focus also feeds the shared hover channel (FR-3 synergy).
+  const navEnabled = $derived((keyboardNav === true || onSelectKey !== undefined) && points.length > 0);
+  // Comfortable square hit area centred on each dot.
+  const NAV_HIT = 18;
+  function focusDatum(index: number) {
+    focusedIndex = index;
+    datapointRefs[index]?.focus();
+    emitHoverKey(index);
+  }
+  function handleDatapointKeyDown(event: KeyboardEvent, index: number) {
+    const action = datapointNavAction(event.key, index, points.length);
+    if (!action) return;
+    event.preventDefault();
+    if (action.kind === "move") {
+      focusDatum(action.index);
+    } else if (action.kind === "select") {
+      onSelectKey?.(hoverKeys[index] ?? null);
+    } else {
+      focusedIndex = -1;
+      emitHoverKey(null);
+      onSelectKey?.(null);
+      (event.currentTarget as SVGElement).blur();
+    }
+  }
+
   const classes = () =>
     ["st-lineChart", `st-lineChart--${tone}`, className].filter(Boolean).join(" ");
 </script>
@@ -862,6 +912,42 @@
       </g>
     {/if}
     </svg>
+
+    <!-- Keyboard navigation overlay (FR-5) — a focusable, transparent hit layer
+         over the points. NOT aria-hidden: it is the accessible roving cursor.
+         Each rect announces its category + value; the focus ring is tokenised
+         via CSS. Absent unless keyboard nav is enabled. -->
+    {#if navEnabled}
+      <svg
+        class="st-lineChart__navLayer"
+        viewBox="0 0 {width} {height}"
+        preserveAspectRatio="xMidYMid meet"
+        width="100%"
+        height="100%"
+        role="group"
+        aria-label={`${label} — points de données`}
+      >
+        {#each points as p, i (p.index)}
+          <rect
+            bind:this={datapointRefs[i]}
+            class="st-lineChart__navDatum"
+            x={p.x - NAV_HIT / 2}
+            y={p.y - NAV_HIT / 2}
+            width={NAV_HIT}
+            height={NAV_HIT}
+            rx="3"
+            role="img"
+            tabindex={rovingTabIndex(i, focusedIndex, points.length)}
+            aria-label={datapointAriaLabel(p.datum.x, p.datum.y)}
+            onkeydown={(event) => handleDatapointKeyDown(event, i)}
+            onfocus={() => {
+              focusedIndex = i;
+              emitHoverKey(i);
+            }}
+          />
+        {/each}
+      </svg>
+    {/if}
   </div>
 
   <ChartDataList {label} items={dataValueItems} />
@@ -904,6 +990,7 @@
 
   .st-lineChart__visual {
     display: block;
+    position: relative;
   }
 
   .st-lineChart__grid {

package/dist/LineChart.svelte.d.ts

@@ -100,6 +100,21 @@ type LineChartProps = {
      * keep the shared hover channel in sync.
      */
     onHoverKeyChange?: (key: string | null) => void;
+    /**
+     * FR-5 — keyboard navigation of the data points (roving tabindex). When `true`
+     * (or implied by wiring `onSelectKey`), a thin focusable overlay is rendered
+     * over the points: the chart owns ONE tab stop, ←/↑/→/↓ move the focus between
+     * points (data order), Home/End jump to the first/last, Enter/Space select the
+     * focused point (`onSelectKey`), Escape leaves the navigation. Each focused
+     * point announces its `x` + value. Absent ⇒ no overlay, rendering unchanged.
+     */
+    keyboardNav?: boolean;
+    /**
+     * Emitted when the user selects the focused point via Enter/Space (its key,
+     * `String(x)`), or `null` when the navigation is left via Escape. Wiring it
+     * also turns the keyboard navigation on.
+     */
+    onSelectKey?: (key: string | null) => void;
     class?: string;
 };
 declare const LineChart: import("svelte").Component<LineChartProps, {}, "">;

package/dist/LineChart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LineChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,sEAAsE;AACtE,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;AAI5C,OAAO,EAIH,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AACjC,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI/F,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,cAAc,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACtC,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+qBJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LineChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LineChart.svelte.ts"],"names":[],"mappings":"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"}

package/dist/StackedBarChart.svelte

@@ -33,6 +33,16 @@
      * values already live in the accessible ChartDataList.
      */
     dataLabels?: DataLabelsProp;
+    /**
+     * Interactive legend (FR-4). Ids/labels of series hidden from the render
+     * (controlled by the parent; default = all visible). Each segment whose
+     * `label` ∈ `hiddenSeries` is omitted and its legend item is shown "off"
+     * (`aria-pressed`). Undefined → legacy non-interactive legend, unless
+     * `onToggleSeries` is provided.
+     */
+    hiddenSeries?: string[];
+    /** Emitted on click / Enter / Space on a legend item. */
+    onToggleSeries?: (seriesId: string) => void;
     class?: string;
   };
 
@@ -43,9 +53,15 @@
     label,
     showLegend = true,
     dataLabels,
+    hiddenSeries,
+    onToggleSeries,
     class: className
   }: StackedBarChartProps = $props();
 
+  // Interactive legend is active as soon as the parent wires either prop.
+  const legendInteractive = $derived(onToggleSeries !== undefined || hiddenSeries !== undefined);
+  const hiddenSet = $derived(new Set(hiddenSeries ?? []));
+
   const MARGIN = { top: 14, right: 16, bottom: 34, left: 44 };
   const TONES = ["category1","category2","category3","category4","category5","category6","category7","category8"] as const;
 
@@ -81,7 +97,9 @@
   let hovered: { bar: number; seg: number } | null = $state(null);
 
   const scales = $derived.by(() => {
-    const totals = data.map((b) => b.segments.reduce((s, x) => s + Math.max(x.value, 0), 0));
+    const totals = data.map((b) =>
+      b.segments.reduce((s, x) => (hiddenSet.has(x.label) ? s : s + Math.max(x.value, 0)), 0)
+    );
     const ticks = niceTicks(0, Math.max(0, ...totals));
     return {
       ticks, domainMax: ticks[ticks.length - 1],
@@ -98,23 +116,32 @@
     return data.map((bar, bi) => {
       const x = MARGIN.left + band * bi + (band - barWidth) / 2;
       let acc = 0;
-      const segs = bar.segments.map((seg, si) => {
-        const v = Math.max(seg.value, 0);
-        const yTop = MARGIN.top + scaleLinear(acc + v, 0, domainMax, plotH, 0);
-        const yBottom = MARGIN.top + scaleLinear(acc, 0, domainMax, plotH, 0);
-        acc += v;
-        return {
-          x, y: yTop, width: barWidth, height: Math.max(yBottom - yTop, 0),
-          seg, tone: seg.tone ?? TONES[si % TONES.length],
-          cx: x + barWidth / 2, cy: yTop + (yBottom - yTop) / 2
-        };
-      });
+      // Tone is bound to the original segment index so it stays stable when a
+      // series is toggled off; hidden segments are dropped before stacking.
+      const segs = bar.segments
+        .map((seg, si) => ({ seg, tone: seg.tone ?? TONES[si % TONES.length] }))
+        .filter(({ seg }) => !hiddenSet.has(seg.label))
+        .map(({ seg, tone }) => {
+          const v = Math.max(seg.value, 0);
+          const yTop = MARGIN.top + scaleLinear(acc + v, 0, domainMax, plotH, 0);
+          const yBottom = MARGIN.top + scaleLinear(acc, 0, domainMax, plotH, 0);
+          acc += v;
+          return {
+            x, y: yTop, width: barWidth, height: Math.max(yBottom - yTop, 0),
+            seg, tone,
+            cx: x + barWidth / 2, cy: yTop + (yBottom - yTop) / 2
+          };
+        });
       return { x, band, label: bar.label, segs, cxLabel: MARGIN.left + band * (bi + 0.5) };
     });
   });
 
   const dataValueItems = $derived(
-    data.flatMap((bar) => bar.segments.map((seg) => `${bar.label}, ${seg.label}: ${seg.value}`))
+    data.flatMap((bar) =>
+      bar.segments
+        .filter((seg) => !hiddenSet.has(seg.label))
+        .map((seg) => `${bar.label}, ${seg.label}: ${seg.value}`)
+    )
   );
 
   // --- Data labels ----------------------------------------------------------
@@ -206,9 +233,22 @@
   {#if showLegend && legend.length > 0}
     <ul class="st-stackedBar__legend">
       {#each legend as item (item.seriesLabel)}
-        <li class="st-stackedBar__legendItem">
-          <span class="st-stackedBar__legendSwatch st-stackedBar__legendSwatch--{item.tone}" aria-hidden="true"></span>
-          {item.seriesLabel}
+        {@const off = hiddenSet.has(item.seriesLabel)}
+        <li class="st-stackedBar__legendItem" class:st-stackedBar__legendItem--off={legendInteractive && off}>
+          {#if legendInteractive}
+            <button
+              type="button"
+              class="st-stackedBar__legendButton"
+              aria-pressed={off}
+              onclick={() => onToggleSeries?.(item.seriesLabel)}
+            >
+              <span class="st-stackedBar__legendSwatch st-stackedBar__legendSwatch--{item.tone}" aria-hidden="true"></span>
+              {item.seriesLabel}
+            </button>
+          {:else}
+            <span class="st-stackedBar__legendSwatch st-stackedBar__legendSwatch--{item.tone}" aria-hidden="true"></span>
+            {item.seriesLabel}
+          {/if}
         </li>
       {/each}
     </ul>
@@ -243,6 +283,12 @@
   .st-stackedBar__tooltipValue { opacity: 0.85; }
   .st-stackedBar__legend { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
   .st-stackedBar__legendItem { align-items: center; color: var(--st-semantic-text-secondary); display: inline-flex; font-size: 0.75rem; gap: 0.35rem; }
+  .st-stackedBar__legendItem--off { opacity: 0.45; }
+  .st-stackedBar__legendButton {
+    align-items: center; background: none; border: 0; border-radius: var(--st-radius-sm, 0.25rem);
+    color: inherit; cursor: pointer; display: inline-flex; font: inherit; gap: 0.35rem; padding: 0.125rem 0.25rem;
+  }
+  .st-stackedBar__legendButton:focus-visible { outline: 2px solid var(--st-semantic-border-interactive); outline-offset: 2px; }
   .st-stackedBar__legendSwatch { border-radius: 2px; height: 0.7rem; width: 0.7rem; }
   .st-stackedBar__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
   .st-stackedBar__legendSwatch--category2 { background: var(--st-semantic-data-category2); }

package/dist/StackedBarChart.svelte.d.ts

@@ -23,6 +23,16 @@ type StackedBarChartProps = {
      * values already live in the accessible ChartDataList.
      */
     dataLabels?: DataLabelsProp;
+    /**
+     * Interactive legend (FR-4). Ids/labels of series hidden from the render
+     * (controlled by the parent; default = all visible). Each segment whose
+     * `label` ∈ `hiddenSeries` is omitted and its legend item is shown "off"
+     * (`aria-pressed`). Undefined → legacy non-interactive legend, unless
+     * `onToggleSeries` is provided.
+     */
+    hiddenSeries?: string[];
+    /** Emitted on click / Enter / Space on a legend item. */
+    onToggleSeries?: (seriesId: string) => void;
     class?: string;
 };
 declare const StackedBarChart: import("svelte").Component<StackedBarChartProps, {}, "">;

package/dist/StackedBarChart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StackedBarChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,EAAE,CAAC;CAC/B,CAAC;AAIJ,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG/F,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmLJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"StackedBarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StackedBarChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,EAAE,CAAC;CAC/B,CAAC;AAIJ,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG/F,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,yDAAyD;IACzD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4MJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/chartKeyboardNav.d.ts

@@ -0,0 +1,29 @@
+/** Keys that drive the roving focus, mapped to an action. */
+export type DatapointNavAction = {
+    kind: "move";
+    index: number;
+} | {
+    kind: "select";
+} | {
+    kind: "escape";
+};
+/**
+ * Maps a keydown to a roving-nav action given the current focused index and the
+ * datum count. Returns `null` for keys we don't handle (so the caller leaves the
+ * event untouched). `count` is assumed >= 1 when called.
+ */
+export declare function datapointNavAction(key: string, current: number, count: number): DatapointNavAction | null;
+/**
+ * The roving `tabindex` for the datum at `index`: `0` (the single tab stop) for
+ * the focused datum, `-1` for every other. When nothing is focused yet
+ * (`focusedIndex < 0`) the FIRST datum holds the tab stop so the group is
+ * reachable by Tab.
+ */
+export declare function rovingTabIndex(index: number, focusedIndex: number, count: number): number;
+/**
+ * Accessible label for a focused datum: its category followed by its value, e.g.
+ * `"Janvier, 42"`. `category` is the x/categorical label, `value` the y value.
+ * Kept framework-agnostic and identical across the three packages.
+ */
+export declare function datapointAriaLabel(category: string | number, value: string | number): string;
+//# sourceMappingURL=chartKeyboardNav.d.ts.map

package/dist/chartKeyboardNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartKeyboardNav.d.ts","sourceRoot":"","sources":["../src/lib/chartKeyboardNav.ts"],"names":[],"mappings":"AAqBA,6DAA6D;AAC7D,MAAM,MAAM,kBAAkB,GAC1B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAEvB;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,GACZ,kBAAkB,GAAG,IAAI,CAwB3B;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGzF;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAE5F"}

package/dist/chartKeyboardNav.js

@@ -0,0 +1,69 @@
+// --- Chart datapoint keyboard navigation (shared, framework-agnostic) --------
+//
+// FR-5: ROVING-TABINDEX keyboard navigation over a cartesian chart's data
+// points (Bar / Line / Area). The decorative SVG stays `aria-hidden`; a thin,
+// transparent overlay of focusable hit-rects (one per datum, in data order) is
+// rendered on top. The overlay carries a SINGLE tab stop — the focused datum —
+// and the arrow keys move that focus between datums:
+//
+//   ←/↑           previous datum            →/↓           next datum
+//   Home          first datum               End           last datum
+//   Enter / Space select the focused datum  Escape        leave the nav
+//
+// Each focusable element announces its category + value via `aria-label`
+// (built by `datapointAriaLabel`). Selection emits `onSelectKey?(key | null)`;
+// Escape clears the internal selection (emits null). The focus also feeds the
+// shared crosshair channel: moving focus emits `onHoverKeyChange(key)` so a
+// linked tooltip (FR-3) tracks the keyboard cursor, and leaving emits null.
+//
+// Purely additive: a chart that wires neither `onSelectKey` nor `keyboardNav`
+// renders exactly as before (no overlay, no extra tab stop).
+/**
+ * Maps a keydown to a roving-nav action given the current focused index and the
+ * datum count. Returns `null` for keys we don't handle (so the caller leaves the
+ * event untouched). `count` is assumed >= 1 when called.
+ */
+export function datapointNavAction(key, current, count) {
+    if (count <= 0)
+        return null;
+    const clamp = (i) => Math.min(count - 1, Math.max(0, i));
+    switch (key) {
+        case "ArrowRight":
+        case "ArrowDown":
+            return { kind: "move", index: clamp(current + 1) };
+        case "ArrowLeft":
+        case "ArrowUp":
+            return { kind: "move", index: clamp(current - 1) };
+        case "Home":
+            return { kind: "move", index: 0 };
+        case "End":
+            return { kind: "move", index: count - 1 };
+        case "Enter":
+        case " ":
+        case "Spacebar": // legacy IE/Edge value
+            return { kind: "select" };
+        case "Escape":
+        case "Esc": // legacy value
+            return { kind: "escape" };
+        default:
+            return null;
+    }
+}
+/**
+ * The roving `tabindex` for the datum at `index`: `0` (the single tab stop) for
+ * the focused datum, `-1` for every other. When nothing is focused yet
+ * (`focusedIndex < 0`) the FIRST datum holds the tab stop so the group is
+ * reachable by Tab.
+ */
+export function rovingTabIndex(index, focusedIndex, count) {
+    const active = focusedIndex >= 0 && focusedIndex < count ? focusedIndex : 0;
+    return index === active ? 0 : -1;
+}
+/**
+ * Accessible label for a focused datum: its category followed by its value, e.g.
+ * `"Janvier, 42"`. `category` is the x/categorical label, `value` the y value.
+ * Kept framework-agnostic and identical across the three packages.
+ */
+export function datapointAriaLabel(category, value) {
+    return `${category}, ${value}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.34.25",
+  "version": "0.34.27",
   "type": "module",
   "publishConfig": {
     "access": "public"