@sentropic/design-system-svelte 0.16.0 → 0.18.0

package/dist/FunnelChart.svelte

@@ -0,0 +1,358 @@
+<script lang="ts" module>
+  export type FunnelChartTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type FunnelChartDatum = {
+    label: string;
+    value: number;
+    tone?: FunnelChartTone;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+  import { contrastTextForTone } from "./chartContrast";
+
+  type FunnelChartProps = {
+    data: FunnelChartDatum[];
+    orientation?: "vertical" | "horizontal";
+    showPercentages?: boolean;
+    percentMode?: "ofFirst" | "ofPrevious";
+    legend?: boolean;
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    data,
+    orientation = "vertical",
+    showPercentages = true,
+    percentMode = "ofFirst",
+    legend = false,
+    label,
+    width = 480,
+    height = 280,
+    class: className
+  }: FunnelChartProps = $props();
+
+  const MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };
+  const GAP = 6;
+  const TONES = [
+    "category1", "category2", "category3", "category4",
+    "category5", "category6", "category7", "category8"
+  ] as const;
+
+  function formatPercent(p: number): string {
+    if (!Number.isFinite(p)) return "0%";
+    return `${p % 1 === 0 ? p.toFixed(0) : p.toFixed(1)}%`;
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  /**
+   * Magnitude normalisée d'une étape : un entonnoir ne représente que des
+   * grandeurs positives. Les valeurs non finies ou négatives sont ramenées à 0
+   * (jamais de NaN/Infinity dans la géométrie ou les pourcentages).
+   */
+  function magnitude(v: number): number {
+    return Number.isFinite(v) && v > 0 ? v : 0;
+  }
+
+  // Pourcentages calculés par rapport à la première étape ou à la précédente.
+  // Référence nulle → 0% (pas de NaN), première étape ofPrevious → 100%.
+  const percents = $derived.by(() => {
+    const first = magnitude(data[0]?.value ?? 0);
+    return data.map((d, i) => {
+      const value = magnitude(d.value);
+      const ref = percentMode === "ofPrevious" ? magnitude(data[i - 1]?.value ?? value) : first;
+      return ref === 0 ? 0 : (value / ref) * 100;
+    });
+  });
+
+  // Trapèzes décroissants centrés : la demi-largeur de chaque étape est
+  // proportionnelle à sa valeur (relative au max). Les segments se rejoignent.
+  const segments = $derived.by(() => {
+    if (data.length === 0) return [];
+    const maxValue = Math.max(0, ...data.map((d) => magnitude(d.value)));
+    const safeMax = maxValue === 0 ? 1 : maxValue;
+    const plotW = Math.max(width - MARGIN.left - MARGIN.right, 1);
+    const plotH = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+
+    if (orientation === "vertical") {
+      const band = plotH / data.length;
+      const segH = Math.max(band - GAP, 1);
+      const cx = MARGIN.left + plotW / 2;
+      return data.map((d, i) => {
+        const tone = d.tone ?? TONES[i % TONES.length];
+        const topHalf = (magnitude(d.value) / safeMax) * (plotW / 2);
+        const nextVal = data[i + 1] ? magnitude(data[i + 1].value) : magnitude(d.value);
+        // Forme strictement décroissante : le bas ne dépasse jamais le haut.
+        const botHalf = Math.min((nextVal / safeMax) * (plotW / 2), topHalf);
+        const y0 = MARGIN.top + band * i;
+        const y1 = y0 + segH;
+        const points = [
+          `${cx - topHalf},${y0}`,
+          `${cx + topHalf},${y0}`,
+          `${cx + botHalf},${y1}`,
+          `${cx - botHalf},${y1}`
+        ].join(" ");
+        return {
+          points,
+          datum: d,
+          tone,
+          textColor: contrastTextForTone(tone),
+          cx,
+          cy: (y0 + y1) / 2,
+          labelX: cx,
+          labelY: (y0 + y1) / 2,
+          percent: percents[i]
+        };
+      });
+    }
+
+    // horizontal : entonnoir qui se rétrécit de gauche à droite.
+    const band = plotW / data.length;
+    const segW = Math.max(band - GAP, 1);
+    const cy = MARGIN.top + plotH / 2;
+    return data.map((d, i) => {
+      const tone = d.tone ?? TONES[i % TONES.length];
+      const leftHalf = (magnitude(d.value) / safeMax) * (plotH / 2);
+      const nextVal = data[i + 1] ? magnitude(data[i + 1].value) : magnitude(d.value);
+      const rightHalf = Math.min((nextVal / safeMax) * (plotH / 2), leftHalf);
+      const x0 = MARGIN.left + band * i;
+      const x1 = x0 + segW;
+      const points = [
+        `${x0},${cy - leftHalf}`,
+        `${x1},${cy - rightHalf}`,
+        `${x1},${cy + rightHalf}`,
+        `${x0},${cy + leftHalf}`
+      ].join(" ");
+      return {
+        points,
+        datum: d,
+        tone,
+        textColor: contrastTextForTone(tone),
+        cx: (x0 + x1) / 2,
+        cy,
+        labelX: (x0 + x1) / 2,
+        labelY: cy,
+        percent: percents[i]
+      };
+    });
+  });
+
+  const dataValueItems = $derived(
+    data.map((d, i) =>
+      showPercentages
+        ? `${d.label}: ${d.value} (${formatPercent(percents[i])})`
+        : `${d.label}: ${d.value}`
+    )
+  );
+
+  const legendItems = $derived(
+    data.map((d, i) => ({ label: d.label, tone: d.tone ?? TONES[i % TONES.length] }))
+  );
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
+
+  const classes = () => ["st-funnelChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-funnelChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      {#each segments as seg, i (seg.datum.label)}
+        <polygon
+          class="st-funnelChart__segment st-funnelChart__segment--{seg.tone}"
+          class:st-funnelChart__segment--dim={hoveredIndex !== null && hoveredIndex !== i}
+          points={seg.points}
+          data-chart-index={i}
+        />
+      {/each}
+
+      {#each segments as seg, i (seg.datum.label)}
+        <text
+          class="st-funnelChart__label"
+          x={seg.labelX}
+          y={seg.labelY - 6}
+          text-anchor="middle"
+          dominant-baseline="middle"
+          style="fill: {seg.textColor}"
+        >
+          {seg.datum.label}
+        </text>
+        <text
+          class="st-funnelChart__value"
+          x={seg.labelX}
+          y={seg.labelY + 8}
+          text-anchor="middle"
+          dominant-baseline="middle"
+          style="fill: {seg.textColor}"
+        >
+          {seg.datum.value}{#if showPercentages}&nbsp;·&nbsp;{formatPercent(seg.percent)}{/if}
+        </text>
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && segments[hoveredIndex]}
+    {@const seg = segments[hoveredIndex]}
+    <div
+      class="st-funnelChart__tooltip"
+      role="presentation"
+      style="left: {(seg.cx / width) * 100}%; top: {(seg.cy / height) * 100}%"
+    >
+      <span class="st-funnelChart__tooltipLabel">{seg.datum.label}</span>
+      <span class="st-funnelChart__tooltipValue">
+        {seg.datum.value}{#if showPercentages}&nbsp;·&nbsp;{formatPercent(seg.percent)}{/if}
+      </span>
+    </div>
+  {/if}
+
+  {#if legend && legendItems.length > 0}
+    <ul class="st-funnelChart__legend" aria-hidden="true">
+      {#each legendItems as item (item.label)}
+        <li class="st-funnelChart__legendItem">
+          <span
+            class="st-funnelChart__legendSwatch st-funnelChart__legendSwatch--{item.tone}"
+            aria-hidden="true"
+          ></span>
+          {item.label}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-funnelChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-funnelChart svg,
+  .st-funnelChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-funnelChart__segment {
+    cursor: pointer;
+    stroke: var(--st-semantic-surface-default, #fff);
+    stroke-width: 1;
+    transition: opacity 120ms ease;
+  }
+
+  .st-funnelChart__segment--dim {
+    opacity: 0.45;
+  }
+
+  .st-funnelChart__segment--category1 { fill: var(--st-semantic-data-category1); }
+  .st-funnelChart__segment--category2 { fill: var(--st-semantic-data-category2); }
+  .st-funnelChart__segment--category3 { fill: var(--st-semantic-data-category3); }
+  .st-funnelChart__segment--category4 { fill: var(--st-semantic-data-category4); }
+  .st-funnelChart__segment--category5 { fill: var(--st-semantic-data-category5); }
+  .st-funnelChart__segment--category6 { fill: var(--st-semantic-data-category6); }
+  .st-funnelChart__segment--category7 { fill: var(--st-semantic-data-category7); }
+  .st-funnelChart__segment--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-funnelChart__label {
+    fill: var(--st-component-funnelChart-labelColor, var(--st-semantic-text-inverse, #fff));
+    font-size: 0.75rem;
+    font-weight: 600;
+    pointer-events: none;
+  }
+
+  .st-funnelChart__value {
+    fill: var(--st-component-funnelChart-valueColor, var(--st-semantic-text-inverse, #fff));
+    font-size: 0.6875rem;
+    pointer-events: none;
+  }
+
+  .st-funnelChart__tooltip {
+    background: var(--st-semantic-surface-inverse);
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse);
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 0.75rem;
+    gap: 0.125rem;
+    line-height: 1.2;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(-50%, calc(-100% - 8px));
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-funnelChart__tooltipLabel { font-weight: 600; }
+  .st-funnelChart__tooltipValue { opacity: 0.85; }
+
+  .st-funnelChart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-3, 0.75rem);
+    list-style: none;
+    margin: var(--st-spacing-2, 0.5rem) 0 0;
+    padding: 0;
+  }
+
+  .st-funnelChart__legendItem {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    font-size: 0.75rem;
+    gap: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-funnelChart__legendSwatch {
+    border-radius: 2px;
+    height: 0.7rem;
+    width: 0.7rem;
+  }
+
+  .st-funnelChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
+  .st-funnelChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
+  .st-funnelChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
+  .st-funnelChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
+  .st-funnelChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
+  .st-funnelChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
+  .st-funnelChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
+  .st-funnelChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-funnelChart__segment {
+      transition: none;
+    }
+  }
+</style>

package/dist/FunnelChart.svelte.d.ts

@@ -0,0 +1,21 @@
+export type FunnelChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type FunnelChartDatum = {
+    label: string;
+    value: number;
+    tone?: FunnelChartTone;
+};
+type FunnelChartProps = {
+    data: FunnelChartDatum[];
+    orientation?: "vertical" | "horizontal";
+    showPercentages?: boolean;
+    percentMode?: "ofFirst" | "ofPrevious";
+    legend?: boolean;
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const FunnelChart: import("svelte").Component<FunnelChartProps, {}, "">;
+type FunnelChart = ReturnType<typeof FunnelChart>;
+export default FunnelChart;
+//# sourceMappingURL=FunnelChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FunnelChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GACvB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAOF,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqMJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/GaugeChart.svelte

@@ -0,0 +1,300 @@
+<script lang="ts" module>
+  export type GaugeChartTone =
+    | "neutral" | "info" | "success" | "warning" | "error"
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  /**
+   * Seuil de coloration. La bande s'étend depuis `value` (ou le minimum)
+   * jusqu'au seuil suivant (ou le maximum). `tone` choisit la couleur.
+   */
+  export type GaugeChartThreshold = {
+    value: number;
+    tone: GaugeChartTone;
+  };
+
+  export type GaugeChartFormat = "number" | "percent";
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type GaugeChartProps = {
+    value: number;
+    min?: number;
+    max?: number;
+    /** Bandes colorées sur la piste. Triées par `value` croissante. */
+    thresholds?: GaugeChartThreshold[];
+    /** Libellé décrivant la jauge (a11y + texte sous la valeur). */
+    label?: string;
+    /** Format de la valeur centrale. */
+    format?: GaugeChartFormat;
+    /** Suffixe d'unité (ignoré pour `percent`). */
+    unit?: string;
+    /** Diamètre du SVG. */
+    size?: number;
+    /** Épaisseur de l'arc. */
+    thickness?: number;
+    /** Angle de départ en degrés (0 = est, sens horaire). */
+    startAngle?: number;
+    /** Angle de fin en degrés. */
+    endAngle?: number;
+    class?: string;
+  };
+
+  let {
+    value,
+    min = 0,
+    max = 100,
+    thresholds,
+    label,
+    format = "number",
+    unit,
+    size = 220,
+    thickness = 22,
+    startAngle = 180,
+    endAngle = 360,
+    class: className
+  }: GaugeChartProps = $props();
+
+  const TAU = Math.PI * 2;
+  const toRad = (deg: number) => (deg * Math.PI) / 180;
+
+  const span = $derived(Math.max(max - min, 0));
+  const clamped = $derived(Math.min(Math.max(value, min), max));
+  const frac = $derived(span > 0 ? (clamped - min) / span : 0);
+
+  // Géométrie commune.
+  const cx = $derived(size / 2);
+  const r = $derived(size / 2 - thickness / 2 - 2);
+  const a0 = $derived(toRad(startAngle));
+  const a1 = $derived(toRad(endAngle));
+  const totalAngle = $derived(a1 - a0);
+
+  const polar = (radius: number, angle: number, centerX: number, centerY: number): [number, number] => [
+    centerX + radius * Math.cos(angle),
+    centerY + radius * Math.sin(angle)
+  ];
+
+  // Hauteur réelle de l'arc pour cadrer le viewBox (demi-cercle → moitié).
+  const geometry = $derived.by(() => {
+    const cyRaw = size / 2;
+    // Échantillonnage des extrema y/x pour un cadrage stable quel que soit l'angle.
+    const samples = 64;
+    let minY = Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i <= samples; i++) {
+      const a = a0 + (totalAngle * i) / samples;
+      const yOuter = cyRaw + (r + thickness / 2) * Math.sin(a);
+      minY = Math.min(minY, yOuter);
+      maxY = Math.max(maxY, yOuter);
+    }
+    minY = Math.min(minY, cyRaw - (r + thickness / 2));
+    const vbHeight = Math.min(maxY, size) - Math.max(minY, 0);
+    return { cy: cyRaw, vbTop: Math.max(minY, 0), vbHeight: Math.max(vbHeight, thickness) };
+  });
+
+  const cy = $derived(geometry.cy);
+
+  function arcPath(fromFrac: number, toFrac: number): string {
+    const from = a0 + totalAngle * fromFrac;
+    const to = a0 + totalAngle * toFrac;
+    const [x0, y0] = polar(r, from, cx, cy);
+    const [x1, y1] = polar(r, to, cx, cy);
+    const large = Math.abs(to - from) > Math.PI ? 1 : 0;
+    const sweep = totalAngle >= 0 ? 1 : 0;
+    return `M ${x0} ${y0} A ${r} ${r} 0 ${large} ${sweep} ${x1} ${y1}`;
+  }
+
+  // Bandes colorées issues des seuils.
+  const bands = $derived.by(() => {
+    if (!thresholds || thresholds.length === 0 || span <= 0) return [];
+    const sorted = [...thresholds].sort((a, b) => a.value - b.value);
+    const segments: Array<{ from: number; to: number; tone: GaugeChartTone }> = [];
+    let start = min;
+    for (const t of sorted) {
+      const end = Math.min(Math.max(t.value, min), max);
+      if (end <= start) continue;
+      segments.push({ from: (start - min) / span, to: (end - min) / span, tone: t.tone });
+      start = end;
+    }
+    if (start < max) {
+      const lastTone = sorted[sorted.length - 1]?.tone ?? "neutral";
+      segments.push({ from: (start - min) / span, to: 1, tone: lastTone });
+    }
+    return segments;
+  });
+
+  // Position de l'aiguille.
+  const needle = $derived.by(() => {
+    const a = a0 + totalAngle * frac;
+    const tip = polar(r + thickness / 2, a, cx, cy);
+    const left = polar(thickness * 0.18, a + Math.PI / 2, cx, cy);
+    const right = polar(thickness * 0.18, a - Math.PI / 2, cx, cy);
+    return `M ${left[0]} ${left[1]} L ${tip[0]} ${tip[1]} L ${right[0]} ${right[1]} Z`;
+  });
+
+  const formatted = $derived.by(() => {
+    if (format === "percent") {
+      const pct = span > 0 ? Math.round(frac * 100) : 0;
+      return `${pct}%`;
+    }
+    const num = Number.isInteger(clamped) ? String(clamped) : clamped.toFixed(1);
+    return unit ? `${num} ${unit}` : num;
+  });
+
+  const ariaValueText = $derived(label ? `${label}: ${formatted}` : formatted);
+
+  const classes = $derived(["st-gaugeChart", className].filter(Boolean).join(" "));
+  const dataValueItems = $derived([
+    `${label ? `${label}: ` : ""}${formatted} (min ${min}, max ${max})`
+  ]);
+</script>
+
+<div class={classes}>
+  <div
+    class="st-gaugeChart__visual"
+    role="meter"
+    aria-valuenow={clamped}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuetext={ariaValueText}
+    aria-label={label}
+  >
+    <svg
+      viewBox="0 {geometry.vbTop} {size} {geometry.vbHeight}"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <!-- Piste de fond -->
+      <path class="st-gaugeChart__track" d={arcPath(0, 1)} fill="none" stroke-width={thickness} />
+
+      <!-- Bandes de seuils (sous le remplissage) -->
+      {#each bands as band, i (i)}
+        <path
+          class="st-gaugeChart__band st-gaugeChart__band--{band.tone}"
+          d={arcPath(band.from, band.to)}
+          fill="none"
+          stroke-width={thickness}
+        />
+      {/each}
+
+      <!-- Arc de progression (uniquement sans seuils) -->
+      {#if bands.length === 0}
+        <path
+          class="st-gaugeChart__progress"
+          d={arcPath(0, frac)}
+          fill="none"
+          stroke-width={thickness}
+        />
+      {/if}
+
+      <!-- Aiguille -->
+      <path class="st-gaugeChart__needle" d={needle} />
+      <circle class="st-gaugeChart__hub" cx={cx} cy={cy} r={Math.max(thickness * 0.22, 4)} />
+
+      <!-- Valeur centrale -->
+      <text
+        class="st-gaugeChart__value"
+        x={cx}
+        y={cy - thickness * 0.55}
+        text-anchor="middle"
+        dominant-baseline="auto"
+      >
+        {formatted}
+      </text>
+      {#if label}
+        <text
+          class="st-gaugeChart__label"
+          x={cx}
+          y={cy - thickness * 0.05}
+          text-anchor="middle"
+          dominant-baseline="hanging"
+        >
+          {label}
+        </text>
+      {/if}
+    </svg>
+  </div>
+
+  <ChartDataList label={label ?? "gauge"} items={dataValueItems} />
+</div>
+
+<style>
+  .st-gaugeChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    max-width: 100%;
+    position: relative;
+  }
+
+  .st-gaugeChart__visual,
+  .st-gaugeChart svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-gaugeChart__track {
+    stroke: var(--st-semantic-surface-subtle);
+    stroke-linecap: round;
+  }
+
+  .st-gaugeChart__band {
+    stroke-linecap: butt;
+  }
+
+  .st-gaugeChart__progress {
+    stroke: var(--st-semantic-action-primary);
+    stroke-linecap: round;
+    transition: d var(--st-motion-fast, 200ms) var(--st-motion-easing, ease);
+  }
+
+  .st-gaugeChart__needle {
+    fill: var(--st-semantic-text-primary);
+    transition: d var(--st-motion-fast, 200ms) var(--st-motion-easing, ease);
+  }
+
+  .st-gaugeChart__hub {
+    fill: var(--st-semantic-text-primary);
+  }
+
+  .st-gaugeChart__value {
+    fill: var(--st-semantic-text-primary);
+    font-size: 1.5rem;
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+  }
+
+  .st-gaugeChart__label {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    font-weight: 500;
+  }
+
+  /* Tons sémantiques de feedback */
+  .st-gaugeChart__band--neutral { stroke: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
+  .st-gaugeChart__band--info { stroke: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
+  .st-gaugeChart__band--success { stroke: var(--st-semantic-feedback-success); }
+  .st-gaugeChart__band--warning { stroke: var(--st-semantic-feedback-warning); }
+  .st-gaugeChart__band--error { stroke: var(--st-semantic-feedback-error); }
+
+  /* Tons catégoriels data */
+  .st-gaugeChart__band--category1 { stroke: var(--st-semantic-data-category1); }
+  .st-gaugeChart__band--category2 { stroke: var(--st-semantic-data-category2); }
+  .st-gaugeChart__band--category3 { stroke: var(--st-semantic-data-category3); }
+  .st-gaugeChart__band--category4 { stroke: var(--st-semantic-data-category4); }
+  .st-gaugeChart__band--category5 { stroke: var(--st-semantic-data-category5); }
+  .st-gaugeChart__band--category6 { stroke: var(--st-semantic-data-category6); }
+  .st-gaugeChart__band--category7 { stroke: var(--st-semantic-data-category7); }
+  .st-gaugeChart__band--category8 { stroke: var(--st-semantic-data-category8); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-gaugeChart__progress,
+    .st-gaugeChart__needle {
+      transition: none;
+    }
+  }
+</style>