@sentropic/design-system-svelte 0.17.0 → 0.19.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"HistogramChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/HistogramChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,kBAAkB,GAC1B,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,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAMF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,mBAAmB,EAAE,GAAG,MAAM,EAAE,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4JJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/Popper.svelte

@@ -44,6 +44,23 @@
     class?: string;
     /** Notified whenever the resolved placement changes (after flip). */
     onPlacementChange?: (placement: PopperPlacement) => void;
+    /**
+     * (a11y, opt-in) When true, traps keyboard focus inside the panel while it
+     * is open (Tab cycles through focusable children; Shift+Tab cycles backward).
+     * Intended for modal overlays built on top of Popper. Non-modal usage (menus,
+     * tooltips) should leave this false (default) to keep the natural tab order.
+     */
+    trapFocus?: boolean;
+    /**
+     * (a11y) When true (default when open), pressing Escape calls `onClose` so
+     * the consumer can set `open = false`. Set to false to suppress this behavior.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Called when the panel requests closing (Escape key, or future outside-click).
+     * The consumer is responsible for updating `open` in response.
+     */
+    onClose?: () => void;
     children?: Snippet;
   };
 
@@ -158,6 +175,8 @@
 </script>
 
 <script lang="ts">
+  import { untrack } from "svelte";
+
   let {
     anchor,
     open = false,
@@ -170,6 +189,9 @@
     portal = true,
     class: className,
     onPlacementChange,
+    trapFocus = false,
+    closeOnEscape = true,
+    onClose,
     children
   }: PopperProps = $props();
 
@@ -243,17 +265,152 @@
     };
   });
 
+  // ─── a11y: focus management ────────────────────────────────────────────────
+  // Capture the element that had focus before the panel opened so we can
+  // restore it when the panel closes (only when trapFocus is active).
+  // SSR-safe (guarded by typeof window).
+  // Use a plain variable (not $state) so reads inside the effect are not
+  // tracked and don't cause the effect to re-run on every preFocusEl write.
+  let preFocusEl: HTMLElement | null = null;
+
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (open && anchor) {
+      untrack(() => {
+        // Snapshot the active element at open time only when trapFocus is active,
+        // so restoreFocus doesn't steal focus on non-modal usage.
+        if (trapFocus) {
+          preFocusEl = document.activeElement as HTMLElement | null;
+        }
+      });
+    } else {
+      // Panel just closed: restore focus only if trapFocus was active and the
+      // original element is still connected to the DOM.
+      untrack(() => {
+        if (
+          trapFocus &&
+          preFocusEl &&
+          typeof preFocusEl.focus === "function" &&
+          document.contains(preFocusEl)
+        ) {
+          preFocusEl.focus();
+        }
+        preFocusEl = null;
+      });
+    }
+  });
+
+  /** Returns all keyboard-focusable children of `container`. */
+  function getFocusable(container: HTMLElement): HTMLElement[] {
+    if (typeof window === "undefined") return [];
+    return Array.from(
+      container.querySelectorAll<HTMLElement>(
+        'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),' +
+        'textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]'
+      )
+    ).filter((el) => !el.closest("[disabled]"));
+  }
+
+  // ─── a11y: move focus into the panel on open (trapFocus only) ─────────────
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (!open || !trapFocus || !panel) return;
+    // Wait for the panel to be mounted before moving focus.
+    untrack(() => {
+      const focusable = getFocusable(panel!);
+      if (focusable.length > 0) {
+        focusable[0].focus();
+      } else {
+        // If no focusable children, focus the panel itself so Escape works.
+        panel!.focus();
+      }
+    });
+  });
+
+  // ─── a11y: recapture focus that escapes the trap (focusin on document) ─────
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (!open || !trapFocus) return;
+
+    function handleFocusIn(e: FocusEvent) {
+      if (!panel) return;
+      const target = e.target as Node | null;
+      // If focus landed outside the panel, bring it back to the first focusable.
+      if (target && !panel.contains(target)) {
+        const focusable = getFocusable(panel);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else {
+          panel.focus();
+        }
+      }
+    }
+
+    document.addEventListener("focusin", handleFocusIn);
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+    };
+  });
+
+  // ─── a11y: Escape on document (closeOnEscape) ─────────────────────────────
+  // Listen on document so the Escape shortcut works even when focus is outside
+  // the panel (e.g. before the first Tab, or in an edge case where focus escaped).
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (!open || !closeOnEscape) return;
+
+    function handleDocKeydown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose?.();
+      }
+    }
+
+    document.addEventListener("keydown", handleDocKeydown);
+    return () => {
+      document.removeEventListener("keydown", handleDocKeydown);
+    };
+  });
+
+  /** Keyboard handler attached to the panel for Tab-trap cycling. */
+  function handlePanelKeydown(e: KeyboardEvent) {
+    if (typeof window === "undefined") return;
+
+    // Tab trap: cycle focus within the panel.
+    if (e.key === "Tab" && trapFocus && panel) {
+      const focusable = getFocusable(panel);
+      if (focusable.length === 0) { e.preventDefault(); return; }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+  }
+
   const panelStyle = () =>
     `position: ${strategy}; top: ${top}px; left: ${left}px;`;
   const panelSide = () => splitPlacement(resolvedPlacement).side;
 </script>
 
 {#snippet floating()}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={panel}
     class={className ? `st-popper ${className}` : "st-popper"}
     data-popper-placement={resolvedPlacement}
     style={panelStyle()}
+    tabindex={trapFocus ? -1 : undefined}
+    onkeydown={trapFocus ? handlePanelKeydown : undefined}
   >
     {@render children?.()}
     {#if arrow}

package/dist/Popper.svelte.d.ts

@@ -26,6 +26,23 @@ export type PopperProps = {
     class?: string;
     /** Notified whenever the resolved placement changes (after flip). */
     onPlacementChange?: (placement: PopperPlacement) => void;
+    /**
+     * (a11y, opt-in) When true, traps keyboard focus inside the panel while it
+     * is open (Tab cycles through focusable children; Shift+Tab cycles backward).
+     * Intended for modal overlays built on top of Popper. Non-modal usage (menus,
+     * tooltips) should leave this false (default) to keep the natural tab order.
+     */
+    trapFocus?: boolean;
+    /**
+     * (a11y) When true (default when open), pressing Escape calls `onClose` so
+     * the consumer can set `open = false`. Set to false to suppress this behavior.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Called when the panel requests closing (Escape key, or future outside-click).
+     * The consumer is responsible for updating `open` in response.
+     */
+    onClose?: () => void;
     children?: Snippet;
 };
 /** Split a placement into its side and (optional) alignment. */

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Popper.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB,yDAAyD;IACzD,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4DAA4D;IAC5D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,gEAAgE;AAChE,wBAAgB,cAAc,CAAC,SAAS,EAAE,eAAe,GAAG;IAC1D,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB,CAGA;AAED,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,GAAG,eAAe,CAEnF;AASD,MAAM,MAAM,IAAI,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB,GACA;IAAE,SAAS,EAAE,eAAe,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAwD3D;AAsHH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Popper.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,UAAU,GACV,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACxB,yDAAyD;IACzD,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4DAA4D;IAC5D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,gEAAgE;AAChE,wBAAgB,cAAc,CAAC,SAAS,EAAE,eAAe,GAAG;IAC1D,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACpB,CAGA;AAED,4DAA4D;AAC5D,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,GAAG,eAAe,CAEnF;AASD,MAAM,MAAM,IAAI,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IACP,SAAS,EAAE,eAAe,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB,GACA;IAAE,SAAS,EAAE,eAAe,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAwD3D;AAmQH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/RadarChart.svelte

@@ -0,0 +1,340 @@
+<script lang="ts" module>
+  /**
+   * RadarChart - API canonique (référence Svelte, React/Vue doivent s'aligner)
+   *
+   * Props obligatoires :
+   *   axes    string[]           - libellés des axes (N axes = polygone à N côtés)
+   *   series  RadarChartSeries[] - séries {label, values: number[], tone?}
+   *   label   string             - aria-label du graphique
+   *
+   * Props optionnelles :
+   *   maxValue  number   (défaut : max des valeurs, min 1) - valeur plafond du
+   *                       domaine. PAS de plancher arbitraire à 100 - l'échelle
+   *                       s'adapte aux données. React/Vue doivent supprimer leur
+   *                       `Math.max(100, …)` pour s'aligner sur ce comportement.
+   *   levels    number   (défaut 4)   - nombre de cercles / anneaux de grille
+   *   legend    boolean  (défaut false) - affiche la légende des séries
+   *   width     number   (défaut 360) - largeur du viewBox en px
+   *   height    number   (défaut 320) - hauteur du viewBox en px
+   *   class     string               - classe CSS supplémentaire
+   *
+   * NaN/vide : les valeurs non-finies sont exclues du calcul du domaine
+   *   (filter Number.isFinite). Séries vides → polygone nul sans crash.
+   */
+  export type RadarChartTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+
+  export type RadarChartSeries = {
+    label: string;
+    values: number[];
+    tone?: RadarChartTone;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type RadarChartProps = {
+    axes: string[];
+    series: RadarChartSeries[];
+    label: string;
+    legend?: boolean;
+    maxValue?: number;
+    levels?: number;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    axes,
+    series,
+    label,
+    legend = false,
+    maxValue,
+    levels = 4,
+    width = 360,
+    height = 320,
+    class: className
+  }: RadarChartProps = $props();
+
+  const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8"
+  ] as const;
+
+  function pointAt(cx: number, cy: number, radius: number, angle: number) {
+    return {
+      x: cx + radius * Math.cos(angle),
+      y: cy + radius * Math.sin(angle)
+    };
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const center = $derived({ x: width / 2, y: height / 2 });
+  const radius = $derived(Math.max(Math.min(width, height) / 2 - 42, 1));
+  const safeLevelCount = $derived(Math.max(1, Math.floor(levels)));
+  const domainMax = $derived.by(() => {
+    if (Number.isFinite(maxValue) && (maxValue ?? 0) > 0) return maxValue as number;
+    const values = series.flatMap((entry) => entry.values).filter(Number.isFinite);
+    return Math.max(1, ...values);
+  });
+
+  const axisEntries = $derived(
+    axes.map((axis, index) => {
+      const angle = -Math.PI / 2 + (Math.PI * 2 * index) / Math.max(axes.length, 1);
+      const end = pointAt(center.x, center.y, radius, angle);
+      const labelPoint = pointAt(center.x, center.y, radius + 22, angle);
+      return { axis, index, angle, end, labelPoint };
+    })
+  );
+
+  const rings = $derived(
+    Array.from({ length: safeLevelCount }, (_, index) => {
+      const ringRadius = (radius * (index + 1)) / safeLevelCount;
+      return axisEntries.map((axis) => pointAt(center.x, center.y, ringRadius, axis.angle)).map((point) => `${point.x},${point.y}`).join(" ");
+    })
+  );
+
+  const polygons = $derived(
+    series.map((entry, seriesIndex) => {
+      const tone = entry.tone ?? TONES[seriesIndex % TONES.length];
+      const points = axes.map((_, axisIndex) => {
+        const value = Math.max(0, entry.values[axisIndex] ?? 0);
+        const scaled = Math.min(value / domainMax, 1) * radius;
+        const angle = -Math.PI / 2 + (Math.PI * 2 * axisIndex) / Math.max(axes.length, 1);
+        return pointAt(center.x, center.y, scaled, angle);
+      });
+      return {
+        entry,
+        tone,
+        points,
+        pointString: points.map((point) => `${point.x},${point.y}`).join(" ")
+      };
+    })
+  );
+
+  const legendItems = $derived(series.map((entry, index) => ({ label: entry.label, tone: entry.tone ?? TONES[index % TONES.length] })));
+
+  const dataValueItems = $derived(
+    series.flatMap((entry) => axes.map((axis, axisIndex) => `${entry.label}, ${axis}: ${entry.values[axisIndex] ?? 0}`))
+  );
+
+  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-radarChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-radarChart__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 rings as ring, i (i)}
+        <polygon class="st-radarChart__ring" points={ring} />
+      {/each}
+
+      {#each axisEntries as axis (axis.axis)}
+        <line class="st-radarChart__axis" x1={center.x} x2={axis.end.x} y1={center.y} y2={axis.end.y} />
+        <text
+          class="st-radarChart__axisLabel"
+          x={axis.labelPoint.x}
+          y={axis.labelPoint.y}
+          text-anchor="middle"
+          dominant-baseline="middle"
+        >
+          {axis.axis}
+        </text>
+      {/each}
+
+      {#each polygons as polygon, i (polygon.entry.label)}
+        <polygon
+          class="st-radarChart__polygon st-radarChart__polygon--{polygon.tone}"
+          class:st-radarChart__polygon--dim={hoveredIndex !== null && hoveredIndex !== i}
+          points={polygon.pointString}
+          data-chart-index={i}
+        />
+        {#each polygon.points as point, pointIndex (`${polygon.entry.label}-${pointIndex}`)}
+          <circle class="st-radarChart__point st-radarChart__point--{polygon.tone}" cx={point.x} cy={point.y} r="3" data-chart-index={i} />
+        {/each}
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && polygons[hoveredIndex]}
+    {@const polygon = polygons[hoveredIndex]}
+    <div class="st-radarChart__tooltip" role="presentation">
+      <span class="st-radarChart__tooltipLabel">{polygon.entry.label}</span>
+    </div>
+  {/if}
+
+  {#if legend && legendItems.length > 0}
+    <ul class="st-radarChart__legend" aria-hidden="true">
+      {#each legendItems as item (item.label)}
+        <li class="st-radarChart__legendItem">
+          <span class="st-radarChart__legendSwatch st-radarChart__legendSwatch--{item.tone}"></span>
+          {item.label}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-radarChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    max-width: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-radarChart svg,
+  .st-radarChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-radarChart__ring {
+    fill: none;
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1;
+  }
+
+  .st-radarChart__axis {
+    stroke: var(--st-semantic-border-subtle);
+    stroke-width: 1;
+  }
+
+  .st-radarChart__axisLabel {
+    fill: var(--st-semantic-text-secondary);
+    font-size: 0.72rem;
+  }
+
+  .st-radarChart__polygon {
+    cursor: pointer;
+    fill-opacity: 0.16;
+    stroke-width: 2;
+    transition: opacity 120ms ease;
+  }
+
+  .st-radarChart__polygon--dim {
+    opacity: 0.35;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-radarChart__polygon {
+      transition: none;
+    }
+  }
+
+  .st-radarChart__point {
+    stroke: var(--st-semantic-surface-default, Canvas);
+    stroke-width: 1;
+  }
+
+  .st-radarChart__polygon--category1,
+  .st-radarChart__point--category1,
+  .st-radarChart__legendSwatch--category1 { fill: var(--st-semantic-data-category1); stroke: var(--st-semantic-data-category1); background: var(--st-semantic-data-category1); }
+  .st-radarChart__polygon--category2,
+  .st-radarChart__point--category2,
+  .st-radarChart__legendSwatch--category2 { fill: var(--st-semantic-data-category2); stroke: var(--st-semantic-data-category2); background: var(--st-semantic-data-category2); }
+  .st-radarChart__polygon--category3,
+  .st-radarChart__point--category3,
+  .st-radarChart__legendSwatch--category3 { fill: var(--st-semantic-data-category3); stroke: var(--st-semantic-data-category3); background: var(--st-semantic-data-category3); }
+  .st-radarChart__polygon--category4,
+  .st-radarChart__point--category4,
+  .st-radarChart__legendSwatch--category4 { fill: var(--st-semantic-data-category4); stroke: var(--st-semantic-data-category4); background: var(--st-semantic-data-category4); }
+  .st-radarChart__polygon--category5,
+  .st-radarChart__point--category5,
+  .st-radarChart__legendSwatch--category5 { fill: var(--st-semantic-data-category5); stroke: var(--st-semantic-data-category5); background: var(--st-semantic-data-category5); }
+  .st-radarChart__polygon--category6,
+  .st-radarChart__point--category6,
+  .st-radarChart__legendSwatch--category6 { fill: var(--st-semantic-data-category6); stroke: var(--st-semantic-data-category6); background: var(--st-semantic-data-category6); }
+  .st-radarChart__polygon--category7,
+  .st-radarChart__point--category7,
+  .st-radarChart__legendSwatch--category7 { fill: var(--st-semantic-data-category7); stroke: var(--st-semantic-data-category7); background: var(--st-semantic-data-category7); }
+  .st-radarChart__polygon--category8,
+  .st-radarChart__point--category8,
+  .st-radarChart__legendSwatch--category8 { fill: var(--st-semantic-data-category8); stroke: var(--st-semantic-data-category8); background: var(--st-semantic-data-category8); }
+
+  .st-radarChart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-2, 0.5rem) var(--st-spacing-4, 1rem);
+    list-style: none;
+    margin: var(--st-spacing-2, 0.5rem) 0 0;
+    padding: 0;
+  }
+
+  .st-radarChart__legendItem {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    font-size: 0.75rem;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-radarChart__legendSwatch {
+    display: inline-block;
+    height: 0.625rem;
+    width: 0.625rem;
+  }
+
+  .st-radarChart__tooltip {
+    background: var(--st-semantic-surface-inverse);
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse);
+    display: inline-flex;
+    font-size: 0.75rem;
+    left: 50%;
+    line-height: 1.2;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-radarChart__tooltipLabel {
+    font-weight: 600;
+  }
+</style>

package/dist/RadarChart.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+ * RadarChart - API canonique (référence Svelte, React/Vue doivent s'aligner)
+ *
+ * Props obligatoires :
+ *   axes    string[]           - libellés des axes (N axes = polygone à N côtés)
+ *   series  RadarChartSeries[] - séries {label, values: number[], tone?}
+ *   label   string             - aria-label du graphique
+ *
+ * Props optionnelles :
+ *   maxValue  number   (défaut : max des valeurs, min 1) - valeur plafond du
+ *                       domaine. PAS de plancher arbitraire à 100 - l'échelle
+ *                       s'adapte aux données. React/Vue doivent supprimer leur
+ *                       `Math.max(100, …)` pour s'aligner sur ce comportement.
+ *   levels    number   (défaut 4)   - nombre de cercles / anneaux de grille
+ *   legend    boolean  (défaut false) - affiche la légende des séries
+ *   width     number   (défaut 360) - largeur du viewBox en px
+ *   height    number   (défaut 320) - hauteur du viewBox en px
+ *   class     string               - classe CSS supplémentaire
+ *
+ * NaN/vide : les valeurs non-finies sont exclues du calcul du domaine
+ *   (filter Number.isFinite). Séries vides → polygone nul sans crash.
+ */
+export type RadarChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type RadarChartSeries = {
+    label: string;
+    values: number[];
+    tone?: RadarChartTone;
+};
+type RadarChartProps = {
+    axes: string[];
+    series: RadarChartSeries[];
+    label: string;
+    legend?: boolean;
+    maxValue?: number;
+    levels?: number;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const RadarChart: import("svelte").Component<RadarChartProps, {}, "">;
+type RadarChart = ReturnType<typeof RadarChart>;
+export default RadarChart;
+//# sourceMappingURL=RadarChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/RadarChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAMF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqJJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}