@w5-ui/svelte 0.1.0 → 0.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@w5-ui/svelte",
-  "version": "0.1.0",
-  "description": "Svelte 4 components for the Dash UI design system - mirrors the @w5-ui/react API 1:1. Part of Webber's design systems.",
+  "version": "0.2.1",
+  "description": "Svelte 5 components for the Dash UI design system - mirrors the @w5-ui/react API 1:1. Part of Webber's design systems.",
   "keywords": [
     "svelte",
     "components",
@@ -41,14 +41,14 @@
     "./components/*.svelte": "./src/lib/components/*.svelte"
   },
   "peerDependencies": {
-    "svelte": ">=4"
+    "svelte": "^5"
   },
   "dependencies": {
-    "@w5-ui/assets": "workspace:*",
-    "@w5-ui/tokens": "workspace:*"
+    "@w5-ui/assets": "^0.2.1",
+    "@w5-ui/tokens": "^0.2.1"
   },
   "devDependencies": {
-    "svelte": "^4.2.19",
+    "svelte": "^5.43.5",
     "typescript": "^5.5.0"
   },
   "files": [

package/src/lib/components/Accordion.svelte

@@ -1,3 +1,11 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
 <div class="accordion">
-  <slot />
+  {@render children?.()}
 </div>

package/src/lib/components/AccordionItem.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-  export let title: string;
-  export let defaultOpen = false;
+  interface Props {
+    title: string;
+    defaultOpen?: boolean;
+    children?: import('svelte').Snippet;
+  }
 
-  let open = defaultOpen;
+  let { title, defaultOpen = false, children }: Props = $props();
+
+  // svelte-ignore state_referenced_locally
+  let open = $state(defaultOpen);
   const uid = Math.random().toString(36).slice(2, 9);
   const btnId = `acc-btn-${uid}`;
   const panelId = `acc-panel-${uid}`;
@@ -16,7 +22,7 @@
       class="accordion-trigger"
       aria-expanded={open}
       aria-controls={panelId}
-      on:click={() => (open = !open)}
+      onclick={() => (open = !open)}
     >
       <span>{title}</span>
       <svg
@@ -33,7 +39,7 @@
   {#if open}
     <div id={panelId} role="region" aria-labelledby={btnId} class="accordion-panel">
       <div class="accordion-content">
-        <slot />
+        {@render children?.()}
       </div>
     </div>
   {/if}

package/src/lib/components/ActionMenu.svelte

@@ -1,22 +1,27 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface ActionMenuItem { id: string; label: string; danger?: boolean; disabled?: boolean; }
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
 
-  export let items: ActionMenuItem[] = [];
-  export let label: string = 'Actions';
+  interface Props {
+    items?: ActionMenuItem[];
+    label?: string;
+    onaction?: (payload: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ action: string }>();
+  let { items = [], label = 'Actions',
+    onaction,
+  }: Props = $props();
   const uid = `dash-ui-am-${++counter}`;
   const menuId = `${uid}-menu`;
 
-  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);
 
   function toggle() {
     if (!open) activeIdx = 0;
@@ -24,7 +29,7 @@
   }
 
   function activate(id: string) {
-    dispatch('action', id);
+    onaction?.(id);
     open = false;
     triggerEl?.focus();
   }
@@ -68,8 +73,8 @@
     aria-haspopup="menu"
     aria-expanded={open}
     aria-controls={open ? menuId : undefined}
-    on:click={toggle}
-    on:keydown={onKeyDown}
+    onclick={toggle}
+    onkeydown={onKeyDown}
   >
     <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true" focusable="false" fill="currentColor">
       <circle cx="7" cy="2.5" r="1.2" />
@@ -87,8 +92,8 @@
           data-active={idx === activeIdx ? 'true' : undefined}
           data-danger={item.danger ? 'true' : undefined}
           class="action-menu-item"
-          on:mouseenter={() => { activeIdx = idx; }}
-          on:mousedown|preventDefault={() => { if (!item.disabled) activate(item.id); }}
+          onmouseenter={() => { activeIdx = idx; }}
+          onmousedown={(e) => { e.preventDefault(); (() => { if (!item.disabled) activate(item.id); })(); }}
         >{item.label}</li>
       {/each}
     </ul>

package/src/lib/components/ActivityFeed.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type ActivitySeverity = 'info' | 'success' | 'warn' | 'error' | 'neutral';
   export interface ActivityItem {
     id: string;
@@ -10,16 +10,28 @@
 </script>
 
 <script lang="ts">
-  import { afterUpdate } from 'svelte';
-  export let items: ActivityItem[] = [];
-  export let label: string = 'Activity feed';
-  export let busy: boolean = false;
-  export let maxHeight: number = 360;
-  export let autoScroll: boolean = false;
+  interface Props {
+    items?: ActivityItem[];
+    label?: string;
+    busy?: boolean;
+    maxHeight?: number;
+    autoScroll?: boolean;
+  }
+
+  let {
+    items = [],
+    label = 'Activity feed',
+    busy = false,
+    maxHeight = 360,
+    autoScroll = false,
+  }: Props = $props();
 
-  let endEl: HTMLDivElement;
+  let endEl = $state<HTMLDivElement | undefined>(undefined);
 
-  afterUpdate(() => {
+  // Replaces `afterUpdate`. Reading `items.length` makes the effect depend
+  // on the visible list so we re-scroll whenever an item is appended.
+  $effect(() => {
+    void items.length;
     if (autoScroll && endEl) endEl.scrollIntoView({ block: 'nearest' });
   });
 </script>
@@ -33,6 +45,7 @@
   style:overflow-y="auto"
 >
   {#each items as item, i (item.id)}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex - navigable feed item for keyboard users -->
     <article
       class="af-item af-item--{item.severity ?? 'neutral'}"
       aria-labelledby="af-title-{item.id}"
@@ -41,7 +54,7 @@
       aria-setsize={items.length}
       tabindex="0"
     >
-      <div class="af-dot" aria-hidden="true" />
+      <div class="af-dot" aria-hidden="true"></div>
       <div class="af-body">
         <div class="af-header">
           <span id="af-title-{item.id}" class="af-title">{item.title}</span>
@@ -56,5 +69,5 @@
   {#if items.length === 0}
     <div class="af-empty" role="status">No activity</div>
   {/if}
-  <div bind:this={endEl} />
+  <div bind:this={endEl}></div>
 </div>

package/src/lib/components/Alert.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import CloseIcon from '../icons/CloseIcon.svelte';
-  export let variant: 'success' | 'warn' | 'danger' | 'info' = 'info';
-  export let onDismiss: (() => void) | undefined = undefined;
+  interface Props {
+    variant?: 'success' | 'warn' | 'danger' | 'info';
+    onDismiss?: (() => void) | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let { variant = 'info', onDismiss = undefined, children }: Props = $props();
 </script>
 
 <div
@@ -10,9 +15,9 @@
   aria-live={variant === 'danger' ? 'assertive' : 'polite'}
   aria-atomic="true"
 >
-  <span class="alert-body"><slot /></span>
+  <span class="alert-body">{@render children?.()}</span>
   {#if onDismiss}
-    <button type="button" class="alert-dismiss icon-btn" on:click={onDismiss} aria-label="Dismiss alert">
+    <button type="button" class="alert-dismiss icon-btn" onclick={onDismiss} aria-label="Dismiss alert">
       <CloseIcon />
     </button>
   {/if}

package/src/lib/components/AnnotatedTimeSeries.svelte

@@ -1,27 +1,41 @@
-<script lang="ts">
+<script module lang="ts">
   export interface TimeSeriesAnnotation {
     index: number;
     label: string;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    data?: number[];
+    labels?: string[];
+    annotations?: TimeSeriesAnnotation[];
+    color?: string;
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let data: number[] = [];
-  export let labels: string[] = [];
-  export let annotations: TimeSeriesAnnotation[] = [];
-  export let color = '#006FFF';
-  export let height = 160;
-  export let ariaLabel = 'Annotated time series';
+  let {
+    data = [],
+    labels = [],
+    annotations = [],
+    color = '#006FFF',
+    height = 160,
+    ariaLabel = 'Annotated time series'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 16, r: 8, b: 28, l: 32 };
 
-  $: n = data.length;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: minV = n >= 2 ? Math.min(...data) : 0;
-  $: maxV = n >= 2 ? Math.max(...data) || 1 : 1;
-  $: range = maxV - minV || 1;
-  $: bot = PAD.t + chartH;
+  let n = $derived(data.length);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let minV = $derived(n >= 2 ? Math.min(...data) : 0);
+  let maxV = $derived(n >= 2 ? Math.max(...data) || 1 : 1);
+  let range = $derived(maxV - minV || 1);
+  let bot = $derived(PAD.t + chartH);
 
   function toX(i: number): number {
     return PAD.l + (i / (n - 1)) * chartW;
@@ -30,33 +44,33 @@
     return PAD.t + chartH - ((v - minV) / range) * chartH;
   }
 
-  $: pts = n >= 2 ? data.map((v, i) => [toX(i), toY(v)] as [number, number]) : [];
+  let pts = $derived(n >= 2 ? data.map((v, i) => [toX(i), toY(v)] as [number, number]) : []);
 
-  $: linePath = pts.length
+  let linePath = $derived(pts.length
     ? pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ')
-    : '';
+    : '');
 
-  $: areaPath = pts.length
+  let areaPath = $derived(pts.length
     ? `${linePath} L${pts[n - 1][0].toFixed(1)},${bot} L${pts[0][0].toFixed(1)},${bot} Z`
-    : '';
+    : '');
 
-  $: gridLines = [0, 0.5, 1].map((f) => ({
+  let gridLines = $derived([0, 0.5, 1].map((f) => ({
     y: PAD.t + (1 - f) * chartH,
     label: String(Math.round(minV + f * range)),
-  }));
+  })));
 
-  $: stride = n <= 8 ? 1 : Math.ceil(n / 6);
-  $: xLabels = n >= 2
+  let stride = $derived(n <= 8 ? 1 : Math.ceil(n / 6));
+  let xLabels = $derived(n >= 2
     ? data
         .map((_, i) => ({ x: toX(i), text: labels[i] ?? String(i), i }))
         .filter(({ i }) => i % stride === 0 || i === n - 1)
-    : [];
+    : []);
 
-  $: markers = annotations.map((a) => ({
+  let markers = $derived(annotations.map((a) => ({
     x: toX(Math.max(0, Math.min(n - 1, a.index))),
     label: a.label,
     color: a.color ?? '#F5A623',
-  }));
+  })));
 </script>
 
 {#if n >= 2}

package/src/lib/components/ArcDiagram.svelte

@@ -1,27 +1,39 @@
-<script lang="ts">
+<script module lang="ts">
   export interface ArcNode {
     id: string;
     label: string;
     color?: string;
   }
-
   export interface ArcLink {
     source: string;
     target: string;
     value?: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+
+  interface Props {
+    nodes: ArcNode[];
+    links: ArcLink[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let nodes: ArcNode[];
-  export let links: ArcLink[];
-  export let height = 180;
-  export let ariaLabel = 'Arc diagram';
+  let {
+    nodes,
+    links,
+    height = 180,
+    ariaLabel = 'Arc diagram'
+  }: Props = $props();
 
   const PALETTE = ['#006FFF', '#00C875', '#F5A623', '#A78BFA', '#FF7B7B', '#00C8C8', '#FB923C'];
   const VW = 400;
   const PAD = { t: 12, r: 20, b: 36, l: 20 };
 
-  $: layout = (() => {
+  let layout = $derived((() => {
     const n = nodes.length;
     if (!n) return null;
     const chartW = VW - PAD.l - PAD.r;
@@ -53,7 +65,7 @@
     });
 
     return { dots, arcs, baseY };
-  })();
+  })());
 </script>
 
 {#if layout}

package/src/lib/components/AreaChart.svelte

@@ -1,26 +1,38 @@
-<script lang="ts">
+<script module lang="ts">
   export interface AreaChartSeries {
     label: string;
     color: string;
     values: number[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: AreaChartSeries[];
+    labels?: string[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: AreaChartSeries[] = [];
-  export let labels: string[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Area chart';
+  let {
+    series = [],
+    labels = [],
+    height = 160,
+    ariaLabel = 'Area chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 12, r: 8, b: 28, l: 8 };
 
-  $: n = series[0]?.values.length ?? 0;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
+  let n = $derived(series[0]?.values.length ?? 0);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
 
-  $: totals = Array.from({ length: n }, (_, i) =>
+  let totals = $derived(Array.from({ length: n }, (_, i) =>
     series.reduce((acc, s) => acc + (s.values[i] ?? 0), 0),
-  );
-  $: maxV = totals.length ? Math.max(...totals, 1) : 1;
+  ));
+  let maxV = $derived(totals.length ? Math.max(...totals, 1) : 1);
 
   function toX(i: number): number {
     return PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2);
@@ -29,9 +41,9 @@
     return PAD.t + chartH - (v / maxV) * chartH;
   }
 
-  $: gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+  let gridLines = $derived([0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH));
 
-  $: areas = n > 0
+  let areas = $derived(n > 0
     ? series.map((s, j) => {
         const bottoms = Array.from({ length: n }, (_, i) =>
           series.slice(0, j).reduce((acc, sr) => acc + (sr.values[i] ?? 0), 0),
@@ -43,7 +55,7 @@
           .reverse();
         return { color: s.color, label: s.label, d: `M ${topPts.join(' L ')} L ${botPts.join(' L ')} Z` };
       })
-    : [];
+    : []);
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/Avatar.svelte

@@ -1,16 +1,28 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type AvatarSize = 'sm' | 'md' | 'lg';
   export type AvatarStatus = 'online' | 'offline' | 'away';
 </script>
 
 <script lang="ts">
-  export let initials: string = '?';
-  export let src: string | undefined = undefined;
-  export let alt: string | undefined = undefined;
-  export let size: AvatarSize = 'md';
-  export let status: AvatarStatus | undefined = undefined;
-  export let className: string = '';
-  export let style: string = '';
+  interface Props {
+    initials?: string;
+    src?: string | undefined;
+    alt?: string | undefined;
+    size?: AvatarSize;
+    status?: AvatarStatus | undefined;
+    className?: string;
+    style?: string;
+  }
+
+  let {
+    initials = '?',
+    src = undefined,
+    alt = undefined,
+    size = 'md',
+    status = undefined,
+    className = '',
+    style = ''
+  }: Props = $props();
 </script>
 
 <span

package/src/lib/components/AvatarGroup.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface AvatarItem {
     initials?: string;
     src?: string;
@@ -10,13 +10,22 @@
   import Avatar from './Avatar.svelte';
   import type { AvatarSize } from './Avatar.svelte';
 
-  export let avatars: AvatarItem[] = [];
-  export let max: number = 5;
-  export let size: AvatarSize = 'md';
-  export let ariaLabel: string = 'Avatar group';
+  interface Props {
+    avatars?: AvatarItem[];
+    max?: number;
+    size?: AvatarSize;
+    ariaLabel?: string;
+  }
+
+  let {
+    avatars = [],
+    max = 5,
+    size = 'md',
+    ariaLabel = 'Avatar group'
+  }: Props = $props();
 
-  $: visible = avatars.slice(0, max);
-  $: overflow = avatars.length - visible.length;
+  let visible = $derived(avatars.slice(0, max));
+  let overflow = $derived(avatars.length - visible.length);
 </script>
 
 <span class="avatar-group" role="list" aria-label={ariaLabel}>

package/src/lib/components/Badge.svelte

@@ -1,22 +1,35 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type BadgeColor = 'danger' | 'warn' | 'info' | 'success' | 'neutral';
 </script>
 
 <script lang="ts">
-  export let count: number | undefined = undefined;
-  export let dot: boolean = false;
-  export let max: number = 99;
-  export let showZero: boolean = false;
-  export let color: BadgeColor = 'danger';
-  let klass: string = '';
-  export { klass as class };
+  interface Props {
+    count?: number | undefined;
+    dot?: boolean;
+    max?: number;
+    showZero?: boolean;
+    color?: BadgeColor;
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
 
-  $: show = dot || (count !== undefined && (showZero || count > 0));
-  $: label = count !== undefined ? (count > max ? `${max}+` : String(count)) : '';
+  let {
+    count = undefined,
+    dot = false,
+    max = 99,
+    showZero = false,
+    color = 'danger',
+    class: klass = '',
+    children
+  }: Props = $props();
+  
+
+  let show = $derived(dot || (count !== undefined && (showZero || count > 0)));
+  let label = $derived(count !== undefined ? (count > max ? `${max}+` : String(count)) : '');
 </script>
 
 <span class="badge-wrapper{klass ? ` ${klass}` : ''}">
-  <slot />
+  {@render children?.()}
   {#if show}
     <span class="badge badge-{color}{dot ? ' badge-dot' : ''}" aria-hidden="true">
       {#if !dot}{label}{/if}

package/src/lib/components/Banner.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type BannerVariant = 'info' | 'success' | 'warn' | 'danger';
   export interface BannerAction {
     label: string;
@@ -8,12 +8,23 @@
 
 <script lang="ts">
   import CloseIcon from '../icons/CloseIcon.svelte';
-  export let variant: BannerVariant = 'info';
-  export let title: string | undefined = undefined;
-  export let action: BannerAction | undefined = undefined;
-  export let onDismiss: (() => void) | undefined = undefined;
+  interface Props {
+    variant?: BannerVariant;
+    title?: string | undefined;
+    action?: BannerAction | undefined;
+    onDismiss?: (() => void) | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    variant = 'info',
+    title = undefined,
+    action = undefined,
+    onDismiss = undefined,
+    children
+  }: Props = $props();
 
-  $: isUrgent = variant === 'danger' || variant === 'warn';
+  let isUrgent = $derived(variant === 'danger' || variant === 'warn');
 </script>
 
 <div
@@ -24,13 +35,13 @@
 >
   <div class="banner__body">
     {#if title}<span class="banner__title">{title}</span>{/if}
-    <span><slot /></span>
+    <span>{@render children?.()}</span>
   </div>
   {#if action}
-    <button type="button" class="banner__action" on:click={action.onClick}>{action.label}</button>
+    <button type="button" class="banner__action" onclick={action.onClick}>{action.label}</button>
   {/if}
   {#if onDismiss}
-    <button type="button" class="banner__dismiss icon-btn" on:click={onDismiss} aria-label="Dismiss banner">
+    <button type="button" class="banner__dismiss icon-btn" onclick={onDismiss} aria-label="Dismiss banner">
       <CloseIcon />
     </button>
   {/if}