@sentropic/design-system-svelte 0.21.0 → 0.22.0

package/dist/BarChart.svelte

@@ -25,6 +25,19 @@
     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 when a bar is clicked / activated (Enter / Space) with the bar's
+     * key (its `label`). When provided the bars become focusable buttons; when
+     * omitted the chart is purely presentational (no interactivity, unchanged).
+     */
+    onSelect?: (key: string) => void;
     class?: string;
   };
 
@@ -34,6 +47,8 @@
     height = 240,
     orientation = "vertical",
     label,
+    selectedKeys = [],
+    onSelect,
     class: className
   }: BarChartProps = $props();
 
@@ -75,6 +90,20 @@
 
   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");
+
+  function handleBarKeydown(key: string, e: KeyboardEvent) {
+    if (e.key === "Enter" || e.key === " ") {
+      // preventDefault on Space so it activates rather than scrolling the page.
+      e.preventDefault();
+      onSelect?.(key);
+    }
+  }
+
   const scales = $derived.by(() => {
     const values = data.map((d) => d.value);
     const minRaw = Math.min(0, ...values);
@@ -272,15 +301,29 @@
     {/each}
 
     <!-- bars -->
+    <!-- A bar becomes an interactive button only when `onSelect` is provided;
+         the role + tabindex are then dynamic, which the static a11y check cannot
+         verify, hence the targeted ignore (mirrors SelectableRow). -->
     {#each bars as bar, i (bar.datum.label)}
+      {@const isSelected = selectedSet.has(bar.datum.label)}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <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}
+        role={interactive ? "button" : undefined}
+        tabindex={interactive ? 0 : undefined}
+        aria-pressed={interactive ? isSelected : undefined}
+        aria-label={interactive ? `${bar.datum.label}: ${bar.datum.value}` : undefined}
+        onclick={interactive ? () => onSelect?.(bar.datum.label) : undefined}
+        onkeydown={interactive ? (e) => handleBarKeydown(bar.datum.label, e) : undefined}
       />
     {/each}
     </svg>
@@ -339,13 +382,38 @@
 
   .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;
   }
 
+  /* Interactive (onSelect provided): the bar is a keyboard-activable button. */
+  .st-barChart__bar--interactive:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
+    outline-offset: 1px;
+  }
+
+  /* Non-selected bars are dimmed while a selection is active. */
+  .st-barChart__bar--dim {
+    opacity: 0.45;
+  }
+  /* Hover still lifts a dimmed bar so it stays explorable. */
+  .st-barChart__bar--dim:hover {
+    opacity: 0.7;
+  }
+
+  /* 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); }
@@ -379,4 +447,8 @@
   .st-barChart__tooltipValue {
     opacity: 0.85;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-barChart__bar { transition: none; }
+  }
 </style>

package/dist/BarChart.svelte.d.ts

@@ -10,6 +10,19 @@ 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 when a bar is clicked / activated (Enter / Space) with the bar's
+     * key (its `label`). When provided the bars become focusable buttons; 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;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwOJ,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.0",
   "type": "module",
   "publishConfig": {
     "access": "public"