@w5-ui/svelte 0.1.0

package/src/lib/components/ContourPlot.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  export interface ContourPoint {
+    x: number;
+    y: number;
+  }
+
+  export let points: ContourPoint[] = [];
+  export let xRange: [number, number] | undefined = undefined;
+  export let yRange: [number, number] | undefined = undefined;
+  export let height = 200;
+  export let bandwidth = 3.5;
+  export let color = '#006FFF';
+  export let ariaLabel = 'Contour plot';
+
+  const VW = 340;
+  const PAD_L = 28;
+  const PAD_R = 8;
+  const PAD_T = 8;
+  const PAD_B = 20;
+  const GW = 38;
+  const GH = 28;
+  const LEVELS = [0.12, 0.30, 0.54, 0.78];
+
+  function buildGrid(pts: Array<{ gx: number; gy: number }>, bw: number): number[][] {
+    const bw2 = bw * bw;
+    const g: number[][] = Array.from({ length: GH + 1 }, () => new Array(GW + 1).fill(0));
+    for (let r = 0; r <= GH; r++) {
+      for (let c = 0; c <= GW; c++) {
+        let d = 0;
+        for (const p of pts) {
+          const dx = c - p.gx, dy = r - p.gy;
+          d += Math.exp(-0.5 * (dx * dx + dy * dy) / bw2);
+        }
+        g[r][c] = d;
+      }
+    }
+    let mx = 0;
+    for (const row of g) for (const v of row) if (v > mx) mx = v;
+    if (mx > 0) for (const row of g) for (let c = 0; c < row.length; c++) row[c] /= mx;
+    return g;
+  }
+
+  function edgeCross(v0: number, v1: number, t: number): number {
+    const d = v1 - v0;
+    return Math.abs(d) < 1e-9 ? 0.5 : Math.max(0, Math.min(1, (t - v0) / d));
+  }
+
+  type P = [number, number];
+
+  function marchCell(
+    tl: number, tr: number, bl: number, br: number, t: number
+  ): Array<[P, P]> {
+    const a = tl >= t ? 1 : 0;
+    const b = tr >= t ? 1 : 0;
+    const c = bl >= t ? 1 : 0;
+    const d = br >= t ? 1 : 0;
+    const T = (): P => [edgeCross(tl, tr, t), 0];
+    const R = (): P => [1, edgeCross(tr, br, t)];
+    const B = (): P => [edgeCross(bl, br, t), 1];
+    const L = (): P => [0, edgeCross(tl, bl, t)];
+    switch ((a << 3) | (b << 2) | (c << 1) | d) {
+      case 0: case 15: return [];
+      case 1:  return [[R(), B()]];
+      case 2:  return [[B(), L()]];
+      case 3:  return [[L(), R()]];
+      case 4:  return [[T(), R()]];
+      case 5:  return [[T(), B()]];
+      case 6: { const m = (tl+tr+bl+br)/4; return m >= t ? [[T(),L()],[R(),B()]] : [[T(),R()],[L(),B()]]; }
+      case 7:  return [[T(), L()]];
+      case 8:  return [[T(), L()]];
+      case 9: { const m = (tl+tr+bl+br)/4; return m >= t ? [[T(),R()],[L(),B()]] : [[T(),L()],[R(),B()]]; }
+      case 10: return [[T(), B()]];
+      case 11: return [[T(), R()]];
+      case 12: return [[L(), R()]];
+      case 13: return [[B(), L()]];
+      case 14: return [[R(), B()]];
+    }
+    return [];
+  }
+
+  $: PW = VW - PAD_L - PAD_R;
+  $: PH = height - PAD_T - PAD_B;
+  $: xs = points.map((p) => p.x);
+  $: ys = points.map((p) => p.y);
+  $: xMin = xRange ? xRange[0] : (xs.length ? Math.min(...xs) : 0);
+  $: xMax = xRange ? xRange[1] : (xs.length ? Math.max(...xs) : 1);
+  $: yMin = yRange ? yRange[0] : (ys.length ? Math.min(...ys) : 0);
+  $: yMax = yRange ? yRange[1] : (ys.length ? Math.max(...ys) : 1);
+  $: xSpan = xMax - xMin || 1;
+  $: ySpan = yMax - yMin || 1;
+
+  $: gridPts = points.map((p) => ({
+    gx: ((p.x - xMin) / xSpan) * GW,
+    gy: (1 - (p.y - yMin) / ySpan) * GH,
+  }));
+  $: grid = buildGrid(gridPts, bandwidth);
+  $: cellW = PW / GW;
+  $: cellH = PH / GH;
+
+  function svgX(col: number, lx: number): number { return PAD_L + (col + lx) * cellW; }
+  function svgY(row: number, ly: number): number { return PAD_T + (row + ly) * cellH; }
+  function tyY(v: number): number { return PAD_T + (1 - (v - yMin) / ySpan) * PH; }
+  function txX(v: number): number { return PAD_L + ((v - xMin) / xSpan) * PW; }
+
+  $: yTicks = [yMin, (yMin + yMax) / 2, yMax];
+  $: xTicks = [xMin, (xMin + xMax) / 2, xMax];
+
+  $: levelLines = LEVELS.map((t, li) => {
+    const opacity = 0.28 + li * 0.18;
+    const sw = 0.55 + li * 0.28;
+    const lines: Array<{ key: string; x1: number; y1: number; x2: number; y2: number }> = [];
+    for (let r = 0; r < GH; r++) {
+      for (let col = 0; col < GW; col++) {
+        const segs = marchCell(
+          grid[r][col], grid[r][col + 1],
+          grid[r + 1][col], grid[r + 1][col + 1], t
+        );
+        segs.forEach(([[lx0, ly0], [lx1, ly1]], si) => {
+          lines.push({
+            key: `${r}-${col}-${si}`,
+            x1: svgX(col, lx0), y1: svgY(r, ly0),
+            x2: svgX(col, lx1), y2: svgY(r, ly1),
+          });
+        });
+      }
+    }
+    return { opacity, sw, lines };
+  });
+</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">
+      {#each yTicks as v, i (i)}
+        <line x1={PAD_L} y1={tyY(v)} x2={PAD_L + PW} y2={tyY(v)} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+        <text x={PAD_L - 4} y={tyY(v) + 3} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{Math.round(v)}</text>
+      {/each}
+
+      {#each points as p, i (i)}
+        <circle
+          cx={PAD_L + ((p.x - xMin) / xSpan) * PW}
+          cy={PAD_T + (1 - (p.y - yMin) / ySpan) * PH}
+          r="1.5"
+          fill={color}
+          opacity="0.2"
+        />
+      {/each}
+
+      {#each levelLines as { opacity, sw, lines }, li (li)}
+        {#each lines as s (s.key)}
+          <line
+            x1={s.x1} y1={s.y1} x2={s.x2} y2={s.y2}
+            stroke={color} stroke-width={sw} opacity={opacity}
+            stroke-linecap="round"
+          />
+        {/each}
+      {/each}
+
+      {#each xTicks as v, i (i)}
+        <text x={txX(v)} y={height - 4} fill="#6E7079" font-size="8" text-anchor="middle" font-family="inherit">{Math.round(v)}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/CopyButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  export let text: string;
+  export let label: string = 'Copy';
+
+  let copied = false;
+  let timer: ReturnType<typeof setTimeout>;
+
+  function handleCopy() {
+    navigator.clipboard.writeText(text).then(() => {
+      copied = true;
+      clearTimeout(timer);
+      timer = setTimeout(() => { copied = false; }, 2000);
+    });
+  }
+</script>
+
+<button
+  type="button"
+  class="copy-btn {copied ? 'copy-btn--done' : ''}"
+  aria-label={copied ? 'Copied!' : label}
+  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>

package/src/lib/components/CorrelationMatrix.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  export let labels: string[] = [];
+  export let data: number[][] = [];
+  export let cellSize: number = 52;
+  export let ariaLabel: string = 'Correlation matrix';
+
+  const LABEL_W = 68;
+  const LABEL_H = 26;
+  const DARK = [26, 29, 43];
+  const BLUE = [0, 111, 255];
+  const RED  = [255, 59, 48];
+
+  function lerp(a: number, b: number, t: number): number {
+    return Math.round(a + (b - a) * t);
+  }
+
+  function cellColor(v: number): string {
+    const t = Math.max(0, Math.min(1, Math.abs(v)));
+    const [r0, g0, b0] = DARK;
+    if (v >= 0) {
+      const [r1, g1, b1] = BLUE;
+      return `rgb(${lerp(r0, r1, t)},${lerp(g0, g1, t)},${lerp(b0, b1, t)})`;
+    }
+    const [r1, g1, b1] = RED;
+    return `rgb(${lerp(r0, r1, t)},${lerp(g0, g1, t)},${lerp(b0, b1, t)})`;
+  }
+
+  $: n = labels.length;
+  $: svgW = LABEL_W + n * cellSize;
+  $: svgH = LABEL_H + n * cellSize;
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {svgW} {svgH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each labels as label, j (j)}
+      <text
+        x={LABEL_W + j * cellSize + cellSize / 2}
+        y={LABEL_H - 4}
+        text-anchor="middle"
+        font-size="9"
+        fill="#A4A7B5"
+        font-family="inherit"
+      >{label}</text>
+    {/each}
+
+    {#each labels as label, i (i)}
+      <text
+        x={LABEL_W - 4}
+        y={LABEL_H + i * cellSize + cellSize / 2}
+        text-anchor="end"
+        dominant-baseline="middle"
+        font-size="9"
+        fill="#A4A7B5"
+        font-family="inherit"
+      >{label}</text>
+    {/each}
+
+    {#each data as row, i (i)}
+      {#each row as v, j (`${i}-${j}`)}
+        {@const x = LABEL_W + j * cellSize}
+        {@const y = LABEL_H + i * cellSize}
+        <g>
+          <rect
+            x={x + 1}
+            y={y + 1}
+            width={cellSize - 2}
+            height={cellSize - 2}
+            fill={cellColor(v)}
+            rx="3"
+          />
+          <text
+            x={x + cellSize / 2}
+            y={y + cellSize / 2}
+            text-anchor="middle"
+            dominant-baseline="middle"
+            font-size="10"
+            fill={Math.abs(v) >= 0.5 ? '#fff' : '#A4A7B5'}
+            font-family="inherit"
+            font-weight={i === j ? '700' : '400'}
+          >{v.toFixed(2)}</text>
+        </g>
+      {/each}
+    {/each}
+  </svg>
+</div>

package/src/lib/components/CountUp.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+
+  export let from: number = 0;
+  export let to: number;
+  export let duration: number = 1200;
+  export let decimals: number = 0;
+  export let prefix: string = '';
+  export let suffix: string = '';
+  export let separator: string = ',';
+  let klass: string = '';
+  export { klass as class };
+
+  let current = from;
+  let rafId: number;
+
+  function easeOut(t: number) { return 1 - Math.pow(1 - t, 3); }
+
+  function fmt(n: number) {
+    const fixed = n.toFixed(decimals);
+    if (!separator) return fixed;
+    const [int, dec] = fixed.split('.');
+    const intFmt = int.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+    return dec !== undefined ? `${intFmt}.${dec}` : intFmt;
+  }
+
+  $: label = `${prefix}${fmt(to)}${suffix}`;
+  $: display = `${prefix}${fmt(current)}${suffix}`;
+
+  onMount(() => {
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduced) { current = to; return; }
+    const t0 = performance.now();
+    const range = to - from;
+    function tick(now: number) {
+      const t = Math.min((now - t0) / duration, 1);
+      current = from + range * easeOut(t);
+      if (t < 1) rafId = requestAnimationFrame(tick);
+    }
+    rafId = requestAnimationFrame(tick);
+  });
+
+  onDestroy(() => { if (rafId) cancelAnimationFrame(rafId); });
+</script>
+
+<span class={klass || undefined}>
+  <span aria-hidden="true">{display}</span>
+  <span class="sr-only">{label}</span>
+</span>

package/src/lib/components/CumulativeDistribution.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  export interface CdfSeries {
+    label: string;
+    color: string;
+    values: number[];
+  }
+
+  export let series: CdfSeries[] = [];
+  export let guides: number[] = [50, 95];
+  export let height: number = 160;
+  export let unit: string = '';
+  export let ariaLabel: string = 'Cumulative distribution chart';
+
+  const W = 400, PL = 38, PR = 12, PT = 14, PB = 28;
+
+  $: allVals = series.flatMap((s) => s.values);
+  $: xMin = allVals.length ? Math.min(...allVals) : 0;
+  $: xMax = allVals.length ? Math.max(...allVals) : 1;
+  $: xRange = (xMax - xMin) || 1;
+  $: cW = W - PL - PR;
+  $: cH = height - PT - PB;
+
+  function toX(v: number) { return PL + ((v - xMin) / xRange) * cW; }
+  function toY(p: number) { return PT + (1 - p) * cH; }
+
+  $: paths = series.map((s) => {
+    const sorted = [...s.values].sort((a, b) => a - b);
+    const n = sorted.length;
+    let d = `M${toX(xMin).toFixed(1)},${toY(0).toFixed(1)}`;
+    sorted.forEach((v, i) => {
+      d += ` H${toX(v).toFixed(1)} V${toY((i + 1) / n).toFixed(1)}`;
+    });
+    d += ` H${toX(xMax).toFixed(1)}`;
+    return { label: s.label, color: s.color, d };
+  });
+
+  $: yTicks = [0, 0.25, 0.5, 0.75, 1].map((p) => ({ y: toY(p), label: `${Math.round(p * 100)}%` }));
+  $: xStep = xRange / 4;
+  $: xTicks = Array.from({ length: 5 }, (_, i) => {
+    const v = xMin + xStep * i;
+    return { x: toX(v), label: `${Math.round(v)}${unit}` };
+  });
+  $: guideLines = guides.map((g) => ({ p: g, y: toY(g / 100) }));
+</script>
+
+{#if allVals.length}
+<div role="img" aria-label={ariaLabel} style="line-height:0;">
+  <svg viewBox="0 0 {W} {height}" width="100%" height={height} aria-hidden="true" focusable="false">
+    {#each yTicks as t (t.label)}
+      <line x1={PL} x2={W - PR} y1={t.y} y2={t.y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each guideLines as g (g.p)}
+      <line x1={PL} x2={W - PR} y1={g.y} y2={g.y} stroke="rgba(255,255,255,0.18)" stroke-width="1" stroke-dasharray="4 3" />
+      <text x={W - PR - 2} y={g.y - 3} text-anchor="end" fill="#6E7079" font-size="9" font-family="inherit">p{g.p}</text>
+    {/each}
+    {#each paths as s (s.label)}
+      <path d={s.d} fill="none" stroke={s.color} stroke-width="2" stroke-linejoin="round" />
+    {/each}
+    {#each yTicks as t (t.label)}
+      <text x={PL - 4} y={t.y + 4} text-anchor="end" fill="#6E7079" font-size="9" font-family="inherit">{t.label}</text>
+    {/each}
+    {#each xTicks as t, i (i)}
+      <text x={t.x} y={height - PB + 14} text-anchor="middle" fill="#6E7079" font-size="9" font-family="inherit">{t.label}</text>
+    {/each}
+  </svg>
+</div>
+{/if}

package/src/lib/components/DatePicker.svelte

@@ -0,0 +1,201 @@
+<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, tick } from 'svelte';
+
+  export let value: Date | null = null;
+  export let placeholder: string = 'Pick a date';
+  export let disabled: boolean = false;
+
+  const dispatch = createEventDispatcher<{ change: Date }>();
+  const uid = `dash-ui-dp-${++counter}`;
+  const calId = `${uid}-cal`;
+  const today = new Date();
+
+  let open = false;
+  let viewYear = value?.getFullYear() ?? today.getFullYear();
+  let viewMonth = value?.getMonth() ?? today.getMonth();
+  let focusIdx = 0;
+  let triggerEl: HTMLButtonElement;
+  let calEl: HTMLDivElement;
+  let dayEls: (HTMLButtonElement | null)[] = Array(42).fill(null);
+
+  $: grid = buildGrid(viewYear, viewMonth);
+  $: label = `${MONTHS[viewMonth]} ${viewYear}`;
+
+  function openCal() {
+    if (disabled) return;
+    const initial = value
+      ? grid.findIndex((d) => isSameDay(d, value!))
+      : grid.findIndex((d) => isSameDay(d, today));
+    focusIdx = Math.max(0, initial);
+    open = true;
+    tick().then(() => dayEls[focusIdx]?.focus());
+  }
+
+  function closeCal() {
+    open = false;
+    triggerEl?.focus();
+  }
+
+  function select(d: Date) {
+    dispatch('change', d);
+    closeCal();
+  }
+
+  function prevMonth() {
+    if (viewMonth === 0) { viewYear -= 1; viewMonth = 11; }
+    else viewMonth -= 1;
+    tick().then(() => dayEls[focusIdx]?.focus());
+  }
+
+  function nextMonth() {
+    if (viewMonth === 11) { viewYear += 1; viewMonth = 0; }
+    else viewMonth += 1;
+    tick().then(() => dayEls[focusIdx]?.focus());
+  }
+
+  function onGridKey(e: KeyboardEvent, idx: number) {
+    let next = idx;
+    if (e.key === 'ArrowRight') { e.preventDefault(); next = idx + 1; }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); next = idx - 1; }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); next = idx + 7; }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); next = idx - 7; }
+    else if (e.key === 'Home') { e.preventDefault(); next = Math.floor(idx / 7) * 7; }
+    else if (e.key === 'End') { e.preventDefault(); next = Math.floor(idx / 7) * 7 + 6; }
+    else if (e.key === 'PageDown') { e.preventDefault(); nextMonth(); return; }
+    else if (e.key === 'PageUp') { e.preventDefault(); prevMonth(); return; }
+    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); select(grid[idx]); return; }
+    else if (e.key === 'Escape') { e.preventDefault(); closeCal(); return; }
+    else if (e.key === 'Tab') { closeCal(); return; }
+    else return;
+    if (next < 0) { prevMonth(); return; }
+    if (next >= grid.length) { nextMonth(); return; }
+    focusIdx = next;
+    tick().then(() => dayEls[focusIdx]?.focus());
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (open && !calEl?.contains(e.target as Node) && !triggerEl?.contains(e.target as Node)) {
+      open = false;
+    }
+  }
+
+  onMount(() => document.addEventListener('mousedown', handleOutside));
+  onDestroy(() => document.removeEventListener('mousedown', handleOutside));
+</script>
+
+<div class="dp-root">
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="btn dp-trigger"
+    aria-haspopup="dialog"
+    aria-expanded={open}
+    aria-controls={open ? calId : undefined}
+    {disabled}
+    on:click={() => open ? closeCal() : openCal()}
+  >
+    <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>
+    {value ? formatDate(value) : placeholder}
+  </button>
+
+  {#if open}
+    <div
+      id={calId}
+      bind:this={calEl}
+      role="dialog"
+      aria-modal="true"
+      aria-label={`Choose date, ${label}`}
+      class="dp-cal"
+    >
+      <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">{label}</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={label}>
+        <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 = grid[idx]}
+                {@const outside = day.getMonth() !== viewMonth}
+                {@const isToday = isSameDay(day, today)}
+                {@const isSelected = value ? isSameDay(day, value) : false}
+                <td role="gridcell" aria-selected={isSelected}>
+                  <button
+                    bind:this={dayEls[idx]}
+                    type="button"
+                    tabindex={idx === focusIdx ? 0 : -1}
+                    class="dp-day{outside ? ' dp-day--outside' : ''}{isToday && !isSelected ? ' dp-day--today' : ''}{isSelected ? ' dp-day--selected' : ''}"
+                    aria-label={day.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
+                    on:keydown={(e) => onGridKey(e, idx)}
+                    on:click={() => select(day)}
+                  >
+                    {day.getDate()}
+                  </button>
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</div>