@sentropic/design-system-svelte 0.34.28 → 0.34.32

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"}

package/dist/DataTable.svelte

@@ -1,5 +1,8 @@
 <script lang="ts" module>
   import type { Snippet } from "svelte";
+  import type { CellDecoration } from "./cellDecoration.js";
+
+  export type { CellDecoration, CellDecorationIntent } from "./cellDecoration.js";
 
   export interface DataTableColumn<R = DataTableRow> {
     key: string;
@@ -8,6 +11,11 @@
     align?: "start" | "center" | "end";
     width?: string;
     cell?: Snippet<[R, DataTableColumn<R>]>;
+    /**
+     * Conditional formatting (confort) : décoration sémantique calculée par
+     * cellule. Si une `decorations` map est aussi fournie, la map gagne.
+     */
+    cellDecoration?: (row: R, value: unknown, colId: string) => CellDecoration | null;
   }
 
   export interface DataTableRow {
@@ -25,10 +33,17 @@
 
 <script lang="ts">
   import type { HTMLTableAttributes } from "svelte/elements";
+  import { cellDecorationClass, cellDecorationLabel } from "./cellDecoration.js";
+  import CellDecorationIcon from "./CellDecorationIcon.svelte";
 
   type DataTableProps = Omit<HTMLTableAttributes, "class"> & {
     columns: DataTableColumn[];
     rows: DataTableRow[];
+    /**
+     * Conditional formatting : décorations sémantiques par cellule, indexées
+     * `rowId` → `colId` → décoration. Prioritaire sur `column.cellDecoration`.
+     */
+    decorations?: Record<string, Record<string, CellDecoration>>;
     caption?: string;
     size?: "sm" | "md" | "lg";
     selectable?: DataTableSelectMode;
@@ -53,6 +68,7 @@
   let {
     columns,
     rows,
+    decorations,
     caption,
     size = "md",
     selectable = "none",
@@ -191,6 +207,28 @@
     return String(row[key] ?? "");
   }
 
+  function resolveDecoration(row: DataTableRow, column: DataTableColumn): CellDecoration | null {
+    // La map `decorations` gagne sur le callback `column.cellDecoration`.
+    const fromMap = decorations?.[row.id]?.[column.key];
+    if (fromMap) return fromMap;
+    if (column.cellDecoration) {
+      return column.cellDecoration(row, row[column.key], column.key) ?? null;
+    }
+    return null;
+  }
+
+  function cellClass(column: DataTableColumn, decoration: CellDecoration | null) {
+    return (
+      [
+        alignClass(column.align),
+        decoration && "st-cell",
+        decoration && cellDecorationClass(decoration.intent),
+      ]
+        .filter(Boolean)
+        .join(" ") || undefined
+    );
+  }
+
   function goToPage(target: number) {
     if (target >= 1 && target <= pageCount && target !== safePage) {
       page = target;
@@ -302,8 +340,24 @@
               </td>
             {/if}
             {#each columns as column (column.key)}
-              <td class={[alignClass(column.align)].filter(Boolean).join(" ") || undefined}>
-                {#if column.cell}
+              {@const decoration = resolveDecoration(row, column)}
+              <td
+                class={cellClass(column, decoration)}
+                title={decoration ? cellDecorationLabel[decoration.intent] : undefined}
+              >
+                {#if decoration}
+                  <span class="st-cell__content">
+                    <CellDecorationIcon icon={decoration.icon} />
+                    <span>
+                      {#if column.cell}
+                        {@render column.cell(row, column)}
+                      {:else}
+                        {cellValue(row, column.key)}
+                      {/if}
+                    </span>
+                    <span class="st-visually-hidden">{cellDecorationLabel[decoration.intent]}</span>
+                  </span>
+                {:else if column.cell}
                   {@render column.cell(row, column)}
                 {:else}
                   {cellValue(row, column.key)}
@@ -426,6 +480,41 @@
     text-align: end;
   }
 
+  /* Conditional formatting (« classe Power-BI ») — décoration sémantique de
+     cellule. Le fond teinté réutilise le pattern accessible de Badge/Tag
+     (color-mix 14% sur token feedback) ; le texte garde le token plein. Le fond
+     n'est jamais la seule indication : icône + texte SR accompagnent l'intent. */
+  .st-cell__content {
+    align-items: center;
+    display: inline-flex;
+    gap: 0.375rem;
+  }
+
+  .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-dataTable__select {
     width: 2.5rem;
   }

package/dist/DataTable.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { Snippet } from "svelte";
+import type { CellDecoration } from "./cellDecoration.js";
+export type { CellDecoration, CellDecorationIntent } from "./cellDecoration.js";
 export interface DataTableColumn<R = DataTableRow> {
     key: string;
     label: string;
@@ -6,6 +8,11 @@ export interface DataTableColumn<R = DataTableRow> {
     align?: "start" | "center" | "end";
     width?: string;
     cell?: Snippet<[R, DataTableColumn<R>]>;
+    /**
+     * Conditional formatting (confort) : décoration sémantique calculée par
+     * cellule. Si une `decorations` map est aussi fournie, la map gagne.
+     */
+    cellDecoration?: (row: R, value: unknown, colId: string) => CellDecoration | null;
 }
 export interface DataTableRow {
     id: string;
@@ -20,6 +27,11 @@ import type { HTMLTableAttributes } from "svelte/elements";
 type DataTableProps = Omit<HTMLTableAttributes, "class"> & {
     columns: DataTableColumn[];
     rows: DataTableRow[];
+    /**
+     * Conditional formatting : décorations sémantiques par cellule, indexées
+     * `rowId` → `colId` → décoration. Prioritaire sur `column.cellDecoration`.
+     */
+    decorations?: Record<string, Record<string, CellDecoration>>;
     caption?: string;
     size?: "sm" | "md" | "lg";
     selectable?: DataTableSelectMode;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DataTable.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,YAAY;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACzD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiQJ,QAAA,MAAM,SAAS,mFAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DataTable.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhF,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,YAAY;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC;CACnF;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,GAAG;IACzD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuSJ,QAAA,MAAM,SAAS,mFAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}