@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/SegmentedControl.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface SegmentOption {
     value: string;
     label: string;
@@ -9,11 +9,15 @@
 <script lang="ts">
   import { tick } from 'svelte';
 
-  export let label: string;
-  export let options: SegmentOption[] = [];
-  export let value: string = options[0]?.value ?? '';
+  interface Props {
+    label: string;
+    options?: SegmentOption[];
+    value?: string;
+  }
+
+  let { label, options = [], value = $bindable(options[0]?.value ?? '') }: Props = $props();
 
-  let root: HTMLDivElement;
+  let root = $state<HTMLDivElement | undefined>(undefined);
 
   async function handleKeyDown(e: KeyboardEvent) {
     const enabled = options.filter((o) => !o.disabled);
@@ -34,7 +38,7 @@
   }
 </script>
 
-<div bind:this={root} role="radiogroup" aria-label={label} class="seg-ctrl" tabindex="-1" on:keydown={handleKeyDown}>
+<div bind:this={root} role="radiogroup" aria-label={label} class="seg-ctrl" tabindex="-1" onkeydown={handleKeyDown}>
   {#each options as opt (opt.value)}
     <button
       type="button"
@@ -43,7 +47,7 @@
       disabled={opt.disabled}
       tabindex={value === opt.value ? 0 : -1}
       class="seg-ctrl__btn{value === opt.value ? ' seg-ctrl__btn--active' : ''}"
-      on:click={() => { value = opt.value; }}
+      onclick={() => { value = opt.value; }}
     >
       {opt.label}
     </button>

package/src/lib/components/Select.svelte

@@ -1,33 +1,44 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface SelectOption { value: string; label: string; }
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
 
-  export let options: SelectOption[] = [];
-  export let value: string | undefined = undefined;
-  export let label: string | undefined = undefined;
-  export let placeholder: string = 'Select…';
-  export let id: string | undefined = undefined;
-  export let disabled: boolean = false;
-  let className = '';
-  export { className as class };
-
-  const uid = `dash-ui-sel-${++counter}`;
-  $: triggerId = id ?? uid;
-  $: listboxId = `${triggerId}-lb`;
+  interface Props {
+    options?: SelectOption[];
+    value?: string | undefined;
+    label?: string | undefined;
+    placeholder?: string;
+    id?: string | undefined;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string }>();
+  let {
+    options = [],
+    value = undefined,
+    label = undefined,
+    placeholder = 'Select…',
+    id = undefined,
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+  
 
-  let open = false;
-  let activeIdx = -1;
-  let triggerEl: HTMLButtonElement;
-  let wrapperEl: HTMLDivElement;
+  const uid = `dash-ui-sel-${++counter}`;
+  let triggerId = $derived(id ?? uid);
+  let listboxId = $derived(`${triggerId}-lb`);
+  let open = $state(false);
+  let activeIdx = $state(-1);
+  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let wrapperEl = $state<HTMLDivElement | undefined>(undefined);
 
-  $: selected = options.find((o) => o.value === value);
-  $: displayLabel = selected?.label ?? placeholder;
+  let selected = $derived(options.find((o) => o.value === value));
+  let displayLabel = $derived(selected?.label ?? placeholder);
 
   function toggle() {
     if (disabled) return;
@@ -39,7 +50,7 @@
   }
 
   function pick(val: string) {
-    dispatch('change', val);
+    onchange?.(val);
     open = false;
     triggerEl?.focus();
   }
@@ -84,8 +95,8 @@
     aria-label={label}
     {disabled}
     class="select-trigger"
-    on:click={toggle}
-    on:keydown={onKeyDown}
+    onclick={toggle}
+    onkeydown={onKeyDown}
     type="button"
   >
     <span>{displayLabel}</span>
@@ -101,8 +112,8 @@
           aria-selected={opt.value === value}
           data-active={idx === activeIdx ? 'true' : undefined}
           class="select-option"
-          on:mousedown|preventDefault={() => pick(opt.value)}
-          on:mouseenter={() => { activeIdx = idx; }}
+          onmousedown={(e) => { e.preventDefault(); (() => pick(opt.value))(); }}
+          onmouseenter={() => { activeIdx = idx; }}
         >{opt.label}</li>
       {/each}
     </ul>

package/src/lib/components/SelectionToolbar.svelte

@@ -1,16 +1,30 @@
-<script lang="ts">
-  import CloseIcon from '../icons/CloseIcon.svelte';
-
+<script module lang="ts">
   export interface SelectionToolbarAction {
     label: string;
     onClick: () => void;
     variant?: 'default' | 'danger';
   }
+</script>
+
+<script lang="ts">
+  import CloseIcon from '../icons/CloseIcon.svelte';
+
+
+  interface Props {
+    count: number;
+    actions?: SelectionToolbarAction[];
+    onClear: () => void;
+    ariaLabel?: string;
+    children?: import('svelte').Snippet;
+  }
 
-  export let count: number;
-  export let actions: SelectionToolbarAction[] = [];
-  export let onClear: () => void;
-  export let ariaLabel: string = 'Selection actions';
+  let {
+    count,
+    actions = [],
+    onClear,
+    ariaLabel = 'Selection actions',
+    children
+  }: Props = $props();
 </script>
 
 {#if count > 0}
@@ -23,20 +37,20 @@
         <button
           type="button"
           class="sel-toolbar__btn{action.variant === 'danger' ? ' sel-toolbar__btn--danger' : ''}"
-          on:click={action.onClick}
+          onclick={action.onClick}
         >
           {action.label}
         </button>
       {/each}
-      <slot />
+      {@render children?.()}
     </div>
     <button
       type="button"
       class="sel-toolbar__clear icon-btn"
-      on:click={onClear}
+      onclick={onClear}
       aria-label="Clear selection"
     >
-      <CloseIcon aria-hidden="true" />
+      <CloseIcon />
     </button>
   </div>
 {/if}

package/src/lib/components/Sidebar.svelte

@@ -1,9 +1,9 @@
-<script lang="ts" context="module">
-  import type { ComponentType } from 'svelte';
+<script lang="ts" module>
+  import type { Component } from 'svelte';
   export interface SidebarItemDef {
     id: string;
     label: string;
-    icon: ComponentType;
+    icon: Component<Record<string, unknown>>;
     count?: number;
     pill?: number;
   }
@@ -14,10 +14,16 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  export let sections: SidebarSectionDef[] = [];
-  export let activeId: string;
-  const dispatch = createEventDispatcher<{ change: string }>();
+  
+  interface Props {
+    sections?: SidebarSectionDef[];
+    activeId: string;
+    onchange?: (payload: string) => void;
+  }
+
+  let { sections = [], activeId = $bindable(),
+    onchange,
+  }: Props = $props();
 </script>
 
 <nav class="sidebar" aria-label="Primary">
@@ -30,9 +36,9 @@
             type="button"
             class="sb-item {it.id === activeId ? 'active' : ''}"
             aria-current={it.id === activeId ? 'page' : undefined}
-            on:click={() => { activeId = it.id; dispatch('change', it.id); }}
+            onclick={() => { activeId = it.id; onchange?.(it.id); }}
           >
-            <span class="sb-ico"><svelte:component this={it.icon} /></span>
+            <span class="sb-ico"><it.icon /></span>
             {it.label}
             {#if it.count !== undefined}<span class="sb-count">{it.count}</span>{/if}
             {#if it.pill !== undefined}<span class="sb-pill">{it.pill}<span class="sr-only"> alert{it.pill !== 1 ? 's' : ''}</span></span>{/if}

package/src/lib/components/Signal.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-  export let weak: boolean = false;
-  export let label: string | undefined = undefined;
+  interface Props {
+    weak?: boolean;
+    label?: string | undefined;
+  }
+
+  let { weak = false, label = undefined }: Props = $props();
 </script>
 
 <span

package/src/lib/components/Skeleton.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">
-  export let variant: 'text' | 'title' | 'stat' | 'circle' | 'block' = 'text';
-  export let width: string | number | undefined = undefined;
-  export let height: string | number | undefined = undefined;
-  let className = '';
-  export { className as class };
-  export let ariaLabel: string = 'Loading';
+  
+  interface Props {
+    variant?: 'text' | 'title' | 'stat' | 'circle' | 'block';
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    class?: string;
+    ariaLabel?: string;
+  }
 
-  $: variantClass = variant === 'block' ? '' : variant;
-  $: w = width ?? (variant === 'circle' ? height : undefined);
-  $: style = [
+  let {
+    variant = 'text',
+    width = undefined,
+    height = undefined,
+    class: className = '',
+    ariaLabel = 'Loading'
+  }: Props = $props();
+
+  let variantClass = $derived(variant === 'block' ? '' : variant);
+  let w = $derived(width ?? (variant === 'circle' ? height : undefined));
+  let style = $derived([
     w !== undefined ? `width:${typeof w === 'number' ? w + 'px' : w}` : '',
     height !== undefined ? `height:${typeof height === 'number' ? height + 'px' : height}` : '',
-  ].filter(Boolean).join(';');
+  ].filter(Boolean).join(';'));
 </script>
 
 <span

package/src/lib/components/SkipLink.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
-  export let href: string = '#main-content';
-  let className = '';
-  export { className as class };
+  interface Props {
+    href?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { href = '#main-content', class: className = '', children }: Props = $props();
+  
 </script>
 
 <a class="skip-link {className}" {href}>
-  <slot>Skip to main content</slot>
+  {#if children}{@render children()}{:else}Skip to main content{/if}
 </a>

package/src/lib/components/Slider.svelte

@@ -1,24 +1,38 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  
 
-  export let label: string | undefined = undefined;
-  export let value: number = 0;
-  export let min: number = 0;
-  export let max: number = 100;
-  export let step: number = 1;
-  export let suffix: string | undefined = undefined;
-  export let disabled: boolean = false;
-  export let id: string | undefined = undefined;
+  interface Props {
+    label?: string | undefined;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    suffix?: string | undefined;
+    disabled?: boolean;
+    id?: string | undefined;
+    onchange?: (payload: number) => void;
+  }
+
+  let {
+    label = undefined,
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    suffix = undefined,
+    disabled = false,
+    id = undefined,
+    onchange,
+  }: Props = $props();
 
   let counter = 0;
+  // svelte-ignore state_referenced_locally
   const inputId = id ?? `slider-${counter++}`;
-  const dispatch = createEventDispatcher<{ change: number }>();
-
-  $: pct = max === min ? 0 : ((value - min) / (max - min)) * 100;
+  let pct = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
 
   function handleChange(e: Event) {
     value = Number((e.target as HTMLInputElement).value);
-    dispatch('change', value);
+    onchange?.(value);
   }
 </script>
 
@@ -43,6 +57,6 @@
     style="--slider-fill:{pct}%"
     aria-label={label}
     aria-valuetext={suffix ? `${value} ${suffix}` : undefined}
-    on:input={handleChange}
+    oninput={handleChange}
   />
 </div>

package/src/lib/components/SlopeChart.svelte

@@ -1,16 +1,30 @@
-<script lang="ts">
+<script module lang="ts">
   export interface SlopeItem {
     label: string;
     before: number;
     after: number;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: SlopeItem[];
+    labelBefore?: string;
+    labelAfter?: string;
+    unit?: string;
+    ariaLabel?: string;
+    positiveIsGood?: boolean;
+  }
 
-  export let items: SlopeItem[] = [];
-  export let labelBefore: string = 'Before';
-  export let labelAfter: string = 'After';
-  export let unit: string = '';
-  export let ariaLabel: string = 'Slope chart';
-  export let positiveIsGood: boolean = false;
+  let {
+    items = [],
+    labelBefore = 'Before',
+    labelAfter = 'After',
+    unit = '',
+    ariaLabel = 'Slope chart',
+    positiveIsGood = false
+  }: Props = $props();
 
   const VW = 340;
   const COL_L = 108;
@@ -36,18 +50,18 @@
     return res;
   }
 
-  $: allVals = items.flatMap((it) => [it.before, it.after]);
-  $: minV = allVals.length ? Math.min(...allVals) : 0;
-  $: maxV = allVals.length ? Math.max(...allVals) : 1;
-  $: range = maxV - minV || 1;
-  $: ty = (v: number) => PAD_T + (1 - (v - minV) / range) * CHART_H;
+  let allVals = $derived(items.flatMap((it) => [it.before, it.after]));
+  let minV = $derived(allVals.length ? Math.min(...allVals) : 0);
+  let maxV = $derived(allVals.length ? Math.max(...allVals) : 1);
+  let range = $derived(maxV - minV || 1);
+  let ty = $derived((v: number) => PAD_T + (1 - (v - minV) / range) * CHART_H);
 
-  $: leftDotY = items.map((it) => ty(it.before));
-  $: rightDotY = items.map((it) => ty(it.after));
-  $: leftLabelY = nudge(leftDotY, LABEL_GAP);
-  $: rightLabelY = nudge(rightDotY, LABEL_GAP);
+  let leftDotY = $derived(items.map((it) => ty(it.before)));
+  let rightDotY = $derived(items.map((it) => ty(it.after)));
+  let leftLabelY = $derived(nudge(leftDotY, LABEL_GAP));
+  let rightLabelY = $derived(nudge(rightDotY, LABEL_GAP));
 
-  $: colored = items.map((it, i) => {
+  let colored = $derived(items.map((it, i) => {
     const diff = it.after - it.before;
     const c =
       diff === 0 ? '#A4A7B5' : diff > 0 === positiveIsGood ? '#00C875' : '#FF7B7B';
@@ -60,7 +74,7 @@
       rly: rightLabelY[i],
       delta: it.after - it.before,
     };
-  });
+  }));
 </script>
 
 {#if items.length}
@@ -82,9 +96,9 @@
         <circle cx={COL_L} cy={it.ly} r={DOT_R} fill={it.c} />
         <circle cx={COL_R} cy={it.ry} r={DOT_R} fill={it.c} />
         <text x={COL_L - 10} y={it.lly + 4} fill="#A4A7B5" font-size="9" text-anchor="end" font-family="inherit">{it.label}</text>
-        <text x={COL_L - 10} y={it.lly + 15} fill="#6E7079" font-size="9" text-anchor="end" font-family="inherit" font-variant-numeric="tabular-nums">{it.before}{unit}</text>
-        <text x={COL_R + 10} y={it.rly + 4} fill="#A4A7B5" font-size="9" text-anchor="start" font-family="inherit" font-variant-numeric="tabular-nums">{it.after}{unit}</text>
-        <text x={COL_R + 10} y={it.rly + 15} fill={it.c} font-size="9" text-anchor="start" font-family="inherit" font-variant-numeric="tabular-nums">{it.delta > 0 ? '+' : ''}{it.delta}{unit}</text>
+        <text x={COL_L - 10} y={it.lly + 15} fill="#6E7079" font-size="9" text-anchor="end" font-family="inherit" style="font-variant-numeric: tabular-nums">{it.before}{unit}</text>
+        <text x={COL_R + 10} y={it.rly + 4} fill="#A4A7B5" font-size="9" text-anchor="start" font-family="inherit" style="font-variant-numeric: tabular-nums">{it.after}{unit}</text>
+        <text x={COL_R + 10} y={it.rly + 15} fill={it.c} font-size="9" text-anchor="start" font-family="inherit" style="font-variant-numeric: tabular-nums">{it.delta > 0 ? '+' : ''}{it.delta}{unit}</text>
       {/each}
     </svg>
   </div>

package/src/lib/components/SortHeader.svelte

@@ -1,16 +1,27 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  export let sortKey: string;
-  export let activeKey: string | null = null;
-  export let dir: 'asc' | 'desc' = 'asc';
-  const dispatch = createEventDispatcher<{ sort: string }>();
-  $: active = activeKey === sortKey;
-  $: ariaSort = active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none';
+  
+  interface Props {
+    sortKey: string;
+    activeKey?: string | null;
+    dir?: 'asc' | 'desc';
+    children?: import('svelte').Snippet;
+    onsort?: (payload: string) => void;
+  }
+
+  let {
+    sortKey,
+    activeKey = null,
+    dir = 'asc',
+    children,
+    onsort,
+  }: Props = $props();
+  let active = $derived(activeKey === sortKey);
+  let ariaSort = $derived((active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none') as 'ascending' | 'descending' | 'none');
 </script>
 
 <th scope="col" aria-sort={ariaSort}>
-  <button type="button" class="sort-header-btn" on:click={() => dispatch('sort', sortKey)}>
-    <slot />
+  <button type="button" class="sort-header-btn" onclick={() => onsort?.(sortKey)}>
+    {@render children?.()}
     <svg class="sort-icon" viewBox="0 0 8 11" aria-hidden="true" fill="currentColor">
       <path d="M4 0L7 4H1Z" opacity={active && dir === 'asc' ? 1 : 0.3} />
       <path d="M4 11L1 7H7Z" opacity={active && dir === 'desc' ? 1 : 0.3} />

package/src/lib/components/SortableList.svelte

@@ -1,17 +1,24 @@
-<script lang="ts">
+<script module lang="ts">
   export interface SortableItem {
     id: string;
     label: string;
     meta?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: SortableItem[];
+    onChange?: (items: SortableItem[]) => void;
+    ariaLabel?: string | undefined;
+  }
 
-  export let items: SortableItem[] = [];
-  export let onChange: (items: SortableItem[]) => void = () => {};
-  export let ariaLabel: string | undefined = undefined;
+  let { items = $bindable([]), onChange = () => {}, ariaLabel = undefined }: Props = $props();
 
-  let grabbed: string | null = null;
-  let dragSrc: string | null = null;
-  let dragOver: string | null = null;
+  let grabbed: string | null = $state(null);
+  let dragSrc: string | null = $state(null);
+  let dragOver: string | null = $state(null);
 
   function reorder(fromId: string, toId: string) {
     if (fromId === toId) return;
@@ -53,18 +60,18 @@
       class:is-grabbed={grabbed === item.id}
       class:is-drag-over={dragOver === item.id}
       draggable="true"
-      on:dragstart={e => { e.dataTransfer?.setData('text/plain', item.id); if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move'; dragSrc = item.id; }}
-      on:dragend={() => { dragSrc = null; dragOver = null; }}
-      on:dragover={e => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'; dragOver = item.id; }}
-      on:dragleave={() => { dragOver = null; }}
-      on:drop={e => { e.preventDefault(); if (dragSrc) reorder(dragSrc, item.id); dragSrc = null; dragOver = null; }}
+      ondragstart={e => { e.dataTransfer?.setData('text/plain', item.id); if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move'; dragSrc = item.id; }}
+      ondragend={() => { dragSrc = null; dragOver = null; }}
+      ondragover={e => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'; dragOver = item.id; }}
+      ondragleave={() => { dragOver = null; }}
+      ondrop={e => { e.preventDefault(); if (dragSrc) reorder(dragSrc, item.id); dragSrc = null; dragOver = null; }}
     >
       <button
         type="button"
         class="sortable-list__handle"
         aria-label="{grabbed === item.id ? 'Release' : 'Grab'} {item.label}. Use arrow keys to reorder."
         aria-pressed={grabbed === item.id}
-        on:keydown={e => handleKeyDown(e, item.id)}
+        onkeydown={e => handleKeyDown(e, item.id)}
       >
         <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" focusable="false">
           <rect x="3" y="2" width="2" height="2" rx="1" />

package/src/lib/components/Sparkline.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-  export let bars: number = 36;
-  export let active: boolean = false;
-  export let seed: number = 1;
-  export let ariaLabel: string = 'Activity sparkline';
+  interface Props {
+    bars?: number;
+    active?: boolean;
+    seed?: number;
+    ariaLabel?: string;
+  }
+
+  let {
+    bars = 36,
+    active = false,
+    seed = 1,
+    ariaLabel = 'Activity sparkline'
+  }: Props = $props();
 
   function rng(s0: number) {
     let s = s0;
@@ -12,7 +21,7 @@
     };
   }
 
-  $: heights = (() => {
+  let heights = $derived((() => {
     const r = rng(seed);
     const out: number[] = [];
     let prev = 12;
@@ -22,7 +31,7 @@
       out.push(v);
     }
     return out;
-  })();
+  })());
 </script>
 
 <div class="spark" role="img" aria-label={ariaLabel}>

package/src/lib/components/SparklineMatrix.svelte

@@ -1,14 +1,21 @@
-<script lang="ts">
+<script module lang="ts">
   export interface SparklineMatrixRow {
     label: string;
     values: number[];
     unit?: string;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    rows?: SparklineMatrixRow[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let rows: SparklineMatrixRow[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Sparkline matrix';
+  let { rows = [], height = 160, ariaLabel = 'Sparkline matrix' }: Props = $props();
 
   const VW = 380;
   const PAD_L = 76;
@@ -17,12 +24,12 @@
   const SPARK_PAD_Y = 5;
   const PALETTE = ['#006FFF', '#00C875', '#7FB6FF', '#F5A623', '#FF7B7B', '#A78BFA'];
 
-  $: rowH = height / (rows.length || 1);
-  $: sparkX0 = PAD_L + SPARK_PAD_X;
-  $: sparkW = VW - PAD_L - PAD_R - SPARK_PAD_X * 2;
-  $: sparkH = rowH - SPARK_PAD_Y * 2;
+  let rowH = $derived(height / (rows.length || 1));
+  let sparkX0 = $derived(PAD_L + SPARK_PAD_X);
+  let sparkW = $derived(VW - PAD_L - PAD_R - SPARK_PAD_X * 2);
+  let sparkH = $derived(rowH - SPARK_PAD_Y * 2);
 
-  $: computed = rows.map((row, i) => {
+  let computed = $derived(rows.map((row, i) => {
     const y0 = i * rowH + SPARK_PAD_Y;
     const color = row.color ?? PALETTE[i % PALETTE.length];
     const min = Math.min(...row.values);
@@ -43,7 +50,7 @@
 
     const dotY = y0 + sparkH - ((lastVal - min) / range) * sparkH;
     return { color, lastVal, d, dotX: sparkX0 + sparkW, dotY, midY: i * rowH + rowH / 2 };
-  });
+  }));
 </script>
 
 {#if rows.length}