@svgrid/grid 1.2.22 → 1.2.24

package/dist/SvColorInput.svelte

@@ -0,0 +1,160 @@
+<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.
+   *
+   * 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
+    onChange?: (hex: string) => void
+    disabled?: boolean
+    readonly?: boolean
+    /** Preset swatches. */
+    palette?: string[]
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    autoOpen?: boolean
+  }
+
+  let {
+    value = '#3b82f6',
+    onChange,
+    disabled = false,
+    readonly = false,
+    palette,
+    name,
+    size = 'md',
+    ariaLabel,
+    autoOpen = false,
+  }: Props = $props()
+
+  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 })
+
+  function updatePos() {
+    if (!triggerEl) return
+    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 210, minWidth: 200 })
+  }
+
+  $effect(() => {
+    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
+      col.popover.close()
+    }
+    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(); col.popover.show()
+  }
+</script>
+
+<button
+  bind:this={triggerEl}
+  class="sv-color sv-color--{size}"
+  class:is-disabled={disabled}
+  {...col.swatchProps()}
+  use:focusOpen
+>
+  <span class="sv-color__swatch" style:background={col.normalized}></span>
+  <span class="sv-color__hex">{col.normalized}</span>
+</button>
+
+{#if col.popover.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={col.normalized} oninput={(e) => col.pick((e.currentTarget as HTMLInputElement).value)} aria-label="Color picker" />
+      <input
+        class="sv-color__field"
+        type="text"
+        bind:value={col.hexDraft}
+        spellcheck="false"
+        aria-label="Hex value"
+        onblur={col.commitHex}
+        onkeydown={(e) => { if (e.key === 'Enter') col.commitHex() }}
+      />
+    </div>
+    <div class="sv-color__palette">
+      {#each col.palette as c (c)}
+        <button
+          class="sv-color__chip"
+          class:is-active={col.isActive(c)}
+          style:background={c}
+          {...col.chipProps(c)}
+        ></button>
+      {/each}
+    </div>
+  </div>
+{/if}
+{#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--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/dist/SvColorInput.svelte.d.ts

@@ -0,0 +1,15 @@
+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;
+};
+declare const SvColorInput: import("svelte").Component<Props, {}, "">;
+type SvColorInput = ReturnType<typeof SvColorInput>;
+export default SvColorInput;

package/dist/SvComboBox.svelte

@@ -0,0 +1,108 @@
+<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.
+   *
+   * 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 { type ListOption } from './list-option'
+  import { createCombobox } from './createCombobox.svelte'
+
+  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 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 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(combo.filtered.length, 8) * 34 + 8 })
+  }
+
+  // Position + reposition + outside-click close are render concerns (need the DOM).
+  $effect(() => {
+    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; combo.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 (!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={combo.open} class:is-disabled={disabled}>
+  <input
+    bind:this={inputEl}
+    class="sv-combo__input"
+    type="text"
+    {placeholder}
+    {...combo.inputProps()}
+    use:focusOpen
+  />
+  <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 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={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}
+  </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>

package/dist/SvComboBox.svelte.d.ts

@@ -0,0 +1,15 @@
+import { 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;
+};
+declare const SvComboBox: import("svelte").Component<Props, {}, "">;
+type SvComboBox = ReturnType<typeof SvComboBox>;
+export default SvComboBox;

package/dist/SvCountryInput.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  /**
+   * 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 { flagEmoji } from './countries'
+  import { createCountryInput } from './createCountryInput.svelte'
+
+  type Props = {
+    value?: string | null
+    onChange?: (code: string) => void
+    /** Show the dial code beside each country. */
+    showDial?: boolean
+    placeholder?: string
+    disabled?: boolean
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+  }
+
+  let { value = null, onChange, showDial = false, placeholder = 'Select country…', disabled = false, name, size = 'md', ariaLabel }: Props = $props()
+
+  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 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 }) }
+
+  $effect(() => {
+    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; 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} 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>
+    {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
+  {:else}
+    <span class="sv-country__ph">{placeholder}</span>
+  {/if}
+  <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 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" 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={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>
+        </div>
+      {:else}
+        <div class="sv-ddl__empty">No matches</div>
+      {/each}
+    </div>
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+
+<style>
+  .sv-country {
+    --_accent: var(--sg-accent, #2563eb);
+    display: inline-flex; align-items: center; gap: 8px; width: 220px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: left;
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px); padding: 0 10px; cursor: pointer;
+  }
+  .sv-country--sm { height: 28px; font-size: 12px; }
+  .sv-country--md { height: 34px; font-size: 13px; }
+  .sv-country--lg { height: 40px; font-size: 15px; }
+  .sv-country.is-open, .sv-country:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
+  .sv-country.is-disabled { opacity: 0.6; cursor: not-allowed; }
+  .sv-country__flag { font-size: 16px; }
+  .sv-country__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-country__ph { flex: 1; color: var(--sg-muted, #94a3b8); }
+  .sv-country__dial { color: var(--sg-muted, #64748b); font-size: 12px; }
+  .sv-country__chev { color: var(--sg-muted, #64748b); flex: none; }
+
+  :global(.sv-country__panel) {
+    z-index: 2147483647; display: flex; flex-direction: column; max-height: 340px; padding: 6px;
+    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-country__search) {
+    height: 32px; margin-bottom: 4px; padding: 0 10px; font: inherit; font-size: 13px;
+    border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 7px; background: var(--sg-input-bg, #fff); color: inherit; outline: none;
+  }
+  :global(.sv-country__list) { overflow-y: auto; }
+  :global(.sv-country__opt) { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
+  :global(.sv-country__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  :global(.sv-country__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
+</style>

package/dist/SvCountryInput.svelte.d.ts

@@ -0,0 +1,14 @@
+type Props = {
+    value?: string | null;
+    onChange?: (code: string) => void;
+    /** Show the dial code beside each country. */
+    showDial?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg';
+    ariaLabel?: string;
+};
+declare const SvCountryInput: import("svelte").Component<Props, {}, "">;
+type SvCountryInput = ReturnType<typeof SvCountryInput>;
+export default SvCountryInput;