@sentropic/design-system-svelte 0.10.3 → 0.10.5

package/dist/ForceGraph.svelte.d.ts

@@ -1,4 +1,7 @@
 export type ForceGraphTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type ForceGraphNodeShape = "dot" | "circle" | "diamond" | "star" | "hexagon" | "box" | "square" | "roundedbox" | "triangle";
+/** Stroke dash style for typed edges. */
+export type ForceGraphEdgeDash = "solid" | "dashed" | "dotted" | "long-dash";
 export type ForceGraphNode = {
     /** Stable identifier; referenced by edges. */
     id: string;
@@ -16,6 +19,11 @@ export type ForceGraphNode = {
     /** Pin the node to a fixed position (ignored by the simulation). */
     fx?: number;
     fy?: number;
+    /**
+     * Visual shape for the node. Defaults to 'dot' (circle).
+     * Supported: 'dot'|'circle', 'diamond', 'star', 'hexagon', 'box'|'square', 'triangle'.
+     */
+    shape?: ForceGraphNodeShape;
 };
 export type ForceGraphEdge = {
     /** Source node id. */
@@ -27,9 +35,44 @@ export type ForceGraphEdge = {
     /**
      * When true the link renders as a dashed/faded "weak" link. Lets callers
      * map a confidence dimension onto link strength without extra props.
+     * Equivalent to `dash: "dashed"` plus a faded stroke (kept for back-compat).
      */
     weak?: boolean;
+    /**
+     * Typed dash pattern for the stroke. Independent of `weak`.
+     * "solid" = none, "dashed" = "6 4", "dotted" = "1 4", "long-dash" = "12 6".
+     * When omitted, falls back to the `weak` styling.
+     */
+    dash?: ForceGraphEdgeDash;
+    /**
+     * Emphasise the edge (e.g. a reconciliation/match relation) with a thicker,
+     * fully-opaque stroke. Defaults to false.
+     */
+    emphasis?: boolean;
+    /** Explicit stroke width override in px. Takes precedence over `emphasis`. */
+    width?: number;
 };
+export type ForceGraphLegendEntry = {
+    /** Label shown in the legend. */
+    label: string;
+    /** Shape for this entry (node legend). Absent = line-style legend entry. */
+    shape?: ForceGraphNodeShape;
+    /** Tone for this entry. Defaults to category1. */
+    tone?: ForceGraphTone;
+    /** When true, renders as a dashed line (edge legend). */
+    weak?: boolean;
+    /**
+     * Typed dash pattern for an edge legend swatch. Independent of `weak`.
+     * When set, the swatch line uses the matching dash-array.
+     */
+    dash?: ForceGraphEdgeDash;
+};
+/**
+ * Maps a dash style (or the legacy `weak` flag) to an SVG stroke-dasharray.
+ * Returns null for a solid stroke.
+ */
+export declare function edgeDashArray(dash: ForceGraphEdgeDash | undefined, weak?: boolean): string | null;
+export declare function nodeShapePath(shape: ForceGraphNodeShape | undefined, r: number): string | null;
 type ForceGraphProps = {
     nodes: ForceGraphNode[];
     edges: ForceGraphEdge[];
@@ -67,6 +110,22 @@ type ForceGraphProps = {
      * Fires with the node's stable id.
      */
     onOpenEntity?: (id: string) => void;
+    /**
+     * Called when the user hovers an edge.
+     * Fires with the edge object (source/target/relation/weak).
+     */
+    onEdgeHover?: (edge: ForceGraphEdge) => void;
+    /**
+     * Legend entries rendered as a corner overlay.
+     * Each entry has a label + optional shape (node) or weak (edge).
+     */
+    legend?: ForceGraphLegendEntry[];
+    /**
+     * Edge curvature, 0..1. 0 = straight <line> (back-compat). Larger values
+     * bow each edge into a quadratic <path>, offset perpendicular to the chord
+     * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
+     */
+    edgeCurve?: number;
     class?: string;
 };
 declare const ForceGraph: import("svelte").Component<ForceGraphProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.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,cAAc,GAAG;IAC3B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuRJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"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"}

package/dist/GraphLegend.svelte

@@ -0,0 +1,143 @@
+<script lang="ts" module>
+  // Re-export types so GraphLegend can be used standalone without importing from ForceGraph.
+  export type { ForceGraphLegendEntry, ForceGraphNodeShape, ForceGraphTone, ForceGraphEdgeDash } from "./ForceGraph.svelte";
+</script>
+
+<script lang="ts">
+  import { nodeShapePath, edgeDashArray } from "./ForceGraph.svelte";
+  import type { ForceGraphLegendEntry } from "./ForceGraph.svelte";
+
+  type GraphLegendProps = {
+    entries: ForceGraphLegendEntry[];
+    /** Optional heading shown above entries. */
+    title?: string;
+    class?: string;
+  };
+
+  let { entries, title, class: className }: GraphLegendProps = $props();
+
+  const classes = () =>
+    ["st-graphLegend", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()} aria-label={title ?? "Graph legend"}>
+  {#if title}
+    <p class="st-graphLegend__title">{title}</p>
+  {/if}
+  <ul class="st-graphLegend__list" role="list">
+    {#each entries as entry}
+      {@const swatchPath = entry.shape !== undefined ? nodeShapePath(entry.shape, 7) : null}
+      {@const swatchTone = entry.tone ?? "category1"}
+      {@const swatchDash = entry.shape === undefined ? edgeDashArray(entry.dash, entry.weak) : null}
+      <li class="st-graphLegend__entry">
+        {#if entry.shape !== undefined}
+          <svg
+            class="st-graphLegend__swatch"
+            viewBox="-13 -13 26 26"
+            width="16"
+            height="16"
+            aria-hidden="true"
+          >
+            {#if swatchPath}
+              <path
+                d={swatchPath}
+                class="st-graphLegend__shape st-graphLegend__shape--{swatchTone}"
+              />
+            {:else}
+              <circle
+                r="7"
+                class="st-graphLegend__shape st-graphLegend__shape--{swatchTone}"
+              />
+            {/if}
+          </svg>
+        {:else}
+          <svg
+            class="st-graphLegend__swatch"
+            viewBox="0 0 16 8"
+            width="16"
+            height="8"
+            aria-hidden="true"
+          >
+            <line
+              x1="0"
+              y1="4"
+              x2="16"
+              y2="4"
+              class="st-graphLegend__edge"
+              class:st-graphLegend__edge--weak={entry.weak}
+              stroke-dasharray={swatchDash}
+            />
+          </svg>
+        {/if}
+        <span class="st-graphLegend__label">{entry.label}</span>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .st-graphLegend {
+    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.45));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse, #fff);
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 0.6875rem;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem;
+  }
+
+  .st-graphLegend__title {
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    margin: 0 0 0.125rem;
+    opacity: 0.75;
+    text-transform: uppercase;
+  }
+
+  .st-graphLegend__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-graphLegend__entry {
+    align-items: center;
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .st-graphLegend__swatch { flex-shrink: 0; }
+
+  .st-graphLegend__label { white-space: nowrap; }
+
+  .st-graphLegend__shape {
+    fill-opacity: 0.9;
+    stroke: var(--st-semantic-surface-default, #fff);
+    stroke-width: 1;
+  }
+
+  .st-graphLegend__shape--category1 { fill: var(--st-semantic-data-category1); }
+  .st-graphLegend__shape--category2 { fill: var(--st-semantic-data-category2); }
+  .st-graphLegend__shape--category3 { fill: var(--st-semantic-data-category3); }
+  .st-graphLegend__shape--category4 { fill: var(--st-semantic-data-category4); }
+  .st-graphLegend__shape--category5 { fill: var(--st-semantic-data-category5); }
+  .st-graphLegend__shape--category6 { fill: var(--st-semantic-data-category6); }
+  .st-graphLegend__shape--category7 { fill: var(--st-semantic-data-category7); }
+  .st-graphLegend__shape--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-graphLegend__edge {
+    stroke: var(--st-semantic-border-strong, #888);
+    stroke-width: 1.5;
+    opacity: 0.8;
+  }
+
+  .st-graphLegend__edge--weak {
+    stroke: var(--st-semantic-border-subtle, #aaa);
+    opacity: 0.65;
+  }
+</style>

package/dist/GraphLegend.svelte.d.ts

@@ -0,0 +1,12 @@
+export type { ForceGraphLegendEntry, ForceGraphNodeShape, ForceGraphTone, ForceGraphEdgeDash } from "./ForceGraph.svelte";
+import type { ForceGraphLegendEntry } from "./ForceGraph.svelte";
+type GraphLegendProps = {
+    entries: ForceGraphLegendEntry[];
+    /** Optional heading shown above entries. */
+    title?: string;
+    class?: string;
+};
+declare const GraphLegend: import("svelte").Component<GraphLegendProps, {}, "">;
+type GraphLegend = ReturnType<typeof GraphLegend>;
+export default GraphLegend;
+//# sourceMappingURL=GraphLegend.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GraphLegend.svelte.d.ts","sourceRoot":"","sources":["../src/lib/GraphLegend.svelte.ts"],"names":[],"mappings":"AAIE,YAAY,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAI5H,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+CJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Header.svelte

@@ -256,6 +256,7 @@
 
   .st-header__account-trigger:hover,
   .st-header__account-trigger:focus-visible {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     border-color: var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
     outline: none;
   }
@@ -350,7 +351,7 @@
 
   .st-header__signin:hover,
   .st-header__signin:focus-visible {
-    background: var(--st-semantic-surface-subtle, #f1f5f9);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     outline: none;
   }
 </style>

package/dist/IconButton.svelte

@@ -83,7 +83,7 @@
   }
 
   .st-iconButton:hover:not(:disabled) {
-    background: var(--st-component-iconButton-hoverBackground, var(--st-semantic-surface-subtle));
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   .st-iconButton--secondary:hover:not(:disabled) {

package/dist/InlineLoading.svelte

@@ -8,10 +8,18 @@
     class?: string;
   };
 
+  const FALLBACK_LABELS = {
+    active: "Loading",
+    success: "Completed",
+    error: "Error",
+    inactive: "Inactive"
+  } as const;
+
   let {
     label,
     status = "active",
     class: className,
+    "aria-label": ariaLabel,
     ...rest
   }: InlineLoadingProps = $props();
 
@@ -19,9 +27,10 @@
     ["st-inlineLoading", `st-inlineLoading--${status}`, className].filter(Boolean).join(" ");
 
   const role = () => (status === "error" ? "alert" : "status");
+  const accessibleLabel = () => ariaLabel ?? (label ? undefined : FALLBACK_LABELS[status]);
 </script>
 
-<div {...rest} class={classes()} role={role()} aria-live="polite">
+<div {...rest} class={classes()} role={role()} aria-label={accessibleLabel()} aria-live="polite">
   <span class="st-inlineLoading__icon" aria-hidden="true">
     {#if status === "active"}
       <span class="st-inlineLoading__spinner">

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

@@ -1 +1 @@
-{"version":3,"file":"InlineLoading.svelte.d.ts","sourceRoot":"","sources":["../src/lib/InlineLoading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsCJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InlineLoading.svelte.d.ts","sourceRoot":"","sources":["../src/lib/InlineLoading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+CJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/Input.svelte

@@ -96,8 +96,8 @@
        corners → the base Sent Tech field stays a uniform rounded box. */
     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);
+    border-bottom-right-radius: var(--st-component-control-anatomy-field-radiusBottom, var(--st-component-control-anatomy-shape-radius, 0.375rem));
+    border-bottom-left-radius: var(--st-component-control-anatomy-field-radiusBottom, var(--st-component-control-anatomy-shape-radius, 0.375rem));
     /* Bottom rule as a box-shadow inset (anatomy v1.3.0, real DSFR/Carbon
        technique) instead of a border-bottom — keeps the box height honest.
        Fallback = none → the base boxed field draws its rule via the 4 borders. */
@@ -136,6 +136,7 @@
   }
 
   .st-control:hover:not(:disabled) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
   }
 

package/dist/LanguageSelector.svelte

@@ -104,6 +104,7 @@
   }
 
   .st-languageSelector__trigger:hover:not(:disabled) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
   }
 
@@ -164,7 +165,7 @@
   }
 
   .st-languageSelector__option:hover {
-    background: var(--st-semantic-surface-subtle);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     color: var(--st-semantic-text-primary);
   }
 

package/dist/LineChart.svelte

@@ -16,6 +16,8 @@
 </script>
 
 <script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
   type LineChartProps = {
     data: LineChartDatum[];
     width?: number;
@@ -128,6 +130,8 @@
     });
   });
 
+  const dataValueItems = $derived(data.map((d) => `${d.x}: ${d.y}`));
+
   function buildLinearPath(pts: { x: number; y: number }[]): string {
     return pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ");
   }
@@ -190,26 +194,39 @@
     return entries;
   });
 
-  function handleEnter(i: number) {
-    hoveredIndex = i;
-  }
   function handleLeave() {
     hoveredIndex = null;
   }
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
 
   const classes = () =>
     ["st-lineChart", `st-lineChart--${tone}`, 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"
+<div class={classes()}>
+  <div
+    class="st-lineChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={handleLeave}
   >
+    <svg
+      viewBox="0 0 {width} {height}"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      focusable="false"
+      aria-hidden="true"
+    >
     <!-- gridlines + Y axis ticks -->
     {#each gridLines as g (g.value)}
       <line
@@ -278,16 +295,13 @@
         cx={p.x}
         cy={p.y}
         r="4"
-        tabindex="0"
-        role="img"
-        aria-label="{p.datum.x}: {p.datum.y}"
-        onmouseenter={() => handleEnter(p.index)}
-        onmouseleave={handleLeave}
-        onfocus={() => handleEnter(p.index)}
-        onblur={handleLeave}
+        data-chart-index={p.index}
       />
     {/each}
-  </svg>
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
 
   {#if hoveredIndex !== null && points[hoveredIndex]}
     {@const p = points[hoveredIndex]}
@@ -325,6 +339,10 @@
     overflow: visible;
   }
 
+  .st-lineChart__visual {
+    display: block;
+  }
+
   .st-lineChart__grid {
     stroke: var(--st-component-lineChart-gridStroke, var(--st-semantic-border-subtle));
     stroke-dasharray: 2 3;
@@ -360,16 +378,10 @@
     transition: r 120ms ease;
   }
 
-  .st-lineChart__dot:hover,
-  .st-lineChart__dot:focus-visible {
+  .st-lineChart__dot:hover {
     r: 5.5;
   }
 
-  .st-lineChart__dot:focus-visible {
-    outline: 2px solid var(--st-semantic-border-interactive);
-    outline-offset: 1px;
-  }
-
   .st-lineChart__tooltip {
     background: var(--st-component-lineChart-tooltipBackground, var(--st-semantic-surface-inverse));
     border-radius: var(--st-radius-sm, 0.25rem);

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LineChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkOJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LineChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LineChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAMF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+OJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Link.svelte

@@ -67,6 +67,9 @@
     text-decoration: var(--st-component-link-anatomy-typography-textDecoration, underline);
     text-decoration-thickness: var(--st-component-link-anatomy-typography-decorationThickness, auto);
     text-underline-offset: var(--st-component-link-anatomy-typography-decorationOffset, 0.18em);
+    transition-property: color, text-decoration-thickness, text-underline-offset;
+    transition-duration: var(--st-motion-normal, 180ms);
+    transition-timing-function: var(--st-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
   }
 
   .st-link--standalone {
@@ -83,8 +86,11 @@
     color: var(--st-component-link-anatomy-states-hover-text, var(--st-component-link-hoverText, var(--st-semantic-action-primary)));
     /* Anatomy v1.1.0: hover decoration sourced from states.hover.decoration
        (= link typography textDecorationHover). Carbon: none → underline; DSFR/base:
-       underline → underline (no-op). The DSFR animated underline stays an escape. */
+       underline → underline (no-op). The DSFR animated underline now
+       transitions thickness/offset via anatomy-hover vars when provided. */
     text-decoration-line: var(--st-component-link-anatomy-states-hover-decoration, underline);
+    text-decoration-thickness: var(--st-component-link-anatomy-typography-decorationThicknessHover, var(--st-component-link-anatomy-typography-decorationThickness, auto));
+    text-underline-offset: var(--st-component-link-anatomy-typography-decorationOffsetHover, var(--st-component-link-anatomy-typography-decorationOffset, 0.18em));
   }
 
   /* Focus = shared mixin. --st-radius-* fixed to the valid `sm` token (was the

package/dist/MediaContent.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type MediaKind = "image" | "video";
+
+  type MediaContentProps = Omit<HTMLAttributes<HTMLElement>, "children" | "class"> & {
+    title?: string;
+    caption?: string;
+    byline?: string;
+    media?: string;
+    mediaAlt?: string;
+    mediaKind?: MediaKind;
+    mediaControls?: boolean;
+    aspectRatio?: string;
+    mediaCaptions?: string;
+    mediaCaptionsLabel?: string;
+    mediaCaptionsLang?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    title,
+    caption,
+    byline,
+    media,
+    mediaAlt = "",
+    mediaKind = "image",
+    mediaControls = true,
+    aspectRatio = "16/9",
+    mediaCaptions,
+    mediaCaptionsLabel = "Français",
+    mediaCaptionsLang = "fr",
+    class: className,
+    children,
+    ...rest
+  }: MediaContentProps = $props();
+
+  const defaultCaptions = "data:text/vtt,WEBVTT";
+
+  const hasMedia = () => Boolean(media?.trim());
+  const classes = () => ["st-mediaContent", className].filter(Boolean).join(" ");
+</script>
+
+<figure class={classes()} {...rest}>
+  <div class="st-mediaContent__media" style={`--st-mediaContent-ratio:${aspectRatio}`}>
+    {#if hasMedia()}
+      {#if mediaKind === "video"}
+        <video controls={mediaControls} src={media} aria-label={title || "Contenu média"} preload="metadata">
+          <track
+            kind="captions"
+            src={mediaCaptions ?? defaultCaptions}
+            srclang={mediaCaptionsLang}
+            label={mediaCaptionsLabel}
+            default
+          />
+        </video>
+      {:else}
+        <img src={media} alt={mediaAlt} loading="lazy" decoding="async" />
+      {/if}
+    {:else}
+      {@render children?.()}
+    {/if}
+  </div>
+
+  {#if title || caption || byline}
+    <figcaption class="st-mediaContent__caption">
+      {#if title}
+        <p class="st-mediaContent__title">{title}</p>
+      {/if}
+      {#if caption}
+        <p>{caption}</p>
+      {/if}
+      {#if byline}
+        <p class="st-mediaContent__byline">{byline}</p>
+      {/if}
+    </figcaption>
+  {/if}
+</figure>
+
+<style>
+  .st-mediaContent {
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: 0.5rem;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  .st-mediaContent__media {
+    aspect-ratio: var(--st-mediaContent-ratio);
+    background: var(--st-semantic-surface-subtle);
+    overflow: hidden;
+  }
+
+  .st-mediaContent__media > :global(img),
+  .st-mediaContent__media > :global(video) {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .st-mediaContent__caption {
+    background: var(--st-semantic-surface-primary);
+    color: var(--st-semantic-text-primary);
+    font-size: 0.875rem;
+    padding: 0.6rem 0.75rem;
+  }
+
+  .st-mediaContent__title {
+    color: var(--st-semantic-text-primary);
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .st-mediaContent__caption p {
+    margin: 0.25rem 0 0;
+  }
+
+  .st-mediaContent__byline {
+    color: var(--st-semantic-text-secondary);
+  }
+</style>

package/dist/MediaContent.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type MediaKind = "image" | "video";
+type MediaContentProps = Omit<HTMLAttributes<HTMLElement>, "children" | "class"> & {
+    title?: string;
+    caption?: string;
+    byline?: string;
+    media?: string;
+    mediaAlt?: string;
+    mediaKind?: MediaKind;
+    mediaControls?: boolean;
+    aspectRatio?: string;
+    mediaCaptions?: string;
+    mediaCaptionsLabel?: string;
+    mediaCaptionsLang?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const MediaContent: import("svelte").Component<MediaContentProps, {}, "">;
+type MediaContent = ReturnType<typeof MediaContent>;
+export default MediaContent;
+//# sourceMappingURL=MediaContent.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContent.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MediaContent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEnC,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAgEJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}