@sentropic/design-system-svelte 0.34.26 → 0.34.28

package/dist/AppChrome.svelte

@@ -75,6 +75,10 @@
     /** Zone identité à droite (IdentityMenu, bouton connexion, …). */
     identity?: Snippet;
 
+    // ── Contrôles additionnels ─────────────────────────────────────────────────
+    /** Contrôles additionnels dans la zone utilitaire. */
+    extraSelectors?: Snippet;
+
     // ── Mobile ─────────────────────────────────────────────────────────────────
     /** État ouvert du tiroir mobile (contrôlé). */
     mobileMenuOpen?: boolean;
@@ -95,10 +99,10 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import {
-    Boxes,
     ChevronDown,
     Github,
     Globe,
+    Menu,
     Moon,
     Palette,
     Sun,
@@ -127,6 +131,7 @@
     githubHref,
     githubLabel = "GitHub",
     identity,
+    extraSelectors,
     mobileMenuOpen = false,
     onMobileMenuToggle,
     menuLabel = "Menu",
@@ -320,6 +325,7 @@
     {#if showLocaleSelector}{@render localeSelector()}{/if}
     {#if showGithub}{@render githubLink()}{/if}
     {#if identity}<div class="st-appChrome__identity">{@render identity()}</div>{/if}
+    {#if extraSelectors}<div class="st-appChrome__extraSelectors">{@render extraSelectors()}</div>{/if}
   </div>
 {/snippet}
 
@@ -334,7 +340,7 @@
     aria-controls={drawerId}
     aria-label={menuLabel}
   >
-    <Boxes size={20} aria-hidden="true" />
+    <Menu size={20} aria-hidden="true" />
   </button>
 {/snippet}
 
@@ -434,11 +440,18 @@
      react/vue : la source de vérité du CSS est le bloc publié (styles.css).
      Ce <style> scoped ne fait que rendre la démo Svelte autonome. */
   .st-appChrome {
+    position: sticky;
+    top: 0;
     width: 100%;
+    z-index: 30;
   }
 
   :global(.st-appChrome__header .st-appHeader__bar) {
+    background: color-mix(in srgb, var(--st-semantic-surface-default) 96%, transparent);
+    backdrop-filter: blur(8px);
+    height: 5rem;
     max-width: none;
+    padding: 0 var(--st-spacing-6, 1.5rem);
   }
 
   .st-appChrome__brand {
@@ -482,7 +495,7 @@
   .st-appChrome__utilityNav {
     align-items: center;
     display: flex;
-    gap: var(--st-spacing-2, 0.5rem);
+    gap: var(--st-spacing-1, 0.25rem);
   }
 
   .st-appChrome__menuWrap {
@@ -579,6 +592,12 @@
     color: var(--st-semantic-text-primary);
   }
 
+  .st-appChrome__extraSelectors {
+    align-items: center;
+    display: flex;
+    gap: var(--st-spacing-1, 0.25rem);
+  }
+
   .st-appChrome__drawer {
     background: var(--st-semantic-surface-default);
     border-bottom: 1px solid var(--st-semantic-border-subtle);

package/dist/AppChrome.svelte.d.ts

@@ -60,6 +60,8 @@ export interface AppChromeProps {
     githubLabel?: string;
     /** Zone identité à droite (IdentityMenu, bouton connexion, …). */
     identity?: Snippet;
+    /** Contrôles additionnels dans la zone utilitaire. */
+    extraSelectors?: Snippet;
     /** État ouvert du tiroir mobile (contrôlé). */
     mobileMenuOpen?: boolean;
     /** Callback de bascule du tiroir mobile. */

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

@@ -1 +1 @@
-{"version":3,"file":"AppChrome.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppChrome.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,cAAc;IAE7B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,yDAAyD;IACzD,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,0DAA0D;IAC1D,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAGhE,2DAA2D;IAC3D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqRH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppChrome.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppChrome.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,cAAc;IAE7B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,yDAAyD;IACzD,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,0DAA0D;IAC1D,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAGhE,2DAA2D;IAC3D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuRH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/AppChrome.test.js

@@ -120,3 +120,13 @@ describe("AppChrome — mobile burger + tiroir", () => {
         expect(onMobileMenuToggle).toHaveBeenCalledTimes(1);
     });
 });
+describe("AppChrome — extraSelectors", () => {
+    it("renders extraSelectors snippet content in the utility nav", () => {
+        const { container } = render(AppChrome, { props: { extraSelectors: snippet("extra-ctrl") } });
+        expect(container.querySelector(".st-appChrome__extraSelectors")?.textContent).toContain("extra-ctrl");
+    });
+    it("does not render extraSelectors div when not provided", () => {
+        const { container } = render(AppChrome);
+        expect(container.querySelector(".st-appChrome__extraSelectors")).toBeNull();
+    });
+});

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/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/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.26",
+  "version": "0.34.28",
   "type": "module",
   "publishConfig": {
     "access": "public"