@sentropic/design-system-svelte 0.10.2 → 0.10.4

package/dist/AreaChart.svelte

@@ -16,6 +16,8 @@
 </script>
 
 <script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
   type AreaChartProps = {
     data: (number | AreaChartDatum)[];
     width?: number;
@@ -85,6 +87,8 @@
     });
   });
 
+  const dataValueItems = $derived(normalizedData.map((d) => `${d.x}: ${d.y}`));
+
   let hoveredIndex: number | null = $state(null);
 
   const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
@@ -197,12 +201,18 @@
     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;
+  }
 
   // Generates a unique gradient id to avoid conflicts when rendering multiple charts on the same page
   const gradientId = $derived.by(() => {
@@ -213,15 +223,22 @@
     ["st-areaChart", `st-areaChart--${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-areaChart__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"
+    >
     <defs>
       <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
         <stop offset="0%" stop-color="currentColor" stop-opacity="0.3" />
@@ -297,16 +314,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]}
@@ -344,6 +358,10 @@
     overflow: visible;
   }
 
+  .st-areaChart__visual {
+    display: block;
+  }
+
   .st-areaChart__grid {
     stroke: var(--st-component-areaChart-gridStroke, var(--st-semantic-border-subtle));
     stroke-dasharray: 2 3;
@@ -377,16 +395,10 @@
     transition: r 120ms ease;
   }
 
-  .st-areaChart__dot:hover,
-  .st-areaChart__dot:focus-visible {
+  .st-areaChart__dot:hover {
     r: 5.5;
   }
 
-  .st-areaChart__dot:focus-visible {
-    outline: 2px solid var(--st-semantic-border-interactive);
-    outline-offset: 1px;
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .st-areaChart__dot {
       transition: none;

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

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AreaChart.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,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsPJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AreaChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AreaChart.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,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmQJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/BackToTop.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { ArrowUp } from "@lucide/svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type BackToTopProps = Omit<HTMLAttributes<HTMLButtonElement>, "class"> & {
+    label?: string;
+    disabled?: boolean;
+    targetId?: string;
+    threshold?: number;
+    autoHide?: boolean;
+    smooth?: boolean;
+    class?: string;
+  };
+
+  let {
+    label = "Retour en haut",
+    targetId = "top",
+    threshold = 240,
+    autoHide = true,
+    smooth = true,
+    disabled = false,
+    class: className,
+    ...rest
+  }: BackToTopProps = $props();
+
+  const normalizedTarget = () => (targetId ? `#${targetId.replace(/^#/, "")}` : "#top");
+
+  let visible = $state(false);
+  let hideOnScroll = $state(true);
+
+  $effect(() => {
+    hideOnScroll = autoHide;
+    visible = !autoHide;
+  });
+
+  $effect(() => {
+    if (!hideOnScroll || typeof window === "undefined") {
+      if (!hideOnScroll) {
+        visible = true;
+      }
+      return;
+    }
+
+    const updateVisibility = () => {
+      visible = window.scrollY > threshold;
+    };
+
+    updateVisibility();
+    window.addEventListener("scroll", updateVisibility, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", updateVisibility);
+    };
+  });
+
+  function goTop() {
+    const target = normalizedTarget();
+    const anchor = target.startsWith("#") ? target.slice(1) : target;
+    const element = anchor ? document.getElementById(anchor) : null;
+
+    if (element) {
+      element.scrollIntoView({
+        behavior: smooth ? "smooth" : "auto",
+        block: "start"
+      });
+      return;
+    }
+
+    window.scrollTo({
+      top: 0,
+      behavior: smooth ? "smooth" : "auto"
+    });
+  }
+
+  const classes = () => ["st-backToTop", className].filter(Boolean).join(" ");
+</script>
+
+<button
+  type="button"
+  class={classes()}
+  onclick={goTop}
+  aria-label={label}
+  aria-hidden={autoHide && !visible}
+  aria-live={autoHide && !visible ? "polite" : undefined}
+  tabindex={autoHide && !visible ? -1 : undefined}
+  {disabled}
+  {...rest}
+>
+  <span class="st-backToTop__icon" aria-hidden="true">
+    <ArrowUp size={16} />
+  </span>
+  <span class="st-backToTop__label">{label}</span>
+</button>
+
+<style>
+  .st-backToTop {
+    align-items: center;
+    background: var(--st-component-control-background, var(--st-semantic-surface-contrast, #0f172a));
+    border: 1px solid var(--st-component-control-border, #334155);
+    border-radius: 999px;
+    bottom: var(--st-spacing-4, 1rem);
+    color: var(--st-semantic-text-inverse, #fff);
+    cursor: var(--st-cursor-interactive, pointer);
+    display: inline-flex;
+    gap: 0.5rem;
+    opacity: 0;
+    padding: 0.6rem 0.8rem;
+    position: fixed;
+    pointer-events: none;
+    right: var(--st-spacing-4, 1rem);
+    transform: translateY(0.75rem);
+    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    z-index: var(--st-zindex-toast, 70);
+  }
+
+  .st-backToTop:not([aria-hidden="true"]) {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  .st-backToTop:hover:not(:disabled),
+  .st-backToTop:focus-visible {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, #38bdf8);
+    outline: none;
+  }
+
+  .st-backToTop:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, #38bdf8);
+    outline-offset: 2px;
+  }
+
+  .st-backToTop__label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1.2;
+  }
+
+  .st-backToTop__icon {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  @media (max-width: 38rem) {
+    .st-backToTop__label {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-backToTop {
+      transition: none;
+    }
+  }
+</style>

package/dist/BackToTop.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "svelte/elements";
+type BackToTopProps = Omit<HTMLAttributes<HTMLButtonElement>, "class"> & {
+    label?: string;
+    disabled?: boolean;
+    targetId?: string;
+    threshold?: number;
+    autoHide?: boolean;
+    smooth?: boolean;
+    class?: string;
+};
+declare const BackToTop: import("svelte").Component<BackToTopProps, {}, "">;
+type BackToTop = ReturnType<typeof BackToTop>;
+export default BackToTop;
+//# sourceMappingURL=BackToTop.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackToTop.svelte.d.ts","sourceRoot":"","sources":["../src/lib/BackToTop.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgFJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/BarChart.svelte

@@ -17,6 +17,8 @@
 </script>
 
 <script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
   type BarChartProps = {
     data: BarChartDatum[];
     width?: number;
@@ -72,8 +74,6 @@
   }
 
   let hoveredIndex: number | null = $state(null);
-  let containerRect: { left: number; top: number } = $state({ left: 0, top: 0 });
-  let chartRoot: HTMLDivElement | null = $state(null);
 
   const scales = $derived.by(() => {
     const values = data.map((d) => d.value);
@@ -133,6 +133,8 @@
     });
   });
 
+  const dataValueItems = $derived(data.map((d) => `${d.label}: ${d.value}`));
+
   const valueAxisTicks = $derived.by(() => {
     const { ticks, domainMin, domainMax, plotWidth, plotHeight } = scales;
     if (orientation === "vertical") {
@@ -157,36 +159,38 @@
     }));
   });
 
-  function handleEnter(index: number, event: Event) {
-    hoveredIndex = index;
-    if (chartRoot) {
-      const r = chartRoot.getBoundingClientRect();
-      containerRect = { left: r.left, top: r.top };
-    }
-    event.stopPropagation();
-  }
-
   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-barChart", className].filter(Boolean).join(" ");
 </script>
 
-<div
-  class={classes()}
-  role="img"
-  aria-label={label}
-  bind:this={chartRoot}
->
-  <svg
-    viewBox="0 0 {width} {height}"
-    preserveAspectRatio="xMidYMid meet"
-    width="100%"
-    height="100%"
-    focusable="false"
-    aria-hidden="true"
+<div class={classes()}>
+  <div
+    class="st-barChart__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 + value axis ticks -->
     {#if orientation === "vertical"}
       {#each valueAxisTicks as tick (tick.value)}
@@ -276,16 +280,13 @@
         width={bar.width}
         height={bar.height}
         rx="2"
-        tabindex="0"
-        role="img"
-        aria-label="{bar.datum.label}: {bar.datum.value}"
-        onmouseenter={(e) => handleEnter(i, e)}
-        onmouseleave={handleLeave}
-        onfocus={(e) => handleEnter(i, e)}
-        onblur={handleLeave}
+        data-chart-index={i}
       />
     {/each}
-  </svg>
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
 
   {#if hoveredIndex !== null && bars[hoveredIndex]}
     {@const bar = bars[hoveredIndex]}
@@ -314,6 +315,10 @@
     overflow: visible;
   }
 
+  .st-barChart__visual {
+    display: block;
+  }
+
   .st-barChart__grid {
     stroke: var(--st-component-barChart-gridStroke, var(--st-semantic-border-subtle));
     stroke-dasharray: 2 3;
@@ -337,16 +342,10 @@
     transition: opacity 120ms ease;
   }
 
-  .st-barChart__bar:hover,
-  .st-barChart__bar:focus-visible {
+  .st-barChart__bar:hover {
     opacity: 0.82;
   }
 
-  .st-barChart__bar:focus-visible {
-    outline: 2px solid var(--st-semantic-border-interactive);
-    outline-offset: 1px;
-  }
-
   .st-barChart__bar--category1 { fill: var(--st-semantic-data-category1); }
   .st-barChart__bar--category2 { fill: var(--st-semantic-data-category2); }
   .st-barChart__bar--category3 { fill: var(--st-semantic-data-category3); }

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

@@ -1 +1 @@
-{"version":3,"file":"BarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/BarChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,YAAY,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgNJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BarChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/BarChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,YAAY,GACpB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAMF,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqNJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/Card.svelte

@@ -40,11 +40,13 @@
   .st-card--interactive {
     cursor: var(--st-cursor-interactive, pointer);
     transition:
+      background-color var(--st-motion-normal, 180ms) var(--st-motion-easing, ease),
       box-shadow var(--st-motion-normal, 180ms) var(--st-motion-easing, ease),
       transform var(--st-motion-normal, 180ms) var(--st-motion-easing, ease);
   }
 
   .st-card--interactive:hover {
+    background: var(--st-component-card-anatomy-states-hover-bg, var(--st-component-card-background, var(--st-semantic-surface-raised)));
     box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
     transform: var(--st-component-card-anatomy-states-hover-transform, translateY(-1px));
   }

package/dist/ChartDataList.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  type ChartDataListProps = {
+    label: string;
+    items: string[];
+    class?: string;
+  };
+
+  let { label, items = [], class: className }: ChartDataListProps = $props();
+
+  const classes = () => ["st-chartDataList", className].filter(Boolean).join(" ");
+</script>
+
+{#if items.length > 0}
+  <ul class={classes()} aria-label={`Data values for ${label}`}>
+    {#each items as item, i (i)}
+      <li>{item}</li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .st-chartDataList {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+</style>

package/dist/ChartDataList.svelte.d.ts

@@ -0,0 +1,9 @@
+type ChartDataListProps = {
+    label: string;
+    items: string[];
+    class?: string;
+};
+declare const ChartDataList: import("svelte").Component<ChartDataListProps, {}, "">;
+type ChartDataList = ReturnType<typeof ChartDataList>;
+export default ChartDataList;
+//# sourceMappingURL=ChartDataList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDataList.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChartDataList.svelte.ts"],"names":[],"mappings":"AAGE,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqBJ,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ChatComposer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Send, Square } from "@lucide/svelte";
+  import type { Snippet } from "svelte";
   import type { HTMLFormAttributes } from "svelte/elements";
   import Button from "./Button.svelte";
 
@@ -27,6 +28,9 @@
     clearOnSubmit?: boolean;
     onsubmit?: ChatComposerSubmitEvent;
     onstop?: () => void;
+    attachments?: Snippet;
+    actionsLeft?: Snippet;
+    actionsRight?: Snippet;
   };
 
   let {
@@ -47,6 +51,9 @@
     clearOnSubmit = true,
     onsubmit,
     onstop,
+    attachments,
+    actionsLeft,
+    actionsRight,
     ...rest
   }: ChatComposerProps = $props();
 
@@ -129,15 +136,21 @@
         onkeydown={handleTextareaKeydown}
       ></textarea>
     </div>
-    <slot name="attachments"></slot>
+    {#if attachments}
+      {@render attachments()}
+    {/if}
   </div>
 
   <div class="st-chatComposer__toolbar">
     <div class="st-chatComposer__actions st-chatComposer__actions--left">
-      <slot name="actions-left"></slot>
+      {#if actionsLeft}
+        {@render actionsLeft()}
+      {/if}
     </div>
     <div class="st-chatComposer__actions st-chatComposer__actions--right">
-      <slot name="actions-right"></slot>
+      {#if actionsRight}
+        {@render actionsRight()}
+      {/if}
       {#if hasActivity() && stoppable && onstop}
         <Button type="button" variant="danger" onclick={handleStop} aria-label={stopAriaLabel}>
           <Square size={16} strokeWidth={2} aria-hidden="true" />
@@ -197,6 +210,10 @@
     outline: none;
   }
 
+  .st-chatComposer__inputShell:hover .st-chatComposer__textarea:not(:disabled) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
   .st-chatComposer__textarea[aria-disabled="true"] {
     background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
     color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));

package/dist/ChatComposer.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from "svelte";
 import type { HTMLFormAttributes } from "svelte/elements";
 type ChatComposerSubmitEvent = (payload: {
     message: string;
@@ -22,36 +23,11 @@ type ChatComposerProps = Omit<HTMLFormAttributes, "class" | "onsubmit"> & {
     clearOnSubmit?: boolean;
     onsubmit?: ChatComposerSubmitEvent;
     onstop?: () => void;
+    attachments?: Snippet;
+    actionsLeft?: Snippet;
+    actionsRight?: Snippet;
 };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ChatComposer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ChatComposerProps, {
-    attachments: {};
-    'actions-left': {};
-    'actions-right': {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    attachments: {};
-    'actions-left': {};
-    'actions-right': {};
-}, {}, "value">;
-type ChatComposer = InstanceType<typeof ChatComposer>;
+declare const ChatComposer: import("svelte").Component<ChatComposerProps, {}, "value">;
+type ChatComposer = ReturnType<typeof ChatComposer>;
 export default ChatComposer;
 //# sourceMappingURL=ChatComposer.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChatComposer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIxD,KAAK,uBAAuB,GAAG,CAAC,OAAO,EAAE;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B,KAAK,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC;CACrC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE3B,KAAK,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAuHJ,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,YAAY;;;;;;;;;;eAAqF,CAAC;AACtF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ChatComposer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChatComposer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIxD,KAAK,uBAAuB,GAAG,CAAC,OAAO,EAAE;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC9B,KAAK,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC;CACrC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE3B,KAAK,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAiIJ,QAAA,MAAM,YAAY,4DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/Checkbox.svelte

@@ -48,6 +48,10 @@
       0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
   }
 
+  .st-choice:hover .st-choice__input {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
   .st-choice__input[aria-invalid="true"] {
     accent-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
     outline-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));

package/dist/Combobox.svelte

@@ -398,7 +398,7 @@
   .st-combobox__option:hover:not(:disabled),
   .st-combobox__option--active {
     background: var(
-      --st-component-dropdown-optionHoverBackground,
+      --st-component-control-hoverBackground,
       var(--st-semantic-surface-subtle)
     );
   }

package/dist/ContentSwitcher.svelte

@@ -105,6 +105,7 @@
   }
 
   .st-contentSwitcher__option:hover:not([disabled]):not(.st-contentSwitcher__option--selected) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
     color: var(--st-semantic-text-primary);
   }
 

package/dist/DataTable.svelte

@@ -396,7 +396,10 @@
   }
 
   .st-dataTable 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-dataTable tbody tr:last-child td {