@sentropic/design-system-svelte 0.10.2 → 0.10.4

package/dist/ScatterPlot.svelte

@@ -12,6 +12,8 @@
 </script>
 
 <script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
   type ScatterPlotProps = {
     data: ScatterPlotDatum[];
     width?: number;
@@ -95,51 +97,69 @@
     }));
   });
 
+  const dataValueItems = $derived(
+    data.map((d) => (d.label ? `${d.label}: x ${d.x}, y ${d.y}` : `x ${d.x}, y ${d.y}`))
+  );
+
+  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-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>
+<div class={classes()}>
+  <div
+    class="st-scatterPlot__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <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}
+          data-chart-index={i}
+        />
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
 
   {#if hoveredIndex !== null && points[hoveredIndex]}
     {@const p = points[hoveredIndex]}
@@ -152,14 +172,13 @@
 
 <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 svg, .st-scatterPlot__visual { 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:hover { fill-opacity: 1; }
   .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); }

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

@@ -1 +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"}
+{"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;AAMF,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;AAgJJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Search.svelte

@@ -121,14 +121,17 @@
        the Input field box); bottom corners keep the field shape radius. */
     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));
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     display: inline-flex;
     /* P-D: field-box padding + input typography per theme. Default = the prior
        render (0 padding on the wrapper, inherited 16px / `normal` typography);
        DSFR pads 8/16px, Carbon 0/40px to match the measured reference input. */
-    padding: var(--st-component-search-paddingBlock, 0) var(--st-component-search-paddingInline, 0);
+    padding: var(--st-component-search-paddingBlock, 0)
+      var(--st-component-search-paddingRight, var(--st-component-search-paddingInline, 0))
+      var(--st-component-search-paddingBlock, 0)
+      var(--st-component-search-paddingLeft, var(--st-component-search-paddingInline, 0));
     font-size: var(--st-component-search-fontSize, 1rem);
     line-height: var(--st-component-search-lineHeight, normal);
     letter-spacing: var(--st-component-search-letterSpacing, normal);

package/dist/Select.svelte

@@ -109,8 +109,8 @@
        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);
+    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));
     box-shadow: var(--st-component-control-anatomy-field-underline, none);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     font-family: var(--st-component-control-anatomy-typography-family, inherit);
@@ -136,6 +136,12 @@
     width: 100%;
   }
 
+  .st-select:hover {
+    background:
+      var(--st-component-control-anatomy-field-selectChevron, none),
+      var(--st-component-control-hoverBackground, var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default))));
+  }
+
   .st-select--sm {
     min-height: var(--st-component-control-smHeight, 2rem);
   }

package/dist/SideNav.svelte

@@ -55,6 +55,12 @@
     text-decoration: none;
   }
 
+  .st-sidenav a:hover:not(:focus-visible):not(.st-sidenav__link--active),
+  .st-sidenav a:focus-visible:not(.st-sidenav__link--active) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+    outline: none;
+  }
+
   .st-sidenav__link--active {
     background: var(--st-component-sideNav-activeBackground, var(--st-semantic-surface-subtle));
     color: var(--st-component-sideNav-activeText, var(--st-semantic-text-primary));

package/dist/StackedBarChart.svelte

@@ -16,6 +16,8 @@
 </script>
 
 <script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
   type StackedBarChartProps = {
     data: StackedBarDatum[];
     width?: number;
@@ -98,38 +100,58 @@
     });
   });
 
+  const dataValueItems = $derived(
+    data.flatMap((bar) => bar.segments.map((seg) => `${bar.label}, ${seg.label}: ${seg.value}`))
+  );
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hovered = null;
+      return;
+    }
+    const bar = Number(target.getAttribute("data-bar-index"));
+    const seg = Number(target.getAttribute("data-segment-index"));
+    hovered = Number.isInteger(bar) && Number.isInteger(seg) ? { bar, seg } : null;
+  }
+
   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)}
-        />
+<div class={classes()}>
+  <div
+    class="st-stackedBar__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hovered = null)}
+  >
+    <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}
-    {/each}
-  </svg>
+
+      <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}
+            data-bar-index={bi}
+            data-segment-index={si}
+          />
+        {/each}
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
 
   {#if hovered && bars[hovered.bar]?.segs[hovered.seg]}
     {@const s = bars[hovered.bar].segs[hovered.seg]}
@@ -153,13 +175,12 @@
 
 <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 svg, .st-stackedBar__visual { 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); }

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

@@ -1 +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"}
+{"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;AAMF,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;AAiJJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/StreamingMessage.svelte

@@ -200,7 +200,7 @@
               {#each toolCalls() as toolCall}
                 <li>
                   <span>{toolCall.toolName}</span>
-                  <span> — {toolCall.status}</span>
+                  <span>: {toolCall.status}</span>
                 </li>
               {/each}
             </ul>
@@ -245,7 +245,7 @@
 </ChatMessage>
 
 <style>
-  .st-streamingMessage {
+  :global(.st-streamingMessage) {
     position: relative;
   }
 

package/dist/Switch.svelte

@@ -66,6 +66,10 @@
     background: var(--st-component-selection-switchTrackChecked, var(--st-semantic-action-primary));
   }
 
+  .st-switch__input:not(:disabled):not(:checked):hover + .st-switch__track {
+    background: var(--st-component-control-hoverBackground, var(--st-component-selection-switchTrack));
+  }
+
   .st-switch__input:checked + .st-switch__track .st-switch__thumb {
     transform: translateX(calc(var(--st-component-selection-toggleTrackWidth, 2.25rem) - var(--st-component-selection-toggleThumbSize, 1rem) - 2 * var(--st-component-selection-toggleTrackPadding, 0.125rem)));
   }

package/dist/Table.svelte

@@ -87,7 +87,10 @@
   }
 
   .st-table tbody tr:hover {
-    background: var(--st-component-dataTable-rowHoverBackground, var(--st-semantic-surface-subtle));
+    background: var(
+      --st-component-control-hoverBackground,
+      var(--st-component-dataTable-rowHoverBackground, var(--st-semantic-surface-subtle))
+    );
   }
 
   .st-table tbody tr:last-child td {

package/dist/TableOfContents.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export interface TableOfContentsItem {
+    id: string;
+    label: string;
+    level?: number;
+  }
+
+  type TableOfContentsProps = Omit<HTMLAttributes<HTMLElement>, "class" | "items"> & {
+    title?: string;
+    items: TableOfContentsItem[];
+    activeId?: string;
+    class?: string;
+  };
+
+  const normalizeItemId = (value: string) => value.replace(/^#/, "");
+
+  let {
+    title,
+    items,
+    activeId = "",
+    class: className,
+    ...rest
+  }: TableOfContentsProps = $props();
+
+  const normalizedActive = () => normalizeItemId(activeId);
+  const normalizedItems = () =>
+    items.map((item) => ({
+      ...item,
+      id: normalizeItemId(item.id),
+      level: Math.max(item.level ?? 1, 1)
+    }));
+
+  const classes = () => ["st-tableOfContents", className].filter(Boolean).join(" ");
+</script>
+
+<nav {...rest} class={classes()} aria-label={title ?? "Table des matières"}>
+  {#if title}
+    <p class="st-tableOfContents__title">{title}</p>
+  {/if}
+  <ol class="st-tableOfContents__list">
+    {#each normalizedItems() as item (item.id)}
+      {@const isActive = item.id === normalizedActive()}
+      <li
+        class="st-tableOfContents__item"
+        style={`--st-tableOfContents-level:${item.level - 1}`}
+      >
+        <a
+          class="st-tableOfContents__link"
+          href={`#${item.id}`}
+          aria-current={isActive ? "location" : undefined}
+        >
+          {item.label}
+        </a>
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .st-tableOfContents {
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: 0.5rem;
+    padding: 0.75rem 0.875rem;
+  }
+
+  .st-tableOfContents__title {
+    color: var(--st-semantic-text-primary);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+  }
+
+  .st-tableOfContents__list {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+  }
+
+  .st-tableOfContents__item {
+    padding-inline-start: calc(var(--st-tableOfContents-level) * var(--st-spacing-4, 1rem));
+  }
+
+  .st-tableOfContents__item + .st-tableOfContents__item {
+    margin-top: 0.125rem;
+  }
+
+  .st-tableOfContents__link {
+    color: var(--st-semantic-text-secondary);
+    display: inline-block;
+    padding: 0.25rem 0;
+    text-decoration: none;
+  }
+
+  .st-tableOfContents__link:hover,
+  .st-tableOfContents__link:focus-visible {
+    color: var(--st-semantic-text-primary);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
+  .st-tableOfContents__link[aria-current="location"] {
+    color: var(--st-semantic-text-primary);
+    font-weight: 600;
+  }
+</style>

package/dist/TableOfContents.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface TableOfContentsItem {
+    id: string;
+    label: string;
+    level?: number;
+}
+type TableOfContentsProps = Omit<HTMLAttributes<HTMLElement>, "class" | "items"> & {
+    title?: string;
+    items: TableOfContentsItem[];
+    activeId?: string;
+    class?: string;
+};
+declare const TableOfContents: import("svelte").Component<TableOfContentsProps, {}, "">;
+type TableOfContents = ReturnType<typeof TableOfContents>;
+export default TableOfContents;
+//# sourceMappingURL=TableOfContents.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TableOfContents.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+CJ,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/Tag.svelte

@@ -135,7 +135,7 @@
   }
 
   .st-tag__dismiss:hover:not(:disabled) {
-    background: color-mix(in srgb, currentColor 18%, transparent);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   .st-tag__dismiss:focus-visible {

package/dist/Textarea.svelte

@@ -93,8 +93,8 @@
        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);
+    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));
     box-shadow: var(--st-component-control-anatomy-field-underline, none);
     color: var(--st-component-control-text, var(--st-semantic-text-primary));
     font-family: var(--st-component-control-anatomy-typography-family, inherit);
@@ -117,6 +117,7 @@
   }
 
   .st-textarea: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/Tile.svelte

@@ -115,6 +115,10 @@
 
   .st-tile--clickable:hover:not(.st-tile--disabled),
   .st-tile--selectable:hover:not(.st-tile--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/TileGroup.svelte

@@ -134,6 +134,10 @@
   }
 
   .st-tileGroup__tile:hover:not(.st-tileGroup__tile--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/Toggle.svelte

@@ -106,6 +106,10 @@
     background: var(--st-component-selection-switchTrackChecked, var(--st-semantic-action-primary));
   }
 
+  .st-toggle__input:not(:disabled):not(:checked):hover + .st-toggle__track {
+    background: var(--st-component-control-hoverBackground, var(--st-component-selection-switchTrack));
+  }
+
   .st-toggle__input:checked + .st-toggle__track .st-toggle__thumb {
     transform: translateX(calc(var(--st-toggle-trackWidth, 2.25rem) - var(--st-toggle-thumbSize, 1rem) - 2 * var(--st-component-selection-toggleTrackPadding, 0.125rem)));
   }

package/dist/Toggletip.svelte

@@ -90,7 +90,7 @@
   }
 
   .st-toggletip__trigger:hover {
-    background: var(--st-semantic-border-strong);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   /* Focus = stratégie d'anatomie partagée (outline DSFR / inset Carbon / ring base). */