@svgrid/grid 2.1.22 → 2.2.0

package/src/SvMenu.test.ts

@@ -1,73 +1,97 @@
-/**
- * Component tests for SvMenu: the trigger opens a portalled menu, items/separators
- * render with menu semantics, choosing a leaf fires onSelect + closes, and a
- * submenu opens on pointer-enter.
- */
-import { describe, expect, it, afterEach } from 'vitest'
-import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
-import SvMenu, { type MenuItem } from './SvMenu.svelte'
-
-const anchor = createRawSnippet(() => ({ render: () => `<button class="trigger">Actions</button>` }))
-
-function mountMenu(props: Record<string, unknown>) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  const app = mount(SvMenu, { target, props: { anchor, ...props } as any })
-  flushSync()
-  return { target, destroy: () => { unmount(app); target.remove() } }
-}
-const menu = () => document.querySelector<HTMLElement>('.sv-menu')
-afterEach(() => document.querySelectorAll('.sv-menu').forEach((n) => n.remove()))
-
-describe('SvMenu', () => {
-  const items: MenuItem[] = [
-    { label: 'Cut', shortcut: 'Ctrl+X', onSelect: () => {} },
-    { label: 'Copy', shortcut: 'Ctrl+C' },
-    { separator: true },
-    { label: 'Share', children: [{ label: 'Email' }, { label: 'Link' }] },
-    { label: 'Delete', disabled: true },
-  ]
-
-  it('opens on trigger click with menu/menuitem roles + a separator', () => {
-    const { target, destroy } = mountMenu({ items })
-    try {
-      expect(menu()).toBeNull()
-      target.querySelector<HTMLElement>('.trigger')!.click()
-      flushSync()
-      const m = menu()!
-      expect(m.querySelector('[role="menu"]')).not.toBeNull()
-      expect(m.querySelectorAll('[role="menuitem"]').length).toBe(4) // 4 items, separator excluded
-      expect(m.querySelector('[role="separator"]')).not.toBeNull()
-      expect(m.querySelector('[aria-disabled="true"]')).not.toBeNull()
-    } finally { destroy() }
-  })
-
-  it('choosing a leaf fires onSelect and closes', () => {
-    let chosen: MenuItem | undefined
-    const { target, destroy } = mountMenu({ items, onSelect: (i: MenuItem) => (chosen = i) })
-    try {
-      target.querySelector<HTMLElement>('.trigger')!.click()
-      flushSync()
-      const copy = [...menu()!.querySelectorAll<HTMLElement>('[role="menuitem"]')].find((b) => b.textContent?.includes('Copy'))!
-      copy.click()
-      flushSync()
-      expect(chosen?.label).toBe('Copy')
-      expect(menu()).toBeNull()
-    } finally { destroy() }
-  })
-
-  it('opens a submenu on pointer-enter of a parent item', () => {
-    const { target, destroy } = mountMenu({ items })
-    try {
-      target.querySelector<HTMLElement>('.trigger')!.click()
-      flushSync()
-      const share = [...menu()!.querySelectorAll<HTMLElement>('[role="menuitem"]')].find((b) => b.textContent?.includes('Share'))!
-      expect(share.getAttribute('aria-haspopup')).toBe('menu')
-      share.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
-      flushSync()
-      expect(menu()!.querySelector('.sv-menu__flyout')).not.toBeNull()
-      const sub = [...menu()!.querySelectorAll('[role="menuitem"]')].map((b) => b.textContent)
-      expect(sub.some((t) => t?.includes('Email'))).toBe(true)
-    } finally { destroy() }
-  })
-})
+/**
+ * Component tests for SvMenu: the trigger opens a portalled menu, items/separators
+ * render with menu semantics, choosing a leaf fires onSelect + closes, and a
+ * submenu opens on pointer-enter.
+ */
+import { describe, expect, it, afterEach } from 'vitest'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
+import SvMenu, { type MenuItem } from './SvMenu.svelte'
+
+const anchor = createRawSnippet(() => ({ render: () => `<button class="trigger">Actions</button>` }))
+
+function mountMenu(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvMenu, { target, props: { anchor, ...props } as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+const menu = () => document.querySelector<HTMLElement>('.sv-menu')
+afterEach(() => document.querySelectorAll('.sv-menu').forEach((n) => n.remove()))
+
+describe('SvMenu', () => {
+  const items: MenuItem[] = [
+    { label: 'Cut', shortcut: 'Ctrl+X', onSelect: () => {} },
+    { label: 'Copy', shortcut: 'Ctrl+C' },
+    { separator: true },
+    { label: 'Share', children: [{ label: 'Email' }, { label: 'Link' }] },
+    { label: 'Delete', disabled: true },
+  ]
+
+  it('opens on trigger click with menu/menuitem roles + a separator', () => {
+    const { target, destroy } = mountMenu({ items })
+    try {
+      expect(menu()).toBeNull()
+      target.querySelector<HTMLElement>('.trigger')!.click()
+      flushSync()
+      const m = menu()!
+      expect(m.querySelector('[role="menu"]')).not.toBeNull()
+      expect(m.querySelectorAll('[role="menuitem"]').length).toBe(4) // 4 items, separator excluded
+      expect(m.querySelector('[role="separator"]')).not.toBeNull()
+      expect(m.querySelector('[aria-disabled="true"]')).not.toBeNull()
+    } finally { destroy() }
+  })
+
+  it('choosing a leaf fires onSelect and closes', () => {
+    let chosen: MenuItem | undefined
+    const { target, destroy } = mountMenu({ items, onSelect: (i: MenuItem) => (chosen = i) })
+    try {
+      target.querySelector<HTMLElement>('.trigger')!.click()
+      flushSync()
+      const copy = [...menu()!.querySelectorAll<HTMLElement>('[role="menuitem"]')].find((b) => b.textContent?.includes('Copy'))!
+      copy.click()
+      flushSync()
+      expect(chosen?.label).toBe('Copy')
+      expect(menu()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('ArrowDown moves the roving tab stop and Enter activates via keyboard', () => {
+    let chosen: MenuItem | undefined
+    const { target, destroy } = mountMenu({ items, onSelect: (i: MenuItem) => (chosen = i) })
+    try {
+      target.querySelector<HTMLElement>('.trigger')!.click()
+      flushSync()
+      const btns = () => [...menu()!.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')]
+      const cut = btns().find((b) => b.textContent?.includes('Cut'))!
+      // From nothing focused, ArrowDown lands on the first item, then the next.
+      cut.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      flushSync()
+      cut.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      flushSync()
+      const copy = btns().find((b) => b.textContent?.includes('Copy'))!
+      expect(copy.tabIndex).toBe(0)
+      expect(cut.tabIndex).toBe(-1)
+      // Enter on the focused item activates it and closes the menu.
+      copy.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      flushSync()
+      expect(chosen?.label).toBe('Copy')
+      expect(menu()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('opens a submenu on pointer-enter of a parent item', () => {
+    const { target, destroy } = mountMenu({ items })
+    try {
+      target.querySelector<HTMLElement>('.trigger')!.click()
+      flushSync()
+      const share = [...menu()!.querySelectorAll<HTMLElement>('[role="menuitem"]')].find((b) => b.textContent?.includes('Share'))!
+      expect(share.getAttribute('aria-haspopup')).toBe('menu')
+      share.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
+      flushSync()
+      expect(menu()!.querySelector('.sv-menu__flyout')).not.toBeNull()
+      const sub = [...menu()!.querySelectorAll('[role="menuitem"]')].map((b) => b.textContent)
+      expect(sub.some((t) => t?.includes('Email'))).toBe(true)
+    } finally { destroy() }
+  })
+})

package/src/SvMenuList.svelte

@@ -1,165 +1,117 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte'
-  export type MenuItem = {
-    /** Item text. Omit + set `separator` for a divider. */
-    label?: string
-    separator?: boolean
-    icon?: Snippet
-    /** Right-aligned hint, e.g. a keyboard shortcut. */
-    shortcut?: string
-    disabled?: boolean
-    /** Nested submenu items (renders a flyout). */
-    children?: MenuItem[]
-    onSelect?: () => void
-  }
-</script>
-
-<script lang="ts">
-  /**
-   * SvMenuList - the recursive menu surface behind SvMenu: a WAI-ARIA `menu` with
-   * roving focus, submenus (hover + ArrowRight), separators, icons and shortcuts.
-   * Rendered inside a portalled panel by SvMenu; it self-imports for submenus.
-   */
-  import Self from './SvMenuList.svelte'
-  import { type EditorDir } from './editor-contract'
-
-  let {
-    items,
-    onclose,
-    onselect,
-    submenu = false,
-    oncollapse,
-    dir,
-  }: {
-    items: ReadonlyArray<MenuItem>
-    /** Close the WHOLE menu (a leaf was chosen, Escape, or outside-click). */
-    onclose: () => void
-    /** Report the chosen leaf item. */
-    onselect: (item: MenuItem) => void
-    submenu?: boolean
-    /** Collapse just THIS submenu level (ArrowLeft, or ArrowRight under `rtl`)
-     *  and refocus the item that opened it. Only meaningful when `submenu` is
-     *  true; the root list has nowhere to collapse into. */
-    oncollapse?: () => void
-    /** Text direction; under `rtl` the ArrowRight/ArrowLeft submenu open/close
-     *  keys swap (see createTree.svelte.ts for the reference pattern). */
-    dir?: EditorDir
-  } = $props()
-
-  // Indexes of real (non-separator) items, for roving focus.
-  const focusable = $derived(items.map((it, i) => (it.separator || it.disabled ? -1 : i)).filter((i) => i >= 0))
-  let active = $state(-1)
-  let openSub = $state(-1)
-  let listEl = $state<HTMLDivElement | null>(null)
-
-  function focusItem(i: number) {
-    active = i
-    queueMicrotask(() => listEl?.querySelector<HTMLElement>(`[data-mi="${i}"]`)?.focus())
-  }
-  function move(delta: number) {
-    if (!focusable.length) return
-    const pos = focusable.indexOf(active)
-    const next = focusable[(pos + delta + focusable.length) % focusable.length]
-    if (next != null) { openSub = -1; focusItem(next) }
-  }
-  function choose(item: MenuItem) {
-    if (item.disabled || item.separator) return
-    if (item.children?.length) { openSub = items.indexOf(item); return }
-    item.onSelect?.()
-    onselect(item)
-    onclose()
-  }
-  function onKeydown(e: KeyboardEvent, i: number) {
-    const item = items[i]
-    const rtl = dir === 'rtl'
-    // Open this item's submenu (opposite key under rtl).
-    const openThis = () => { if (item?.children?.length) { e.preventDefault(); openSub = i } }
-    // Collapse just THIS list back into its parent item (opposite key under
-    // rtl) - `oncollapse` is local to this nesting level, unlike `onclose`.
-    const collapseThis = () => { if (submenu) { e.preventDefault(); oncollapse?.() } }
-    switch (e.key) {
-      case 'ArrowDown': e.preventDefault(); move(1); break
-      case 'ArrowUp': e.preventDefault(); move(-1); break
-      case 'Home': e.preventDefault(); focusItem(focusable[0] ?? 0); break
-      case 'End': e.preventDefault(); focusItem(focusable.at(-1) ?? 0); break
-      case 'ArrowRight': (rtl ? collapseThis : openThis)(); break
-      case 'ArrowLeft': (rtl ? openThis : collapseThis)(); break
-      case 'Enter':
-      case ' ': e.preventDefault(); if (item) choose(item); break
-      case 'Escape': e.preventDefault(); onclose(); break
-      // Tab leaves the menu entirely (WAI-ARIA menu button pattern): close the
-      // whole tree rather than trapping focus inside a portalled panel.
-      case 'Tab': onclose(); break
-    }
-  }
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div bind:this={listEl} class="sv-menu__list" class:is-submenu={submenu} role="menu">
-  {#each items as item, i (i)}
-    {#if item.separator}
-      <div class="sv-menu__sep" role="separator"></div>
-    {:else}
-      <div class="sv-menu__itemwrap">
-        <button
-          type="button"
-          class="sv-menu__item"
-          class:is-active={active === i}
-          data-mi={i}
-          role="menuitem"
-          aria-haspopup={item.children?.length ? 'menu' : undefined}
-          aria-expanded={item.children?.length ? openSub === i : undefined}
-          aria-disabled={item.disabled || undefined}
-          disabled={item.disabled}
-          tabindex={active === i || (active === -1 && i === focusable[0]) ? 0 : -1}
-          onpointerenter={() => { if (!item.disabled) { active = i; openSub = item.children?.length ? i : -1 } }}
-          onkeydown={(e) => onKeydown(e, i)}
-          onclick={() => choose(item)}
-        >
-          <span class="sv-menu__icon">{#if item.icon}{@render item.icon()}{/if}</span>
-          <span class="sv-menu__label">{item.label}</span>
-          {#if item.shortcut}<span class="sv-menu__shortcut">{item.shortcut}</span>{/if}
-          {#if item.children?.length}<svg class="sv-menu__chev" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>{/if}
-        </button>
-        {#if item.children?.length && openSub === i}
-          <div class="sv-menu__flyout">
-            <Self
-              items={item.children}
-              {onclose}
-              {onselect}
-              oncollapse={() => { openSub = -1; focusItem(i) }}
-              {dir}
-              submenu
-            />
-          </div>
-        {/if}
-      </div>
-    {/if}
-  {/each}
-</div>
-
-<style>
-  .sv-menu__list { display: flex; flex-direction: column; min-width: 180px; padding: 4px; }
-  .sv-menu__sep { height: 1px; background: var(--sg-border, #e2e8f0); margin: 4px 6px; }
-  .sv-menu__itemwrap { position: relative; }
-  .sv-menu__item {
-    display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
-    padding: 7px 10px; background: none; border: 0; border-radius: 6px; cursor: pointer;
-    font: inherit; font-size: 13px; color: var(--sg-fg, #0f172a); text-align: start;
-    transition: background 0.1s;
-  }
-  .sv-menu__item.is-active:not([disabled]), .sv-menu__item:hover:not([disabled]) { background: var(--sg-row-hover-bg, #f1f5f9); }
-  .sv-menu__item:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; }
-  .sv-menu__item[disabled] { opacity: 0.45; cursor: default; }
-  .sv-menu__icon { display: inline-flex; width: 16px; flex: none; color: var(--sg-muted, #64748b); }
-  .sv-menu__icon:empty { width: 0; }
-  .sv-menu__label { flex: 1; white-space: nowrap; }
-  .sv-menu__shortcut { color: var(--sg-muted, #94a3b8); font-size: 11.5px; margin-inline-start: 12px; }
-  .sv-menu__chev { color: var(--sg-muted, #94a3b8); flex: none; }
-  .sv-menu[dir='rtl'] .sv-menu__chev, .sv-menu__list.is-submenu .sv-menu__chev { transform: scaleX(-1); }
-  .sv-menu__flyout {
-    position: absolute; top: -5px; inset-inline-start: 100%; z-index: 1;
-    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
-    border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15,23,42,0.32); margin-inline-start: 2px;
-  }
-</style>
+<script lang="ts" module>
+  // MenuItem lives in a plain `.ts` module (breaks a Vite dev import cycle); it is
+  // re-exported here so existing `import { type MenuItem } from './SvMenuList.svelte'`
+  // sites keep working.
+  export type { MenuItem } from './menu-item'
+</script>
+
+<script lang="ts">
+  /**
+   * SvMenuList - the recursive menu surface behind SvMenu: a WAI-ARIA `menu` with
+   * roving focus, submenus (hover + ArrowRight), separators, icons and shortcuts.
+   * Rendered inside a portalled panel by SvMenu; it self-imports for submenus.
+   */
+  import Self from './SvMenuList.svelte'
+  import { type EditorDir } from './editor-contract'
+  import type { MenuItem } from './menu-item'
+  import { createMenu } from './createMenu.svelte'
+
+  let {
+    items,
+    onclose,
+    onselect,
+    submenu = false,
+    oncollapse,
+    dir,
+  }: {
+    items: ReadonlyArray<MenuItem>
+    /** Close the WHOLE menu (a leaf was chosen, Escape, or outside-click). */
+    onclose: () => void
+    /** Report the chosen leaf item. */
+    onselect: (item: MenuItem) => void
+    submenu?: boolean
+    /** Collapse just THIS submenu level (ArrowLeft, or ArrowRight under `rtl`)
+     *  and refocus the item that opened it. Only meaningful when `submenu` is
+     *  true; the root list has nowhere to collapse into. */
+    oncollapse?: () => void
+    /** Text direction; under `rtl` the ArrowRight/ArrowLeft submenu open/close
+     *  keys swap (see createTree.svelte.ts for the reference pattern). */
+    dir?: EditorDir
+  } = $props()
+
+  let listEl = $state<HTMLDivElement | null>(null)
+
+  // Roving focus, submenu open/collapse and the full keyboard contract live in
+  // the shared headless core; this component only renders + drives real DOM
+  // focus (the core stays DOM-free). See createMenu.svelte.ts.
+  const menu = createMenu({
+    items: () => items,
+    onSelect: (item) => onselect(item),
+    onClose: () => onclose(),
+    submenu: () => submenu,
+    onCollapse: () => oncollapse?.(),
+    dir: () => dir,
+    focusItem: (i) => queueMicrotask(() => listEl?.querySelector<HTMLElement>(`[data-mi="${i}"]`)?.focus()),
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div bind:this={listEl} class="sv-menu__list" class:is-submenu={submenu} {...menu.listProps()}>
+  {#each items as item, i (i)}
+    {#if item.separator}
+      <div class="sv-menu__sep" role="separator"></div>
+    {:else}
+      <div class="sv-menu__itemwrap">
+        <button
+          type="button"
+          class="sv-menu__item"
+          class:is-active={menu.isActive(i)}
+          {...menu.itemProps(i)}
+        >
+          <span class="sv-menu__icon">{#if item.icon}{@render item.icon()}{/if}</span>
+          <span class="sv-menu__label">{item.label}</span>
+          {#if item.shortcut}<span class="sv-menu__shortcut">{item.shortcut}</span>{/if}
+          {#if item.children?.length}<svg class="sv-menu__chev" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>{/if}
+        </button>
+        {#if item.children?.length && menu.isSubOpen(i)}
+          <div class="sv-menu__flyout">
+            <Self
+              items={item.children}
+              {onclose}
+              {onselect}
+              oncollapse={() => menu.focus(i)}
+              {dir}
+              submenu
+            />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .sv-menu__list { display: flex; flex-direction: column; min-width: 180px; padding: 4px; }
+  .sv-menu__sep { height: 1px; background: var(--sg-border, #e2e8f0); margin: 4px 6px; }
+  .sv-menu__itemwrap { position: relative; }
+  .sv-menu__item {
+    display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
+    padding: 7px 10px; background: none; border: 0; border-radius: 6px; cursor: pointer;
+    font: inherit; font-size: 13px; color: var(--sg-fg, #0f172a); text-align: start;
+    transition: background 0.1s;
+  }
+  .sv-menu__item.is-active:not([disabled]), .sv-menu__item:hover:not([disabled]) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-menu__item:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #2563eb)); outline-offset: -2px; }
+  .sv-menu__item[disabled] { opacity: 0.45; cursor: default; }
+  .sv-menu__icon { display: inline-flex; width: 16px; flex: none; color: var(--sg-muted, #64748b); }
+  .sv-menu__icon:empty { width: 0; }
+  .sv-menu__label { flex: 1; white-space: nowrap; }
+  .sv-menu__shortcut { color: var(--sg-muted, #94a3b8); font-size: 11.5px; margin-inline-start: 12px; }
+  .sv-menu__chev { color: var(--sg-muted, #94a3b8); flex: none; }
+  .sv-menu[dir='rtl'] .sv-menu__chev, .sv-menu__list.is-submenu .sv-menu__chev { transform: scaleX(-1); }
+  .sv-menu__flyout {
+    position: absolute; top: -5px; inset-inline-start: 100%; z-index: 1;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15,23,42,0.32); margin-inline-start: 2px;
+  }
+</style>

package/src/SvModal.svelte

@@ -15,9 +15,7 @@
   import type { Snippet } from 'svelte'
   import { portalToBody } from './popover'
   import { nextEditorId } from './editor-contract'
-  import { createFocusTrap } from './a11y/focus-trap'
-  import { lockScroll } from './a11y/scroll-lock'
-  import { createDismissableLayer } from './a11y/dismissable'
+  import { createOverlay } from './createOverlay.svelte'
 
   type Props = {
     open?: boolean
@@ -55,28 +53,16 @@
 
   function close() { open = false; onClose?.() }
 
-  // Reset transient drag/resize each time it opens, then hand focus, scroll-lock
-  // and Escape/backdrop dismissal to the shared a11y primitives (one tested
-  // implementation, and nested overlays close top-first via the layer stack).
-  $effect(() => {
-    if (!open || !dialogEl) return
-    drag = { x: 0, y: 0 }
-    box = null
-    const trap = createFocusTrap(dialogEl)
-    trap.activate()
-    const unlockScroll = lockScroll()
-    const layer = createDismissableLayer({
-      element: () => dialogEl,
-      onDismiss: (reason) => {
-        if (reason === 'escape' ? closeOnEsc : closeOnBackdrop) close()
-      },
-    })
-    layer.activate()
-    return () => {
-      layer.release()
-      unlockScroll()
-      trap.release()
-    }
+  // Focus trap + scroll lock + Escape/backdrop dismissal come from the shared
+  // headless overlay core; this component resets its transient drag/resize on
+  // open and renders the panel. See createOverlay.svelte.ts.
+  const overlay = createOverlay({
+    open: () => open,
+    getDialog: () => dialogEl,
+    onClose: close,
+    closeOnEsc: () => closeOnEsc,
+    closeOnBackdrop: () => closeOnBackdrop,
+    onOpen: () => { drag = { x: 0, y: 0 }; box = null },
   })
 
   // --- Drag (header) ---------------------------------------------------------
@@ -130,10 +116,7 @@
       bind:this={dialogEl}
       class="sv-modal sv-modal--{size}"
       class:is-resized={!!box}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={title ? titleId : undefined}
-      tabindex="-1"
+      {...overlay.dialogProps({ labelledBy: title ? titleId : undefined })}
       style:transform={`translate(calc(-50% + ${drag.x}px), calc(-50% + ${drag.y}px))`}
       style:width={box ? `${box.w}px` : undefined}
       style:height={box ? `${box.h}px` : undefined}

package/src/SvModal.test.ts

@@ -0,0 +1,82 @@
+/**
+ * Component tests for SvModal: dialog semantics, scroll lock, and Escape /
+ * backdrop dismissal - all inherited from the shared createOverlay core (which
+ * SvDrawer shares), plus the modal's title wiring and closeOnEsc opt-out.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvModal from './SvModal.svelte'
+
+function mountModal(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvModal, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+const dialog = () => document.body.querySelector<HTMLElement>('.sv-modal')
+
+describe('SvModal', () => {
+  it('renders nothing when closed', () => {
+    const { destroy } = mountModal({ open: false })
+    try {
+      expect(dialog()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('renders a modal dialog with the title wired to aria-labelledby', () => {
+    const { destroy } = mountModal({ open: true, title: 'Edit row' })
+    try {
+      const el = dialog()!
+      expect(el.getAttribute('role')).toBe('dialog')
+      expect(el.getAttribute('aria-modal')).toBe('true')
+      expect(el.getAttribute('tabindex')).toBe('-1')
+      const labelledby = el.getAttribute('aria-labelledby')
+      expect(labelledby).toBeTruthy()
+      expect(document.getElementById(labelledby!)?.textContent).toBe('Edit row')
+    } finally { destroy() }
+  })
+
+  it('locks body scroll while open and restores it on close', () => {
+    document.body.style.overflow = 'auto'
+    const { destroy } = mountModal({ open: true })
+    try {
+      expect(document.body.style.overflow).toBe('hidden')
+    } finally {
+      destroy()
+      flushSync()
+      expect(document.body.style.overflow).toBe('auto')
+    }
+  })
+
+  it('closes on Escape and fires onClose', () => {
+    let closed = 0
+    const { destroy } = mountModal({ open: true, onClose: () => closed++ })
+    try {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      flushSync()
+      expect(closed).toBe(1)
+      expect(dialog()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('does not close on Escape when closeOnEsc is false', () => {
+    const { destroy } = mountModal({ open: true, closeOnEsc: false })
+    try {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      flushSync()
+      expect(dialog()).not.toBeNull()
+    } finally { destroy() }
+  })
+
+  it('dismisses on outside (backdrop) pointerdown', () => {
+    const { destroy } = mountModal({ open: true })
+    try {
+      const backdrop = document.body.querySelector<HTMLElement>('.sv-modal__backdrop')!
+      backdrop.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
+      flushSync()
+      expect(dialog()).toBeNull()
+    } finally { destroy() }
+  })
+})

package/src/SvMultiSelect.svelte

@@ -178,6 +178,7 @@
     style:top={`${ms.rect.top}px`}
     style:left={`${ms.rect.left}px`}
     style:min-width={`${ms.rect.width}px`}
+    style:max-height={`${ms.rect.maxHeight}px`}
     onkeydown={ms.onPanelKeydown}
   >
     {#if searchable}