@sentropic/design-system-svelte 0.34.28 → 0.34.32

package/dist/KpiCard.svelte

@@ -12,11 +12,19 @@
     | "category6"
     | "category7"
     | "category8";
+
+  export type { CellDecoration, CellDecorationIntent } from "./cellDecoration.js";
 </script>
 
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
   import Sparkline from "./Sparkline.svelte";
+  import {
+    type CellDecoration,
+    cellDecorationClass,
+    cellDecorationLabel,
+  } from "./cellDecoration.js";
+  import CellDecorationIcon from "./CellDecorationIcon.svelte";
 
   type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
     /** Valeur principale affichée en grand. */
@@ -42,6 +50,11 @@
     size?: KpiCardSize;
     /** Couleur catégorielle pour l'accent (bordure de gauche). */
     tone?: KpiCardTone;
+    /**
+     * Conditional formatting : décoration sémantique de la carte (intent → token
+     * feedback en fond teinté accessible + icône lucide optionnelle).
+     */
+    decoration?: CellDecoration;
     class?: string;
   };
 
@@ -58,6 +71,7 @@
     sparkline,
     size = "md",
     tone,
+    decoration,
     class: className,
     ...rest
   }: KpiCardProps = $props();
@@ -116,7 +130,13 @@
   );
 
   const ariaLabel = $derived(
-    [label, formattedValue, unit, formattedDelta && `${formattedDelta} ${trendLabel ?? ""}`.trim()]
+    [
+      label,
+      formattedValue,
+      unit,
+      formattedDelta && `${formattedDelta} ${trendLabel ?? ""}`.trim(),
+      decoration && cellDecorationLabel[decoration.intent]
+    ]
       .filter(Boolean)
       .join(", ")
   );
@@ -127,6 +147,8 @@
       `st-kpiCard--${size}`,
       tone && `st-kpiCard--${tone}`,
       tone && "st-kpiCard--toned",
+      decoration && "st-cell",
+      decoration && cellDecorationClass(decoration.intent),
       className
     ]
       .filter(Boolean)
@@ -138,6 +160,9 @@
   <p class="st-kpiCard__label">{label}</p>
 
   <p class="st-kpiCard__value">
+    {#if decoration}
+      <CellDecorationIcon icon={decoration.icon} />
+    {/if}
     <span class="st-kpiCard__number">{formattedValue}</span>
     {#if unit}
       <span class="st-kpiCard__unit">{unit}</span>
@@ -235,6 +260,46 @@
     margin: 0;
   }
 
+  /* Conditional formatting (« classe Power-BI ») : fond teinté accessible
+     (color-mix 14% sur token feedback, comme Badge/Tag) + icône alignée sur la
+     valeur. Le fond n'est jamais la seule indication (icône + texte SR). */
+  .st-kpiCard.st-cell {
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-kpiCard.st-cell .st-kpiCard__value {
+    align-items: center;
+  }
+
+  .st-kpiCard.st-cell .st-kpiCard__number {
+    color: inherit;
+  }
+
+  .st-cell--intent-positive {
+    background: color-mix(in srgb, var(--st-semantic-feedback-success) 14%, white);
+    color: var(--st-semantic-feedback-success);
+  }
+
+  .st-cell--intent-negative {
+    background: color-mix(in srgb, var(--st-semantic-feedback-error) 14%, white);
+    color: var(--st-semantic-feedback-error);
+  }
+
+  .st-cell--intent-warning {
+    background: color-mix(in srgb, var(--st-semantic-feedback-warning) 14%, white);
+    color: var(--st-semantic-feedback-warning);
+  }
+
+  .st-cell--intent-info {
+    background: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white);
+    color: var(--st-semantic-feedback-info);
+  }
+
+  .st-cell--intent-neutral {
+    background: var(--st-semantic-surface-subtle);
+    color: var(--st-semantic-text-secondary);
+  }
+
   .st-kpiCard__number {
     font-size: 1.5rem;
     font-weight: 700;

package/dist/KpiCard.svelte.d.ts

@@ -3,7 +3,9 @@ export type KpiCardTrend = "up" | "down" | "flat";
 export type KpiCardFormat = "number" | "currency" | "percent";
 export type KpiCardDeltaFormat = "percent" | "absolute";
 export type KpiCardTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type { CellDecoration, CellDecorationIntent } from "./cellDecoration.js";
 import type { HTMLAttributes } from "svelte/elements";
+import { type CellDecoration } from "./cellDecoration.js";
 type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
     /** Valeur principale affichée en grand. */
     value: number | string;
@@ -28,6 +30,11 @@ type KpiCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
     size?: KpiCardSize;
     /** Couleur catégorielle pour l'accent (bordure de gauche). */
     tone?: KpiCardTone;
+    /**
+     * Conditional formatting : décoration sémantique de la carte (intent → token
+     * feedback en fond teinté accessible + icône lucide optionnelle).
+     */
+    decoration?: CellDecoration;
     class?: string;
 };
 declare const KpiCard: import("svelte").Component<KpiCardProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"KpiCard.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KpiCard.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAGlB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uDAAuD;IACvD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiIJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"KpiCard.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KpiCard.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGlF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EACH,KAAK,cAAc,EAGpB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uDAAuD;IACvD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+IJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/OHLCChart.svelte

@@ -10,9 +10,15 @@
    *   label  string
    *
    * Props optionnelles :
-   *   width   number  (défaut 480)
-   *   height  number  (défaut 240)
-   *   class   string
+   *   width            number  (défaut 480)
+   *   height           number  (défaut 240)
+   *   annotations      ChartAnnotation[]  - overlay support/résistance/zones/events
+   *   dataLabels       boolean | { format?, position? }  - étiquette close par bâton
+   *   hoverKey         string | null  - crosshair contrôlé (clé = date/catégorie)
+   *   onHoverKeyChange (key) => void   - émet la date survolée (ou null)
+   *   keyboardNav      boolean         - navigation clavier (roving tabindex)
+   *   onSelectKey      (key) => void   - sélection clavier (Enter/Space) ; null = Escape
+   *   class            string
    */
   export type OHLCChartDatum = {
     label: string;
@@ -25,12 +31,27 @@
 
 <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 { resolveActiveIndex } from "./chartCrosshair.js";
+  import { datapointAriaLabel, datapointNavAction, rovingTabIndex } from "./chartKeyboardNav.js";
 
   type OHLCChartProps = {
     data: OHLCChartDatum[];
     label: string;
     width?: number;
     height?: number;
+    annotations?: ChartAnnotation[];
+    dataLabels?: DataLabelsProp;
+    hoverKey?: string | null;
+    onHoverKeyChange?: (key: string | null) => void;
+    keyboardNav?: boolean;
+    onSelectKey?: (key: string | null) => void;
     class?: string;
   };
 
@@ -39,6 +60,12 @@
     label,
     width = 480,
     height = 240,
+    annotations,
+    dataLabels,
+    hoverKey,
+    onHoverKeyChange,
+    keyboardNav,
+    onSelectKey,
     class: className
   }: OHLCChartProps = $props();
 
@@ -79,6 +106,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));
@@ -134,6 +164,7 @@
         index: i,
         bullish,
         centerX,
+        band,
         barHighY: highY,
         barLowY: lowY,
         openY,
@@ -145,15 +176,103 @@
     });
   });
 
-  const dataValueItems = $derived(
-    validData.map((d) => `${d.label}: O ${d.open} H ${d.high} L ${d.low} C ${d.close}`)
+  // --- Annotation overlay ---------------------------------------------------
+  // The x coordinate is CATEGORICAL (a bar `label` → centre of band); the y
+  // coordinate is a price-axis number. Regions render behind the bars, every
+  // other kind above. The resolver maps each x via `xScale` (category → pixel)
+  // and each y via `yScale` (price → pixel), relative to the plot origin.
+  const priceY = $derived((v: number): number | null => {
+    if (!Number.isFinite(v)) return null;
+    return scaleLinear(v, domainMin, domainMax, plotHeight, 0);
+  });
+  const categoryPixel = $derived((v: number | string): number | null => {
+    const bar = bars.find((b) => b.datum.label === String(v));
+    if (!bar) return null;
+    return bar.centerX - MARGIN.left;
+  });
+  const resolvedAnnotations = $derived(
+    resolveAnnotations(annotations, {
+      xScale: categoryPixel,
+      yScale: priceY,
+      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 `close` value label per bar, placed just above it. aria-hidden.
+  const dataLabelOpts = $derived(normalizeDataLabels(dataLabels));
+  const dataLabelItems = $derived.by(() => {
+    if (!dataLabelOpts.enabled) return [] as { key: string; x: number; y: number; text: string }[];
+    return bars.map((bar) => ({
+      key: bar.datum.label,
+      x: bar.centerX,
+      y: bar.barHighY - 6,
+      text: formatDataLabel(bar.datum.close, dataLabelOpts, formatTick)
+    }));
+  });
 
+  const dataValueItems = $derived([
+    ...validData.map((d) => `${d.label}: O ${d.open} H ${d.high} L ${d.low} C ${d.close}`),
+    ...annotationDataListItems(annotations)
+  ]);
+
+  // Stable key per bar (FR-3): its `label`. Resolves a controlled `hoverKey` to
+  // an index and feeds `onHoverKeyChange` from pointer events.
+  const hoverKeys = $derived(bars.map((b) => b.datum.label));
+  function emitHoverKey(index: number | null) {
+    onHoverKeyChange?.(index == null ? null : hoverKeys[index] ?? null);
+  }
+  function handleLeave() {
+    hoveredIndex = null;
+    emitHoverKey(null);
+  }
   function handlePointerMove(event: PointerEvent) {
     const target = event.target;
-    if (!(target instanceof Element)) { hoveredIndex = null; return; }
-    const idx = Number(target.getAttribute("data-chart-index"));
-    hoveredIndex = Number.isInteger(idx) ? idx : null;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      emitHoverKey(null);
+      return;
+    }
+    const raw = Number(target.getAttribute("data-chart-index"));
+    const index = Number.isInteger(raw) ? raw : null;
+    hoveredIndex = index;
+    emitHoverKey(index);
+  }
+
+  // Index whose crosshair/tooltip is DISPLAYED: the controlled `hoverKey` when
+  // 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`).
+  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 {
+      focusedIndex = -1;
+      emitHoverKey(null);
+      onSelectKey?.(null);
+      (event.currentTarget as SVGElement).blur();
+    }
+  }
+  function ohlcAriaLabel(d: OHLCChartDatum): string {
+    return datapointAriaLabel(d.label, `O ${d.open} H ${d.high} L ${d.low} C ${d.close}`);
   }
 
   const classes = () => ["st-ohlcChart", className].filter(Boolean).join(" ");
@@ -165,7 +284,7 @@
     role="img"
     aria-label={label}
     onpointermove={handlePointerMove}
-    onpointerleave={() => (hoveredIndex = null)}
+    onpointerleave={handleLeave}
   >
     <svg
       viewBox="0 0 {width} {height}"
@@ -188,6 +307,20 @@
       <line class="st-ohlcChart__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
       <line class="st-ohlcChart__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
 
+      <!-- Annotation regions sit BEHIND the bars (filled bands). -->
+      {#if annotationRegions.length > 0}
+        <g class="st-ohlcChart__annotations st-ohlcChart__annotations--behind">
+          {#each annotationRegions as a (a.key)}
+            {#if a.kind === "region"}
+              <rect class="st-ohlcChart__annotationRegion" x={a.x} y={a.y} width={a.width} height={a.height} />
+              {#if a.label}
+                <text class="st-ohlcChart__annotationLabel" x={a.x + 4} y={a.y + 11}>{a.label}</text>
+              {/if}
+            {/if}
+          {/each}
+        </g>
+      {/if}
+
       <!-- clé composite pour éviter les doublons -->
       {#each bars as b, i (`${i}-${b.datum.label}`)}
         <g
@@ -232,13 +365,95 @@
           {b.datum.label}
         </text>
       {/each}
+
+      <!-- Annotations ABOVE the bars: lines, shapes, points, labels. -->
+      {#if annotationAbove.length > 0}
+        <g class="st-ohlcChart__annotations st-ohlcChart__annotations--above">
+          {#each annotationAbove as a (a.key)}
+            {#if a.kind === "line"}
+              <line class="st-ohlcChart__annotationLine" x1={a.x1} y1={a.y1} x2={a.x2} y2={a.y2} />
+              {#if a.label}
+                <text
+                  class="st-ohlcChart__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-ohlcChart__annotationShape" points={polygonPoints(a.points)} />
+              {#if a.label}
+                <text class="st-ohlcChart__annotationLabel" x={a.labelX} y={a.labelY} text-anchor="middle">{a.label}</text>
+              {/if}
+            {:else if a.kind === "point"}
+              <circle class="st-ohlcChart__annotationPoint" cx={a.x} cy={a.y} r="4.5" />
+              {#if a.label}
+                <text class="st-ohlcChart__annotationLabel" x={a.x} y={a.y - 8} text-anchor="middle">{a.label}</text>
+              {/if}
+            {:else}
+              <text class="st-ohlcChart__annotationText" x={a.x} y={a.y} text-anchor={a.anchor}>{a.text}</text>
+            {/if}
+          {/each}
+        </g>
+      {/if}
+
+      <!-- Data labels — one close value per bar, drawn on top. aria-hidden. -->
+      {#if dataLabelItems.length > 0}
+        <g class="st-ohlcChart__dataLabels" aria-hidden="true">
+          {#each dataLabelItems as d (d.key)}
+            <text class="st-ohlcChart__dataLabel" x={d.x} y={d.y} text-anchor="middle" dominant-baseline="auto">{d.text}</text>
+          {/each}
+        </g>
+      {/if}
+
+      <!-- Crosshair (FR-3) — a tokenised dashed vertical line at the active bar.
+           Decorative (aria-hidden); the value is in the tooltip + ChartDataList. -->
+      {#if activeIndex >= 0 && bars[activeIndex]}
+        {@const cb = bars[activeIndex]}
+        <g class="st-ohlcChart__crosshair" aria-hidden="true">
+          <line class="st-ohlcChart__crosshairLine" x1={cb.centerX} x2={cb.centerX} y1={MARGIN.top} y2={MARGIN.top + plotHeight} />
+        </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. -->
+    {#if navEnabled}
+      <svg
+        class="st-ohlcChart__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 (`${i}-${bar.datum.label}`)}
+          <rect
+            bind:this={datapointRefs[i]}
+            class="st-ohlcChart__navDatum"
+            x={bar.centerX - bar.band / 2}
+            y={MARGIN.top}
+            width={bar.band}
+            height={plotHeight}
+            role="img"
+            tabindex={rovingTabIndex(i, focusedIndex, bars.length)}
+            aria-label={ohlcAriaLabel(bar.datum)}
+            onkeydown={(event) => handleDatapointKeyDown(event, i)}
+            onfocus={() => {
+              focusedIndex = i;
+              emitHoverKey(i);
+            }}
+          />
+        {/each}
+      </svg>
+    {/if}
   </div>
 
   <ChartDataList {label} items={dataValueItems} />
 
-  {#if hoveredIndex !== null && bars[hoveredIndex]}
-    {@const b = bars[hoveredIndex]}
+  {#if activeIndex >= 0 && bars[activeIndex]}
+    {@const b = bars[activeIndex]}
     <div
       class="st-ohlcChart__tooltip"
       role="presentation"
@@ -266,6 +481,7 @@
 
   .st-ohlcChart__visual {
     display: block;
+    position: relative;
   }
 
   .st-ohlcChart__axis {
@@ -304,6 +520,65 @@
     stroke: var(--st-semantic-feedback-error);
   }
 
+  /* --- Annotation layer ----------------------------------------------------
+     Regions render BEHIND the bars; lines/shapes/points/labels render ABOVE. */
+  .st-ohlcChart__annotationRegion {
+    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
+    stroke: none;
+  }
+  .st-ohlcChart__annotationLine {
+    stroke: var(--st-semantic-feedback-info);
+    stroke-width: 1.5;
+    stroke-dasharray: 4 3;
+  }
+  .st-ohlcChart__annotationShape {
+    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
+    stroke: var(--st-semantic-feedback-info);
+    stroke-width: 1.5;
+  }
+  .st-ohlcChart__annotationPoint {
+    fill: var(--st-semantic-feedback-info);
+    stroke: var(--st-semantic-surface-default);
+    stroke-width: 1.5;
+  }
+  .st-ohlcChart__annotationLabel,
+  .st-ohlcChart__annotationText {
+    fill: var(--st-semantic-text-primary);
+    font-size: 0.625rem;
+    font-weight: 600;
+  }
+
+  /* Data labels — per-bar close value, drawn on top. Token-only colour. */
+  .st-ohlcChart__dataLabel {
+    fill: var(--st-semantic-text-primary);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
+
+  /* Crosshair (FR-3) — a tokenised dashed vertical line at the active bar. */
+  .st-ohlcChart__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
+     hit-rect per bar. Carries the roving tab stop; the focus ring is tokenised. */
+  .st-ohlcChart__navLayer {
+    inset: 0;
+    position: absolute;
+  }
+  .st-ohlcChart__navDatum {
+    fill: transparent;
+    outline: none;
+  }
+  .st-ohlcChart__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-ohlcChart__bar {
       transition: none;

package/dist/OHLCChart.svelte.d.ts

@@ -9,9 +9,15 @@
  *   label  string
  *
  * Props optionnelles :
- *   width   number  (défaut 480)
- *   height  number  (défaut 240)
- *   class   string
+ *   width            number  (défaut 480)
+ *   height           number  (défaut 240)
+ *   annotations      ChartAnnotation[]  - overlay support/résistance/zones/events
+ *   dataLabels       boolean | { format?, position? }  - étiquette close par bâton
+ *   hoverKey         string | null  - crosshair contrôlé (clé = date/catégorie)
+ *   onHoverKeyChange (key) => void   - émet la date survolée (ou null)
+ *   keyboardNav      boolean         - navigation clavier (roving tabindex)
+ *   onSelectKey      (key) => void   - sélection clavier (Enter/Space) ; null = Escape
+ *   class            string
  */
 export type OHLCChartDatum = {
     label: string;
@@ -20,11 +26,19 @@ export type OHLCChartDatum = {
     low: number;
     close: number;
 };
+import { type ChartAnnotation } from "./chartAnnotations.js";
+import { type DataLabelsProp } from "./chartDataLabels.js";
 type OHLCChartProps = {
     data: OHLCChartDatum[];
     label: string;
     width?: number;
     height?: number;
+    annotations?: ChartAnnotation[];
+    dataLabels?: DataLabelsProp;
+    hoverKey?: string | null;
+    onHoverKeyChange?: (key: string | null) => void;
+    keyboardNav?: boolean;
+    onSelectKey?: (key: string | null) => void;
     class?: string;
 };
 declare const OHLCChart: import("svelte").Component<OHLCChartProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"OHLCChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OHLCChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqLJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"OHLCChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OHLCChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,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,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgWJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}