@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/MultiSelect.svelte

@@ -1,54 +1,65 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface MultiSelectOption { value: string; label: string; }
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
 
-  export let options: MultiSelectOption[] = [];
-  export let value: string[] = [];
-  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-ms-${++counter}`;
-  $: inputId = id ?? uid;
-  $: listboxId = `${inputId}-lb`;
+  interface Props {
+    options?: MultiSelectOption[];
+    value?: string[];
+    label?: string | undefined;
+    placeholder?: string;
+    id?: string | undefined;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: string[]) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string[] }>();
+  let {
+    options = [],
+    value = [],
+    label = undefined,
+    placeholder = 'Select…',
+    id = undefined,
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+  
 
-  let open = false;
-  let query = '';
-  let activeIdx = -1;
-  let inputEl: HTMLInputElement;
-  let wrapperEl: HTMLDivElement;
+  const uid = `dash-ui-ms-${++counter}`;
+  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);
 
-  $: selectedSet = new Set(value);
+  let selectedSet = $derived(new Set(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] ? `${listboxId}-opt-${activeIdx}` : undefined;
+  let activeOptionId =
+    $derived(activeIdx >= 0 && filtered[activeIdx] ? `${listboxId}-opt-${activeIdx}` : undefined);
 
   function toggle(optValue: string) {
     const next = new Set(selectedSet);
     if (next.has(optValue)) next.delete(optValue);
     else next.add(optValue);
-    dispatch('change', Array.from(next));
+    onchange?.(Array.from(next));
   }
 
   function onKeyDown(e: KeyboardEvent) {
     if (disabled) return;
     if (e.key === 'Escape') { open = false; query = ''; return; }
     if (e.key === 'Backspace' && query === '' && value.length > 0) {
-      dispatch('change', value.slice(0, -1));
+      onchange?.(value.slice(0, -1));
       return;
     }
     if (!open) {
@@ -79,10 +90,10 @@
 
 <div class="multiselect-wrapper {className}" bind:this={wrapperEl}>
   {#if label}<label for={inputId} class="sr-only">{label}</label>{/if}
-  <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
   <div
     class="multiselect-field{open ? ' multiselect-field--open' : ''}"
-    on:click={() => { if (!disabled) inputEl?.focus(); }}
+    onclick={() => { if (!disabled) inputEl?.focus(); }}
   >
     {#each value as v (v)}
       {@const opt = options.find((o) => o.value === v)}
@@ -93,7 +104,7 @@
             type="button"
             class="tag__remove"
             aria-label="Remove {opt.label} filter"
-            on:click|stopPropagation={() => toggle(v)}
+            onclick={(e) => { e.stopPropagation(); (() => toggle(v))(); }}
           >
             <svg viewBox="0 0 10 10" width="10" height="10" fill="none" aria-hidden="true" focusable="false">
               <path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
@@ -116,9 +127,9 @@
       {disabled}
       placeholder={value.length === 0 ? placeholder : ''}
       value={query}
-      on:input={onInput}
-      on:focus={() => { if (!disabled) open = true; }}
-      on:keydown={onKeyDown}
+      oninput={onInput}
+      onfocus={() => { if (!disabled) open = true; }}
+      onkeydown={onKeyDown}
       class="multiselect-input"
     />
     <button
@@ -126,7 +137,7 @@
       tabindex="-1"
       aria-hidden="true"
       class="combobox-chevron-btn"
-      on:click|stopPropagation={() => { if (open) { open = false; query = ''; } else { inputEl?.focus(); open = true; } }}
+      onclick={(e) => { e.stopPropagation(); (() => { if (open) { open = false; query = ''; } else { inputEl?.focus(); open = true; } })(); }}
     >
       <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" />
@@ -139,15 +150,15 @@
         <li class="combobox-empty">No results</li>
       {:else}
         {#each filtered as opt, idx (opt.value)}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id="{listboxId}-opt-{idx}"
             role="option"
             aria-selected={selectedSet.has(opt.value)}
             data-active={idx === activeIdx ? 'true' : undefined}
             class="select-option multiselect-option"
-            on:mousedown|preventDefault={() => toggle(opt.value)}
-            on:mouseenter={() => { activeIdx = idx; }}
+            onmousedown={(e) => { e.preventDefault(); (() => toggle(opt.value))(); }}
+            onmouseenter={() => { activeIdx = idx; }}
           >
             <span class="multiselect-check" aria-hidden="true">
               {#if selectedSet.has(opt.value)}

package/src/lib/components/NightingaleChart.svelte

@@ -1,13 +1,20 @@
-<script lang="ts">
+<script module lang="ts">
   export interface NightingaleSegment {
     label: string;
     value: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    segments?: NightingaleSegment[];
+    color?: string;
+    ariaLabel?: string;
+  }
 
-  export let segments: NightingaleSegment[] = [];
-  export let color: string = '#006FFF';
-  export let ariaLabel: string = 'Nightingale chart';
+  let { segments = [], color = '#006FFF', ariaLabel = 'Nightingale chart' }: Props = $props();
 
   const SIZE = 280;
   const CX = SIZE / 2;
@@ -24,11 +31,11 @@
     return `M ${CX} ${CY} L ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 1 ${x2.toFixed(2)} ${y2.toFixed(2)} Z`;
   }
 
-  $: n = segments.length;
-  $: maxVal = n ? Math.max(...segments.map((s) => s.value), 1) : 1;
-  $: step = n ? (2 * Math.PI) / n : 0;
-  $: labelEvery = n <= 8 ? 1 : Math.round(n / 8);
-  $: wedges = segments.map((seg, i) => {
+  let n = $derived(segments.length);
+  let maxVal = $derived(n ? Math.max(...segments.map((s) => s.value), 1) : 1);
+  let step = $derived(n ? (2 * Math.PI) / n : 0);
+  let labelEvery = $derived(n <= 8 ? 1 : Math.round(n / 8));
+  let wedges = $derived(segments.map((seg, i) => {
     const sa = -Math.PI / 2 + i * step;
     const ea = -Math.PI / 2 + (i + 1) * step;
     const r = MIN_R + (seg.value / maxVal) * (MAX_R - MIN_R);
@@ -42,7 +49,7 @@
       label: seg.label,
       showLabel: i % labelEvery === 0,
     };
-  });
+  }));
 </script>
 
 {#if segments.length}

package/src/lib/components/NotificationPanel.svelte

@@ -1,9 +1,6 @@
-<script lang="ts">
-  import { onDestroy } from 'svelte';
-
+<script module lang="ts">
   export type NotifType = 'alarm' | 'system' | 'update';
   export type NotifSeverity = 'danger' | 'warn' | 'info' | 'success';
-
   export interface Notification {
     id: string;
     type: NotifType;
@@ -13,16 +10,32 @@
     time: string;
     read: boolean;
   }
+</script>
+
+<script lang="ts">
+  import { onDestroy } from 'svelte';
 
-  export let open: boolean = false;
-  export let notifications: Notification[] = [];
-  export let onClose: () => void = () => {};
-  export let onMarkRead: ((id: string) => void) | undefined = undefined;
-  export let onMarkAllRead: (() => void) | undefined = undefined;
 
-  let filter: 'all' | NotifType = 'all';
-  let panelEl: HTMLDivElement;
-  let prevFocus: HTMLElement | null = null;
+
+  interface Props {
+    open?: boolean;
+    notifications?: Notification[];
+    onClose?: () => void;
+    onMarkRead?: ((id: string) => void) | undefined;
+    onMarkAllRead?: (() => void) | undefined;
+  }
+
+  let {
+    open = $bindable(false),
+    notifications = [],
+    onClose = () => {},
+    onMarkRead = undefined,
+    onMarkAllRead = undefined
+  }: Props = $props();
+
+  let filter: 'all' | NotifType = $state('all');
+  let panelEl = $state<HTMLDivElement | undefined>(undefined);
+  let prevFocus: HTMLElement | null = $state(null);
 
   const SEV_COLOR: Record<string, string> = {
     danger: '#F03A3A',
@@ -40,8 +53,8 @@
 
   function setFilter(f: string) { filter = f as 'all' | NotifType; }
 
-  $: unread = notifications.filter((n) => !n.read).length;
-  $: filtered = filter === 'all' ? notifications : notifications.filter((n) => n.type === filter);
+  let unread = $derived(notifications.filter((n) => !n.read).length);
+  let filtered = $derived(filter === 'all' ? notifications : notifications.filter((n) => n.type === filter));
 
   const FOCUSABLE =
     'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
@@ -58,18 +71,20 @@
     else if (!e.shiftKey && active === l) { e.preventDefault(); f.focus(); }
   }
 
-  $: if (open) {
-    prevFocus = document.activeElement as HTMLElement | null;
-    setTimeout(() => {
-      if (!panelEl) return;
-      const first = panelEl.querySelector<HTMLElement>(FOCUSABLE);
-      (first ?? panelEl)?.focus();
-    }, 0);
-    window.addEventListener('keydown', trapFocus);
-  } else {
-    window.removeEventListener('keydown', trapFocus);
-    prevFocus?.focus?.();
-  }
+  $effect(() => {
+    if (open) {
+      prevFocus = document.activeElement as HTMLElement | null;
+      setTimeout(() => {
+        if (!panelEl) return;
+        const first = panelEl.querySelector<HTMLElement>(FOCUSABLE);
+        (first ?? panelEl)?.focus();
+      }, 0);
+      window.addEventListener('keydown', trapFocus);
+    } else {
+      window.removeEventListener('keydown', trapFocus);
+      prevFocus?.focus?.();
+    }
+  });
 
   onDestroy(() => {
     window.removeEventListener('keydown', trapFocus);
@@ -78,12 +93,12 @@
   let titleId = 'np-title-' + Math.random().toString(36).slice(2);
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 <div
   class="np-overlay{open ? ' np-overlay--show' : ''}"
-  on:click={onClose}
+  onclick={onClose}
   aria-hidden="true"
-/>
+></div>
 <div
   bind:this={panelEl}
   class="np-panel{open ? ' np-panel--show' : ''}"
@@ -102,11 +117,11 @@
       </h2>
       <div class="np-header-actions">
         {#if unread > 0 && onMarkAllRead}
-          <button type="button" class="np-mark-all" on:click={onMarkAllRead}>
+          <button type="button" class="np-mark-all" onclick={onMarkAllRead}>
             Mark all read
           </button>
         {/if}
-        <button type="button" class="icon-btn" on:click={onClose} aria-label="Close notifications">
+        <button type="button" class="icon-btn" onclick={onClose} aria-label="Close notifications">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
             <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z"/>
           </svg>
@@ -120,7 +135,7 @@
           role="tab"
           aria-selected={filter === f}
           class="np-filter{filter === f ? ' np-filter--active' : ''}"
-          on:click={() => setFilter(f)}
+          onclick={() => setFilter(f)}
         >
           {TYPE_LABEL[f] ?? f}
         </button>
@@ -158,7 +173,7 @@
             <button
               type="button"
               class="np-read-btn"
-              on:click={() => onMarkRead?.(n.id)}
+              onclick={() => onMarkRead?.(n.id)}
               aria-label="Mark as read: {n.title}"
               title="Mark as read"
             >&#10003;</button>

package/src/lib/components/NumberInput.svelte

@@ -1,26 +1,39 @@
-<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 min: number | undefined = undefined;
-  export let max: number | undefined = undefined;
-  export let step: number = 1;
-  export let suffix: string | undefined = undefined;
-  export let disabled: boolean = false;
-  export let id: string | undefined = undefined;
-  let className = '';
-  export { className as class };
-
-  const uid = `dash-ui-ni-${++counter}`;
-  $: inputId = id ?? uid;
+  interface Props {
+    label?: string | undefined;
+    value?: number;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number;
+    suffix?: string | undefined;
+    disabled?: boolean;
+    id?: string | undefined;
+    class?: string;
+    onchange?: (payload: number) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: number }>();
+  let {
+    label = undefined,
+    value = $bindable(0),
+    min = undefined,
+    max = undefined,
+    step = 1,
+    suffix = undefined,
+    disabled = false,
+    id = undefined,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+  
 
+  const uid = `dash-ui-ni-${++counter}`;
+  let inputId = $derived(id ?? uid);
   function clamp(n: number): number {
     let v = n;
     if (min !== undefined) v = Math.max(min, v);
@@ -30,7 +43,7 @@
 
   function commit(next: number) {
     value = clamp(next);
-    dispatch('change', value);
+    onchange?.(value);
   }
 
   function handleKey(e: KeyboardEvent) {
@@ -47,8 +60,8 @@
     if (!isNaN(n)) commit(n);
   }
 
-  $: canDecrement = !disabled && (min === undefined || value > min);
-  $: canIncrement = !disabled && (max === undefined || value < max);
+  let canDecrement = $derived(!disabled && (min === undefined || value > min));
+  let canIncrement = $derived(!disabled && (max === undefined || value < max));
 </script>
 
 <div class="number-input {className}">
@@ -62,8 +75,9 @@
       aria-label="Decrement"
       tabindex="-1"
       disabled={!canDecrement}
-      on:click={() => commit(value - step)}
+      onclick={() => commit(value - step)}
     >−</button>
+    <!-- svelte-ignore a11y_no_redundant_roles - role kept explicit for screen reader compat -->
     <input
       id={inputId}
       type="number"
@@ -75,8 +89,8 @@
       {value}
       {disabled}
       class="number-input__field"
-      on:change={handleChange}
-      on:keydown={handleKey}
+      onchange={handleChange}
+      onkeydown={handleKey}
     />
     {#if suffix}
       <span class="number-input__suffix" aria-hidden="true">{suffix}</span>
@@ -87,7 +101,7 @@
       aria-label="Increment"
       tabindex="-1"
       disabled={!canIncrement}
-      on:click={() => commit(value + step)}
+      onclick={() => commit(value + step)}
     >+</button>
   </div>
 </div>

package/src/lib/components/OTPInput.svelte

@@ -1,23 +1,35 @@
-<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 length: number = 6;
-  export let value: string = '';
-  export let disabled: boolean = false;
-  let className = '';
-  export { className as class };
+  interface Props {
+    label?: string | undefined;
+    length?: number;
+    value?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string }>();
+  let {
+    label = undefined,
+    length = 6,
+    value = $bindable(''),
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-otp-${++counter}`;
 
-  let digits: string[] = Array.from({ length }, (_, i) => value[i] ?? '');
-  let inputs: (HTMLInputElement | null)[] = Array(length).fill(null);
+  // svelte-ignore state_referenced_locally
+  let digits: string[] = $state(Array.from({ length }, (_, i) => value[i] ?? ''));
+  // svelte-ignore state_referenced_locally
+  let inputs: (HTMLInputElement | null)[] = $state(Array(length).fill(null));
 
+  // svelte-ignore state_referenced_locally
   const half = Math.floor(length / 2);
 
   function focusAt(i: number) {
@@ -28,7 +40,7 @@
   function commit(next: string[]) {
     digits = next;
     value = next.join('');
-    dispatch('change', value);
+    onchange?.(value);
   }
 
   function handleInput(i: number, raw: string) {
@@ -84,10 +96,10 @@
         {disabled}
         class="otp-input__digit"
         autocomplete={i === 0 ? 'one-time-code' : 'off'}
-        on:input={(e) => handleInput(i, e.currentTarget.value)}
-        on:keydown={(e) => handleKey(i, e)}
-        on:paste={handlePaste}
-        on:focus={(e) => e.currentTarget.select()}
+        oninput={(e) => handleInput(i, e.currentTarget.value)}
+        onkeydown={(e) => handleKey(i, e)}
+        onpaste={handlePaste}
+        onfocus={(e) => e.currentTarget.select()}
       />
     {/each}
   </div>

package/src/lib/components/Pagination.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  
 
-  export let page: number = 1;
-  export let pageSize: number = 10;
-  export let total: number = 0;
-
-  const dispatch = createEventDispatcher<{ change: number }>();
-
-  $: totalPages = Math.max(1, Math.ceil(total / pageSize));
-  $: pages = getPageNumbers(page, totalPages);
+  interface Props {
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onchange?: (payload: number) => void;
+  }
 
+  let { page = 1, pageSize = 10, total = 0,
+    onchange,
+  }: Props = $props();
   function getPageNumbers(p: number, tp: number): (number | '...')[] {
     if (tp <= 7) return Array.from({ length: tp }, (_, i) => i + 1);
     const items: (number | '...')[] = [1];
@@ -22,7 +23,9 @@
     return items;
   }
 
-  function go(p: number) { dispatch('change', p); }
+  function go(p: number) { onchange?.(p); }
+  let totalPages = $derived(Math.max(1, Math.ceil(total / pageSize)));
+  let pages = $derived(getPageNumbers(page, totalPages));
 </script>
 
 {#if totalPages > 1}
@@ -32,7 +35,7 @@
       class="pagination-btn"
       aria-label="Previous page"
       disabled={page <= 1}
-      on:click={() => go(page - 1)}
+      onclick={() => go(page - 1)}
     >&#x2039;</button>
     {#each pages as p, i (typeof p === 'number' ? p : `e${i}`)}
       {#if p === '...'}
@@ -43,7 +46,7 @@
           class="pagination-btn{p === page ? ' active' : ''}"
           aria-label="Page {p}"
           aria-current={p === page ? 'page' : undefined}
-          on:click={() => go(p)}
+          onclick={() => go(p)}
         >{p}</button>
       {/if}
     {/each}
@@ -52,7 +55,7 @@
       class="pagination-btn"
       aria-label="Next page"
       disabled={page >= totalPages}
-      on:click={() => go(page + 1)}
+      onclick={() => go(page + 1)}
     >&#x203A;</button>
   </nav>
 {/if}

package/src/lib/components/ParallelCoordinates.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
-
+<script module lang="ts">
   export interface ParallelAxis {
     label: string;
     min: number;
@@ -8,28 +6,42 @@
     unit?: string;
     invert?: boolean;
   }
-
   export interface ParallelSeries {
     label: string;
     color?: string;
     values: number[];
   }
+</script>
+
+<script lang="ts">
+  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
+
+
+
+  interface Props {
+    axes?: ParallelAxis[];
+    series?: ParallelSeries[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let axes: ParallelAxis[] = [];
-  export let series: ParallelSeries[] = [];
-  export let height: number = 200;
-  export let ariaLabel: string = 'Parallel coordinates chart';
+  let {
+    axes = [],
+    series = [],
+    height = 200,
+    ariaLabel = 'Parallel coordinates chart'
+  }: Props = $props();
 
   const VW = 380;
-  $: VH = height;
+  let VH = $derived(height);
   const PAD_L = 28;
   const PAD_R = 28;
   const PAD_T = 32;
   const PAD_B = 20;
 
-  $: TRACK_W = VW - PAD_L - PAD_R;
-  $: TRACK_H = VH - PAD_T - PAD_B;
-  $: nAxes = axes.length;
+  let TRACK_W = $derived(VW - PAD_L - PAD_R);
+  let TRACK_H = $derived(VH - PAD_T - PAD_B);
+  let nAxes = $derived(axes.length);
 
   function axisX(i: number, tw: number, n: number): number {
     return PAD_L + (n > 1 ? i * (tw / (n - 1)) : tw / 2);
@@ -52,12 +64,12 @@
 
   const TICKS = [0, 0.5, 1];
 
-  $: paths = series.map((s, si) => ({
+  let paths = $derived(series.map((s, si) => ({
     d: seriesPath(s, TRACK_W, TRACK_H, nAxes),
     stroke: s.color ?? COLORS[si % COLORS.length],
-  }));
+  })));
 
-  $: axisData = axes.map((axis, i) => {
+  let axisData = $derived(axes.map((axis, i) => {
     const x = axisX(i, TRACK_W, nAxes);
     const ticks = TICKS.map(t => {
       const v = axis.invert
@@ -67,7 +79,7 @@
       return { t, v, y };
     });
     return { axis, x, ticks };
-  });
+  }));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">