@sentropic/design-system-svelte 0.10.3 → 0.10.4

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). */

package/dist/Transcription.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type TranscriptionSegment = {
+    speaker?: string;
+    startTime?: string;
+    endTime?: string;
+    text: string;
+  };
+
+  type TranscriptionProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    title?: string;
+    segments?: TranscriptionSegment[];
+    text?: string;
+    class?: string;
+    open?: boolean;
+    showTimestamps?: boolean;
+  };
+
+  let {
+    title = "Transcription",
+    segments,
+    text,
+    open = false,
+    showTimestamps = true,
+    class: className,
+    ...rest
+  }: TranscriptionProps = $props();
+
+  const resolvedSegments = $derived((segments ?? []).filter((segment) => Boolean(segment.text?.trim())));
+  const hasSegments = $derived(resolvedSegments.length > 0);
+  const hasText = $derived(Boolean(text && text.trim().length));
+
+  const formatInterval = (segment: TranscriptionSegment) => {
+    if (!showTimestamps || (!segment.startTime && !segment.endTime)) return "";
+    if (!segment.startTime) return segment.endTime ? `- ${segment.endTime}` : "";
+    if (!segment.endTime) return `${segment.startTime} -`;
+    return `${segment.startTime} - ${segment.endTime}`;
+  };
+
+  const classes = () => ["st-transcription", className].filter(Boolean).join(" ");
+</script>
+
+<details {open} class={classes()} {...rest}>
+  <summary>{title}</summary>
+
+  <div class="st-transcription__content">
+    {#if hasSegments}
+      <ol class="st-transcription__list">
+        {#each resolvedSegments as segment, index (index)}
+          <li class="st-transcription__item">
+            <p class="st-transcription__meta">
+              {#if segment.speaker}
+                <span class="st-transcription__speaker">{segment.speaker}</span>
+              {/if}
+              {#if segment.speaker && formatInterval(segment)}
+                <span aria-hidden="true">&nbsp;•&nbsp;</span>
+              {/if}
+              {#if formatInterval(segment)}
+                <time>
+                  <span class="st-transcription__sr-only">Horodatage {formatInterval(segment)}</span>
+                  <span aria-hidden="true">{formatInterval(segment)}</span>
+                </time>
+              {/if}
+            </p>
+            <p class="st-transcription__text">{segment.text}</p>
+          </li>
+        {/each}
+      </ol>
+    {:else if hasText}
+      <p class="st-transcription__text">{text}</p>
+    {:else}
+      <p class="st-transcription__text">Aucun contenu de transcription fourni.</p>
+    {/if}
+  </div>
+</details>
+
+<style>
+  .st-transcription {
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+  }
+
+  .st-transcription summary {
+    color: var(--st-semantic-text-primary);
+    cursor: var(--st-cursor-interactive, pointer);
+    font-weight: 600;
+    list-style: none;
+  }
+
+  .st-transcription summary::marker {
+    color: var(--st-semantic-text-secondary);
+  }
+
+  .st-transcription__content {
+    margin-top: 0.75rem;
+  }
+
+  .st-transcription__list {
+    margin: 0;
+    padding-left: 1rem;
+  }
+
+  .st-transcription__item + .st-transcription__item {
+    margin-top: 0.625rem;
+  }
+
+  .st-transcription__meta {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    margin: 0;
+  }
+
+  .st-transcription__speaker {
+    font-weight: 600;
+  }
+
+  .st-transcription__text {
+    color: var(--st-semantic-text-primary);
+    margin: 0.2rem 0 0;
+  }
+
+  .st-transcription__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/dist/Transcription.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "svelte/elements";
+export type TranscriptionSegment = {
+    speaker?: string;
+    startTime?: string;
+    endTime?: string;
+    text: string;
+};
+type TranscriptionProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    title?: string;
+    segments?: TranscriptionSegment[];
+    text?: string;
+    class?: string;
+    open?: boolean;
+    showTimestamps?: boolean;
+};
+declare const Transcription: import("svelte").Component<TranscriptionProps, {}, "">;
+type Transcription = ReturnType<typeof Transcription>;
+export default Transcription;
+//# sourceMappingURL=Transcription.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Transcription.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Transcription.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAoEJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/TreeView.svelte

@@ -164,7 +164,7 @@
   }
 
   .st-treeView__row:hover:not(.st-treeView__row--disabled) {
-    background: var(--st-semantic-surface-subtle);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
   }
 
   .st-treeView__row:focus-visible {
@@ -173,7 +173,7 @@
   }
 
   .st-treeView__row--selected {
-    background: var(--st-semantic-surface-subtle);
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     color: var(--st-semantic-action-primary);
     font-weight: 600;
   }

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { default as AreaChart } from "./AreaChart.svelte";
 export { default as AspectRatio } from "./AspectRatio.svelte";
 export { default as Badge } from "./Badge.svelte";
 export { default as BarChart } from "./BarChart.svelte";
+export { default as BackToTop } from "./BackToTop.svelte";
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
 export { default as Button } from "./Button.svelte";
 export { default as Card } from "./Card.svelte";
@@ -27,10 +28,14 @@ export { default as EmptyState } from "./EmptyState.svelte";
 export { default as FileUploader } from "./FileUploader.svelte";
 export { default as Footer } from "./Footer.svelte";
 export { default as ForceGraph } from "./ForceGraph.svelte";
+export { default as GraphLegend } from "./GraphLegend.svelte";
 export { default as Form } from "./Form.svelte";
 export { default as FormGroup } from "./FormGroup.svelte";
 export { default as Header } from "./Header.svelte";
 export { default as Highlight } from "./Highlight.svelte";
+export { default as DisplaySettings } from "./DisplaySettings.svelte";
+export { default as MediaContent } from "./MediaContent.svelte";
+export { default as Transcription } from "./Transcription.svelte";
 export { default as IconButton } from "./IconButton.svelte";
 export { default as InlineLoading } from "./InlineLoading.svelte";
 export { default as Input } from "./Input.svelte";
@@ -42,6 +47,7 @@ export { default as Menu } from "./Menu.svelte";
 export { default as MenuPopover } from "./MenuPopover.svelte";
 export { default as MenuTriggerButton } from "./MenuTriggerButton.svelte";
 export { default as Modal } from "./Modal.svelte";
+export { default as Notification } from "./Notification.svelte";
 export { default as MultiSelect } from "./MultiSelect.svelte";
 export { default as NumberInput } from "./NumberInput.svelte";
 export { default as OrderedList } from "./OrderedList.svelte";
@@ -76,6 +82,7 @@ export { default as Toast } from "./Toast.svelte";
 export { default as Toggle } from "./Toggle.svelte";
 export { default as Toggletip } from "./Toggletip.svelte";
 export { default as Tooltip } from "./Tooltip.svelte";
+export { default as TableOfContents } from "./TableOfContents.svelte";
 export { default as TreeView } from "./TreeView.svelte";
 export { default as UnorderedList } from "./UnorderedList.svelte";
 export type { AccordionItem } from "./Accordion.svelte";
@@ -92,7 +99,8 @@ export type { ComboboxOption } from "./Combobox.svelte";
 export type { DataTableColumn, DataTableRow, DataTableSelectMode, DataTableSort } from "./DataTable.svelte";
 export type { DatePickerRange } from "./DatePicker.svelte";
 export type { DonutChartDatum, DonutChartTone } from "./DonutChart.svelte";
-export type { ForceGraphNode, ForceGraphEdge, ForceGraphTone } from "./ForceGraph.svelte";
+export type { ForceGraphNode, ForceGraphEdge, ForceGraphTone, ForceGraphNodeShape, ForceGraphLegendEntry } from "./ForceGraph.svelte";
+export { nodeShapePath } from "./ForceGraph.svelte";
 export type { DropdownOption } from "./Dropdown.svelte";
 export type { HeaderAccount } from "./Header.svelte";
 export { deriveInitials } from "./Header.svelte";
@@ -103,7 +111,10 @@ export type { OverflowMenuItem } from "./OverflowMenu.svelte";
 export type { ProgressIndicatorItem, ProgressIndicatorStatus } from "./ProgressIndicator.svelte";
 export type { SideNavItem } from "./SideNav.svelte";
 export type { StructuredListItem } from "./StructuredList.svelte";
+export type { DisplayFontScale, DisplayContrast, DisplayLineSpacing, DisplaySettingsState } from "./DisplaySettings.svelte";
+export type { TranscriptionSegment } from "./Transcription.svelte";
 export type { TableColumn, TableRow } from "./Table.svelte";
+export type { TableOfContentsItem } from "./TableOfContents.svelte";
 export type { TabItem } from "./Tabs.svelte";
 export type { HighlightTone } from "./Highlight.svelte";
 export type { LanguageOption } from "./LanguageSelector.svelte";