@sentropic/design-system-svelte 0.9.0 → 0.10.1

package/dist/Select.svelte

@@ -63,8 +63,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,
@@ -81,14 +85,54 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-select {
-    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);
+    /* Native <select> rendering (anatomy v1.4.0, F5/F9). A native <select> with
+       `appearance: auto` has its `line-height` FORCED to `normal` by the browser
+       (the anatomy line-height below never lands); `appearance: none` lets it
+       take effect — the real DSFR/Carbon selects use `appearance: none` + a
+       drawn chevron, which is why they render 24px / 18px. Base = `auto` so the
+       Sent Tech select keeps its NATIVE arrow + render (unchanged). When a theme
+       opts into `none`, `selectChevron` redraws the arrow the UA dropped. */
+    appearance: var(--st-component-control-anatomy-field-selectAppearance, auto);
+    -webkit-appearance: var(--st-component-control-anatomy-field-selectAppearance, auto);
+    background:
+      var(--st-component-control-anatomy-field-selectChevron, none),
+      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)));
+    /* Per-corner radius + box-shadow underline (anatomy v1.3.0) — same field
+       anatomy as Input. TOP corners = radiusTop (DSFR 4px), bottom = shape.radius;
+       bottom rule via inset box-shadow. Fallbacks reproduce the prior uniform
+       rounded box with no underline shadow → base Sent Tech unchanged. */
+    border-top-left-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
+    border-top-right-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
+    border-bottom-right-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    border-bottom-left-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    box-shadow: var(--st-component-control-anatomy-field-underline, none);
     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);
+    /* Native <select> renders `line-height: normal` unless one is set explicitly;
+       pose the anatomy line-height so DSFR/Carbon select matches the field roles
+       (cluster 4). letter-spacing likewise (Carbon 0.16px). Additive — base keeps
+       its 1.5 fallback so the Sent Tech select is unchanged. */
+    line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
+    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
     min-width: 0;
-    padding: 0 2rem 0 0.75rem;
+    /* Padding follows the field density (additive; fallbacks reproduce the prior
+       `0 2rem 0 0.75rem` literal so the base Sent Tech select is unchanged):
+       vertical = md paddingBlock (base 0 → DSFR 8px), left = sm paddingInline
+       (base 0.75rem → DSFR/Carbon 16px). The right side reserves the chevron
+       gutter via selectPaddingRight (F9: base 2rem → DSFR 40px / Carbon 48px). */
+    padding:
+      var(--st-component-control-anatomy-density-md-paddingBlock, 0)
+      var(--st-component-control-anatomy-field-selectPaddingRight, 2rem)
+      var(--st-component-control-anatomy-density-md-paddingBlock, 0)
+      var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
     width: 100%;
   }
 
@@ -106,8 +150,12 @@
 
   .st-select: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);
+    /* Composed field focus box-shadow (v1.3.0): keeps the resting underline. */
+    box-shadow: var(--st-component-control-anatomy-field-focusShadow,
+      var(--st-component-control-anatomy-focus-boxShadow,
+        0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive))));
   }
 
   .st-select[aria-invalid="true"] {

package/dist/SkipLink.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type SkipLinkProps = Omit<HTMLAnchorAttributes, "class" | "href"> & {
+    /** Cible de l'ancre (id du contenu principal). */
+    href?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    href = "#main-content",
+    class: className,
+    children,
+    ...rest
+  }: SkipLinkProps = $props();
+
+  const classes = () => ["st-skipLink", className].filter(Boolean).join(" ");
+</script>
+
+<a {...rest} class={classes()} {href}>
+  {#if children}{@render children()}{:else}Aller au contenu principal{/if}
+</a>
+
+<style>
+  /* Lien d'évitement : hors écran jusqu'au focus clavier (a11y, DSFR/WCAG). */
+  .st-skipLink {
+    background: var(--st-semantic-action-primary);
+    border-radius: var(--st-radius-md, 0.375rem);
+    color: var(--st-semantic-action-primaryText, #fff);
+    font-size: 0.875rem;
+    font-weight: 600;
+    left: var(--st-spacing-2, 0.5rem);
+    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-4, 1rem);
+    position: fixed;
+    text-decoration: none;
+    top: var(--st-spacing-2, 0.5rem);
+    transform: translateY(-150%);
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    z-index: var(--st-zindex-modal, 100);
+  }
+
+  .st-skipLink:focus,
+  .st-skipLink:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive);
+    outline-offset: 2px;
+    transform: translateY(0);
+  }
+</style>

package/dist/SkipLink.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+type SkipLinkProps = Omit<HTMLAnchorAttributes, "class" | "href"> & {
+    /** Cible de l'ancre (id du contenu principal). */
+    href?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const SkipLink: import("svelte").Component<SkipLinkProps, {}, "">;
+type SkipLink = ReturnType<typeof SkipLink>;
+export default SkipLink;
+//# sourceMappingURL=SkipLink.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SkipLink.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,KAAK,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAClE,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwBJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -63,7 +63,9 @@
 
 <style>
   .st-tabs {
-    color: var(--st-component-tabs-activeText, var(--st-semantic-text-primary));
+    /* Wrapper/panel text = neutral primary (NOT the active-tab colour, which is
+       Bleu France in DSFR and must not bleed into the panel body). */
+    color: var(--st-semantic-text-primary);
     display: grid;
     gap: var(--st-spacing-4, 1rem);
   }
@@ -77,22 +79,49 @@
   .st-tabs__tab {
     background: transparent;
     border: 0;
-    border-bottom: 2px solid transparent;
+    /* Indicator edge (F7/F8): base/Carbon carry it on the BOTTOM, DSFR on the
+       TOP. The resting tab keeps the same-width transparent stroke on each edge
+       so the baseline does not shift when a tab becomes active. */
+    border-top-width: var(--st-component-tabs-activeBorderTopWidth, 0);
+    border-bottom-width: var(--st-component-tabs-activeBorderBottomWidth, var(--st-component-tabs-anatomy-shape-borderWidth, 2px));
+    border-top-style: var(--st-component-tabs-anatomy-shape-borderStyle, solid);
+    border-bottom-style: var(--st-component-tabs-anatomy-shape-borderStyle, solid);
+    border-top-color: transparent;
+    border-bottom-color: transparent;
     color: var(--st-component-tabs-inactiveText, var(--st-semantic-text-secondary));
-    cursor: pointer;
-    font: inherit;
-    font-weight: 600;
-    padding: 0.75rem 0.25rem;
+    cursor: var(--st-cursor-interactive, pointer);
+    font-family: var(--st-component-tabs-anatomy-typography-family, inherit);
+    font-size: var(--st-component-tabs-tabFontSize, inherit);
+    font-weight: var(--st-component-tabs-anatomy-typography-weight, 600);
+    line-height: var(--st-component-tabs-tabLineHeight, 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: var(--st-component-tabs-tabPaddingBlock, 0.75rem) var(--st-component-tabs-tabPaddingInline, 0.25rem);
   }
 
   .st-tabs__tab--active {
+    background: var(--st-component-tabs-activeBackground, transparent);
+    border-top-color: var(--st-component-tabs-indicator, var(--st-semantic-action-primary));
     border-bottom-color: var(--st-component-tabs-indicator, var(--st-semantic-action-primary));
+    /* Indicator accent when the theme draws it as a box-shadow (DSFR top filet)
+       rather than a real border — keeps both border sides at `0 none`. */
+    box-shadow: var(--st-component-tabs-activeShadow, none);
+    font-weight: var(--st-component-tabs-activeWeight, var(--st-component-tabs-anatomy-typography-weight, 600));
     color: 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,57 @@
     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)));
+    /* Per-corner radius + box-shadow underline (anatomy v1.3.0) — same field
+       anatomy as Input: TOP corners = radiusTop (DSFR 4px), bottom = shape.radius;
+       bottom rule via inset box-shadow. Fallbacks reproduce the prior uniform
+       rounded box with no underline shadow → base Sent Tech unchanged. */
+    border-top-left-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
+    border-top-right-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
+    border-bottom-right-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    border-bottom-left-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    box-shadow: var(--st-component-control-anatomy-field-underline, none);
     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);
+    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
     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);
+    /* Composed field focus box-shadow (v1.3.0): keeps the resting underline. */
+    box-shadow: var(--st-component-control-anatomy-field-focusShadow,
+      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"] {