@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/BarChart.svelte

@@ -1,37 +1,49 @@
-<script lang="ts">
+<script module lang="ts">
   export interface BarChartSeries {
     label: string;
     color: string;
     values: number[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: BarChartSeries[];
+    labels?: string[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: BarChartSeries[] = [];
-  export let labels: string[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Bar chart';
+  let {
+    series = [],
+    labels = [],
+    height = 160,
+    ariaLabel = 'Bar chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 12, r: 8, b: 28, l: 8 };
 
-  $: n = series[0]?.values.length ?? 0;
-  $: m = series.length;
-  $: maxV = series.length ? Math.max(...series.flatMap((s) => s.values)) || 1 : 1;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: bot = PAD.t + chartH;
-  $: gw = n > 0 ? chartW / n : chartW;
-  $: gap = gw * 0.15;
-  $: barW = Math.max((gw - gap * (m + 1)) / m, 1);
+  let n = $derived(series[0]?.values.length ?? 0);
+  let m = $derived(series.length);
+  let maxV = $derived(series.length ? Math.max(...series.flatMap((s) => s.values)) || 1 : 1);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let bot = $derived(PAD.t + chartH);
+  let gw = $derived(n > 0 ? chartW / n : chartW);
+  let gap = $derived(gw * 0.15);
+  let barW = $derived(Math.max((gw - gap * (m + 1)) / m, 1));
 
-  $: gridLines = [0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+  let gridLines = $derived([0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH));
 
-  $: bars = series.flatMap((s, si) =>
+  let bars = $derived(series.flatMap((s, si) =>
     s.values.map((v, gi) => {
       const x = PAD.l + gi * gw + gap * (si + 1) + barW * si;
       const bh = (v / maxV) * chartH;
       return { x: x.toFixed(1), y: (bot - bh).toFixed(1), w: barW.toFixed(1), h: bh.toFixed(1), color: s.color, key: `${si}-${gi}` };
     }),
-  );
+  ));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/BeeswarmChart.svelte

@@ -1,16 +1,30 @@
-<script lang="ts">
+<script module lang="ts">
   export interface BeeswarmSeries {
     label: string;
     points: number[];
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: BeeswarmSeries[];
+    yRange?: [number, number] | undefined;
+    height?: number;
+    unit?: string;
+    dotRadius?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: BeeswarmSeries[] = [];
-  export let yRange: [number, number] | undefined = undefined;
-  export let height = 200;
-  export let unit = '';
-  export let dotRadius = 4;
-  export let ariaLabel = 'Beeswarm chart';
+  let {
+    series = [],
+    yRange = undefined,
+    height = 200,
+    unit = '',
+    dotRadius = 4,
+    ariaLabel = 'Beeswarm chart'
+  }: Props = $props();
 
   const PALETTE = ['#006FFF', '#00C875', '#FF7B7B', '#F5C26B', '#A78BFA', '#34D399'];
   const VW = 340;
@@ -42,16 +56,16 @@
     return pts;
   }
 
-  $: PLOT_W = VW - PAD_L - PAD_R;
-  $: PLOT_H = height - PAD_T - PAD_B;
-  $: n = series.length || 1;
-  $: colWidth = PLOT_W / n;
-  $: halfWidth = colWidth / 2 - dotRadius;
-  $: allPts = series.flatMap((s) => s.points);
-  $: minV = yRange ? yRange[0] : allPts.length ? Math.min(...allPts) : 0;
-  $: maxV = yRange ? yRange[1] : allPts.length ? Math.max(...allPts) : 1;
-  $: vRange = maxV - minV || 1;
-  $: yTicks = [minV, (minV + maxV) / 2, maxV];
+  let PLOT_W = $derived(VW - PAD_L - PAD_R);
+  let PLOT_H = $derived(height - PAD_T - PAD_B);
+  let n = $derived(series.length || 1);
+  let colWidth = $derived(PLOT_W / n);
+  let halfWidth = $derived(colWidth / 2 - dotRadius);
+  let allPts = $derived(series.flatMap((s) => s.points));
+  let minV = $derived(yRange ? yRange[0] : allPts.length ? Math.min(...allPts) : 0);
+  let maxV = $derived(yRange ? yRange[1] : allPts.length ? Math.max(...allPts) : 1);
+  let vRange = $derived(maxV - minV || 1);
+  let yTicks = $derived([minV, (minV + maxV) / 2, maxV]);
 
   function ty(v: number): number {
     return PAD_T + (1 - (v - minV) / vRange) * PLOT_H;
@@ -61,7 +75,7 @@
     return PAD_L + (i + 0.5) * colWidth;
   }
 
-  $: swarmed = series.map((s) => swarmedPositions(s.points, ty, dotRadius, halfWidth));
+  let swarmed = $derived(series.map((s) => swarmedPositions(s.points, ty, dotRadius, halfWidth)));
 </script>
 
 {#if series.length > 0}

package/src/lib/components/BoxPlot.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface BoxSeries {
     label: string;
     q0: number;
@@ -8,26 +8,38 @@
     q4: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: BoxSeries[];
+    yRange?: [number, number] | undefined;
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: BoxSeries[] = [];
-  export let yRange: [number, number] | undefined = undefined;
-  export let height: number = 160;
-  export let ariaLabel: string = 'Box plot';
+  let {
+    series = [],
+    yRange = undefined,
+    height = 160,
+    ariaLabel = 'Box plot'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 12, r: 8, b: 28, l: 8 };
 
-  $: allVals = series.flatMap((s) => [s.q0, s.q1, s.q2, s.q3, s.q4]);
-  $: y0 = yRange ? yRange[0] : allVals.length ? Math.min(...allVals) : 0;
-  $: y1 = yRange ? yRange[1] : allVals.length ? Math.max(...allVals) : 1;
-  $: ySpan = y1 - y0 || 1;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: slotW = series.length > 0 ? chartW / series.length : chartW;
+  let allVals = $derived(series.flatMap((s) => [s.q0, s.q1, s.q2, s.q3, s.q4]));
+  let y0 = $derived(yRange ? yRange[0] : allVals.length ? Math.min(...allVals) : 0);
+  let y1 = $derived(yRange ? yRange[1] : allVals.length ? Math.max(...allVals) : 1);
+  let ySpan = $derived(y1 - y0 || 1);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let slotW = $derived(series.length > 0 ? chartW / series.length : chartW);
 
-  $: gridLines = [0.25, 0.5, 0.75, 1].map((f) => (PAD.t + (1 - f) * chartH).toFixed(1));
+  let gridLines = $derived([0.25, 0.5, 0.75, 1].map((f) => (PAD.t + (1 - f) * chartH).toFixed(1)));
 
-  $: boxes = series.map((s, i) => {
+  let boxes = $derived(series.map((s, i) => {
     const cx = PAD.l + (i + 0.5) * slotW;
     const bw = slotW * 0.4;
     const ty = (v: number) => PAD.t + chartH - ((v - y0) / ySpan) * chartH;
@@ -46,7 +58,7 @@
       boxH: (ty(s.q1) - ty(s.q3)).toFixed(1),
       medY: ty(s.q2).toFixed(1),
     };
-  });
+  }));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/Breadcrumb.svelte

@@ -1,13 +1,18 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface BreadcrumbItem { label: string; href?: string; }
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  export let items: BreadcrumbItem[] = [];
-  let className = '';
-  export { className as class };
-  const dispatch = createEventDispatcher<{ navigate: number }>();
+  
+  interface Props {
+    items?: BreadcrumbItem[];
+    class?: string;
+    onnavigate?: (payload: number) => void;
+  }
+
+  let { items = [], class: className = '',
+    onnavigate,
+  }: Props = $props();
 </script>
 
 <nav aria-label="Breadcrumb" class="breadcrumb {className}">
@@ -20,7 +25,7 @@
         {:else if item.href}
           <a href={item.href} class="breadcrumb__link">{item.label}</a>
         {:else}
-          <button type="button" class="breadcrumb__link" on:click={() => dispatch('navigate', i)}>{item.label}</button>
+          <button type="button" class="breadcrumb__link" onclick={() => onnavigate?.(i)}>{item.label}</button>
         {/if}
         {#if !isLast}
           <span aria-hidden="true" class="breadcrumb__sep">/</span>

package/src/lib/components/BubbleChart.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface BubblePoint {
     x: number;
     y: number;
@@ -7,44 +7,58 @@
     label?: string;
     key?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    points?: BubblePoint[];
+    xRange?: [number, number] | undefined;
+    yRange?: [number, number] | undefined;
+    rRange?: [number, number];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let points: BubblePoint[] = [];
-  export let xRange: [number, number] | undefined = undefined;
-  export let yRange: [number, number] | undefined = undefined;
-  export let rRange: [number, number] = [4, 20];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Bubble chart';
+  let {
+    points = [],
+    xRange = undefined,
+    yRange = undefined,
+    rRange = [4, 20],
+    height = 160,
+    ariaLabel = 'Bubble chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 12, r: 12, b: 12, l: 12 };
 
-  $: xs = points.map((p) => p.x);
-  $: ys = points.map((p) => p.y);
-  $: sizes = points.map((p) => p.size);
-  $: x0 = xRange ? xRange[0] : xs.length ? Math.min(...xs) : 0;
-  $: x1 = xRange ? xRange[1] : xs.length ? Math.max(...xs) : 1;
-  $: y0 = yRange ? yRange[0] : ys.length ? Math.min(...ys) : 0;
-  $: y1 = yRange ? yRange[1] : ys.length ? Math.max(...ys) : 1;
-  $: s0 = sizes.length ? Math.min(...sizes) : 0;
-  $: s1 = sizes.length ? Math.max(...sizes) : 1;
-  $: xSpan = x1 - x0 || 1;
-  $: ySpan = y1 - y0 || 1;
-  $: sSpan = s1 - s0 || 1;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
+  let xs = $derived(points.map((p) => p.x));
+  let ys = $derived(points.map((p) => p.y));
+  let sizes = $derived(points.map((p) => p.size));
+  let x0 = $derived(xRange ? xRange[0] : xs.length ? Math.min(...xs) : 0);
+  let x1 = $derived(xRange ? xRange[1] : xs.length ? Math.max(...xs) : 1);
+  let y0 = $derived(yRange ? yRange[0] : ys.length ? Math.min(...ys) : 0);
+  let y1 = $derived(yRange ? yRange[1] : ys.length ? Math.max(...ys) : 1);
+  let s0 = $derived(sizes.length ? Math.min(...sizes) : 0);
+  let s1 = $derived(sizes.length ? Math.max(...sizes) : 1);
+  let xSpan = $derived(x1 - x0 || 1);
+  let ySpan = $derived(y1 - y0 || 1);
+  let sSpan = $derived(s1 - s0 || 1);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
 
-  $: gridLines = [0.25, 0.5, 0.75].map((f) => ({
+  let gridLines = $derived([0.25, 0.5, 0.75].map((f) => ({
     gx: (PAD.l + f * chartW).toFixed(1),
     gy: (PAD.t + (1 - f) * chartH).toFixed(1),
-  }));
+  })));
 
-  $: bubbles = points.map((p, i) => ({
+  let bubbles = $derived(points.map((p, i) => ({
     cx: (PAD.l + ((p.x - x0) / xSpan) * chartW).toFixed(1),
     cy: (PAD.t + chartH - ((p.y - y0) / ySpan) * chartH).toFixed(1),
     r: (rRange[0] + ((p.size - s0) / sSpan) * (rRange[1] - rRange[0])).toFixed(1),
     color: p.color ?? '#006FFF',
     key: p.key ?? String(i),
-  }));
+  })));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/BulletChart.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface BulletItem {
     label: string;
     value: number;
@@ -7,10 +7,17 @@
     unit?: string;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: BulletItem[];
+    max?: number;
+    ariaLabel?: string;
+  }
 
-  export let items: BulletItem[] = [];
-  export let max: number = 100;
-  export let ariaLabel: string = 'Bullet chart';
+  let { items = [], max = 100, ariaLabel = 'Bullet chart' }: Props = $props();
 
   const VW = 400;
   const LABEL_W = 110;
@@ -20,10 +27,10 @@
   const ROW_H = 34;
   const PAD = 8;
 
-  $: trackW = VW - LABEL_W - VAL_W;
-  $: totalH = items.length * ROW_H + PAD * 2;
+  let trackW = $derived(VW - LABEL_W - VAL_W);
+  let totalH = $derived(items.length * ROW_H + PAD * 2);
 
-  $: rows = items.map((item, i) => {
+  let rows = $derived(items.map((item, i) => {
     const y = PAD + i * ROW_H;
     const midY = y + ROW_H / 2;
     const rangeY = midY - RANGE_H / 2;
@@ -46,7 +53,7 @@
       label: item.label,
       value: item.value,
     };
-  });
+  }));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">
@@ -62,7 +69,7 @@
       {#if row.targetX != null}
         <rect x={LABEL_W + row.targetX - 1.5} y={row.rangeY} width="3" height={RANGE_H} fill="rgba(255,255,255,0.85)" rx="1" />
       {/if}
-      <text x={LABEL_W + trackW + 6} y={row.midY + 4} fill="#fff" font-size="11" font-family="inherit" font-variant-numeric="tabular-nums">
+      <text x={LABEL_W + trackW + 6} y={row.midY + 4} fill="#fff" font-size="11" font-family="inherit" style="font-variant-numeric: tabular-nums">
         {row.value}{row.unit}
       </text>
     {/each}

package/src/lib/components/BumpChart.svelte

@@ -1,13 +1,20 @@
-<script lang="ts">
+<script module lang="ts">
   export interface BumpSeries {
     label: string;
     ranks: number[];
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    labels?: string[];
+    series?: BumpSeries[];
+    ariaLabel?: string;
+  }
 
-  export let labels: string[] = [];
-  export let series: BumpSeries[] = [];
-  export let ariaLabel: string = 'Bump chart';
+  let { labels = [], series = [], ariaLabel = 'Bump chart' }: Props = $props();
 
   const VW = 380;
   const PAD_L = 12;
@@ -18,10 +25,10 @@
   const DOT_R = 5;
   const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
 
-  $: maxRank = Math.max(...series.flatMap((s) => s.ranks), 1);
-  $: TRACK_W = VW - PAD_L - PAD_R;
-  $: svgH = PAD_T + maxRank * ROW_H + PAD_B;
-  $: rankRows = Array.from({ length: maxRank }, (_, i) => i);
+  let maxRank = $derived(Math.max(...series.flatMap((s) => s.ranks), 1));
+  let TRACK_W = $derived(VW - PAD_L - PAD_R);
+  let svgH = $derived(PAD_T + maxRank * ROW_H + PAD_B);
+  let rankRows = $derived(Array.from({ length: maxRank }, (_, i) => i));
 
   function xOf(i: number): number {
     return labels.length > 1

package/src/lib/components/Button.svelte

@@ -1,25 +1,46 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import Spinner from './Spinner.svelte';
-  export let variant: 'primary' | 'ghost' | 'danger' = 'ghost';
-  export let iconOnly = false;
-  export let loading = false;
-  export let title: string | undefined = undefined;
-  export let type: 'button' | 'submit' | 'reset' = 'button';
-  export let disabled = false;
-  let className = '';
-  export { className as class };
-  export let style: string = '';
+
+  interface Props {
+    variant?: 'primary' | 'ghost' | 'danger';
+    iconOnly?: boolean;
+    loading?: boolean;
+    title?: string | undefined;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+    'aria-label'?: string | undefined;
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'ghost',
+    iconOnly = false,
+    loading = false,
+    title = undefined,
+    type = 'button',
+    disabled = false,
+    class: className = '',
+    style = '',
+    'aria-label': ariaLabel = undefined,
+    onclick,
+    children,
+  }: Props = $props();
 </script>
 
 <button
   {type}
   {title}
-  on:click
+  aria-label={ariaLabel}
+  {onclick}
   class="btn btn-{variant} {iconOnly ? 'btn-icon' : ''} {className}"
   {style}
   disabled={disabled || loading}
   aria-busy={loading ? true : undefined}
 >
   {#if loading}<Spinner size="sm" />{/if}
-  <slot />
+  {@render children?.()}
 </button>

package/src/lib/components/CIDRInput.svelte

@@ -1,17 +1,25 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  
 
-  export let label: string | undefined = undefined;
-  export let value: string = '0.0.0.0/0';
-  export let disabled: boolean = false;
-  let className = '';
-  export { className as class };
+  interface Props {
+    label?: string | undefined;
+    value?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string }>();
+  let {
+    label = undefined,
+    value = $bindable('0.0.0.0/0'),
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-cidr-${++counter}`;
 
   function clampOctet(s: string): string {
@@ -34,8 +42,8 @@
     return [parts[0] ?? '0', parts[1] ?? '0', parts[2] ?? '0', parts[3] ?? '0', prefix];
   }
 
-  let fields: [string, string, string, string, string] = parseCIDR(value);
-  let inputs: (HTMLInputElement | null)[] = [null, null, null, null, null];
+  let fields: [string, string, string, string, string] = $state(parseCIDR(value));
+  let inputs: (HTMLInputElement | null)[] = $state([null, null, null, null, null]);
 
   function focusAt(i: number) {
     const el = inputs[i];
@@ -44,7 +52,7 @@
 
   function commitFields() {
     value = `${fields.slice(0, 4).join('.')}/${fields[4]}`;
-    dispatch('change', value);
+    onchange?.(value);
   }
 
   function commitOctet(i: number, raw: string) {
@@ -112,10 +120,10 @@
         {disabled}
         maxlength={3}
         class="cidr-input__octet"
-        on:input={(e) => commitOctet(i, e.currentTarget.value)}
-        on:keydown={(e) => handleKey(i, e)}
-        on:paste={handlePaste}
-        on:focus={(e) => e.currentTarget.select()}
+        oninput={(e) => commitOctet(i, e.currentTarget.value)}
+        onkeydown={(e) => handleKey(i, e)}
+        onpaste={handlePaste}
+        onfocus={(e) => e.currentTarget.select()}
       />
       <span class="cidr-input__dot" aria-hidden="true">{i < 3 ? '.' : '/'}</span>
     {/each}
@@ -133,10 +141,10 @@
       {disabled}
       maxlength={2}
       class="cidr-input__prefix"
-      on:input={(e) => commitPrefix(e.currentTarget.value)}
-      on:keydown={(e) => handleKey(4, e)}
-      on:paste={handlePaste}
-      on:focus={(e) => e.currentTarget.select()}
+      oninput={(e) => commitPrefix(e.currentTarget.value)}
+      onkeydown={(e) => handleKey(4, e)}
+      onpaste={handlePaste}
+      onfocus={(e) => e.currentTarget.select()}
     />
   </div>
 </div>

package/src/lib/components/CalendarHeatmap.svelte

@@ -1,12 +1,19 @@
-<script lang="ts">
+<script module lang="ts">
   export interface CalendarDay {
     date: string;
     value: number;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    data?: CalendarDay[];
+    maxValue?: number | undefined;
+    ariaLabel?: string;
+  }
 
-  export let data: CalendarDay[] = [];
-  export let maxValue: number | undefined = undefined;
-  export let ariaLabel: string = 'Calendar heatmap';
+  let { data = [], maxValue = undefined, ariaLabel = 'Calendar heatmap' }: Props = $props();
 
   const CELL = 10;
   const GAP = 2;
@@ -30,7 +37,7 @@
     return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
   }
 
-  $: ({ cells, monthLabels } = (() => {
+  let { cells, monthLabels } = $derived((() => {
     const byDate = new Map(data.map((d) => [d.date, d.value]));
     const mx = maxValue ?? Math.max(1, ...data.map((d) => d.value));
 

package/src/lib/components/Callout.svelte

@@ -1,10 +1,15 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type CalloutVariant = 'info' | 'success' | 'warn' | 'danger' | 'tip';
 </script>
 
 <script lang="ts">
-  export let variant: CalloutVariant = 'info';
-  export let title: string | undefined = undefined;
+  interface Props {
+    variant?: CalloutVariant;
+    title?: string | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let { variant = 'info', title = undefined, children }: Props = $props();
 </script>
 
 <div class="callout callout--{variant}" role="note">
@@ -33,6 +38,6 @@
     {#if title}
       <div class="callout-title">{title}</div>
     {/if}
-    <div><slot /></div>
+    <div>{@render children?.()}</div>
   </div>
 </div>