@svgrid/grid 2.1.22 → 2.2.0

package/dist/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/dist/SvMenuList.svelte.d.ts

@@ -1,17 +1,6 @@
-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;
-};
+export type { MenuItem } from './menu-item';
 import { type EditorDir } from './editor-contract';
+import type { MenuItem } from './menu-item';
 type $$ComponentProps = {
     items: ReadonlyArray<MenuItem>;
     /** Close the WHOLE menu (a leaf was chosen, Escape, or outside-click). */

package/dist/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/dist/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}