@w5-ui/svelte 0.1.0 → 0.2.1

package/src/lib/components/DualAxisChart.svelte

@@ -1,15 +1,28 @@
-<script lang="ts">
+<script module lang="ts">
   export interface DualAxisSeries {
     label: string;
     color: string;
     values: number[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    bars: DualAxisSeries;
+    line: DualAxisSeries;
+    labels?: string[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let bars: DualAxisSeries;
-  export let line: DualAxisSeries;
-  export let labels: string[] = [];
-  export let height = 160;
-  export let ariaLabel = 'Dual axis chart';
+  let {
+    bars,
+    line,
+    labels = [],
+    height = 160,
+    ariaLabel = 'Dual axis chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 16, r: 44, b: 28, l: 44 };
@@ -19,32 +32,32 @@
     return String(Math.round(n));
   }
 
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: bot = PAD.t + chartH;
-  $: n = bars.values.length;
-  $: gw = n > 0 ? chartW / n : chartW;
-  $: barW = gw * 0.55;
-  $: barMax = Math.max(...bars.values, 1);
-  $: lineMin = Math.min(...line.values);
-  $: lineMax = Math.max(...line.values, lineMin + 1);
-  $: lineRange = lineMax - lineMin || 1;
-  $: gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
-  $: leftTicks = [0, 0.5, 1].map((f) => ({ y: PAD.t + (1 - f) * chartH, label: fmtTick(barMax * f) }));
-  $: rightTicks = [0, 0.5, 1].map((f) => ({ y: PAD.t + (1 - f) * chartH, label: fmtTick(lineMin + lineRange * f) }));
-  $: barRects = bars.values.map((v, i) => ({
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let bot = $derived(PAD.t + chartH);
+  let n = $derived(bars.values.length);
+  let gw = $derived(n > 0 ? chartW / n : chartW);
+  let barW = $derived(gw * 0.55);
+  let barMax = $derived(Math.max(...bars.values, 1));
+  let lineMin = $derived(Math.min(...line.values));
+  let lineMax = $derived(Math.max(...line.values, lineMin + 1));
+  let lineRange = $derived(lineMax - lineMin || 1);
+  let gridLines = $derived([0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH));
+  let leftTicks = $derived([0, 0.5, 1].map((f) => ({ y: PAD.t + (1 - f) * chartH, label: fmtTick(barMax * f) })));
+  let rightTicks = $derived([0, 0.5, 1].map((f) => ({ y: PAD.t + (1 - f) * chartH, label: fmtTick(lineMin + lineRange * f) })));
+  let barRects = $derived(bars.values.map((v, i) => ({
     x: (PAD.l + i * gw + gw / 2 - barW / 2).toFixed(1),
     y: (bot - (v / barMax) * chartH).toFixed(1),
     w: barW.toFixed(1),
     h: ((v / barMax) * chartH).toFixed(1),
-  }));
-  $: linePoints = line.values.map((v, i) =>
+  })));
+  let linePoints = $derived(line.values.map((v, i) =>
     `${(PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2)).toFixed(1)},${(PAD.t + chartH - ((v - lineMin) / lineRange) * chartH).toFixed(1)}`
-  );
-  $: linePath = linePoints.length ? `M ${linePoints.join(' L ')}` : '';
-  $: lineArea = linePoints.length
+  ));
+  let linePath = $derived(linePoints.length ? `M ${linePoints.join(' L ')}` : '');
+  let lineArea = $derived(linePoints.length
     ? `M ${PAD.l.toFixed(1)},${bot.toFixed(1)} L ${linePoints.join(' L ')} L ${(PAD.l + (n > 1 ? chartW : 0)).toFixed(1)},${bot.toFixed(1)} Z`
-    : '';
+    : '');
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/DumbbellChart.svelte

@@ -1,15 +1,27 @@
-<script lang="ts">
+<script module lang="ts">
   export interface DumbbellItem {
     label: string;
     start: number;
     end: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: DumbbellItem[];
+    unit?: string;
+    color?: string;
+    ariaLabel?: string;
+  }
 
-  export let items: DumbbellItem[] = [];
-  export let unit: string = '';
-  export let color: string = '#006FFF';
-  export let ariaLabel: string = 'Dumbbell chart';
+  let {
+    items = [],
+    unit = '',
+    color = '#006FFF',
+    ariaLabel = 'Dumbbell chart'
+  }: Props = $props();
 
   const VW = 340;
   const LABEL_W = 110;
@@ -21,19 +33,19 @@
   const AXIS_H = 18;
   const TICKS = 4;
 
-  $: allValues = items.flatMap((it) => [it.start, it.end]);
-  $: minVal = allValues.length ? Math.min(...allValues) : 0;
-  $: maxVal = allValues.length ? Math.max(...allValues) : 1;
-  $: range = maxVal - minVal || 1;
-  $: svgH = PAD_T + items.length * ROW_H + AXIS_H;
+  let allValues = $derived(items.flatMap((it) => [it.start, it.end]));
+  let minVal = $derived(allValues.length ? Math.min(...allValues) : 0);
+  let maxVal = $derived(allValues.length ? Math.max(...allValues) : 1);
+  let range = $derived(maxVal - minVal || 1);
+  let svgH = $derived(PAD_T + items.length * ROW_H + AXIS_H);
 
   function tx(v: number): number {
     return LABEL_W + ((v - minVal) / range) * TRACK_W;
   }
 
-  $: ticks = Array.from({ length: TICKS + 1 }, (_, i) =>
+  let ticks = $derived(Array.from({ length: TICKS + 1 }, (_, i) =>
     Math.round(minVal + (i / TICKS) * range),
-  );
+  ));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/DurationInput.svelte

@@ -1,18 +1,27 @@
-<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: number = 0;
-  export let maxHours: number = 99;
-  export let disabled: boolean = false;
-  let className = '';
-  export { className as class };
+  interface Props {
+    label?: string | undefined;
+    value?: number;
+    maxHours?: number;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: number) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: number }>();
+  let {
+    label = undefined,
+    value = $bindable(0),
+    maxHours = 99,
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-dur-${++counter}`;
 
   function toHMS(secs: number): [number, number, number] {
@@ -28,9 +37,9 @@
     return String(n).padStart(2, '0');
   }
 
-  $: [hours, minutes, seconds] = toHMS(value);
+  let [hours, minutes, seconds] = $derived(toHMS(value));
 
-  let inputs: [HTMLInputElement | null, HTMLInputElement | null, HTMLInputElement | null] = [null, null, null];
+  let inputs: [HTMLInputElement | null, HTMLInputElement | null, HTMLInputElement | null] = $state([null, null, null]);
 
   function focusAt(i: number) {
     const el = inputs[i];
@@ -39,7 +48,7 @@
 
   function commit(h: number, m: number, s: number) {
     value = fromHMS(Math.min(maxHours, h), m, s);
-    dispatch('change', value);
+    onchange?.(value);
   }
 
   function handleKey(field: number, e: KeyboardEvent) {
@@ -80,8 +89,8 @@
     { idx: 2, ariaLabel: 'Seconds' },
   ];
 
-  $: fieldVals = [hours, minutes, seconds];
-  $: fieldMaxes = [maxHours, 59, 59];
+  let fieldVals = $derived([hours, minutes, seconds]);
+  let fieldMaxes = $derived([maxHours, 59, 59]);
 </script>
 
 <div class="dur-input-wrapper {className}">
@@ -106,9 +115,9 @@
         {disabled}
         maxlength={2}
         class="dur-input__field"
-        on:input={(e) => handleInput(idx, e)}
-        on:keydown={(e) => handleKey(idx, e)}
-        on:focus={(e) => e.currentTarget.select()}
+        oninput={(e) => handleInput(idx, e)}
+        onkeydown={(e) => handleKey(idx, e)}
+        onfocus={(e) => e.currentTarget.select()}
       />
       {#if i < 2}
         <span class="dur-input__sep" aria-hidden="true">:</span>

package/src/lib/components/EmptyState.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">
-  export let title: string;
-  export let description: string | undefined = undefined;
-  let className = '';
-  export { className as class };
+  interface Props {
+    title: string;
+    description?: string | undefined;
+    class?: string;
+    action?: import('svelte').Snippet;
+  }
+
+  let {
+    title,
+    description = undefined,
+    class: className = '',
+    action
+  }: Props = $props();
+  
 </script>
 
 <div role="status" aria-live="polite" class="empty-state {className}">
@@ -15,7 +25,7 @@
   {#if description}
     <p class="empty-state__desc">{description}</p>
   {/if}
-  {#if $$slots.action}
-    <div class="empty-state__action"><slot name="action" /></div>
+  {#if action}
+    <div class="empty-state__action">{@render action?.()}</div>
   {/if}
 </div>

package/src/lib/components/ErrorBandChart.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface ErrorBandSeries {
     label: string;
     color: string;
@@ -6,13 +6,27 @@
     lower: number[];
     upper: number[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: ErrorBandSeries[];
+    xLabels?: string[];
+    yRange?: [number, number] | undefined;
+    height?: number;
+    unit?: string;
+    ariaLabel?: string;
+  }
 
-  export let series: ErrorBandSeries[] = [];
-  export let xLabels: string[] = [];
-  export let yRange: [number, number] | undefined = undefined;
-  export let height = 180;
-  export let unit = '';
-  export let ariaLabel = 'Error band chart';
+  let {
+    series = [],
+    xLabels = [],
+    yRange = undefined,
+    height = 180,
+    unit = '',
+    ariaLabel = 'Error band chart'
+  }: Props = $props();
 
   const VW = 340;
   const PAD_L = 28;
@@ -21,13 +35,13 @@
   const PAD_B = 20;
   const PLOT_W = VW - PAD_L - PAD_R;
 
-  $: n = series.length ? series[0].mean.length : 0;
-  $: PLOT_H = height - PAD_T - PAD_B;
-  $: allVals = series.flatMap((s) => [...s.lower, ...s.upper]);
-  $: minV = yRange ? yRange[0] : allVals.length ? Math.min(...allVals) : 0;
-  $: maxV = yRange ? yRange[1] : allVals.length ? Math.max(...allVals) : 1;
-  $: vRange = maxV - minV || 1;
-  $: yTicks = [minV, (minV + maxV) / 2, maxV];
+  let n = $derived(series.length ? series[0].mean.length : 0);
+  let PLOT_H = $derived(height - PAD_T - PAD_B);
+  let allVals = $derived(series.flatMap((s) => [...s.lower, ...s.upper]));
+  let minV = $derived(yRange ? yRange[0] : allVals.length ? Math.min(...allVals) : 0);
+  let maxV = $derived(yRange ? yRange[1] : allVals.length ? Math.max(...allVals) : 1);
+  let vRange = $derived(maxV - minV || 1);
+  let yTicks = $derived([minV, (minV + maxV) / 2, maxV]);
 
   function tx(i: number): number {
     return PAD_L + (i / (n - 1 || 1)) * PLOT_W;

package/src/lib/components/ExpandableRow.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
-  export let colSpan: number;
-  export let defaultExpanded: boolean = false;
+  interface Props {
+    colSpan: number;
+    defaultExpanded?: boolean;
+    row?: import('svelte').Snippet;
+    detail?: import('svelte').Snippet;
+  }
 
-  let open = defaultExpanded;
+  let {
+    colSpan,
+    defaultExpanded = false,
+    row,
+    detail
+  }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  let open = $state(defaultExpanded);
   const detailId = `exp-${Math.random().toString(36).slice(2, 9)}`;
 </script>
 
@@ -14,7 +26,8 @@
         class="exp-toggle"
         aria-expanded={open}
         aria-controls={detailId}
-        on:click={() => (open = !open)}
+        aria-label={open ? 'Collapse row' : 'Expand row'}
+        onclick={() => (open = !open)}
       >
         <svg
           class="exp-chevron"
@@ -27,7 +40,7 @@
         </svg>
       </button>
     </td>
-    <slot name="row" />
+    {@render row?.()}
   </tr>
   <tr
     id={detailId}
@@ -36,7 +49,7 @@
     aria-hidden={!open}
   >
     <td colspan={colSpan + 1} class="exp-detail-cell">
-      <slot name="detail" />
+      {@render detail?.()}
     </td>
   </tr>
 </tbody>

package/src/lib/components/Field.svelte

@@ -1,18 +1,32 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
-  export let label: string;
-  export let value: string = '';
-  export let id: string | undefined = undefined;
-  export let error: string | undefined = undefined;
-  export let required: boolean = false;
-  export let hint: string | undefined = undefined;
+  interface Props {
+    label: string;
+    value?: string;
+    id?: string | undefined;
+    error?: string | undefined;
+    required?: boolean;
+    hint?: string | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    label,
+    value = $bindable(''),
+    id = undefined,
+    error = undefined,
+    required = false,
+    hint = undefined,
+    children
+  }: Props = $props();
+  // svelte-ignore state_referenced_locally
   const inputId = id ?? `dash-ui-field-${++counter}`;
-  $: errorId = error ? `${inputId}-error` : undefined;
-  $: hintId = hint ? `${inputId}-hint` : undefined;
-  $: describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined;
+  let errorId = $derived(error ? `${inputId}-error` : undefined);
+  let hintId = $derived(hint ? `${inputId}-hint` : undefined);
+  let describedBy = $derived([hintId, errorId].filter(Boolean).join(' ') || undefined);
 </script>
 
 <div class="field">
@@ -22,8 +36,8 @@
   {#if hint}
     <div class="field-hint" id={hintId}>{hint}</div>
   {/if}
-  {#if $$slots.default}
-    <slot />
+  {#if children}
+    {@render children?.()}
   {:else}
     <input
       class="input"

package/src/lib/components/FileUpload.svelte

@@ -1,23 +1,32 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  
 
-  export let label = 'Upload file';
-  export let hint: string | undefined = undefined;
-  export let accept: string | undefined = undefined;
-  export let multiple = false;
-  export let disabled = false;
-
-  const dispatch = createEventDispatcher<{ files: File[] }>();
+  interface Props {
+    label?: string;
+    hint?: string | undefined;
+    accept?: string | undefined;
+    multiple?: boolean;
+    disabled?: boolean;
+    onfiles?: (payload: File[]) => void;
+  }
 
-  let drag = false;
-  let done: string | null = null;
-  let inputEl: HTMLInputElement;
+  let {
+    label = 'Upload file',
+    hint = undefined,
+    accept = undefined,
+    multiple = false,
+    disabled = false,
+    onfiles,
+  }: Props = $props();
+  let drag = $state(false);
+  let done: string | null = $state(null);
+  let inputEl = $state<HTMLInputElement | undefined>(undefined);
 
   function handleFiles(files: FileList | null) {
     if (!files || files.length === 0) return;
     const arr = Array.from(files);
     done = arr.length === 1 ? arr[0].name : `${arr.length} files selected`;
-    dispatch('files', arr);
+    onfiles?.(arr);
   }
 
   function onChange(e: Event) {
@@ -43,13 +52,13 @@
   }
 
   function onClick() {
-    if (!disabled) inputEl.click();
+    if (!disabled) inputEl?.click();
   }
 
   function onKeyDown(e: KeyboardEvent) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
-      if (!disabled) inputEl.click();
+      if (!disabled) inputEl?.click();
     }
   }
 </script>
@@ -60,11 +69,11 @@
   class:file-upload--drag={drag}
   class:file-upload--done={done}
   class:file-upload--disabled={disabled}
-  on:dragover={onDragOver}
-  on:dragleave={onDragLeave}
-  on:drop={onDrop}
-  on:click={onClick}
-  on:keydown={onKeyDown}
+  ondragover={onDragOver}
+  ondragleave={onDragLeave}
+  ondrop={onDrop}
+  onclick={onClick}
+  onkeydown={onKeyDown}
   tabindex={disabled ? -1 : 0}
   aria-label={done ?? label}
 >
@@ -77,7 +86,7 @@
     class="sr-only"
     aria-label={label}
     tabindex="-1"
-    on:change={onChange}
+    onchange={onChange}
   />
   <svg class="file-upload__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
     {#if done}

package/src/lib/components/FilterBuilder.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface FilterField {
     key: string;
@@ -26,18 +26,28 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  interface Props {
+    fields?: FilterField[];
+    value?: FilterRule[];
+    conjunction?: 'and' | 'or';
+    ariaLabel?: string;
+    onchange?: (payload: { rules: FilterRule[]; conjunction: 'and' | 'or' }) => void;
+  }
 
-  export let fields: FilterField[] = [];
-  export let value: FilterRule[] = [];
-  export let conjunction: 'and' | 'or' = 'and';
-  export let ariaLabel = 'Filter builder';
+  let {
+    fields = [],
+    value = [],
+    conjunction = 'and',
+    ariaLabel = 'Filter builder',
+    onchange,
+  }: Props = $props();
 
   const uid = `dash-ui-fb-${++counter}`;
-  const dispatch = createEventDispatcher<{ change: { rules: FilterRule[]; conjunction: 'and' | 'or' } }>();
+
+  const CONJUNCTIONS = ['and', 'or'] as const;
 
   function emit(rules: FilterRule[], conj: 'and' | 'or' = conjunction) {
-    dispatch('change', { rules, conjunction: conj });
+    onchange?.({ rules, conjunction: conj });
   }
 
   function addRule() {
@@ -69,20 +79,20 @@
     {#if value.length > 0}
       <span class="fb-conj-label">Match</span>
       <div class="fb-conj" role="group" aria-label="Conjunction">
-        {#each ['and', 'or'] as c}
+        {#each CONJUNCTIONS as c}
           <button
             type="button"
             class="fb-conj-btn{conjunction === c ? ' is-active' : ''}"
             aria-pressed={conjunction === c}
-            on:click={() => emit(value, c)}
+            onclick={() => emit(value, c)}
           >{c.toUpperCase()}</button>
         {/each}
       </div>
       <span class="fb-conj-label">conditions</span>
     {/if}
-    <button type="button" class="fb-add" on:click={addRule} aria-label="Add filter rule">+ Add rule</button>
+    <button type="button" class="fb-add" onclick={addRule} aria-label="Add filter rule">+ Add rule</button>
     {#if value.length > 0}
-      <button type="button" class="fb-clear" on:click={() => emit([])} aria-label="Clear all filters">Clear</button>
+      <button type="button" class="fb-clear" onclick={() => emit([])} aria-label="Clear all filters">Clear</button>
     {/if}
   </div>
   {#if value.length > 0}
@@ -99,7 +109,7 @@
             id={fieldId}
             class="fb-select"
             value={rule.field}
-            on:change={(e) => setField(rule.id, e.currentTarget.value)}
+            onchange={(e) => setField(rule.id, e.currentTarget.value)}
             aria-label="Rule {i + 1} field"
           >
             {#each fields as x}
@@ -111,7 +121,7 @@
             id={opId}
             class="fb-select fb-select--op"
             value={rule.op}
-            on:change={(e) => setOp(rule.id, e.currentTarget.value)}
+            onchange={(e) => setOp(rule.id, e.currentTarget.value)}
             aria-label="Rule {i + 1} operator"
           >
             {#each ops as op}
@@ -124,7 +134,7 @@
               id={valId}
               class="fb-select fb-select--val"
               value={rule.value}
-              on:change={(e) => setValue(rule.id, e.currentTarget.value)}
+              onchange={(e) => setValue(rule.id, e.currentTarget.value)}
               aria-label="Rule {i + 1} value"
             >
               <option value="">Any</option>
@@ -139,14 +149,14 @@
               type={f?.type === 'number' ? 'number' : 'text'}
               value={rule.value}
               placeholder="Value…"
-              on:input={(e) => setValue(rule.id, e.currentTarget.value)}
+              oninput={(e) => setValue(rule.id, e.currentTarget.value)}
               aria-label="Rule {i + 1} value"
             />
           {/if}
           <button
             type="button"
             class="fb-remove icon-btn"
-            on:click={() => removeRule(rule.id)}
+            onclick={() => removeRule(rule.id)}
             aria-label="Remove rule {i + 1}"
           >
             <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true" fill="currentColor">

package/src/lib/components/FlameGraph.svelte

@@ -1,14 +1,21 @@
-<script lang="ts">
+<script module lang="ts">
   export interface FlameNode {
     label: string;
     value?: number;
     color?: string;
     children?: FlameNode[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    root: FlameNode;
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let root: FlameNode;
-  export let height = 160;
-  export let ariaLabel = 'Flame graph';
+  let { root, height = 160, ariaLabel = 'Flame graph' }: Props = $props();
 
   const PALETTE = ['#006FFF', '#FF7B2E', '#F5A623', '#FB923C', '#F97316', '#EF4444', '#A78BFA'];
   const VW = 340;
@@ -50,9 +57,9 @@
     return cells;
   }
 
-  $: depth = treeDepth(root);
-  $: levelH = height / (depth + 1);
-  $: cells = flatten(root, 0, 0, VW, levelH, height, PALETTE[0], { n: 0 });
+  let depth = $derived(treeDepth(root));
+  let levelH = $derived(height / (depth + 1));
+  let cells = $derived(flatten(root, 0, 0, VW, levelH, height, PALETTE[0], { n: 0 }));
 </script>
 
 {#if cells.length > 0}