@sentropic/design-system-svelte 0.21.0 → 0.22.1

package/dist/BarChart.svelte

@@ -25,6 +25,22 @@
     height?: number;
     orientation?: "vertical" | "horizontal";
     label: string;
+    /**
+     * Keys of the currently selected bars (a bar's key is its `label`).
+     * CONTROLLED — the parent owns the toggle; the component never stores
+     * selection. When non-empty the selected bars stay full opacity (+ accent)
+     * and the rest dim; when empty every bar is normal. Defaults to [].
+     */
+    selectedKeys?: string[];
+    /**
+     * Called with the bar's key (its `label`) when the user selects it. When
+     * provided, an ACCESSIBLE row of filter chips (real <button>s) is rendered
+     * OUTSIDE the aria-hidden SVG — that is the keyboard + screen-reader surface.
+     * The SVG bars themselves stay decorative (aria-hidden) and only offer a
+     * mouse click shortcut for sighted pointer users. When omitted the chart is
+     * purely presentational (no interactivity, unchanged).
+     */
+    onSelect?: (key: string) => void;
     class?: string;
   };
 
@@ -34,6 +50,8 @@
     height = 240,
     orientation = "vertical",
     label,
+    selectedKeys = [],
+    onSelect,
     class: className
   }: BarChartProps = $props();
 
@@ -75,6 +93,12 @@
 
   let hoveredIndex: number | null = $state(null);
 
+  // Selection (controlled): fast lookup + "is any bar selected" flag. Only when
+  // something is selected do we dim the non-selected bars.
+  const selectedSet = $derived(new Set<string>(selectedKeys));
+  const hasSelection = $derived(selectedSet.size > 0);
+  const interactive = $derived(typeof onSelect === "function");
+
   const scales = $derived.by(() => {
     const values = data.map((d) => d.value);
     const minRaw = Math.min(0, ...values);
@@ -272,20 +296,55 @@
     {/each}
 
     <!-- bars -->
+    <!-- The bars live inside an aria-hidden SVG, so they are NEVER an accessible
+         surface. When `onSelect` is provided they only carry a mouse click
+         shortcut (cursor:pointer) for sighted pointer users — keyboard + screen
+         readers use the filter-chip buttons rendered below, outside this SVG. -->
     {#each bars as bar, i (bar.datum.label)}
+      {@const isSelected = selectedSet.has(bar.datum.label)}
+      <!-- The mouse click is a deliberate sighted-pointer-only shortcut on a
+           decorative element inside an aria-hidden SVG; the real keyboard + AT
+           path is the filter-chip <button>s below. No ARIA role/keyboard here
+           on purpose (it would be a lie under aria-hidden). -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
       <rect
         class="st-barChart__bar st-barChart__bar--{bar.tone}"
+        class:st-barChart__bar--selected={isSelected}
+        class:st-barChart__bar--dim={hasSelection && !isSelected}
+        class:st-barChart__bar--interactive={interactive}
         x={bar.x}
         y={bar.y}
         width={bar.width}
         height={bar.height}
         rx="2"
         data-chart-index={i}
+        onclick={interactive ? () => onSelect?.(bar.datum.label) : undefined}
       />
     {/each}
     </svg>
   </div>
 
+  {#if interactive}
+    <!-- Accessible selection surface — real <button>s OUTSIDE the aria-hidden
+         SVG. This is the keyboard + screen-reader path for filtering. -->
+    <div class="st-barChart__filters" role="group" aria-label={`Filtrer par ${label}`}>
+      {#each bars as bar (bar.datum.label)}
+        {@const isSelected = selectedSet.has(bar.datum.label)}
+        <button
+          type="button"
+          class="st-barChart__filterChip st-barChart__filterChip--{bar.tone}"
+          class:st-barChart__filterChip--selected={isSelected}
+          aria-pressed={isSelected}
+          onclick={() => onSelect?.(bar.datum.label)}
+        >
+          <span class="st-barChart__filterSwatch" aria-hidden="true"></span>
+          {bar.datum.label}: {bar.datum.value}
+        </button>
+      {/each}
+    </div>
+  {/if}
+
   <ChartDataList {label} items={dataValueItems} />
 
   {#if hoveredIndex !== null && bars[hoveredIndex]}
@@ -339,13 +398,35 @@
 
   .st-barChart__bar {
     cursor: pointer;
-    transition: opacity 120ms ease;
+    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
   }
 
   .st-barChart__bar:hover {
     opacity: 0.82;
   }
 
+  /* Non-selected bars are dimmed while a selection is active. Floor kept high
+     (0.6) so the colour stays distinguishable — opacity is never the sole cue;
+     selection also adds a stroke (shape), and the values stay in the chips +
+     ChartDataList. */
+  .st-barChart__bar--dim {
+    opacity: 0.6;
+  }
+  /* Hover still lifts a dimmed bar so it stays explorable. */
+  .st-barChart__bar--dim:hover {
+    opacity: 0.8;
+  }
+
+  /* Selected bar: full opacity + a contrast-safe accent stroke (two signals,
+     never a font/size reflow). Outranks the dim rule. */
+  .st-barChart__bar--selected,
+  .st-barChart__bar--selected:hover {
+    opacity: 1;
+    stroke: var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
+    stroke-width: 2;
+    paint-order: stroke;
+  }
+
   .st-barChart__bar--category1 { fill: var(--st-semantic-data-category1); }
   .st-barChart__bar--category2 { fill: var(--st-semantic-data-category2); }
   .st-barChart__bar--category3 { fill: var(--st-semantic-data-category3); }
@@ -355,6 +436,68 @@
   .st-barChart__bar--category7 { fill: var(--st-semantic-data-category7); }
   .st-barChart__bar--category8 { fill: var(--st-semantic-data-category8); }
 
+  /* Accessible filter chips — keyboard + screen-reader selection surface,
+     rendered outside the aria-hidden SVG. */
+  .st-barChart__filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-2, 0.5rem);
+    margin-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-barChart__filterChip {
+    align-items: center;
+    background: var(--st-semantic-surface-subtle, #f8fafc);
+    border: 1px solid var(--st-semantic-border-interactive, #cbd5e1);
+    border-radius: var(--st-radius-pill, 999px);
+    color: var(--st-semantic-text-secondary, #475569);
+    cursor: var(--st-cursor-interactive, pointer);
+    display: inline-flex;
+    font: inherit;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    gap: var(--st-spacing-1, 0.25rem);
+    line-height: 1;
+    padding: 0.3125rem var(--st-spacing-2, 0.5rem);
+    transition:
+      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-barChart__filterChip:hover {
+    background: var(--st-semantic-surface-hover, #eef2f7);
+  }
+
+  .st-barChart__filterChip:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
+    outline-offset: 2px;
+  }
+
+  /* Selected chip: solid accent fill + matching text — signalled by colour AND
+     by aria-pressed, never by opacity alone. */
+  .st-barChart__filterChip--selected {
+    background: var(--st-semantic-action-primary, #2563eb);
+    border-color: var(--st-semantic-action-primary, #2563eb);
+    color: var(--st-semantic-text-inverse, #fff);
+  }
+
+  /* Colour swatch echoing the bar tone, for quick visual mapping chip↔bar. */
+  .st-barChart__filterSwatch {
+    border-radius: var(--st-radius-sm, 0.25rem);
+    display: inline-block;
+    height: 0.625rem;
+    width: 0.625rem;
+  }
+  .st-barChart__filterChip--category1 .st-barChart__filterSwatch { background: var(--st-semantic-data-category1); }
+  .st-barChart__filterChip--category2 .st-barChart__filterSwatch { background: var(--st-semantic-data-category2); }
+  .st-barChart__filterChip--category3 .st-barChart__filterSwatch { background: var(--st-semantic-data-category3); }
+  .st-barChart__filterChip--category4 .st-barChart__filterSwatch { background: var(--st-semantic-data-category4); }
+  .st-barChart__filterChip--category5 .st-barChart__filterSwatch { background: var(--st-semantic-data-category5); }
+  .st-barChart__filterChip--category6 .st-barChart__filterSwatch { background: var(--st-semantic-data-category6); }
+  .st-barChart__filterChip--category7 .st-barChart__filterSwatch { background: var(--st-semantic-data-category7); }
+  .st-barChart__filterChip--category8 .st-barChart__filterSwatch { background: var(--st-semantic-data-category8); }
+
   .st-barChart__tooltip {
     background: var(--st-component-barChart-tooltipBackground, var(--st-semantic-surface-inverse));
     border-radius: var(--st-radius-sm, 0.25rem);
@@ -379,4 +522,9 @@
   .st-barChart__tooltipValue {
     opacity: 0.85;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-barChart__bar,
+    .st-barChart__filterChip { transition: none; }
+  }
 </style>

package/dist/BarChart.svelte.d.ts

@@ -10,6 +10,22 @@ type BarChartProps = {
     height?: number;
     orientation?: "vertical" | "horizontal";
     label: string;
+    /**
+     * Keys of the currently selected bars (a bar's key is its `label`).
+     * CONTROLLED — the parent owns the toggle; the component never stores
+     * selection. When non-empty the selected bars stay full opacity (+ accent)
+     * and the rest dim; when empty every bar is normal. Defaults to [].
+     */
+    selectedKeys?: string[];
+    /**
+     * Called with the bar's key (its `label`) when the user selects it. When
+     * provided, an ACCESSIBLE row of filter chips (real <button>s) is rendered
+     * OUTSIDE the aria-hidden SVG — that is the keyboard + screen-reader surface.
+     * The SVG bars themselves stay decorative (aria-hidden) and only offer a
+     * mouse click shortcut for sighted pointer users. When omitted the chart is
+     * purely presentational (no interactivity, unchanged).
+     */
+    onSelect?: (key: string) => 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;CACrB,CAAC;AAMF,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,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqNJ,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;CACrB,CAAC;AAMF,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,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+OJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/package.json

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