@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/RadarChart.svelte

@@ -1,14 +1,26 @@
-<script lang="ts">
+<script module lang="ts">
   export interface RadarSeries {
     label: string;
     color: string;
     values: number[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: RadarSeries[];
+    axes?: string[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: RadarSeries[] = [];
-  export let axes: string[] = [];
-  export let height: number = 200;
-  export let ariaLabel: string = 'Radar chart';
+  let {
+    series = [],
+    axes = [],
+    height = 200,
+    ariaLabel = 'Radar chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = 36;
@@ -21,36 +33,36 @@
     return coords.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
   }
 
-  $: n = axes.length;
-  $: cx = VW / 2;
-  $: cy = height / 2;
-  $: R = Math.min(cx, cy) - PAD;
-  $: angles = axes.map((_, i) => (2 * Math.PI * i) / n - Math.PI / 2);
+  let n = $derived(axes.length);
+  let cx = $derived(VW / 2);
+  let cy = $derived(height / 2);
+  let R = $derived(Math.min(cx, cy) - PAD);
+  let angles = $derived(axes.map((_, i) => (2 * Math.PI * i) / n - Math.PI / 2));
 
-  $: rings = n >= 3
+  let rings = $derived(n >= 3
     ? [0.25, 0.5, 0.75, 1.0].map((f) => makePts(angles.map((a) => pt(cx, cy, R * f, a))))
-    : [];
+    : []);
 
-  $: axisLines = n >= 3
+  let axisLines = $derived(n >= 3
     ? angles.map((a) => { const [x, y] = pt(cx, cy, R, a); return { x: x.toFixed(1), y: y.toFixed(1) }; })
-    : [];
+    : []);
 
-  $: axisLabels = n >= 3
+  let axisLabels = $derived(n >= 3
     ? axes.map((label, i) => {
         const [x, y] = pt(cx, cy, R + 16, angles[i]);
         const cos = Math.cos(angles[i]);
         const anchor = Math.abs(cos) < 0.3 ? 'middle' : cos < 0 ? 'end' : 'start';
         return { x: x.toFixed(1), y: y.toFixed(1), label, anchor };
       })
-    : [];
+    : []);
 
-  $: polygons = n >= 3
+  let polygons = $derived(n >= 3
     ? series.map((s) => ({
         pts: makePts(angles.map((a, i) => pt(cx, cy, R * Math.max(0, Math.min(1, s.values[i] ?? 0)), a))),
         color: s.color,
         label: s.label,
       }))
-    : [];
+    : []);
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/RadialBarChart.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface RadialBarItem {
     label: string;
     value: number;
@@ -6,9 +6,16 @@
     color?: string;
     unit?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: RadialBarItem[];
+    ariaLabel?: string;
+  }
 
-  export let items: RadialBarItem[] = [];
-  export let ariaLabel = 'Radial bar chart';
+  let { items = [], ariaLabel = 'Radial bar chart' }: Props = $props();
 
   const W = 280;
   const H = 160;
@@ -38,9 +45,9 @@
     return `M${x1},${y1} A${r},${r} 0 ${sweep > Math.PI ? 1 : 0} 1 ${x2},${y2}`;
   }
 
-  $: n = items.length;
-  $: yStart = CY - ((n - 1) * ITEM_H) / 2;
-  $: rings = items.map((item, i) => {
+  let n = $derived(items.length);
+  let yStart = $derived(CY - ((n - 1) * ITEM_H) / 2);
+  let rings = $derived(items.map((item, i) => {
     const r = MIN_R + (n - 1 - i) * (RING_W + RING_GAP);
     const frac = Math.min(item.value / (item.max || 1), 1);
     const color = item.color ?? '#006FFF';
@@ -56,7 +63,7 @@
       value: item.value,
       unit: item.unit ?? '',
     };
-  });
+  }));
 </script>
 
 {#if items.length}

package/src/lib/components/RadioGroup.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface RadioOption {
     value: string;
@@ -9,13 +9,25 @@
 </script>
 
 <script lang="ts">
-  export let legend: string;
-  export let name: string | undefined = undefined;
-  export let options: RadioOption[] = [];
-  export let value: string | undefined = undefined;
-  export let srOnlyLegend: boolean = false;
-  export let horizontal: boolean = false;
+  interface Props {
+    legend: string;
+    name?: string | undefined;
+    options?: RadioOption[];
+    value?: string | undefined;
+    srOnlyLegend?: boolean;
+    horizontal?: boolean;
+  }
+
+  let {
+    legend,
+    name = undefined,
+    options = [],
+    value = $bindable(undefined),
+    srOnlyLegend = false,
+    horizontal = false
+  }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   const groupName = name ?? `dash-ui-rg-${++counter}`;
 </script>
 
@@ -35,7 +47,7 @@
         checked={value === opt.value}
         disabled={opt.disabled}
         class="radio"
-        on:change={() => { value = opt.value; }}
+        onchange={() => { value = opt.value; }}
       />
       <span class="radio-text">
         <span>{opt.label}</span>

package/src/lib/components/RangeSlider.svelte

@@ -1,29 +1,41 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  
 
-  export let label: string | undefined = undefined;
-  export let min = 0;
-  export let max = 100;
-  export let step = 1;
-  export let low = 0;
-  export let high = 100;
-  export let suffix: string | undefined = undefined;
-  export let disabled = false;
-
-  const dispatch = createEventDispatcher<{ change: [number, number] }>();
+  interface Props {
+    label?: string | undefined;
+    min?: number;
+    max?: number;
+    step?: number;
+    low?: number;
+    high?: number;
+    suffix?: string | undefined;
+    disabled?: boolean;
+    onchange?: (payload: [number, number]) => void;
+  }
 
-  $: lowPct = max === min ? 0 : ((low - min) / (max - min)) * 100;
-  $: highPct = max === min ? 0 : ((high - min) / (max - min)) * 100;
-  $: lowOnTop = low >= max - step;
+  let {
+    label = undefined,
+    min = 0,
+    max = 100,
+    step = 1,
+    low = $bindable(0),
+    high = $bindable(100),
+    suffix = undefined,
+    disabled = false,
+    onchange,
+  }: Props = $props();
+  let lowPct = $derived(max === min ? 0 : ((low - min) / (max - min)) * 100);
+  let highPct = $derived(max === min ? 0 : ((high - min) / (max - min)) * 100);
+  let lowOnTop = $derived(low >= max - step);
 
   function handleLow(e: Event) {
     low = Math.min(Number((e.target as HTMLInputElement).value), high - step);
-    dispatch('change', [low, high]);
+    onchange?.([low, high]);
   }
 
   function handleHigh(e: Event) {
     high = Math.max(Number((e.target as HTMLInputElement).value), low + step);
-    dispatch('change', [low, high]);
+    onchange?.([low, high]);
   }
 </script>
 
@@ -51,7 +63,7 @@
       style="z-index:{lowOnTop ? 2 : 1}"
       aria-label={label ? `${label} minimum` : 'Minimum'}
       aria-valuetext={suffix ? `${low}${suffix}` : String(low)}
-      on:input={handleLow}
+      oninput={handleLow}
     />
     <input
       type="range"
@@ -62,7 +74,7 @@
       style="z-index:{lowOnTop ? 1 : 2}"
       aria-label={label ? `${label} maximum` : 'Maximum'}
       aria-valuetext={suffix ? `${high}${suffix}` : String(high)}
-      on:input={handleHigh}
+      oninput={handleHigh}
     />
   </div>
 </div>

package/src/lib/components/RankedList.svelte

@@ -1,17 +1,29 @@
-<script lang="ts">
+<script module lang="ts">
   export interface RankedItem {
     label: string;
     value: number;
     sublabel?: string;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items: RankedItem[];
+    unit?: string | undefined;
+    max?: number | undefined;
+    ariaLabel?: string;
+  }
 
-  export let items: RankedItem[];
-  export let unit: string | undefined = undefined;
-  export let max: number | undefined = undefined;
-  export let ariaLabel: string = 'Ranked list';
+  let {
+    items,
+    unit = undefined,
+    max = undefined,
+    ariaLabel = 'Ranked list'
+  }: Props = $props();
 
-  $: resolvedMax = max ?? Math.max(...items.map((i) => i.value), 1);
+  let resolvedMax = $derived(max ?? Math.max(...items.map((i) => i.value), 1));
 </script>
 
 <table class="rl" aria-label={ariaLabel}>

package/src/lib/components/ResizablePanel.svelte

@@ -1,17 +1,33 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type ResizableOrientation = 'horizontal' | 'vertical';
 </script>
 
 <script lang="ts">
-  export let defaultSize: number = 50;
-  export let min: number = 20;
-  export let max: number = 80;
-  export let orientation: ResizableOrientation = 'vertical';
-  export let label: string = 'Resize panels';
-  export let style: string = '';
+  interface Props {
+    defaultSize?: number;
+    min?: number;
+    max?: number;
+    orientation?: ResizableOrientation;
+    label?: string;
+    style?: string;
+    first?: import('svelte').Snippet;
+    second?: import('svelte').Snippet;
+  }
+
+  let {
+    defaultSize = 50,
+    min = 20,
+    max = 80,
+    orientation = 'vertical',
+    label = 'Resize panels',
+    style = '',
+    first,
+    second
+  }: Props = $props();
 
-  let size = defaultSize;
-  let container: HTMLDivElement;
+  // svelte-ignore state_referenced_locally
+  let size = $state(defaultSize);
+  let container = $state<HTMLDivElement | undefined>(undefined);
 
   function clamp(v: number) { return Math.min(max, Math.max(min, v)); }
 
@@ -49,16 +65,16 @@
     if (e.key === 'End') { e.preventDefault(); size = max; }
   }
 
-  $: firstStyle = orientation === 'vertical'
+  let firstStyle = $derived(orientation === 'vertical'
     ? `flex: 0 0 ${size}%; min-width: 0;`
-    : `flex: 0 0 ${size}%; min-height: 0;`;
+    : `flex: 0 0 ${size}%; min-height: 0;`);
 </script>
 
 <div bind:this={container} class="rp rp--{orientation}" {style}>
   <div class="rp-pane" style={firstStyle}>
-    <slot name="first" />
+    {@render first?.()}
   </div>
-  <!-- svelte-ignore a11y-no-noninteractive-tabindex a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
   <div
     role="separator"
     tabindex="0"
@@ -68,10 +84,10 @@
     aria-valuemax={max}
     aria-label={label}
     class="rp-handle"
-    on:mousedown={onMouseDown}
-    on:keydown={onKeyDown}
-  />
+    onmousedown={onMouseDown}
+    onkeydown={onKeyDown}
+></div>
   <div class="rp-pane rp-pane--second">
-    <slot name="second" />
+    {@render second?.()}
   </div>
 </div>

package/src/lib/components/RidgelinePlot.svelte

@@ -1,14 +1,26 @@
-<script lang="ts">
+<script module lang="ts">
   export interface RidgelineSeries {
     label: string;
     values: number[];
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: RidgelineSeries[];
+    xRange?: [number, number] | undefined;
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: RidgelineSeries[] = [];
-  export let xRange: [number, number] | undefined = undefined;
-  export let height: number = 180;
-  export let ariaLabel: string = 'Ridgeline plot';
+  let {
+    series = [],
+    xRange = undefined,
+    height = 180,
+    ariaLabel = 'Ridgeline plot'
+  }: Props = $props();
 
   const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
   const SQRT_TWO_PI = Math.sqrt(2 * Math.PI);
@@ -31,31 +43,31 @@
   }
 
   const VW = 380;
-  $: VH = height;
+  let VH = $derived(height);
   const PAD_L = 56;
   const PAD_R = 12;
   const PAD_T = 16;
   const PAD_B = 20;
 
-  $: TRACK_W = VW - PAD_L - PAD_R;
-  $: TRACK_H = VH - PAD_T - PAD_B;
-  $: n = series.length;
-  $: rowH = TRACK_H / n;
-  $: maxDensH = rowH * 1.6;
+  let TRACK_W = $derived(VW - PAD_L - PAD_R);
+  let TRACK_H = $derived(VH - PAD_T - PAD_B);
+  let n = $derived(series.length);
+  let rowH = $derived(TRACK_H / n);
+  let maxDensH = $derived(rowH * 1.6);
 
-  $: allVals = series.flatMap(s => s.values);
-  $: xMin = xRange ? xRange[0] : Math.min(...allVals);
-  $: xMax = xRange ? xRange[1] : Math.max(...allVals);
+  let allVals = $derived(series.flatMap(s => s.values));
+  let xMin = $derived(xRange ? xRange[0] : Math.min(...allVals));
+  let xMax = $derived(xRange ? xRange[1] : Math.max(...allVals));
 
-  $: evalPts = Array.from({ length: NUM_PTS }, (_, i) =>
+  let evalPts = $derived(Array.from({ length: NUM_PTS }, (_, i) =>
     xMin + (i / (NUM_PTS - 1)) * (xMax - xMin)
-  );
+  ));
 
   function xSvg(v: number): number {
     return PAD_L + ((v - xMin) / (xMax - xMin)) * TRACK_W;
   }
 
-  $: ridges = series.map((s, si) => {
+  let ridges = $derived(series.map((s, si) => {
     const h = bw(s.values);
     const dens = kde(s.values, h, evalPts);
     const maxD = Math.max(...dens, 1e-9);
@@ -70,14 +82,14 @@
     ].join(' ');
 
     return { d, baselineY, color, label: s.label };
-  });
+  }));
 
-  $: reversedRidges = [...ridges].reverse();
+  let reversedRidges = $derived([...ridges].reverse());
 
-  $: xTicks = [0, 0.25, 0.5, 0.75, 1].map(t => {
+  let xTicks = $derived([0, 0.25, 0.5, 0.75, 1].map(t => {
     const v = xMin + t * (xMax - xMin);
     return { v, x: xSvg(v) };
-  });
+  }));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/RowToggle.svelte

@@ -1,12 +1,22 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
   import Toggle from './Toggle.svelte';
-  export let title: string;
-  export let description: string;
-  export let on: boolean = false;
+  interface Props {
+    title: string;
+    description: string;
+    on?: boolean;
+    ontoggle?: (value: boolean) => void;
+  }
+
+  let {
+    title,
+    description,
+    on = $bindable(false),
+    ontoggle,
+  }: Props = $props();
   const descId = `dash-ui-rowtoggle-${++counter}`;
 </script>
 
@@ -15,5 +25,5 @@
     <div class="t">{title}</div>
     <div class="d" id={descId}>{description}</div>
   </div>
-  <Toggle bind:on ariaLabel={title} ariaDescribedBy={descId} on:toggle />
+  <Toggle bind:on ariaLabel={title} ariaDescribedBy={descId} {ontoggle} />
 </div>

package/src/lib/components/SankeyDiagram.svelte

@@ -1,11 +1,23 @@
-<script lang="ts">
+<script module lang="ts">
   export interface SankeyLink { source: string; target: string; value: number; }
   export interface SankeyNode { id: string; label: string; color?: string; }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    nodes?: SankeyNode[];
+    links?: SankeyLink[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let nodes: SankeyNode[] = [];
-  export let links: SankeyLink[] = [];
-  export let height: number = 180;
-  export let ariaLabel: string = 'Sankey diagram';
+  let {
+    nodes = [],
+    links = [],
+    height = 180,
+    ariaLabel = 'Sankey diagram'
+  }: Props = $props();
 
   const VW = 320;
   const NODE_W = 10;
@@ -16,7 +28,7 @@
   interface PositionedNode { id: string; label: string; color: string; x: number; y: number; h: number; side: 'left' | 'right'; }
   interface PathData { d: string; color: string; }
 
-  $: ({ positioned, paths } = (() => {
+  let { positioned, paths } = $derived((() => {
     if (!nodes.length || !links.length) return { positioned: [] as PositionedNode[], paths: [] as PathData[] };
 
     const nodeMap = new Map(nodes.map((n, i) => [n.id, { ...n, color: n.color ?? PALETTE[i % PALETTE.length] }]));

package/src/lib/components/ScatterPlot.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface ScatterPoint {
     x: number;
     y: number;
@@ -6,39 +6,52 @@
     r?: number;
     key?: string;
   }
+</script>
 
-  export let points: ScatterPoint[] = [];
-  export let xRange: [number, number] | undefined = undefined;
-  export let yRange: [number, number] | undefined = undefined;
-  export let height: number = 160;
-  export let ariaLabel: string = 'Scatter plot';
+<script lang="ts">
+
+  interface Props {
+    points?: ScatterPoint[];
+    xRange?: [number, number] | undefined;
+    yRange?: [number, number] | undefined;
+    height?: number;
+    ariaLabel?: string;
+  }
+
+  let {
+    points = [],
+    xRange = undefined,
+    yRange = undefined,
+    height = 160,
+    ariaLabel = 'Scatter plot'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 12, r: 8, b: 12, l: 8 };
 
-  $: xs = points.map((p) => p.x);
-  $: ys = points.map((p) => p.y);
-  $: 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;
-  $: xSpan = x1 - x0 || 1;
-  $: ySpan = y1 - y0 || 1;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-
-  $: gridLines = [0.25, 0.5, 0.75].map((f) => ({
+  let xs = $derived(points.map((p) => p.x));
+  let ys = $derived(points.map((p) => p.y));
+  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 xSpan = $derived(x1 - x0 || 1);
+  let ySpan = $derived(y1 - y0 || 1);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+
+  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),
-  }));
+  })));
 
-  $: dots = points.map((p, i) => ({
+  let dots = $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: p.r ?? 5,
     color: p.color ?? '#006FFF',
     key: p.key ?? String(i),
-  }));
+  })));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/SearchBox.svelte

@@ -1,11 +1,33 @@
 <script lang="ts">
   import SearchIcon from '../icons/SearchIcon.svelte';
-  export let placeholder: string = '';
-  export let value: string = '';
-  export let ariaLabel: string = '';
+
+  interface Props {
+    placeholder?: string;
+    value?: string;
+    ariaLabel?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+  }
+
+  let {
+    placeholder = '',
+    value = $bindable(''),
+    ariaLabel = '',
+    oninput,
+    onchange,
+  }: Props = $props();
 </script>
 
 <div class="search" role="search">
-  <span aria-hidden="true" style="display:inline-flex"><SearchIcon size={14} style="color:#6E7079" /></span>
-  <input type="search" {placeholder} aria-label={ariaLabel || placeholder} bind:value on:input on:change />
+  <span aria-hidden="true" style="display:inline-flex">
+    <SearchIcon size={14} style="color:#6E7079" />
+  </span>
+  <input
+    type="search"
+    {placeholder}
+    aria-label={ariaLabel || placeholder}
+    bind:value
+    {oninput}
+    {onchange}
+  />
 </div>