@svgrid/grid 2.2.16 → 2.2.17

package/src/SvColorInput.svelte

@@ -26,6 +26,8 @@
     autoOpen?: boolean
     /** Override the built-in popover strings. */
     messages?: Partial<ColorMessages>
+    /** Stretch to the container width (otherwise hugs its content). */
+    block?: boolean
   }
 
   let {
@@ -44,8 +46,10 @@
     hint,
     dir,
     id,
+    loading = false,
     autoOpen = false,
     messages,
+    block = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-color')
@@ -100,12 +104,11 @@
   }
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField frame id={uid} {label} {hint} {error} {required} {dir} {size} {invalid} {disabled} {readonly} {loading} {block} width={block ? undefined : 'fit-content'}>
   <button
     bind:this={triggerEl}
-    class="sv-color sv-color--{size}"
+    class="sv-color__trigger"
     class:is-disabled={disabled}
-    class:is-invalid={invalid}
     {...col.swatchProps()}
     use:focusOpen
   >
@@ -153,22 +156,13 @@
 {#if name}<input type="hidden" {name} value={col.normalized} />{/if}
 
 <style>
-  .sv-color {
-    --_accent: var(--sg-accent, #2563eb);
-    display: inline-flex; align-items: center; gap: 8px;
-    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);
-    padding: 0 10px; cursor: pointer; font: inherit;
+  .sv-color__trigger {
+    display: flex; align-items: center; gap: 8px; width: 100%; height: 100%;
+    background: none; border: 0; padding: 0 10px; cursor: pointer; font: inherit; color: inherit;
   }
-  .sv-color--sm { height: 28px; font-size: 12px; }
-  .sv-color--md { height: 34px; font-size: 13px; }
-  .sv-color--lg { height: 40px; font-size: 15px; }
-  .sv-color.is-disabled { opacity: 0.6; cursor: not-allowed; }
-  .sv-color.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-color.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-color:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+  .sv-color__trigger.is-disabled { cursor: not-allowed; }
   .sv-color__swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); flex: none; }
-  .sv-color__hex { font-variant-numeric: tabular-nums; text-transform: lowercase; }
+  .sv-color__hex { font-variant-numeric: tabular-nums; text-transform: lowercase; white-space: nowrap; }
 
   :global(.sv-color__panel) {
     z-index: 2147483647; width: 208px; padding: 12px;

package/src/SvComboBox.svelte

@@ -8,11 +8,13 @@
    * keyboard + ARIA); only portal/measure/scroll render concerns live here.
    */
   import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { startPanelResize } from './panel-resize'
   import { createDismissableLayer } from './a11y/dismissable'
-  import { groupOptions, type ListOption } from './list-option'
+  import { groupOptions, normalizeOptions, type ListOption } from './list-option'
   import SvField from './SvField.svelte'
   import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createCombobox } from './createCombobox.svelte'
+  import type { Snippet } from 'svelte'
 
   /** User-facing strings (localizable via `messages`). */
   type ComboMessages = { noResults: string; loading: string; typeMore: string }
@@ -24,6 +26,11 @@
     onChange?: (value: string | number | null) => void
     placeholder?: string
     autoOpen?: boolean
+    /** Show a clear (x) button when a value is selected. */
+    clearable?: boolean
+    /** Show a bottom drag grip so the user can resize the open panel's height
+     *  (hidden when the panel flips upward, where there is no room to grow). */
+    resizable?: boolean
     /** Load options from a server as the user types (debounced). Disables local
      *  filtering; the returned list is shown as-is. */
     loadOptions?: (query: string) => Promise<ListOption[]>
@@ -33,6 +40,14 @@
     debounce?: number
     /** Override the built-in strings (empty-state / loading text). */
     messages?: Partial<ComboMessages>
+    /** Custom render for each option (receives the ListOption). */
+    item?: Snippet<[ListOption]>
+    /** Content pinned above the option list. */
+    header?: Snippet
+    /** Content pinned below the option list. */
+    footer?: Snippet
+    /** Shown when the (non-loading) list is empty; overrides the default text. */
+    noData?: Snippet
   }
 
   let {
@@ -41,6 +56,9 @@
     onChange,
     placeholder = 'Select…',
     disabled = false,
+    readonly = false,
+    clearable = false,
+    resizable = false,
     name,
     size = 'md',
     ariaLabel,
@@ -51,11 +69,16 @@
     hint,
     dir,
     id,
+    loading: loadingProp = false,
     autoOpen = false,
     loadOptions,
     minLength = 1,
     debounce = 250,
     messages,
+    item,
+    header,
+    footer,
+    noData,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-combo')
@@ -66,6 +89,14 @@
   let fieldEl = $state<HTMLDivElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
   let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+  // User-chosen panel height (px) once they drag the resize grip; null = auto.
+  let userHeight = $state<number | null>(null)
+  // Default comfortable cap (px) before the list scrolls; the grip can grow past it.
+  const DEFAULT_CAP = 288
+  const panelMaxH = $derived(
+    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : Math.min(rect.availHeight, DEFAULT_CAP),
+  )
+  const showGrip = $derived(resizable && !rect.openUpward)
 
   // Remote data source: fetch options as the query changes (debounced).
   let remoteOptions = $state<ListOption[]>([])
@@ -73,13 +104,14 @@
   let searched = $state(false)
   let debTimer: ReturnType<typeof setTimeout> | undefined
   let reqSeq = 0
-  const effectiveOptions = $derived(loadOptions ? remoteOptions : options)
+  const effectiveOptions = $derived(normalizeOptions(loadOptions ? remoteOptions : options))
 
   const combo = createCombobox({
     options: () => effectiveOptions,
     value: () => value,
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
+    readonly: () => readonly,
     ariaLabel: () => ariaLabel,
     localFilter: () => !loadOptions,
     focusInput: () => inputEl?.focus(),
@@ -114,8 +146,20 @@
     // estimatedHeight only picks the flip direction (up vs down); the panel's
     // real max-height comes from availHeight below, so it takes its natural
     // content height (options + group labels) and scrolls only when it truly
-    // overflows the room - never from an estimate that under-counts a row.
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(combo.filtered.length, 8) * 34 + 12 })
+    // overflows the room - never from an estimate that under-counts a row. When
+    // the user has dragged the grip, anchor the flip decision to THAT height.
+    const est = resizable && userHeight != null ? userHeight : Math.min(combo.filtered.length, 8) * 34 + 12
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: est })
+  }
+
+  function startResize(e: PointerEvent) {
+    if (!panelEl) return
+    startPanelResize(e, {
+      startHeight: panelEl.clientHeight,
+      min: 96,
+      max: () => rect.availHeight,
+      onHeight: (h) => { userHeight = h; updatePos() },
+    })
   }
 
   // Position + reposition + outside-click close are render concerns (need the DOM).
@@ -137,7 +181,7 @@
   function focusOpen(node: HTMLInputElement) { if (autoOpen) { node.focus() } }
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} loading={loadingProp || loading}>
   <div bind:this={fieldEl} class="sv-combo sv-combo--{size}" class:is-open={combo.open} class:is-disabled={disabled} class:is-invalid={invalid}>
     <input
       bind:this={inputEl}
@@ -147,6 +191,11 @@
       {...combo.inputProps()}
       use:focusOpen
     />
+    {#if clearable && combo.value != null && !disabled && !readonly}
+      <button type="button" class="sv-combo__clear" tabindex="-1" aria-label="Clear" onclick={() => { combo.clear(); inputEl?.focus() }}>
+        <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}
     <button class="sv-combo__chev" {...combo.triggerProps()}>
       <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
     </button>
@@ -154,7 +203,8 @@
 </SvField>
 
 {#if combo.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${Math.min(rect.availHeight, 288)}px`} {...combo.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null && !rect.openUpward ? `${panelMaxH}px` : undefined} {...combo.listboxProps()}>
+    {#if header}<div class="sv-ddl__header">{@render header()}</div>{/if}
     {#if loading}
       <div class="sv-ddl__empty sv-ddl__loading"><svg class="sv-ddl__spin" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-6.2-8.6" /></svg>{M.loading}</div>
     {:else if loadOptions && !searched && combo.query.trim().length < minLength}
@@ -162,14 +212,23 @@
     {:else if combo.filtered.length}
       {#each groupOptions(combo.filtered) as g (g.group ?? ' ')}
         {#if g.group != null}<div class="sv-ddl__group-label" aria-hidden="true">{g.group}</div>{/if}
-        {#each g.options as opt (opt.value)}
+        {#each g.options as opt (opt.index)}
           <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-          <div class="sv-ddl__opt" class:is-active={combo.isActive(opt.index)} class:is-selected={combo.isSelected(opt)} class:is-disabled={opt.disabled} {...combo.optionProps(opt.index)}>{opt.label}</div>
+          <div class="sv-ddl__opt" class:is-active={combo.isActive(opt.index)} class:is-selected={combo.isSelected(opt)} class:is-disabled={opt.disabled} {...combo.optionProps(opt.index)}>{#if item}{@render item(opt)}{:else}{opt.label}{/if}</div>
         {/each}
       {/each}
+    {:else if noData}
+      {@render noData()}
     {:else}
       <div class="sv-ddl__empty">{M.noResults}</div>
     {/if}
+    {#if footer}<div class="sv-ddl__footer">{@render footer()}</div>{/if}
+    {#if showGrip}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
+        <span class="sv-ddl__grip-dots"></span>
+      </div>
+    {/if}
   </div>
 {/if}
 {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
@@ -189,10 +248,28 @@
   .sv-combo.is-invalid.is-open, .sv-combo.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
   .sv-combo.is-disabled { opacity: 0.6; }
   .sv-combo__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; padding-block: 0; padding-inline: 10px 4px; }
+  .sv-combo__clear { display: grid; place-items: center; width: 22px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
+  .sv-combo__clear:hover { color: var(--sg-danger, #dc2626); }
   .sv-combo__chev { display: grid; place-items: center; width: 28px; align-self: stretch; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; }
   :global(.sv-ddl__empty) { padding: 8px 10px; color: var(--sg-muted, #94a3b8); font-size: 13px; }
+  :global(.sv-ddl__header) { padding: 8px 10px; border-bottom: 1px solid var(--sg-border, #e2e8f0); font-size: 12.5px; color: var(--sg-muted, #64748b); }
+  :global(.sv-ddl__footer) { padding: 8px 10px; border-top: 1px solid var(--sg-border, #e2e8f0); font-size: 12.5px; }
   :global(.sv-ddl__loading) { display: flex; align-items: center; gap: 7px; }
   :global(.sv-ddl__spin) { animation: sv-combo-spin 0.7s linear infinite; }
   @keyframes sv-combo-spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { :global(.sv-ddl__spin) { animation: none; } }
+  /* Bottom resize grip (shared "····" handle - see SvDropDownList / panel-resize). */
+  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
+  :global(.sv-ddl__grip) {
+    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
+    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
+    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 0 0 10px 10px; touch-action: none;
+  }
+  :global(.sv-ddl__grip-dots) {
+    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
+    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
+    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
+  }
+  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
 </style>

package/src/SvCountryInput.svelte

@@ -29,7 +29,7 @@
   }
 
   let {
-    value = null,
+    value = $bindable<string | null>(null),
     onChange,
     showDial = false,
     placeholder = 'Select country…',
@@ -58,7 +58,7 @@
 
   const ci = createCountryInput({
     value: () => value,
-    onChange: (c) => onChange?.(c),
+    onChange: (c) => { value = c; onChange?.(c) },
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
     searchLabel: () => M.search,

package/src/SvDropDownList.svelte

@@ -10,11 +10,13 @@
   import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
   import { startPanelResize } from './panel-resize'
   import { createDismissableLayer } from './a11y/dismissable'
-  import { groupOptions, hasGroups, type ListOption } from './list-option'
-  import { virtualRange, scrollToIndex } from './virtual'
+  import { groupOptions, normalizeOptions, flattenForVirtual, type ListOption, type IndexedOption, type RowHeight } from './list-option'
+  import { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte'
+  import { createJsScroller } from './js-scroller.svelte'
   import SvField from './SvField.svelte'
   import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createDropdownList } from './createDropdownList.svelte'
+  import { untrack, type Snippet } from 'svelte'
 
   type Props = SvEditorProps & {
     options: ReadonlyArray<ListOption>
@@ -24,11 +26,24 @@
     autoOpen?: boolean
     /** Window the option list (render only visible) for large sets. */
     virtual?: boolean
-    /** Fixed option height in px (must match the CSS). Default 34. */
-    rowHeight?: number
+    /** Option height in px - a number, or a per-option function for variable
+     *  heights. Must match the rendered row height. Default 34. */
+    rowHeight?: RowHeight
+    /** Height (px) of a group heading row when virtualized + grouped. Default 28. */
+    groupHeaderHeight?: number
+    /** Max options shown before the panel scrolls (native-select behaviour). Default 8. */
+    maxRows?: number
     /** Show a bottom drag grip so the user can resize the open panel's height
      *  (only while it opens downward). Off by default. */
     resizable?: boolean
+    /** Custom render for each option (receives the ListOption). */
+    item?: Snippet<[ListOption]>
+    /** Content pinned above the option list. */
+    header?: Snippet
+    /** Content pinned below the option list. */
+    footer?: Snippet
+    /** Shown when there are no options. */
+    noData?: Snippet
   }
 
   let {
@@ -37,6 +52,7 @@
     onChange,
     placeholder = 'Select…',
     disabled = false,
+    readonly = false,
     name,
     size = 'md',
     ariaLabel,
@@ -50,18 +66,66 @@
     autoOpen = false,
     virtual = false,
     rowHeight = 34,
+    groupHeaderHeight = 28,
+    maxRows = 8,
     resizable = false,
+    item,
+    header,
+    footer,
+    noData,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-ddl')
   const uid = $derived(id ?? autoId)
 
-  // Virtualization applies to a flat (ungrouped) list.
-  const useVirtual = $derived(virtual && !hasGroups(options))
-  let scrollTop = $state(0)
+  // Tolerate primitive / partial options - normalize so labels render + keys are stable.
+  const norm = $derived(normalizeOptions(options))
+
+  // Virtualization windows the option list (grouped lists too, via the shared
+  // virtualizer + a flattened header/option model with per-row sizes).
+  const useVirtual = $derived(virtual)
   let viewportH = $state(0)
-  const vr = $derived(virtualRange({ scrollTop, viewportHeight: viewportH, rowHeight, count: options.length, overscan: 10 }))
-  const windowed = $derived(useVirtual ? options.slice(vr.start, vr.end).map((o, i) => ({ ...o, index: vr.start + i })) : [])
+  const rowHeightBase = $derived(typeof rowHeight === 'number' ? rowHeight : 34)
+  const flat = $derived(flattenForVirtual(norm, { rowHeight, groupHeaderHeight }))
+  const uniform = $derived(!flat.hasGroups && typeof rowHeight === 'number')
+  const estimateSize = $derived(uniform ? rowHeightBase : (i: number) => flat.sizeAt(i))
+
+  // Generous overscan buffers fast flings; effective viewport never 0 (see SvListBox).
+  const OVERSCAN = 20
+  const effViewport = $derived(viewportH > 0 ? viewportH : Math.max(1, maxRows * rowHeightBase))
+
+  // Seed with the initial (untracked) values so the first paint of the open panel
+  // renders a full window; the effects below keep it synced.
+  const virtualizer = createSvelteVirtualizer(
+    untrack(() => ({ count: flat.entries.length, estimateSize, overscan: OVERSCAN, viewportHeight: effViewport })),
+  )
+  // untrack keeps the virtualizer's internal `version` write out of these
+  // effects' dependencies, so they re-run only on their real inputs.
+  $effect(() => {
+    const count = flat.entries.length
+    const es = estimateSize
+    untrack(() => virtualizer.setOptions({ count, estimateSize: es }))
+  })
+  $effect(() => {
+    const vh = effViewport
+    untrack(() => virtualizer.setViewportHeight(vh))
+  })
+  const vItems = $derived.by(() => {
+    virtualizer.version
+    return virtualizer.getVirtualItems()
+  })
+  const totalSize = $derived.by(() => {
+    virtualizer.version
+    return virtualizer.getTotalSize()
+  })
+  // JS-driven scroll (see SvListBox / js-scroller): no native scroll, so a fast
+  // thumb-drag never flashes the empty panel.
+  const scroller = createJsScroller({
+    virtualizer,
+    totalSize: () => totalSize,
+    viewport: () => effViewport,
+    lineStep: () => rowHeightBase,
+  })
 
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
@@ -75,11 +139,24 @@
   )
   const showGrip = $derived(resizable && !rect.openUpward)
 
+  // The virtual panel uses NO native scroll, so its rows are absolutely
+  // positioned and can't size the panel. Give it an explicit height (content up
+  // to `maxRows`, capped by the resized / bounds-aware ceiling) so the flex
+  // viewport (`.sv-ddl__vp`) has a definite height to fill.
+  const virtualPanelH = $derived(
+    Math.min(
+      Math.min(totalSize, Math.max(rowHeightBase, maxRows * rowHeightBase)) + 8,
+      rect.maxHeight || Number.POSITIVE_INFINITY,
+      resizable && userHeight != null ? panelMaxH : Number.POSITIVE_INFINITY,
+    ),
+  )
+
   const ddl = createDropdownList({
-    options: () => options,
+    options: () => norm,
     value: () => value,
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
+    readonly: () => readonly,
     ariaLabel: () => ariaLabel,
     focusTrigger: () => triggerEl?.focus(),
     id: () => uid,
@@ -94,9 +171,13 @@
   function updatePos() {
     if (!triggerEl) return
     // When the user has resized, anchor to THAT height so the flip decision and
-    // upward top stay correct; otherwise estimate from the option count.
+    // upward top stay correct; otherwise size to the content up to `maxRows` items
+    // (native-select behaviour: no scrollbar until the list exceeds the cap). The
+    // +PANEL_CHROME budgets the panel's own padding (8) + border (2) so a list
+    // that exactly fills `maxRows` is not clipped by the border-box max-height.
+    const PANEL_CHROME = 10
     const estimatedHeight =
-      resizable && userHeight != null ? userHeight : Math.min(options.length, 8) * 34 + 8
+      resizable && userHeight != null ? userHeight : Math.min(norm.length, maxRows) * rowHeightBase + PANEL_CHROME
     rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight })
   }
 
@@ -130,14 +211,15 @@
     layer.activate()
     return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); layer.release() }
   })
-  // Keep the active option scrolled into view (render concern).
+  // Keep the active option scrolled into view (render concern) - via the scroller
+  // (virtual) or scrollIntoView (native non-virtual).
   $effect(() => {
     if (!ddl.open) return
     const i = ddl.activeIndex
     if (useVirtual) {
-      if (!panelEl) return
-      const next = scrollToIndex(i, panelEl.scrollTop, panelEl.clientHeight, rowHeight)
-      if (next !== panelEl.scrollTop) { panelEl.scrollTop = next; scrollTop = next }
+      const flatIdx = flat.optionFlatIndex[i]
+      if (flatIdx == null) return
+      untrack(() => scroller.ensureIndexVisible(flatIdx))
     } else {
       queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
     }
@@ -160,33 +242,56 @@
   </button>
 </SvField>
 
+{#snippet optRow(opt: IndexedOption, h?: number, top?: number)}
+  <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+  <div class="sv-ddl__opt" style:height={h != null ? `${h}px` : undefined} style:transform={top == null ? undefined : `translateY(${top}px)`} class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>
+    {#if item}{@render item(opt)}{:else}{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}{/if}
+  </div>
+{/snippet}
+
 {#if ddl.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" class:is-virtual={useVirtual} class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:--sv-row-h={`${rowHeight}px`} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null ? `${panelMaxH}px` : undefined} onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)} bind:clientHeight={viewportH} {...ddl.listboxProps()}>
-    {#if useVirtual}
-      <div class="sv-ddl__spacer" aria-hidden="true" style:height={`${vr.padTop}px`}></div>
-      {#each windowed as opt (opt.value)}
-        <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-        <div class="sv-ddl__opt" style:height={`${rowHeight}px`} class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
-      {/each}
-      <div class="sv-ddl__spacer" aria-hidden="true" style:height={`${vr.padBottom}px`}></div>
+  <div bind:this={panelEl} class="sv-ddl__panel" class:is-virtual={useVirtual} class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:--sv-row-h={`${rowHeightBase}px`} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={useVirtual ? `${virtualPanelH}px` : resizable && userHeight != null ? `${panelMaxH}px` : undefined} onwheel={useVirtual ? scroller.onWheel : undefined} {...ddl.listboxProps()}>
+    {#if header}<div class="sv-ddl__header">{@render header()}</div>{/if}
+    {#if !norm.length}
+      {#if noData}{@render noData()}{:else}<div class="sv-ddl__empty">No options</div>{/if}
+    {:else if useVirtual}
+      <!-- JS-driven scroller: one clipped viewport holds the windowed rows (moved
+           by scrollOffset) + a custom scrollbar. No native scroll = no async gap
+           = no blank flash on a fast thumb-drag. -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="sv-ddl__vp" bind:clientHeight={viewportH} onpointerdown={scroller.onContentDown} onpointermove={scroller.onContentMove} onpointerup={scroller.onContentUp} onpointercancel={scroller.onContentUp}>
+        {#each vItems as vi (vi.key)}
+          {@const entry = flat.entries[vi.index]}
+          {#if entry?.type === 'group'}
+            <div class="sv-ddl__group-label sv-ddl__group-label--abs" aria-hidden="true" style:height={`${vi.size}px`} style:transform={`translateY(${vi.start - scroller.scrollOffset}px)`}>{entry.label}</div>
+          {:else if entry}
+            {@render optRow(entry.opt, vi.size, vi.start - scroller.scrollOffset)}
+          {/if}
+        {/each}
+        {#if scroller.maxOffset > 0}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="sv-ddl__sb" onpointerdown={scroller.onTrackDown} aria-hidden="true">
+            <div class="sv-ddl__thumb" class:is-dragging={scroller.dragging} style:height={`${scroller.thumbH}px`} style:transform={`translateY(${scroller.thumbTop}px)`} onpointerdown={scroller.onThumbDown} onpointermove={scroller.onThumbMove} onpointerup={scroller.onThumbUp} onpointercancel={scroller.onThumbUp}></div>
+          </div>
+        {/if}
+      </div>
     {:else}
-    {#each groupOptions(options) as g (g.group ?? '')}
+    {#each groupOptions(norm) as g (g.group ?? '')}
       {#if g.group != null}
         <div class="sv-ddl__group" role="group" aria-label={g.group}>
           <div class="sv-ddl__group-label" aria-hidden="true">{g.group}</div>
-          {#each g.options as opt (opt.value)}
-            <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-            <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
+          {#each g.options as opt (opt.index)}
+            {@render optRow(opt)}
           {/each}
         </div>
       {:else}
-        {#each g.options as opt (opt.value)}
-          <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-          <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
+        {#each g.options as opt (opt.index)}
+          {@render optRow(opt)}
         {/each}
       {/if}
     {/each}
     {/if}
+    {#if footer}<div class="sv-ddl__footer">{@render footer()}</div>{/if}
     {#if showGrip}
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
@@ -221,7 +326,18 @@
     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);
   }
-  :global(.sv-ddl__opt) { box-sizing: border-box; display: flex; align-items: center; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
+  /* Virtual panel: a flex column (header / JS-driven viewport / footer / grip)
+     with NO native scroll - the viewport moves its rows by `scrollOffset`. */
+  :global(.sv-ddl__panel.is-virtual) { display: flex; flex-direction: column; overflow: hidden; }
+  :global(.sv-ddl__vp) { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; }
+  :global(.sv-ddl__panel.is-virtual .sv-ddl__opt), :global(.sv-ddl__group-label--abs) { position: absolute; left: 0; right: 0; top: 0; }
+  :global(.sv-ddl__sb) { position: absolute; top: 0; right: 1px; bottom: 0; width: 10px; z-index: 2; }
+  :global(.sv-ddl__thumb) {
+    position: absolute; left: 2px; right: 2px; top: 0; min-height: 24px; border-radius: 4px;
+    background: color-mix(in srgb, currentColor 26%, transparent); cursor: default; touch-action: none;
+  }
+  :global(.sv-ddl__thumb:hover), :global(.sv-ddl__thumb.is-dragging) { background: color-mix(in srgb, currentColor 42%, transparent); }
+  :global(.sv-ddl__opt) { box-sizing: border-box; flex: none; display: flex; align-items: center; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
   /* Color swatch shown before an option's label (option.color) - in both the
      trigger value and the portalled panel options. */
   :global(.sv-ddl__swatch) {
@@ -244,28 +360,15 @@
     background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
   }
   :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
-  /* Faint per-row skeleton so a fast scrollbar-thumb drag reveals placeholder
-     rows in this off-screen padding instead of blank, until JS re-windows. */
-  :global(.sv-ddl__spacer) {
-    padding: 0; margin: 0; flex: none; pointer-events: none;
-    background-image: linear-gradient(
-      to bottom,
-      transparent 0,
-      transparent calc((var(--sv-row-h, 34px) - 10px) / 2),
-      var(--sg-skeleton, color-mix(in srgb, currentColor 9%, transparent)) calc((var(--sv-row-h, 34px) - 10px) / 2),
-      var(--sg-skeleton, color-mix(in srgb, currentColor 9%, transparent)) calc((var(--sv-row-h, 34px) + 10px) / 2),
-      transparent calc((var(--sv-row-h, 34px) + 10px) / 2),
-      transparent var(--sv-row-h, 34px)
-    );
-    background-size: 62% var(--sv-row-h, 34px);
-    background-repeat: repeat-y;
-    background-position: 12px 0;
-  }
   :global(.sv-ddl__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
   :global(.sv-ddl__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
   :global(.sv-ddl__opt.is-disabled) { opacity: 0.4; cursor: not-allowed; }
   :global(.sv-ddl__group-label) {
-    padding: 8px 10px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
-    color: var(--sg-muted, #94a3b8);
+    box-sizing: border-box; padding: 8px 10px 3px; font-size: 10.5px; font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.04em; color: var(--sg-muted, #94a3b8);
+    display: flex; align-items: flex-end;
   }
+  :global(.sv-ddl__empty) { padding: 12px 12px; font-size: 13px; color: var(--sg-muted, #64748b); text-align: center; }
+  :global(.sv-ddl__header) { padding: 8px 10px; border-bottom: 1px solid var(--sg-border, #e2e8f0); font-size: 12.5px; color: var(--sg-muted, #64748b); }
+  :global(.sv-ddl__footer) { padding: 8px 10px; border-top: 1px solid var(--sg-border, #e2e8f0); font-size: 12.5px; }
 </style>