@w5-ui/svelte 0.1.0

package/README.md

@@ -0,0 +1,8 @@
+# @w5-ui/svelte
+
+Svelte component library for the Dash UI design system. Mirrors `@w5-ui/react` 1:1.
+
+```ts
+import '@w5-ui/svelte/styles.css'
+import { Card, Pill, Button, Topbar, Sidebar } from '@w5-ui/svelte'
+```

package/package.json

@@ -0,0 +1,57 @@
+{
+  "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.",
+  "keywords": [
+    "svelte",
+    "components",
+    "design-system",
+    "dashboard",
+    "ui-library",
+    "dash-ui"
+  ],
+  "author": "Webber Takken (https://github.com/webbertakken)",
+  "license": "MIT",
+  "homepage": "https://github.com/webbertakken/dash-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webbertakken/dash-ui.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": "https://github.com/webbertakken/dash-ui/issues",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.svelte"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "svelte": "./src/lib/index.ts",
+  "main": "./src/lib/index.ts",
+  "types": "./src/lib/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/lib/index.ts",
+      "types": "./src/lib/index.ts",
+      "default": "./src/lib/index.ts"
+    },
+    "./styles.css": "./src/lib/styles.css",
+    "./components/*.svelte": "./src/lib/components/*.svelte"
+  },
+  "peerDependencies": {
+    "svelte": ">=4"
+  },
+  "dependencies": {
+    "@w5-ui/assets": "workspace:*",
+    "@w5-ui/tokens": "workspace:*"
+  },
+  "devDependencies": {
+    "svelte": "^4.2.19",
+    "typescript": "^5.5.0"
+  },
+  "files": [
+    "src/lib/**"
+  ]
+}

package/src/lib/components/Accordion.svelte

@@ -0,0 +1,3 @@
+<div class="accordion">
+  <slot />
+</div>

package/src/lib/components/AccordionItem.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  export let title: string;
+  export let defaultOpen = false;
+
+  let open = defaultOpen;
+  const uid = Math.random().toString(36).slice(2, 9);
+  const btnId = `acc-btn-${uid}`;
+  const panelId = `acc-panel-${uid}`;
+</script>
+
+<div class="accordion-item">
+  <h3 class="accordion-header">
+    <button
+      id={btnId}
+      type="button"
+      class="accordion-trigger"
+      aria-expanded={open}
+      aria-controls={panelId}
+      on:click={() => (open = !open)}
+    >
+      <span>{title}</span>
+      <svg
+        class="accordion-chevron"
+        class:open
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </button>
+  </h3>
+  {#if open}
+    <div id={panelId} role="region" aria-labelledby={btnId} class="accordion-panel">
+      <div class="accordion-content">
+        <slot />
+      </div>
+    </div>
+  {/if}
+</div>

package/src/lib/components/ActionMenu.svelte

@@ -0,0 +1,96 @@
+<script context="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';
+
+  export let items: ActionMenuItem[] = [];
+  export let label: string = 'Actions';
+
+  const dispatch = createEventDispatcher<{ action: string }>();
+  const uid = `dash-ui-am-${++counter}`;
+  const menuId = `${uid}-menu`;
+
+  let open = false;
+  let activeIdx = 0;
+  let triggerEl: HTMLButtonElement;
+  let wrapperEl: HTMLDivElement;
+
+  function toggle() {
+    if (!open) activeIdx = 0;
+    open = !open;
+  }
+
+  function activate(id: string) {
+    dispatch('action', id);
+    open = false;
+    triggerEl?.focus();
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (!open) {
+      if (['ArrowDown', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+        activeIdx = 0;
+        open = true;
+      }
+      return;
+    }
+    if (e.key === 'Escape') { e.preventDefault(); open = false; triggerEl?.focus(); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx + 1, items.length - 1); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = Math.max(activeIdx - 1, 0); }
+    else if (e.key === 'Home') { e.preventDefault(); activeIdx = 0; }
+    else if (e.key === 'End') { e.preventDefault(); activeIdx = items.length - 1; }
+    else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const item = items[activeIdx];
+      if (item && !item.disabled) activate(item.id);
+    }
+    else if (e.key === 'Tab') { open = false; }
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (open && !wrapperEl?.contains(e.target as Node)) open = false;
+  }
+
+  onMount(() => document.addEventListener('mousedown', handleOutside));
+  onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+</script>
+
+<div class="action-menu-root" bind:this={wrapperEl}>
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="icon-btn action-menu-trigger"
+    aria-label={label}
+    aria-haspopup="menu"
+    aria-expanded={open}
+    aria-controls={open ? menuId : undefined}
+    on:click={toggle}
+    on:keydown={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" />
+      <circle cx="7" cy="7" r="1.2" />
+      <circle cx="7" cy="11.5" r="1.2" />
+    </svg>
+  </button>
+  {#if open}
+    <ul id={menuId} role="menu" aria-label={label} class="action-menu">
+      {#each items as item, idx (item.id)}
+        <li
+          role="menuitem"
+          tabindex="-1"
+          aria-disabled={item.disabled}
+          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); }}
+        >{item.label}</li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/src/lib/components/ActivityFeed.svelte

@@ -0,0 +1,60 @@
+<script context="module" lang="ts">
+  export type ActivitySeverity = 'info' | 'success' | 'warn' | 'error' | 'neutral';
+  export interface ActivityItem {
+    id: string;
+    title: string;
+    description?: string;
+    time: string;
+    severity?: ActivitySeverity;
+  }
+</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;
+
+  let endEl: HTMLDivElement;
+
+  afterUpdate(() => {
+    if (autoScroll && endEl) endEl.scrollIntoView({ block: 'nearest' });
+  });
+</script>
+
+<div
+  role="feed"
+  aria-label={label}
+  aria-busy={busy}
+  class="activity-feed"
+  style:max-height="{maxHeight}px"
+  style:overflow-y="auto"
+>
+  {#each items as item, i (item.id)}
+    <article
+      class="af-item af-item--{item.severity ?? 'neutral'}"
+      aria-labelledby="af-title-{item.id}"
+      aria-describedby={item.description ? `af-desc-${item.id}` : undefined}
+      aria-posinset={i + 1}
+      aria-setsize={items.length}
+      tabindex="0"
+    >
+      <div class="af-dot" aria-hidden="true" />
+      <div class="af-body">
+        <div class="af-header">
+          <span id="af-title-{item.id}" class="af-title">{item.title}</span>
+          <span class="af-time">{item.time}</span>
+        </div>
+        {#if item.description}
+          <p id="af-desc-{item.id}" class="af-desc">{item.description}</p>
+        {/if}
+      </div>
+    </article>
+  {/each}
+  {#if items.length === 0}
+    <div class="af-empty" role="status">No activity</div>
+  {/if}
+  <div bind:this={endEl} />
+</div>

package/src/lib/components/Alert.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import CloseIcon from '../icons/CloseIcon.svelte';
+  export let variant: 'success' | 'warn' | 'danger' | 'info' = 'info';
+  export let onDismiss: (() => void) | undefined = undefined;
+</script>
+
+<div
+  class="alert alert-{variant}"
+  role={variant === 'danger' ? 'alert' : 'status'}
+  aria-live={variant === 'danger' ? 'assertive' : 'polite'}
+  aria-atomic="true"
+>
+  <span class="alert-body"><slot /></span>
+  {#if onDismiss}
+    <button type="button" class="alert-dismiss icon-btn" on:click={onDismiss} aria-label="Dismiss alert">
+      <CloseIcon />
+    </button>
+  {/if}
+</div>

package/src/lib/components/AnnotatedTimeSeries.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  export interface TimeSeriesAnnotation {
+    index: number;
+    label: string;
+    color?: 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';
+
+  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;
+
+  function toX(i: number): number {
+    return PAD.l + (i / (n - 1)) * chartW;
+  }
+  function toY(v: number): number {
+    return PAD.t + chartH - ((v - minV) / range) * chartH;
+  }
+
+  $: pts = n >= 2 ? data.map((v, i) => [toX(i), toY(v)] as [number, number]) : [];
+
+  $: linePath = pts.length
+    ? pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ')
+    : '';
+
+  $: areaPath = 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) => ({
+    y: PAD.t + (1 - f) * chartH,
+    label: String(Math.round(minV + f * range)),
+  }));
+
+  $: stride = n <= 8 ? 1 : Math.ceil(n / 6);
+  $: xLabels = 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) => ({
+    x: toX(Math.max(0, Math.min(n - 1, a.index))),
+    label: a.label,
+    color: a.color ?? '#F5A623',
+  }));
+</script>
+
+{#if n >= 2}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each gridLines as g, i (i)}
+        <line x1={PAD.l} y1={g.y} x2={VW - PAD.r} y2={g.y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+        <text x={PAD.l - 4} y={g.y + 3} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{g.label}</text>
+      {/each}
+
+      <path d={areaPath} fill={color} fill-opacity="0.08" />
+      <path d={linePath} fill="none" stroke={color} stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+
+      {#each markers as m, i (i)}
+        <line x1={m.x} y1={PAD.t} x2={m.x} y2={PAD.t + chartH} stroke={m.color} stroke-width="1" stroke-dasharray="3,2" opacity="0.85" />
+        <text x={m.x + 2} y={PAD.t + 8} fill={m.color} font-size="7" font-family="inherit">{m.label}</text>
+      {/each}
+
+      {#each xLabels as l (l.i)}
+        <text
+          x={l.x}
+          y={height - 6}
+          fill="#6E7079"
+          font-size="8"
+          text-anchor={l.i === 0 ? 'start' : l.i === n - 1 ? 'end' : 'middle'}
+          font-family="inherit"
+        >{l.text}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/ArcDiagram.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  export interface ArcNode {
+    id: string;
+    label: string;
+    color?: string;
+  }
+
+  export interface ArcLink {
+    source: string;
+    target: string;
+    value?: number;
+    color?: string;
+  }
+
+  export let nodes: ArcNode[];
+  export let links: ArcLink[];
+  export let height = 180;
+  export let ariaLabel = 'Arc diagram';
+
+  const PALETTE = ['#006FFF', '#00C875', '#F5A623', '#A78BFA', '#FF7B7B', '#00C8C8', '#FB923C'];
+  const VW = 400;
+  const PAD = { t: 12, r: 20, b: 36, l: 20 };
+
+  $: layout = (() => {
+    const n = nodes.length;
+    if (!n) return null;
+    const chartW = VW - PAD.l - PAD.r;
+    const baseY = height - PAD.b;
+    const maxArcH = baseY - PAD.t;
+
+    const xMap: Record<string, number> = {};
+    const colorMap: Record<string, string> = {};
+
+    const dots = nodes.map((node, i) => {
+      const x = n > 1 ? PAD.l + (i / (n - 1)) * chartW : VW / 2;
+      xMap[node.id] = x;
+      const color = node.color ?? PALETTE[i % PALETTE.length];
+      colorMap[node.id] = color;
+      return { x, y: baseY, color, label: node.label };
+    });
+
+    const arcs = links.flatMap((link) => {
+      const x1 = xMap[link.source];
+      const x2 = xMap[link.target];
+      if (x1 == null || x2 == null) return [];
+      const midX = (x1 + x2) / 2;
+      const dist = Math.abs(x2 - x1);
+      const arcH = Math.min(dist * 0.45, maxArcH * 0.9);
+      const ctl = baseY - arcH;
+      const color = link.color ?? colorMap[link.source] ?? PALETTE[0];
+      const sw = link.value != null ? Math.max(1, Math.min(4, link.value / 10)) : 1.5;
+      return [{ d: `M ${x1} ${baseY} Q ${midX} ${ctl} ${x2} ${baseY}`, color, sw }];
+    });
+
+    return { dots, arcs, baseY };
+  })();
+</script>
+
+{#if layout}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      <line x1={PAD.l} y1={layout.baseY} x2={VW - PAD.r} y2={layout.baseY} stroke="rgba(255,255,255,0.08)" stroke-width={1} />
+      {#each layout.arcs as arc, i (i)}
+        <path d={arc.d} fill="none" stroke={arc.color} stroke-width={arc.sw} stroke-opacity={0.6} />
+      {/each}
+      {#each layout.dots as dot, i (i)}
+        <circle cx={dot.x} cy={dot.y} r={5} fill={dot.color} />
+      {/each}
+      {#each layout.dots as dot, i (i)}
+        <text x={dot.x} y={layout.baseY + 18} text-anchor="middle" font-size={9} fill="#A4A7B5" font-family="inherit">{dot.label}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/AreaChart.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  export interface AreaChartSeries {
+    label: string;
+    color: string;
+    values: number[];
+  }
+
+  export let series: AreaChartSeries[] = [];
+  export let labels: string[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Area chart';
+
+  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;
+
+  $: totals = Array.from({ length: n }, (_, i) =>
+    series.reduce((acc, s) => acc + (s.values[i] ?? 0), 0),
+  );
+  $: maxV = totals.length ? Math.max(...totals, 1) : 1;
+
+  function toX(i: number): number {
+    return PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2);
+  }
+  function toY(v: number): number {
+    return PAD.t + chartH - (v / maxV) * chartH;
+  }
+
+  $: gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+
+  $: areas = 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),
+        );
+        const tops = bottoms.map((b, i) => b + (s.values[i] ?? 0));
+        const topPts = tops.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`);
+        const botPts = bottoms
+          .map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`)
+          .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%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each gridLines as y}
+      <line x1={PAD.l} y1={y} x2={VW - PAD.r} y2={y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each areas as s (s.label)}
+      <path d={s.d} fill={s.color} fill-opacity="0.75" />
+    {/each}
+    {#if labels.length > 0}
+      {#each labels as lbl, i}
+        {@const x = PAD.l + (labels.length > 1 ? (i / (labels.length - 1)) * chartW : chartW / 2)}
+        <text x={x} y={height - 4} text-anchor="middle" fill="#6E7079" font-size="9" font-family="inherit">{lbl}</text>
+      {/each}
+    {/if}
+  </svg>
+</div>

package/src/lib/components/Avatar.svelte

@@ -0,0 +1,30 @@
+<script context="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 = '';
+</script>
+
+<span
+  class="avatar avatar-{size}{className ? ` ${className}` : ''}"
+  role="img"
+  aria-label={alt ?? (src ? '' : initials)}
+  {style}
+>
+  {#if src}
+    <img {src} alt="" />
+  {:else}
+    {initials}
+  {/if}
+  {#if status}
+    <span class="avatar-status avatar-status-{status}" aria-hidden="true"></span>
+  {/if}
+</span>

package/src/lib/components/AvatarGroup.svelte

@@ -0,0 +1,35 @@
+<script context="module" lang="ts">
+  export interface AvatarItem {
+    initials?: string;
+    src?: string;
+    alt?: string;
+  }
+</script>
+
+<script lang="ts">
+  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';
+
+  $: visible = avatars.slice(0, max);
+  $: overflow = avatars.length - visible.length;
+</script>
+
+<span class="avatar-group" role="list" aria-label={ariaLabel}>
+  {#each visible as av, i (i)}
+    <span role="listitem" class="avatar-group-item">
+      <Avatar initials={av.initials} src={av.src} alt={av.alt} {size} />
+    </span>
+  {/each}
+  {#if overflow > 0}
+    <span
+      role="listitem"
+      class="avatar avatar-{size} avatar-overflow"
+      aria-label="{overflow} more"
+    >+{overflow}</span>
+  {/if}
+</span>

package/src/lib/components/Badge.svelte

@@ -0,0 +1,25 @@
+<script context="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 };
+
+  $: show = dot || (count !== undefined && (showZero || count > 0));
+  $: label = count !== undefined ? (count > max ? `${max}+` : String(count)) : '';
+</script>
+
+<span class="badge-wrapper{klass ? ` ${klass}` : ''}">
+  <slot />
+  {#if show}
+    <span class="badge badge-{color}{dot ? ' badge-dot' : ''}" aria-hidden="true">
+      {#if !dot}{label}{/if}
+    </span>
+  {/if}
+</span>

package/src/lib/components/Banner.svelte

@@ -0,0 +1,37 @@
+<script context="module" lang="ts">
+  export type BannerVariant = 'info' | 'success' | 'warn' | 'danger';
+  export interface BannerAction {
+    label: string;
+    onClick: () => void;
+  }
+</script>
+
+<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;
+
+  $: isUrgent = variant === 'danger' || variant === 'warn';
+</script>
+
+<div
+  class="banner banner--{variant}"
+  role={isUrgent ? 'alert' : 'status'}
+  aria-live={isUrgent ? 'assertive' : 'polite'}
+  aria-atomic="true"
+>
+  <div class="banner__body">
+    {#if title}<span class="banner__title">{title}</span>{/if}
+    <span><slot /></span>
+  </div>
+  {#if action}
+    <button type="button" class="banner__action" on:click={action.onClick}>{action.label}</button>
+  {/if}
+  {#if onDismiss}
+    <button type="button" class="banner__dismiss icon-btn" on:click={onDismiss} aria-label="Dismiss banner">
+      <CloseIcon />
+    </button>
+  {/if}
+</div>