@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/CandlestickChart.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface CandlestickBar {
     label: string;
     open: number;
@@ -6,14 +6,29 @@
     high: number;
     low: number;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    bars?: CandlestickBar[];
+    yRange?: [number, number] | undefined;
+    height?: number;
+    unit?: string;
+    upColor?: string;
+    downColor?: string;
+    ariaLabel?: string;
+  }
 
-  export let bars: CandlestickBar[] = [];
-  export let yRange: [number, number] | undefined = undefined;
-  export let height = 180;
-  export let unit = '';
-  export let upColor = '#00C875';
-  export let downColor = '#FF7B7B';
-  export let ariaLabel = 'Candlestick chart';
+  let {
+    bars = [],
+    yRange = undefined,
+    height = 180,
+    unit = '',
+    upColor = '#00C875',
+    downColor = '#FF7B7B',
+    ariaLabel = 'Candlestick chart'
+  }: Props = $props();
 
   const VW = 340;
   const PAD_L = 28;
@@ -22,14 +37,14 @@
   const PAD_B = 20;
   const PLOT_W = VW - PAD_L - PAD_R;
 
-  $: n = bars.length;
-  $: PLOT_H = height - PAD_T - PAD_B;
-  $: allVals = bars.flatMap((b) => [b.low, b.high]);
-  $: 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];
-  $: candleW = Math.max(4, (PLOT_W / (n || 1)) * 0.5);
+  let n = $derived(bars.length);
+  let PLOT_H = $derived(height - PAD_T - PAD_B);
+  let allVals = $derived(bars.flatMap((b) => [b.low, b.high]));
+  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]);
+  let candleW = $derived(Math.max(4, (PLOT_W / (n || 1)) * 0.5));
 
   function tx(i: number): number {
     return PAD_L + ((i + 0.5) / (n || 1)) * PLOT_W;

package/src/lib/components/Card.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">
-  export let span: number | undefined = undefined;
-  let className = '';
-  export { className as class };
-  export let style: string = '';
-  $: spanStyle = span !== undefined ? `grid-column: span ${span};` : '';
+  
+  interface Props {
+    span?: number | undefined;
+    class?: string;
+    style?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    span = undefined,
+    class: className = '',
+    style = '',
+    children
+  }: Props = $props();
+  let spanStyle = $derived(span !== undefined ? `grid-column: span ${span};` : '');
 </script>
 
 <div class="card {className}" style="{spanStyle} {style}">
-  <slot />
+  {@render children?.()}
 </div>

package/src/lib/components/Carousel.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-  export let slides: Array<{ id: string; title: string; description?: string; color?: string }> =
-    [];
-  export let label: string;
-  let klass = '';
-  export { klass as class };
+  interface Props {
+    slides?: Array<{ id: string; title: string; description?: string; color?: string }>;
+    label: string;
+    class?: string;
+  }
+
+  let { slides = [], label, class: klass = '' }: Props = $props();
+  
 
-  let index = 0;
+  let index = $state(0);
 
   function prev() {
     index = (index - 1 + slides.length) % slides.length;
@@ -30,7 +33,7 @@
         aria-hidden={i !== index ? true : undefined}
       >
         {#if slide.color}
-          <div class="carousel-slide-accent" style="background:{slide.color}" aria-hidden="true" />
+          <div class="carousel-slide-accent" style="background:{slide.color}" aria-hidden="true"></div>
         {/if}
         <div class="carousel-slide-body">
           <div class="carousel-slide-title">{slide.title}</div>
@@ -42,7 +45,7 @@
     {/each}
   </div>
   <div class="carousel-controls">
-    <button type="button" class="carousel-btn" aria-label="Previous slide" on:click={prev}
+    <button type="button" class="carousel-btn" aria-label="Previous slide" onclick={prev}
       >&#8249;</button
     >
     <div role="tablist" aria-label="Choose slide to display" class="carousel-indicators">
@@ -53,11 +56,11 @@
           aria-selected={i === index}
           aria-label="Slide {i + 1}: {slide.title}"
           class="carousel-dot{i === index ? ' is-active' : ''}"
-          on:click={() => (index = i)}
-        />
+          onclick={() => (index = i)}
+></button>
       {/each}
     </div>
-    <button type="button" class="carousel-btn" aria-label="Next slide" on:click={next}
+    <button type="button" class="carousel-btn" aria-label="Next slide" onclick={next}
       >&#8250;</button
     >
   </div>

package/src/lib/components/Checkbox.svelte

@@ -1,22 +1,43 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
-  export let checked: boolean = false;
-  export let indeterminate: boolean = false;
-  export let label: string | undefined = undefined;
-  export let id: string | undefined = undefined;
-  export let disabled: boolean = false;
+  interface Props {
+    checked?: boolean;
+    indeterminate?: boolean;
+    label?: string | undefined;
+    id?: string | undefined;
+    disabled?: boolean;
+    onchange?: (event: Event) => void;
+    [key: string]: unknown;
+  }
+
+  // svelte-ignore state_referenced_locally
+  // svelte-ignore state_referenced_locally
+  let {
+    checked = false,
+    indeterminate = false,
+    label = undefined,
+    id = undefined,
+    disabled = false,
+    onchange,
+    ...rest
+  }: Props = $props();
 
   const uid = `dash-ui-cb-${++counter}`;
-  $: inputId = id ?? uid;
+  let inputId = $derived(id ?? uid);
 
-  let el: HTMLInputElement;
-  $: if (el) {
-    el.checked = checked;
-    el.indeterminate = indeterminate;
-  }
+  let el = $state<HTMLInputElement | undefined>(undefined);
+
+  // Sync the imperative DOM properties to the reactive props. `$effect` reads
+  // both `checked` and `indeterminate` so it re-runs whenever either flips.
+  $effect(() => {
+    if (el) {
+      el.checked = checked;
+      el.indeterminate = indeterminate;
+    }
+  });
 </script>
 
 {#if label}
@@ -27,8 +48,8 @@
       id={inputId}
       {disabled}
       class="checkbox"
-      on:change
-      {...$$restProps}
+      {onchange}
+      {...rest}
     />
     <span>{label}</span>
   </label>
@@ -39,7 +60,7 @@
     id={inputId}
     {disabled}
     class="checkbox"
-    on:change
-    {...$$restProps}
+    {onchange}
+    {...rest}
   />
 {/if}

package/src/lib/components/ChordDiagram.svelte

@@ -1,9 +1,16 @@
-<script lang="ts">
+<script module lang="ts">
   export interface ChordNode { label: string; color?: string; }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    nodes: ChordNode[];
+    matrix: number[][];
+    ariaLabel?: string;
+  }
 
-  export let nodes: ChordNode[];
-  export let matrix: number[][];
-  export let ariaLabel: string = 'Chord diagram';
+  let { nodes, matrix, ariaLabel = 'Chord diagram' }: Props = $props();
 
   const PALETTE = ['#006FFF', '#00C875', '#A78BFA', '#F5A623', '#50B8E7', '#F04949'];
   const CX = 160, CY = 160, R_IN = 108, R_ARC = 125, R_LBL = 138, PAD = 0.04;
@@ -27,7 +34,7 @@
   type Chord = { d: string; fill: string };
   type Label = { x: number; y: number; anchor: string; text: string };
 
-  $: ({ arcs, chords, labels } = (() => {
+  let { arcs, chords, labels } = $derived((() => {
     const n = nodes.length;
     const totals = nodes.map((_, i) => matrix[i].reduce((s, v) => s + v, 0));
     const grand = totals.reduce((s, v) => s + v, 0);

package/src/lib/components/CirclePacking.svelte

@@ -1,14 +1,21 @@
-<script lang="ts">
+<script module lang="ts">
   export interface CirclePackItem {
     id: string;
     label: string;
     value: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items: CirclePackItem[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let items: CirclePackItem[];
-  export let height = 200;
-  export let ariaLabel = 'Circle packing chart';
+  let { items, height = 200, ariaLabel = 'Circle packing chart' }: Props = $props();
 
   const PALETTE = ['#006FFF', '#00C875', '#F5A623', '#A78BFA', '#FF7B7B', '#00C8C8', '#FB923C', '#4797FF'];
   const VW = 360;
@@ -64,7 +71,7 @@
     return pos.map(({ cx, cy }) => ({ cx, cy }));
   }
 
-  $: layout = (() => {
+  let layout = $derived((() => {
     if (!items.length) return null;
     const sorted = [...items].sort((a, b) => b.value - a.value);
     const maxV = sorted[0].value;
@@ -91,7 +98,7 @@
       const color = item.color ?? PALETTE[i % PALETTE.length];
       return { id: item.id, label: item.label, value: item.value, cx, cy, r, color };
     });
-  })();
+  })());
 </script>
 
 {#if layout}

package/src/lib/components/CodeBlock.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  export let code: string = '';
-  export let label: string = 'Code block';
-  export let language: string = '';
-  let className = '';
-  export { className as class };
+  interface Props {
+    code?: string;
+    label?: string;
+    language?: string;
+    class?: string;
+  }
+
+  let {
+    code = '',
+    label = 'Code block',
+    language = '',
+    class: className = ''
+  }: Props = $props();
+  
 
-  let copied = false;
+  let copied = $state(false);
   let timer: ReturnType<typeof setTimeout> | null = null;
 
   function handleCopy() {
@@ -31,7 +40,7 @@
       type="button"
       class="copy-btn{copied ? ' copy-btn--done' : ''}"
       aria-label={copied ? 'Copied!' : 'Copy code'}
-      on:click={handleCopy}
+      onclick={handleCopy}
     >
       {#if copied}
         <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable="false">

package/src/lib/components/ColorPicker.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface ColorSwatchDef {
     value: string;
@@ -20,12 +20,23 @@
 </script>
 
 <script lang="ts">
-  export let label: string = 'Colour';
-  export let srOnlyLabel: boolean = false;
-  export let value: string = COLOR_SWATCHES[0].value;
-  export let swatches: ColorSwatchDef[] = COLOR_SWATCHES;
-  export let disabled: boolean = false;
-  export let onChange: ((v: string) => void) | undefined = undefined;
+  interface Props {
+    label?: string;
+    srOnlyLabel?: boolean;
+    value?: string;
+    swatches?: ColorSwatchDef[];
+    disabled?: boolean;
+    onChange?: ((v: string) => void) | undefined;
+  }
+
+  let {
+    label = 'Colour',
+    srOnlyLabel = false,
+    value = $bindable(COLOR_SWATCHES[0].value),
+    swatches = COLOR_SWATCHES,
+    disabled = false,
+    onChange = undefined
+  }: Props = $props();
 
   const groupId = `dash-ui-cp-${++counter}`;
 
@@ -48,7 +59,7 @@
     onChange?.(value);
   }
 
-  $: hasMatch = swatches.some((s) => s.value === value);
+  let hasMatch = $derived(swatches.some((s) => s.value === value));
 </script>
 
 <div class="color-picker{disabled ? ' color-picker--disabled' : ''}">
@@ -60,7 +71,7 @@
     aria-labelledby="{groupId}-label"
     class="color-picker__grid"
     tabindex="-1"
-    on:keydown={handleKeyDown}
+    onkeydown={handleKeyDown}
   >
     {#each swatches as sw, i}
       {@const checked = sw.value === value}
@@ -75,7 +86,7 @@
           class="sr-only"
           tabindex={tabIdx}
           aria-label={sw.label}
-          on:change={() => {
+          onchange={() => {
             value = sw.value;
             onChange?.(value);
           }}
@@ -84,7 +95,7 @@
           class="color-picker__circle{checked ? ' color-picker__circle--selected' : ''}"
           style="background:{sw.color}"
           aria-hidden="true"
-        />
+></span>
       </label>
     {/each}
   </div>

package/src/lib/components/ColumnToggle.svelte

@@ -1,19 +1,26 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-
+<script module lang="ts">
   export interface ColumnDef {
     key: string;
     label: string;
     required?: boolean;
   }
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+
+  interface Props {
+    columns?: ColumnDef[];
+    visible?: Set<string>;
+    onChange?: (visible: Set<string>) => void;
+  }
 
-  export let columns: ColumnDef[] = [];
-  export let visible: Set<string> = new Set();
-  export let onChange: (visible: Set<string>) => void = () => {};
+  let { columns = [], visible = $bindable(new Set()), onChange = () => {} }: Props = $props();
 
-  let open = false;
-  let btnEl: HTMLButtonElement;
-  let panelEl: HTMLDivElement;
+  let open = $state(false);
+  let btnEl = $state<HTMLButtonElement | undefined>(undefined);
+  let panelEl = $state<HTMLDivElement | undefined>(undefined);
   const panelId = `col-toggle-${Math.random().toString(36).slice(2)}`;
 
   function close() {
@@ -57,7 +64,7 @@
     aria-haspopup="dialog"
     aria-expanded={open}
     aria-controls={panelId}
-    on:click={() => (open = !open)}
+    onclick={() => (open = !open)}
   >
     <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable="false">
       <rect x="1" y="2" width="3" height="10" rx="1" stroke="currentColor" stroke-width="1.3" />
@@ -84,7 +91,7 @@
                 class="col-toggle__check"
                 checked={visible.has(col.key)}
                 disabled={col.required}
-                on:change={() => { if (!col.required) toggle(col.key); }}
+                onchange={() => { if (!col.required) toggle(col.key); }}
               />
               <span>{col.label}</span>
             </label>

package/src/lib/components/Combobox.svelte

@@ -1,43 +1,54 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface ComboboxOption { value: string; label: string; }
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
+
+  interface Props {
+    options?: ComboboxOption[];
+    value?: string | undefined;
+    label?: string | undefined;
+    placeholder?: string;
+    id?: string | undefined;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: string) => void;
+  }
 
-  export let options: ComboboxOption[] = [];
-  export let value: string | undefined = undefined;
-  export let label: string | undefined = undefined;
-  export let placeholder: string = 'Search…';
-  export let id: string | undefined = undefined;
-  export let disabled: boolean = false;
-  let className = '';
-  export { className as class };
+  let {
+    options = [],
+    value = undefined,
+    label = undefined,
+    placeholder = 'Search…',
+    id = undefined,
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+  
 
   const uid = `dash-ui-cb-${++counter}`;
-  $: inputId = id ?? uid;
-  $: listboxId = `${inputId}-lb`;
-
-  const dispatch = createEventDispatcher<{ change: string }>();
-
-  let open = false;
-  let query = '';
-  let activeIdx = -1;
-  let inputEl: HTMLInputElement;
-  let wrapperEl: HTMLDivElement;
+  let inputId = $derived(id ?? uid);
+  let listboxId = $derived(`${inputId}-lb`);
+  let open = $state(false);
+  let query = $state('');
+  let activeIdx = $state(-1);
+  let inputEl = $state<HTMLInputElement | undefined>(undefined);
+  let wrapperEl = $state<HTMLDivElement | undefined>(undefined);
 
-  $: selectedOption = options.find((o) => o.value === value);
+  let selectedOption = $derived(options.find((o) => o.value === value));
 
-  $: filtered = query.trim() === ''
+  let filtered = $derived(query.trim() === ''
     ? options
-    : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
+    : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())));
 
-  $: activeOptionId = activeIdx >= 0 && filtered[activeIdx]
+  let activeOptionId = $derived(activeIdx >= 0 && filtered[activeIdx]
     ? `${listboxId}-opt-${activeIdx}`
-    : undefined;
+    : undefined);
 
-  $: displayValue = open ? query : (selectedOption?.label ?? '');
+  let displayValue = $derived(open ? query : (selectedOption?.label ?? ''));
 
   function openList() {
     if (disabled) return;
@@ -47,7 +58,7 @@
   }
 
   function pick(opt: ComboboxOption) {
-    dispatch('change', opt.value);
+    onchange?.(opt.value);
     open = false;
     query = '';
     inputEl?.focus();
@@ -99,9 +110,9 @@
       {disabled}
       {placeholder}
       value={displayValue}
-      on:input={onInputChange}
-      on:focus={openList}
-      on:keydown={onKeyDown}
+      oninput={onInputChange}
+      onfocus={openList}
+      onkeydown={onKeyDown}
       class="combobox-input"
     />
     <button
@@ -109,7 +120,7 @@
       tabindex="-1"
       aria-hidden="true"
       class="combobox-chevron-btn"
-      on:click={() => { if (open) { open = false; query = ''; } else { inputEl?.focus(); openList(); } }}
+      onclick={() => { if (open) { open = false; query = ''; } else { inputEl?.focus(); openList(); } }}
     >
       <svg class="select-chevron{open ? ' combobox-chevron-open' : ''}" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
         <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
@@ -128,8 +139,8 @@
             aria-selected={opt.value === value}
             data-active={idx === activeIdx ? 'true' : undefined}
             class="select-option"
-            on:mousedown|preventDefault={() => pick(opt)}
-            on:mouseenter={() => { activeIdx = idx; }}
+            onmousedown={(e) => { e.preventDefault(); (() => pick(opt))(); }}
+            onmouseenter={() => { activeIdx = idx; }}
           >{opt.label}</li>
         {/each}
       {/if}