@w5-ui/svelte 0.1.0

package/src/lib/components/SunburstChart.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  export interface SunburstNode {
+    label: string;
+    value?: number;
+    color?: string;
+    children?: SunburstNode[];
+  }
+
+  export let root: SunburstNode;
+  export let ariaLabel: string = 'Sunburst chart';
+
+  const PALETTE = ['#006FFF', '#00C875', '#A78BFA', '#F5A623', '#50B8E7', '#F04949'];
+  const CX = 160, CY = 160, R_HOLE = 48, R_MID = 97, R_OUTER = 142, GAP = 0.01;
+
+  function arcPath(r1: number, r2: number, a1: number, a2: number): string {
+    const lg = a2 - a1 > Math.PI ? 1 : 0;
+    const p = (r: number, a: number) => `${(CX + r * Math.cos(a)).toFixed(1)},${(CY + r * Math.sin(a)).toFixed(1)}`;
+    return `M${p(r2, a1)} A${r2},${r2} 0 ${lg},1 ${p(r2, a2)} L${p(r1, a2)} A${r1},${r1} 0 ${lg},0 ${p(r1, a1)} Z`;
+  }
+
+  type PathData = { d: string; fill: string };
+  type LabelData = { x: number; y: number; anchor: string; text: string };
+
+  $: ({ paths, labels, total } = (() => {
+    const items = root.children ?? [];
+    const total = items.reduce((s, c) => s + (c.value ?? c.children?.reduce((cs, x) => cs + (x.value ?? 0), 0) ?? 0), 0);
+    if (!total) return { paths: [] as PathData[], labels: [] as LabelData[], total: 0 };
+
+    const paths: PathData[] = [];
+    const labels: LabelData[] = [];
+    let a = -Math.PI / 2;
+
+    for (let i = 0; i < items.length; i++) {
+      const c = items[i];
+      const fill = c.color ?? PALETTE[i % PALETTE.length];
+      const cv = c.value ?? c.children?.reduce((s, x) => s + (x.value ?? 0), 0) ?? 0;
+      const span = (cv / total) * 2 * Math.PI;
+      const a2 = a + span;
+      const midA = (a + a2) / 2;
+
+      paths.push({ d: arcPath(R_MID + 2, R_OUTER, a + GAP, a2 - GAP), fill });
+
+      if (span > 0.22) {
+        const r = (R_MID + 2 + R_OUTER) / 2;
+        const anchor = Math.cos(midA) > 0.15 ? 'start' : Math.cos(midA) < -0.15 ? 'end' : 'middle';
+        labels.push({ x: CX + r * Math.cos(midA), y: CY + r * Math.sin(midA) + 4, anchor, text: c.label });
+      }
+
+      if (c.children?.length) {
+        let ca = a;
+        for (const child of c.children) {
+          const cs = ((child.value ?? 0) / cv) * span;
+          if (cs > GAP * 2) paths.push({ d: arcPath(R_HOLE, R_MID - 2, ca + GAP, ca + cs - GAP), fill: fill + '99' });
+          ca += cs;
+        }
+      } else {
+        paths.push({ d: arcPath(R_HOLE, R_MID - 2, a + GAP, a2 - GAP), fill: fill + '99' });
+      }
+
+      a = a2;
+    }
+
+    return { paths, labels, total };
+  })());
+
+  const fmt = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 320 320" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each paths as p, i (i)}
+      <path d={p.d} fill={p.fill} />
+    {/each}
+    {#each labels as l, i (i)}
+      <text x={l.x.toFixed(1)} y={l.y.toFixed(1)} text-anchor={l.anchor} fill="#fff" font-size="10" font-weight="600" font-family="inherit">{l.text}</text>
+    {/each}
+    <text x={CX} y={CY - 8} text-anchor="middle" fill="#fff" font-size="22" font-weight="700" font-family="inherit">{fmt(total)}</text>
+    <text x={CX} y={CY + 12} text-anchor="middle" fill="#6E7079" font-size="10" font-family="inherit">{root.label}</text>
+  </svg>
+</div>

package/src/lib/components/SwitchPortGrid.svelte

@@ -0,0 +1,45 @@
+<script context="module" lang="ts">
+  export type SwitchPortStatus = 'up' | 'poe' | 'down';
+  export interface SwitchPort {
+    status: SwitchPortStatus;
+    speed?: string;
+    label?: string;
+  }
+  const STATUS_LABEL: Record<SwitchPortStatus, string> = {
+    up: 'Connected',
+    poe: 'PoE Active',
+    down: 'Down',
+  };
+</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 }>();
+</script>
+
+<ul class="spg" role="list" aria-label={ariaLabel} style="grid-template-columns: repeat({columns}, 1fr);">
+  {#each ports as port, i}
+    {@const n = i + 1}
+    {@const desc = `Port ${n}: ${STATUS_LABEL[port.status]}${port.speed ? ` · ${port.speed}` : ''}${port.label ? ` · ${port.label}` : ''}`}
+    <li>
+      <button
+        type="button"
+        class="spg__btn"
+        data-status={port.status}
+        aria-label={desc}
+        on:click={() => dispatch('portclick', i)}
+      >
+        <span class="spg__num">{n}</span>
+        {#if port.speed}
+          <span class="spg__speed--{port.status}">{port.speed}</span>
+        {/if}
+        {#if port.status === 'poe'}
+          <span class="spg__poe" aria-hidden="true">PoE</span>
+        {/if}
+      </button>
+    </li>
+  {/each}
+</ul>

package/src/lib/components/TabPanel.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let id: string;
+  export let active: string;
+  $: isActive = id === active;
+</script>
+
+<div
+  role="tabpanel"
+  id="tabpanel-{id}"
+  aria-labelledby="tab-{id}"
+  hidden={!isActive}
+  tabindex="0"
+>
+  {#if isActive}
+    <slot />
+  {/if}
+</div>

package/src/lib/components/Tabs.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  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 }>();
+
+  let buttons: (HTMLButtonElement | null)[] = [];
+
+  function select(idx: number) {
+    const next = items[(idx + items.length) % items.length];
+    if (!next) return;
+    active = next.id;
+    dispatch('change', next.id);
+    buttons[(idx + items.length) % items.length]?.focus();
+  }
+
+  function onKey(e: KeyboardEvent, i: number) {
+    if (e.key === 'ArrowRight') { e.preventDefault(); select(i + 1); }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); select(i - 1); }
+    else if (e.key === 'Home') { e.preventDefault(); select(0); }
+    else if (e.key === 'End') { e.preventDefault(); select(items.length - 1); }
+  }
+</script>
+
+<div class="tabs" role="tablist" aria-label={ariaLabel}>
+  {#each items as t, i (t.id)}
+    <button
+      bind:this={buttons[i]}
+      type="button"
+      class="tab {t.id === active ? 'active' : ''}"
+      role="tab"
+      id="tab-{t.id}"
+      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)}
+    >
+      {t.label}
+      {#if t.badge !== undefined}<span class="badge">{t.badge}</span>{/if}
+    </button>
+  {/each}
+</div>

package/src/lib/components/Tag.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let label: string;
+  let className = '';
+  export { className as class };
+</script>
+
+<span class="tag {className}">
+  <span class="tag__label">{label}</span>
+  <button
+    type="button"
+    class="tag__remove"
+    aria-label="Remove {label} filter"
+    on:click
+  >
+    <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"/>
+    </svg>
+  </button>
+</span>

package/src/lib/components/TagInput.svelte

@@ -0,0 +1,92 @@
+<script context="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 };
+
+  const dispatch = createEventDispatcher<{ change: string[] }>();
+  const uid = `dash-ui-tag-input-${++counter}`;
+
+  let draft = '';
+  let inputEl: HTMLInputElement;
+
+  function addTag(raw: string) {
+    const trimmed = raw.trim();
+    if (!trimmed || value.includes(trimmed)) return;
+    value = [...value, trimmed];
+    draft = '';
+    dispatch('change', value);
+  }
+
+  function removeTag(index: number) {
+    value = value.filter((_, i) => i !== index);
+    dispatch('change', value);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ',' || e.key === 'Tab') {
+      if (draft.trim()) {
+        e.preventDefault();
+        addTag(draft);
+      }
+    } else if (e.key === 'Backspace' && draft === '' && value.length > 0) {
+      removeTag(value.length - 1);
+    }
+  }
+
+  function handleBlur() {
+    if (draft.trim()) addTag(draft);
+  }
+</script>
+
+<div class="tag-input-wrapper {klass}">
+  {#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 -->
+  <div
+    role="group"
+    aria-label={label ?? 'Tags'}
+    class="tag-input{disabled ? ' tag-input--disabled' : ''}"
+    on:click={() => inputEl?.focus()}
+  >
+    {#each value as tag, i}
+      <span class="tag">
+        <span class="tag__label">{tag}</span>
+        {#if !disabled}
+          <button
+            type="button"
+            class="tag__remove"
+            aria-label="Remove {tag}"
+            on:click|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"/>
+            </svg>
+          </button>
+        {/if}
+      </span>
+    {/each}
+    <input
+      bind:this={inputEl}
+      id={uid}
+      type="text"
+      class="tag-input__field"
+      bind:value={draft}
+      {disabled}
+      placeholder={value.length === 0 ? placeholder : ''}
+      aria-label={label ?? 'Add tag'}
+      autocomplete="off"
+      on:keydown={handleKeyDown}
+      on:blur={handleBlur}
+    />
+  </div>
+</div>

package/src/lib/components/Textarea.svelte

@@ -0,0 +1,31 @@
+<script context="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 };
+
+  const uid = `dash-ui-ta-${++counter}`;
+  $: inputId = id ?? uid;
+</script>
+
+<textarea
+  id={inputId}
+  class="input textarea {className}"
+  {rows}
+  {placeholder}
+  {disabled}
+  readonly={readonly}
+  bind:value
+  on:input
+  on:change
+  on:focus
+  on:blur
+></textarea>

package/src/lib/components/ThresholdAreaChart.svelte

@@ -0,0 +1,72 @@
+<script context="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';
+
+  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);
+</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"
+  >
+    <defs>
+      <clipPath id="{uid}b">
+        <rect x="0" y={threshY} width={VW} height={height - threshY} />
+      </clipPath>
+      <clipPath id="{uid}a">
+        <rect x="0" y="0" width={VW} height={threshY} />
+      </clipPath>
+    </defs>
+    {#each gridLines as y, i (i)}
+      <line x1={PAD.l} y1={y} x2={VW - PAD.r} y2={y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    <path {d} fill={belowColor} fill-opacity="0.7" clip-path="url(#{uid}b)" />
+    <path {d} fill={aboveColor} fill-opacity="0.7" clip-path="url(#{uid}a)" />
+    <line
+      x1={PAD.l} y1={threshY}
+      x2={VW - PAD.r} y2={threshY}
+      stroke={aboveColor}
+      stroke-width="1"
+      stroke-dasharray="4 3"
+      opacity="0.8"
+    />
+    <text
+      x={VW - PAD.r - 2} y={threshY - 4}
+      fill={aboveColor} font-size="9" text-anchor="end" font-family="inherit" opacity="0.9"
+    >{tLabel}</text>
+    {#each labels as lbl, i (i)}
+      <text
+        x={toX(i)} y={height - 4}
+        text-anchor="middle" fill="#6E7079" font-size="9" font-family="inherit"
+      >{lbl}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/TimePicker.svelte

@@ -0,0 +1,116 @@
+<script context="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 };
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+  const uid = `dash-ui-tp-${++counter}`;
+
+  function pad(n: number): string {
+    return String(n).padStart(2, '0');
+  }
+
+  function parseTime(t: string): [number, number] {
+    const [h = '0', m = '0'] = t.split(':');
+    return [
+      Math.min(23, Math.max(0, parseInt(h, 10) || 0)),
+      Math.min(59, Math.max(0, parseInt(m, 10) || 0)),
+    ];
+  }
+
+  $: [hours, minutes] = parseTime(value);
+
+  let inputs: [HTMLInputElement | null, HTMLInputElement | null] = [null, null];
+
+  function commit(h: number, m: number) {
+    value = `${pad(h)}:${pad(m)}`;
+    dispatch('change', value);
+  }
+
+  function handleKey(field: 0 | 1, e: KeyboardEvent) {
+    const val = field === 0 ? hours : minutes;
+    const max = field === 0 ? 23 : 59;
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const next = val >= max ? 0 : val + 1;
+      field === 0 ? commit(next, minutes) : commit(hours, next);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = val <= 0 ? max : val - 1;
+      field === 0 ? commit(next, minutes) : commit(hours, next);
+    } else if ((e.key === ':' || e.key === 'ArrowRight') && field === 0) {
+      e.preventDefault();
+      inputs[1]?.focus();
+    } else if (e.key === 'ArrowLeft' && field === 1) {
+      e.preventDefault();
+      inputs[0]?.focus();
+    }
+  }
+
+  function handleInput(field: 0 | 1, e: Event) {
+    const raw = (e.target as HTMLInputElement).value;
+    if (!/^\d{0,2}$/.test(raw)) return;
+    const n = parseInt(raw, 10);
+    if (isNaN(n)) return;
+    const max = field === 0 ? 23 : 59;
+    const clamped = Math.min(max, n);
+    field === 0 ? commit(clamped, minutes) : commit(hours, clamped);
+    if (raw.length === 2 && field === 0) setTimeout(() => inputs[1]?.focus(), 0);
+  }
+</script>
+
+<div class="time-picker-wrapper {className}">
+  {#if label}
+    <label for="{uid}-h" class="time-picker__label">{label}</label>
+  {/if}
+  <div class="time-picker{disabled ? ' time-picker--disabled' : ''}" role="group" aria-label={label ?? 'Time'}>
+    <input
+      bind:this={inputs[0]}
+      id="{uid}-h"
+      type="text"
+      inputmode="numeric"
+      pattern="[0-9]*"
+      role="spinbutton"
+      aria-label="Hours"
+      aria-valuenow={hours}
+      aria-valuemin={0}
+      aria-valuemax={23}
+      aria-valuetext={pad(hours)}
+      value={pad(hours)}
+      {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()}
+    />
+    <span class="time-picker__sep" aria-hidden="true">:</span>
+    <input
+      bind:this={inputs[1]}
+      type="text"
+      inputmode="numeric"
+      pattern="[0-9]*"
+      role="spinbutton"
+      aria-label="Minutes"
+      aria-valuenow={minutes}
+      aria-valuemin={0}
+      aria-valuemax={59}
+      aria-valuetext={pad(minutes)}
+      value={pad(minutes)}
+      {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()}
+    />
+  </div>
+</div>

package/src/lib/components/TimeRange.svelte

@@ -0,0 +1,104 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export type TimeRangeId = '1h' | '6h' | '24h' | '7d' | '30d';
+  const PRESETS: { id: TimeRangeId; label: string; short: string }[] = [
+    { id: '1h', label: 'Last 1 hour', short: 'Last 1 h' },
+    { id: '6h', label: 'Last 6 hours', short: 'Last 6 h' },
+    { id: '24h', label: 'Last 24 hours', short: 'Last 24 h' },
+    { id: '7d', label: 'Last 7 days', short: 'Last 7 d' },
+    { id: '30d', label: 'Last 30 days', short: 'Last 30 d' },
+  ];
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  export let value: TimeRangeId = '1h';
+
+  const dispatch = createEventDispatcher<{ change: TimeRangeId }>();
+  const uid = `dash-ui-tr-${++counter}`;
+  const listId = `${uid}-list`;
+
+  let open = false;
+  let activeIdx = 0;
+  let triggerEl: HTMLButtonElement;
+  let wrapperEl: HTMLDivElement;
+
+  $: selected = PRESETS.find((p) => p.id === value) ?? PRESETS[0];
+
+  function toggle() {
+    if (!open) activeIdx = PRESETS.findIndex((p) => p.id === value);
+    open = !open;
+  }
+
+  function select(id: TimeRangeId) {
+    dispatch('change', id);
+    open = false;
+    triggerEl?.focus();
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (!open) {
+      if (['ArrowDown', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+        activeIdx = PRESETS.findIndex((p) => p.id === value);
+        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, PRESETS.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 = PRESETS.length - 1; }
+    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); select(PRESETS[activeIdx].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="time-range-root" bind:this={wrapperEl}>
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="btn time-range-trigger"
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-controls={open ? listId : undefined}
+    on:click={toggle}
+    on:keydown={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">
+      <path d="M1 1l4 4 4-4" />
+    </svg>
+  </button>
+  {#if open}
+    <ul id={listId} role="listbox" aria-label="Time range" class="time-range-list">
+      {#each PRESETS as p, idx (p.id)}
+        <li
+          role="option"
+          aria-selected={p.id === value}
+          tabindex="-1"
+          data-active={idx === activeIdx ? 'true' : undefined}
+          class="time-range-option"
+          on:mouseenter={() => { activeIdx = idx; }}
+          on:mousedown|preventDefault={() => select(p.id)}
+        >
+          {p.label}
+          {#if p.id === value}
+            <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M2 6l3 3 5-5" />
+            </svg>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/src/lib/components/Timeline.svelte

@@ -0,0 +1,32 @@
+<script context="module" lang="ts">
+  export interface TimelineEvent {
+    id: string;
+    title: string;
+    description?: string;
+    time: string;
+    variant?: 'info' | 'warn' | 'danger' | 'success' | 'neutral';
+  }
+</script>
+
+<script lang="ts">
+  export let events: TimelineEvent[];
+  let className = '';
+  export { className as class };
+</script>
+
+<ol class="timeline {className}" aria-label="Event timeline">
+  {#each events as e (e.id)}
+    <li class="timeline__item timeline__item--{e.variant ?? 'neutral'}">
+      <span class="timeline__dot" aria-hidden="true"></span>
+      <div class="timeline__content">
+        <div class="timeline__header">
+          <span class="timeline__title">{e.title}</span>
+          <time class="timeline__time">{e.time}</time>
+        </div>
+        {#if e.description}
+          <p class="timeline__desc">{e.description}</p>
+        {/if}
+      </div>
+    </li>
+  {/each}
+</ol>