@sentropic/design-system-svelte 0.8.0 → 0.10.0

package/dist/StackedBarChart.svelte

@@ -0,0 +1,190 @@
+<script lang="ts" module>
+  export type StackedBarTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type StackedBarSegment = {
+    label: string;
+    value: number;
+    tone?: StackedBarTone;
+  };
+
+  export type StackedBarDatum = {
+    label: string;
+    segments: StackedBarSegment[];
+  };
+</script>
+
+<script lang="ts">
+  type StackedBarChartProps = {
+    data: StackedBarDatum[];
+    width?: number;
+    height?: number;
+    label: string;
+    showLegend?: boolean;
+    class?: string;
+  };
+
+  let {
+    data,
+    width = 480,
+    height = 260,
+    label,
+    showLegend = true,
+    class: className
+  }: StackedBarChartProps = $props();
+
+  const MARGIN = { top: 14, right: 16, bottom: 34, left: 44 };
+  const TONES = ["category1","category2","category3","category4","category5","category6","category7","category8"] as const;
+
+  function niceTicks(min: number, max: number, target = 5): number[] {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) return [Number.isFinite(max) ? max : 0];
+    const range = max - min;
+    const rough = range / Math.max(target - 1, 1);
+    const pow = Math.pow(10, Math.floor(Math.log10(rough)));
+    const norm = rough / pow;
+    const step = norm < 1.5 ? pow : norm < 3 ? 2 * pow : norm < 7 ? 5 * pow : 10 * pow;
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const ticks: number[] = [];
+    for (let v = start; v <= end + step / 2; v += step) ticks.push(Number(v.toFixed(10)));
+    return ticks;
+  }
+  const scaleLinear = (v: number, d0: number, d1: number, r0: number, r1: number) =>
+    d1 === d0 ? r0 : r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+  const fmt = (v: number) => (Math.abs(v) >= 1000 ? `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k` : Number.isInteger(v) ? String(v) : v.toFixed(1));
+
+  // Légende : tones par label de série (ordre de la 1re barre).
+  const legend = $derived.by(() => {
+    const seen = new Map<string, StackedBarTone>();
+    data.forEach((bar) => bar.segments.forEach((seg, i) => {
+      if (!seen.has(seg.label)) seen.set(seg.label, seg.tone ?? TONES[i % TONES.length]);
+    }));
+    return [...seen.entries()].map(([seriesLabel, tone]) => ({ seriesLabel, tone }));
+  });
+
+  let hovered: { bar: number; seg: number } | null = $state(null);
+
+  const scales = $derived.by(() => {
+    const totals = data.map((b) => b.segments.reduce((s, x) => s + Math.max(x.value, 0), 0));
+    const ticks = niceTicks(0, Math.max(0, ...totals));
+    return {
+      ticks, domainMax: ticks[ticks.length - 1],
+      plotW: Math.max(width - MARGIN.left - MARGIN.right, 1),
+      plotH: Math.max(height - MARGIN.top - MARGIN.bottom, 1)
+    };
+  });
+
+  const bars = $derived.by(() => {
+    const { domainMax, plotW, plotH } = scales;
+    if (data.length === 0) return [];
+    const band = plotW / data.length;
+    const barWidth = band * 0.6;
+    return data.map((bar, bi) => {
+      const x = MARGIN.left + band * bi + (band - barWidth) / 2;
+      let acc = 0;
+      const segs = bar.segments.map((seg, si) => {
+        const v = Math.max(seg.value, 0);
+        const yTop = MARGIN.top + scaleLinear(acc + v, 0, domainMax, plotH, 0);
+        const yBottom = MARGIN.top + scaleLinear(acc, 0, domainMax, plotH, 0);
+        acc += v;
+        return {
+          x, y: yTop, width: barWidth, height: Math.max(yBottom - yTop, 0),
+          seg, tone: seg.tone ?? TONES[si % TONES.length],
+          cx: x + barWidth / 2, cy: yTop + (yBottom - yTop) / 2
+        };
+      });
+      return { x, band, label: bar.label, segs, cxLabel: MARGIN.left + band * (bi + 0.5) };
+    });
+  });
+
+  const classes = () => ["st-stackedBar", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()} role="img" aria-label={label}>
+  <svg viewBox="0 0 {width} {height}" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" focusable="false" aria-hidden="true">
+    {#each scales.ticks as t (t)}
+      {@const y = MARGIN.top + scaleLinear(t, 0, scales.domainMax, scales.plotH, 0)}
+      <line class="st-stackedBar__grid" x1={MARGIN.left} x2={width - MARGIN.right} y1={y} y2={y} />
+      <text class="st-stackedBar__tick" x={MARGIN.left - 6} y={y} text-anchor="end" dominant-baseline="middle">{fmt(t)}</text>
+    {/each}
+
+    <line class="st-stackedBar__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
+    <line class="st-stackedBar__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+    {#each bars as bar, bi (bar.label)}
+      <text class="st-stackedBar__categoryLabel" x={bar.cxLabel} y={height - MARGIN.bottom + 16} text-anchor="middle">{bar.label}</text>
+      {#each bar.segs as s, si (s.seg.label)}
+        <rect
+          class="st-stackedBar__seg st-stackedBar__seg--{s.tone}"
+          class:st-stackedBar__seg--dim={hovered !== null && !(hovered.bar === bi && hovered.seg === si)}
+          x={s.x} y={s.y} width={s.width} height={s.height}
+          tabindex="0"
+          role="img"
+          aria-label="{bar.label} — {s.seg.label}: {s.seg.value}"
+          onmouseenter={() => (hovered = { bar: bi, seg: si })}
+          onmouseleave={() => (hovered = null)}
+          onfocus={() => (hovered = { bar: bi, seg: si })}
+          onblur={() => (hovered = null)}
+        />
+      {/each}
+    {/each}
+  </svg>
+
+  {#if hovered && bars[hovered.bar]?.segs[hovered.seg]}
+    {@const s = bars[hovered.bar].segs[hovered.seg]}
+    <div class="st-stackedBar__tooltip" role="presentation" style="left: {(s.cx / width) * 100}%; top: {(s.cy / height) * 100}%">
+      <span class="st-stackedBar__tooltipLabel">{s.seg.label}</span>
+      <span class="st-stackedBar__tooltipValue">{s.seg.value}</span>
+    </div>
+  {/if}
+
+  {#if showLegend && legend.length > 0}
+    <ul class="st-stackedBar__legend">
+      {#each legend as item (item.seriesLabel)}
+        <li class="st-stackedBar__legendItem">
+          <span class="st-stackedBar__legendSwatch st-stackedBar__legendSwatch--{item.tone}" aria-hidden="true"></span>
+          {item.seriesLabel}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-stackedBar { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
+  .st-stackedBar svg { display: block; overflow: visible; }
+  .st-stackedBar__grid { stroke: var(--st-semantic-border-subtle); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
+  .st-stackedBar__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
+  .st-stackedBar__tick, .st-stackedBar__categoryLabel { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
+  .st-stackedBar__seg { cursor: pointer; stroke: var(--st-semantic-surface-default, #fff); stroke-width: 1; transition: opacity 120ms ease; }
+  .st-stackedBar__seg--dim { opacity: 0.45; }
+  .st-stackedBar__seg:focus-visible { outline: 2px solid var(--st-semantic-border-interactive); outline-offset: 1px; }
+  .st-stackedBar__seg--category1 { fill: var(--st-semantic-data-category1); }
+  .st-stackedBar__seg--category2 { fill: var(--st-semantic-data-category2); }
+  .st-stackedBar__seg--category3 { fill: var(--st-semantic-data-category3); }
+  .st-stackedBar__seg--category4 { fill: var(--st-semantic-data-category4); }
+  .st-stackedBar__seg--category5 { fill: var(--st-semantic-data-category5); }
+  .st-stackedBar__seg--category6 { fill: var(--st-semantic-data-category6); }
+  .st-stackedBar__seg--category7 { fill: var(--st-semantic-data-category7); }
+  .st-stackedBar__seg--category8 { fill: var(--st-semantic-data-category8); }
+  .st-stackedBar__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-stackedBar__tooltipLabel { font-weight: 600; }
+  .st-stackedBar__tooltipValue { opacity: 0.85; }
+  .st-stackedBar__legend { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
+  .st-stackedBar__legendItem { align-items: center; color: var(--st-semantic-text-secondary); display: inline-flex; font-size: 0.75rem; gap: 0.35rem; }
+  .st-stackedBar__legendSwatch { border-radius: 2px; height: 0.7rem; width: 0.7rem; }
+  .st-stackedBar__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
+  .st-stackedBar__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
+  .st-stackedBar__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
+  .st-stackedBar__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
+  .st-stackedBar__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
+  .st-stackedBar__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
+  .st-stackedBar__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
+  .st-stackedBar__legendSwatch--category8 { background: var(--st-semantic-data-category8); }
+</style>

package/dist/StackedBarChart.svelte.d.ts

@@ -0,0 +1,22 @@
+export type StackedBarTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type StackedBarSegment = {
+    label: string;
+    value: number;
+    tone?: StackedBarTone;
+};
+export type StackedBarDatum = {
+    label: string;
+    segments: StackedBarSegment[];
+};
+type StackedBarChartProps = {
+    data: StackedBarDatum[];
+    width?: number;
+    height?: number;
+    label: string;
+    showLegend?: boolean;
+    class?: string;
+};
+declare const StackedBarChart: import("svelte").Component<StackedBarChartProps, {}, "">;
+type StackedBarChart = ReturnType<typeof StackedBarChart>;
+export default StackedBarChart;
+//# sourceMappingURL=StackedBarChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StackedBarChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,EAAE,CAAC;CAC/B,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6HJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/StreamingMessage.svelte

@@ -9,6 +9,8 @@
   export type StreamingMessageEvent =
     | { type: "message.delta"; messageId?: string; delta: string }
     | { type: "message.completed"; messageId?: string }
+    | { type: "reasoning.delta"; messageId?: string; delta: string }
+    | { type: "reasoning.completed"; messageId?: string }
     | { type: "tool.started"; toolCallId: string; toolName: string; messageId?: string }
     | {
         type: "tool.completed";
@@ -84,6 +86,15 @@
       .join("");
   };
 
+  const resolvedReasoning = () =>
+    mergedEvents()
+      .filter((event) => event.type === "reasoning.delta")
+      .map((event) => event.delta)
+      .join("");
+
+  const reasoningCompleted = () =>
+    mergedEvents().some((event) => event.type === "reasoning.completed");
+
   const hasAnyEvent = () => mergedEvents().length > 0;
 
   const toolCalls = (): ToolCallState[] => {
@@ -129,6 +140,10 @@
         return "message.delta";
       case "message.completed":
         return "message.completed";
+      case "reasoning.delta":
+        return "reasoning.delta";
+      case "reasoning.completed":
+        return "reasoning.completed";
       case "tool.started":
         return `${event.toolName} démarré (${event.toolCallId})`;
       case "tool.completed":
@@ -155,6 +170,15 @@
   footer={footer}
   actions={actions}
 >
+  {#if resolvedReasoning()}
+    <details class="st-streamingMessage__reasoning" open={!reasoningCompleted()}>
+      <summary class="st-streamingMessage__reasoningToggle">
+        Raisonnement{reasoningCompleted() ? "" : "…"}
+      </summary>
+      <p class="st-streamingMessage__reasoningText">{resolvedReasoning()}</p>
+    </details>
+  {/if}
+
   {#if resolvedContent()}
     <p class="st-streamingMessage__text">{resolvedContent()}</p>
   {:else}
@@ -236,6 +260,29 @@
     font-style: italic;
   }
 
+  .st-streamingMessage__reasoning {
+    background: var(--st-component-chatMessage-reasoningBackground, var(--st-semantic-surface-subtle));
+    border-left: 2px solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    margin: 0 0 0.5rem;
+    padding: 0.4rem 0.6rem;
+  }
+
+  .st-streamingMessage__reasoningToggle {
+    color: var(--st-semantic-text-muted);
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .st-streamingMessage__reasoningText {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    font-style: italic;
+    margin: 0.35rem 0 0;
+    white-space: pre-wrap;
+  }
+
   .st-streamingMessage__meta {
     color: var(--st-semantic-text-muted);
     font-size: 0.75rem;

package/dist/StreamingMessage.svelte.d.ts

@@ -8,6 +8,13 @@ export type StreamingMessageEvent = {
 } | {
     type: "message.completed";
     messageId?: string;
+} | {
+    type: "reasoning.delta";
+    messageId?: string;
+    delta: string;
+} | {
+    type: "reasoning.completed";
+    messageId?: string;
 } | {
     type: "tool.started";
     toolCallId: string;

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

@@ -1 +1 @@
-{"version":3,"file":"StreamingMessage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StreamingMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAoB,EAChB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACvB,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,qBAAqB,GAC7B;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAClF;IACE,IAAI,EAAE,gBAAgB,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;AAQtD,KAAK,qBAAqB,GAAG,IAAI,CAC/B,cAAc,CAAC,WAAW,CAAC,EAC3B,OAAO,GAAG,UAAU,GAAG,MAAM,CAC9B,GAAG;IACF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA0KJ,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"StreamingMessage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StreamingMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAoB,EAChB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACvB,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,qBAAqB,GAC7B;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC9D;IAAE,IAAI,EAAE,qBAAqB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAClF;IACE,IAAI,EAAE,gBAAgB,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD;IACE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;AAQtD,KAAK,qBAAqB,GAAG,IAAI,CAC/B,cAAc,CAAC,WAAW,CAAC,EAC3B,OAAO,GAAG,UAAU,GAAG,MAAM,CAC9B,GAAG;IACF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgMJ,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/Switch.svelte

@@ -68,8 +68,12 @@
     transform: translateX(1rem);
   }
 
+  /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
   .st-switch__input:focus-visible + .st-switch__track {
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
   .st-switch__content {

package/dist/Tabs.svelte

@@ -77,22 +77,36 @@
   .st-tabs__tab {
     background: transparent;
     border: 0;
-    border-bottom: 2px solid transparent;
+    border-bottom-width: var(--st-component-tabs-anatomy-shape-borderWidth, 2px);
+    border-bottom-style: var(--st-component-tabs-anatomy-shape-borderStyle, solid);
+    border-bottom-color: transparent;
     color: var(--st-component-tabs-inactiveText, var(--st-semantic-text-secondary));
-    cursor: pointer;
-    font: inherit;
-    font-weight: 600;
+    cursor: var(--st-cursor-interactive, pointer);
+    font-family: var(--st-component-tabs-anatomy-typography-family, inherit);
+    font-weight: var(--st-component-tabs-anatomy-typography-weight, 600);
+    line-height: var(--st-component-tabs-anatomy-typography-lineHeight, 1.2);
+    letter-spacing: var(--st-component-tabs-anatomy-typography-letterSpacing, 0);
+    text-transform: var(--st-component-tabs-anatomy-typography-textTransform, none);
     padding: 0.75rem 0.25rem;
   }
 
   .st-tabs__tab--active {
     border-bottom-color: var(--st-component-tabs-indicator, var(--st-semantic-action-primary));
-    color: var(--st-component-tabs-activeText, var(--st-semantic-text-primary));
+    color: var(--st-component-tabs-anatomy-states-hover-text, var(--st-component-tabs-activeText, var(--st-semantic-text-primary)));
+  }
+
+  /* a11y (non-negotiable): tabs previously had NO visible focus ring. The
+     shared focus mixin restores keyboard visibility per theme. */
+  .st-tabs__tab:focus-visible {
+    outline: var(--st-component-tabs-anatomy-focus-outline, 2px solid var(--st-semantic-border-interactive));
+    outline-offset: var(--st-component-tabs-anatomy-focus-offset, 2px);
+    box-shadow: var(--st-component-tabs-anatomy-focus-boxShadow, none);
+    border-radius: var(--st-component-tabs-anatomy-shape-radius, 0);
   }
 
   .st-tabs__tab:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
+    cursor: var(--st-cursor-disabled, not-allowed);
+    opacity: var(--st-component-tabs-anatomy-states-disabled-opacity, 0.55);
   }
 
   .st-tabs__panel {

package/dist/Textarea.svelte

@@ -55,8 +55,12 @@
   }
 
   .st-field__label {
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-family: var(--st-component-field-labelTypography-family, inherit);
+    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
+    font-weight: var(--st-component-field-labelTypography-weight, 600);
+    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
+    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
+    text-transform: var(--st-component-field-labelTypography-textTransform, none);
   }
 
   .st-field__help,
@@ -73,23 +77,46 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field style (anatomy v1.2.0) — same resolved field anatomy as Input:
+     outline (base) = surface fill + 4 equal borders; filled-underline
+     (DSFR/Carbon) = filled bg + bottom rule only. Multiline keeps its own
+     vertical padding (block padding can't be 0 like a single-line control). */
   .st-textarea {
-    background: var(--st-component-control-background, var(--st-semantic-surface-default));
-    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
-    border-radius: var(--st-component-control-radius, 0.375rem);
+    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
+    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
+    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
-    font: inherit;
+    font-family: var(--st-component-control-anatomy-typography-family, inherit);
+    font-size: var(--st-component-control-anatomy-typography-size, inherit);
+    font-weight: var(--st-component-control-anatomy-typography-weight, 400);
+    line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
     min-height: 6rem;
     min-width: 0;
-    padding: 0.625rem 0.75rem;
+    padding: 0.625rem var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
     resize: vertical;
+    transition:
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
     width: 100%;
   }
 
+  .st-textarea::placeholder {
+    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
+  }
+
+  .st-textarea:hover:not(:disabled) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
   .st-textarea:focus-visible {
     border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
-    outline: none;
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
   .st-textarea[aria-invalid="true"] {

package/dist/Tile.svelte

@@ -0,0 +1,165 @@
+<script lang="ts" module>
+  export type TileVariant = "static" | "clickable" | "selectable";
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type TileProps = Omit<HTMLAttributes<HTMLElement>, "class" | "title"> & {
+    /** `static` (présentation), `clickable` (lien/bouton), `selectable` (case unitaire). */
+    variant?: TileVariant;
+    /** Pour `clickable` : si fourni, rend un `<a>`, sinon un `<button>`. */
+    href?: string;
+    /** Pour `selectable` : état coché (bindable). */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Titre rapide (sinon utiliser le slot `children`). */
+    title?: string;
+    description?: string;
+    class?: string;
+    onclick?: (event: MouseEvent) => void;
+    /** Pour `selectable` : notifié au changement d'état. */
+    onselect?: (selected: boolean) => void;
+    children?: Snippet;
+  };
+
+  let {
+    variant = "static",
+    href,
+    selected = $bindable(false),
+    disabled = false,
+    title,
+    description,
+    class: className,
+    onclick,
+    onselect,
+    children,
+    ...rest
+  }: TileProps = $props();
+
+  const classes = () =>
+    [
+      "st-tile",
+      `st-tile--${variant}`,
+      variant === "selectable" && selected ? "st-tile--selected" : null,
+      disabled ? "st-tile--disabled" : null,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+  function toggle() {
+    if (disabled) return;
+    selected = !selected;
+    onselect?.(selected);
+  }
+</script>
+
+{#snippet body()}
+  {#if children}
+    {@render children()}
+  {:else}
+    {#if title}<span class="st-tile__title">{title}</span>{/if}
+    {#if description}<span class="st-tile__description">{description}</span>{/if}
+  {/if}
+{/snippet}
+
+{#if variant === "clickable" && href}
+  <a {...rest} class={classes()} {href} aria-disabled={disabled} {onclick}>
+    <span class="st-tile__content">{@render body()}</span>
+  </a>
+{:else if variant === "clickable"}
+  <button {...rest} type="button" class={classes()} {disabled} {onclick}>
+    <span class="st-tile__content">{@render body()}</span>
+  </button>
+{:else if variant === "selectable"}
+  <label class={classes()}>
+    <input
+      type="checkbox"
+      class="st-tile__input"
+      checked={selected}
+      {disabled}
+      onchange={toggle}
+    />
+    <span class="st-tile__content">{@render body()}</span>
+  </label>
+{:else}
+  <div {...rest} class={classes()}>
+    <span class="st-tile__content">{@render body()}</span>
+  </div>
+{/if}
+
+<style>
+  .st-tile {
+    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-card-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-card-radius, 0.5rem);
+    color: var(--st-semantic-text-primary);
+    display: block;
+    padding: var(--st-spacing-4, 1rem);
+    text-align: left;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  /* clickable: <a>/<button> reset + interactivity */
+  a.st-tile,
+  button.st-tile {
+    cursor: pointer;
+    font: inherit;
+    transition:
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-tile--clickable:hover:not(.st-tile--disabled),
+  .st-tile--selectable:hover:not(.st-tile--disabled) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-tile--clickable:focus-visible,
+  .st-tile--selectable:focus-within {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: none;
+  }
+
+  .st-tile--selectable {
+    align-items: start;
+    cursor: pointer;
+    display: grid;
+    gap: var(--st-spacing-2, 0.5rem);
+    grid-template-columns: auto 1fr;
+  }
+
+  .st-tile--selected {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 1px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+  }
+
+  .st-tile--disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .st-tile__input {
+    accent-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    margin: 0.2rem 0 0;
+  }
+
+  .st-tile__content {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  .st-tile__title {
+    font-size: 0.9375rem;
+    font-weight: 600;
+  }
+
+  .st-tile__description {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+</style>

package/dist/Tile.svelte.d.ts

@@ -0,0 +1,24 @@
+export type TileVariant = "static" | "clickable" | "selectable";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type TileProps = Omit<HTMLAttributes<HTMLElement>, "class" | "title"> & {
+    /** `static` (présentation), `clickable` (lien/bouton), `selectable` (case unitaire). */
+    variant?: TileVariant;
+    /** Pour `clickable` : si fourni, rend un `<a>`, sinon un `<button>`. */
+    href?: string;
+    /** Pour `selectable` : état coché (bindable). */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Titre rapide (sinon utiliser le slot `children`). */
+    title?: string;
+    description?: string;
+    class?: string;
+    onclick?: (event: MouseEvent) => void;
+    /** Pour `selectable` : notifié au changement d'état. */
+    onselect?: (selected: boolean) => void;
+    children?: Snippet;
+};
+declare const Tile: import("svelte").Component<TileProps, {}, "selected">;
+type Tile = ReturnType<typeof Tile>;
+export default Tile;
+//# sourceMappingURL=Tile.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Tile.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;AAGlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IACtE,wFAAwF;IACxF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwEJ,QAAA,MAAM,IAAI,uDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/Toggle.svelte

@@ -101,8 +101,12 @@
     transform: translateX(calc(var(--st-toggle-trackWidth, 2.25rem) - var(--st-toggle-thumbSize, 1rem) - 0.25rem));
   }
 
+  /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
   .st-toggle__input:focus-visible + .st-toggle__track {
-    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: var(--st-component-control-anatomy-focus-outline, none);
+    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
+    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
+      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
   .st-toggle__input:disabled + .st-toggle__track {