@w5-ui/svelte 0.1.0

package/src/lib/components/PieChart.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  export interface PieSlice {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export let slices: PieSlice[] = [];
+  export let size: number = 140;
+  export let ariaLabel: string = 'Pie chart';
+
+  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#A878F5', '#FF6B6B', '#00C875', '#7FB6FF', '#6E7079'];
+  const TAU = 2 * Math.PI;
+  const START = -Math.PI / 2;
+
+  function arcPath(cx: number, cy: number, r: number, a0: number, a1: number): string {
+    const x0 = cx + r * Math.cos(a0);
+    const y0 = cy + r * Math.sin(a0);
+    const x1 = cx + r * Math.cos(a1);
+    const y1 = cy + r * Math.sin(a1);
+    const large = a1 - a0 > Math.PI ? 1 : 0;
+    return `M ${cx} ${cy} L ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${x1.toFixed(2)} ${y1.toFixed(2)} Z`;
+  }
+
+  $: total = slices.reduce((s, sl) => s + sl.value, 0) || 1;
+  $: cx = size / 2;
+  $: cy = size / 2;
+  $: r = (size / 2) * 0.82;
+  $: LEGEND_ROW = 18;
+  $: legendH = Math.ceil(slices.length / 2) * LEGEND_ROW + 6;
+  $: VH = size + legendH;
+
+  $: segments = (() => {
+    const result: { path: string; color: string; mid: number }[] = [];
+    let angle = START;
+    for (let i = 0; i < slices.length; i++) {
+      const sl = slices[i];
+      const span = (sl.value / total) * TAU;
+      const color = sl.color ?? COLORS[i % COLORS.length];
+      result.push({ path: arcPath(cx, cy, r, angle, angle + span), color, mid: angle + span / 2 });
+      angle += span;
+    }
+    return result;
+  })();
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {size} {VH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each segments as seg, i (i)}
+      <path d={seg.path} fill={seg.color} stroke="#1a1d2b" stroke-width="1.5" />
+    {/each}
+
+    {#each slices as sl, i (sl.label)}
+      {@const pct = Math.round((sl.value / total) * 100)}
+      {#if pct >= 5}
+        {@const mid = segments[i].mid}
+        {@const lr = r * 0.6}
+        <text
+          x={(cx + lr * Math.cos(mid)).toFixed(1)}
+          y={(cy + lr * Math.sin(mid)).toFixed(1)}
+          fill="#fff"
+          font-size="9"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          font-family="inherit"
+          font-weight="600"
+        >{pct}%</text>
+      {/if}
+    {/each}
+
+    {#each slices as sl, i (sl.label + 'leg')}
+      {@const cols = Math.ceil(slices.length / 2)}
+      {@const col = Math.floor(i / cols)}
+      {@const row = i % cols}
+      {@const colW = size / 2}
+      {@const lx = col * colW + 10}
+      {@const ly = size + 6 + row * LEGEND_ROW}
+      {@const c = sl.color ?? COLORS[i % COLORS.length]}
+      <g>
+        <rect x={lx} y={ly + 2} width="8" height="8" rx="2" fill={c} />
+        <text x={lx + 12} y={ly + 9} fill="#A4A7B5" font-size="9" font-family="inherit"
+          >{sl.label} ({sl.value})</text>
+      </g>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/Pill.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let variant: 'success' | 'warn' | 'danger' | 'info' | 'neutral' = 'neutral';
+  export let showDot: boolean = true;
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+</script>
+
+<span class="pill pill-{variant} {className}" {style}>
+  {#if showDot}<span class="dot" aria-hidden="true"></span>{/if}
+  <slot />
+</span>

package/src/lib/components/PolarHeatmap.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  export interface PolarCell {
+    row: number;
+    col: number;
+    value: number;
+  }
+
+  export let data: PolarCell[] = [];
+  export let rows: number = 7;
+  export let cols: number = 24;
+  export let colLabels: string[] = [];
+  export let color: string = '#006FFF';
+  export let ariaLabel: string = 'Polar heatmap';
+
+  const SIZE = 280;
+  const CX = SIZE / 2;
+  const CY = SIZE / 2;
+  const MIN_R = 24;
+  const MAX_R = 110;
+  const BASE = -Math.PI / 2;
+
+  function hexToRgb(hex: string): [number, number, number] {
+    const h = hex.replace('#', '');
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+  }
+
+  function annularSector(ir: number, or: number, sa: number, ea: number): string {
+    const { cos, sin } = Math;
+    const f = (v: number) => v.toFixed(2);
+    return [
+      `M ${f(CX + ir * cos(sa))} ${f(CY + ir * sin(sa))}`,
+      `A ${f(ir)} ${f(ir)} 0 0 1 ${f(CX + ir * cos(ea))} ${f(CY + ir * sin(ea))}`,
+      `L ${f(CX + or * cos(ea))} ${f(CY + or * sin(ea))}`,
+      `A ${f(or)} ${f(or)} 0 0 0 ${f(CX + or * cos(sa))} ${f(CY + or * sin(sa))}`,
+      'Z',
+    ].join(' ');
+  }
+
+  $: maxVal = data.length ? Math.max(...data.map((d) => d.value), 1) : 1;
+  $: ringH = (MAX_R - MIN_R) / rows;
+  $: segA = (2 * Math.PI) / cols;
+  $: [rC, gC, bC] = hexToRgb(color);
+  $: LABEL_R = MAX_R + 14;
+  $: labelEvery = cols <= 12 ? 1 : cols <= 24 ? 3 : Math.round(cols / 8);
+  $: rings = Array.from({ length: rows + 1 }, (_, i) => +(MIN_R + i * ringH).toFixed(2));
+  $: cells = data.map((cell) => {
+    const ir = MIN_R + cell.row * ringH;
+    const or = ir + ringH - 0.5;
+    const sa = BASE + cell.col * segA + 0.01;
+    const ea = BASE + (cell.col + 1) * segA - 0.01;
+    const norm = cell.value / maxVal;
+    return {
+      d: annularSector(ir, or, sa, ea),
+      fill: `rgba(${rC},${gC},${bC},${(0.08 + 0.92 * norm).toFixed(3)})`,
+    };
+  });
+  $: visibleColLabels = colLabels
+    .map((label, i) => {
+      if (i % labelEvery !== 0) return null;
+      const a = BASE + (i + 0.5) * segA;
+      return {
+        x: (CX + LABEL_R * Math.cos(a)).toFixed(1),
+        y: (CY + LABEL_R * Math.sin(a)).toFixed(1),
+        label,
+      };
+    })
+    .filter(Boolean) as { x: string; y: string; label: string }[];
+</script>
+
+{#if data.length}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {SIZE} {SIZE}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each rings as r, i (i)}
+        <circle cx={CX} cy={CY} r={r} fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5" />
+      {/each}
+      {#each cells as cell, i (i)}
+        <path d={cell.d} fill={cell.fill} />
+      {/each}
+      {#each visibleColLabels as lbl, i (i)}
+        <text x={lbl.x} y={lbl.y} fill="#6E7079" font-size="7" text-anchor="middle" dominant-baseline="middle" font-family="inherit">{lbl.label}</text>
+      {/each}
+      <circle cx={CX} cy={CY} r={MIN_R} fill="#13131A" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
+    </svg>
+  </div>
+{/if}

package/src/lib/components/Popover.svelte

@@ -0,0 +1,89 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { onMount, onDestroy, tick } from 'svelte';
+
+  export let label: string;
+  export let variant: 'ghost' | 'primary' = 'ghost';
+  export let title: string | undefined = undefined;
+  export let placement: 'bottom-start' | 'bottom-end' | 'bottom' = 'bottom-start';
+
+  const uid = `dash-ui-pop-${++counter}`;
+  const titleId = `${uid}-title`;
+
+  const FOCUSABLE =
+    'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+  let open = false;
+  let rootEl: HTMLDivElement;
+  let triggerEl: HTMLButtonElement;
+  let panelEl: HTMLDivElement;
+
+  async function toggle() {
+    if (!open) {
+      open = true;
+      await tick();
+      const first = panelEl?.querySelector<HTMLElement>(FOCUSABLE);
+      (first ?? panelEl)?.focus();
+    } else {
+      open = false;
+    }
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (!open) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      open = false;
+      triggerEl?.focus();
+      return;
+    }
+    if (e.key === 'Tab' && panelEl) {
+      const items = Array.from(panelEl.querySelectorAll<HTMLElement>(FOCUSABLE));
+      if (!items.length) { e.preventDefault(); return; }
+      const first = items[0]!;
+      const last = items[items.length - 1]!;
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+    }
+  }
+
+  function onPointer(e: PointerEvent) {
+    if (open && !rootEl?.contains(e.target as Node)) open = false;
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onPointer);
+  });
+  onDestroy(() => {
+    window.removeEventListener('keydown', onKey);
+    document.removeEventListener('pointerdown', onPointer);
+  });
+</script>
+
+<div class="popover-root" bind:this={rootEl}>
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="btn btn-{variant}"
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    on:click={toggle}
+  >{label}</button>
+  {#if open}
+    <div
+      bind:this={panelEl}
+      role="dialog"
+      aria-labelledby={title ? titleId : undefined}
+      class="popover popover-{placement}"
+      tabindex="-1"
+    >
+      {#if title}<div id={titleId} class="popover-h">{title}</div>{/if}
+      <div class="popover-b"><slot /></div>
+    </div>
+  {/if}
+</div>

package/src/lib/components/ProgressBar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  export let value: number;
+  export let label: string | undefined = undefined;
+  export let valueText: string | undefined = undefined;
+  export let color: string = '#006FFF';
+  $: clamped = Math.max(0, Math.min(100, value));
+  $: displayed = valueText ?? `${Math.round(clamped)}%`;
+  $: hasHeader = label !== undefined || valueText !== undefined;
+</script>
+
+<div class="pb">
+  {#if hasHeader}
+    <div class="pb-header">
+      {#if label}<span class="pb-label">{label}</span>{/if}
+      <span class="pb-value">{displayed}</span>
+    </div>
+  {/if}
+  <div
+    class="pb-track"
+    role="progressbar"
+    aria-valuenow={Math.round(clamped)}
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-label={label}
+    aria-valuetext={displayed}
+  >
+    <div class="pb-fill" style="width:{clamped}%;background:{color};" />
+  </div>
+</div>

package/src/lib/components/PunchCard.svelte

@@ -0,0 +1,73 @@
+<script context="module">
+  let _n = 0;
+</script>
+<script lang="ts">
+  const _uid = `pc${_n++}`;
+
+  export let data: number[][];
+  export let rowLabels: string[] | undefined = undefined;
+  export let colLabels: string[] | undefined = undefined;
+  export let color: string = '#006FFF';
+  export let height: number = 180;
+  export let ariaLabel: string = 'Punch card chart';
+
+  const VW = 400;
+  const PAD = { t: 16, r: 8, b: 28, l: 28 };
+  const DEFAULT_ROWS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+  $: rows = data.length;
+  $: cols = data[0]?.length ?? 0;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+  $: cellW = chartW / (cols || 1);
+  $: cellH = chartH / (rows || 1);
+  $: maxR = Math.min(cellW, cellH) / 2 * 0.85;
+  $: maxVal = Math.max(...data.flat(), 1);
+  $: rLabels = rowLabels ?? DEFAULT_ROWS.slice(0, rows);
+  $: cLabels = colLabels ?? Array.from({ length: cols }, (_, i) =>
+    i % 6 === 0 ? String(i).padStart(2, '0') : ''
+  );
+  $: dots = data.flatMap((row, ri) =>
+    row.map((val, ci) => ({
+      ri, ci,
+      r: Math.sqrt(val / maxVal) * maxR,
+      cx: PAD.l + (ci + 0.5) * cellW,
+      cy: PAD.t + (ri + 0.5) * cellH,
+    }))
+  ).filter(d => d.r >= 0.4);
+</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 rLabels as lbl, ri (ri)}
+      <text
+        x={PAD.l - 4}
+        y={PAD.t + (ri + 0.5) * cellH + 3}
+        font-size="8"
+        fill="#6E7079"
+        text-anchor="end"
+        font-family="inherit"
+      >{lbl}</text>
+    {/each}
+    {#each cLabels as lbl, ci (ci)}
+      {#if lbl}
+        <text
+          x={PAD.l + (ci + 0.5) * cellW}
+          y={height - 6}
+          font-size="7"
+          fill="#6E7079"
+          text-anchor="middle"
+          font-family="inherit"
+        >{lbl}</text>
+      {/if}
+    {/each}
+    {#each dots as { cx, cy, r, ri, ci } (`${ri}-${ci}`)}
+      <circle {cx} {cy} {r} fill={color} fill-opacity="0.72" />
+    {/each}
+  </svg>
+</div>

package/src/lib/components/QuadrantChart.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  export interface QuadrantPoint {
+    x: number;
+    y: number;
+    label?: string;
+    color?: string;
+  }
+
+  export let points: QuadrantPoint[] = [];
+  export let xThreshold: number;
+  export let yThreshold: number;
+  export let xRange: [number, number] | undefined = undefined;
+  export let yRange: [number, number] | undefined = undefined;
+  /** Labels: [top-left, top-right, bottom-left, bottom-right] */
+  export let quadrantLabels: [string, string, string, string] = ['', '', '', ''];
+  export let quadrantColors: [string, string, string, string] = [
+    'rgba(0,200,117,0.06)',
+    'rgba(245,166,35,0.07)',
+    'rgba(0,111,255,0.06)',
+    'rgba(255,123,123,0.09)',
+  ];
+  export let xLabel: string | undefined = undefined;
+  export let yLabel: string | undefined = undefined;
+  export let height = 200;
+  export let ariaLabel = 'Quadrant chart';
+
+  const VW = 360;
+  const PAD = { t: 8, r: 8, b: 28, l: 36 };
+
+  $: xs = points.map((p) => p.x);
+  $: ys = points.map((p) => p.y);
+  $: x0 = xRange ? xRange[0] : Math.min(...xs, xThreshold - 1);
+  $: x1 = xRange ? xRange[1] : Math.max(...xs, xThreshold + 1);
+  $: y0 = yRange ? yRange[0] : Math.min(...ys, yThreshold - 1);
+  $: y1 = yRange ? yRange[1] : Math.max(...ys, yThreshold + 1);
+  $: xSpan = x1 - x0 || 1;
+  $: ySpan = y1 - y0 || 1;
+  $: cw = VW - PAD.l - PAD.r;
+  $: ch = height - PAD.t - PAD.b;
+
+  function toX(x: number) { return PAD.l + ((x - x0) / xSpan) * cw; }
+  function toY(y: number) { return PAD.t + ch - ((y - y0) / ySpan) * ch; }
+
+  $: tx = toX(xThreshold);
+  $: ty = toY(yThreshold);
+  $: xTicks = [x0, xThreshold, x1];
+  $: yTicks = [y0, yThreshold, y1];
+
+  $: dots = points.map((p) => ({
+    cx: toX(p.x),
+    cy: toY(p.y),
+    color: p.color ?? '#006FFF',
+    label: p.label,
+  }));
+</script>
+
+{#if points.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">
+      <!-- Quadrant zones -->
+      <rect x={PAD.l} y={PAD.t} width={tx - PAD.l} height={ty - PAD.t} fill={quadrantColors[0]} />
+      <rect x={tx} y={PAD.t} width={PAD.l + cw - tx} height={ty - PAD.t} fill={quadrantColors[1]} />
+      <rect x={PAD.l} y={ty} width={tx - PAD.l} height={PAD.t + ch - ty} fill={quadrantColors[2]} />
+      <rect x={tx} y={ty} width={PAD.l + cw - tx} height={PAD.t + ch - ty} fill={quadrantColors[3]} />
+
+      <!-- Grid border -->
+      <rect x={PAD.l} y={PAD.t} width={cw} height={ch} fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1" />
+
+      <!-- Threshold lines -->
+      <line x1={tx} y1={PAD.t} x2={tx} y2={PAD.t + ch} stroke="rgba(255,255,255,0.22)" stroke-width="1" stroke-dasharray="4 3" />
+      <line x1={PAD.l} y1={ty} x2={PAD.l + cw} y2={ty} stroke="rgba(255,255,255,0.22)" stroke-width="1" stroke-dasharray="4 3" />
+
+      <!-- Quadrant labels -->
+      {#if quadrantLabels[0]}
+        <text x={PAD.l + 5} y={PAD.t + 11} fill="rgba(255,255,255,0.22)" font-size="9" font-family="inherit">{quadrantLabels[0]}</text>
+      {/if}
+      {#if quadrantLabels[1]}
+        <text x={PAD.l + cw - 5} y={PAD.t + 11} fill="rgba(255,255,255,0.22)" font-size="9" font-family="inherit" text-anchor="end">{quadrantLabels[1]}</text>
+      {/if}
+      {#if quadrantLabels[2]}
+        <text x={PAD.l + 5} y={PAD.t + ch - 5} fill="rgba(255,255,255,0.22)" font-size="9" font-family="inherit">{quadrantLabels[2]}</text>
+      {/if}
+      {#if quadrantLabels[3]}
+        <text x={PAD.l + cw - 5} y={PAD.t + ch - 5} fill="rgba(255,255,255,0.22)" font-size="9" font-family="inherit" text-anchor="end">{quadrantLabels[3]}</text>
+      {/if}
+
+      <!-- Y-axis ticks -->
+      {#each yTicks as v, i (i)}
+        <text x={PAD.l - 4} y={toY(v) + 3} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{Math.round(v)}</text>
+      {/each}
+
+      <!-- X-axis ticks -->
+      {#each xTicks as v, i (i)}
+        <text x={toX(v)} y={height - 4} fill="#6E7079" font-size="8" text-anchor="middle" font-family="inherit">{Math.round(v)}</text>
+      {/each}
+
+      <!-- Axis labels -->
+      {#if xLabel}
+        <text x={PAD.l + cw / 2} y={height - 2} fill="#6E7079" font-size="8" text-anchor="middle" font-family="inherit">{xLabel}</text>
+      {/if}
+      {#if yLabel}
+        <text
+          x={8}
+          y={PAD.t + ch / 2}
+          fill="#6E7079"
+          font-size="8"
+          text-anchor="middle"
+          font-family="inherit"
+          transform="rotate(-90, 8, {PAD.t + ch / 2})"
+        >{yLabel}</text>
+      {/if}
+
+      <!-- Points -->
+      {#each dots as { cx, cy, color, label }, i (i)}
+        <circle {cx} {cy} r="5" fill={color} fill-opacity="0.85" />
+        {#if label}
+          <text x={cx + 7} y={cy + 3} fill="#CDD0DB" font-size="8" font-family="inherit">{label}</text>
+        {/if}
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/RadarChart.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  export interface RadarSeries {
+    label: string;
+    color: string;
+    values: number[];
+  }
+
+  export let series: RadarSeries[] = [];
+  export let axes: string[] = [];
+  export let height: number = 200;
+  export let ariaLabel: string = 'Radar chart';
+
+  const VW = 400;
+  const PAD = 36;
+
+  function pt(cx: number, cy: number, r: number, angle: number): [number, number] {
+    return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
+  }
+
+  function makePts(coords: [number, number][]): string {
+    return coords.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+  }
+
+  $: n = axes.length;
+  $: cx = VW / 2;
+  $: cy = height / 2;
+  $: R = Math.min(cx, cy) - PAD;
+  $: angles = axes.map((_, i) => (2 * Math.PI * i) / n - Math.PI / 2);
+
+  $: rings = n >= 3
+    ? [0.25, 0.5, 0.75, 1.0].map((f) => makePts(angles.map((a) => pt(cx, cy, R * f, a))))
+    : [];
+
+  $: axisLines = n >= 3
+    ? angles.map((a) => { const [x, y] = pt(cx, cy, R, a); return { x: x.toFixed(1), y: y.toFixed(1) }; })
+    : [];
+
+  $: axisLabels = n >= 3
+    ? axes.map((label, i) => {
+        const [x, y] = pt(cx, cy, R + 16, angles[i]);
+        const cos = Math.cos(angles[i]);
+        const anchor = Math.abs(cos) < 0.3 ? 'middle' : cos < 0 ? 'end' : 'start';
+        return { x: x.toFixed(1), y: y.toFixed(1), label, anchor };
+      })
+    : [];
+
+  $: polygons = n >= 3
+    ? series.map((s) => ({
+        pts: makePts(angles.map((a, i) => pt(cx, cy, R * Math.max(0, Math.min(1, s.values[i] ?? 0)), a))),
+        color: s.color,
+        label: s.label,
+      }))
+    : [];
+</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 rings as p}
+      <polygon points={p} fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each axisLines as end}
+      <line x1={cx} y1={cy} x2={end.x} y2={end.y} stroke="rgba(255,255,255,0.08)" stroke-width="1" />
+    {/each}
+    {#each polygons as p (p.label)}
+      <polygon points={p.pts} fill={p.color} fill-opacity="0.12" stroke={p.color} stroke-width="1.5" stroke-linejoin="round" />
+    {/each}
+    {#each axisLabels as l (l.label)}
+      <text x={l.x} y={l.y} text-anchor={l.anchor} fill="#6E7079" font-size="9" font-family="inherit" dominant-baseline="middle">{l.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/RadialBarChart.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  export interface RadialBarItem {
+    label: string;
+    value: number;
+    max: number;
+    color?: string;
+    unit?: string;
+  }
+
+  export let items: RadialBarItem[] = [];
+  export let ariaLabel = 'Radial bar chart';
+
+  const W = 280;
+  const H = 160;
+  const CX = 80;
+  const CY = 80;
+  const RING_W = 9;
+  const RING_GAP = 5;
+  const MIN_R = 20;
+  const LABEL_X = 170;
+  const ITEM_H = 22;
+
+  function arcPath(r: number, frac: number): string {
+    if (frac <= 0) return '';
+    const start = -Math.PI / 2;
+    const clamped = Math.min(frac, 1);
+    const x1 = (CX + r * Math.cos(start)).toFixed(2);
+    const y1 = (CY + r * Math.sin(start)).toFixed(2);
+    if (clamped >= 1) {
+      const xm = (CX + r * Math.cos(start + Math.PI)).toFixed(2);
+      const ym = (CY + r * Math.sin(start + Math.PI)).toFixed(2);
+      return `M${x1},${y1} A${r},${r} 0 1 1 ${xm},${ym} A${r},${r} 0 1 1 ${x1},${y1}`;
+    }
+    const sweep = clamped * 2 * Math.PI;
+    const end = start + sweep;
+    const x2 = (CX + r * Math.cos(end)).toFixed(2);
+    const y2 = (CY + r * Math.sin(end)).toFixed(2);
+    return `M${x1},${y1} A${r},${r} 0 ${sweep > Math.PI ? 1 : 0} 1 ${x2},${y2}`;
+  }
+
+  $: n = items.length;
+  $: yStart = CY - ((n - 1) * ITEM_H) / 2;
+  $: rings = items.map((item, i) => {
+    const r = MIN_R + (n - 1 - i) * (RING_W + RING_GAP);
+    const frac = Math.min(item.value / (item.max || 1), 1);
+    const color = item.color ?? '#006FFF';
+    const ly = yStart + i * ITEM_H;
+    return {
+      r,
+      frac,
+      color,
+      ly,
+      d: arcPath(r, frac),
+      pct: Math.round(frac * 100),
+      label: item.label,
+      value: item.value,
+      unit: item.unit ?? '',
+    };
+  });
+</script>
+
+{#if items.length}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {W} {H}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each rings as ring, i (i)}
+        <circle cx={CX} cy={CY} r={ring.r} fill="none" stroke="rgba(255,255,255,0.06)" stroke-width={RING_W} />
+        {#if ring.d}
+          <path d={ring.d} fill="none" stroke={ring.color} stroke-width={RING_W} stroke-linecap="round" />
+        {/if}
+        <circle cx={LABEL_X} cy={ring.ly} r="3.5" fill={ring.color} />
+        <text x={LABEL_X + 10} y={ring.ly - 2} fill="#C8C9D0" font-size="9" font-family="inherit" dominant-baseline="auto">{ring.label}</text>
+        <text x={LABEL_X + 10} y={ring.ly + 9} fill="#6E7079" font-size="8" font-family="inherit" dominant-baseline="auto">{ring.value}{ring.unit} · {ring.pct}%</text>
+      {/each}
+    </svg>
+  </div>
+{/if}