@svgrid/grid 2.1.22 → 2.2.0

package/src/SvGridSelect.svelte

@@ -153,6 +153,7 @@
     style:top={`${gs.rect.top}px`}
     style:left={`${gs.rect.left}px`}
     style:min-width={`${Math.max(gs.rect.width, 320)}px`}
+    style:max-height={`${gs.rect.maxHeight}px`}
     onkeydown={gs.onPanelKeydown}
   >
     {#if searchable}

package/src/SvGroupCell.svelte

@@ -1,109 +1,109 @@
-<!--
-  Built-in group cell for the server-side group/tree model. Drop it into the
-  grouping column and it draws the expander + indentation for group rows (and an
-  indented leaf value) - no hand-written cell recipe. Pair with `serverGroupRows`
-  to feed `<SvGrid data>`, and wire `onToggle` to the controller's `toggleGroup`.
-
-      cell: (ctx) => renderComponent(SvGroupCell, {
-        row: ctx.row.original, onToggle: ctl.toggleGroup, leafField: 'name',
-      })
--->
-<script lang="ts" generics="TData">
-  import type { ServerDisplayRow } from './server-data-source'
-
-  type GroupGridRow = { __group?: ServerDisplayRow<TData> } & Record<string, unknown>
-  type Props = {
-    /** The grid row from `serverGroupRows` (carries the `__group` marker). */
-    row: GroupGridRow
-    /**
-     * Expand / collapse a group, or load more children. Receives the grid row;
-     * wire to `serverGroupNav(ctl).onToggle` (which drives clicks and keyboard).
-     */
-    onToggle: (row: GroupGridRow) => void
-    /** Field to show for leaf rows in the group column (blank if omitted). */
-    leafField?: string
-    /** Pixels of indentation per level. Default 18. */
-    indent?: number
-  }
-
-  let { row, onToggle, leafField, indent = 18 }: Props = $props()
-  const meta = $derived(row.__group)
-</script>
-
-{#if meta && meta.kind === 'group'}
-  <button
-    type="button"
-    class="sv-group-cell"
-    style={`padding-inline-start: ${meta.level * indent}px`}
-    aria-expanded={meta.expanded}
-    aria-label={meta.expanded ? 'Collapse group' : 'Expand group'}
-    onclick={() => onToggle(row)}
-  >
-    <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">▸</span>
-    <span class="sv-group-key">{meta.key}</span>
-    {#if meta.loading}<span class="sv-group-load" aria-hidden="true">…</span>{/if}
-  </button>
-{:else if meta && meta.kind === 'more'}
-  <button
-    type="button"
-    class="sv-group-more"
-    style={`padding-inline-start: ${meta.level * indent}px`}
-    disabled={meta.loading}
-    onclick={() => onToggle(row)}
-  >
-    {meta.loading ? 'Loading...' : `Load ${meta.remaining} more`}
-  </button>
-{:else if meta && meta.kind === 'footer'}
-  <span class="sv-group-footer" style={`padding-inline-start: ${meta.level * indent}px`}>Total</span>
-{:else if meta && meta.kind === 'skeleton'}
-  <span class="sv-group-skeleton" style={`margin-inline-start: ${meta.level * indent}px`} aria-hidden="true"></span>
-{:else if meta}
-  <span class="sv-group-leaf" style={`padding-inline-start: ${(meta.level + 1) * indent}px`}>
-    {leafField ? (row[leafField] ?? '') : ''}
-  </span>
-{/if}
-
-<style>
-  .sv-group-cell {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    background: none;
-    border: 0;
-    padding: 0;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-  .sv-group-chev {
-    display: inline-block;
-    transition: transform 0.15s;
-    color: var(--sg-muted, #64748b);
-  }
-  .sv-group-chev.open { transform: rotate(90deg); }
-  .sv-group-key { font-weight: 600; }
-  .sv-group-load { color: var(--sg-muted, #64748b); font-size: 12px; }
-  .sv-group-leaf { color: var(--sg-muted, #475569); }
-  .sv-group-more {
-    background: none;
-    border: 0;
-    padding: 0;
-    font: inherit;
-    font-size: 13px;
-    color: var(--sg-accent, #2563eb);
-    cursor: pointer;
-  }
-  .sv-group-more:disabled { color: var(--sg-muted, #64748b); cursor: default; }
-  .sv-group-footer { font-weight: 600; color: var(--sg-muted, #64748b); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
-  .sv-group-skeleton {
-    display: inline-block;
-    width: 60%;
-    height: 10px;
-    border-radius: 5px;
-    background: linear-gradient(90deg, var(--sg-border, #e2e8f0) 25%, var(--sg-header-bg, #f1f5f9) 50%, var(--sg-border, #e2e8f0) 75%);
-    background-size: 200% 100%;
-    animation: sv-group-shimmer 1.2s infinite;
-  }
-  @keyframes sv-group-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
-  @media (prefers-reduced-motion: reduce) { .sv-group-skeleton { animation: none; } }
-</style>
+<!--
+  Built-in group cell for the server-side group/tree model. Drop it into the
+  grouping column and it draws the expander + indentation for group rows (and an
+  indented leaf value) - no hand-written cell recipe. Pair with `serverGroupRows`
+  to feed `<SvGrid data>`, and wire `onToggle` to the controller's `toggleGroup`.
+
+      cell: (ctx) => renderComponent(SvGroupCell, {
+        row: ctx.row.original, onToggle: ctl.toggleGroup, leafField: 'name',
+      })
+-->
+<script lang="ts" generics="TData">
+  import type { ServerDisplayRow } from './server-data-source'
+
+  type GroupGridRow = { __group?: ServerDisplayRow<TData> } & Record<string, unknown>
+  type Props = {
+    /** The grid row from `serverGroupRows` (carries the `__group` marker). */
+    row: GroupGridRow
+    /**
+     * Expand / collapse a group, or load more children. Receives the grid row;
+     * wire to `serverGroupNav(ctl).onToggle` (which drives clicks and keyboard).
+     */
+    onToggle: (row: GroupGridRow) => void
+    /** Field to show for leaf rows in the group column (blank if omitted). */
+    leafField?: string
+    /** Pixels of indentation per level. Default 18. */
+    indent?: number
+  }
+
+  let { row, onToggle, leafField, indent = 18 }: Props = $props()
+  const meta = $derived(row.__group)
+</script>
+
+{#if meta && meta.kind === 'group'}
+  <button
+    type="button"
+    class="sv-group-cell"
+    style={`padding-inline-start: ${meta.level * indent}px`}
+    aria-expanded={meta.expanded}
+    aria-label={meta.expanded ? 'Collapse group' : 'Expand group'}
+    onclick={() => onToggle(row)}
+  >
+    <span class="sv-group-chev" class:open={meta.expanded} aria-hidden="true">▸</span>
+    <span class="sv-group-key">{meta.key}</span>
+    {#if meta.loading}<span class="sv-group-load" aria-hidden="true">…</span>{/if}
+  </button>
+{:else if meta && meta.kind === 'more'}
+  <button
+    type="button"
+    class="sv-group-more"
+    style={`padding-inline-start: ${meta.level * indent}px`}
+    disabled={meta.loading}
+    onclick={() => onToggle(row)}
+  >
+    {meta.loading ? 'Loading...' : `Load ${meta.remaining} more`}
+  </button>
+{:else if meta && meta.kind === 'footer'}
+  <span class="sv-group-footer" style={`padding-inline-start: ${meta.level * indent}px`}>Total</span>
+{:else if meta && meta.kind === 'skeleton'}
+  <span class="sv-group-skeleton" style={`margin-inline-start: ${meta.level * indent}px`} aria-hidden="true"></span>
+{:else if meta}
+  <span class="sv-group-leaf" style={`padding-inline-start: ${(meta.level + 1) * indent}px`}>
+    {leafField ? (row[leafField] ?? '') : ''}
+  </span>
+{/if}
+
+<style>
+  .sv-group-cell {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  .sv-group-chev {
+    display: inline-block;
+    transition: transform 0.15s;
+    color: var(--sg-muted, #64748b);
+  }
+  .sv-group-chev.open { transform: rotate(90deg); }
+  .sv-group-key { font-weight: 600; }
+  .sv-group-load { color: var(--sg-muted, #64748b); font-size: 12px; }
+  .sv-group-leaf { color: var(--sg-muted, #475569); }
+  .sv-group-more {
+    background: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    font-size: 13px;
+    color: var(--sg-accent, #2563eb);
+    cursor: pointer;
+  }
+  .sv-group-more:disabled { color: var(--sg-muted, #64748b); cursor: default; }
+  .sv-group-footer { font-weight: 600; color: var(--sg-muted, #64748b); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
+  .sv-group-skeleton {
+    display: inline-block;
+    width: 60%;
+    height: 10px;
+    border-radius: 5px;
+    background: linear-gradient(90deg, var(--sg-border, #e2e8f0) 25%, var(--sg-header-bg, #f1f5f9) 50%, var(--sg-border, #e2e8f0) 75%);
+    background-size: 200% 100%;
+    animation: sv-group-shimmer 1.2s infinite;
+  }
+  @keyframes sv-group-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+  @media (prefers-reduced-motion: reduce) { .sv-group-skeleton { animation: none; } }
+</style>

package/src/SvListBox.svelte

@@ -5,7 +5,7 @@
    * via `value` (scalar or array) + `onChange`. Scales to huge option sets with
    * `virtual` (fixed-row windowing), and each row can be an `itemTemplate`.
    */
-  import { flushSync, type Snippet } from 'svelte'
+  import { type Snippet } from 'svelte'
   import { groupOptions, hasGroups, type ListOption } from './list-option'
   import { virtualRange, scrollToIndex } from './virtual'
   import { createListbox } from './createListbox.svelte'
@@ -101,17 +101,25 @@
     class:is-invalid={invalid}
     class:is-virtual={useVirtual}
     style:--sv-rows={rows}
-    onscroll={(e) => { scrollTop = e.currentTarget.scrollTop; if (useVirtual) flushSync() }}
+    style:--sv-row-h={`${rowHeight}px`}
+    onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
     bind:clientHeight={viewportH}
     {...lb.rootProps()}
   >
     {#if useVirtual}
-      <!-- Fixed-height sizer establishes the scroll range; rows are absolutely
-           positioned by transform so scrolling never reflows (no flash). -->
-      <li class="sv-listbox__sizer" aria-hidden="true" style:height={`${vr.totalHeight}px`}></li>
+      <!-- Windowing by top/bottom spacers with the visible rows IN FLOW between
+           them (padTop + rows + padBottom always sum to the full height). Plain
+           flow rows (no absolute positioning, no will-change) keep the scroller
+           off its own compositor layer, so a fast jump repaints in step with the
+           scroll instead of showing the blank frame a promoted layer would. The
+           window updates from `scrollTop` state, which Svelte flushes before the
+           next paint - no flushSync (it over-flushes app-wide and, on a fling,
+           starves the very handler that has to keep up with the scroll). -->
+      <li class="sv-listbox__spacer" aria-hidden="true" style:height={`${vr.padTop}px`}></li>
       {#each windowed as opt (opt.value)}
         {@render optionLi(opt, opt.index)}
       {/each}
+      <li class="sv-listbox__spacer" aria-hidden="true" style:height={`${vr.padBottom}px`}></li>
     {:else}
       {#each groupOptions(options) as g (g.group ?? ' ')}
         {#if g.group != null}<li class="sv-listbox__group" role="presentation">{g.group}</li>{/if}
@@ -132,7 +140,6 @@
     class:is-active={lb.isActive(index)}
     class:is-disabled={opt.disabled}
     style:height={`${rowHeight}px`}
-    style:transform={useVirtual ? `translateY(${index * rowHeight}px)` : undefined}
     {...lb.optionProps(index)}
   >
     {#if multiple}<span class="sv-listbox__check" aria-hidden="true">{isSel(opt) ? '✓' : ''}</span>{/if}
@@ -144,7 +151,7 @@
   .sv-listbox {
     --_accent: var(--sg-accent, #2563eb);
     margin: 0; padding: 4px; list-style: none;
-    max-height: calc(var(--sv-rows, 7) * 32px + 8px); overflow-y: auto;
+    max-height: calc(var(--sv-rows, 7) * var(--sv-row-h, 32px) + 8px); overflow-y: auto;
     background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
     border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
     width: 220px; outline: none;
@@ -152,15 +159,30 @@
   .sv-listbox:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
   .sv-listbox.is-invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-listbox.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  /* Pre-promote the scrolling-contents layer at mount so the FIRST scroll
-     doesn't trigger a one-time layer promotion + repaint (the initial flash). */
-  .sv-listbox.is-virtual { position: relative; will-change: scroll-position; }
-  .sv-listbox__sizer { padding: 0; margin: 0; pointer-events: none; }
-  .sv-listbox.is-virtual .sv-listbox__opt {
-    position: absolute; inset-inline: 4px; top: 4px;
+  /* Spacers reserve the off-screen height above/below the windowed rows. They
+     also paint faint per-row skeleton bars: on a fast scrollbar-thumb drag the
+     compositor can reveal this padding before JS re-windows (a drag jumps many
+     rows in one frame - overscan can't cover it), so the user would see blank.
+     The skeleton fills that gap with placeholder rows that the real rows paint
+     over a frame later. Bars are one per `--sv-row-h` band, aligned to the row
+     grid (padTop/padBottom are exact multiples of the row height). */
+  .sv-listbox__spacer {
+    padding: 0; margin: 0; flex: none; pointer-events: none; list-style: none;
+    background-image: linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent calc((var(--sv-row-h, 32px) - 10px) / 2),
+      var(--sg-skeleton, color-mix(in srgb, currentColor 9%, transparent)) calc((var(--sv-row-h, 32px) - 10px) / 2),
+      var(--sg-skeleton, color-mix(in srgb, currentColor 9%, transparent)) calc((var(--sv-row-h, 32px) + 10px) / 2),
+      transparent calc((var(--sv-row-h, 32px) + 10px) / 2),
+      transparent var(--sv-row-h, 32px)
+    );
+    background-size: 62% var(--sv-row-h, 32px);
+    background-repeat: repeat-y;
+    background-position: 12px 0;
   }
   .sv-listbox__opt {
-    display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 0 10px;
+    display: flex; align-items: center; gap: 8px; box-sizing: border-box; flex: none; padding: 0 10px;
     border-radius: 6px; cursor: pointer; font-size: 13px;
   }
   .sv-listbox__opt.is-active { background: var(--sg-row-hover-bg, #f1f5f9); }

package/src/SvMaskedInput.svelte

@@ -27,7 +27,7 @@
   }
 
   let {
-    value = '',
+    value = $bindable(''),
     onChange,
     mask = '',
     placeholder,
@@ -53,7 +53,8 @@
 
   const mi = createMaskedInput({
     value: () => value,
-    onChange: (m, r, c) => onChange?.(m, r, c),
+    // Write the masked `value` (so `bind:value` works) AND fire `onChange`.
+    onChange: (m, r, c) => { value = m; onChange?.(m, r, c) },
     mask: () => mask,
     placeholder: () => placeholder,
     disabled: () => disabled,
@@ -72,7 +73,7 @@
     {#if prefixIcon}<span class="sv-masked__adorn">{@render prefixIcon()}</span>{/if}
     <input class="sv-masked__input" {...mi.inputProps()} />
     {#if clearable && mi.masked && !disabled && !readonly}
-      <button type="button" class="sv-masked__clear" aria-label="Clear" tabindex="-1" onclick={() => onChange?.('', '', false)}>
+      <button type="button" class="sv-masked__clear" aria-label="Clear" tabindex="-1" onclick={() => { value = ''; onChange?.('', '', false) }}>
         <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
       </button>
     {/if}

package/src/SvMenu.svelte

@@ -1,124 +1,124 @@
-<script lang="ts" module>
-  export type { MenuItem } from './SvMenuList.svelte'
-</script>
-
-<script lang="ts">
-  /**
-   * SvMenu - a dropdown / context menu: a trigger opens a portalled, animated
-   * menu surface with submenus, separators, icons, shortcuts and full keyboard
-   * (arrows, Enter, Escape, ArrowRight/Left for submenus). Portals to <body> so it
-   * escapes any clipping. Parity: Smart menu / context-menu.
-   *
-   * ```svelte
-   * <SvMenu items={items} onSelect={(i) => run(i)}>
-   *   {#snippet anchor()}<button>Actions</button>{/snippet}
-   * </SvMenu>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { createDismissableLayer } from './a11y/dismissable'
-  import { getFocusable } from './a11y/focus-trap'
-  import { type EditorDir } from './editor-contract'
-  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
-
-  let {
-    items,
-    open = $bindable(false),
-    onOpenChange,
-    onSelect,
-    ariaLabel,
-    anchor,
-    dir,
-  }: {
-    items: ReadonlyArray<MenuItem>
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    onSelect?: (item: MenuItem) => void
-    ariaLabel?: string
-    anchor?: Snippet
-    /** Text direction (rtl mirrors the submenu chevron + flips ArrowLeft/Right). */
-    dir?: EditorDir
-  } = $props()
-
-  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
-
-  let anchorEl = $state<HTMLSpanElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
-
-  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
-  function toggle() { setOpen(!open) }
-  function updatePos() {
-    if (!anchorEl) return
-    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight: Math.min(items.length, 10) * 34 + 8, minWidth: 180 })
-  }
-  /** Return focus to the trigger. Every dismissal path (Escape, item selection,
-   *  outside-click, Tab) funnels through the effect cleanup below, so this
-   *  fires uniformly instead of dropping focus to <body> on close. */
-  function focusTrigger() {
-    if (!anchorEl) return
-    ;(getFocusable(anchorEl)[0] ?? anchorEl)?.focus?.()
-  }
-
-  $effect(() => {
-    if (!open) return
-    updatePos()
-    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
-    const rp = () => updatePos()
-    window.addEventListener('scroll', rp, true)
-    window.addEventListener('resize', rp)
-    // Outside-click dismissal via the shared layer stack (Escape stays owned by
-    // SvMenuList's keyboard handling, so closeOnEscape is off here).
-    const layer = createDismissableLayer({
-      element: () => [anchorEl, panelEl],
-      onDismiss: () => setOpen(false),
-      closeOnEscape: false,
-    })
-    layer.activate()
-    return () => {
-      window.removeEventListener('scroll', rp, true)
-      window.removeEventListener('resize', rp)
-      layer.release()
-      // Only on an actual close (not a mid-open rerun from e.g. `items` changing).
-      if (!open) focusTrigger()
-    }
-  })
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
-<span
-  bind:this={anchorEl}
-  class="sv-menu__anchor"
-  aria-haspopup="menu"
-  aria-expanded={open}
-  onclick={toggle}
->
-  {@render anchor?.()}
-</span>
-
-{#if open}
-  <div
-    bind:this={panelEl}
-    class="sv-menu"
-    use:portalToBody
-    use:popIn={{ up: rect.openUpward }}
-    style:position="fixed"
-    style:top={`${rect.top}px`}
-    style:left={`${rect.left}px`}
-    dir={resolvedDir}
-    aria-label={ariaLabel}
-  >
-    <SvMenuList {items} onclose={() => setOpen(false)} onselect={(i) => onSelect?.(i)} dir={resolvedDir} />
-  </div>
-{/if}
-
-<style>
-  .sv-menu__anchor { display: inline-flex; }
-  :global(.sv-menu) {
-    z-index: 2147483646; min-width: 180px;
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
-    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
-  }
-</style>
+<script lang="ts" module>
+  export type { MenuItem } from './SvMenuList.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvMenu - a dropdown / context menu: a trigger opens a portalled, animated
+   * menu surface with submenus, separators, icons, shortcuts and full keyboard
+   * (arrows, Enter, Escape, ArrowRight/Left for submenus). Portals to <body> so it
+   * escapes any clipping. Parity: Smart menu / context-menu.
+   *
+   * ```svelte
+   * <SvMenu items={items} onSelect={(i) => run(i)}>
+   *   {#snippet anchor()}<button>Actions</button>{/snippet}
+   * </SvMenu>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { getFocusable } from './a11y/focus-trap'
+  import { type EditorDir } from './editor-contract'
+  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
+
+  let {
+    items,
+    open = $bindable(false),
+    onOpenChange,
+    onSelect,
+    ariaLabel,
+    anchor,
+    dir,
+  }: {
+    items: ReadonlyArray<MenuItem>
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    onSelect?: (item: MenuItem) => void
+    ariaLabel?: string
+    anchor?: Snippet
+    /** Text direction (rtl mirrors the submenu chevron + flips ArrowLeft/Right). */
+    dir?: EditorDir
+  } = $props()
+
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+
+  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
+  function toggle() { setOpen(!open) }
+  function updatePos() {
+    if (!anchorEl) return
+    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight: Math.min(items.length, 10) * 34 + 8, minWidth: 180 })
+  }
+  /** Return focus to the trigger. Every dismissal path (Escape, item selection,
+   *  outside-click, Tab) funnels through the effect cleanup below, so this
+   *  fires uniformly instead of dropping focus to <body> on close. */
+  function focusTrigger() {
+    if (!anchorEl) return
+    ;(getFocusable(anchorEl)[0] ?? anchorEl)?.focus?.()
+  }
+
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    // Outside-click dismissal via the shared layer stack (Escape stays owned by
+    // SvMenuList's keyboard handling, so closeOnEscape is off here).
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnEscape: false,
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+      // Only on an actual close (not a mid-open rerun from e.g. `items` changing).
+      if (!open) focusTrigger()
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+<span
+  bind:this={anchorEl}
+  class="sv-menu__anchor"
+  aria-haspopup="menu"
+  aria-expanded={open}
+  onclick={toggle}
+>
+  {@render anchor?.()}
+</span>
+
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-menu"
+    use:portalToBody
+    use:popIn={{ up: rect.openUpward }}
+    style:position="fixed"
+    style:top={`${rect.top}px`}
+    style:left={`${rect.left}px`}
+    dir={resolvedDir}
+    aria-label={ariaLabel}
+  >
+    <SvMenuList {items} onclose={() => setOpen(false)} onselect={(i) => onSelect?.(i)} dir={resolvedDir} />
+  </div>
+{/if}
+
+<style>
+  .sv-menu__anchor { display: inline-flex; }
+  :global(.sv-menu) {
+    z-index: 2147483646; min-width: 180px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
+  }
+</style>