@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/Spinner.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-  export let size: 'sm' | 'md' | 'lg' = 'md';
-  export let label: string = 'Loading';
+  interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+  }
+
+  let { size = 'md', label = 'Loading' }: Props = $props();
 </script>
 
-<span role="status" aria-label={label} class="spinner {size}" />
+<span role="status" aria-label={label} class="spinner {size}"></span>

package/src/lib/components/SplitButton.svelte

@@ -1,24 +1,35 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface SplitButtonItem { id: string; label: string; disabled?: boolean; }
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
 
-  export let label: string;
-  export let variant: 'primary' | 'ghost' | 'danger' = 'ghost';
-  export let disabled: boolean = false;
-  export let items: SplitButtonItem[] = [];
+  interface Props {
+    label: string;
+    variant?: 'primary' | 'ghost' | 'danger';
+    disabled?: boolean;
+    items?: SplitButtonItem[];
+    onprimary?: () => void;
+    onaction?: (payload: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ primary: void; action: string }>();
+  let {
+    label,
+    variant = 'ghost',
+    disabled = false,
+    items = [],
+    onprimary,
+    onaction,
+  }: Props = $props();
   const uid = `dash-ui-spbtn-${++counter}`;
   const menuId = `${uid}-menu`;
 
-  let open = false;
-  let activeIdx = 0;
-  let caretEl: HTMLButtonElement;
-  let wrapperEl: HTMLDivElement;
+  let open = $state(false);
+  let activeIdx = $state(0);
+  let caretEl = $state<HTMLButtonElement | undefined>(undefined);
+  let wrapperEl = $state<HTMLDivElement | undefined>(undefined);
 
   function toggleMenu() {
     if (!open) activeIdx = 0;
@@ -26,7 +37,7 @@
   }
 
   function activate(id: string) {
-    dispatch('action', id);
+    onaction?.(id);
     open = false;
     caretEl?.focus();
   }
@@ -66,7 +77,7 @@
     type="button"
     class="btn btn-{variant} split-btn-primary"
     {disabled}
-    on:click={() => dispatch('primary')}
+    onclick={() => onprimary?.()}
   >{label}</button>
   <button
     bind:this={caretEl}
@@ -77,8 +88,8 @@
     aria-haspopup="menu"
     aria-expanded={open}
     aria-controls={open ? menuId : undefined}
-    on:click={toggleMenu}
-    on:keydown={onKeyDown}
+    onclick={toggleMenu}
+    onkeydown={onKeyDown}
   >
     <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
       <path d="M1 3 L5 7 L9 3" />
@@ -93,8 +104,8 @@
           aria-disabled={item.disabled}
           data-active={idx === activeIdx ? 'true' : undefined}
           class="action-menu-item"
-          on:mouseenter={() => { activeIdx = idx; }}
-          on:mousedown|preventDefault={() => { if (!item.disabled) activate(item.id); }}
+          onmouseenter={() => { activeIdx = idx; }}
+          onmousedown={(e) => { e.preventDefault(); (() => { if (!item.disabled) activate(item.id); })(); }}
         >{item.label}</li>
       {/each}
     </ul>

package/src/lib/components/Spoiler.svelte

@@ -1,15 +1,26 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  export let maxHeight: number = 80;
-  export let showLabel: string = 'Show more';
-  export let hideLabel: string = 'Show less';
-  let klass: string = '';
-  export { klass as class };
+  interface Props {
+    maxHeight?: number;
+    showLabel?: string;
+    hideLabel?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
 
-  let expanded = false;
-  let clipped = false;
-  let bodyEl: HTMLDivElement;
+  let {
+    maxHeight = 80,
+    showLabel = 'Show more',
+    hideLabel = 'Show less',
+    class: klass = '',
+    children
+  }: Props = $props();
+  
+
+  let expanded = $state(false);
+  let clipped = $state(false);
+  let bodyEl = $state<HTMLDivElement | undefined>(undefined);
 
   onMount(() => {
     if (bodyEl) clipped = bodyEl.scrollHeight > maxHeight;
@@ -22,10 +33,10 @@
       bind:this={bodyEl}
       style={!expanded && clipped ? `max-height:${maxHeight}px;overflow:hidden` : undefined}
     >
-      <slot />
+      {@render children?.()}
     </div>
     {#if !expanded && clipped}
-      <div class="spoiler-fade" aria-hidden="true" />
+      <div class="spoiler-fade" aria-hidden="true"></div>
     {/if}
   </div>
   {#if clipped}
@@ -33,7 +44,7 @@
       type="button"
       class="spoiler-toggle"
       aria-expanded={expanded}
-      on:click={() => (expanded = !expanded)}
+      onclick={() => (expanded = !expanded)}
     >
       {expanded ? hideLabel : showLabel}
     </button>

package/src/lib/components/StackedBarChart.svelte

@@ -1,33 +1,46 @@
-<script lang="ts">
+<script module lang="ts">
   export interface StackedBarSeries {
     label: string;
     color: string;
     values: number[];
   }
+</script>
 
-  export let series: StackedBarSeries[] = [];
-  export let labels: string[] = [];
-  export let height = 180;
-  export let normalized = false;
-  export let ariaLabel = 'Stacked bar chart';
+<script lang="ts">
+
+  interface Props {
+    series?: StackedBarSeries[];
+    labels?: string[];
+    height?: number;
+    normalized?: boolean;
+    ariaLabel?: string;
+  }
+
+  let {
+    series = [],
+    labels = [],
+    height = 180,
+    normalized = false,
+    ariaLabel = 'Stacked bar chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 10, r: 8, b: 28, l: 36 };
 
-  $: n = series.length && series[0].values.length ? series[0].values.length : 0;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: bot = PAD.t + chartH;
-  $: barW = n > 0 ? (chartW / n) * 0.72 : 0;
-  $: gap = n > 0 ? (chartW / n) * 0.28 : 0;
+  let n = $derived(series.length && series[0].values.length ? series[0].values.length : 0);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let bot = $derived(PAD.t + chartH);
+  let barW = $derived(n > 0 ? (chartW / n) * 0.72 : 0);
+  let gap = $derived(n > 0 ? (chartW / n) * 0.28 : 0);
 
-  $: totals = Array.from({ length: n }, (_, i) =>
+  let totals = $derived(Array.from({ length: n }, (_, i) =>
     series.reduce((s, ser) => s + (ser.values[i] ?? 0), 0)
-  );
+  ));
 
-  $: maxTotal = normalized ? 1 : (totals.length ? Math.max(...totals) : 1) || 1;
+  let maxTotal = $derived(normalized ? 1 : (totals.length ? Math.max(...totals) : 1) || 1);
 
-  $: stacks = Array.from({ length: n }, (_, gi) => {
+  let stacks = $derived(Array.from({ length: n }, (_, gi) => {
     let y = bot;
     const total = totals[gi] || 1;
     return series.map((ser) => {
@@ -45,18 +58,18 @@
       y -= bh;
       return rect;
     });
-  });
+  }));
 
-  $: gridFracs = [0.25, 0.5, 0.75, 1];
-  $: gridLines = gridFracs.map((f) => ({
+  let gridFracs = $derived([0.25, 0.5, 0.75, 1]);
+  let gridLines = $derived(gridFracs.map((f) => ({
     y: PAD.t + (1 - f) * chartH,
     label: normalized ? `${Math.round(f * 100)}%` : String(Math.round(f * maxTotal)),
-  }));
+  })));
 
-  $: xLabels = Array.from({ length: n }, (_, i) => ({
+  let xLabels = $derived(Array.from({ length: n }, (_, i) => ({
     x: PAD.l + i * (barW + gap) + gap / 2 + barW / 2,
     text: labels[i] ?? String(i),
-  }));
+  })));
 </script>
 
 {#if n > 0}

package/src/lib/components/StackedProgress.svelte

@@ -1,28 +1,40 @@
-<script lang="ts">
+<script module lang="ts">
   export interface StackedProgressSegment {
     label: string;
     value: number;
     color: string;
   }
-  export let segments: StackedProgressSegment[];
-  export let total: number | undefined = undefined;
-  export let ariaLabel: string | undefined = undefined;
-  export let showLegend: boolean = true;
-  $: sum = total ?? segments.reduce((a, s) => a + s.value, 0);
-  $: text = ariaLabel ?? segments.map((s) => `${s.label} ${Math.round((s.value / sum) * 100)}%`).join(', ');
+</script>
+
+<script lang="ts">
+  interface Props {
+    segments: StackedProgressSegment[];
+    total?: number | undefined;
+    ariaLabel?: string | undefined;
+    showLegend?: boolean;
+  }
+
+  let {
+    segments,
+    total = undefined,
+    ariaLabel = undefined,
+    showLegend = true
+  }: Props = $props();
+  let sum = $derived(total ?? segments.reduce((a, s) => a + s.value, 0));
+  let text = $derived(ariaLabel ?? segments.map((s) => `${s.label} ${Math.round((s.value / sum) * 100)}%`).join(', '));
 </script>
 
 <div class="sp" role="img" aria-label={text}>
   <div class="sp-bar" aria-hidden="true">
     {#each segments as { label, value, color }}
-      <div class="sp-seg" style="width:{((value / sum) * 100).toFixed(2)}%;background:{color}" />
+      <div class="sp-seg" style="width:{((value / sum) * 100).toFixed(2)}%;background:{color}"></div>
     {/each}
   </div>
   {#if showLegend}
     <div class="sp-legend" aria-hidden="true">
       {#each segments as { label, value, color }}
         <span class="sp-item">
-          <span class="sp-dot" style="background:{color}" />
+          <span class="sp-dot" style="background:{color}"></span>
           {label}
           <span class="sp-pct">{Math.round((value / sum) * 100)}%</span>
         </span>

package/src/lib/components/StarRating.svelte

@@ -1,17 +1,28 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
-  export let label: string;
-  export let value: number = 0;
-  export let max: number = 5;
-  export let readOnly: boolean = false;
-  export let size: 'sm' | 'md' = 'md';
-  export let onChange: ((v: number) => void) | undefined = undefined;
+  interface Props {
+    label: string;
+    value?: number;
+    max?: number;
+    readOnly?: boolean;
+    size?: 'sm' | 'md';
+    onChange?: ((v: number) => void) | undefined;
+  }
+
+  let {
+    label,
+    value = $bindable(0),
+    max = 5,
+    readOnly = false,
+    size = 'md',
+    onChange = undefined
+  }: Props = $props();
 
   const gid = `dash-ui-sr-${++counter}`;
-  let hovered = 0;
+  let hovered = $state(0);
 
   function pick(star: number) {
     value = star;
@@ -42,8 +53,8 @@
       <label
         for="{gid}-{star}"
         class="star-label{on ? ' star-label--on' : ''}"
-        on:mouseenter={() => (hovered = star)}
-        on:mouseleave={() => (hovered = 0)}
+        onmouseenter={() => (hovered = star)}
+        onmouseleave={() => (hovered = 0)}
       >
         <input
           type="radio"
@@ -53,7 +64,7 @@
           checked={value === star}
           class="star-radio"
           aria-label="{star} out of {max}"
-          on:change={() => pick(star)}
+          onchange={() => pick(star)}
         />
         <svg viewBox="0 0 24 24" fill={on ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false">
           <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />

package/src/lib/components/Stat.svelte

@@ -1,20 +1,42 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import Card from './Card.svelte';
-  export let label: string;
-  export let value: string = '';
-  export let unit: string | undefined = undefined;
-  export let sub: string | undefined = undefined;
-  export let delta: string | undefined = undefined;
-  export let deltaDir: 'up' | 'down' | 'neutral' = 'neutral';
-  export let span: number | undefined = undefined;
-  export let color: string | undefined = undefined;
-  $: deltaClass = deltaDir === 'up' ? 'delta-up' : deltaDir === 'down' ? 'delta-down' : '';
+
+  interface Props {
+    label: string;
+    value?: string;
+    unit?: string | undefined;
+    sub?: string | undefined;
+    delta?: string | undefined;
+    deltaDir?: 'up' | 'down' | 'neutral';
+    span?: number | undefined;
+    color?: string | undefined;
+    /** Snippet override for the value display. Renamed from the old `value`
+     *  named slot to avoid colliding with the `value` prop in Svelte 5. */
+    valueSlot?: Snippet;
+  }
+
+  let {
+    label,
+    value = '',
+    unit = undefined,
+    sub = undefined,
+    delta = undefined,
+    deltaDir = 'neutral',
+    span = undefined,
+    color = undefined,
+    valueSlot,
+  }: Props = $props();
+
+  let deltaClass = $derived(
+    deltaDir === 'up' ? 'delta-up' : deltaDir === 'down' ? 'delta-down' : '',
+  );
 </script>
 
 <Card {span}>
   <h3>{label}</h3>
   <div class="stat" style={color ? `color:${color};` : ''}>
-    <slot name="value">{value}</slot>{#if unit}<span class="unit">{unit}</span>{/if}
+    {#if valueSlot}{@render valueSlot()}{:else}{value}{/if}{#if unit}<span class="unit">{unit}</span>{/if}
   </div>
   {#if sub || delta}
     <div class="submeta">

package/src/lib/components/StatusIndicator.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-  export let color: string;
-  export let text: string;
-  export let textColor: string | undefined = undefined;
+  interface Props {
+    color: string;
+    text: string;
+    textColor?: string | undefined;
+  }
+
+  let { color, text, textColor = undefined }: Props = $props();
 </script>
 
 <span style="display:inline-flex;align-items:center;gap:6px;color:{textColor ?? color};font-size:12px;">

package/src/lib/components/StepChart.svelte

@@ -1,25 +1,37 @@
-<script lang="ts">
+<script module lang="ts">
   export interface StepChartSeries {
     label: string;
     color: string;
     values: number[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: StepChartSeries[];
+    labels?: string[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: StepChartSeries[] = [];
-  export let labels: string[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Step chart';
+  let {
+    series = [],
+    labels = [],
+    height = 160,
+    ariaLabel = 'Step chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 12, r: 8, b: 28, l: 8 };
 
-  $: allValues = series.flatMap((s) => s.values);
-  $: minV = allValues.length ? Math.min(...allValues) : 0;
-  $: maxV = allValues.length ? Math.max(...allValues) : 1;
-  $: range = maxV - minV || 1;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: n = series[0]?.values.length ?? 0;
+  let allValues = $derived(series.flatMap((s) => s.values));
+  let minV = $derived(allValues.length ? Math.min(...allValues) : 0);
+  let maxV = $derived(allValues.length ? Math.max(...allValues) : 1);
+  let range = $derived(maxV - minV || 1);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let n = $derived(series[0]?.values.length ?? 0);
 
   function toX(i: number): number {
     return PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2);
@@ -48,9 +60,9 @@
     return d;
   }
 
-  $: gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
-  $: paths = series.map((s) => ({ color: s.color, label: s.label, d: stepPath(s) }));
-  $: areas = series.map((s) => ({ color: s.color, label: s.label, d: stepArea(s) }));
+  let gridLines = $derived([0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH));
+  let paths = $derived(series.map((s) => ({ color: s.color, label: s.label, d: stepPath(s) })));
+  let areas = $derived(series.map((s) => ({ color: s.color, label: s.label, d: stepArea(s) })));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/Stepper.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface StepperStep {
     id: string;
     label: string;
@@ -6,12 +6,16 @@
 </script>
 
 <script lang="ts">
-  export let steps: StepperStep[];
-  export let active: string;
-  let className = '';
-  export { className as class };
+  interface Props {
+    steps: StepperStep[];
+    active: string;
+    class?: string;
+  }
+
+  let { steps, active, class: className = '' }: Props = $props();
+  
 
-  $: activeIdx = steps.findIndex(s => s.id === active);
+  let activeIdx = $derived(steps.findIndex(s => s.id === active));
 </script>
 
 <nav aria-label="Progress" class="stepper {className}">

package/src/lib/components/StreamGraph.svelte

@@ -1,13 +1,20 @@
-<script lang="ts">
+<script module lang="ts">
   export interface StreamSeries {
     label: string;
     values: number[];
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    labels?: string[];
+    series?: StreamSeries[];
+    ariaLabel?: string;
+  }
 
-  export let labels: string[] = [];
-  export let series: StreamSeries[] = [];
-  export let ariaLabel: string = 'Stream graph';
+  let { labels = [], series = [], ariaLabel = 'Stream graph' }: Props = $props();
 
   const VW = 380;
   const VH = 120;
@@ -17,20 +24,20 @@
   const PAD_B = 20;
   const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
 
-  $: n = labels.length;
-  $: TRACK_W = VW - PAD_L - PAD_R;
-  $: TRACK_H = VH - PAD_T - PAD_B;
+  let n = $derived(labels.length);
+  let TRACK_W = $derived(VW - PAD_L - PAD_R);
+  let TRACK_H = $derived(VH - PAD_T - PAD_B);
 
-  $: totals = Array.from({ length: n }, (_, i) =>
+  let totals = $derived(Array.from({ length: n }, (_, i) =>
     series.reduce((sum, s) => sum + (s.values[i] ?? 0), 0)
-  );
-  $: maxTotal = Math.max(...totals, 1);
+  ));
+  let maxTotal = $derived(Math.max(...totals, 1));
 
   function xOf(i: number): number {
     return n > 1 ? PAD_L + (i / (n - 1)) * TRACK_W : PAD_L + TRACK_W / 2;
   }
 
-  $: layers = series.map((s, si) => {
+  let layers = $derived(series.map((s, si) => {
     const tops: number[] = [];
     const bots: number[] = [];
     for (let i = 0; i < n; i++) {
@@ -43,7 +50,7 @@
       tops[i] = PAD_T + (top / maxTotal) * TRACK_H;
     }
     return { tops, bots, color: s.color ?? COLORS[si % COLORS.length] };
-  });
+  }));
 
   function buildArea(tops: number[], bots: number[]): string {
     const fwd = tops.map((y, i) => {

package/src/lib/components/StripeChart.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
-  export let data: { label: string; value: number }[] = [];
-  export let height: number = 48;
-  export let colorLow: string = '#0A2840';
-  export let colorHigh: string = '#FF4040';
-  export let ariaLabel: string = 'Stripe chart';
+  interface Props {
+    data?: { label: string; value: number }[];
+    height?: number;
+    colorLow?: string;
+    colorHigh?: string;
+    ariaLabel?: string;
+  }
+
+  let {
+    data = [],
+    height = 48,
+    colorLow = '#0A2840',
+    colorHigh = '#FF4040',
+    ariaLabel = 'Stripe chart'
+  }: Props = $props();
 
   function hexToRgb(hex: string): [number, number, number] {
     const h = hex.replace('#', '');
@@ -19,18 +29,18 @@
     return `rgb(${lerp(r1, r2, t)},${lerp(g1, g2, t)},${lerp(b1, b2, t)})`;
   }
 
-  $: vals = data.map((d) => d.value);
-  $: min = vals.length ? Math.min(...vals) : 0;
-  $: max = vals.length ? Math.max(...vals) : 1;
-  $: range = (max - min) || 1;
-  $: sw = 400 / (data.length || 1);
-  $: stripes = data.map((d, i) => ({
+  let vals = $derived(data.map((d) => d.value));
+  let min = $derived(vals.length ? Math.min(...vals) : 0);
+  let max = $derived(vals.length ? Math.max(...vals) : 1);
+  let range = $derived((max - min) || 1);
+  let sw = $derived(400 / (data.length || 1));
+  let stripes = $derived(data.map((d, i) => ({
     x: i * sw,
     w: sw,
     color: interpColor(colorLow, colorHigh, (d.value - min) / range),
     label: d.label,
     value: d.value,
-  }));
+  })));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="line-height:0;">

package/src/lib/components/SunburstChart.svelte

@@ -1,13 +1,20 @@
-<script lang="ts">
+<script module lang="ts">
   export interface SunburstNode {
     label: string;
     value?: number;
     color?: string;
     children?: SunburstNode[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    root: SunburstNode;
+    ariaLabel?: string;
+  }
 
-  export let root: SunburstNode;
-  export let ariaLabel: string = 'Sunburst chart';
+  let { root, ariaLabel = 'Sunburst chart' }: Props = $props();
 
   const PALETTE = ['#006FFF', '#00C875', '#A78BFA', '#F5A623', '#50B8E7', '#F04949'];
   const CX = 160, CY = 160, R_HOLE = 48, R_MID = 97, R_OUTER = 142, GAP = 0.01;
@@ -21,7 +28,7 @@
   type PathData = { d: string; fill: string };
   type LabelData = { x: number; y: number; anchor: string; text: string };
 
-  $: ({ paths, labels, total } = (() => {
+  let { paths, labels, total } = $derived((() => {
     const items = root.children ?? [];
     const total = items.reduce((s, c) => s + (c.value ?? c.children?.reduce((cs, x) => cs + (x.value ?? 0), 0) ?? 0), 0);
     if (!total) return { paths: [] as PathData[], labels: [] as LabelData[], total: 0 };