@sentropic/design-system-svelte 0.9.0 → 0.10.0

package/dist/AreaChart.svelte

@@ -387,6 +387,12 @@
     outline-offset: 1px;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .st-areaChart__dot {
+      transition: none;
+    }
+  }
+
   .st-areaChart__tooltip {
     background: var(--st-component-areaChart-tooltipBackground, var(--st-semantic-surface-inverse));
     border-radius: var(--st-radius-sm, 0.25rem);

package/dist/Button.svelte

@@ -32,38 +32,53 @@
 </button>
 
 <style>
+  /* Anatomy-driven: shape / density / typography / focus all read the themed
+     --st-component-button-anatomy-* tokens (rebuilt per theme via
+     createComponent). Fallbacks mirror the Sent Tech base = no regression. */
   .st-button {
-    border: 1px solid transparent;
-    border-radius: var(--st-component-button-radius, 0.375rem);
-    cursor: pointer;
+    border-width: var(--st-component-button-anatomy-shape-borderWidth, 1px);
+    border-style: var(--st-component-button-anatomy-shape-borderStyle, solid);
+    border-color: transparent;
+    border-radius: var(--st-component-button-anatomy-shape-radius, 0.375rem);
+    cursor: var(--st-cursor-interactive, pointer);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--st-spacing-2, 0.5rem);
-    font: inherit;
-    font-weight: 600;
+    gap: var(--st-component-button-anatomy-icon-gap, var(--st-spacing-2, 0.5rem));
+    font-family: var(--st-component-button-anatomy-typography-family, inherit);
+    font-weight: var(--st-component-button-anatomy-typography-weight, 600);
+    line-height: var(--st-component-button-anatomy-typography-lineHeight, 1.2);
+    letter-spacing: var(--st-component-button-anatomy-typography-letterSpacing, 0);
+    text-transform: var(--st-component-button-anatomy-typography-textTransform, none);
     transition:
       background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
       border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
-      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
   }
 
   .st-button--sm {
-    min-height: 2rem;
-    padding: 0 0.75rem;
-    font-size: 0.875rem;
+    min-height: var(--st-component-button-anatomy-density-sm-controlHeight, 2rem);
+    min-width: var(--st-component-button-anatomy-density-sm-minWidth, 2rem);
+    padding: var(--st-component-button-anatomy-density-sm-paddingBlock, 0)
+      var(--st-component-button-anatomy-density-sm-paddingInline, 0.75rem);
+    font-size: var(--st-component-button-anatomy-density-sm-fontSize, 0.875rem);
   }
 
   .st-button--md {
-    min-height: 2.5rem;
-    padding: 0 1rem;
-    font-size: 0.9375rem;
+    min-height: var(--st-component-button-anatomy-density-md-controlHeight, 2.5rem);
+    min-width: var(--st-component-button-anatomy-density-md-minWidth, 2.5rem);
+    padding: var(--st-component-button-anatomy-density-md-paddingBlock, 0)
+      var(--st-component-button-anatomy-density-md-paddingInline, 1rem);
+    font-size: var(--st-component-button-anatomy-density-md-fontSize, var(--st-component-button-anatomy-typography-size, 0.9375rem));
   }
 
   .st-button--lg {
-    min-height: 3rem;
-    padding: 0 1.25rem;
-    font-size: 1rem;
+    min-height: var(--st-component-button-anatomy-density-lg-controlHeight, 3rem);
+    min-width: var(--st-component-button-anatomy-density-lg-minWidth, 3rem);
+    padding: var(--st-component-button-anatomy-density-lg-paddingBlock, 0)
+      var(--st-component-button-anatomy-density-lg-paddingInline, 1.25rem);
+    font-size: var(--st-component-button-anatomy-density-lg-fontSize, 1rem);
   }
 
   .st-button--primary {
@@ -77,6 +92,16 @@
     border-color: var(--st-semantic-border-subtle);
   }
 
+  /* Anatomy v1.1.0: hover bg sourced from states.hover.bg (= primaryHover).
+     Retires the D1/C1 escape. Secondary uses its own semantic hover surface. */
+  .st-button--primary:not(:disabled):hover {
+    background: var(--st-component-button-anatomy-states-hover-bg, var(--st-semantic-action-primary));
+  }
+
+  .st-button--secondary:not(:disabled):hover {
+    background: var(--st-semantic-action-secondaryHover, var(--st-semantic-action-secondary));
+  }
+
   .st-button--ghost {
     background: transparent;
     color: var(--st-semantic-text-link);
@@ -88,12 +113,15 @@
   }
 
   .st-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
+    cursor: var(--st-cursor-disabled, not-allowed);
+    opacity: var(--st-component-button-anatomy-states-disabled-opacity, 0.55);
   }
 
+  /* Shared focus mixin: apply BOTH channels; the strategy (resolved in
+     createComponent) sets the live one and no-ops the other. */
   .st-button:focus-visible {
-    outline: 2px solid var(--st-component-input-focusRing, var(--st-semantic-border-interactive));
-    outline-offset: 2px;
+    outline: var(--st-component-button-anatomy-focus-outline, 2px solid var(--st-semantic-border-interactive));
+    outline-offset: var(--st-component-button-anatomy-focus-offset, 2px);
+    box-shadow: var(--st-component-button-anatomy-focus-boxShadow, none);
   }
 </style>

package/dist/Card.svelte

@@ -21,15 +21,17 @@
 <style>
   .st-card {
     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);
+    border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
+    border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
+    border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
     box-shadow: var(--st-component-card-shadow, 0 1px 2px rgb(15 23 42 / 0.08));
     color: var(--st-semantic-text-primary);
     padding: var(--st-spacing-4, 1rem);
   }
 
   .st-card--interactive {
-    cursor: pointer;
+    cursor: var(--st-cursor-interactive, pointer);
     transition:
       box-shadow var(--st-motion-normal, 180ms) var(--st-motion-easing, ease),
       transform var(--st-motion-normal, 180ms) var(--st-motion-easing, ease);
@@ -37,6 +39,6 @@
 
   .st-card--interactive:hover {
     box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
-    transform: translateY(-1px);
+    transform: var(--st-component-card-anatomy-states-hover-transform, translateY(-1px));
   }
 </style>

package/dist/Checkbox.svelte

@@ -31,6 +31,10 @@
   }
 
   .st-choice__input {
+    /* Thématise la coche native (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/Combobox.svelte

@@ -233,8 +233,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,
@@ -251,11 +255,15 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-combobox {
     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:
@@ -282,7 +290,10 @@
 
   .st-combobox: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-combobox:has([aria-invalid="true"]) {

package/dist/DatePicker.svelte

@@ -419,8 +419,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,
@@ -437,11 +441,15 @@
     color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
   }
 
+  /* Field box = resolved field anatomy (v1.2.0), same as Input. */
   .st-datepicker {
     align-items: stretch;
-    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;
     overflow: hidden;
@@ -469,7 +477,10 @@
 
   .st-datepicker: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-datepicker:has([aria-invalid="true"]) {

package/dist/DonutChart.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" module>
+  export type DonutChartTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type DonutChartDatum = {
+    label: string;
+    value: number;
+    tone?: DonutChartTone;
+  };
+</script>
+
+<script lang="ts">
+  type DonutChartProps = {
+    data: DonutChartDatum[];
+    /** Diamètre du SVG. */
+    size?: number;
+    /** Épaisseur de l'anneau. */
+    thickness?: number;
+    /** Texte au centre (sinon le total). null pour masquer. */
+    centerLabel?: string | null;
+    label: string;
+    class?: string;
+  };
+
+  let {
+    data,
+    size = 220,
+    thickness = 34,
+    centerLabel,
+    label,
+    class: className
+  }: DonutChartProps = $props();
+
+  const TONES: DonutChartTone[] = [
+    "category1", "category2", "category3", "category4",
+    "category5", "category6", "category7", "category8"
+  ];
+
+  let hoveredIndex: number | null = $state(null);
+
+  const slices = $derived.by(() => {
+    const total = data.reduce((sum, d) => sum + Math.max(d.value, 0), 0);
+    if (total <= 0) return { total: 0, items: [] as Array<{ d: DonutChartDatum; path: string; tone: DonutChartTone; pct: number }> };
+    const cx = size / 2;
+    const cy = size / 2;
+    const rOuter = size / 2 - 2;
+    const rInner = Math.max(rOuter - thickness, 1);
+    const TWO_PI = Math.PI * 2;
+    let angle = -Math.PI / 2; // départ en haut
+    const polar = (r: number, a: number): [number, number] => [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+    const items = data.map((d, i) => {
+      const frac = Math.max(d.value, 0) / total;
+      // epsilon pour éviter le cas exact 2π (slice à 100%) non rendu.
+      const span = Math.min(frac * TWO_PI, TWO_PI - 0.0001);
+      const a0 = angle;
+      const a1 = angle + span;
+      angle = a1;
+      const large = span > Math.PI ? 1 : 0;
+      const [x0o, y0o] = polar(rOuter, a0);
+      const [x1o, y1o] = polar(rOuter, a1);
+      const [x1i, y1i] = polar(rInner, a1);
+      const [x0i, y0i] = polar(rInner, a0);
+      const path = `M ${x0o} ${y0o} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1o} ${y1o} L ${x1i} ${y1i} A ${rInner} ${rInner} 0 ${large} 0 ${x0i} ${y0i} Z`;
+      return { d, path, tone: d.tone ?? TONES[i % TONES.length], pct: frac * 100 };
+    });
+    return { total, items };
+  });
+
+  const classes = () => ["st-donutChart", className].filter(Boolean).join(" ");
+  const fmtPct = (p: number) => `${p.toFixed(p < 10 ? 1 : 0)}%`;
+</script>
+
+<div class={classes()} role="img" aria-label={label}>
+  <svg viewBox="0 0 {size} {size}" width="100%" height="100%" focusable="false" aria-hidden="true">
+    {#if slices.total > 0}
+      {#each slices.items as slice, i (slice.d.label)}
+        <path
+          class="st-donutChart__slice st-donutChart__slice--{slice.tone}"
+          class:st-donutChart__slice--dim={hoveredIndex !== null && hoveredIndex !== i}
+          d={slice.path}
+          tabindex="0"
+          role="img"
+          aria-label="{slice.d.label}: {slice.d.value} ({fmtPct(slice.pct)})"
+          onmouseenter={() => (hoveredIndex = i)}
+          onmouseleave={() => (hoveredIndex = null)}
+          onfocus={() => (hoveredIndex = i)}
+          onblur={() => (hoveredIndex = null)}
+        />
+      {/each}
+      {#if centerLabel !== null}
+        <text class="st-donutChart__center" x={size / 2} y={size / 2} text-anchor="middle" dominant-baseline="central">
+          {centerLabel ?? slices.total}
+        </text>
+      {/if}
+    {/if}
+  </svg>
+
+  {#if hoveredIndex !== null && slices.items[hoveredIndex]}
+    {@const s = slices.items[hoveredIndex]}
+    <div class="st-donutChart__tooltip" role="presentation">
+      <span class="st-donutChart__tooltipLabel">{s.d.label}</span>
+      <span class="st-donutChart__tooltipValue">{s.d.value} · {fmtPct(s.pct)}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-donutChart {
+    color: var(--st-semantic-text-secondary);
+    display: block;
+    font-family: inherit;
+    max-width: 100%;
+    position: relative;
+  }
+
+  .st-donutChart svg { display: block; overflow: visible; }
+
+  .st-donutChart__slice {
+    cursor: pointer;
+    stroke: var(--st-semantic-surface-default, #fff);
+    stroke-width: 1.5;
+    transition: opacity 120ms ease;
+  }
+
+  .st-donutChart__slice--dim { opacity: 0.4; }
+
+  .st-donutChart__slice:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive);
+    outline-offset: 1px;
+  }
+
+  .st-donutChart__slice--category1 { fill: var(--st-semantic-data-category1); }
+  .st-donutChart__slice--category2 { fill: var(--st-semantic-data-category2); }
+  .st-donutChart__slice--category3 { fill: var(--st-semantic-data-category3); }
+  .st-donutChart__slice--category4 { fill: var(--st-semantic-data-category4); }
+  .st-donutChart__slice--category5 { fill: var(--st-semantic-data-category5); }
+  .st-donutChart__slice--category6 { fill: var(--st-semantic-data-category6); }
+  .st-donutChart__slice--category7 { fill: var(--st-semantic-data-category7); }
+  .st-donutChart__slice--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-donutChart__center {
+    fill: var(--st-semantic-text-primary);
+    font-size: 1.25rem;
+    font-weight: 650;
+  }
+
+  .st-donutChart__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;
+    left: 50%;
+    line-height: 1.2;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .st-donutChart__tooltipLabel { font-weight: 600; }
+  .st-donutChart__tooltipValue { opacity: 0.85; }
+</style>

package/dist/DonutChart.svelte.d.ts

@@ -0,0 +1,21 @@
+export type DonutChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type DonutChartDatum = {
+    label: string;
+    value: number;
+    tone?: DonutChartTone;
+};
+type DonutChartProps = {
+    data: DonutChartDatum[];
+    /** Diamètre du SVG. */
+    size?: number;
+    /** Épaisseur de l'anneau. */
+    thickness?: number;
+    /** Texte au centre (sinon le total). null pour masquer. */
+    centerLabel?: string | null;
+    label: string;
+    class?: string;
+};
+declare const DonutChart: import("svelte").Component<DonutChartProps, {}, "">;
+type DonutChart = ReturnType<typeof DonutChart>;
+export default DonutChart;
+//# sourceMappingURL=DonutChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DonutChart.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,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiFJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Footer.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type FooterProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Texte de copyright (bas de pied de page). */
+    copyright?: string;
+    /** aria-label de la région contentinfo. */
+    label?: string;
+    class?: string;
+    /** Marque / logo (zone de tête, à gauche). */
+    brand?: Snippet;
+    /** Colonnes de liens (zone de tête). */
+    columns?: Snippet;
+    /** Liens légaux (barre du bas, à droite du copyright). */
+    legal?: Snippet;
+    /** Contenu libre additionnel sous la barre du bas. */
+    children?: Snippet;
+  };
+
+  let {
+    copyright,
+    label = "Pied de page",
+    class: className,
+    brand,
+    columns,
+    legal,
+    children,
+    ...rest
+  }: FooterProps = $props();
+
+  const classes = () => ["st-footer", className].filter(Boolean).join(" ");
+  const hasTop = () => Boolean(brand || columns);
+  const hasBottom = () => Boolean(copyright || legal);
+</script>
+
+<footer {...rest} class={classes()} aria-label={label}>
+  {#if hasTop()}
+    <div class="st-footer__top">
+      {#if brand}
+        <div class="st-footer__brand">{@render brand()}</div>
+      {/if}
+      {#if columns}
+        <div class="st-footer__columns">{@render columns()}</div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if hasBottom()}
+    <div class="st-footer__bottom">
+      {#if copyright}
+        <span class="st-footer__copyright">{copyright}</span>
+      {/if}
+      {#if legal}
+        <nav class="st-footer__legal" aria-label="Liens légaux">
+          {@render legal()}
+        </nav>
+      {/if}
+    </div>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+</footer>
+
+<style>
+  .st-footer {
+    background: var(--st-component-footer-background, var(--st-semantic-surface-subtle));
+    border-top: 1px solid var(--st-component-footer-border, var(--st-semantic-border-subtle));
+    color: var(--st-component-footer-text, var(--st-semantic-text-secondary));
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-4, 1rem);
+    padding: var(--st-spacing-8, 2rem) var(--st-spacing-4, 1rem);
+    width: 100%;
+  }
+
+  .st-footer__top {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-8, 2rem);
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .st-footer__brand {
+    align-items: center;
+    color: var(--st-semantic-text-primary);
+    display: inline-flex;
+    flex: 0 0 auto;
+    gap: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-footer__columns {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-8, 2rem);
+    flex: 1 1 auto;
+    justify-content: flex-end;
+  }
+
+  .st-footer__bottom {
+    align-items: center;
+    border-top: 1px solid var(--st-semantic-border-subtle);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-4, 1rem);
+    justify-content: space-between;
+    padding-top: var(--st-spacing-4, 1rem);
+  }
+
+  .st-footer__copyright {
+    color: var(--st-semantic-text-muted);
+    font-size: 0.8125rem;
+  }
+
+  .st-footer__legal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-4, 1rem);
+    font-size: 0.8125rem;
+  }
+</style>

package/dist/Footer.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type FooterProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Texte de copyright (bas de pied de page). */
+    copyright?: string;
+    /** aria-label de la région contentinfo. */
+    label?: string;
+    class?: string;
+    /** Marque / logo (zone de tête, à gauche). */
+    brand?: Snippet;
+    /** Colonnes de liens (zone de tête). */
+    columns?: Snippet;
+    /** Liens légaux (barre du bas, à droite du copyright). */
+    legal?: Snippet;
+    /** Contenu libre additionnel sous la barre du bas. */
+    children?: Snippet;
+};
+declare const Footer: import("svelte").Component<FooterProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;
+//# sourceMappingURL=Footer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Footer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9D,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwDJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Highlight.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+  export type HighlightTone = "neutral" | "info" | "success" | "warning" | "error";
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type HighlightProps = Omit<HTMLAttributes<HTMLElement>, "class" | "title"> & {
+    /** Tonalité de l'encart (couleur d'accent). */
+    tone?: HighlightTone;
+    /** Titre optionnel de la mise en avant. */
+    title?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    tone = "neutral",
+    title,
+    class: className,
+    children,
+    ...rest
+  }: HighlightProps = $props();
+
+  const classes = () => ["st-highlight", `st-highlight--${tone}`, className].filter(Boolean).join(" ");
+</script>
+
+<aside {...rest} class={classes()}>
+  {#if title}<p class="st-highlight__title">{title}</p>{/if}
+  {#if children}<div class="st-highlight__body">{@render children()}</div>{/if}
+</aside>
+
+<style>
+  /* Mise en avant / encart éditorial (DSFR "Mise en avant"). */
+  .st-highlight {
+    --st-highlight-accent: var(--st-semantic-action-primary);
+    background: var(--st-semantic-surface-subtle);
+    border-left: 4px solid var(--st-highlight-accent);
+    border-radius: var(--st-radius-md, 0.375rem);
+    color: var(--st-semantic-text-primary);
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-highlight--info { --st-highlight-accent: var(--st-semantic-feedback-info); }
+  .st-highlight--success { --st-highlight-accent: var(--st-semantic-feedback-success); }
+  .st-highlight--warning { --st-highlight-accent: var(--st-semantic-feedback-warning); }
+  .st-highlight--error { --st-highlight-accent: var(--st-semantic-feedback-error); }
+
+  .st-highlight__title {
+    font-size: 0.9375rem;
+    font-weight: 650;
+    margin: 0 0 var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-highlight__body {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.9375rem;
+    line-height: 1.55;
+  }
+
+  .st-highlight__body :global(p) { margin: 0; }
+</style>