@sentropic/design-system-svelte 0.9.0 → 0.10.0

package/dist/PaginationNav.svelte

@@ -168,11 +168,14 @@
     );
   }
 
+  /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */
   .st-paginationNav__page:focus-visible,
   .st-paginationNav__nav: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-paginationNav__page--active {

package/dist/PasswordInput.svelte

@@ -89,8 +89,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,
@@ -107,11 +111,15 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-passwordInput {
     align-items: center;
-    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));
     display: inline-flex;
     transition:
@@ -138,7 +146,10 @@
 
   .st-passwordInput: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: 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-passwordInput:has([aria-invalid="true"]) {

package/dist/Quote.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type QuoteProps = Omit<HTMLAttributes<HTMLElement>, "class" | "cite"> & {
+    /** Auteur de la citation. */
+    author?: string;
+    /** Source / référence (affichée après l'auteur). */
+    source?: string;
+    /** URL source (attribut cite du blockquote). */
+    cite?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    author,
+    source,
+    cite,
+    class: className,
+    children,
+    ...rest
+  }: QuoteProps = $props();
+
+  const classes = () => ["st-quote", className].filter(Boolean).join(" ");
+  const hasAttribution = () => Boolean(author || source);
+</script>
+
+<figure {...rest} class={classes()}>
+  <blockquote class="st-quote__text" {cite}>
+    {#if children}{@render children()}{/if}
+  </blockquote>
+  {#if hasAttribution()}
+    <figcaption class="st-quote__attribution">
+      {#if author}<span class="st-quote__author">{author}</span>{/if}
+      {#if source}<cite class="st-quote__source">{source}</cite>{/if}
+    </figcaption>
+  {/if}
+</figure>
+
+<style>
+  .st-quote {
+    border-left: 4px solid var(--st-semantic-action-primary);
+    margin: 0;
+    padding: var(--st-spacing-2, 0.5rem) 0 var(--st-spacing-2, 0.5rem) var(--st-spacing-4, 1rem);
+  }
+
+  .st-quote__text {
+    color: var(--st-semantic-text-primary);
+    font-size: 1.125rem;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .st-quote__attribution {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+    margin-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-quote__author {
+    font-weight: 600;
+  }
+
+  .st-quote__author + .st-quote__source::before {
+    content: ", ";
+  }
+
+  .st-quote__source {
+    font-style: italic;
+  }
+</style>

package/dist/Quote.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type QuoteProps = Omit<HTMLAttributes<HTMLElement>, "class" | "cite"> & {
+    /** Auteur de la citation. */
+    author?: string;
+    /** Source / référence (affichée après l'auteur). */
+    source?: string;
+    /** URL source (attribut cite du blockquote). */
+    cite?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Quote: import("svelte").Component<QuoteProps, {}, "">;
+type Quote = ReturnType<typeof Quote>;
+export default Quote;
+//# sourceMappingURL=Quote.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Quote.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACtE,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmCJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Radio.svelte

@@ -30,6 +30,10 @@
   }
 
   .st-choice__input {
+    /* Thématise le radio natif (couleur checked) sans markup custom — additif,
+       a11y native préservée. Le visuel custom (forme/focus par stratégie) reste
+       un item dédié (cf. backlog). */
+    accent-color: var(--st-component-selection-checkedBackground, var(--st-semantic-action-primary));
     height: 1rem;
     margin: 0.125rem 0 0;
     width: 1rem;

package/dist/ScatterPlot.svelte

@@ -0,0 +1,179 @@
+<script lang="ts" module>
+  export type ScatterPlotTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type ScatterPlotDatum = {
+    x: number;
+    y: number;
+    label?: string;
+    tone?: ScatterPlotTone;
+  };
+</script>
+
+<script lang="ts">
+  type ScatterPlotProps = {
+    data: ScatterPlotDatum[];
+    width?: number;
+    height?: number;
+    xLabel?: string;
+    yLabel?: string;
+    radius?: number;
+    label: string;
+    class?: string;
+  };
+
+  let {
+    data,
+    width = 480,
+    height = 280,
+    xLabel,
+    yLabel,
+    radius = 5,
+    label,
+    class: className
+  }: ScatterPlotProps = $props();
+
+  const MARGIN = { top: 14, right: 18, bottom: 36, left: 48 };
+
+  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;
+    let step: number;
+    if (norm < 1.5) step = pow;
+    else if (norm < 3) step = 2 * pow;
+    else if (norm < 7) step = 5 * pow;
+    else step = 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;
+  }
+
+  function scaleLinear(v: number, d0: number, d1: number, r0: number, r1: number) {
+    if (d1 === d0) return r0;
+    return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+  }
+
+  function fmt(v: number): string {
+    if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
+    return Number.isInteger(v) ? String(v) : v.toFixed(1);
+  }
+
+  let hoveredIndex: number | null = $state(null);
+
+  const TONES = ["category1","category2","category3","category4","category5","category6","category7","category8"] as const;
+
+  const scales = $derived.by(() => {
+    const xs = data.map((d) => d.x);
+    const ys = data.map((d) => d.y);
+    const xTicks = niceTicks(Math.min(...xs), Math.max(...xs));
+    const yTicks = niceTicks(Math.min(...ys), Math.max(...ys));
+    const plotW = Math.max(width - MARGIN.left - MARGIN.right, 1);
+    const plotH = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+    return {
+      xTicks, yTicks,
+      xMin: xTicks[0], xMax: xTicks[xTicks.length - 1],
+      yMin: yTicks[0], yMax: yTicks[yTicks.length - 1],
+      plotW, plotH
+    };
+  });
+
+  const points = $derived.by(() => {
+    const { xMin, xMax, yMin, yMax, plotW, plotH } = scales;
+    return data.map((d, i) => ({
+      cx: MARGIN.left + scaleLinear(d.x, xMin, xMax, 0, plotW),
+      cy: MARGIN.top + scaleLinear(d.y, yMin, yMax, plotH, 0),
+      datum: d,
+      tone: d.tone ?? TONES[i % TONES.length]
+    }));
+  });
+
+  const classes = () => ["st-scatterPlot", 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">
+    <!-- gridlines + ticks Y -->
+    {#each scales.yTicks as t (t)}
+      {@const y = MARGIN.top + scaleLinear(t, scales.yMin, scales.yMax, scales.plotH, 0)}
+      <line class="st-scatterPlot__grid" x1={MARGIN.left} x2={width - MARGIN.right} y1={y} y2={y} />
+      <text class="st-scatterPlot__tick" x={MARGIN.left - 6} y={y} text-anchor="end" dominant-baseline="middle">{fmt(t)}</text>
+    {/each}
+    <!-- ticks X -->
+    {#each scales.xTicks as t (t)}
+      {@const x = MARGIN.left + scaleLinear(t, scales.xMin, scales.xMax, 0, scales.plotW)}
+      <text class="st-scatterPlot__tick" x={x} y={height - MARGIN.bottom + 16} text-anchor="middle">{fmt(t)}</text>
+    {/each}
+
+    <!-- axes -->
+    <line class="st-scatterPlot__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
+    <line class="st-scatterPlot__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+    {#if xLabel}
+      <text class="st-scatterPlot__axisLabel" x={MARGIN.left + scales.plotW / 2} y={height - 4} text-anchor="middle">{xLabel}</text>
+    {/if}
+    {#if yLabel}
+      <text class="st-scatterPlot__axisLabel" x={12} y={MARGIN.top + scales.plotH / 2} text-anchor="middle" transform="rotate(-90 12 {MARGIN.top + scales.plotH / 2})">{yLabel}</text>
+    {/if}
+
+    <!-- points -->
+    {#each points as p, i (i)}
+      <circle
+        class="st-scatterPlot__point st-scatterPlot__point--{p.tone}"
+        cx={p.cx}
+        cy={p.cy}
+        r={radius}
+        tabindex="0"
+        role="img"
+        aria-label="{p.datum.label ? p.datum.label + ': ' : ''}x {p.datum.x}, y {p.datum.y}"
+        onmouseenter={() => (hoveredIndex = i)}
+        onmouseleave={() => (hoveredIndex = null)}
+        onfocus={() => (hoveredIndex = i)}
+        onblur={() => (hoveredIndex = null)}
+      />
+    {/each}
+  </svg>
+
+  {#if hoveredIndex !== null && points[hoveredIndex]}
+    {@const p = points[hoveredIndex]}
+    <div class="st-scatterPlot__tooltip" role="presentation" style="left: {(p.cx / width) * 100}%; top: {(p.cy / height) * 100}%">
+      {#if p.datum.label}<span class="st-scatterPlot__tooltipLabel">{p.datum.label}</span>{/if}
+      <span class="st-scatterPlot__tooltipValue">x {p.datum.x} · y {p.datum.y}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-scatterPlot { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
+  .st-scatterPlot svg { display: block; overflow: visible; }
+  .st-scatterPlot__grid { stroke: var(--st-semantic-border-subtle); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
+  .st-scatterPlot__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
+  .st-scatterPlot__tick { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
+  .st-scatterPlot__axisLabel { fill: var(--st-semantic-text-secondary); font-size: 0.75rem; font-weight: 600; }
+  .st-scatterPlot__point { cursor: pointer; fill-opacity: 0.85; transition: fill-opacity 120ms ease, r 120ms ease; }
+  .st-scatterPlot__point:hover, .st-scatterPlot__point:focus-visible { fill-opacity: 1; }
+  .st-scatterPlot__point:focus-visible { outline: 2px solid var(--st-semantic-border-interactive); outline-offset: 1px; }
+  .st-scatterPlot__point--category1 { fill: var(--st-semantic-data-category1); }
+  .st-scatterPlot__point--category2 { fill: var(--st-semantic-data-category2); }
+  .st-scatterPlot__point--category3 { fill: var(--st-semantic-data-category3); }
+  .st-scatterPlot__point--category4 { fill: var(--st-semantic-data-category4); }
+  .st-scatterPlot__point--category5 { fill: var(--st-semantic-data-category5); }
+  .st-scatterPlot__point--category6 { fill: var(--st-semantic-data-category6); }
+  .st-scatterPlot__point--category7 { fill: var(--st-semantic-data-category7); }
+  .st-scatterPlot__point--category8 { fill: var(--st-semantic-data-category8); }
+  .st-scatterPlot__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-scatterPlot__tooltipLabel { font-weight: 600; }
+  .st-scatterPlot__tooltipValue { opacity: 0.85; }
+</style>

package/dist/ScatterPlot.svelte.d.ts

@@ -0,0 +1,21 @@
+export type ScatterPlotTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type ScatterPlotDatum = {
+    x: number;
+    y: number;
+    label?: string;
+    tone?: ScatterPlotTone;
+};
+type ScatterPlotProps = {
+    data: ScatterPlotDatum[];
+    width?: number;
+    height?: number;
+    xLabel?: string;
+    yLabel?: string;
+    radius?: number;
+    label: string;
+    class?: string;
+};
+declare const ScatterPlot: import("svelte").Component<ScatterPlotProps, {}, "">;
+type ScatterPlot = ReturnType<typeof ScatterPlot>;
+export default ScatterPlot;
+//# sourceMappingURL=ScatterPlot.svelte.d.ts.map

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

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

package/dist/Search.svelte

@@ -87,8 +87,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,
@@ -105,11 +109,15 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-search {
     align-items: center;
-    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));
     display: inline-flex;
     transition:
@@ -136,7 +144,10 @@
 
   .st-search: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: 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-search:has([aria-invalid="true"]) {

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,12 +85,19 @@
     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);
+    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-width: 0;
     padding: 0 2rem 0 0.75rem;
     width: 100%;
@@ -106,8 +117,10 @@
 
   .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);
+    box-shadow: 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"}