@sentropic/design-system-svelte 0.34.28 → 0.34.33

package/dist/Collapsible.svelte

@@ -7,7 +7,22 @@
     /** État ouvert (bindable). */
     open?: boolean;
     title: string;
+    /**
+     * Density of the trigger — `"md"` (default) is the current render. `"sm"`
+     * de-emphasizes the trigger (smaller font/weight/padding) for NESTED /
+     * level-2 collapsibles; `"lg"` enlarges it. Additive: with `size` unset the
+     * trigger renders byte-identically to before.
+     */
+    size?: "sm" | "md" | "lg";
     disabled?: boolean;
+    /**
+     * Trailing content rendered inside the trigger, BETWEEN the title and the
+     * chevron (e.g. a count Badge, a status Tag, a glyph). The chevron stays the
+     * rightmost affordance. If the trailing content carries information SR users
+     * need as part of the trigger name, set `aria-label` on the Collapsible via
+     * `...rest` (e.g. `aria-label="Entities, 128 items"`).
+     */
+    trailing?: Snippet;
     onToggle?: (open: boolean) => void;
     class?: string;
     children?: Snippet;
@@ -16,7 +31,9 @@
   let {
     open = $bindable(false),
     title,
+    size = "md",
     disabled = false,
+    trailing,
     onToggle,
     class: className,
     children,
@@ -26,7 +43,14 @@
   const uid = `st-collapsible-${Math.random().toString(36).slice(2, 9)}`;
 
   const classes = $derived(
-    ["st-collapsible", open ? "st-collapsible--open" : null, className].filter(Boolean).join(" ")
+    [
+      "st-collapsible",
+      `st-collapsible--${size}`,
+      open ? "st-collapsible--open" : null,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
   );
 
   function toggle() {
@@ -47,6 +71,9 @@
     onclick={toggle}
   >
     <span class="st-collapsible__title">{title}</span>
+    {#if trailing}
+      <span class="st-collapsible__trailing">{@render trailing()}</span>
+    {/if}
     <span class="st-collapsible__icon" aria-hidden="true">
       <ChevronDown size={18} strokeWidth={2.25} />
     </span>
@@ -103,10 +130,37 @@
     cursor: not-allowed;
   }
 
+  /* Density variants (additive). `md` is the UNTOUCHED base `.st-collapsible__trigger`
+     above — no `--md` rule exists, so a `size="md"` (or unset) trigger renders
+     byte-identically. `--sm` de-emphasizes for nesting; `--lg` enlarges. Every
+     leaf falls back to a base literal so a theme that emits no
+     `--st-component-collapsible-*` renders these variants identically. */
+  .st-collapsible--sm .st-collapsible__trigger {
+    font-size: var(--st-component-collapsible-sm-fontSize, 0.875rem);
+    font-weight: var(--st-component-collapsible-sm-fontWeight, 500);
+    padding: var(--st-component-collapsible-sm-paddingBlock, 0.4rem)
+      var(--st-component-collapsible-sm-paddingInline, 0.25rem);
+  }
+
+  .st-collapsible--lg .st-collapsible__trigger {
+    font-size: var(--st-component-collapsible-lg-fontSize, 1rem);
+    padding: var(--st-component-collapsible-lg-paddingBlock, 0.875rem)
+      var(--st-component-collapsible-lg-paddingInline, 0.25rem);
+  }
+
   .st-collapsible__title {
     flex: 1 1 auto;
   }
 
+  /* Trigger trailing slot (additive). Holds a count badge / status / glyph
+     between the title and the chevron; never grows, so the chevron stays the
+     rightmost affordance and the title keeps `flex: 1 1 auto`. */
+  .st-collapsible__trailing {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
   .st-collapsible__icon {
     align-items: center;
     color: var(--st-semantic-text-secondary);

package/dist/Collapsible.svelte.d.ts

@@ -4,7 +4,22 @@ type CollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "title">
     /** État ouvert (bindable). */
     open?: boolean;
     title: string;
+    /**
+     * Density of the trigger — `"md"` (default) is the current render. `"sm"`
+     * de-emphasizes the trigger (smaller font/weight/padding) for NESTED /
+     * level-2 collapsibles; `"lg"` enlarges it. Additive: with `size` unset the
+     * trigger renders byte-identically to before.
+     */
+    size?: "sm" | "md" | "lg";
     disabled?: boolean;
+    /**
+     * Trailing content rendered inside the trigger, BETWEEN the title and the
+     * chevron (e.g. a count Badge, a status Tag, a glyph). The chevron stays the
+     * rightmost affordance. If the trailing content carries information SR users
+     * need as part of the trigger name, set `aria-label` on the Collapsible via
+     * `...rest` (e.g. `aria-label="Entities, 128 items"`).
+     */
+    trailing?: Snippet;
     onToggle?: (open: boolean) => void;
     class?: string;
     children?: Snippet;

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

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Collapsible.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IAChF,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgDJ,QAAA,MAAM,WAAW,0DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Collapsible.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Collapsible.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IAChF,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4DJ,QAAA,MAAM,WAAW,0DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Collapsible.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Collapsible.test.d.ts.map

package/dist/Collapsible.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.test.d.ts","sourceRoot":"","sources":["../src/lib/Collapsible.test.ts"],"names":[],"mappings":""}

package/dist/Collapsible.test.js

@@ -0,0 +1,68 @@
+import { fireEvent, render } from "@testing-library/svelte";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it } from "vitest";
+import Collapsible from "./Collapsible.svelte";
+const snippet = (html) => createRawSnippet(() => ({ render: () => `<span>${html}</span>` }));
+// Svelte scopes component styles by appending a per-component hash class (e.g.
+// "svelte-pav3x3") to every styled element's class list. Compare against the
+// SEMANTIC class only (the first token) so the assertions are stable across
+// builds and read the structural class, not the scope hash.
+const structuralClass = (el) => el.className.split(/\s+/)[0];
+describe("Collapsible — base (byte-identity)", () => {
+    it("renders the default trigger with no trailing span and the md density class", () => {
+        const { container } = render(Collapsible, { props: { title: "Entities" } });
+        const root = container.querySelector(".st-collapsible");
+        expect(root).toBeTruthy();
+        // Default density is md (additive class), and there is NO trailing span when
+        // the slot is absent — the trigger keeps its original [title][chevron] shape.
+        expect(root.classList.contains("st-collapsible--md")).toBe(true);
+        expect(root.classList.contains("st-collapsible--sm")).toBe(false);
+        expect(container.querySelector(".st-collapsible__trailing")).toBeNull();
+        expect(container.querySelector(".st-collapsible__title")?.textContent).toBe("Entities");
+        // Trigger order is preserved: only the title span then the chevron.
+        const trigger = container.querySelector(".st-collapsible__trigger");
+        const spans = Array.from(trigger.children).map(structuralClass);
+        expect(spans).toEqual(["st-collapsible__title", "st-collapsible__icon"]);
+    });
+});
+describe("Collapsible — size", () => {
+    it("size=\"sm\" toggles st-collapsible--sm", () => {
+        const { container } = render(Collapsible, { props: { title: "Type", size: "sm" } });
+        const root = container.querySelector(".st-collapsible");
+        expect(root.classList.contains("st-collapsible--sm")).toBe(true);
+        expect(root.classList.contains("st-collapsible--md")).toBe(false);
+    });
+    it("size=\"lg\" toggles st-collapsible--lg", () => {
+        const { container } = render(Collapsible, { props: { title: "Section", size: "lg" } });
+        expect(container.querySelector(".st-collapsible").classList.contains("st-collapsible--lg")).toBe(true);
+    });
+});
+describe("Collapsible — trailing slot", () => {
+    it("renders trailing content between the title and the chevron", () => {
+        const { container } = render(Collapsible, {
+            props: { title: "Entities", trailing: snippet("128") },
+        });
+        const trailing = container.querySelector(".st-collapsible__trailing");
+        expect(trailing).toBeTruthy();
+        expect(trailing?.textContent).toContain("128");
+        // Order inside the trigger: title, trailing, chevron (chevron stays last).
+        const trigger = container.querySelector(".st-collapsible__trigger");
+        const order = Array.from(trigger.children).map(structuralClass);
+        expect(order).toEqual([
+            "st-collapsible__title",
+            "st-collapsible__trailing",
+            "st-collapsible__icon",
+        ]);
+    });
+});
+describe("Collapsible — a11y unchanged", () => {
+    it("toggles aria-expanded on click with size + trailing set", async () => {
+        const { container } = render(Collapsible, {
+            props: { title: "Entities", size: "sm", trailing: snippet("7") },
+        });
+        const trigger = container.querySelector(".st-collapsible__trigger");
+        expect(trigger.getAttribute("aria-expanded")).toBe("false");
+        await fireEvent.click(trigger);
+        expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    });
+});

package/dist/ComboChart.svelte

@@ -25,6 +25,15 @@
 
 <script lang="ts">
   import ChartDataList from "./ChartDataList.svelte";
+  import {
+    resolveAnnotations,
+    annotationDataListItems,
+    polygonPoints,
+    type ChartAnnotation
+  } 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 ComboChartProps = {
     categories: string[];
@@ -42,6 +51,38 @@
     hiddenSeries?: string[];
     /** Emitted on click / Enter / Space on a legend item. */
     onToggleSeries?: (seriesId: string) => void;
+    /**
+     * Annotation overlay in DATA space. The x coordinate is CATEGORICAL — it
+     * matches a category by equality (band centre); the y coordinate (and
+     * `value`/`from`/`to`) are LEFT (bar) value-axis numbers. Regions render
+     * behind the bars, every other kind above. Additive: absent ⇒ unchanged.
+     */
+    annotations?: ChartAnnotation[];
+    /**
+     * Per-datum value labels on BOTH the bars and the line points. `false`/absent
+     * (default) → none. `true` → each value with the chart's numeric formatter.
+     * Object → `format(value)` and/or a `position` override. Labels are
+     * `aria-hidden` — the values already live in the accessible ChartDataList.
+     */
+    dataLabels?: DataLabelsProp;
+    /**
+     * CONTROLLED synchronised hover key (FR-3). The key is the CATEGORY string.
+     * When provided (string or null), the crosshair tracks this key instead of
+     * the chart's internal pointer hover (null ⇒ nothing shown). Absent keeps
+     * the legacy uncontrolled behaviour.
+     */
+    hoverKey?: string | null;
+    /** Emitted when the user hovers a bar/point (its CATEGORY) or leaves (`null`). */
+    onHoverKeyChange?: (key: string | null) => void;
+    /**
+     * FR-5 — keyboard navigation of the categories (roving tabindex). When `true`
+     * (or implied by wiring `onSelectKey`), a focusable overlay of one column per
+     * category is rendered: one tab stop, arrows move, Home/End jump, Enter/Space
+     * select, Escape leaves. Absent ⇒ no overlay, rendering unchanged.
+     */
+    keyboardNav?: boolean;
+    /** Emitted on Enter/Space (category) or `null` on Escape. */
+    onSelectKey?: (key: string | null) => void;
     width?: number;
     height?: number;
     label: string;
@@ -57,12 +98,21 @@
     legend = true,
     hiddenSeries,
     onToggleSeries,
+    annotations,
+    dataLabels,
+    hoverKey,
+    onHoverKeyChange,
+    keyboardNav,
+    onSelectKey,
     width = 480,
     height = 240,
     label,
     class: className
   }: ComboChartProps = $props();
 
+  let focusedIndex: number = $state(-1);
+  let datapointRefs: Array<SVGRectElement | null> = [];
+
   // 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 ?? []));
@@ -263,22 +313,103 @@
       .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}`))
+      .flatMap((s) => categories.map((c, ci) => `${s.label}, ${c}: ${s.data[ci] ?? 0}`)),
+    ...annotationDataListItems(annotations)
   ]);
 
+  // --- Annotation overlay ---------------------------------------------------
+  // `xScale` matches a category by equality → its band centre (relative to the
+  // plot); `yScale` maps a LEFT (bar) value-axis number. Out-of-domain coords
+  // yield null → dropped, so an annotation never escapes the plot.
+  const resolvedAnnotations = $derived(
+    resolveAnnotations(annotations, {
+      xScale: (v: number | string) => {
+        const i = categories.indexOf(String(v));
+        return i < 0 ? null : bandCenter(i) - MARGIN.left;
+      },
+      yScale: (v: number) =>
+        Number.isFinite(v) ? scaleLinear(v, leftScale.domainMin, leftScale.domainMax, plotHeight, 0) : null,
+      plotLeft: MARGIN.left,
+      plotTop: MARGIN.top,
+      plotWidth,
+      plotHeight
+    })
+  );
+  const annotationRegions = $derived(resolvedAnnotations.filter((a) => a.kind === "region"));
+  const annotationAbove = $derived(resolvedAnnotations.filter((a) => a.kind !== "region"));
+
+  // --- Data labels ----------------------------------------------------------
+  // One value label per visible bar (outside) + per visible line point (top).
+  const dataLabelOpts = $derived(normalizeDataLabels(dataLabels));
+  const barDataLabelItems = $derived(
+    dataLabelOpts.enabled
+      ? barGroups.flatMap((group, gi) =>
+          group.map((seg, si) => {
+            const inside = dataLabelOpts.position === "inside" || dataLabelOpts.position === "center";
+            return {
+              key: `bar-${gi}-${si}`,
+              x: seg.cx,
+              y: inside ? seg.y + seg.height / 2 : seg.cy - 6,
+              text: formatDataLabel(seg.value, dataLabelOpts, formatTick),
+              baseline: (inside ? "middle" : "auto") as "middle" | "auto"
+            };
+          })
+        )
+      : []
+  );
+  const lineDataLabelItems = $derived(
+    dataLabelOpts.enabled
+      ? lineSeries.flatMap((series, li) =>
+          series.hidden
+            ? []
+            : series.points.map((p, pi) => {
+                const center =
+                  dataLabelOpts.position === "center" || dataLabelOpts.position === "inside";
+                return {
+                  key: `line-${li}-${pi}`,
+                  x: p.x,
+                  y: center ? p.y : p.y - 8,
+                  text: formatDataLabel(p.value, dataLabelOpts, formatTick),
+                  baseline: (center ? "middle" : "auto") as "middle" | "auto"
+                };
+              })
+        )
+      : []
+  );
+
+  // --- Crosshair + keyboard nav keys (FR-3 / FR-5) --------------------------
+  // The shared datum is the CATEGORY: its key is the category string.
+  const hoverKeys = $derived(categories.map((c) => keyForX(c)));
+  const categorySummary = (ci: number): string =>
+    [
+      ...bars.filter((s) => !hiddenSet.has(s.label)),
+      ...lines.filter((s) => !hiddenSet.has(s.label))
+    ]
+      .map((s) => {
+        const raw = s.data[ci];
+        return raw == null || !Number.isFinite(raw) ? null : `${s.label}: ${raw}`;
+      })
+      .filter((v): v is string => v !== null)
+      .join(", ");
+
   type Hover =
     | { kind: "bar"; gi: number; si: number }
     | { kind: "line"; li: number; pi: number }
     | null;
-  let hovered: Hover = $state(null);
+  let hovered = $state<Hover>(null);
 
+  function emitHoverKey(index: number | null) {
+    onHoverKeyChange?.(index == null ? null : hoverKeys[index] ?? null);
+  }
   function handleLeave() {
     hovered = null;
+    emitHoverKey(null);
   }
   function handleVisualPointerMove(event: PointerEvent) {
     const target = event.target;
     if (!(target instanceof Element)) {
       hovered = null;
+      emitHoverKey(null);
       return;
     }
     const kind = target.getAttribute("data-chart-kind");
@@ -286,10 +417,50 @@
     const b = Number(target.getAttribute("data-chart-b"));
     if (kind === "bar" && Number.isInteger(a) && Number.isInteger(b)) {
       hovered = { kind: "bar", gi: a, si: b };
+      emitHoverKey(a); // gi === category index
     } else if (kind === "line" && Number.isInteger(a) && Number.isInteger(b)) {
       hovered = { kind: "line", li: a, pi: b };
+      emitHoverKey(b); // pi === category index
     } else {
       hovered = null;
+      emitHoverKey(null);
+    }
+  }
+
+  // Category index whose crosshair is DISPLAYED: the controlled `hoverKey` when
+  // provided (resolved against the category keys), else the internal pointer
+  // category (derived from the hovered bar/line datum).
+  const internalCategoryIndex = $derived(
+    hovered == null ? null : hovered.kind === "bar" ? hovered.gi : hovered.pi
+  );
+  const activeCategoryIndex = $derived(
+    resolveActiveIndex(hoverKey, internalCategoryIndex, hoverKeys)
+  );
+  const crosshairX = $derived(activeCategoryIndex >= 0 ? bandCenter(activeCategoryIndex) : null);
+
+  // --- Keyboard navigation (FR-5) ------------------------------------------
+  // One focusable transparent column per category carries the roving tab stop.
+  const navEnabled = $derived(
+    (keyboardNav === true || onSelectKey !== undefined) && categories.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, categories.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();
     }
   }
 
@@ -403,6 +574,20 @@
         </text>
       {/each}
 
+      <!-- Annotation regions sit BEHIND the bars (filled bands). -->
+      {#if annotationRegions.length > 0}
+        <g class="st-comboChart__annotations st-comboChart__annotations--behind">
+          {#each annotationRegions as a (a.key)}
+            {#if a.kind === "region"}
+              <rect class="st-comboChart__annotationRegion" x={a.x} y={a.y} width={a.width} height={a.height} />
+              {#if a.label}
+                <text class="st-comboChart__annotationLabel" x={a.x + 4} y={a.y + 11}>{a.label}</text>
+              {/if}
+            {/if}
+          {/each}
+        </g>
+      {/if}
+
       <!-- bars -->
       {#each barGroups as group, gi (gi)}
         {#each group as seg, si (si)}
@@ -444,7 +629,93 @@
           {/each}
         {/if}
       {/each}
+
+      <!-- Annotations ABOVE the bars/lines: lines, shapes, points, labels. -->
+      {#if annotationAbove.length > 0}
+        <g class="st-comboChart__annotations st-comboChart__annotations--above">
+          {#each annotationAbove as a (a.key)}
+            {#if a.kind === "line"}
+              <line class="st-comboChart__annotationLine" x1={a.x1} y1={a.y1} x2={a.x2} y2={a.y2} />
+              {#if a.label}
+                <text
+                  class="st-comboChart__annotationLabel"
+                  x={a.axis === "x" ? a.x1 + 4 : MARGIN.left + plotWidth - 4}
+                  y={a.axis === "x" ? MARGIN.top + 11 : a.y1 - 4}
+                  text-anchor={a.axis === "x" ? "start" : "end"}
+                >
+                  {a.label}
+                </text>
+              {/if}
+            {:else if a.kind === "shape"}
+              <polygon class="st-comboChart__annotationShape" points={polygonPoints(a.points)} />
+              {#if a.label}
+                <text class="st-comboChart__annotationLabel" x={a.labelX} y={a.labelY} text-anchor="middle">{a.label}</text>
+              {/if}
+            {:else if a.kind === "point"}
+              <circle class="st-comboChart__annotationPoint" cx={a.x} cy={a.y} r="4.5" />
+              {#if a.label}
+                <text class="st-comboChart__annotationLabel" x={a.x} y={a.y - 8} text-anchor="middle">{a.label}</text>
+              {/if}
+            {:else if a.kind === "label"}
+              <text class="st-comboChart__annotationText" x={a.x} y={a.y} text-anchor={a.anchor}>{a.text}</text>
+            {/if}
+          {/each}
+        </g>
+      {/if}
+
+      <!-- Data labels — one value per bar + per line point, on top. aria-hidden. -->
+      {#if barDataLabelItems.length + lineDataLabelItems.length > 0}
+        <g class="st-comboChart__dataLabels" aria-hidden="true">
+          {#each barDataLabelItems as d (d.key)}
+            <text class="st-comboChart__dataLabel" x={d.x} y={d.y} text-anchor="middle" dominant-baseline={d.baseline}>{d.text}</text>
+          {/each}
+          {#each lineDataLabelItems as d (d.key)}
+            <text class="st-comboChart__dataLabel" x={d.x} y={d.y} text-anchor="middle" dominant-baseline={d.baseline}>{d.text}</text>
+          {/each}
+        </g>
+      {/if}
+
+      <!-- Crosshair (FR-3) — a tokenised dashed line on the CATEGORY axis at the
+           active category. Decorative (aria-hidden). -->
+      {#if crosshairX !== null}
+        <g class="st-comboChart__crosshair" aria-hidden="true">
+          <line class="st-comboChart__crosshairLine" x1={crosshairX} x2={crosshairX} y1={MARGIN.top} y2={MARGIN.top + plotHeight} />
+        </g>
+      {/if}
     </svg>
+
+    <!-- Keyboard navigation overlay (FR-5) — a focusable, transparent column per
+         category. NOT aria-hidden: the accessible roving cursor. -->
+    {#if navEnabled}
+      <svg
+        class="st-comboChart__navLayer"
+        viewBox="0 0 {width} {height}"
+        preserveAspectRatio="xMidYMid meet"
+        width="100%"
+        height="100%"
+        role="group"
+        aria-label="{label} — points de données"
+      >
+        {#each categories as category, ci (ci)}
+          <rect
+            bind:this={datapointRefs[ci]}
+            class="st-comboChart__navDatum"
+            x={MARGIN.left + (plotWidth / Math.max(categories.length, 1)) * ci}
+            y={MARGIN.top}
+            width={plotWidth / Math.max(categories.length, 1)}
+            height={plotHeight}
+            role="img"
+            tabindex={rovingTabIndex(ci, focusedIndex, categories.length)}
+            aria-label={datapointAriaLabel(category, categorySummary(ci))}
+            onkeydown={(event) => handleDatapointKeyDown(event, ci)}
+            onfocus={() => {
+              focusedIndex = ci;
+              emitHoverKey(ci);
+            }}
+          />
+        {/each}
+      </svg>
+    {/if}
   </div>
 
   <ChartDataList {label} items={dataValueItems} />
@@ -578,6 +849,66 @@
   .st-comboChart__dot--category7 { fill: var(--st-semantic-data-category7); }
   .st-comboChart__dot--category8 { fill: var(--st-semantic-data-category8); }
 
+  /* --- Annotation layer ----------------------------------------------------
+     Regions render BEHIND the bars; lines/shapes/points/labels render ABOVE. */
+  .st-comboChart__annotationRegion {
+    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
+    stroke: none;
+  }
+  .st-comboChart__annotationLine {
+    stroke: var(--st-semantic-feedback-info);
+    stroke-width: 1.5;
+    stroke-dasharray: 4 3;
+  }
+  .st-comboChart__annotationShape {
+    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
+    stroke: var(--st-semantic-feedback-info);
+    stroke-width: 1.5;
+  }
+  .st-comboChart__annotationPoint {
+    fill: var(--st-semantic-feedback-info);
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 1.5;
+  }
+  .st-comboChart__annotationLabel,
+  .st-comboChart__annotationText {
+    fill: var(--st-semantic-text-primary);
+    font-size: 0.625rem;
+    font-weight: 600;
+  }
+
+  /* Data labels — per-bar + per-point value, drawn on top. Token-only colour. */
+  .st-comboChart__dataLabel {
+    fill: var(--st-semantic-text-primary);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
+
+  /* --- Crosshair layer (FR-3) ----------------------------------------------
+     A tokenised dashed line on the CATEGORY axis at the active category. */
+  .st-comboChart__crosshairLine {
+    stroke: var(--st-semantic-border-strong);
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    opacity: 0.7;
+  }
+
+  /* --- Keyboard navigation layer (FR-5) ------------------------------------
+     A focusable, transparent overlay of one column per category. */
+  .st-comboChart__navLayer {
+    inset: 0;
+    position: absolute;
+  }
+  .st-comboChart__navDatum {
+    fill: transparent;
+    outline: none;
+  }
+  .st-comboChart__navDatum:focus-visible {
+    fill: color-mix(in srgb, var(--st-semantic-border-interactive) 12%, transparent);
+    outline: 2px solid var(--st-semantic-border-interactive);
+    outline-offset: 1px;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .st-comboChart__bar,
     .st-comboChart__dot {

package/dist/ComboChart.svelte.d.ts

@@ -10,6 +10,8 @@ export type ComboChartLineSeries = {
     tone?: ComboChartTone;
     smooth?: boolean;
 };
+import { type ChartAnnotation } from "./chartAnnotations.js";
+import { type DataLabelsProp } from "./chartDataLabels.js";
 type ComboChartProps = {
     categories: string[];
     bars?: ComboChartBarSeries[];
@@ -26,6 +28,38 @@ type ComboChartProps = {
     hiddenSeries?: string[];
     /** Emitted on click / Enter / Space on a legend item. */
     onToggleSeries?: (seriesId: string) => void;
+    /**
+     * Annotation overlay in DATA space. The x coordinate is CATEGORICAL — it
+     * matches a category by equality (band centre); the y coordinate (and
+     * `value`/`from`/`to`) are LEFT (bar) value-axis numbers. Regions render
+     * behind the bars, every other kind above. Additive: absent ⇒ unchanged.
+     */
+    annotations?: ChartAnnotation[];
+    /**
+     * Per-datum value labels on BOTH the bars and the line points. `false`/absent
+     * (default) → none. `true` → each value with the chart's numeric formatter.
+     * Object → `format(value)` and/or a `position` override. Labels are
+     * `aria-hidden` — the values already live in the accessible ChartDataList.
+     */
+    dataLabels?: DataLabelsProp;
+    /**
+     * CONTROLLED synchronised hover key (FR-3). The key is the CATEGORY string.
+     * When provided (string or null), the crosshair tracks this key instead of
+     * the chart's internal pointer hover (null ⇒ nothing shown). Absent keeps
+     * the legacy uncontrolled behaviour.
+     */
+    hoverKey?: string | null;
+    /** Emitted when the user hovers a bar/point (its CATEGORY) or leaves (`null`). */
+    onHoverKeyChange?: (key: string | null) => void;
+    /**
+     * FR-5 — keyboard navigation of the categories (roving tabindex). When `true`
+     * (or implied by wiring `onSelectKey`), a focusable overlay of one column per
+     * category is rendered: one tab stop, arrows move, Home/End jump, Enter/Space
+     * select, Escape leaves. Absent ⇒ no overlay, rendering unchanged.
+     */
+    keyboardNav?: boolean;
+    /** Emitted on Enter/Space (category) or `null` on Escape. */
+    onSelectKey?: (key: string | null) => 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;;;;;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"}
+{"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;AAIJ,OAAO,EAIH,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AACjC,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAK/F,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;;;;;OAKG;IACH,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4jBJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}