@svgrid/grid 1.2.21 → 1.2.23

package/src/SvCalendar.test.ts

@@ -0,0 +1,211 @@
+/**
+ * Component tests for SvCalendar. Mounts in jsdom and drives real DOM clicks /
+ * keydowns, asserting the emitted selection + navigation. Discriminating: each
+ * checks the actual selected value(s), not just that something rendered.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvCalendar from './SvCalendar.svelte'
+
+type Mounted = { target: HTMLElement; destroy: () => void }
+
+function mountCal(props: Record<string, unknown>): Mounted {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvCalendar, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+const dayButton = (target: HTMLElement, label: string) =>
+  Array.from(target.querySelectorAll<HTMLButtonElement>('.sv-cal__day')).find(
+    (b) => b.textContent?.trim() === label && !b.classList.contains('is-outside'),
+  )
+
+describe('SvCalendar render', () => {
+  it('renders the seeded month title and a 6x7 grid', () => {
+    const { target, destroy } = mountCal({ value: new Date(2026, 5, 15) })
+    try {
+      expect(target.querySelector('.sv-cal__title')?.textContent).toContain('2026')
+      const days = target.querySelectorAll('.sv-cal__day')
+      expect(days.length).toBe(42) // 6 weeks x 7
+    } finally {
+      destroy()
+    }
+  })
+
+  it('marks the selected day', () => {
+    const { target, destroy } = mountCal({ value: new Date(2026, 5, 15) })
+    try {
+      const sel = target.querySelector('.sv-cal__day.is-selected')
+      expect(sel?.textContent?.trim()).toBe('15')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('shows week numbers when enabled', () => {
+    const { target, destroy } = mountCal({ value: new Date(2026, 5, 15), weekNumbers: true, firstDayOfWeek: 1 })
+    try {
+      expect(target.querySelectorAll('.sv-cal__wk').length).toBe(6)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvCalendar selection', () => {
+  it('emits the clicked day (mode one)', () => {
+    let got: Date[] = []
+    const { target, destroy } = mountCal({ value: new Date(2026, 5, 15), onChange: (d: Date[]) => (got = d) })
+    try {
+      dayButton(target, '20')!.click()
+      flushSync()
+      expect(got).toHaveLength(1)
+      expect(got[0]!.getDate()).toBe(20)
+      expect(got[0]!.getMonth()).toBe(5)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('range mode: two clicks emit the inclusive span', () => {
+    let got: Date[] = []
+    const { target, destroy } = mountCal({
+      value: null,
+      selectionMode: 'range',
+      displayMode: 'month',
+      onChange: (d: Date[]) => (got = d),
+    })
+    try {
+      // Seed view to a known month by selecting from it.
+      const cal = mountCal({ value: new Date(2026, 5, 1), selectionMode: 'range', onChange: (d: Date[]) => (got = d) })
+      dayButton(cal.target, '3')!.click()
+      flushSync()
+      dayButton(cal.target, '6')!.click()
+      flushSync()
+      expect(got.map((d) => d.getDate())).toEqual([3, 4, 5, 6])
+      cal.destroy()
+    } finally {
+      destroy()
+    }
+  })
+
+  it('does not select a disabled (out-of-range) day', () => {
+    let calls = 0
+    const { target, destroy } = mountCal({
+      value: new Date(2026, 5, 15),
+      min: new Date(2026, 5, 10),
+      onChange: () => (calls += 1),
+    })
+    try {
+      const five = dayButton(target, '5')
+      expect(five?.disabled).toBe(true)
+      five?.click()
+      flushSync()
+      expect(calls).toBe(0)
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvCalendar navigation', () => {
+  it('prev/next steps the month', () => {
+    const { target, destroy } = mountCal({ value: new Date(2026, 5, 15) })
+    try {
+      const [prev, , next] = target.querySelectorAll<HTMLButtonElement>('.sv-cal__nav, .sv-cal__title')
+      // next button is the 2nd .sv-cal__nav; grab by aria-label
+      target.querySelector<HTMLButtonElement>('[aria-label="Next"]')!.click()
+      flushSync()
+      expect(target.querySelector('.sv-cal__title')?.textContent?.toLowerCase()).toContain('july')
+      target.querySelector<HTMLButtonElement>('[aria-label="Previous"]')!.click()
+      target.querySelector<HTMLButtonElement>('[aria-label="Previous"]')!.click()
+      flushSync()
+      expect(target.querySelector('.sv-cal__title')?.textContent?.toLowerCase()).toContain('may')
+      void prev; void next
+    } finally {
+      destroy()
+    }
+  })
+
+  it('title drills month -> year -> decade', () => {
+    const { target, destroy } = mountCal({ value: new Date(2026, 5, 15) })
+    try {
+      const title = () => target.querySelector<HTMLButtonElement>('.sv-cal__title')!
+      title().click() // -> year
+      flushSync()
+      expect(target.querySelectorAll('.sv-cal__cell').length).toBe(12) // 12 months
+      title().click() // -> decade
+      flushSync()
+      expect(title().textContent).toContain('2020 - 2029')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('year mode: clicking a month drills back to that month', () => {
+    const { target, destroy } = mountCal({ value: new Date(2026, 5, 15) })
+    try {
+      target.querySelector<HTMLButtonElement>('.sv-cal__title')!.click() // year mode
+      flushSync()
+      const jan = Array.from(target.querySelectorAll<HTMLButtonElement>('.sv-cal__cell'))[0]!
+      jan.click()
+      flushSync()
+      expect(target.querySelector('.sv-cal__title')?.textContent?.toLowerCase()).toContain('january')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('steps the month with animation enabled (animation never blocks navigation)', () => {
+    const { target, destroy } = mountCal({ value: new Date(2026, 5, 15), animate: 'slide' })
+    try {
+      target.querySelector<HTMLButtonElement>('[aria-label="Next"]')!.click()
+      flushSync()
+      expect(target.querySelector('.sv-cal__title')?.textContent?.toLowerCase()).toContain('july')
+    } finally {
+      destroy()
+    }
+  })
+})
+
+describe('SvCalendar presets + tooltips', () => {
+  it('renders preset buttons and applies a range preset', () => {
+    let got: Date[] = []
+    const { target, destroy } = mountCal({
+      value: null,
+      selectionMode: 'range',
+      presets: [
+        { label: 'First five', value: [new Date(2026, 5, 1), new Date(2026, 5, 5)] },
+        { label: 'Just the 10th', value: new Date(2026, 5, 10) },
+      ],
+      onChange: (d: Date[]) => (got = d),
+    })
+    try {
+      const buttons = Array.from(target.querySelectorAll<HTMLButtonElement>('.sv-cal__preset'))
+      expect(buttons.map((b) => b.textContent?.trim())).toEqual(['First five', 'Just the 10th'])
+      buttons[0]!.click()
+      flushSync()
+      expect(got.map((d) => d.getDate())).toEqual([1, 2, 3, 4, 5])
+      buttons[1]!.click()
+      flushSync()
+      expect(got.map((d) => d.getDate())).toEqual([10])
+    } finally {
+      destroy()
+    }
+  })
+
+  it('sets a native title tooltip only on matching days', () => {
+    const { target, destroy } = mountCal({
+      value: new Date(2026, 5, 15),
+      dateTooltip: (d: Date) => (d.getDate() === 20 && d.getMonth() === 5 ? 'Release day' : undefined),
+    })
+    try {
+      expect(dayButton(target, '20')?.title).toBe('Release day')
+      expect(dayButton(target, '10')?.title).toBe('')
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/SvCheckBox.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  /**
+   * SvCheckBox - a themed checkbox with an indeterminate state and optional
+   * label. Parity: Smart `smart-check-box`. Controlled via `checked` + `onChange`.
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    checked?: boolean
+    indeterminate?: boolean
+    onChange?: (checked: boolean) => void
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    name?: string
+    value?: string
+    ariaLabel?: string
+    children?: Snippet
+  }
+
+  let {
+    checked = false,
+    indeterminate = false,
+    onChange,
+    disabled = false,
+    size = 'md',
+    name,
+    value,
+    ariaLabel,
+    children,
+  }: Props = $props()
+
+  function toggle() {
+    if (disabled) return
+    onChange?.(indeterminate ? true : !checked)
+  }
+</script>
+
+<label class="sv-check sv-check--{size}" class:is-disabled={disabled}>
+  <button
+    type="button"
+    role="checkbox"
+    class="sv-check__box"
+    class:is-checked={checked && !indeterminate}
+    class:is-indeterminate={indeterminate}
+    aria-checked={indeterminate ? 'mixed' : checked}
+    aria-label={ariaLabel ?? (children ? undefined : 'checkbox')}
+    {disabled}
+    onclick={toggle}
+  >
+    {#if indeterminate}
+      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" /></svg>
+    {:else if checked}
+      <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    {/if}
+  </button>
+  {#if children}<span class="sv-check__label">{@render children()}</span>{/if}
+  {#if name}<input type="hidden" {name} value={checked ? (value ?? 'true') : ''} />{/if}
+</label>
+
+<style>
+  .sv-check {
+    --_accent: var(--sg-accent, #2563eb);
+    --_sz: 18px;
+    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
+    font: inherit; font-size: 13px; color: var(--sg-fg, #0f172a);
+  }
+  .sv-check--sm { --_sz: 15px; font-size: 12px; }
+  .sv-check--lg { --_sz: 22px; font-size: 15px; }
+  .sv-check.is-disabled { opacity: 0.55; cursor: not-allowed; }
+  .sv-check__box {
+    width: var(--_sz); height: var(--_sz); flex: none; padding: 0; cursor: inherit;
+    display: grid; place-items: center;
+    background: var(--sg-input-bg, #fff); color: var(--sg-on-accent, #fff);
+    border: 1.5px solid var(--sg-border, #cbd5e1); border-radius: 5px; transition: background 0.12s, border-color 0.12s;
+  }
+  .sv-check__box svg { width: 100%; height: 100%; }
+  .sv-check__box.is-checked, .sv-check__box.is-indeterminate {
+    background: var(--_accent); border-color: var(--_accent);
+  }
+  .sv-check__box:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>

package/src/SvColorInput.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  /**
+   * SvColorInput - a color swatch that opens a portalled popover with a hex
+   * field, a native picker, and a preset palette. Parity: Smart `smart-color-input`.
+   * Emits a hex string. Popover escapes the grid scroll container via popover.ts.
+   */
+  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+
+  type Props = {
+    value?: string
+    onChange?: (hex: string) => void
+    disabled?: boolean
+    readonly?: boolean
+    /** Preset swatches. */
+    palette?: string[]
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    autoOpen?: boolean
+  }
+
+  const DEFAULT_PALETTE = [
+    '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981', '#14b8a6',
+    '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899',
+    '#f43f5e', '#64748b', '#0f172a', '#ffffff',
+  ]
+
+  let {
+    value = '#3b82f6',
+    onChange,
+    disabled = false,
+    readonly = false,
+    palette = DEFAULT_PALETTE,
+    name,
+    size = 'md',
+    ariaLabel,
+    autoOpen = false,
+  }: Props = $props()
+
+  const isInteractive = $derived(!disabled && !readonly)
+  let open = $state(false)
+  let hexDraft = $state('')
+  let triggerEl = $state<HTMLButtonElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  const normalized = $derived(normalizeHex(value) ?? '#000000')
+
+  function normalizeHex(h: string): string | null {
+    let s = h.trim()
+    if (!s.startsWith('#')) s = '#' + s
+    if (/^#[0-9a-fA-F]{3}$/.test(s)) s = '#' + s.slice(1).split('').map((c) => c + c).join('')
+    return /^#[0-9a-fA-F]{6}$/.test(s) ? s.toLowerCase() : null
+  }
+
+  function updatePos() {
+    if (!triggerEl) return
+    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 210, minWidth: 200 })
+  }
+  function openPanel() {
+    if (!isInteractive || open) return
+    hexDraft = normalized
+    open = true
+    updatePos()
+  }
+  function toggle() { open ? (open = false) : openPanel() }
+
+  function pick(hex: string) {
+    const n = normalizeHex(hex)
+    if (n) onChange?.(n)
+  }
+  function commitHex() {
+    const n = normalizeHex(hexDraft)
+    if (n) onChange?.(n)
+    else hexDraft = normalized
+  }
+
+  $effect(() => {
+    if (!open) return
+    const reposition = () => updatePos()
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    const onDown = (e: PointerEvent) => {
+      const t = e.target as Node | null
+      if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return
+      open = false
+    }
+    document.addEventListener('pointerdown', onDown, true)
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+      document.removeEventListener('pointerdown', onDown, true)
+    }
+  })
+
+  function focusOpen(node: HTMLButtonElement) {
+    if (!autoOpen) return
+    node.focus(); openPanel()
+  }
+</script>
+
+<button
+  type="button"
+  bind:this={triggerEl}
+  class="sv-color sv-color--{size}"
+  class:is-disabled={disabled}
+  aria-haspopup="dialog"
+  aria-expanded={open}
+  aria-label={ariaLabel ?? `Color ${normalized}`}
+  disabled={!isInteractive}
+  onclick={toggle}
+  use:focusOpen
+>
+  <span class="sv-color__swatch" style:background={normalized}></span>
+  <span class="sv-color__hex">{normalized}</span>
+</button>
+
+{#if open}
+  <div
+    class="sv-color__panel"
+    bind:this={panelEl}
+    use:portalToBody
+    style:position="fixed"
+    style:top={`${panelRect.top}px`}
+    style:left={`${panelRect.left}px`}
+    role="dialog"
+    aria-label="Choose color"
+  >
+    <div class="sv-color__top">
+      <input class="sv-color__native" type="color" value={normalized} oninput={(e) => pick((e.currentTarget as HTMLInputElement).value)} aria-label="Color picker" />
+      <input
+        class="sv-color__field"
+        type="text"
+        bind:value={hexDraft}
+        spellcheck="false"
+        aria-label="Hex value"
+        onblur={commitHex}
+        onkeydown={(e) => { if (e.key === 'Enter') commitHex() }}
+      />
+    </div>
+    <div class="sv-color__palette">
+      {#each palette as c (c)}
+        <button
+          type="button"
+          class="sv-color__chip"
+          class:is-active={normalizeHex(c) === normalized}
+          style:background={c}
+          aria-label={c}
+          onclick={() => { pick(c); open = false }}
+        ></button>
+      {/each}
+    </div>
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={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--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:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+  .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; }
+
+  :global(.sv-color__panel) {
+    z-index: 2147483647; width: 208px; padding: 12px;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
+  }
+  :global(.sv-color__top) { display: flex; gap: 8px; margin-bottom: 10px; }
+  :global(.sv-color__native) { width: 36px; height: 34px; padding: 0; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; background: none; cursor: pointer; }
+  :global(.sv-color__field) {
+    flex: 1; min-width: 0; height: 34px; padding: 0 10px; font: inherit; font-size: 13px;
+    border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); outline: none;
+  }
+  :global(.sv-color__palette) { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
+  :global(.sv-color__chip) { width: 100%; aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(0,0,0,0.12); cursor: pointer; padding: 0; }
+  :global(.sv-color__chip.is-active) { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 1px; }
+</style>

package/src/SvComboBox.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  /**
+   * SvComboBox - an editable combobox: type to filter a portalled list, pick an
+   * option (value must come from the list). Parity: Smart `smart-combo-box`.
+   * Controlled via `value` + `onChange`. On blur, unmatched text reverts.
+   */
+  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { filterOptions, type ListOption } from './list-option'
+
+  type Props = {
+    options: ReadonlyArray<ListOption>
+    value?: string | number | null
+    onChange?: (value: string | number | null) => void
+    placeholder?: string
+    disabled?: boolean
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    autoOpen?: boolean
+  }
+
+  let { options, value = null, onChange, placeholder = 'Select…', disabled = false, name, size = 'md', ariaLabel, autoOpen = false }: Props = $props()
+
+  let open = $state(false)
+  let query = $state('')
+  let active = $state(0)
+  let editing = $state(false)
+  let inputEl = $state<HTMLInputElement | null>(null)
+  let fieldEl = $state<HTMLDivElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  const selected = $derived(options.find((o) => o.value === value) ?? null)
+  const filtered = $derived(editing ? filterOptions(options, query) : [...options])
+  const shownText = $derived(editing ? query : selected?.label ?? '')
+
+  function updatePos() {
+    if (!fieldEl) return
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(filtered.length, 8) * 34 + 8 })
+  }
+  function openPanel() { if (disabled || open) return; open = true; active = 0; updatePos() }
+  function close(revert = true) {
+    open = false; editing = false
+    if (revert) query = selected?.label ?? ''
+  }
+  function pick(o: ListOption | undefined) {
+    if (!o || o.disabled) return
+    onChange?.(o.value); query = o.label; editing = false; open = false; inputEl?.blur()
+  }
+  function onInput(e: Event) {
+    query = (e.currentTarget as HTMLInputElement).value
+    editing = true; active = 0
+    if (!open) openPanel(); else updatePos()
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (disabled) return
+    if (!open && (e.key === 'ArrowDown')) { e.preventDefault(); editing = true; openPanel(); return }
+    if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(active + 1, filtered.length - 1) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(active - 1, 0) }
+    else if (e.key === 'Enter') { e.preventDefault(); pick(filtered[active]) }
+    else if (e.key === 'Escape') { e.preventDefault(); close() }
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${active}"]`)?.scrollIntoView({ block: 'nearest' }))
+  }
+  function onFocus() { editing = true; query = selected?.label ?? ''; openPanel() }
+  function onBlur() { /* outside-click effect handles close+revert */ }
+
+  $effect(() => {
+    if (!open) return
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
+    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (fieldEl?.contains(t) || panelEl?.contains(t))) return; close() }
+    document.addEventListener('pointerdown', od, true)
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
+  })
+  $effect(() => { if (!editing) query = selected?.label ?? '' })
+  function focusOpen(node: HTMLInputElement) { if (autoOpen) { node.focus() } }
+</script>
+
+<div bind:this={fieldEl} class="sv-combo sv-combo--{size}" class:is-open={open} class:is-disabled={disabled}>
+  <input
+    bind:this={inputEl}
+    class="sv-combo__input"
+    type="text"
+    role="combobox"
+    aria-expanded={open}
+    aria-controls="combo-list"
+    aria-autocomplete="list"
+    value={shownText}
+    {placeholder}
+    {disabled}
+    aria-label={ariaLabel}
+    oninput={onInput}
+    onfocus={onFocus}
+    onblur={onBlur}
+    onkeydown={onKeydown}
+    use:focusOpen
+  />
+  <button type="button" class="sv-combo__chev" tabindex="-1" aria-label="Toggle" onclick={() => (open ? close() : (inputEl?.focus(), openPanel()))} {disabled}>
+    <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>
+</div>
+
+{#if open}
+  <div bind:this={panelEl} id="combo-list" class="sv-ddl__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="listbox">
+    {#each filtered as opt, i (opt.value)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+      <div class="sv-ddl__opt" class:is-active={i === active} class:is-selected={opt.value === value} class:is-disabled={opt.disabled} role="option" tabindex="-1" aria-selected={opt.value === value} data-idx={i} onclick={() => pick(opt)} onpointermove={() => { if (!opt.disabled) active = i }}>{opt.label}</div>
+    {:else}
+      <div class="sv-ddl__empty">No matches</div>
+    {/each}
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+
+<style>
+  .sv-combo {
+    --_accent: var(--sg-accent, #2563eb);
+    display: inline-flex; align-items: center; width: 200px;
+    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);
+  }
+  .sv-combo--sm { height: 28px; font-size: 12px; }
+  .sv-combo--md { height: 34px; font-size: 13px; }
+  .sv-combo--lg { height: 40px; font-size: 15px; }
+  .sv-combo.is-open, .sv-combo:focus-within { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 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: 0 4px 0 10px; }
+  .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; }
+</style>