@w5-ui/svelte 0.1.0 → 0.2.1

package/src/lib/components/CountUp.svelte

@@ -1,17 +1,34 @@
 <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;
+  interface Props {
+    from?: number;
+    to: number;
+    duration?: number;
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    separator?: string;
+    class?: string;
+  }
+
+  let {
+    from = 0,
+    to,
+    duration = 1200,
+    decimals = 0,
+    prefix = '',
+    suffix = '',
+    separator = ',',
+    class: klass = ''
+  }: Props = $props();
+  
+
+  // `current` snapshots `from` once and then animates towards `to`. Live-
+  // tracking `from` would yank the animation back to the prop on every
+  // update.
+  // svelte-ignore state_referenced_locally
+  let current = $state(from);
   let rafId: number;
 
   function easeOut(t: number) { return 1 - Math.pow(1 - t, 3); }
@@ -24,8 +41,8 @@
     return dec !== undefined ? `${intFmt}.${dec}` : intFmt;
   }
 
-  $: label = `${prefix}${fmt(to)}${suffix}`;
-  $: display = `${prefix}${fmt(current)}${suffix}`;
+  let label = $derived(`${prefix}${fmt(to)}${suffix}`);
+  let display = $derived(`${prefix}${fmt(current)}${suffix}`);
 
   onMount(() => {
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

package/src/lib/components/CumulativeDistribution.svelte

@@ -1,29 +1,42 @@
-<script lang="ts">
+<script module lang="ts">
   export interface CdfSeries {
     label: string;
     color: string;
     values: number[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: CdfSeries[];
+    guides?: number[];
+    height?: number;
+    unit?: string;
+    ariaLabel?: string;
+  }
 
-  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';
+  let {
+    series = [],
+    guides = [50, 95],
+    height = 160,
+    unit = '',
+    ariaLabel = 'Cumulative distribution chart'
+  }: Props = $props();
 
   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;
+  let allVals = $derived(series.flatMap((s) => s.values));
+  let xMin = $derived(allVals.length ? Math.min(...allVals) : 0);
+  let xMax = $derived(allVals.length ? Math.max(...allVals) : 1);
+  let xRange = $derived((xMax - xMin) || 1);
+  let cW = $derived(W - PL - PR);
+  let cH = $derived(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) => {
+  let paths = $derived(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)}`;
@@ -32,15 +45,15 @@
     });
     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) => {
+  let yTicks = $derived([0, 0.25, 0.5, 0.75, 1].map((p) => ({ y: toY(p), label: `${Math.round(p * 100)}%` })));
+  let xStep = $derived(xRange / 4);
+  let xTicks = $derived(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) }));
+  }));
+  let guideLines = $derived(guides.map((g) => ({ p: g, y: toY(g / 100) })));
 </script>
 
 {#if allVals.length}

package/src/lib/components/DatePicker.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
   const MONTHS = [
@@ -36,27 +36,34 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy, tick } from 'svelte';
+  import { onMount, onDestroy, tick } from 'svelte';
 
-  export let value: Date | null = null;
-  export let placeholder: string = 'Pick a date';
-  export let disabled: boolean = false;
+  interface Props {
+    value?: Date | null;
+    placeholder?: string;
+    disabled?: boolean;
+    onchange?: (payload: Date) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: Date }>();
+  let { value = null, placeholder = 'Pick a date', disabled = false,
+    onchange,
+  }: Props = $props();
   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);
+  let open = $state(false);
+  // svelte-ignore state_referenced_locally
+  let viewYear = $state(value?.getFullYear() ?? today.getFullYear());
+  // svelte-ignore state_referenced_locally
+  let viewMonth = $state(value?.getMonth() ?? today.getMonth());
+  let focusIdx = $state(0);
+  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let calEl = $state<HTMLDivElement | undefined>(undefined);
+  let dayEls: (HTMLButtonElement | null)[] = $state(Array(42).fill(null));
 
-  $: grid = buildGrid(viewYear, viewMonth);
-  $: label = `${MONTHS[viewMonth]} ${viewYear}`;
+  let grid = $derived(buildGrid(viewYear, viewMonth));
+  let label = $derived(`${MONTHS[viewMonth]} ${viewYear}`);
 
   function openCal() {
     if (disabled) return;
@@ -74,7 +81,7 @@
   }
 
   function select(d: Date) {
-    dispatch('change', d);
+    onchange?.(d);
     closeCal();
   }
 
@@ -129,7 +136,7 @@
     aria-expanded={open}
     aria-controls={open ? calId : undefined}
     {disabled}
-    on:click={() => open ? closeCal() : openCal()}
+    onclick={() => 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" />
@@ -148,13 +155,13 @@
       class="dp-cal"
     >
       <div class="dp-header">
-        <button type="button" class="dp-nav" on:click={prevMonth} aria-label="Previous month">
+        <button type="button" class="dp-nav" onclick={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">
+        <button type="button" class="dp-nav" onclick={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>
@@ -185,8 +192,8 @@
                     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)}
+                    onkeydown={(e) => onGridKey(e, idx)}
+                    onclick={() => select(day)}
                   >
                     {day.getDate()}
                   </button>

package/src/lib/components/DateRangePicker.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
   const MONTHS = [
@@ -33,37 +33,42 @@
     }
     return grid;
   }
-</script>
-
-<script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
 
   export interface DateRange {
     start: Date | null;
     end: Date | null;
   }
+</script>
 
-  export let value: DateRange = { start: null, end: null };
-  export let placeholder: string = 'Select date range';
-  export let disabled: boolean = false;
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+
+  interface Props {
+    value?: DateRange;
+    placeholder?: string;
+    disabled?: boolean;
+    onchange?: (payload: DateRange) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: DateRange }>();
+  let { value = { start: null, end: null }, placeholder = 'Select date range', disabled = false,
+    onchange,
+  }: Props = $props();
   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;
+  let open = $state(false);
+  let picking: Date | null = $state(null);
+  let hoverDate: Date | null = $state(null);
+  let viewYear = $state(today.getFullYear());
+  let viewMonth = $state(today.getMonth());
+  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let dlgEl = $state<HTMLDivElement | undefined>(undefined);
 
-  $: rightMonth = viewMonth === 11 ? 0 : viewMonth + 1;
-  $: rightYear = viewMonth === 11 ? viewYear + 1 : viewYear;
-  $: leftGrid = buildGrid(viewYear, viewMonth);
-  $: rightGrid = buildGrid(rightYear, rightMonth);
+  let rightMonth = $derived(viewMonth === 11 ? 0 : viewMonth + 1);
+  let rightYear = $derived(viewMonth === 11 ? viewYear + 1 : viewYear);
+  let leftGrid = $derived(buildGrid(viewYear, viewMonth));
+  let rightGrid = $derived(buildGrid(rightYear, rightMonth));
 
   function prevMonth() {
     if (viewMonth === 0) { viewYear -= 1; viewMonth = 11; }
@@ -78,12 +83,12 @@
   function handleDayClick(day: Date) {
     if (!picking) {
       picking = day;
-      dispatch('change', { start: day, end: null });
+      onchange?.({ start: day, end: null });
     } else {
       const [s, e] = day < picking ? [day, picking] : [picking, day];
       picking = null;
       hoverDate = null;
-      dispatch('change', { start: s, end: e });
+      onchange?.({ start: s, end: e });
       open = false;
       triggerEl?.focus();
     }
@@ -134,7 +139,7 @@
     aria-expanded={open}
     aria-controls={open ? dlgId : undefined}
     {disabled}
-    on:click={() => { if (open) { open = false; picking = null; } else open = true; }}
+    onclick={() => { 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" />
@@ -144,14 +149,16 @@
   </button>
 
   {#if open}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions - dialog uses keyboard listener for Escape -->
     <div
       id={dlgId}
       bind:this={dlgEl}
       role="dialog"
       aria-modal="true"
       aria-label="Select date range"
+      tabindex="-1"
       class="drp-cal"
-      on:keydown={(e) => {
+      onkeydown={(e) => {
         if (e.key === 'Escape') { e.preventDefault(); open = false; picking = null; triggerEl?.focus(); }
       }}
     >
@@ -159,7 +166,7 @@
         <!-- Left calendar -->
         <div class="drp-month">
           <div class="dp-header">
-            <button type="button" class="dp-nav" on:click={prevMonth} aria-label="Previous month">
+            <button type="button" class="dp-nav" onclick={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>
@@ -187,9 +194,9 @@
                         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; }}
+                        onclick={() => handleDayClick(day)}
+                        onmouseenter={() => { if (picking) hoverDate = day; }}
+                        onmouseleave={() => { if (picking) hoverDate = null; }}
                       >{day.getDate()}</button>
                     </td>
                   {/each}
@@ -203,7 +210,7 @@
           <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">
+            <button type="button" class="dp-nav" onclick={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>
@@ -229,9 +236,9 @@
                         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; }}
+                        onclick={() => handleDayClick(day)}
+                        onmouseenter={() => { if (picking) hoverDate = day; }}
+                        onmouseleave={() => { if (picking) hoverDate = null; }}
                       >{day.getDate()}</button>
                     </td>
                   {/each}

package/src/lib/components/Dendrogram.svelte

@@ -1,10 +1,13 @@
-<script lang="ts">
+<script module lang="ts">
   export interface DendrogramNode {
     id: string;
     label: string;
     children?: DendrogramNode[];
     color?: string;
   }
+</script>
+
+<script lang="ts">
 
   interface PlacedNode {
     id: string;
@@ -90,12 +93,21 @@
     }));
   }
 
-  export let root: DendrogramNode;
-  export let colWidth: number = 130;
-  export let rowHeight: number = 28;
-  export let ariaLabel: string = 'Dendrogram';
+  interface Props {
+    root: DendrogramNode;
+    colWidth?: number;
+    rowHeight?: number;
+    ariaLabel?: string;
+  }
+
+  let {
+    root,
+    colWidth = 130,
+    rowHeight = 28,
+    ariaLabel = 'Dendrogram'
+  }: Props = $props();
 
-  $: ({ svgW, svgH, nodes, links } = compute(root, colWidth, rowHeight));
+  let { svgW, svgH, nodes, links } = $derived(compute(root, colWidth, rowHeight));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;overflow-x:auto">

package/src/lib/components/Donut.svelte

@@ -1,18 +1,32 @@
-<script lang="ts">
+<script module 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;
+</script>
+
+<script lang="ts">
+  interface Props {
+    size?: number;
+    segments?: DonutSegment[];
+    centerValue: string | number;
+    centerLabel: string;
+    trackColor?: string;
+    ariaLabel?: string | undefined;
+  }
+
+  let {
+    size = 96,
+    segments = [],
+    centerValue,
+    centerLabel,
+    trackColor = 'rgba(255,255,255,0.06)',
+    ariaLabel = undefined
+  }: Props = $props();
 
-  $: 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 total = $derived(segments.reduce((s, x) => s + x.value, 0) || 1);
+  let r = $derived((size - 20) / 2);
+  let c = $derived(2 * Math.PI * r);
+  let segDesc = $derived(segments.map((s) => `${s.label} ${Math.round((s.value / total) * 100)}%`).join(', '));
+  let label = $derived(ariaLabel ?? `${centerValue} ${centerLabel}${segDesc ? `: ${segDesc}` : ''}`);
+  let arcs = $derived((() => {
     let cum = 0;
     return segments.map((seg) => {
       const frac = seg.value / total;
@@ -21,7 +35,7 @@
       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;">

package/src/lib/components/DotPlot.svelte

@@ -1,18 +1,33 @@
-<script lang="ts">
+<script module lang="ts">
   export interface DotPlotItem {
     label: string;
     value: number;
     compare?: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: DotPlotItem[];
+    min?: number;
+    max?: number | undefined;
+    unit?: string;
+    valueLegend?: string | undefined;
+    compareLegend?: string | undefined;
+    ariaLabel?: 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';
+  let {
+    items = [],
+    min = 0,
+    max = undefined,
+    unit = '',
+    valueLegend = undefined,
+    compareLegend = undefined,
+    ariaLabel = 'Dot plot'
+  }: Props = $props();
 
   const VW = 380;
   const LABEL_W = 132;
@@ -26,16 +41,16 @@
   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 +
+  let hasCompare = $derived(items.some((it) => it.compare !== undefined));
+  let maxVal = $derived(max ?? Math.max(...items.map((it) => Math.max(it.value, it.compare ?? 0))));
+  let range = $derived(Math.max(maxVal - min, 1));
+  let svgH =
+    $derived(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;
+    (hasCompare && (valueLegend || compareLegend) ? LEG_H + 4 : 0));
+  let ticks = $derived(Array.from({ length: TICKS }, (_, i) => min + (i / (TICKS - 1)) * range));
+  let legY = $derived(PAD_T + items.length * ROW_H + AXIS_H + 4);
 
   function tx(v: number): number {
     return LABEL_W + ((v - min) / range) * TRACK_W;

package/src/lib/components/Drawer.svelte

@@ -2,25 +2,32 @@
   import { tick } from 'svelte';
   import IconButton from './IconButton.svelte';
   import CloseIcon from '../icons/CloseIcon.svelte';
-  export let open: boolean = false;
-  export let title: string;
+  interface Props {
+    open?: boolean;
+    title: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { open = $bindable(false), title, children }: Props = $props();
   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?.();
-  }
+  let panelEl = $state<HTMLDivElement | undefined>(undefined);
+  let prev: HTMLElement | null = $state(null);
+  let wasOpen = $state(false);
+  $effect(() => {
+    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; }
@@ -34,14 +41,14 @@
   }
 </script>
 
-<svelte:window on:keydown={onKeydown} />
+<svelte:window onkeydown={onKeydown} />
 
 <div
   class="drawer-overlay {open ? 'show' : ''}"
-  on:click={() => (open = false)}
+  onclick={() => (open = false)}
   aria-hidden="true"
   role="presentation"
-/>
+></div>
 <div
   bind:this={panelEl}
   class="drawer-panel {open ? 'show' : ''}"
@@ -52,9 +59,9 @@
 >
   <div class="drawer-h">
     <h2 id={titleId}>{title}</h2>
-    <IconButton title="Close" on:click={() => (open = false)}>
+    <IconButton title="Close" onclick={() => (open = false)}>
       <CloseIcon />
     </IconButton>
   </div>
-  <div class="drawer-b"><slot /></div>
+  <div class="drawer-b">{@render children?.()}</div>
 </div>