@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/ParetoChart.svelte

@@ -1,33 +1,47 @@
-<script lang="ts">
+<script module lang="ts">
   export interface ParetoItem {
     label: string;
     value: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: ParetoItem[];
+    height?: number;
+    ariaLabel?: string;
+    barColor?: string;
+    lineColor?: string;
+    threshold?: number;
+  }
 
-  export let items: ParetoItem[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Pareto chart';
-  export let barColor: string = '#006FFF';
-  export let lineColor: string = '#F5A623';
-  export let threshold: number = 0.8;
+  let {
+    items = [],
+    height = 160,
+    ariaLabel = 'Pareto chart',
+    barColor = '#006FFF',
+    lineColor = '#F5A623',
+    threshold = 0.8
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 12, r: 40, b: 28, l: 8 };
 
-  $: sorted = [...items].sort((a, b) => b.value - a.value);
-  $: total = sorted.reduce((s, it) => s + it.value, 0) || 1;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: bot = PAD.t + chartH;
-  $: maxV = sorted[0]?.value || 1;
-  $: barW = sorted.length > 0 ? chartW / sorted.length : chartW;
-  $: gap = barW * 0.15;
-  $: bw = Math.max(barW - gap * 2, 1);
+  let sorted = $derived([...items].sort((a, b) => b.value - a.value));
+  let total = $derived(sorted.reduce((s, it) => s + it.value, 0) || 1);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let bot = $derived(PAD.t + chartH);
+  let maxV = $derived(sorted[0]?.value || 1);
+  let barW = $derived(sorted.length > 0 ? chartW / sorted.length : chartW);
+  let gap = $derived(barW * 0.15);
+  let bw = $derived(Math.max(barW - gap * 2, 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 = sorted.map((item, i) => {
+  let bars = $derived(sorted.map((item, i) => {
     const bh = (item.value / maxV) * chartH;
     const x = PAD.l + i * barW + gap;
     return {
@@ -39,9 +53,9 @@
       color: item.color ?? barColor,
       key: `b${i}`,
     };
-  });
+  }));
 
-  $: linePoints = (() => {
+  let linePoints = $derived((() => {
     let cumSum = 0;
     const pts: string[] = [`${PAD.l},${bot}`];
     sorted.forEach((item, i) => {
@@ -52,14 +66,14 @@
       pts.push(`${x.toFixed(1)},${y.toFixed(1)}`);
     });
     return pts.join(' ');
-  })();
+  })());
 
-  $: thresholdY = threshold > 0 ? (PAD.t + (1 - threshold) * chartH).toFixed(1) : null;
+  let thresholdY = $derived(threshold > 0 ? (PAD.t + (1 - threshold) * chartH).toFixed(1) : null);
 
-  $: pctLabels = [0, 50, 100].map((pct) => ({
+  let pctLabels = $derived([0, 50, 100].map((pct) => ({
     label: `${pct}%`,
     y: (PAD.t + (1 - pct / 100) * chartH + 3).toFixed(1),
-  }));
+  })));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/PasswordInput.svelte

@@ -1,26 +1,36 @@
-<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 = '';
-  export let placeholder: string | undefined = undefined;
-  export let disabled: boolean = false;
-  export let autocomplete: 'current-password' | 'new-password' | 'off' = 'current-password';
-  let className = '';
-  export { className as class };
+  interface Props {
+    label?: string | undefined;
+    value?: string;
+    placeholder?: string | undefined;
+    disabled?: boolean;
+    autocomplete?: 'current-password' | 'new-password' | 'off';
+    class?: string;
+    onchange?: (payload: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string }>();
+  let {
+    label = undefined,
+    value = $bindable(''),
+    placeholder = undefined,
+    disabled = false,
+    autocomplete = 'current-password',
+    class: className = '',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-pwd-${++counter}`;
 
-  let shown = false;
+  let shown = $state(false);
 
   function handleInput(e: Event) {
     value = (e.target as HTMLInputElement).value;
-    dispatch('change', value);
+    onchange?.(value);
   }
 </script>
 
@@ -37,7 +47,7 @@
       {placeholder}
       {disabled}
       {autocomplete}
-      on:input={handleInput}
+      oninput={handleInput}
     />
     <button
       type="button"
@@ -45,7 +55,7 @@
       aria-pressed={shown}
       aria-label={shown ? 'Hide password' : 'Show password'}
       {disabled}
-      on:click={() => (shown = !shown)}
+      onclick={() => (shown = !shown)}
     >
       {#if shown}
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">

package/src/lib/components/PieChart.svelte

@@ -1,17 +1,25 @@
-<script lang="ts">
+<script module lang="ts">
   export interface PieSlice {
     label: string;
     value: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    slices?: PieSlice[];
+    size?: number;
+    ariaLabel?: string;
+  }
 
-  export let slices: PieSlice[] = [];
-  export let size: number = 140;
-  export let ariaLabel: string = 'Pie chart';
+  let { slices = [], size = 140, ariaLabel = 'Pie chart' }: Props = $props();
 
   const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#A878F5', '#FF6B6B', '#00C875', '#7FB6FF', '#6E7079'];
   const TAU = 2 * Math.PI;
   const START = -Math.PI / 2;
+  const LEGEND_ROW = 18;
 
   function arcPath(cx: number, cy: number, r: number, a0: number, a1: number): string {
     const x0 = cx + r * Math.cos(a0);
@@ -22,15 +30,15 @@
     return `M ${cx} ${cy} L ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${x1.toFixed(2)} ${y1.toFixed(2)} Z`;
   }
 
-  $: total = slices.reduce((s, sl) => s + sl.value, 0) || 1;
-  $: cx = size / 2;
-  $: cy = size / 2;
-  $: r = (size / 2) * 0.82;
-  $: LEGEND_ROW = 18;
-  $: legendH = Math.ceil(slices.length / 2) * LEGEND_ROW + 6;
-  $: VH = size + legendH;
+  let total = $derived(slices.reduce((s, sl) => s + sl.value, 0) || 1);
+  let cx = $derived(size / 2);
+  let cy = $derived(size / 2);
+  let r = $derived((size / 2) * 0.82);
+  
+  let legendH = $derived(Math.ceil(slices.length / 2) * LEGEND_ROW + 6);
+  let VH = $derived(size + legendH);
 
-  $: segments = (() => {
+  let segments = $derived((() => {
     const result: { path: string; color: string; mid: number }[] = [];
     let angle = START;
     for (let i = 0; i < slices.length; i++) {
@@ -41,7 +49,7 @@
       angle += span;
     }
     return result;
-  })();
+  })());
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/Pill.svelte

@@ -1,12 +1,23 @@
 <script lang="ts">
-  export let variant: 'success' | 'warn' | 'danger' | 'info' | 'neutral' = 'neutral';
-  export let showDot: boolean = true;
-  let className = '';
-  export { className as class };
-  export let style: string = '';
+  
+  interface Props {
+    variant?: 'success' | 'warn' | 'danger' | 'info' | 'neutral';
+    showDot?: boolean;
+    class?: string;
+    style?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    variant = 'neutral',
+    showDot = true,
+    class: className = '',
+    style = '',
+    children
+  }: Props = $props();
 </script>
 
 <span class="pill pill-{variant} {className}" {style}>
   {#if showDot}<span class="dot" aria-hidden="true"></span>{/if}
-  <slot />
+  {@render children?.()}
 </span>

package/src/lib/components/PolarHeatmap.svelte

@@ -1,16 +1,30 @@
-<script lang="ts">
+<script module lang="ts">
   export interface PolarCell {
     row: number;
     col: number;
     value: number;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    data?: PolarCell[];
+    rows?: number;
+    cols?: number;
+    colLabels?: string[];
+    color?: string;
+    ariaLabel?: string;
+  }
 
-  export let data: PolarCell[] = [];
-  export let rows: number = 7;
-  export let cols: number = 24;
-  export let colLabels: string[] = [];
-  export let color: string = '#006FFF';
-  export let ariaLabel: string = 'Polar heatmap';
+  let {
+    data = [],
+    rows = 7,
+    cols = 24,
+    colLabels = [],
+    color = '#006FFF',
+    ariaLabel = 'Polar heatmap'
+  }: Props = $props();
 
   const SIZE = 280;
   const CX = SIZE / 2;
@@ -36,14 +50,14 @@
     ].join(' ');
   }
 
-  $: maxVal = data.length ? Math.max(...data.map((d) => d.value), 1) : 1;
-  $: ringH = (MAX_R - MIN_R) / rows;
-  $: segA = (2 * Math.PI) / cols;
-  $: [rC, gC, bC] = hexToRgb(color);
-  $: LABEL_R = MAX_R + 14;
-  $: labelEvery = cols <= 12 ? 1 : cols <= 24 ? 3 : Math.round(cols / 8);
-  $: rings = Array.from({ length: rows + 1 }, (_, i) => +(MIN_R + i * ringH).toFixed(2));
-  $: cells = data.map((cell) => {
+  let maxVal = $derived(data.length ? Math.max(...data.map((d) => d.value), 1) : 1);
+  let ringH = $derived((MAX_R - MIN_R) / rows);
+  let segA = $derived((2 * Math.PI) / cols);
+  let [rC, gC, bC] = $derived(hexToRgb(color));
+  let LABEL_R = $derived(MAX_R + 14);
+  let labelEvery = $derived(cols <= 12 ? 1 : cols <= 24 ? 3 : Math.round(cols / 8));
+  let rings = $derived(Array.from({ length: rows + 1 }, (_, i) => +(MIN_R + i * ringH).toFixed(2)));
+  let cells = $derived(data.map((cell) => {
     const ir = MIN_R + cell.row * ringH;
     const or = ir + ringH - 0.5;
     const sa = BASE + cell.col * segA + 0.01;
@@ -53,8 +67,8 @@
       d: annularSector(ir, or, sa, ea),
       fill: `rgba(${rC},${gC},${bC},${(0.08 + 0.92 * norm).toFixed(3)})`,
     };
-  });
-  $: visibleColLabels = colLabels
+  }));
+  let visibleColLabels = $derived(colLabels
     .map((label, i) => {
       if (i % labelEvery !== 0) return null;
       const a = BASE + (i + 0.5) * segA;
@@ -64,7 +78,7 @@
         label,
       };
     })
-    .filter(Boolean) as { x: string; y: string; label: string }[];
+    .filter(Boolean) as { x: string; y: string; label: string }[]);
 </script>
 
 {#if data.length}

package/src/lib/components/Popover.svelte

@@ -1,14 +1,25 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
 
-  export let label: string;
-  export let variant: 'ghost' | 'primary' = 'ghost';
-  export let title: string | undefined = undefined;
-  export let placement: 'bottom-start' | 'bottom-end' | 'bottom' = 'bottom-start';
+  interface Props {
+    label: string;
+    variant?: 'ghost' | 'primary';
+    title?: string | undefined;
+    placement?: 'bottom-start' | 'bottom-end' | 'bottom';
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    label,
+    variant = 'ghost',
+    title = undefined,
+    placement = 'bottom-start',
+    children
+  }: Props = $props();
 
   const uid = `dash-ui-pop-${++counter}`;
   const titleId = `${uid}-title`;
@@ -16,10 +27,10 @@
   const FOCUSABLE =
     'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 
-  let open = false;
-  let rootEl: HTMLDivElement;
-  let triggerEl: HTMLButtonElement;
-  let panelEl: HTMLDivElement;
+  let open = $state(false);
+  let rootEl = $state<HTMLDivElement | undefined>(undefined);
+  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let panelEl = $state<HTMLDivElement | undefined>(undefined);
 
   async function toggle() {
     if (!open) {
@@ -72,7 +83,7 @@
     class="btn btn-{variant}"
     aria-haspopup="dialog"
     aria-expanded={open}
-    on:click={toggle}
+    onclick={toggle}
   >{label}</button>
   {#if open}
     <div
@@ -83,7 +94,7 @@
       tabindex="-1"
     >
       {#if title}<div id={titleId} class="popover-h">{title}</div>{/if}
-      <div class="popover-b"><slot /></div>
+      <div class="popover-b">{@render children?.()}</div>
     </div>
   {/if}
 </div>

package/src/lib/components/ProgressBar.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
-  export let value: number;
-  export let label: string | undefined = undefined;
-  export let valueText: string | undefined = undefined;
-  export let color: string = '#006FFF';
-  $: clamped = Math.max(0, Math.min(100, value));
-  $: displayed = valueText ?? `${Math.round(clamped)}%`;
-  $: hasHeader = label !== undefined || valueText !== undefined;
+  interface Props {
+    value: number;
+    label?: string | undefined;
+    valueText?: string | undefined;
+    color?: string;
+  }
+
+  let {
+    value,
+    label = undefined,
+    valueText = undefined,
+    color = '#006FFF'
+  }: Props = $props();
+  let clamped = $derived(Math.max(0, Math.min(100, value)));
+  let displayed = $derived(valueText ?? `${Math.round(clamped)}%`);
+  let hasHeader = $derived(label !== undefined || valueText !== undefined);
 </script>
 
 <div class="pb">
@@ -24,6 +33,6 @@
     aria-label={label}
     aria-valuetext={displayed}
   >
-    <div class="pb-fill" style="width:{clamped}%;background:{color};" />
+    <div class="pb-fill" style="width:{clamped}%;background:{color};"></div>
   </div>
 </div>

package/src/lib/components/PunchCard.svelte

@@ -1,40 +1,51 @@
-<script context="module">
+<script module>
   let _n = 0;
 </script>
 <script lang="ts">
   const _uid = `pc${_n++}`;
 
-  export let data: number[][];
-  export let rowLabels: string[] | undefined = undefined;
-  export let colLabels: string[] | undefined = undefined;
-  export let color: string = '#006FFF';
-  export let height: number = 180;
-  export let ariaLabel: string = 'Punch card chart';
+  interface Props {
+    data: number[][];
+    rowLabels?: string[] | undefined;
+    colLabels?: string[] | undefined;
+    color?: string;
+    height?: number;
+    ariaLabel?: string;
+  }
+
+  let {
+    data,
+    rowLabels = undefined,
+    colLabels = undefined,
+    color = '#006FFF',
+    height = 180,
+    ariaLabel = 'Punch card chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 16, r: 8, b: 28, l: 28 };
   const DEFAULT_ROWS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-  $: rows = data.length;
-  $: cols = data[0]?.length ?? 0;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: cellW = chartW / (cols || 1);
-  $: cellH = chartH / (rows || 1);
-  $: maxR = Math.min(cellW, cellH) / 2 * 0.85;
-  $: maxVal = Math.max(...data.flat(), 1);
-  $: rLabels = rowLabels ?? DEFAULT_ROWS.slice(0, rows);
-  $: cLabels = colLabels ?? Array.from({ length: cols }, (_, i) =>
+  let rows = $derived(data.length);
+  let cols = $derived(data[0]?.length ?? 0);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let cellW = $derived(chartW / (cols || 1));
+  let cellH = $derived(chartH / (rows || 1));
+  let maxR = $derived(Math.min(cellW, cellH) / 2 * 0.85);
+  let maxVal = $derived(Math.max(...data.flat(), 1));
+  let rLabels = $derived(rowLabels ?? DEFAULT_ROWS.slice(0, rows));
+  let cLabels = $derived(colLabels ?? Array.from({ length: cols }, (_, i) =>
     i % 6 === 0 ? String(i).padStart(2, '0') : ''
-  );
-  $: dots = data.flatMap((row, ri) =>
+  ));
+  let dots = $derived(data.flatMap((row, ri) =>
     row.map((val, ci) => ({
       ri, ci,
       r: Math.sqrt(val / maxVal) * maxR,
       cx: PAD.l + (ci + 0.5) * cellW,
       cy: PAD.t + (ri + 0.5) * cellH,
     }))
-  ).filter(d => d.r >= 0.4);
+  ).filter(d => d.r >= 0.4));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%">

package/src/lib/components/QuadrantChart.svelte

@@ -1,57 +1,77 @@
-<script lang="ts">
+<script module lang="ts">
   export interface QuadrantPoint {
     x: number;
     y: number;
     label?: string;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  
+  interface Props {
+    points?: QuadrantPoint[];
+    xThreshold: number;
+    yThreshold: number;
+    xRange?: [number, number] | undefined;
+    yRange?: [number, number] | undefined;
+    /** Labels: [top-left, top-right, bottom-left, bottom-right] */
+    quadrantLabels?: [string, string, string, string];
+    quadrantColors?: [string, string, string, string];
+    xLabel?: string | undefined;
+    yLabel?: string | undefined;
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let points: QuadrantPoint[] = [];
-  export let xThreshold: number;
-  export let yThreshold: number;
-  export let xRange: [number, number] | undefined = undefined;
-  export let yRange: [number, number] | undefined = undefined;
-  /** Labels: [top-left, top-right, bottom-left, bottom-right] */
-  export let quadrantLabels: [string, string, string, string] = ['', '', '', ''];
-  export let quadrantColors: [string, string, string, string] = [
+  let {
+    points = [],
+    xThreshold,
+    yThreshold,
+    xRange = undefined,
+    yRange = undefined,
+    quadrantLabels = ['', '', '', ''],
+    quadrantColors = [
     'rgba(0,200,117,0.06)',
     'rgba(245,166,35,0.07)',
     'rgba(0,111,255,0.06)',
     'rgba(255,123,123,0.09)',
-  ];
-  export let xLabel: string | undefined = undefined;
-  export let yLabel: string | undefined = undefined;
-  export let height = 200;
-  export let ariaLabel = 'Quadrant chart';
+  ],
+    xLabel = undefined,
+    yLabel = undefined,
+    height = 200,
+    ariaLabel = 'Quadrant chart'
+  }: Props = $props();
 
   const VW = 360;
   const PAD = { t: 8, r: 8, b: 28, l: 36 };
 
-  $: xs = points.map((p) => p.x);
-  $: ys = points.map((p) => p.y);
-  $: x0 = xRange ? xRange[0] : Math.min(...xs, xThreshold - 1);
-  $: x1 = xRange ? xRange[1] : Math.max(...xs, xThreshold + 1);
-  $: y0 = yRange ? yRange[0] : Math.min(...ys, yThreshold - 1);
-  $: y1 = yRange ? yRange[1] : Math.max(...ys, yThreshold + 1);
-  $: xSpan = x1 - x0 || 1;
-  $: ySpan = y1 - y0 || 1;
-  $: cw = VW - PAD.l - PAD.r;
-  $: ch = height - PAD.t - PAD.b;
+  let xs = $derived(points.map((p) => p.x));
+  let ys = $derived(points.map((p) => p.y));
+  let x0 = $derived(xRange ? xRange[0] : Math.min(...xs, xThreshold - 1));
+  let x1 = $derived(xRange ? xRange[1] : Math.max(...xs, xThreshold + 1));
+  let y0 = $derived(yRange ? yRange[0] : Math.min(...ys, yThreshold - 1));
+  let y1 = $derived(yRange ? yRange[1] : Math.max(...ys, yThreshold + 1));
+  let xSpan = $derived(x1 - x0 || 1);
+  let ySpan = $derived(y1 - y0 || 1);
+  let cw = $derived(VW - PAD.l - PAD.r);
+  let ch = $derived(height - PAD.t - PAD.b);
 
   function toX(x: number) { return PAD.l + ((x - x0) / xSpan) * cw; }
   function toY(y: number) { return PAD.t + ch - ((y - y0) / ySpan) * ch; }
 
-  $: tx = toX(xThreshold);
-  $: ty = toY(yThreshold);
-  $: xTicks = [x0, xThreshold, x1];
-  $: yTicks = [y0, yThreshold, y1];
+  let tx = $derived(toX(xThreshold));
+  let ty = $derived(toY(yThreshold));
+  let xTicks = $derived([x0, xThreshold, x1]);
+  let yTicks = $derived([y0, yThreshold, y1]);
 
-  $: dots = points.map((p) => ({
+  let dots = $derived(points.map((p) => ({
     cx: toX(p.x),
     cy: toY(p.y),
     color: p.color ?? '#006FFF',
     label: p.label,
-  }));
+  })));
 </script>
 
 {#if points.length > 0}