@sentropic/design-system-svelte 0.17.0 → 0.19.0

package/dist/SelectableList.svelte

@@ -60,7 +60,7 @@
 
   // --- Row registry: ordered by DOM position so arrow nav matches the visual
   //     order regardless of registration timing. -------------------------------
-  type Entry = { el: HTMLElement; value: string | undefined };
+  type Entry = { el: HTMLElement; value: string | undefined; disabled?: boolean };
   let entries = $state<Entry[]>([]);
 
   // The element that currently holds the roving tab stop (tabindex 0). Null until
@@ -79,9 +79,14 @@
   // register/unregister are called from each row's $effect. They read AND write
   // `entries`, so the read must be untracked — otherwise the calling effect would
   // subscribe to `entries`, and writing it would re-run the effect forever.
-  function register(el: HTMLElement, rowValue: string | undefined): () => void {
+  // Disabled rows are registered with disabled:true so navigate() can skip them
+  // explicitly, making the skip correct even when disabled state changes mid-session.
+  function register(el: HTMLElement, rowValue: string | undefined, rowDisabled = false): () => void {
     untrack(() => {
-      entries = sortByDom([...entries.filter((e) => e.el !== el), { el, value: rowValue }]);
+      entries = sortByDom([
+        ...entries.filter((e) => e.el !== el),
+        { el, value: rowValue, disabled: rowDisabled }
+      ]);
     });
     return () => {
       untrack(() => {
@@ -91,8 +96,30 @@
     };
   }
 
-  // Default roving stop = first registered (DOM-ordered) row when none focused.
-  const effectiveTabStop = $derived(tabStopEl ?? entries[0]?.el ?? null);
+  // Default roving stop = first non-disabled DOM-ordered row when none focused,
+  // or when the current tabStopEl has become disabled.
+  const effectiveTabStop = $derived.by((): HTMLElement | null => {
+    if (tabStopEl) {
+      const entry = entries.find((e) => e.el === tabStopEl);
+      if (entry && !entry.disabled) return tabStopEl;
+    }
+    return entries.find((e) => !e.disabled)?.el ?? null;
+  });
+
+  // Si la row qui détient le focus DOM devient disabled (in-place, sans unmount),
+  // transférer le focus vers la nouvelle cible de roving tabindex.
+  // Note : le cas du cycle unregister/register est géré dans SelectableRow via
+  // l'$effect sur `disabled` qui appelle navigate() AVANT le cleanup.
+  $effect(() => {
+    const newStop = effectiveTabStop;
+    if (!newStop) return;
+    if (tabStopEl !== null) {
+      const disabledEntry = entries.find((e) => e.el === tabStopEl && e.disabled);
+      if (disabledEntry && tabStopEl.contains(document.activeElement ?? null)) {
+        newStop.focus();
+      }
+    }
+  });
 
   function valueOf(el: HTMLElement): string | undefined {
     return entries.find((e) => e.el === el)?.value;
@@ -137,13 +164,34 @@
     if (entries.length === 0) return;
     const idx = entries.findIndex((e) => e.el === el);
     if (idx === -1) return;
-    let targetIdx = idx;
-    if (key === "ArrowDown" || key === "ArrowRight") targetIdx = idx + 1;
-    else if (key === "ArrowUp" || key === "ArrowLeft") targetIdx = idx - 1;
-    else if (key === "Home") targetIdx = 0;
-    else if (key === "End") targetIdx = entries.length - 1;
-    // Clamp (no wrap) so Home/End and arrows stay within bounds.
-    targetIdx = Math.max(0, Math.min(entries.length - 1, targetIdx));
+
+    let targetIdx: number | null = null;
+
+    if (key === "ArrowDown" || key === "ArrowRight") {
+      // Walk forward from current position, find the next non-disabled entry.
+      for (let i = idx + 1; i < entries.length; i++) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "ArrowUp" || key === "ArrowLeft") {
+      // Walk backward from current position, find the previous non-disabled entry.
+      for (let i = idx - 1; i >= 0; i--) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "Home") {
+      // First non-disabled entry.
+      for (let i = 0; i < entries.length; i++) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    } else if (key === "End") {
+      // Last non-disabled entry.
+      for (let i = entries.length - 1; i >= 0; i--) {
+        if (!entries[i].disabled) { targetIdx = i; break; }
+      }
+    }
+
+    // If no target found (all remaining are disabled, or already at boundary), stay put.
+    if (targetIdx === null) return;
+
     const target = entries[targetIdx]?.el;
     if (target) {
       tabStopEl = target;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0JJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SelectableList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableList.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0MJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/SelectableRow.svelte

@@ -16,8 +16,8 @@
     readonly managed: true;
     /** listbox role for the wrapper → rows are "option". */
     readonly itemRole: "option";
-    /** Register a row element; returns an unregister callback. */
-    register: (el: HTMLElement, value: string | undefined) => () => void;
+    /** Register a row element; returns an unregister callback. disabled is forwarded so the list can skip it during keyboard navigation. */
+    register: (el: HTMLElement, value: string | undefined, disabled?: boolean) => () => void;
     /** Is the row with this element currently selected? */
     isSelected: (el: HTMLElement) => boolean;
     /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
@@ -44,8 +44,9 @@
     /** Stable value, surfaced as `data-value` and used by the list for `value`. */
     value?: string;
     /**
-     * ARIA role for the standalone row. Defaults to "option" so a lone row still
-     * reads as a selectable item. Inside a list the role is forced to "option".
+     * ARIA role for the standalone row. Defaults to "button" for standalone use —
+     * "option" is only valid inside a listbox and would be invalid without one.
+     * Inside a SelectableList the role is always forced to "option".
      */
     role?: string;
     /**
@@ -71,7 +72,7 @@
     onselect,
     disabled = false,
     value,
-    role = "option",
+    role = "button",
     accentBar = false,
     leading,
     trailing,
@@ -86,10 +87,23 @@
   let el: HTMLElement | null = $state(null);
 
   // Register with the parent list (if any) so it can order rows for arrow nav
-  // and compute the roving tab stop. The effect re-registers if value changes.
+  // and compute the roving tab stop. Disabled rows are registered too so the
+  // list can skip them during navigation; the list owns the skip logic.
   $effect(() => {
-    if (!list || !el || disabled) return;
-    return list.register(el, value);
+    if (!list || !el) return;
+    return list.register(el, value, disabled);
+  });
+
+  // A11y edge-case : quand cette row passe à disabled=true ET qu'elle détient le
+  // focus DOM, transférer le focus vers la prochaine row enabled via navigate().
+  // On le fait ici (dans SelectableRow) pour avoir accès au focus DOM AVANT que
+  // le cycle unregister/register dans SelectableList ne perturbe l'état.
+  $effect(() => {
+    if (!disabled || !list || !el) return;
+    if (!el.contains(document.activeElement ?? null)) return;
+    // Déléguer via navigate ArrowDown (cherche prochaine row enabled vers l'avant,
+    // puis vers l'arrière si aucune). navigate appelle target.focus() directement.
+    list.navigate(el, "ArrowDown");
   });
 
   // Effective selected state: list-managed rows read the list; standalone rows
@@ -165,6 +179,7 @@
   class={classes}
   role={effectiveRole}
   aria-selected={effectiveRole === "option" ? isSelected : undefined}
+  aria-pressed={effectiveRole === "button" ? isSelected : undefined}
   aria-disabled={disabled ? "true" : undefined}
   data-value={value}
   {tabindex}

package/dist/SelectableRow.svelte.d.ts

@@ -13,8 +13,8 @@ export type SelectableListContext = {
     readonly managed: true;
     /** listbox role for the wrapper → rows are "option". */
     readonly itemRole: "option";
-    /** Register a row element; returns an unregister callback. */
-    register: (el: HTMLElement, value: string | undefined) => () => void;
+    /** Register a row element; returns an unregister callback. disabled is forwarded so the list can skip it during keyboard navigation. */
+    register: (el: HTMLElement, value: string | undefined, disabled?: boolean) => () => void;
     /** Is the row with this element currently selected? */
     isSelected: (el: HTMLElement) => boolean;
     /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
@@ -40,8 +40,9 @@ export type SelectableRowProps = {
     /** Stable value, surfaced as `data-value` and used by the list for `value`. */
     value?: string;
     /**
-     * ARIA role for the standalone row. Defaults to "option" so a lone row still
-     * reads as a selectable item. Inside a list the role is forced to "option".
+     * ARIA role for the standalone row. Defaults to "button" for standalone use —
+     * "option" is only valid inside a listbox and would be invalid without one.
+     * Inside a SelectableList the role is always forced to "option".
      */
     role?: string;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"SelectableRow.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableRow.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAA+B,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,IAAI,CAAC;IACrE,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoHJ,QAAA,MAAM,aAAa,gEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectableRow.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SelectableRow.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAA+B,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,wIAAwI;IACxI,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;IACzF,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiIJ,QAAA,MAAM,aAAa,gEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/SlideIndicator.svelte

@@ -43,6 +43,9 @@
 
   const items = $derived(Array.from({ length: Math.max(0, count) }, (_, i) => i));
 
+  // Refs des boutons pour déplacer le focus programmatiquement lors de la navigation clavier.
+  let buttonRefs = $state<Record<number, HTMLElement | null>>({});
+
   function select(index: number) {
     if (index < 0 || index >= count || index === current) return;
     onChange?.(index);
@@ -69,21 +72,32 @@
         return;
     }
     event.preventDefault();
+    // Déplacer le focus DOM vers le bouton cible (roving tabindex correct).
+    const targetEl = buttonRefs[target];
+    if (targetEl) targetEl.focus();
     select(target);
   }
 </script>
 
-<div {...rest} class={classes} role="tablist" aria-label={label}>
+<!--
+  Choix de pattern : role="group" + boutons avec aria-current.
+  Justification : un indicateur de carrousel/pagination n'est PAS un tablist — il n'y a pas de
+  tabpanel associé. Utiliser role="tab" sans aria-controls/tabpanel trompe les lecteurs d'écran
+  qui annoncent « onglet X sur N » sans panneau contrôlé.
+  Pattern retenu (ARIA Authoring Practices Guide — Carousel) : role="group" nommé + boutons natifs
+  avec aria-current="true" sur le point courant + roving tabindex.
+  Le SR annonce « Groupe [label] — [label] 1, bouton ; [label] 2, courant, bouton ; … »
+-->
+<div {...rest} class={classes} role="group" aria-label={label}>
   {#each items as index (index)}
     <button
       type="button"
       class="st-slideIndicator__dot"
       class:st-slideIndicator__dot--current={index === current}
-      role="tab"
-      aria-selected={index === current ? "true" : "false"}
       aria-current={index === current ? "true" : undefined}
       aria-label={`${label} ${index + 1}`}
       tabindex={index === current ? 0 : -1}
+      bind:this={buttonRefs[index]}
       onclick={() => select(index)}
       onkeydown={(event) => onKeyDown(event, index)}
     ></button>

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

@@ -1 +1 @@
-{"version":3,"file":"SlideIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SlideIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtF,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuEJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SlideIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SlideIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtF,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8EJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/SunburstChart.svelte

@@ -0,0 +1,388 @@
+<script lang="ts" module>
+  /**
+   * SunburstChart - API canonique (référence Svelte, React/Vue doivent s'aligner)
+   *
+   * Props obligatoires :
+   *   data   SunburstChartDatum  - nœud racine (label + children récursifs)
+   *   label  string              - aria-label du graphique
+   *
+   * Props optionnelles :
+   *   legend  boolean  (défaut false) - affiche la légende des top-level children
+   *   width   number   (défaut 320)   - largeur du viewBox en px
+   *   height  number   (défaut 320)   - hauteur du viewBox en px
+   *   class   string                  - classe CSS supplémentaire
+   *
+   * Labels d'arcs :
+   *   Affichés sur les arcs de span > 0.28 rad. Couleur de texte calculée par
+   *   luminance (via chartContrast.ts) pour garantir le contraste WCAG AA sur
+   *   chaque fond catégoriel - pas de texte blanc fixe.
+   *
+   * Infobulle : format "parent, enfant" (séparateur ", ") - cohérent avec lot 1.
+   */
+  export type SunburstChartTone =
+    | "category1"
+    | "category2"
+    | "category3"
+    | "category4"
+    | "category5"
+    | "category6"
+    | "category7"
+    | "category8";
+
+  export type SunburstChartDatum = {
+    label: string;
+    value?: number;
+    tone?: SunburstChartTone;
+    children?: SunburstChartDatum[];
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+  import { contrastTextForTone } from "./chartContrast.js";
+
+  type SunburstChartProps = {
+    data: SunburstChartDatum;
+    label: string;
+    legend?: boolean;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  type ArcDatum = {
+    datum: SunburstChartDatum;
+    pathLabel: string[];
+    value: number;
+    tone: SunburstChartTone;
+    depth: number;
+    start: number;
+    end: number;
+    path: string;
+    labelX: number;
+    labelY: number;
+  };
+
+  let {
+    data,
+    label,
+    legend = false,
+    width = 320,
+    height = 320,
+    class: className
+  }: SunburstChartProps = $props();
+
+  const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8"
+  ] as const;
+
+  function leafValue(value: number | undefined): number {
+    return Number.isFinite(value) && (value ?? 0) > 0 ? (value as number) : 0;
+  }
+
+  function sumValue(node: SunburstChartDatum): number {
+    if (node.children && node.children.length > 0) {
+      return node.children.reduce((sum, child) => sum + sumValue(child), 0);
+    }
+    return leafValue(node.value);
+  }
+
+  function maxDepth(node: SunburstChartDatum, depth = 0): number {
+    if (!node.children || node.children.length === 0) return depth;
+    return Math.max(depth, ...node.children.map((child) => maxDepth(child, depth + 1)));
+  }
+
+  function point(cx: number, cy: number, radius: number, angle: number) {
+    return { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) };
+  }
+
+  function arcPath(cx: number, cy: number, innerRadius: number, outerRadius: number, start: number, end: number): string {
+    const safeEnd = Math.min(end, start + Math.PI * 2 - 0.0001);
+    const large = safeEnd - start > Math.PI ? 1 : 0;
+    const outerStart = point(cx, cy, outerRadius, start);
+    const outerEnd = point(cx, cy, outerRadius, safeEnd);
+
+    if (innerRadius <= 0) {
+      return `M ${cx} ${cy} L ${outerStart.x} ${outerStart.y} A ${outerRadius} ${outerRadius} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y} Z`;
+    }
+
+    const innerEnd = point(cx, cy, innerRadius, safeEnd);
+    const innerStart = point(cx, cy, innerRadius, start);
+    return `M ${outerStart.x} ${outerStart.y} A ${outerRadius} ${outerRadius} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y} L ${innerEnd.x} ${innerEnd.y} A ${innerRadius} ${innerRadius} 0 ${large} 0 ${innerStart.x} ${innerStart.y} Z`;
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const arcs = $derived.by<ArcDatum[]>(() => {
+    const total = sumValue(data);
+    if (total <= 0 || !data.children || data.children.length === 0) return [];
+
+    const cx = width / 2;
+    const cy = height / 2;
+    const ringCount = Math.max(1, maxDepth(data));
+    const outerLimit = Math.max(Math.min(width, height) / 2 - 6, 1);
+    const ring = outerLimit / ringCount;
+    const out: ArcDatum[] = [];
+
+    function visit(
+      node: SunburstChartDatum,
+      depth: number,
+      start: number,
+      end: number,
+      pathLabel: string[],
+      inheritedTone: SunburstChartTone,
+      siblingIndex: number
+    ) {
+      if (depth > 0) {
+        const tone = node.tone ?? inheritedTone ?? TONES[siblingIndex % TONES.length];
+        const innerRadius = (depth - 1) * ring;
+        const outerRadius = depth * ring;
+        const midAngle = (start + end) / 2;
+        const midRadius = (innerRadius + outerRadius) / 2;
+        const labelPoint = point(cx, cy, midRadius, midAngle);
+        out.push({
+          datum: node,
+          pathLabel,
+          value: sumValue(node),
+          tone,
+          depth,
+          start,
+          end,
+          path: arcPath(cx, cy, innerRadius, outerRadius, start, end),
+          labelX: labelPoint.x,
+          labelY: labelPoint.y
+        });
+      }
+
+      const children = node.children ?? [];
+      const nodeTotal = children.reduce((sum, child) => sum + sumValue(child), 0);
+      if (children.length === 0 || nodeTotal <= 0) return;
+
+      let cursor = start;
+      children.forEach((child, childIndex) => {
+        const value = sumValue(child);
+        if (value <= 0) return;
+        const span = ((end - start) * value) / nodeTotal;
+        const tone = child.tone ?? (depth === 0 ? TONES[childIndex % TONES.length] : inheritedTone);
+        visit(child, depth + 1, cursor, cursor + span, [...pathLabel, child.label], tone, childIndex);
+        cursor += span;
+      });
+    }
+
+    visit(data, 0, -Math.PI / 2, Math.PI * 1.5, [data.label], "category1", 0);
+    return out;
+  });
+
+  const leafItems = $derived.by(() => {
+    const items: string[] = [];
+    function collect(node: SunburstChartDatum, path: string[]) {
+      if (node.children && node.children.length > 0) {
+        node.children.forEach((child) => collect(child, [...path, child.label]));
+        return;
+      }
+      items.push(`${path.join(", ")}: ${leafValue(node.value)}`);
+    }
+    collect(data, [data.label]);
+    return items.filter((item) => !item.endsWith(": 0"));
+  });
+
+  const legendItems = $derived(
+    (data.children ?? []).map((child, index) => ({
+      label: child.label,
+      tone: child.tone ?? TONES[index % 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-sunburstChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-sunburstChart__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 arcs as arc, i (arc.pathLabel.join("/"))}
+        <path
+          class="st-sunburstChart__arc st-sunburstChart__arc--{arc.tone}"
+          class:st-sunburstChart__arc--dim={hoveredIndex !== null && hoveredIndex !== i}
+          d={arc.path}
+          data-chart-index={i}
+        />
+      {/each}
+
+      {#each arcs as arc (arc.pathLabel.join("/"))}
+        {#if arc.end - arc.start > 0.28}
+          <text
+            class="st-sunburstChart__label"
+            x={arc.labelX}
+            y={arc.labelY}
+            text-anchor="middle"
+            dominant-baseline="middle"
+            fill={contrastTextForTone(arc.tone)}
+          >
+            {arc.datum.label}
+          </text>
+        {/if}
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={leafItems} />
+
+  {#if hoveredIndex !== null && arcs[hoveredIndex]}
+    {@const arc = arcs[hoveredIndex]}
+    <div
+      class="st-sunburstChart__tooltip"
+      role="presentation"
+      style="left: {(arc.labelX / width) * 100}%; top: {(arc.labelY / height) * 100}%"
+    >
+      <span class="st-sunburstChart__tooltipLabel">{arc.pathLabel.join(", ")}</span>
+      <span class="st-sunburstChart__tooltipValue">{arc.value}</span>
+    </div>
+  {/if}
+
+  {#if legend && legendItems.length > 0}
+    <ul class="st-sunburstChart__legend" aria-hidden="true">
+      {#each legendItems as item (item.label)}
+        <li class="st-sunburstChart__legendItem">
+          <span class="st-sunburstChart__legendSwatch st-sunburstChart__legendSwatch--{item.tone}"></span>
+          {item.label}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-sunburstChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    max-width: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-sunburstChart svg,
+  .st-sunburstChart__visual {
+    display: block;
+    overflow: visible;
+  }
+
+  .st-sunburstChart__arc {
+    cursor: pointer;
+    stroke: var(--st-semantic-surface-default, Canvas);
+    stroke-width: 1;
+    transition: opacity 120ms ease;
+  }
+
+  .st-sunburstChart__arc--dim {
+    opacity: 0.4;
+  }
+
+  .st-sunburstChart__arc--category1,
+  .st-sunburstChart__legendSwatch--category1 { fill: var(--st-semantic-data-category1); background: var(--st-semantic-data-category1); }
+  .st-sunburstChart__arc--category2,
+  .st-sunburstChart__legendSwatch--category2 { fill: var(--st-semantic-data-category2); background: var(--st-semantic-data-category2); }
+  .st-sunburstChart__arc--category3,
+  .st-sunburstChart__legendSwatch--category3 { fill: var(--st-semantic-data-category3); background: var(--st-semantic-data-category3); }
+  .st-sunburstChart__arc--category4,
+  .st-sunburstChart__legendSwatch--category4 { fill: var(--st-semantic-data-category4); background: var(--st-semantic-data-category4); }
+  .st-sunburstChart__arc--category5,
+  .st-sunburstChart__legendSwatch--category5 { fill: var(--st-semantic-data-category5); background: var(--st-semantic-data-category5); }
+  .st-sunburstChart__arc--category6,
+  .st-sunburstChart__legendSwatch--category6 { fill: var(--st-semantic-data-category6); background: var(--st-semantic-data-category6); }
+  .st-sunburstChart__arc--category7,
+  .st-sunburstChart__legendSwatch--category7 { fill: var(--st-semantic-data-category7); background: var(--st-semantic-data-category7); }
+  .st-sunburstChart__arc--category8,
+  .st-sunburstChart__legendSwatch--category8 { fill: var(--st-semantic-data-category8); background: var(--st-semantic-data-category8); }
+
+  .st-sunburstChart__label {
+    /* fill calculé par contrastTextForTone() en inline - pas de blanc fixe */
+    font-size: 0.68rem;
+    font-weight: 650;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-sunburstChart__arc {
+      transition: none;
+    }
+  }
+
+  .st-sunburstChart__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-sunburstChart__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-sunburstChart__legendSwatch {
+    display: inline-block;
+    height: 0.625rem;
+    width: 0.625rem;
+  }
+
+  .st-sunburstChart__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%, -115%);
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-sunburstChart__tooltipLabel {
+    font-weight: 600;
+  }
+
+  .st-sunburstChart__tooltipValue {
+    opacity: 0.85;
+  }
+</style>