@w5-ui/svelte 0.1.0 → 0.2.1

package/src/lib/components/SwitchPortGrid.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type SwitchPortStatus = 'up' | 'poe' | 'down';
   export interface SwitchPort {
     status: SwitchPortStatus;
@@ -13,11 +13,17 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  export let ports: SwitchPort[] = [];
-  export let columns: number = 12;
-  export let ariaLabel: string = 'Switch port panel';
-  const dispatch = createEventDispatcher<{ portclick: number }>();
+  
+  interface Props {
+    ports?: SwitchPort[];
+    columns?: number;
+    ariaLabel?: string;
+    onportclick?: (payload: number) => void;
+  }
+
+  let { ports = [], columns = 12, ariaLabel = 'Switch port panel',
+    onportclick,
+  }: Props = $props();
 </script>
 
 <ul class="spg" role="list" aria-label={ariaLabel} style="grid-template-columns: repeat({columns}, 1fr);">
@@ -30,7 +36,7 @@
         class="spg__btn"
         data-status={port.status}
         aria-label={desc}
-        on:click={() => dispatch('portclick', i)}
+        onclick={() => onportclick?.(i)}
       >
         <span class="spg__num">{n}</span>
         {#if port.speed}

package/src/lib/components/TabPanel.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
-  export let id: string;
-  export let active: string;
-  $: isActive = id === active;
+  interface Props {
+    id: string;
+    active: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { id, active, children }: Props = $props();
+  let isActive = $derived(id === active);
 </script>
 
 <div
@@ -12,6 +17,6 @@
   tabindex="0"
 >
   {#if isActive}
-    <slot />
+    {@render children?.()}
   {/if}
 </div>

package/src/lib/components/Tabs.svelte

@@ -1,18 +1,26 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+<script module lang="ts">
   export interface TabItem { id: string; label: string; badge?: string | number }
-  export let items: TabItem[] = [];
-  export let active: string;
-  export let ariaLabel: string | undefined = undefined;
-  const dispatch = createEventDispatcher<{ change: string }>();
+</script>
+
+<script lang="ts">
+  
+  interface Props {
+    items?: TabItem[];
+    active: string;
+    ariaLabel?: string | undefined;
+    onchange?: (payload: string) => void;
+  }
 
-  let buttons: (HTMLButtonElement | null)[] = [];
+  let { items = [], active = $bindable(), ariaLabel = undefined,
+    onchange,
+  }: Props = $props();
+  let buttons: (HTMLButtonElement | null)[] = $state([]);
 
   function select(idx: number) {
     const next = items[(idx + items.length) % items.length];
     if (!next) return;
     active = next.id;
-    dispatch('change', next.id);
+    onchange?.(next.id);
     buttons[(idx + items.length) % items.length]?.focus();
   }
 
@@ -35,8 +43,8 @@
       aria-selected={t.id === active}
       aria-controls="tabpanel-{t.id}"
       tabindex={t.id === active ? 0 : -1}
-      on:click={() => { active = t.id; dispatch('change', t.id); }}
-      on:keydown={(e) => onKey(e, i)}
+      onclick={() => { active = t.id; onchange?.(t.id); }}
+      onkeydown={(e) => onKey(e, i)}
     >
       {t.label}
       {#if t.badge !== undefined}<span class="badge">{t.badge}</span>{/if}

package/src/lib/components/Tag.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-  export let label: string;
-  let className = '';
-  export { className as class };
+  interface Props {
+    label: string;
+    class?: string;
+    onclick?: (event: MouseEvent) => void;
+  }
+
+  let { label, class: className = '', onclick }: Props = $props();
 </script>
 
 <span class="tag {className}">
@@ -10,10 +14,10 @@
     type="button"
     class="tag__remove"
     aria-label="Remove {label} filter"
-    on:click
+    {onclick}
   >
     <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"/>
+      <path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
     </svg>
   </button>
 </span>

package/src/lib/components/TagInput.svelte

@@ -1,34 +1,43 @@
-<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 = 'Type and press Enter…';
-  export let disabled: boolean = false;
-  let klass = '';
-  export { klass as class };
+  interface Props {
+    label?: string | undefined;
+    value?: string[];
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: string[]) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string[] }>();
+  let {
+    label = undefined,
+    value = $bindable([]),
+    placeholder = 'Type and press Enter…',
+    disabled = false,
+    class: klass = '',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-tag-input-${++counter}`;
 
-  let draft = '';
-  let inputEl: HTMLInputElement;
+  let draft = $state('');
+  let inputEl = $state<HTMLInputElement | undefined>(undefined);
 
   function addTag(raw: string) {
     const trimmed = raw.trim();
     if (!trimmed || value.includes(trimmed)) return;
     value = [...value, trimmed];
     draft = '';
-    dispatch('change', value);
+    onchange?.(value);
   }
 
   function removeTag(index: number) {
     value = value.filter((_, i) => i !== index);
-    dispatch('change', value);
+    onchange?.(value);
   }
 
   function handleKeyDown(e: KeyboardEvent) {
@@ -51,12 +60,13 @@
   {#if label}
     <label for={uid} class="tag-input__label">{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 -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions - group container focuses input on click -->
   <div
     role="group"
     aria-label={label ?? 'Tags'}
     class="tag-input{disabled ? ' tag-input--disabled' : ''}"
-    on:click={() => inputEl?.focus()}
+    onclick={() => inputEl?.focus()}
   >
     {#each value as tag, i}
       <span class="tag">
@@ -66,7 +76,7 @@
             type="button"
             class="tag__remove"
             aria-label="Remove {tag}"
-            on:click|stopPropagation={() => removeTag(i)}
+            onclick={(e) => { e.stopPropagation(); (() => removeTag(i))(); }}
           >
             <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"/>
@@ -85,8 +95,8 @@
       placeholder={value.length === 0 ? placeholder : ''}
       aria-label={label ?? 'Add tag'}
       autocomplete="off"
-      on:keydown={handleKeyDown}
-      on:blur={handleBlur}
+      onkeydown={handleKeyDown}
+      onblur={handleBlur}
     />
   </div>
 </div>

package/src/lib/components/Textarea.svelte

@@ -1,31 +1,53 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
-  export let value: string = '';
-  export let rows: number = 4;
-  export let placeholder: string | undefined = undefined;
-  export let disabled: boolean = false;
-  export let readonly: boolean = false;
-  export let id: string | undefined = undefined;
-  let className = '';
-  export { className as class };
+  interface Props {
+    value?: string;
+    rows?: number;
+    placeholder?: string | undefined;
+    disabled?: boolean;
+    readonly?: boolean;
+    id?: string | undefined;
+    class?: string;
+    style?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    rows = 4,
+    placeholder = undefined,
+    disabled = false,
+    readonly = false,
+    id = undefined,
+    class: className = '',
+    style = '',
+    oninput,
+    onchange,
+    onfocus,
+    onblur,
+  }: Props = $props();
 
   const uid = `dash-ui-ta-${++counter}`;
-  $: inputId = id ?? uid;
+  let inputId = $derived(id ?? uid);
 </script>
 
 <textarea
   id={inputId}
   class="input textarea {className}"
+  {style}
   {rows}
   {placeholder}
   {disabled}
-  readonly={readonly}
+  {readonly}
   bind:value
-  on:input
-  on:change
-  on:focus
-  on:blur
+  {oninput}
+  {onchange}
+  {onfocus}
+  {onblur}
 ></textarea>

package/src/lib/components/ThresholdAreaChart.svelte

@@ -1,33 +1,46 @@
-<script context="module">
+<script module>
   let _n = 0;
 </script>
 <script lang="ts">
   const uid = `tac${_n++}`;
 
-  export let values: number[];
-  export let labels: string[] = [];
-  export let threshold: number;
-  export let thresholdLabel: string | undefined = undefined;
-  export let belowColor: string = '#00C875';
-  export let aboveColor: string = '#FF7B7B';
-  export let height: number = 160;
-  export let ariaLabel: string = 'Threshold area chart';
+  interface Props {
+    values: number[];
+    labels?: string[];
+    threshold: number;
+    thresholdLabel?: string | undefined;
+    belowColor?: string;
+    aboveColor?: string;
+    height?: number;
+    ariaLabel?: string;
+  }
+
+  let {
+    values,
+    labels = [],
+    threshold,
+    thresholdLabel = undefined,
+    belowColor = '#00C875',
+    aboveColor = '#FF7B7B',
+    height = 160,
+    ariaLabel = 'Threshold area chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 16, r: 8, b: 28, l: 8 };
 
-  $: n = values.length;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: maxV = Math.max(...values, threshold, 1);
-  $: toX = (i: number) => PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2);
-  $: toY = (v: number) => PAD.t + chartH - (v / maxV) * chartH;
-  $: threshY = toY(threshold);
-  $: baseY = PAD.t + chartH;
-  $: pts = values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`);
-  $: d = `M ${pts.join(' L ')} L ${toX(n - 1).toFixed(1)},${baseY} L ${toX(0).toFixed(1)},${baseY} Z`;
-  $: tLabel = thresholdLabel ?? String(threshold);
-  $: gridLines = [0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+  let n = $derived(values.length);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let maxV = $derived(Math.max(...values, threshold, 1));
+  let toX = $derived((i: number) => PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2));
+  let toY = $derived((v: number) => PAD.t + chartH - (v / maxV) * chartH);
+  let threshY = $derived(toY(threshold));
+  let baseY = $derived(PAD.t + chartH);
+  let pts = $derived(values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`));
+  let d = $derived(`M ${pts.join(' L ')} L ${toX(n - 1).toFixed(1)},${baseY} L ${toX(0).toFixed(1)},${baseY} Z`);
+  let tLabel = $derived(thresholdLabel ?? String(threshold));
+  let gridLines = $derived([0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%">

package/src/lib/components/TimePicker.svelte

@@ -1,17 +1,25 @@
-<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 = '00:00';
-  export let disabled: boolean = false;
-  let className = '';
-  export { className as class };
+  interface Props {
+    label?: string | undefined;
+    value?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string }>();
+  let {
+    label = undefined,
+    value = $bindable('00:00'),
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-tp-${++counter}`;
 
   function pad(n: number): string {
@@ -26,13 +34,13 @@
     ];
   }
 
-  $: [hours, minutes] = parseTime(value);
+  let [hours, minutes] = $derived(parseTime(value));
 
-  let inputs: [HTMLInputElement | null, HTMLInputElement | null] = [null, null];
+  let inputs: [HTMLInputElement | null, HTMLInputElement | null] = $state([null, null]);
 
   function commit(h: number, m: number) {
     value = `${pad(h)}:${pad(m)}`;
-    dispatch('change', value);
+    onchange?.(value);
   }
 
   function handleKey(field: 0 | 1, e: KeyboardEvent) {
@@ -88,9 +96,9 @@
       {disabled}
       maxlength={2}
       class="time-picker__field"
-      on:input={(e) => handleInput(0, e)}
-      on:keydown={(e) => handleKey(0, e)}
-      on:focus={(e) => e.currentTarget.select()}
+      oninput={(e) => handleInput(0, e)}
+      onkeydown={(e) => handleKey(0, e)}
+      onfocus={(e) => e.currentTarget.select()}
     />
     <span class="time-picker__sep" aria-hidden="true">:</span>
     <input
@@ -108,9 +116,9 @@
       {disabled}
       maxlength={2}
       class="time-picker__field"
-      on:input={(e) => handleInput(1, e)}
-      on:keydown={(e) => handleKey(1, e)}
-      on:focus={(e) => e.currentTarget.select()}
+      oninput={(e) => handleInput(1, e)}
+      onkeydown={(e) => handleKey(1, e)}
+      onfocus={(e) => e.currentTarget.select()}
     />
   </div>
 </div>

package/src/lib/components/TimeRange.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export type TimeRangeId = '1h' | '6h' | '24h' | '7d' | '30d';
   const PRESETS: { id: TimeRangeId; label: string; short: string }[] = [
@@ -11,20 +11,25 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
 
-  export let value: TimeRangeId = '1h';
+  interface Props {
+    value?: TimeRangeId;
+    onchange?: (payload: TimeRangeId) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: TimeRangeId }>();
+  let { value = '1h',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-tr-${++counter}`;
   const listId = `${uid}-list`;
 
-  let open = false;
-  let activeIdx = 0;
-  let triggerEl: HTMLButtonElement;
-  let wrapperEl: HTMLDivElement;
+  let open = $state(false);
+  let activeIdx = $state(0);
+  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let wrapperEl = $state<HTMLDivElement | undefined>(undefined);
 
-  $: selected = PRESETS.find((p) => p.id === value) ?? PRESETS[0];
+  let selected = $derived(PRESETS.find((p) => p.id === value) ?? PRESETS[0]);
 
   function toggle() {
     if (!open) activeIdx = PRESETS.findIndex((p) => p.id === value);
@@ -32,7 +37,7 @@
   }
 
   function select(id: TimeRangeId) {
-    dispatch('change', id);
+    onchange?.(id);
     open = false;
     triggerEl?.focus();
   }
@@ -71,8 +76,8 @@
     aria-haspopup="listbox"
     aria-expanded={open}
     aria-controls={open ? listId : undefined}
-    on:click={toggle}
-    on:keydown={onKeyDown}
+    onclick={toggle}
+    onkeydown={onKeyDown}
   >
     {selected.short}
     <svg class="time-range-chevron" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -88,8 +93,8 @@
           tabindex="-1"
           data-active={idx === activeIdx ? 'true' : undefined}
           class="time-range-option"
-          on:mouseenter={() => { activeIdx = idx; }}
-          on:mousedown|preventDefault={() => select(p.id)}
+          onmouseenter={() => { activeIdx = idx; }}
+          onmousedown={(e) => { e.preventDefault(); (() => select(p.id))(); }}
         >
           {p.label}
           {#if p.id === value}

package/src/lib/components/Timeline.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface TimelineEvent {
     id: string;
     title: string;
@@ -9,9 +9,13 @@
 </script>
 
 <script lang="ts">
-  export let events: TimelineEvent[];
-  let className = '';
-  export { className as class };
+  interface Props {
+    events: TimelineEvent[];
+    class?: string;
+  }
+
+  let { events, class: className = '' }: Props = $props();
+  
 </script>
 
 <ol class="timeline {className}" aria-label="Event timeline">

package/src/lib/components/Toast.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { writable } from 'svelte/store';
 
   export type ToastVariant = 'success' | 'info' | 'warn' | 'danger';
@@ -40,7 +40,7 @@
       <button
         type="button"
         class="toast-dismiss icon-btn"
-        on:click={() => dismiss(item.id)}
+        onclick={() => dismiss(item.id)}
         aria-label="Dismiss notification"
       >
         <svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false">

package/src/lib/components/Toggle.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  export let on: boolean = false;
-  export let ariaLabel: string | undefined = undefined;
-  export let ariaDescribedBy: string | undefined = undefined;
-  const dispatch = createEventDispatcher<{ toggle: boolean }>();
+  
+  interface Props {
+    on?: boolean;
+    ariaLabel?: string | undefined;
+    ariaDescribedBy?: string | undefined;
+    ontoggle?: (payload: boolean) => void;
+  }
+
+  let { on = $bindable(false), ariaLabel = undefined, ariaDescribedBy = undefined,
+    ontoggle,
+  }: Props = $props();
   function flip() {
     on = !on;
-    dispatch('toggle', on);
+    ontoggle?.(on);
   }
 </script>
 
@@ -17,7 +23,7 @@
   aria-label={ariaLabel}
   aria-describedby={ariaDescribedBy}
   class="toggle-track {on ? 'on' : 'off'}"
-  on:click={flip}
+  onclick={flip}
 >
   <span class="knob"></span>
 </button>

package/src/lib/components/ToggleGroup.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  
 
-  export let options: { value: string; label: string; disabled?: boolean }[] = [];
-  export let value: string[] = [];
-  export let ariaLabel: string = '';
-  export let size: 'sm' | 'md' = 'md';
-  let klass: string = '';
-  export { klass as class };
-
-  const dispatch = createEventDispatcher<{ change: string[] }>();
+  interface Props {
+    options?: { value: string; label: string; disabled?: boolean }[];
+    value?: string[];
+    ariaLabel?: string;
+    size?: 'sm' | 'md';
+    class?: string;
+    onchange?: (payload: string[]) => void;
+  }
 
+  let {
+    options = [],
+    value = $bindable([]),
+    ariaLabel = '',
+    size = 'md',
+    class: klass = '',
+    onchange,
+  }: Props = $props();
   function toggle(v: string) {
     const next = value.includes(v) ? value.filter((x) => x !== v) : [...value, v];
     value = next;
-    dispatch('change', next);
+    onchange?.(next);
   }
 </script>
 
@@ -24,7 +32,7 @@
       aria-pressed={value.includes(opt.value)}
       disabled={opt.disabled}
       class="tg-btn{value.includes(opt.value) ? ' tg-btn--on' : ''}"
-      on:click={() => toggle(opt.value)}
+      onclick={() => toggle(opt.value)}
     >
       {opt.label}
     </button>

package/src/lib/components/Tooltip.svelte

@@ -1,16 +1,26 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
-  export let label: string;
-  export let placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
-  let className = '';
-  export { className as class };
+  interface Props {
+    label: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    label,
+    placement = 'top',
+    class: className = '',
+    children
+  }: Props = $props();
+  
   const id = `dash-ui-tooltip-${++counter}`;
 </script>
 
 <span class="tooltip-wrapper tooltip-{placement} {className}">
-  <span class="tooltip-trigger" aria-describedby={id}><slot /></span>
+  <span class="tooltip-trigger" aria-describedby={id}>{@render children?.()}</span>
   <span {id} role="tooltip" class="tooltip-content">{label}</span>
 </span>