@sentropic/design-system-svelte 0.34.25 → 0.34.26

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/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/package.json

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