@w5-ui/svelte 0.1.0

package/src/lib/components/DateRangePicker.svelte

@@ -0,0 +1,249 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+  ];
+
+  function isSameDay(a: Date, b: Date) {
+    return a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate();
+  }
+
+  function formatDate(d: Date) {
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    return `${mm}/${dd}/${d.getFullYear()}`;
+  }
+
+  function buildGrid(year: number, month: number): Date[] {
+    const first = new Date(year, month, 1);
+    const last = new Date(year, month + 1, 0);
+    const grid: Date[] = [];
+    for (let i = first.getDay() - 1; i >= 0; i--) {
+      grid.push(new Date(year, month, -i));
+    }
+    for (let d = 1; d <= last.getDate(); d++) {
+      grid.push(new Date(year, month, d));
+    }
+    while (grid.length < 42) {
+      grid.push(new Date(year, month + 1, grid.length - first.getDay() - last.getDate() + 1));
+    }
+    return grid;
+  }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+  }
+
+  export let value: DateRange = { start: null, end: null };
+  export let placeholder: string = 'Select date range';
+  export let disabled: boolean = false;
+
+  const dispatch = createEventDispatcher<{ change: DateRange }>();
+  const uid = `dash-ui-drp-${++counter}`;
+  const dlgId = `${uid}-dlg`;
+  const today = new Date();
+
+  let open = false;
+  let picking: Date | null = null;
+  let hoverDate: Date | null = null;
+  let viewYear = today.getFullYear();
+  let viewMonth = today.getMonth();
+  let triggerEl: HTMLButtonElement;
+  let dlgEl: HTMLDivElement;
+
+  $: rightMonth = viewMonth === 11 ? 0 : viewMonth + 1;
+  $: rightYear = viewMonth === 11 ? viewYear + 1 : viewYear;
+  $: leftGrid = buildGrid(viewYear, viewMonth);
+  $: rightGrid = buildGrid(rightYear, rightMonth);
+
+  function prevMonth() {
+    if (viewMonth === 0) { viewYear -= 1; viewMonth = 11; }
+    else viewMonth -= 1;
+  }
+
+  function nextMonth() {
+    if (viewMonth === 11) { viewYear += 1; viewMonth = 0; }
+    else viewMonth += 1;
+  }
+
+  function handleDayClick(day: Date) {
+    if (!picking) {
+      picking = day;
+      dispatch('change', { start: day, end: null });
+    } else {
+      const [s, e] = day < picking ? [day, picking] : [picking, day];
+      picking = null;
+      hoverDate = null;
+      dispatch('change', { start: s, end: e });
+      open = false;
+      triggerEl?.focus();
+    }
+  }
+
+  function isInRange(day: Date): boolean {
+    const start = picking ?? value.start;
+    const end = picking ? hoverDate : value.end;
+    if (!start || !end) return false;
+    const lo = start < end ? start : end;
+    const hi = start < end ? end : start;
+    return day > lo && day < hi;
+  }
+
+  function isStart(day: Date): boolean {
+    const start = picking ?? value.start;
+    return start ? isSameDay(day, start) : false;
+  }
+
+  function isEnd(day: Date): boolean {
+    if (picking) return hoverDate ? isSameDay(day, hoverDate) : false;
+    return value.end ? isSameDay(day, value.end) : false;
+  }
+
+  function formatRange(): string | null {
+    if (!value.start) return null;
+    if (!value.end) return `${formatDate(value.start)} --`;
+    return `${formatDate(value.start)} -- ${formatDate(value.end)}`;
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (open && !dlgEl?.contains(e.target as Node) && !triggerEl?.contains(e.target as Node)) {
+      open = false;
+      picking = null;
+    }
+  }
+
+  onMount(() => document.addEventListener('mousedown', handleOutside));
+  onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+</script>
+
+<div class="drp-root">
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="btn dp-trigger"
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    aria-controls={open ? dlgId : undefined}
+    {disabled}
+    on:click={() => { if (open) { open = false; picking = null; } else open = true; }}
+  >
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+      <rect x="1" y="2" width="12" height="11" rx="1.5" />
+      <path d="M1 6h12M4 1v2M10 1v2" />
+    </svg>
+    {formatRange() ?? placeholder}
+  </button>
+
+  {#if open}
+    <div
+      id={dlgId}
+      bind:this={dlgEl}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Select date range"
+      class="drp-cal"
+      on:keydown={(e) => {
+        if (e.key === 'Escape') { e.preventDefault(); open = false; picking = null; triggerEl?.focus(); }
+      }}
+    >
+      <div class="drp-months">
+        <!-- Left calendar -->
+        <div class="drp-month">
+          <div class="dp-header">
+            <button type="button" class="dp-nav" on:click={prevMonth} aria-label="Previous month">
+              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+                <path d="M7 1L2 6l5 5" />
+              </svg>
+            </button>
+            <span class="dp-month-label" aria-live="polite">{MONTHS[viewMonth]} {viewYear}</span>
+            <span style="width:28px;display:inline-block;" aria-hidden="true"></span>
+          </div>
+          <table role="grid" class="dp-grid" aria-label="{MONTHS[viewMonth]} {viewYear}">
+            <thead>
+              <tr>{#each DAYS as d}<th scope="col" abbr={d}>{d}</th>{/each}</tr>
+            </thead>
+            <tbody>
+              {#each Array(6) as _, row}
+                <tr>
+                  {#each Array(7) as _, col}
+                    {@const idx = row * 7 + col}
+                    {@const day = leftGrid[idx]}
+                    {@const outside = day.getMonth() !== viewMonth}
+                    {@const isTodayDay = isSameDay(day, today)}
+                    {@const start = isStart(day)}
+                    {@const end = isEnd(day)}
+                    {@const inRange = isInRange(day)}
+                    <td role="gridcell" aria-selected={start || end}>
+                      <button
+                        type="button"
+                        class="dp-day{outside ? ' dp-day--outside' : ''}{isTodayDay && !start && !end ? ' dp-day--today' : ''}{start ? ' dp-day--start' : ''}{end ? ' dp-day--end' : ''}{inRange ? ' dp-day--in-range' : ''}"
+                        aria-label={day.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
+                        on:click={() => handleDayClick(day)}
+                        on:mouseenter={() => { if (picking) hoverDate = day; }}
+                        on:mouseleave={() => { if (picking) hoverDate = null; }}
+                      >{day.getDate()}</button>
+                    </td>
+                  {/each}
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+        <!-- Right calendar -->
+        <div class="drp-month">
+          <div class="dp-header">
+            <span style="width:28px;display:inline-block;" aria-hidden="true"></span>
+            <span class="dp-month-label" aria-live="polite">{MONTHS[rightMonth]} {rightYear}</span>
+            <button type="button" class="dp-nav" on:click={nextMonth} aria-label="Next month">
+              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+                <path d="M1 1l5 5-5 5" />
+              </svg>
+            </button>
+          </div>
+          <table role="grid" class="dp-grid" aria-label="{MONTHS[rightMonth]} {rightYear}">
+            <thead>
+              <tr>{#each DAYS as d}<th scope="col" abbr={d}>{d}</th>{/each}</tr>
+            </thead>
+            <tbody>
+              {#each Array(6) as _, row}
+                <tr>
+                  {#each Array(7) as _, col}
+                    {@const idx = row * 7 + col}
+                    {@const day = rightGrid[idx]}
+                    {@const outside = day.getMonth() !== rightMonth}
+                    {@const isTodayDay = isSameDay(day, today)}
+                    {@const start = isStart(day)}
+                    {@const end = isEnd(day)}
+                    {@const inRange = isInRange(day)}
+                    <td role="gridcell" aria-selected={start || end}>
+                      <button
+                        type="button"
+                        class="dp-day{outside ? ' dp-day--outside' : ''}{isTodayDay && !start && !end ? ' dp-day--today' : ''}{start ? ' dp-day--start' : ''}{end ? ' dp-day--end' : ''}{inRange ? ' dp-day--in-range' : ''}"
+                        aria-label={day.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
+                        on:click={() => handleDayClick(day)}
+                        on:mouseenter={() => { if (picking) hoverDate = day; }}
+                        on:mouseleave={() => { if (picking) hoverDate = null; }}
+                      >{day.getDate()}</button>
+                    </td>
+                  {/each}
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      {#if picking}
+        <p class="drp-hint" aria-live="polite">Pick the end date</p>
+      {/if}
+    </div>
+  {/if}
+</div>

package/src/lib/components/Dendrogram.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  export interface DendrogramNode {
+    id: string;
+    label: string;
+    children?: DendrogramNode[];
+    color?: string;
+  }
+
+  interface PlacedNode {
+    id: string;
+    label: string;
+    x: number;
+    y: number;
+    color: string;
+    isLeaf: boolean;
+    children: PlacedNode[];
+  }
+
+  const CHILD_COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
+  const PAD_L = 12;
+  const PAD_V = 10;
+  const LABEL_LEAF_W = 130;
+
+  function countLeaves(n: DendrogramNode): number {
+    if (!n.children?.length) return 1;
+    return n.children.reduce((s, c) => s + countLeaves(c), 0);
+  }
+
+  function treeDepth(n: DendrogramNode): number {
+    if (!n.children?.length) return 0;
+    return 1 + Math.max(...n.children.map(treeDepth));
+  }
+
+  function placeNodes(
+    n: DendrogramNode,
+    depth: number,
+    cw: number,
+    rh: number,
+    counter: { v: number },
+    color: string,
+  ): PlacedNode {
+    const nodeColor = n.color ?? color;
+    const isLeaf = !n.children?.length;
+    if (isLeaf) {
+      const y = counter.v * rh + rh / 2;
+      counter.v++;
+      return { id: n.id, label: n.label, x: depth * cw, y, color: nodeColor, isLeaf: true, children: [] };
+    }
+    const children = n.children!.map((c, i) =>
+      placeNodes(c, depth + 1, cw, rh, counter, CHILD_COLORS[i % CHILD_COLORS.length]),
+    );
+    const y = (children[0].y + children[children.length - 1].y) / 2;
+    return { id: n.id, label: n.label, x: depth * cw, y, color: nodeColor, isLeaf: false, children };
+  }
+
+  function iterNodes(n: PlacedNode): PlacedNode[] {
+    return [n, ...n.children.flatMap(iterNodes)];
+  }
+
+  function iterLinks(n: PlacedNode): Array<[PlacedNode, PlacedNode]> {
+    return n.children.flatMap((c) => [[n, c] as [PlacedNode, PlacedNode], ...iterLinks(c)]);
+  }
+
+  function compute(root: DendrogramNode, colWidth: number, rowHeight: number) {
+    const counter = { v: 0 };
+    const raw = placeNodes(root, 0, colWidth, rowHeight, counter, '#8B909E');
+    const leafCount = counter.v;
+    const placed: PlacedNode = {
+      ...raw,
+      x: raw.x + PAD_L,
+      y: raw.y + PAD_V,
+      children: shiftChildren(raw.children, PAD_L, PAD_V),
+    };
+    const maxDepth = treeDepth(root);
+    return {
+      placed,
+      svgW: PAD_L + (maxDepth + 1) * colWidth + LABEL_LEAF_W,
+      svgH: leafCount * rowHeight + PAD_V * 2,
+      nodes: iterNodes(placed),
+      links: iterLinks(placed),
+    };
+  }
+
+  function shiftChildren(children: PlacedNode[], dx: number, dy: number): PlacedNode[] {
+    return children.map((c) => ({
+      ...c,
+      x: c.x + dx,
+      y: c.y + dy,
+      children: shiftChildren(c.children, dx, dy),
+    }));
+  }
+
+  export let root: DendrogramNode;
+  export let colWidth: number = 130;
+  export let rowHeight: number = 28;
+  export let ariaLabel: string = 'Dendrogram';
+
+  $: ({ svgW, svgH, nodes, links } = compute(root, colWidth, rowHeight));
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;overflow-x:auto">
+  <svg
+    viewBox="0 0 {svgW} {svgH}"
+    style="width:100%;height:{svgH}px;display:block"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each links as [parent, child], i (i)}
+      {@const mx = (parent.x + child.x) / 2}
+      <path
+        d="M{parent.x},{parent.y} C{mx},{parent.y} {mx},{child.y} {child.x},{child.y}"
+        fill="none"
+        stroke="rgba(255,255,255,0.13)"
+        stroke-width="1.5"
+      />
+    {/each}
+    {#each nodes as n (n.id)}
+      <circle cx={n.x} cy={n.y} r={4} fill={n.color} />
+      {#if n.isLeaf}
+        <text x={n.x + 10} y={n.y + 4} fill="#C8CDD9" font-size="10" font-family="inherit">{n.label}</text>
+      {:else if n.x === PAD_L}
+        <text x={n.x + 10} y={n.y + 4} fill="#8B909E" font-size="9" font-family="inherit">{n.label}</text>
+      {:else}
+        <text x={n.x} y={n.y - 7} fill="#8B909E" font-size="9" font-family="inherit" text-anchor="middle">{n.label}</text>
+      {/if}
+    {/each}
+  </svg>
+</div>

package/src/lib/components/Donut.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  export interface DonutSegment { label: string; value: number; color: string }
+  export let size: number = 96;
+  export let segments: DonutSegment[] = [];
+  export let centerValue: string | number;
+  export let centerLabel: string;
+  export let trackColor: string = 'rgba(255,255,255,0.06)';
+  export let ariaLabel: string | undefined = undefined;
+
+  $: total = segments.reduce((s, x) => s + x.value, 0) || 1;
+  $: r = (size - 20) / 2;
+  $: c = 2 * Math.PI * r;
+  $: segDesc = segments.map((s) => `${s.label} ${Math.round((s.value / total) * 100)}%`).join(', ');
+  $: label = ariaLabel ?? `${centerValue} ${centerLabel}${segDesc ? `: ${segDesc}` : ''}`;
+  $: arcs = (() => {
+    let cum = 0;
+    return segments.map((seg) => {
+      const frac = seg.value / total;
+      const offset = c * (1 - cum - frac);
+      const rotate = cum * 360;
+      cum += frac;
+      return { ...seg, offset, rotate };
+    });
+  })();
+</script>
+
+<div role="img" aria-label={label} style="position:relative;width:{size}px;height:{size}px;flex-shrink:0;">
+  <svg width={size} height={size} aria-hidden="true" focusable="false" style="transform:rotate(-90deg);">
+    <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={trackColor} stroke-width="10" />
+    {#each arcs as a (a.label)}
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={r}
+        fill="none"
+        stroke={a.color}
+        stroke-width="10"
+        stroke-dasharray={c}
+        stroke-dashoffset={a.offset}
+        stroke-linecap="round"
+        transform="rotate({a.rotate} {size / 2} {size / 2})"
+      />
+    {/each}
+  </svg>
+  <div aria-hidden="true" style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;">
+    <div style="font-size:20px;font-weight:600;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;">{centerValue}</div>
+    <div style="font-size:10px;color:#6E7079;">{centerLabel}</div>
+  </div>
+</div>

package/src/lib/components/DotPlot.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  export interface DotPlotItem {
+    label: string;
+    value: number;
+    compare?: number;
+    color?: string;
+  }
+
+  export let items: DotPlotItem[] = [];
+  export let min: number = 0;
+  export let max: number | undefined = undefined;
+  export let unit: string = '';
+  export let valueLegend: string | undefined = undefined;
+  export let compareLegend: string | undefined = undefined;
+  export let ariaLabel: string = 'Dot plot';
+
+  const VW = 380;
+  const LABEL_W = 132;
+  const VALUE_W = 32;
+  const PAD_R = 6;
+  const TRACK_W = VW - LABEL_W - VALUE_W - PAD_R;
+  const DOT_R = 5;
+  const ROW_H = 28;
+  const PAD_T = 8;
+  const AXIS_H = 18;
+  const LEG_H = 18;
+  const TICKS = 5;
+
+  $: hasCompare = items.some((it) => it.compare !== undefined);
+  $: maxVal = max ?? Math.max(...items.map((it) => Math.max(it.value, it.compare ?? 0)));
+  $: range = Math.max(maxVal - min, 1);
+  $: svgH =
+    PAD_T +
+    items.length * ROW_H +
+    AXIS_H +
+    (hasCompare && (valueLegend || compareLegend) ? LEG_H + 4 : 0);
+  $: ticks = Array.from({ length: TICKS }, (_, i) => min + (i / (TICKS - 1)) * range);
+  $: legY = PAD_T + items.length * ROW_H + AXIS_H + 4;
+
+  function tx(v: number): number {
+    return LABEL_W + ((v - min) / range) * TRACK_W;
+  }
+
+  function fmtTick(t: number): string {
+    return (Number.isInteger(t) ? t : t.toFixed(1)) + unit;
+  }
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {VW} {svgH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each ticks as t, i (i)}
+      <g>
+        <line
+          x1={tx(t)} y1={PAD_T}
+          x2={tx(t)} y2={PAD_T + items.length * ROW_H}
+          stroke="rgba(255,255,255,0.06)" stroke-width="1"
+        />
+        <text
+          x={tx(t)} y={PAD_T + items.length * ROW_H + 13}
+          fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit"
+        >{fmtTick(t)}</text>
+      </g>
+    {/each}
+
+    {#each items as item, i (item.label)}
+      {@const cy = PAD_T + i * ROW_H + ROW_H / 2}
+      {@const cx = tx(item.value)}
+      {@const ccx = item.compare !== undefined ? tx(item.compare) : null}
+      {@const color = item.color ?? '#006FFF'}
+      <g>
+        <text
+          x={LABEL_W - 8} y={cy + 4}
+          fill="#A4A7B5" font-size="10" text-anchor="end" font-family="inherit"
+        >{item.label}</text>
+
+        <line
+          x1={LABEL_W} y1={cy} x2={LABEL_W + TRACK_W} y2={cy}
+          stroke="rgba(255,255,255,0.06)" stroke-width="1"
+        />
+
+        {#if ccx !== null}
+          <line
+            x1={Math.min(cx, ccx)} y1={cy}
+            x2={Math.max(cx, ccx)} y2={cy}
+            stroke={color} stroke-width="1.5" opacity="0.35"
+          />
+          <circle cx={ccx} cy={cy} r={DOT_R - 1} fill="none" stroke="#A4A7B5" stroke-width="1.5" />
+        {/if}
+
+        <circle cx={cx} cy={cy} r={DOT_R} fill={color} />
+
+        <text
+          x={LABEL_W + TRACK_W + 6} y={cy + 4}
+          fill="#A4A7B5" font-size="9" font-family="inherit"
+        >{item.value}{unit}</text>
+      </g>
+    {/each}
+
+    {#if hasCompare && (valueLegend || compareLegend)}
+      {#if valueLegend}
+        <circle cx={LABEL_W} cy={legY + 5} r="4" fill="#006FFF" />
+        <text x={LABEL_W + 10} y={legY + 9} fill="#A4A7B5" font-size="9" font-family="inherit">{valueLegend}</text>
+      {/if}
+      {#if compareLegend}
+        <circle
+          cx={LABEL_W + (valueLegend ? 80 : 0)} cy={legY + 5}
+          r="3" fill="none" stroke="#A4A7B5" stroke-width="1.5"
+        />
+        <text
+          x={LABEL_W + (valueLegend ? 90 : 10)} y={legY + 9}
+          fill="#A4A7B5" font-size="9" font-family="inherit"
+        >{compareLegend}</text>
+      {/if}
+    {/if}
+  </svg>
+</div>

package/src/lib/components/Drawer.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import IconButton from './IconButton.svelte';
+  import CloseIcon from '../icons/CloseIcon.svelte';
+  export let open: boolean = false;
+  export let title: string;
+  const titleId = `drawer-title-${Math.random().toString(36).slice(2, 9)}`;
+  const FOCUSABLE =
+    'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+  let panelEl: HTMLDivElement;
+  let prev: HTMLElement | null = null;
+  let wasOpen = false;
+  $: if (open && !wasOpen) {
+    prev = typeof document !== 'undefined' ? (document.activeElement as HTMLElement | null) : null;
+    wasOpen = true;
+    tick().then(() => {
+      const first = panelEl?.querySelector<HTMLElement>(FOCUSABLE);
+      (first ?? panelEl)?.focus();
+    });
+  } else if (!open && wasOpen) {
+    wasOpen = false;
+    prev?.focus?.();
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (!open) return;
+    if (e.key === 'Escape') { open = false; return; }
+    if (e.key !== 'Tab' || !panelEl) return;
+    const items = Array.from(panelEl.querySelectorAll<HTMLElement>(FOCUSABLE));
+    if (!items.length) { e.preventDefault(); return; }
+    const f = items[0]!, l = items[items.length - 1]!;
+    const active = document.activeElement;
+    if (e.shiftKey && active === f) { e.preventDefault(); l.focus(); }
+    else if (!e.shiftKey && active === l) { e.preventDefault(); f.focus(); }
+  }
+</script>
+
+<svelte:window on:keydown={onKeydown} />
+
+<div
+  class="drawer-overlay {open ? 'show' : ''}"
+  on:click={() => (open = false)}
+  aria-hidden="true"
+  role="presentation"
+/>
+<div
+  bind:this={panelEl}
+  class="drawer-panel {open ? 'show' : ''}"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby={titleId}
+  tabindex="-1"
+>
+  <div class="drawer-h">
+    <h2 id={titleId}>{title}</h2>
+    <IconButton title="Close" on:click={() => (open = false)}>
+      <CloseIcon />
+    </IconButton>
+  </div>
+  <div class="drawer-b"><slot /></div>
+</div>

package/src/lib/components/DualAxisChart.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  export interface DualAxisSeries {
+    label: string;
+    color: string;
+    values: number[];
+  }
+
+  export let bars: DualAxisSeries;
+  export let line: DualAxisSeries;
+  export let labels: string[] = [];
+  export let height = 160;
+  export let ariaLabel = 'Dual axis chart';
+
+  const VW = 400;
+  const PAD = { t: 16, r: 44, b: 28, l: 44 };
+
+  function fmtTick(n: number): string {
+    if (n >= 1000) return `${Math.round(n / 1000)}k`;
+    return String(Math.round(n));
+  }
+
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+  $: bot = PAD.t + chartH;
+  $: n = bars.values.length;
+  $: gw = n > 0 ? chartW / n : chartW;
+  $: barW = gw * 0.55;
+  $: barMax = Math.max(...bars.values, 1);
+  $: lineMin = Math.min(...line.values);
+  $: lineMax = Math.max(...line.values, lineMin + 1);
+  $: lineRange = lineMax - lineMin || 1;
+  $: gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+  $: leftTicks = [0, 0.5, 1].map((f) => ({ y: PAD.t + (1 - f) * chartH, label: fmtTick(barMax * f) }));
+  $: rightTicks = [0, 0.5, 1].map((f) => ({ y: PAD.t + (1 - f) * chartH, label: fmtTick(lineMin + lineRange * f) }));
+  $: barRects = bars.values.map((v, i) => ({
+    x: (PAD.l + i * gw + gw / 2 - barW / 2).toFixed(1),
+    y: (bot - (v / barMax) * chartH).toFixed(1),
+    w: barW.toFixed(1),
+    h: ((v / barMax) * chartH).toFixed(1),
+  }));
+  $: linePoints = line.values.map((v, i) =>
+    `${(PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2)).toFixed(1)},${(PAD.t + chartH - ((v - lineMin) / lineRange) * chartH).toFixed(1)}`
+  );
+  $: linePath = linePoints.length ? `M ${linePoints.join(' L ')}` : '';
+  $: lineArea = linePoints.length
+    ? `M ${PAD.l.toFixed(1)},${bot.toFixed(1)} L ${linePoints.join(' L ')} L ${(PAD.l + (n > 1 ? chartW : 0)).toFixed(1)},${bot.toFixed(1)} 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 leftTicks as t}
+      <text x={PAD.l - 4} y={t.y + 4} text-anchor="end" fill={bars.color} font-size="9" font-family="inherit" fill-opacity="0.8">{t.label}</text>
+    {/each}
+    {#each rightTicks as t}
+      <text x={VW - PAD.r + 4} y={t.y + 4} text-anchor="start" fill={line.color} font-size="9" font-family="inherit" fill-opacity="0.8">{t.label}</text>
+    {/each}
+    {#each barRects as b}
+      <rect x={b.x} y={b.y} width={b.w} height={b.h} fill={bars.color} fill-opacity="0.75" rx="2" />
+    {/each}
+    {#if lineArea}<path d={lineArea} fill={line.color} fill-opacity="0.12" />{/if}
+    {#if linePath}<path d={linePath} fill="none" stroke={line.color} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />{/if}
+    {#each labels as lbl, i}
+      <text x={(PAD.l + (i + 0.5) * gw).toFixed(1)} y={height - 4} text-anchor="middle" fill="#6E7079" font-size="9" font-family="inherit">{lbl}</text>
+    {/each}
+  </svg>
+  <div style="display:flex;gap:16px;justify-content:center;font-size:11px;color:#A4A7B5;margin-top:4px;">
+    <span style="display:flex;align-items:center;gap:4px;">
+      <span style="display:inline-block;width:10px;height:10px;background:{bars.color};border-radius:2px;opacity:0.75;"></span>
+      {bars.label}
+    </span>
+    <span style="display:flex;align-items:center;gap:4px;">
+      <span style="display:inline-block;width:16px;height:2px;background:{line.color};border-radius:1px;"></span>
+      {line.label}
+    </span>
+  </div>
+</div>