@sentropic/design-system-svelte 0.34.24 → 0.34.26

package/dist/AreaChart.svelte

@@ -24,6 +24,7 @@
     type ChartAnnotation
   } from "./chartAnnotations.js";
   import { formatDataLabel, normalizeDataLabels, type DataLabelsProp } from "./chartDataLabels.js";
+  import { keyForX, resolveActiveIndex } from "./chartCrosshair.js";
 
   type AreaChartProps = {
     data: (number | AreaChartDatum)[];
@@ -46,6 +47,20 @@
      * ChartDataList.
      */
     dataLabels?: DataLabelsProp;
+    /**
+     * CONTROLLED synchronised hover key (FR-3). A datum's key is `String(x)`. When
+     * provided (string or null), the crosshair + tooltip track this key instead of
+     * the chart's internal pointer hover (null ⇒ nothing shown), letting a parent
+     * share one hover channel across several aligned charts. Absent (`undefined`)
+     * keeps the legacy uncontrolled behaviour.
+     */
+    hoverKey?: string | null;
+    /**
+     * Emitted when the user hovers a datum (its key) or leaves the plot (`null`).
+     * Always fired on pointer move/leave — even while CONTROLLED — so dataviz can
+     * keep the shared hover channel in sync.
+     */
+    onHoverKeyChange?: (key: string | null) => void;
     class?: string;
   };
 
@@ -58,6 +73,8 @@
     label,
     annotations,
     dataLabels,
+    hoverKey,
+    onHoverKeyChange,
     class: className
   }: AreaChartProps = $props();
 
@@ -271,19 +288,34 @@
     return entries;
   });
 
+  // Stable key per datum (FR-3): `String(x)` of the normalised datum (a bare
+  // number becomes its index). Resolves a controlled `hoverKey` to an index and
+  // feeds `onHoverKeyChange` from pointer events.
+  const hoverKeys = $derived(normalizedData.map((d) => keyForX(d.x)));
+  function emitHoverKey(index: number | null) {
+    onHoverKeyChange?.(index == null ? null : hoverKeys[index] ?? null);
+  }
   function handleLeave() {
     hoveredIndex = null;
+    emitHoverKey(null);
   }
   function handleVisualPointerMove(event: PointerEvent) {
     const target = event.target;
     if (!(target instanceof Element)) {
       hoveredIndex = null;
+      emitHoverKey(null);
       return;
     }
-    const index = Number(target.getAttribute("data-chart-index"));
-    hoveredIndex = Number.isInteger(index) ? index : null;
+    const raw = Number(target.getAttribute("data-chart-index"));
+    const index = Number.isInteger(raw) ? raw : null;
+    hoveredIndex = index;
+    emitHoverKey(index);
   }
 
+  // Index whose crosshair/tooltip is DISPLAYED: the controlled `hoverKey` when
+  // provided (resolved against `hoverKeys`), else the internal pointer index.
+  const activeIndex = $derived(resolveActiveIndex(hoverKey, hoveredIndex, hoverKeys));
+
   // 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)}`;
@@ -441,13 +473,23 @@
         {/each}
       </g>
     {/if}
+
+    <!-- Crosshair (FR-3) — a tokenised vertical line + marker at the active key.
+         Decorative (aria-hidden); the value is in the tooltip + ChartDataList. -->
+    {#if activeIndex >= 0 && points[activeIndex]}
+      {@const cp = points[activeIndex]}
+      <g class="st-areaChart__crosshair" aria-hidden="true">
+        <line class="st-areaChart__crosshairLine" x1={cp.x} x2={cp.x} y1={MARGIN.top} y2={MARGIN.top + plotHeight} />
+        <circle class="st-areaChart__crosshairMarker" cx={cp.x} cy={cp.y} r="5" />
+      </g>
+    {/if}
     </svg>
   </div>
 
   <ChartDataList {label} items={dataValueItems} />
 
-  {#if hoveredIndex !== null && points[hoveredIndex]}
-    {@const p = points[hoveredIndex]}
+  {#if activeIndex >= 0 && points[activeIndex]}
+    {@const p = points[activeIndex]}
     <div
       class="st-areaChart__tooltip"
       role="presentation"
@@ -588,4 +630,19 @@
     font-size: 0.6875rem;
     font-weight: 600;
   }
+
+  /* --- Crosshair layer (FR-3) ----------------------------------------------
+     A tokenised dashed vertical line at the active (hovered/controlled) key,
+     plus an emphasised marker on the point. Decorative (aria-hidden). */
+  .st-areaChart__crosshairLine {
+    stroke: var(--st-semantic-border-strong);
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    opacity: 0.7;
+  }
+  .st-areaChart__crosshairMarker {
+    fill: currentColor;
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 2;
+  }
 </style>

package/dist/AreaChart.svelte.d.ts

@@ -26,6 +26,20 @@ type AreaChartProps = {
      * ChartDataList.
      */
     dataLabels?: DataLabelsProp;
+    /**
+     * CONTROLLED synchronised hover key (FR-3). A datum's key is `String(x)`. When
+     * provided (string or null), the crosshair + tooltip track this key instead of
+     * the chart's internal pointer hover (null ⇒ nothing shown), letting a parent
+     * share one hover channel across several aligned charts. Absent (`undefined`)
+     * keeps the legacy uncontrolled behaviour.
+     */
+    hoverKey?: string | null;
+    /**
+     * Emitted when the user hovers a datum (its key) or leaves the plot (`null`).
+     * Always fired on pointer move/leave — even while CONTROLLED — so dataviz can
+     * keep the shared hover channel in sync.
+     */
+    onHoverKeyChange?: (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;AAG/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,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuWJ,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;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"}

package/dist/BarChart.svelte

@@ -57,6 +57,7 @@
     type ChartAnnotation
   } from "./chartAnnotations.js";
   import { formatDataLabel, normalizeDataLabels, type DataLabelsProp } from "./chartDataLabels.js";
+  import { resolveActiveIndex } from "./chartCrosshair.js";
 
   type BarChartProps = {
     data: BarChartDatum[];
@@ -124,6 +125,20 @@
      * cross-chart parity and otherwise ignored.
      */
     showLegend?: boolean;
+    /**
+     * CONTROLLED synchronised hover key (FR-3). A bar's key is its `label`. When
+     * provided (string or null), the crosshair + tooltip track this key instead of
+     * the chart's internal pointer hover (null ⇒ nothing shown), letting a parent
+     * share one hover channel across several aligned charts. Absent (`undefined`)
+     * keeps the legacy uncontrolled behaviour. Independent of `selectedKeys`.
+     */
+    hoverKey?: string | null;
+    /**
+     * Emitted when the user hovers a bar (its `label`) or leaves the plot (`null`).
+     * Always fired on pointer move/leave — even while CONTROLLED — so dataviz can
+     * keep the shared hover channel in sync.
+     */
+    onHoverKeyChange?: (key: string | null) => void;
     class?: string;
   };
 
@@ -144,6 +159,8 @@
     scale = "linear",
     invertAxis = false,
     showLegend,
+    hoverKey,
+    onHoverKeyChange,
     class: className
   }: BarChartProps = $props();
 
@@ -599,19 +616,33 @@
     }));
   });
 
+  // Stable key per bar (FR-3): its `label`. Resolves a controlled `hoverKey` to
+  // an index and feeds `onHoverKeyChange` from pointer events.
+  const hoverKeys = $derived(bars.map((b) => b.datum.label));
+  function emitHoverKey(index: number | null) {
+    onHoverKeyChange?.(index == null ? null : hoverKeys[index] ?? null);
+  }
   function handleLeave() {
     hoveredIndex = null;
+    emitHoverKey(null);
   }
   function handleVisualPointerMove(event: PointerEvent) {
     const target = event.target;
     if (!(target instanceof Element)) {
       hoveredIndex = null;
+      emitHoverKey(null);
       return;
     }
-    const index = Number(target.getAttribute("data-chart-index"));
-    hoveredIndex = Number.isInteger(index) ? index : null;
+    const raw = Number(target.getAttribute("data-chart-index"));
+    const index = Number.isInteger(raw) ? raw : null;
+    hoveredIndex = index;
+    emitHoverKey(index);
   }
 
+  // Index whose crosshair/tooltip is DISPLAYED: the controlled `hoverKey` when
+  // provided (resolved against `hoverKeys`), else the internal pointer index.
+  const activeIndex = $derived(resolveActiveIndex(hoverKey, hoveredIndex, hoverKeys));
+
   const classes = () => ["st-barChart", className].filter(Boolean).join(" ");
 </script>
 
@@ -836,6 +867,20 @@
         {/each}
       </g>
     {/if}
+
+    <!-- Crosshair (FR-3) — a tokenised dashed line on the CATEGORY axis at the
+         active bar: vertical (vertical bars) / horizontal (horizontal bars).
+         Decorative (aria-hidden); the value is in the tooltip + ChartDataList. -->
+    {#if activeIndex >= 0 && bars[activeIndex]}
+      {@const cb = bars[activeIndex]}
+      <g class="st-barChart__crosshair" aria-hidden="true">
+        {#if isVertical}
+          <line class="st-barChart__crosshairLine" x1={cb.cx} x2={cb.cx} y1={MARGIN.top} y2={MARGIN.top + scales.plotHeight} />
+        {:else}
+          <line class="st-barChart__crosshairLine" x1={MARGIN.left} x2={MARGIN.left + scales.plotWidth} y1={cb.cy} y2={cb.cy} />
+        {/if}
+      </g>
+    {/if}
     </svg>
   </div>
 
@@ -861,8 +906,8 @@
 
   <ChartDataList {label} items={dataValueItems} />
 
-  {#if hoveredIndex !== null && bars[hoveredIndex]}
-    {@const bar = bars[hoveredIndex]}
+  {#if activeIndex >= 0 && bars[activeIndex]}
+    {@const bar = bars[activeIndex]}
     <div
       class="st-barChart__tooltip"
       role="presentation"
@@ -1124,4 +1169,14 @@
     font-size: 0.6875rem;
     font-weight: 600;
   }
+
+  /* --- Crosshair layer (FR-3) ----------------------------------------------
+     A tokenised dashed line on the CATEGORY axis at the active (hovered/
+     controlled) bar. Decorative (aria-hidden). */
+  .st-barChart__crosshairLine {
+    stroke: var(--st-semantic-border-strong);
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    opacity: 0.7;
+  }
 </style>

package/dist/BarChart.svelte.d.ts

@@ -99,6 +99,20 @@ type BarChartProps = {
      * cross-chart parity and otherwise ignored.
      */
     showLegend?: boolean;
+    /**
+     * CONTROLLED synchronised hover key (FR-3). A bar's key is its `label`. When
+     * provided (string or null), the crosshair + tooltip track this key instead of
+     * the chart's internal pointer hover (null ⇒ nothing shown), letting a parent
+     * share one hover channel across several aligned charts. Absent (`undefined`)
+     * keeps the legacy uncontrolled behaviour. Independent of `selectedKeys`.
+     */
+    hoverKey?: string | null;
+    /**
+     * Emitted when the user hovers a bar (its `label`) or leaves the plot (`null`).
+     * Always fired on pointer move/leave — even while CONTROLLED — so dataviz can
+     * keep the shared hover channel in sync.
+     */
+    onHoverKeyChange?: (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;AAG/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,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAipBJ,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":"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"}

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

@@ -60,6 +60,7 @@
     type ChartAnnotation
   } from "./chartAnnotations.js";
   import { formatDataLabel, normalizeDataLabels, type DataLabelsProp } from "./chartDataLabels.js";
+  import { keyForX, resolveActiveIndex } from "./chartCrosshair.js";
 
   type LineChartProps = {
     data: LineChartDatum[];
@@ -111,6 +112,20 @@
      * no legend surface, so this prop is accepted for parity and otherwise ignored.
      */
     showLegend?: boolean;
+    /**
+     * CONTROLLED synchronised hover key (FR-3). A datum's key is `String(x)`. When
+     * provided (string or null), the crosshair + tooltip track this key instead of
+     * the chart's internal pointer hover (null ⇒ nothing shown), letting a parent
+     * share one hover channel across several aligned charts. Absent (`undefined`)
+     * keeps the legacy uncontrolled behaviour.
+     */
+    hoverKey?: string | null;
+    /**
+     * Emitted when the user hovers a datum (its key) or leaves the plot (`null`).
+     * Always fired on pointer move/leave — even while CONTROLLED — so dataviz can
+     * keep the shared hover channel in sync.
+     */
+    onHoverKeyChange?: (key: string | null) => void;
     class?: string;
   };
 
@@ -132,6 +147,8 @@
     scale = "linear",
     invertAxis = false,
     showLegend,
+    hoverKey,
+    onHoverKeyChange,
     class: className
   }: LineChartProps = $props();
 
@@ -617,19 +634,33 @@
     return entries;
   });
 
+  // Stable key per datum (FR-3): `String(x)`. Resolves a controlled `hoverKey`
+  // to an index and feeds `onHoverKeyChange` from pointer events.
+  const hoverKeys = $derived(data.map((d) => keyForX(d.x)));
+  function emitHoverKey(index: number | null) {
+    onHoverKeyChange?.(index == null ? null : hoverKeys[index] ?? null);
+  }
   function handleLeave() {
     hoveredIndex = null;
+    emitHoverKey(null);
   }
   function handleVisualPointerMove(event: PointerEvent) {
     const target = event.target;
     if (!(target instanceof Element)) {
       hoveredIndex = null;
+      emitHoverKey(null);
       return;
     }
-    const index = Number(target.getAttribute("data-chart-index"));
-    hoveredIndex = Number.isInteger(index) ? index : null;
+    const raw = Number(target.getAttribute("data-chart-index"));
+    const index = Number.isInteger(raw) ? raw : null;
+    hoveredIndex = index;
+    emitHoverKey(index);
   }
 
+  // Index whose crosshair/tooltip is DISPLAYED: the controlled `hoverKey` when
+  // provided (resolved against `hoverKeys`), else the internal pointer index.
+  const activeIndex = $derived(resolveActiveIndex(hoverKey, hoveredIndex, hoverKeys));
+
   const classes = () =>
     ["st-lineChart", `st-lineChart--${tone}`, className].filter(Boolean).join(" ");
 </script>
@@ -820,13 +851,23 @@
         {/each}
       </g>
     {/if}
+
+    <!-- Crosshair (FR-3) — a tokenised vertical line + marker at the active key.
+         Decorative (aria-hidden); the value is in the tooltip + ChartDataList. -->
+    {#if activeIndex >= 0 && points[activeIndex]}
+      {@const cp = points[activeIndex]}
+      <g class="st-lineChart__crosshair" aria-hidden="true">
+        <line class="st-lineChart__crosshairLine" x1={cp.x} x2={cp.x} y1={MARGIN.top} y2={MARGIN.top + plotHeight} />
+        <circle class="st-lineChart__crosshairMarker" cx={cp.x} cy={cp.y} r="5" />
+      </g>
+    {/if}
     </svg>
   </div>
 
   <ChartDataList {label} items={dataValueItems} />
 
-  {#if hoveredIndex !== null && points[hoveredIndex]}
-    {@const p = points[hoveredIndex]}
+  {#if activeIndex >= 0 && points[activeIndex]}
+    {@const p = points[activeIndex]}
     <div
       class="st-lineChart__tooltip"
       role="presentation"
@@ -1028,4 +1069,19 @@
     font-size: 0.6875rem;
     font-weight: 600;
   }
+
+  /* --- Crosshair layer (FR-3) ----------------------------------------------
+     A tokenised dashed vertical line at the active (hovered/controlled) key,
+     plus an emphasised marker on the point. Decorative (aria-hidden). */
+  .st-lineChart__crosshairLine {
+    stroke: var(--st-semantic-border-strong);
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    opacity: 0.7;
+  }
+  .st-lineChart__crosshairMarker {
+    fill: currentColor;
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 2;
+  }
 </style>

package/dist/LineChart.svelte.d.ts

@@ -86,6 +86,20 @@ type LineChartProps = {
      * no legend surface, so this prop is accepted for parity and otherwise ignored.
      */
     showLegend?: boolean;
+    /**
+     * CONTROLLED synchronised hover key (FR-3). A datum's key is `String(x)`. When
+     * provided (string or null), the crosshair + tooltip track this key instead of
+     * the chart's internal pointer hover (null ⇒ nothing shown), letting a parent
+     * share one hover channel across several aligned charts. Absent (`undefined`)
+     * keeps the legacy uncontrolled behaviour.
+     */
+    hoverKey?: string | null;
+    /**
+     * Emitted when the user hovers a datum (its key) or leaves the plot (`null`).
+     * Always fired on pointer move/leave — even while CONTROLLED — so dataviz can
+     * keep the shared hover channel in sync.
+     */
+    onHoverKeyChange?: (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;AAG/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,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqpBJ,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":"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"}

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/chartCrosshair.d.ts

@@ -0,0 +1,19 @@
+/** Serialises a Line/Area datum's `x` to its stable hover key. */
+export declare function keyForX(x: number | string): string;
+/**
+ * Resolves the hover key to a datum index within `keys` (the ordered list of
+ * every datum's key). Returns -1 when the key is null/undefined or unmatched.
+ */
+export declare function indexForHoverKey(hoverKey: string | null | undefined, keys: string[]): number;
+/**
+ * Picks the datum index to DISPLAY the crosshair/tooltip at.
+ *   - Controlled (`hoverKey !== undefined`): the index of `hoverKey` in `keys`
+ *     (or -1 when null/unmatched). The internal pointer index is ignored for
+ *     display.
+ *   - Uncontrolled (`hoverKey === undefined`): the internal pointer index.
+ * Returns -1 when nothing should be shown.
+ */
+export declare function resolveActiveIndex(hoverKey: string | null | undefined, internalIndex: number | null, keys: string[]): number;
+/** True when the chart is CONTROLLED (the parent supplied `hoverKey`). */
+export declare function isControlled(hoverKey: string | null | undefined): boolean;
+//# sourceMappingURL=chartCrosshair.d.ts.map

package/dist/chartCrosshair.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartCrosshair.d.ts","sourceRoot":"","sources":["../src/lib/chartCrosshair.ts"],"names":[],"mappings":"AAsBA,kEAAkE;AAClE,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAElD;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAG5F;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACnC,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,IAAI,EAAE,MAAM,EAAE,GACb,MAAM,CAGR;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAEzE"}

package/dist/chartCrosshair.js

@@ -0,0 +1,51 @@
+// --- Chart crosshair / synchronised hover layer (shared, framework-agnostic) -
+//
+// FR-3: a CONTROLLED crosshair + tooltip whose position is driven by a `hoverKey`
+// string the parent owns, so dataviz can share one hover channel across several
+// aligned panels (a "linked" tooltip). The DS stays presentational: it resolves
+// the key to a datum index, draws a tokenised vertical line at that x (plus a
+// marker on the point for Line/Area), and reuses the existing tooltip surface.
+//
+// The "key" is the stable identifier of a datum on the categorical/x axis:
+//   - Bar:        the bar's `label`.
+//   - Line/Area:  the point's `x`, serialised with `String(x)`.
+//
+// Behaviour:
+//   - `hoverKey === undefined` → UNCONTROLLED (internal hover, unchanged, fully
+//     backward compatible).
+//   - `hoverKey` provided (string or null) → CONTROLLED: the displayed
+//     crosshair/tooltip tracks `hoverKey` (null = nothing shown), the chart's own
+//     pointer hover no longer drives the DISPLAY, but `onHoverKeyChange` is still
+//     emitted so the parent can keep the shared channel in sync.
+//
+// Purely additive: a chart that passes neither prop renders exactly as before.
+/** Serialises a Line/Area datum's `x` to its stable hover key. */
+export function keyForX(x) {
+    return String(x);
+}
+/**
+ * Resolves the hover key to a datum index within `keys` (the ordered list of
+ * every datum's key). Returns -1 when the key is null/undefined or unmatched.
+ */
+export function indexForHoverKey(hoverKey, keys) {
+    if (hoverKey == null)
+        return -1;
+    return keys.indexOf(hoverKey);
+}
+/**
+ * Picks the datum index to DISPLAY the crosshair/tooltip at.
+ *   - Controlled (`hoverKey !== undefined`): the index of `hoverKey` in `keys`
+ *     (or -1 when null/unmatched). The internal pointer index is ignored for
+ *     display.
+ *   - Uncontrolled (`hoverKey === undefined`): the internal pointer index.
+ * Returns -1 when nothing should be shown.
+ */
+export function resolveActiveIndex(hoverKey, internalIndex, keys) {
+    if (hoverKey !== undefined)
+        return indexForHoverKey(hoverKey, keys);
+    return internalIndex == null ? -1 : internalIndex;
+}
+/** True when the chart is CONTROLLED (the parent supplied `hoverKey`). */
+export function isControlled(hoverKey) {
+    return hoverKey !== undefined;
+}

package/package.json

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