@sentropic/design-system-svelte 0.10.3 → 0.10.4

package/dist/GraphLegend.svelte

@@ -0,0 +1,142 @@
+<script lang="ts" module>
+  // Re-export types so GraphLegend can be used standalone without importing from ForceGraph.
+  export type { ForceGraphLegendEntry, ForceGraphNodeShape, ForceGraphTone } from "./ForceGraph.svelte";
+</script>
+
+<script lang="ts">
+  import { nodeShapePath } 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"}
+      <li class="st-graphLegend__entry">
+        {#if entry.shape !== undefined}
+          <svg
+            class="st-graphLegend__swatch"
+            viewBox="-8 -8 16 16"
+            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}
+            />
+          </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);
+    stroke-dasharray: 3 3;
+    opacity: 0.65;
+  }
+</style>

package/dist/GraphLegend.svelte.d.ts

@@ -0,0 +1,12 @@
+export type { ForceGraphLegendEntry, ForceGraphNodeShape, ForceGraphTone } 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,MAAM,qBAAqB,CAAC;AAIxG,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;AA8CJ,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"}

package/dist/Menu.svelte

@@ -62,6 +62,26 @@
   }: MenuProps = $props();
 
   let host: HTMLDivElement | undefined = $state();
+  function getFocusableItems(): HTMLButtonElement[] {
+    return Array.from(
+      host?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)') ?? []
+    );
+  }
+
+  function moveIndex(index: number, size: number, step: number) {
+    if (size <= 0) return 0;
+    return ((index + step) % size + size) % size;
+  }
+
+  function focusAt(index: number) {
+    const focusable = getFocusableItems();
+    if (!focusable.length) return;
+    const target = moveIndex(index, focusable.length, 0);
+    focusable.forEach((button, idx) => {
+      button.tabIndex = idx === target ? 0 : -1;
+    });
+    focusable[target]?.focus();
+  }
 
   const classes = () =>
     ["st-menu", dense ? "st-menu--dense" : null, className].filter(Boolean).join(" ");
@@ -76,6 +96,35 @@
     return item.kind === undefined || item.kind === "item";
   }
 
+  function onItemKeyDown(event: KeyboardEvent, item: MenuActionItem) {
+    const focusable = getFocusableItems();
+    const current = focusable.indexOf(event.currentTarget as HTMLButtonElement);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusAt(current + 1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusAt(current - 1);
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusAt(0);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusAt(focusable.length - 1);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!item.disabled) selectItem(item);
+    }
+  }
+
   function onWindowKeydown(event: KeyboardEvent) {
     if (event.key === "Escape" && open && dismissOnSelect) {
       event.preventDefault();
@@ -105,6 +154,7 @@
           aria-disabled={item.disabled ? "true" : undefined}
           disabled={item.disabled}
           onclick={() => selectItem(item)}
+          onkeydown={(event) => onItemKeyDown(event, item)}
         >
           {#if Icon}
             <span class="st-menu__itemIcon" aria-hidden="true">
@@ -163,7 +213,7 @@
 
   .st-menu__item:hover:not(:disabled),
   .st-menu__item:focus-visible {
-    background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     outline: none;
   }
 
@@ -173,12 +223,15 @@
   }
 
   .st-menu__item--danger {
-    color: var(--st-component-menu-dangerText, var(--st-semantic-feedback-error, #b91c1c));
+    color: var(--st-component-menu-dangerText, var(--st-semantic-feedback-error));
   }
 
   .st-menu__item--danger:hover:not(:disabled),
   .st-menu__item--danger:focus-visible {
-    background: var(--st-component-menu-dangerHoverBackground, rgba(185, 28, 28, 0.08));
+    background: var(
+      --st-component-menu-dangerHoverBackground,
+      var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle))
+    );
   }
 
   .st-menu__itemIcon {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Menu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,OAAO,CAAC,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,eAAe,GAAG,aAAa,CAAC;AAS1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA8EJ,QAAA,MAAM,IAAI,kCAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Menu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,OAAO,CAAC,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,eAAe,GAAG,aAAa,CAAC;AAS1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA+HJ,QAAA,MAAM,IAAI,kCAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/MessageStatusBadge.svelte

@@ -41,7 +41,7 @@
 </Tag>
 
 <style>
-  .st-messageStatusBadge {
+  :global(.st-messageStatusBadge) {
     align-items: center;
     text-transform: none;
   }