@svgrid/grid 1.2.23 → 1.2.24

package/src/SvColorInput.svelte

@@ -3,8 +3,13 @@
    * 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.
+   *
+   * The styled renderer over the headless `createColorInput` core: hex
+   * normalization, palette, draft field and open/close state come from the core;
+   * the portal + anchored measurement stay here (render concerns).
    */
   import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { createColorInput } from './createColorInput.svelte'
 
   type Props = {
     value?: string
@@ -19,71 +24,46 @@
     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,
+    palette,
     name,
     size = 'md',
     ariaLabel,
     autoOpen = false,
   }: Props = $props()
 
-  const isInteractive = $derived(!disabled && !readonly)
-  let open = $state(false)
-  let hexDraft = $state('')
+  const col = createColorInput({
+    value: () => value,
+    onChange: (hex) => onChange?.(hex),
+    disabled: () => disabled,
+    readonly: () => readonly,
+    palette: () => palette as string[],
+    ariaLabel: () => ariaLabel,
+  })
+
   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
+    if (!col.popover.open) return
+    updatePos()
     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
+      col.popover.close()
     }
     document.addEventListener('pointerdown', onDown, true)
     return () => {
@@ -95,27 +75,22 @@
 
   function focusOpen(node: HTMLButtonElement) {
     if (!autoOpen) return
-    node.focus(); openPanel()
+    node.focus(); col.popover.show()
   }
 </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}
+  {...col.swatchProps()}
   use:focusOpen
 >
-  <span class="sv-color__swatch" style:background={normalized}></span>
-  <span class="sv-color__hex">{normalized}</span>
+  <span class="sv-color__swatch" style:background={col.normalized}></span>
+  <span class="sv-color__hex">{col.normalized}</span>
 </button>
 
-{#if open}
+{#if col.popover.open}
   <div
     class="sv-color__panel"
     bind:this={panelEl}
@@ -127,32 +102,30 @@
     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__native" type="color" value={col.normalized} oninput={(e) => col.pick((e.currentTarget as HTMLInputElement).value)} aria-label="Color picker" />
       <input
         class="sv-color__field"
         type="text"
-        bind:value={hexDraft}
+        bind:value={col.hexDraft}
         spellcheck="false"
         aria-label="Hex value"
-        onblur={commitHex}
-        onkeydown={(e) => { if (e.key === 'Enter') commitHex() }}
+        onblur={col.commitHex}
+        onkeydown={(e) => { if (e.key === 'Enter') col.commitHex() }}
       />
     </div>
     <div class="sv-color__palette">
-      {#each palette as c (c)}
+      {#each col.palette as c (c)}
         <button
-          type="button"
           class="sv-color__chip"
-          class:is-active={normalizeHex(c) === normalized}
+          class:is-active={col.isActive(c)}
           style:background={c}
-          aria-label={c}
-          onclick={() => { pick(c); open = false }}
+          {...col.chipProps(c)}
         ></button>
       {/each}
     </div>
   </div>
 {/if}
-{#if name}<input type="hidden" {name} value={normalized} />{/if}
+{#if name}<input type="hidden" {name} value={col.normalized} />{/if}
 
 <style>
   .sv-color {

package/src/SvComboBox.svelte

@@ -3,9 +3,13 @@
    * 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.
+   *
+   * This is one styled renderer over the headless `createCombobox` core (state +
+   * keyboard + ARIA); only portal/measure/scroll render concerns live here.
    */
   import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
-  import { filterOptions, type ListOption } from './list-option'
+  import { type ListOption } from './list-option'
+  import { createCombobox } from './createCombobox.svelte'
 
   type Props = {
     options: ReadonlyArray<ListOption>
@@ -21,90 +25,64 @@
 
   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 ?? '')
+  const combo = createCombobox({
+    options: () => options,
+    value: () => value,
+    onChange: (v) => onChange?.(v),
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    focusInput: () => inputEl?.focus(),
+    blurInput: () => inputEl?.blur(),
+  })
 
   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()
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(combo.filtered.length, 8) * 34 + 8 })
   }
-  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 */ }
 
+  // Position + reposition + outside-click close are render concerns (need the DOM).
   $effect(() => {
-    if (!open) return
+    if (!combo.open) return
+    updatePos()
     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() }
+    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (fieldEl?.contains(t) || panelEl?.contains(t))) return; combo.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 ?? '' })
+  // Keep the active option scrolled into view (render concern).
+  $effect(() => {
+    if (!combo.open) return
+    const i = combo.activeIndex
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
+  })
   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}>
+<div bind:this={fieldEl} class="sv-combo sv-combo--{size}" class:is-open={combo.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}
+    {...combo.inputProps()}
     use:focusOpen
   />
-  <button type="button" class="sv-combo__chev" tabindex="-1" aria-label="Toggle" onclick={() => (open ? close() : (inputEl?.focus(), openPanel()))} {disabled}>
+  <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>
 </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)}
+{#if combo.open}
+  <div bind:this={panelEl} 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`} {...combo.listboxProps()}>
+    {#each combo.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>
+      <div class="sv-ddl__opt" class:is-active={combo.isActive(i)} class:is-selected={combo.isSelected(opt)} class:is-disabled={opt.disabled} {...combo.optionProps(i)}>{opt.label}</div>
     {:else}
       <div class="sv-ddl__empty">No matches</div>
     {/each}

package/src/SvCountryInput.svelte

@@ -3,9 +3,14 @@
    * SvCountryInput - a searchable country picker (flag + name + dial code).
    * Emits the ISO 3166-1 alpha-2 code. Parity: Smart country-input pattern.
    * Data from countries.ts; popover via popover.ts.
+   *
+   * One styled renderer over the headless `createCountryInput` core (search +
+   * roving active index + keyboard); only portal/measure/focus render concerns
+   * live here.
    */
   import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
-  import { COUNTRIES, COUNTRY_BY_CODE, flagEmoji } from './countries'
+  import { flagEmoji } from './countries'
+  import { createCountryInput } from './createCountryInput.svelte'
 
   type Props = {
     value?: string | null
@@ -21,45 +26,42 @@
 
   let { value = null, onChange, showDial = false, placeholder = 'Select country…', disabled = false, name, size = 'md', ariaLabel }: Props = $props()
 
-  let open = $state(false)
-  let query = $state('')
-  let active = $state(0)
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let searchEl = $state<HTMLInputElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
   let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
 
-  const selected = $derived(value ? COUNTRY_BY_CODE.get(value) ?? null : null)
-  const filtered = $derived(
-    query.trim() === ''
-      ? COUNTRIES
-      : COUNTRIES.filter((c) => c.name.toLowerCase().includes(query.toLowerCase()) || c.dial.includes(query) || c.code.toLowerCase() === query.toLowerCase()),
-  )
+  const ci = createCountryInput({
+    value: () => value,
+    onChange: (c) => onChange?.(c),
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    focusTrigger: () => triggerEl?.focus(),
+  })
+
+  const selected = $derived(ci.selected)
 
   function updatePos() { if (triggerEl) rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 320, minWidth: 240 }) }
-  function openPanel() { if (disabled || open) return; open = true; query = ''; active = 0; updatePos(); queueMicrotask(() => searchEl?.focus()) }
-  function close() { open = false; triggerEl?.focus() }
-  function pick(code: string) { onChange?.(code); open = false; triggerEl?.focus() }
-  function onKeydown(e: KeyboardEvent) {
-    if (!open) 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(); const c = filtered[active]; if (c) pick(c.code) }
-    else if (e.key === 'Escape') { e.preventDefault(); close() }
-    queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${active}"]`)?.scrollIntoView({ block: 'nearest' }))
-  }
 
   $effect(() => {
-    if (!open) return
+    if (!ci.open) return
+    updatePos()
+    queueMicrotask(() => searchEl?.focus())
     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 && (triggerEl?.contains(t) || panelEl?.contains(t))) return; open = false }
+    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; ci.close() }
     document.addEventListener('pointerdown', od, true)
     return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
   })
+  // Keep the active option scrolled into view (render concern).
+  $effect(() => {
+    if (!ci.open) return
+    const i = ci.activeIndex
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
+  })
 </script>
 
-<button bind:this={triggerEl} type="button" class="sv-country sv-country--{size}" class:is-open={open} class:is-disabled={disabled} aria-haspopup="listbox" aria-expanded={open} aria-label={ariaLabel} {disabled} onclick={() => (open ? (open = false) : openPanel())}>
+<button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-open={ci.open} class:is-disabled={disabled} {...ci.triggerProps()}>
   {#if selected}
     <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
     <span class="sv-country__name">{selected.name}</span>
@@ -70,13 +72,13 @@
   <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
 </button>
 
-{#if open}
+{#if ci.open}
   <div bind:this={panelEl} class="sv-country__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
-    <input bind:this={searchEl} class="sv-country__search" type="text" bind:value={query} placeholder="Search countries…" aria-label="Search countries" onkeydown={onKeydown} oninput={() => { active = 0; updatePos() }} />
-    <div class="sv-country__list" role="listbox">
-      {#each filtered as c, i (c.code)}
+    <input bind:this={searchEl} class="sv-country__search" placeholder="Search countries…" {...ci.searchProps()} />
+    <div class="sv-country__list" {...ci.listboxProps()}>
+      {#each ci.filtered as c, i (c.code)}
         <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-        <div class="sv-country__opt" class:is-active={i === active} class:is-selected={c.code === value} role="option" tabindex="-1" aria-selected={c.code === value} data-idx={i} onclick={() => pick(c.code)} onpointermove={() => (active = i)}>
+        <div class="sv-country__opt" class:is-active={ci.isActive(i)} class:is-selected={ci.isSelected(c.code)} {...ci.optionProps(i)}>
           <span class="sv-country__flag" aria-hidden="true">{flagEmoji(c.code)}</span>
           <span class="sv-country__name">{c.name}</span>
           <span class="sv-country__dial">{c.dial}</span>