@w5-ui/svelte 0.1.0

package/src/lib/components/CalendarHeatmap.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export interface CalendarDay {
+    date: string;
+    value: number;
+  }
+
+  export let data: CalendarDay[] = [];
+  export let maxValue: number | undefined = undefined;
+  export let ariaLabel: string = 'Calendar heatmap';
+
+  const CELL = 10;
+  const GAP = 2;
+  const STEP = CELL + GAP;
+  const WEEKS = 52;
+  const DAYS = 7;
+  const LEFT = 22;
+  const TOP = 16;
+  const COLORS = ['rgba(255,255,255,0.06)', '#0d2a5e', '#1a4da6', '#2979ff', '#5ba4ff'];
+  const DAY_LABELS = ['Mon', '', 'Wed', '', 'Fri', '', ''];
+  const W = LEFT + WEEKS * STEP;
+  const H = TOP + DAYS * STEP + 2;
+
+  function lvl(v: number, mx: number): number {
+    if (!v) return 0;
+    const r = v / mx;
+    return r < 0.25 ? 1 : r < 0.5 ? 2 : r < 0.75 ? 3 : 4;
+  }
+
+  function toDateStr(d: Date): string {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+  }
+
+  $: ({ cells, monthLabels } = (() => {
+    const byDate = new Map(data.map((d) => [d.date, d.value]));
+    const mx = maxValue ?? Math.max(1, ...data.map((d) => d.value));
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const start = new Date(today);
+    start.setDate(start.getDate() - WEEKS * 7 + 1);
+    start.setDate(start.getDate() - start.getDay());
+
+    const cells: { x: number; y: number; fill: string }[] = [];
+    const seenMonths = new Set<string>();
+    const monthLabels: { x: number; label: string }[] = [];
+
+    for (let w = 0; w < WEEKS; w++) {
+      for (let d = 0; d < DAYS; d++) {
+        const date = new Date(start);
+        date.setDate(start.getDate() + w * 7 + d);
+        const monthKey = `${date.getFullYear()}-${date.getMonth()}`;
+        if (!seenMonths.has(monthKey) && d === 0) {
+          seenMonths.add(monthKey);
+          monthLabels.push({ x: LEFT + w * STEP, label: date.toLocaleString('en', { month: 'short' }) });
+        }
+        const val = byDate.get(toDateStr(date)) ?? 0;
+        cells.push({ x: LEFT + w * STEP, y: TOP + d * STEP, fill: COLORS[lvl(val, mx)] });
+      }
+    }
+
+    return { cells, monthLabels };
+  })());
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;overflow-x:auto;">
+  <svg viewBox="0 0 {W} {H}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each DAY_LABELS as label, d}
+      {#if label}
+        <text
+          x={LEFT - 3}
+          y={TOP + d * STEP + CELL * 0.8}
+          text-anchor="end"
+          fill="#6E7079"
+          font-size="7"
+          font-family="inherit"
+        >{label}</text>
+      {/if}
+    {/each}
+    {#each monthLabels as m}
+      <text x={m.x} y={TOP - 3} fill="#6E7079" font-size="7" font-family="inherit">{m.label}</text>
+    {/each}
+    {#each cells as c, i (i)}
+      <rect x={c.x} y={c.y} width={CELL} height={CELL} rx="2" fill={c.fill} />
+    {/each}
+  </svg>
+</div>

package/src/lib/components/Callout.svelte

@@ -0,0 +1,38 @@
+<script context="module" lang="ts">
+  export type CalloutVariant = 'info' | 'success' | 'warn' | 'danger' | 'tip';
+</script>
+
+<script lang="ts">
+  export let variant: CalloutVariant = 'info';
+  export let title: string | undefined = undefined;
+</script>
+
+<div class="callout callout--{variant}" role="note">
+  {#if variant === 'info'}
+    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM7.25 5.5a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM7 7.5h2v4H7v-4Z" />
+    </svg>
+  {:else if variant === 'success'}
+    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm3.78 5.47-4.25 4.5a.75.75 0 0 1-1.06.03L4.72 9.22a.75.75 0 1 1 1.06-1.06l1.22 1.22 3.72-3.94a.75.75 0 1 1 1.06 1.03Z" />
+    </svg>
+  {:else if variant === 'warn'}
+    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M8.9 1.6a1 1 0 0 0-1.8 0L.6 13a1 1 0 0 0 .9 1.5h13a1 1 0 0 0 .9-1.5L8.9 1.6ZM7.25 6.5a.75.75 0 1 1 1.5 0v3a.75.75 0 0 1-1.5 0v-3Zm.75 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+    </svg>
+  {:else if variant === 'danger'}
+    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM5.97 5.97a.75.75 0 0 1 1.06 0L8 6.94l.97-.97a.75.75 0 1 1 1.06 1.06L9.06 8l.97.97a.75.75 0 0 1-1.06 1.06L8 9.06l-.97.97a.75.75 0 0 1-1.06-1.06L6.94 8l-.97-.97a.75.75 0 0 1 0-1.06Z" />
+    </svg>
+  {:else}
+    <svg class="callout-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M8 1a5 5 0 0 1 3 9.01V11H5v-.99A5 5 0 0 1 8 1Zm-1 12h2v1.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V13Z" />
+    </svg>
+  {/if}
+  <div class="callout-body">
+    {#if title}
+      <div class="callout-title">{title}</div>
+    {/if}
+    <div><slot /></div>
+  </div>
+</div>

package/src/lib/components/CandlestickChart.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  export interface CandlestickBar {
+    label: string;
+    open: number;
+    close: number;
+    high: number;
+    low: number;
+  }
+
+  export let bars: CandlestickBar[] = [];
+  export let yRange: [number, number] | undefined = undefined;
+  export let height = 180;
+  export let unit = '';
+  export let upColor = '#00C875';
+  export let downColor = '#FF7B7B';
+  export let ariaLabel = 'Candlestick chart';
+
+  const VW = 340;
+  const PAD_L = 28;
+  const PAD_R = 8;
+  const PAD_T = 8;
+  const PAD_B = 20;
+  const PLOT_W = VW - PAD_L - PAD_R;
+
+  $: n = bars.length;
+  $: PLOT_H = height - PAD_T - PAD_B;
+  $: allVals = bars.flatMap((b) => [b.low, b.high]);
+  $: minV = yRange ? yRange[0] : allVals.length ? Math.min(...allVals) : 0;
+  $: maxV = yRange ? yRange[1] : allVals.length ? Math.max(...allVals) : 1;
+  $: vRange = maxV - minV || 1;
+  $: yTicks = [minV, (minV + maxV) / 2, maxV];
+  $: candleW = Math.max(4, (PLOT_W / (n || 1)) * 0.5);
+
+  function tx(i: number): number {
+    return PAD_L + ((i + 0.5) / (n || 1)) * PLOT_W;
+  }
+
+  function ty(v: number): number {
+    return PAD_T + (1 - (v - minV) / vRange) * PLOT_H;
+  }
+</script>
+
+{#if bars.length > 0}
+  <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 yTicks as v, i (i)}
+        <line x1={PAD_L} y1={ty(v)} x2={PAD_L + PLOT_W} y2={ty(v)} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+        <text x={PAD_L - 4} y={ty(v) + 4} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{Math.round(v)}{unit}</text>
+      {/each}
+
+      {#each bars as b, i (i)}
+        {@const x = tx(i)}
+        {@const color = b.close >= b.open ? upColor : downColor}
+        {@const bodyTop = ty(Math.max(b.open, b.close))}
+        {@const bodyBot = ty(Math.min(b.open, b.close))}
+        {@const bodyH = Math.max(1, bodyBot - bodyTop)}
+        <line x1={x} y1={ty(b.high)} x2={x} y2={ty(b.low)} stroke={color} stroke-width="1" />
+        <rect x={x - candleW / 2} y={bodyTop} width={candleW} height={bodyH} fill={color} />
+      {/each}
+
+      {#each bars as b, i (i)}
+        <text x={tx(i)} y={height - 4} fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit">{b.label}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/Card.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let span: number | undefined = undefined;
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+  $: spanStyle = span !== undefined ? `grid-column: span ${span};` : '';
+</script>
+
+<div class="card {className}" style="{spanStyle} {style}">
+  <slot />
+</div>

package/src/lib/components/Carousel.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  export let slides: Array<{ id: string; title: string; description?: string; color?: string }> =
+    [];
+  export let label: string;
+  let klass = '';
+  export { klass as class };
+
+  let index = 0;
+
+  function prev() {
+    index = (index - 1 + slides.length) % slides.length;
+  }
+  function next() {
+    index = (index + 1) % slides.length;
+  }
+</script>
+
+<section
+  class="carousel {klass}"
+  aria-roledescription="carousel"
+  aria-label={label}
+>
+  <div class="carousel-track" aria-live="polite" aria-atomic="false">
+    {#each slides as slide, i (slide.id)}
+      <div
+        role="group"
+        aria-roledescription="slide"
+        aria-label="{i + 1} of {slides.length}"
+        class="carousel-slide{i === index ? ' is-active' : ''}"
+        aria-hidden={i !== index ? true : undefined}
+      >
+        {#if slide.color}
+          <div class="carousel-slide-accent" style="background:{slide.color}" aria-hidden="true" />
+        {/if}
+        <div class="carousel-slide-body">
+          <div class="carousel-slide-title">{slide.title}</div>
+          {#if slide.description}
+            <div class="carousel-slide-desc">{slide.description}</div>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+  <div class="carousel-controls">
+    <button type="button" class="carousel-btn" aria-label="Previous slide" on:click={prev}
+      >&#8249;</button
+    >
+    <div role="tablist" aria-label="Choose slide to display" class="carousel-indicators">
+      {#each slides as slide, i (slide.id)}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={i === index}
+          aria-label="Slide {i + 1}: {slide.title}"
+          class="carousel-dot{i === index ? ' is-active' : ''}"
+          on:click={() => (index = i)}
+        />
+      {/each}
+    </div>
+    <button type="button" class="carousel-btn" aria-label="Next slide" on:click={next}
+      >&#8250;</button
+    >
+  </div>
+</section>

package/src/lib/components/Checkbox.svelte

@@ -0,0 +1,45 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  export let checked: boolean = false;
+  export let indeterminate: boolean = false;
+  export let label: string | undefined = undefined;
+  export let id: string | undefined = undefined;
+  export let disabled: boolean = false;
+
+  const uid = `dash-ui-cb-${++counter}`;
+  $: inputId = id ?? uid;
+
+  let el: HTMLInputElement;
+  $: if (el) {
+    el.checked = checked;
+    el.indeterminate = indeterminate;
+  }
+</script>
+
+{#if label}
+  <label class="checkbox-label" for={inputId}>
+    <input
+      bind:this={el}
+      type="checkbox"
+      id={inputId}
+      {disabled}
+      class="checkbox"
+      on:change
+      {...$$restProps}
+    />
+    <span>{label}</span>
+  </label>
+{:else}
+  <input
+    bind:this={el}
+    type="checkbox"
+    id={inputId}
+    {disabled}
+    class="checkbox"
+    on:change
+    {...$$restProps}
+  />
+{/if}

package/src/lib/components/ChordDiagram.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  export interface ChordNode { label: string; color?: string; }
+
+  export let nodes: ChordNode[];
+  export let matrix: number[][];
+  export let ariaLabel: string = 'Chord diagram';
+
+  const PALETTE = ['#006FFF', '#00C875', '#A78BFA', '#F5A623', '#50B8E7', '#F04949'];
+  const CX = 160, CY = 160, R_IN = 108, R_ARC = 125, R_LBL = 138, PAD = 0.04;
+
+  function pt(r: number, a: number) {
+    return `${(CX + r * Math.cos(a)).toFixed(1)},${(CY + r * Math.sin(a)).toFixed(1)}`;
+  }
+
+  function arcSlice(r1: number, r2: number, a1: number, a2: number) {
+    const lg = a2 - a1 > Math.PI ? 1 : 0;
+    return `M${pt(r2, a1)} A${r2},${r2} 0 ${lg},1 ${pt(r2, a2)} L${pt(r1, a2)} A${r1},${r1} 0 ${lg},0 ${pt(r1, a1)} Z`;
+  }
+
+  function ribbon(a1: number, a2: number, b1: number, b2: number) {
+    const la = +(a2 - a1 > Math.PI);
+    const lb = +(b2 - b1 > Math.PI);
+    return `M${pt(R_IN, a1)} A${R_IN},${R_IN} 0 ${la},1 ${pt(R_IN, a2)} Q${CX},${CY} ${pt(R_IN, b2)} A${R_IN},${R_IN} 0 ${lb},0 ${pt(R_IN, b1)} Q${CX},${CY} ${pt(R_IN, a1)}Z`;
+  }
+
+  type Arc = { d: string; fill: string };
+  type Chord = { d: string; fill: string };
+  type Label = { x: number; y: number; anchor: string; text: string };
+
+  $: ({ arcs, chords, labels } = (() => {
+    const n = nodes.length;
+    const totals = nodes.map((_, i) => matrix[i].reduce((s, v) => s + v, 0));
+    const grand = totals.reduce((s, v) => s + v, 0);
+    if (!grand) return { arcs: [] as Arc[], chords: [] as Chord[], labels: [] as Label[] };
+
+    const scale = (2 * Math.PI - PAD * n) / grand;
+    const nodeA: { start: number; end: number; offsets: number[] }[] = [];
+    let angle = -Math.PI / 2;
+
+    for (let i = 0; i < n; i++) {
+      const span = totals[i] * scale;
+      const offsets: number[] = [];
+      let off = angle;
+      for (let j = 0; j < n; j++) {
+        offsets.push(off);
+        off += matrix[i][j] * scale;
+      }
+      nodeA.push({ start: angle, end: angle + span, offsets });
+      angle += span + PAD;
+    }
+
+    const arcs: Arc[] = nodeA.map((a, i) => ({
+      d: arcSlice(R_IN + 2, R_ARC, a.start, a.end),
+      fill: nodes[i].color ?? PALETTE[i % PALETTE.length],
+    }));
+
+    const chords: Chord[] = [];
+    for (let i = 0; i < n; i++) {
+      for (let j = i + 1; j < n; j++) {
+        const vij = matrix[i][j], vji = matrix[j][i];
+        if (!vij && !vji) continue;
+        const a1 = nodeA[i].offsets[j], a2 = a1 + vij * scale;
+        const b1 = nodeA[j].offsets[i], b2 = b1 + vji * scale;
+        chords.push({ d: ribbon(a1, a2, b1, b2), fill: (nodes[i].color ?? PALETTE[i % PALETTE.length]) + '55' });
+      }
+    }
+
+    const labels: Label[] = nodeA.map((a, i) => {
+      const mid = (a.start + a.end) / 2;
+      const anchor = Math.cos(mid) > 0.2 ? 'start' : Math.cos(mid) < -0.2 ? 'end' : 'middle';
+      return { x: CX + R_LBL * Math.cos(mid), y: CY + R_LBL * Math.sin(mid) + 4, anchor, text: nodes[i].label };
+    });
+
+    return { arcs, chords, labels };
+  })());
+</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 chords as c, i (i)}
+      <path d={c.d} fill={c.fill} />
+    {/each}
+    {#each arcs as a, i (i)}
+      <path d={a.d} fill={a.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}
+  </svg>
+</div>

package/src/lib/components/CirclePacking.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  export interface CirclePackItem {
+    id: string;
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export let items: CirclePackItem[];
+  export let height = 200;
+  export let ariaLabel = 'Circle packing chart';
+
+  const PALETTE = ['#006FFF', '#00C875', '#F5A623', '#A78BFA', '#FF7B7B', '#00C8C8', '#FB923C', '#4797FF'];
+  const VW = 360;
+  const MAX_R = 72;
+  const MIN_R = 10;
+
+  function pack(radii: number[]): { cx: number; cy: number }[] {
+    const pos: { cx: number; cy: number; r: number }[] = [];
+    for (let i = 0; i < radii.length; i++) {
+      const r = radii[i];
+      if (i === 0) { pos.push({ cx: 0, cy: 0, r }); continue; }
+      if (i === 1) { pos.push({ cx: pos[0].r + r, cy: 0, r }); continue; }
+
+      const candidates: { cx: number; cy: number }[] = [];
+      for (let a = 0; a < pos.length; a++) {
+        for (let b = a + 1; b < pos.length; b++) {
+          const pa = pos[a], pb = pos[b];
+          const da = pa.r + r, db = pb.r + r;
+          const dx = pb.cx - pa.cx, dy = pb.cy - pa.cy;
+          const dist = Math.hypot(dx, dy);
+          if (dist > da + db || dist < Math.abs(da - db)) continue;
+          const cosA = (da * da + dist * dist - db * db) / (2 * da * dist);
+          if (cosA < -1 || cosA > 1) continue;
+          const acos = Math.acos(Math.max(-1, Math.min(1, cosA)));
+          const base = Math.atan2(dy, dx);
+          for (const sign of [1, -1]) {
+            candidates.push({
+              cx: pa.cx + da * Math.cos(base + sign * acos),
+              cy: pa.cy + da * Math.sin(base + sign * acos),
+            });
+          }
+        }
+        const pa = pos[a];
+        const ang = Math.atan2(-pa.cy, -pa.cx);
+        candidates.push({
+          cx: pa.cx + (pa.r + r) * Math.cos(ang),
+          cy: pa.cy + (pa.r + r) * Math.sin(ang),
+        });
+      }
+
+      let best: { cx: number; cy: number } | null = null;
+      let bestDist = Infinity;
+      for (const c of candidates) {
+        const overlap = pos.some((p) => Math.hypot(c.cx - p.cx, c.cy - p.cy) < p.r + r - 0.4);
+        if (!overlap) {
+          const d = Math.hypot(c.cx, c.cy);
+          if (d < bestDist) { bestDist = d; best = c; }
+        }
+      }
+      const last = pos[pos.length - 1];
+      pos.push({ cx: best?.cx ?? last.cx + last.r + r + 2, cy: best?.cy ?? 0, r });
+    }
+    return pos.map(({ cx, cy }) => ({ cx, cy }));
+  }
+
+  $: layout = (() => {
+    if (!items.length) return null;
+    const sorted = [...items].sort((a, b) => b.value - a.value);
+    const maxV = sorted[0].value;
+    const radii = sorted.map((it) => Math.max(MIN_R, Math.round(MAX_R * Math.sqrt(it.value / maxV))));
+    const positions = pack(radii);
+
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    positions.forEach((p, i) => {
+      minX = Math.min(minX, p.cx - radii[i]);
+      minY = Math.min(minY, p.cy - radii[i]);
+      maxX = Math.max(maxX, p.cx + radii[i]);
+      maxY = Math.max(maxY, p.cy + radii[i]);
+    });
+    const w = maxX - minX, h = maxY - minY;
+    const pad = 8;
+    const scale = Math.min((VW - pad * 2) / w, (height - pad * 2) / h);
+    const offX = (VW - w * scale) / 2 - minX * scale;
+    const offY = (height - h * scale) / 2 - minY * scale;
+
+    return sorted.map((item, i) => {
+      const r = radii[i] * scale;
+      const cx = positions[i].cx * scale + offX;
+      const cy = positions[i].cy * scale + offY;
+      const color = item.color ?? PALETTE[i % PALETTE.length];
+      return { id: item.id, label: item.label, value: item.value, cx, cy, r, color };
+    });
+  })();
+</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">
+      {#each layout as c (c.id)}
+        <g>
+          <circle cx={c.cx} cy={c.cy} r={c.r} fill={c.color} fill-opacity={0.25} stroke={c.color} stroke-width={1.5} />
+          {#if c.r >= 18}
+            <text x={c.cx} y={c.cy - (c.r >= 26 ? 5 : 0)} text-anchor="middle" dominant-baseline="middle"
+              font-size={Math.min(11, c.r * 0.38)} fill="#E2E4ED" font-family="inherit" font-weight={500}>
+              {c.label}
+            </text>
+          {/if}
+          {#if c.r >= 26}
+            <text x={c.cx} y={c.cy + 10} text-anchor="middle" dominant-baseline="middle"
+              font-size={Math.min(9, c.r * 0.3)} fill={c.color} font-family="inherit">
+              {c.value}
+            </text>
+          {/if}
+        </g>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/CodeBlock.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  export let code: string = '';
+  export let label: string = 'Code block';
+  export let language: string = '';
+  let className = '';
+  export { className as class };
+
+  let copied = false;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  function handleCopy() {
+    navigator.clipboard.writeText(code).then(() => {
+      copied = true;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => { copied = false; }, 2000);
+    });
+  }
+
+  onDestroy(() => { if (timer) clearTimeout(timer); });
+</script>
+
+<div role="region" aria-label={label} class="code-block {className}">
+  <div class="code-block__header">
+    {#if language}
+      <span class="code-block__lang">{language}</span>
+    {:else}
+      <span></span>
+    {/if}
+    <button
+      type="button"
+      class="copy-btn{copied ? ' copy-btn--done' : ''}"
+      aria-label={copied ? 'Copied!' : 'Copy code'}
+      on:click={handleCopy}
+    >
+      {#if copied}
+        <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable="false">
+          <path d="M2.5 7.5l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      {:else}
+        <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable="false">
+          <rect x="4" y="1" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+          <rect x="1" y="4" width="9" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5" />
+        </svg>
+      {/if}
+    </button>
+  </div>
+  <pre class="code-block__pre"><code class="code-block__code">{code}</code></pre>
+</div>

package/src/lib/components/ColorPicker.svelte

@@ -0,0 +1,91 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export interface ColorSwatchDef {
+    value: string;
+    label: string;
+    color: string;
+  }
+  export const COLOR_SWATCHES: ColorSwatchDef[] = [
+    { value: 'blue', label: 'Blue', color: '#006FFF' },
+    { value: 'green', label: 'Green', color: '#00B070' },
+    { value: 'amber', label: 'Amber', color: '#F5A623' },
+    { value: 'red', label: 'Red', color: '#F03A3A' },
+    { value: 'purple', label: 'Purple', color: '#9B59B6' },
+    { value: 'teal', label: 'Teal', color: '#1ABC9C' },
+    { value: 'pink', label: 'Pink', color: '#E91E8C' },
+    { value: 'orange', label: 'Orange', color: '#FF6B35' },
+    { value: 'slate', label: 'Slate', color: '#6E7079' },
+    { value: 'light', label: 'Light', color: '#E8E8EC' },
+  ];
+</script>
+
+<script lang="ts">
+  export let label: string = 'Colour';
+  export let srOnlyLabel: boolean = false;
+  export let value: string = COLOR_SWATCHES[0].value;
+  export let swatches: ColorSwatchDef[] = COLOR_SWATCHES;
+  export let disabled: boolean = false;
+  export let onChange: ((v: string) => void) | undefined = undefined;
+
+  const groupId = `dash-ui-cp-${++counter}`;
+
+  function handleKeyDown(e: KeyboardEvent) {
+    const cells = Array.from(
+      (e.currentTarget as HTMLElement).querySelectorAll<HTMLInputElement>('input[type="radio"]'),
+    );
+    if (!cells.length) return;
+    const idx = cells.findIndex((c) => c.value === value);
+    let next = idx;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (idx + 1) % cells.length;
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+      next = (idx - 1 + cells.length) % cells.length;
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = cells.length - 1;
+    else return;
+    e.preventDefault();
+    cells[next].focus();
+    value = cells[next].value;
+    onChange?.(value);
+  }
+
+  $: hasMatch = swatches.some((s) => s.value === value);
+</script>
+
+<div class="color-picker{disabled ? ' color-picker--disabled' : ''}">
+  <div id="{groupId}-label" class="color-picker__label{srOnlyLabel ? ' sr-only' : ''}"
+    >{label}</div
+  >
+  <div
+    role="radiogroup"
+    aria-labelledby="{groupId}-label"
+    class="color-picker__grid"
+    tabindex="-1"
+    on:keydown={handleKeyDown}
+  >
+    {#each swatches as sw, i}
+      {@const checked = sw.value === value}
+      {@const tabIdx = checked || (i === 0 && !hasMatch) ? 0 : -1}
+      <label class="color-picker__swatch" title={sw.label}>
+        <input
+          type="radio"
+          name={groupId}
+          value={sw.value}
+          {checked}
+          {disabled}
+          class="sr-only"
+          tabindex={tabIdx}
+          aria-label={sw.label}
+          on:change={() => {
+            value = sw.value;
+            onChange?.(value);
+          }}
+        />
+        <span
+          class="color-picker__circle{checked ? ' color-picker__circle--selected' : ''}"
+          style="background:{sw.color}"
+          aria-hidden="true"
+        />
+      </label>
+    {/each}
+  </div>
+</div>