@w5-ui/svelte 0.1.0

package/src/lib/components/Select.svelte

@@ -0,0 +1,110 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export interface SelectOption { value: string; label: string; }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  export let options: SelectOption[] = [];
+  export let value: string | undefined = undefined;
+  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-sel-${++counter}`;
+  $: triggerId = id ?? uid;
+  $: listboxId = `${triggerId}-lb`;
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+
+  let open = false;
+  let activeIdx = -1;
+  let triggerEl: HTMLButtonElement;
+  let wrapperEl: HTMLDivElement;
+
+  $: selected = options.find((o) => o.value === value);
+  $: displayLabel = selected?.label ?? placeholder;
+
+  function toggle() {
+    if (disabled) return;
+    if (!open) {
+      const idx = options.findIndex((o) => o.value === value);
+      activeIdx = idx >= 0 ? idx : 0;
+    }
+    open = !open;
+  }
+
+  function pick(val: string) {
+    dispatch('change', val);
+    open = false;
+    triggerEl?.focus();
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (disabled) return;
+    if (e.key === 'Escape') { open = false; triggerEl?.focus(); return; }
+    if (!open) {
+      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+        const idx = options.findIndex((o) => o.value === value);
+        activeIdx = idx >= 0 ? idx : 0;
+        open = true;
+      }
+      return;
+    }
+    if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx + 1, options.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 = options.length - 1; }
+    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (activeIdx >= 0) pick(options[activeIdx].value); }
+    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="select-wrapper {className}" bind:this={wrapperEl}>
+  {#if label}<label for={triggerId} class="sr-only">{label}</label>{/if}
+  <button
+    bind:this={triggerEl}
+    id={triggerId}
+    role="combobox"
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-controls={listboxId}
+    aria-label={label}
+    {disabled}
+    class="select-trigger"
+    on:click={toggle}
+    on:keydown={onKeyDown}
+    type="button"
+  >
+    <span>{displayLabel}</span>
+    <svg class="select-chevron" 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" />
+    </svg>
+  </button>
+  {#if open}
+    <ul id={listboxId} role="listbox" aria-label={label} class="select-listbox">
+      {#each options as opt, idx (opt.value)}
+        <li
+          role="option"
+          aria-selected={opt.value === value}
+          data-active={idx === activeIdx ? 'true' : undefined}
+          class="select-option"
+          on:mousedown|preventDefault={() => pick(opt.value)}
+          on:mouseenter={() => { activeIdx = idx; }}
+        >{opt.label}</li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/src/lib/components/SelectionToolbar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import CloseIcon from '../icons/CloseIcon.svelte';
+
+  export interface SelectionToolbarAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'default' | 'danger';
+  }
+
+  export let count: number;
+  export let actions: SelectionToolbarAction[] = [];
+  export let onClear: () => void;
+  export let ariaLabel: string = 'Selection actions';
+</script>
+
+{#if count > 0}
+  <div class="sel-toolbar" role="toolbar" aria-label={ariaLabel}>
+    <span class="sel-toolbar__count" aria-live="polite" aria-atomic="true">
+      <strong>{count}</strong> selected
+    </span>
+    <div class="sel-toolbar__actions">
+      {#each actions as action}
+        <button
+          type="button"
+          class="sel-toolbar__btn{action.variant === 'danger' ? ' sel-toolbar__btn--danger' : ''}"
+          on:click={action.onClick}
+        >
+          {action.label}
+        </button>
+      {/each}
+      <slot />
+    </div>
+    <button
+      type="button"
+      class="sel-toolbar__clear icon-btn"
+      on:click={onClear}
+      aria-label="Clear selection"
+    >
+      <CloseIcon aria-hidden="true" />
+    </button>
+  </div>
+{/if}

package/src/lib/components/Sidebar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" context="module">
+  import type { ComponentType } from 'svelte';
+  export interface SidebarItemDef {
+    id: string;
+    label: string;
+    icon: ComponentType;
+    count?: number;
+    pill?: number;
+  }
+  export interface SidebarSectionDef {
+    title: string;
+    items: SidebarItemDef[];
+  }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  export let sections: SidebarSectionDef[] = [];
+  export let activeId: string;
+  const dispatch = createEventDispatcher<{ change: string }>();
+</script>
+
+<nav class="sidebar" aria-label="Primary">
+  {#each sections as sec (sec.title)}
+    <h2 class="sb-section">{sec.title}</h2>
+    <ul class="sb-list">
+      {#each sec.items as it (it.id)}
+        <li>
+          <button
+            type="button"
+            class="sb-item {it.id === activeId ? 'active' : ''}"
+            aria-current={it.id === activeId ? 'page' : undefined}
+            on:click={() => { activeId = it.id; dispatch('change', it.id); }}
+          >
+            <span class="sb-ico"><svelte:component this={it.icon} /></span>
+            {it.label}
+            {#if it.count !== undefined}<span class="sb-count">{it.count}</span>{/if}
+            {#if it.pill !== undefined}<span class="sb-pill">{it.pill}<span class="sr-only"> alert{it.pill !== 1 ? 's' : ''}</span></span>{/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/each}
+</nav>

package/src/lib/components/Signal.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let weak: boolean = false;
+  export let label: string | undefined = undefined;
+</script>
+
+<span
+  class="signal {weak ? 'weak' : ''}"
+  role="img"
+  aria-label={label ?? (weak ? 'Signal: weak' : 'Signal: strong')}
+>
+  <i></i><i></i><i></i><i></i>
+</span>

package/src/lib/components/Skeleton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let variant: 'text' | 'title' | 'stat' | 'circle' | 'block' = 'text';
+  export let width: string | number | undefined = undefined;
+  export let height: string | number | undefined = undefined;
+  let className = '';
+  export { className as class };
+  export let ariaLabel: string = 'Loading';
+
+  $: variantClass = variant === 'block' ? '' : variant;
+  $: w = width ?? (variant === 'circle' ? height : undefined);
+  $: style = [
+    w !== undefined ? `width:${typeof w === 'number' ? w + 'px' : w}` : '',
+    height !== undefined ? `height:${typeof height === 'number' ? height + 'px' : height}` : '',
+  ].filter(Boolean).join(';');
+</script>
+
+<span
+  class="skeleton {variantClass} {className}"
+  {style}
+  role="status"
+  aria-label={ariaLabel}
+  aria-busy="true"
+></span>

package/src/lib/components/SkipLink.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let href: string = '#main-content';
+  let className = '';
+  export { className as class };
+</script>
+
+<a class="skip-link {className}" {href}>
+  <slot>Skip to main content</slot>
+</a>

package/src/lib/components/Slider.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let value: number = 0;
+  export let min: number = 0;
+  export let max: number = 100;
+  export let step: number = 1;
+  export let suffix: string | undefined = undefined;
+  export let disabled: boolean = false;
+  export let id: string | undefined = undefined;
+
+  let counter = 0;
+  const inputId = id ?? `slider-${counter++}`;
+  const dispatch = createEventDispatcher<{ change: number }>();
+
+  $: pct = max === min ? 0 : ((value - min) / (max - min)) * 100;
+
+  function handleChange(e: Event) {
+    value = Number((e.target as HTMLInputElement).value);
+    dispatch('change', value);
+  }
+</script>
+
+<div class="slider">
+  {#if label}
+    <div class="slider__header">
+      <label for={inputId} class="slider__label">{label}</label>
+      <span class="slider__value" aria-live="polite">
+        {value}{#if suffix}<span class="slider__suffix">{suffix}</span>{/if}
+      </span>
+    </div>
+  {/if}
+  <input
+    {id}
+    type="range"
+    class="slider__track"
+    {min}
+    {max}
+    {step}
+    {value}
+    {disabled}
+    style="--slider-fill:{pct}%"
+    aria-label={label}
+    aria-valuetext={suffix ? `${value} ${suffix}` : undefined}
+    on:input={handleChange}
+  />
+</div>

package/src/lib/components/SlopeChart.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  export interface SlopeItem {
+    label: string;
+    before: number;
+    after: number;
+  }
+
+  export let items: SlopeItem[] = [];
+  export let labelBefore: string = 'Before';
+  export let labelAfter: string = 'After';
+  export let unit: string = '';
+  export let ariaLabel: string = 'Slope chart';
+  export let positiveIsGood: boolean = false;
+
+  const VW = 340;
+  const COL_L = 108;
+  const COL_R = 232;
+  const PAD_T = 26;
+  const CHART_H = 192;
+  const PAD_B = 8;
+  const SVG_H = PAD_T + CHART_H + PAD_B;
+  const DOT_R = 4;
+  const LABEL_GAP = 15;
+
+  function nudge(ys: number[], gap: number): number[] {
+    const out = [...ys];
+    const ord = out.map((y, i) => ({ y, i })).sort((a, b) => a.y - b.y);
+    for (let k = 1; k < ord.length; k++) {
+      if (ord[k].y < ord[k - 1].y + gap) ord[k].y = ord[k - 1].y + gap;
+    }
+    for (let k = ord.length - 2; k >= 0; k--) {
+      if (ord[k].y > ord[k + 1].y - gap) ord[k].y = ord[k + 1].y - gap;
+    }
+    const res: number[] = new Array(ys.length);
+    ord.forEach(({ y, i }) => { res[i] = y; });
+    return res;
+  }
+
+  $: allVals = items.flatMap((it) => [it.before, it.after]);
+  $: minV = allVals.length ? Math.min(...allVals) : 0;
+  $: maxV = allVals.length ? Math.max(...allVals) : 1;
+  $: range = maxV - minV || 1;
+  $: ty = (v: number) => PAD_T + (1 - (v - minV) / range) * CHART_H;
+
+  $: leftDotY = items.map((it) => ty(it.before));
+  $: rightDotY = items.map((it) => ty(it.after));
+  $: leftLabelY = nudge(leftDotY, LABEL_GAP);
+  $: rightLabelY = nudge(rightDotY, LABEL_GAP);
+
+  $: colored = items.map((it, i) => {
+    const diff = it.after - it.before;
+    const c =
+      diff === 0 ? '#A4A7B5' : diff > 0 === positiveIsGood ? '#00C875' : '#FF7B7B';
+    return {
+      ...it,
+      c,
+      ly: leftDotY[i],
+      ry: rightDotY[i],
+      lly: leftLabelY[i],
+      rly: rightLabelY[i],
+      delta: it.after - it.before,
+    };
+  });
+</script>
+
+{#if items.length}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {VW} {SVG_H}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      <text x={COL_L} y="14" fill="#6E7079" font-size="10" text-anchor="middle" font-family="inherit">{labelBefore}</text>
+      <text x={COL_R} y="14" fill="#6E7079" font-size="10" text-anchor="middle" font-family="inherit">{labelAfter}</text>
+      <line x1={COL_L} y1={PAD_T} x2={COL_L} y2={PAD_T + CHART_H} stroke="rgba(255,255,255,0.07)" stroke-width="1" />
+      <line x1={COL_R} y1={PAD_T} x2={COL_R} y2={PAD_T + CHART_H} stroke="rgba(255,255,255,0.07)" stroke-width="1" />
+
+      {#each colored as it, i (i)}
+        <line x1={COL_L} y1={it.ly} x2={COL_R} y2={it.ry} stroke={it.c} stroke-width="1.5" opacity="0.65" />
+        {#if Math.abs(it.lly - it.ly) > 1}
+          <line x1={COL_L - 6} y1={it.ly} x2={COL_L - 6} y2={it.lly} stroke="rgba(255,255,255,0.12)" stroke-width="0.75" />
+        {/if}
+        {#if Math.abs(it.rly - it.ry) > 1}
+          <line x1={COL_R + 6} y1={it.ry} x2={COL_R + 6} y2={it.rly} stroke="rgba(255,255,255,0.12)" stroke-width="0.75" />
+        {/if}
+        <circle cx={COL_L} cy={it.ly} r={DOT_R} fill={it.c} />
+        <circle cx={COL_R} cy={it.ry} r={DOT_R} fill={it.c} />
+        <text x={COL_L - 10} y={it.lly + 4} fill="#A4A7B5" font-size="9" text-anchor="end" font-family="inherit">{it.label}</text>
+        <text x={COL_L - 10} y={it.lly + 15} fill="#6E7079" font-size="9" text-anchor="end" font-family="inherit" font-variant-numeric="tabular-nums">{it.before}{unit}</text>
+        <text x={COL_R + 10} y={it.rly + 4} fill="#A4A7B5" font-size="9" text-anchor="start" font-family="inherit" font-variant-numeric="tabular-nums">{it.after}{unit}</text>
+        <text x={COL_R + 10} y={it.rly + 15} fill={it.c} font-size="9" text-anchor="start" font-family="inherit" font-variant-numeric="tabular-nums">{it.delta > 0 ? '+' : ''}{it.delta}{unit}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/SortHeader.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  export let sortKey: string;
+  export let activeKey: string | null = null;
+  export let dir: 'asc' | 'desc' = 'asc';
+  const dispatch = createEventDispatcher<{ sort: string }>();
+  $: active = activeKey === sortKey;
+  $: ariaSort = active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none';
+</script>
+
+<th scope="col" aria-sort={ariaSort}>
+  <button type="button" class="sort-header-btn" on:click={() => dispatch('sort', sortKey)}>
+    <slot />
+    <svg class="sort-icon" viewBox="0 0 8 11" aria-hidden="true" fill="currentColor">
+      <path d="M4 0L7 4H1Z" opacity={active && dir === 'asc' ? 1 : 0.3} />
+      <path d="M4 11L1 7H7Z" opacity={active && dir === 'desc' ? 1 : 0.3} />
+    </svg>
+  </button>
+</th>

package/src/lib/components/SortableList.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  export interface SortableItem {
+    id: string;
+    label: string;
+    meta?: string;
+  }
+
+  export let items: SortableItem[] = [];
+  export let onChange: (items: SortableItem[]) => void = () => {};
+  export let ariaLabel: string | undefined = undefined;
+
+  let grabbed: string | null = null;
+  let dragSrc: string | null = null;
+  let dragOver: string | null = null;
+
+  function reorder(fromId: string, toId: string) {
+    if (fromId === toId) return;
+    const from = items.findIndex(i => i.id === fromId);
+    const to = items.findIndex(i => i.id === toId);
+    const arr = [...items];
+    const [item] = arr.splice(from, 1);
+    arr.splice(to, 0, item);
+    items = arr;
+    onChange(arr);
+  }
+
+  function move(id: string, dir: -1 | 1) {
+    const idx = items.findIndex(i => i.id === id);
+    const next = idx + dir;
+    if (next < 0 || next >= items.length) return;
+    const arr = [...items];
+    [arr[idx], arr[next]] = [arr[next], arr[idx]];
+    items = arr;
+    onChange(arr);
+  }
+
+  function handleKeyDown(e: KeyboardEvent, id: string) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      grabbed = grabbed === id ? null : id;
+    } else if (grabbed === id) {
+      if (e.key === 'ArrowUp') { e.preventDefault(); move(id, -1); }
+      else if (e.key === 'ArrowDown') { e.preventDefault(); move(id, 1); }
+      else if (e.key === 'Escape') { grabbed = null; }
+    }
+  }
+</script>
+
+<ol class="sortable-list" aria-label={ariaLabel}>
+  {#each items as item, idx (item.id)}
+    <li
+      class="sortable-list__item"
+      class:is-grabbed={grabbed === item.id}
+      class:is-drag-over={dragOver === item.id}
+      draggable="true"
+      on:dragstart={e => { e.dataTransfer?.setData('text/plain', item.id); if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move'; dragSrc = item.id; }}
+      on:dragend={() => { dragSrc = null; dragOver = null; }}
+      on:dragover={e => { e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'; dragOver = item.id; }}
+      on:dragleave={() => { dragOver = null; }}
+      on:drop={e => { e.preventDefault(); if (dragSrc) reorder(dragSrc, item.id); dragSrc = null; dragOver = null; }}
+    >
+      <button
+        type="button"
+        class="sortable-list__handle"
+        aria-label="{grabbed === item.id ? 'Release' : 'Grab'} {item.label}. Use arrow keys to reorder."
+        aria-pressed={grabbed === item.id}
+        on:keydown={e => handleKeyDown(e, item.id)}
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true" focusable="false">
+          <rect x="3" y="2" width="2" height="2" rx="1" />
+          <rect x="9" y="2" width="2" height="2" rx="1" />
+          <rect x="3" y="6" width="2" height="2" rx="1" />
+          <rect x="9" y="6" width="2" height="2" rx="1" />
+          <rect x="3" y="10" width="2" height="2" rx="1" />
+          <rect x="9" y="10" width="2" height="2" rx="1" />
+        </svg>
+      </button>
+      <span class="sortable-list__content">
+        <span class="sortable-list__label">{item.label}</span>
+        {#if item.meta}
+          <span class="sortable-list__meta">{item.meta}</span>
+        {/if}
+      </span>
+      <span class="sortable-list__index" aria-hidden="true">{idx + 1}</span>
+    </li>
+  {/each}
+</ol>

package/src/lib/components/Sparkline.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export let bars: number = 36;
+  export let active: boolean = false;
+  export let seed: number = 1;
+  export let ariaLabel: string = 'Activity sparkline';
+
+  function rng(s0: number) {
+    let s = s0;
+    return () => {
+      s = (s * 9301 + 49297) % 233280;
+      return s / 233280;
+    };
+  }
+
+  $: heights = (() => {
+    const r = rng(seed);
+    const out: number[] = [];
+    let prev = 12;
+    for (let i = 0; i < bars; i++) {
+      const v = Math.max(4, Math.min(40, prev + (r() * 10 - 5)));
+      prev = v;
+      out.push(v);
+    }
+    return out;
+  })();
+</script>
+
+<div class="spark" role="img" aria-label={ariaLabel}>
+  {#each heights as h, i}
+    <div class="b" aria-hidden="true" style="height:{h}px;opacity:{active ? 0.4 + i / (bars * 1.4) : 0.5 + i / (bars * 1.6)}"></div>
+  {/each}
+</div>

package/src/lib/components/SparklineMatrix.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  export interface SparklineMatrixRow {
+    label: string;
+    values: number[];
+    unit?: string;
+    color?: string;
+  }
+
+  export let rows: SparklineMatrixRow[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Sparkline matrix';
+
+  const VW = 380;
+  const PAD_L = 76;
+  const PAD_R = 44;
+  const SPARK_PAD_X = 8;
+  const SPARK_PAD_Y = 5;
+  const PALETTE = ['#006FFF', '#00C875', '#7FB6FF', '#F5A623', '#FF7B7B', '#A78BFA'];
+
+  $: rowH = height / (rows.length || 1);
+  $: sparkX0 = PAD_L + SPARK_PAD_X;
+  $: sparkW = VW - PAD_L - PAD_R - SPARK_PAD_X * 2;
+  $: sparkH = rowH - SPARK_PAD_Y * 2;
+
+  $: computed = rows.map((row, i) => {
+    const y0 = i * rowH + SPARK_PAD_Y;
+    const color = row.color ?? PALETTE[i % PALETTE.length];
+    const min = Math.min(...row.values);
+    const max = Math.max(...row.values);
+    const range = max - min || 1;
+    const lastVal = row.values[row.values.length - 1];
+
+    const d =
+      row.values.length < 2
+        ? ''
+        : row.values
+            .map((v, j) => {
+              const x = sparkX0 + (j / (row.values.length - 1)) * sparkW;
+              const y = y0 + sparkH - ((v - min) / range) * sparkH;
+              return `${j === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+            })
+            .join(' ');
+
+    const dotY = y0 + sparkH - ((lastVal - min) / range) * sparkH;
+    return { color, lastVal, d, dotX: sparkX0 + sparkW, dotY, midY: i * rowH + rowH / 2 };
+  });
+</script>
+
+{#if rows.length}
+  <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 rows as row, i}
+        <g>
+          {#if i > 0}
+            <line
+              x1={0} y1={i * rowH} x2={VW} y2={i * rowH}
+              stroke="rgba(255,255,255,0.06)" stroke-width="1"
+            />
+          {/if}
+          <text
+            x={PAD_L - 6} y={computed[i].midY + 3.5} text-anchor="end"
+            fill="#6E7079" font-size="9" font-family="inherit"
+          >{row.label}</text>
+          {#if computed[i].d}
+            <path
+              d={computed[i].d} fill="none" stroke={computed[i].color} stroke-width="1.5"
+              stroke-linejoin="round" stroke-linecap="round"
+            />
+          {/if}
+          <circle cx={computed[i].dotX} cy={computed[i].dotY} r="2.5" fill={computed[i].color} />
+          <text
+            x={VW - PAD_R + 6} y={computed[i].midY + 3.5} text-anchor="start"
+            fill={computed[i].color} font-size="9" font-family="inherit"
+          >{Math.round(computed[i].lastVal)}{row.unit ?? ''}</text>
+        </g>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/Spinner.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let label: string = 'Loading';
+</script>
+
+<span role="status" aria-label={label} class="spinner {size}" />