@svgrid/grid 1.2.34 → 2.0.1

package/src/SvCheckBox.svelte

@@ -4,17 +4,15 @@
    * label. Parity: Smart `smart-check-box`. Controlled via `checked` + `onChange`.
    */
   import type { Snippet } from 'svelte'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
   import { createCheckbox } from './createCheckbox.svelte'
 
-  type Props = {
+  type Props = SvEditorProps & {
     checked?: boolean
     indeterminate?: boolean
     onChange?: (checked: boolean) => void
-    disabled?: boolean
-    size?: 'sm' | 'md' | 'lg'
-    name?: string
     value?: string
-    ariaLabel?: string
     children?: Snippet
   }
 
@@ -27,9 +25,18 @@
     name,
     value,
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    hint,
+    dir,
+    id,
     children,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-check')
+  const uid = $derived(id ?? autoId)
+
   // The styled checkbox is just a renderer over the headless core. The label
   // fallback depends on `children` (a render concern), so it is computed here.
   const cb = createCheckbox({
@@ -38,25 +45,32 @@
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
     ariaLabel: () => ariaLabel ?? (children ? undefined : 'checkbox'),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
   })
 </script>
 
-<label class="sv-check sv-check--{size}" class:is-disabled={disabled}>
-  <button
-    class="sv-check__box"
-    class:is-checked={checked && !indeterminate}
-    class:is-indeterminate={indeterminate}
-    {...cb.boxProps()}
-  >
-    {#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>
+<SvField id={uid} {hint} {error} {required} {dir}>
+  <label class="sv-check sv-check--{size}" class:is-disabled={disabled} class:is-invalid={invalid}>
+    <button
+      class="sv-check__box"
+      class:is-checked={checked && !indeterminate}
+      class:is-indeterminate={indeterminate}
+      {...cb.boxProps()}
+    >
+      {#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>
+</SvField>
 
 <style>
   .sv-check {
@@ -78,5 +92,6 @@
   .sv-check__box.is-checked, .sv-check__box.is-indeterminate {
     background: var(--_accent); border-color: var(--_accent);
   }
+  .sv-check.is-invalid .sv-check__box { border-color: var(--sg-danger, #dc2626); }
   .sv-check__box:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
 </style>

package/src/SvChip.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  /**
+   * SvChip - a compact pill for a selected/filter/entity value: an optional
+   * leading avatar/icon, a label, and an optional remove (x) button; optionally
+   * clickable. Larger + more interactive than SvBadge (a static status pill).
+   * Theme-driven. Parity: Smart chip / tag.
+   *
+   * ```svelte
+   * <SvChip removable onRemove={() => drop(tag)}>{tag}</SvChip>
+   * <SvChip variant="accent" onClick={select}>{#snippet leading()}<SvAvatar size="sm" name="Ada" />{/snippet}Ada</SvChip>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Variant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'
+
+  type Props = {
+    variant?: Variant
+    size?: 'sm' | 'md'
+    /** Show a remove (x) button. */
+    removable?: boolean
+    onRemove?: () => void
+    /** Make the chip's label a button. */
+    onClick?: () => void
+    /** Filled solid vs soft tint (default soft). */
+    solid?: boolean
+    disabled?: boolean
+    children?: Snippet
+    /** Leading content (avatar / icon). */
+    leading?: Snippet
+  }
+
+  let {
+    variant = 'neutral',
+    size = 'md',
+    removable = false,
+    onRemove,
+    onClick,
+    solid = false,
+    disabled = false,
+    children,
+    leading,
+  }: Props = $props()
+</script>
+
+<span class="sv-chip sv-chip--{variant} sv-chip--{size}" class:is-solid={solid} class:is-disabled={disabled}>
+  {#if leading}<span class="sv-chip__lead">{@render leading()}</span>{/if}
+  {#if onClick}
+    <button type="button" class="sv-chip__label sv-chip__label--btn" {disabled} onclick={onClick}>{@render children?.()}</button>
+  {:else}
+    <span class="sv-chip__label">{@render children?.()}</span>
+  {/if}
+  {#if removable}
+    <button type="button" class="sv-chip__x" aria-label="Remove" {disabled} onclick={onRemove}>&times;</button>
+  {/if}
+</span>
+
+<style>
+  .sv-chip {
+    --_c: var(--sg-muted, #64748b);
+    display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
+    border-radius: 999px; font-weight: 550; white-space: nowrap; max-width: 100%;
+    color: var(--_c);
+    background: color-mix(in srgb, var(--_c) 13%, transparent);
+    border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent);
+  }
+  .sv-chip.is-solid { color: var(--sg-on-accent, #fff); background: var(--_c); border-color: var(--_c); }
+  .sv-chip.is-disabled { opacity: 0.55; pointer-events: none; }
+  .sv-chip--sm { font-size: 11.5px; padding: 1px 4px 1px 8px; height: 22px; }
+  .sv-chip--md { font-size: 12.5px; padding: 2px 5px 2px 10px; height: 26px; }
+  .sv-chip:not(:has(.sv-chip__x)).sv-chip--sm { padding-inline-end: 8px; }
+  .sv-chip:not(:has(.sv-chip__x)).sv-chip--md { padding-inline-end: 10px; }
+  .sv-chip__lead { display: inline-flex; margin-inline-start: -4px; }
+  .sv-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .sv-chip__label--btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
+  .sv-chip__x {
+    flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
+    background: none; border: 0; color: currentColor; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.7;
+  }
+  .sv-chip__x:hover { opacity: 1; background: color-mix(in srgb, currentColor 20%, transparent); }
+
+  .sv-chip--neutral { --_c: var(--sg-muted, #64748b); }
+  .sv-chip--accent { --_c: var(--sg-accent, #2563eb); }
+  .sv-chip--success { --_c: var(--sg-success, #16a34a); }
+  .sv-chip--warning { --_c: var(--sg-warning, #d97706); }
+  .sv-chip--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-chip--info { --_c: var(--sg-info, #0891b2); }
+</style>

package/src/SvCircularProgress.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  /**
+   * SvCircularProgress - a circular / ring progress indicator (WAI-ARIA
+   * `progressbar`). Determinate (value/max) or `indeterminate` (spinning), with
+   * color intents, sizing/thickness, and an optional center label or `children`
+   * snippet. Theme-driven; respects prefers-reduced-motion.
+   *
+   * ```svelte
+   * <SvCircularProgress value={72} showLabel />
+   * <SvCircularProgress indeterminate size={28} color="accent" />
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    value?: number
+    max?: number
+    indeterminate?: boolean
+    /** Diameter in px. */
+    size?: number
+    /** Ring stroke width in px. */
+    thickness?: number
+    color?: 'accent' | 'success' | 'warning' | 'danger'
+    /** Show a percentage label in the center. */
+    showLabel?: boolean
+    formatLabel?: (value: number, max: number) => string
+    ariaLabel?: string
+    /** Custom center content (overrides showLabel). */
+    children?: Snippet
+  }
+
+  let {
+    value = 0,
+    max = 100,
+    indeterminate = false,
+    size = 48,
+    thickness = 5,
+    color = 'accent',
+    showLabel = false,
+    formatLabel,
+    ariaLabel,
+    children,
+  }: Props = $props()
+
+  const r = $derived((size - thickness) / 2)
+  const circ = $derived(2 * Math.PI * r)
+  const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0)
+  const offset = $derived(circ * (1 - pct / 100))
+  const label = $derived(formatLabel ? formatLabel(value, max) : `${Math.round(pct)}%`)
+</script>
+
+<div
+  class="sv-circ sv-circ--{color}"
+  class:is-indeterminate={indeterminate}
+  style:width={`${size}px`}
+  style:height={`${size}px`}
+  role="progressbar"
+  aria-label={ariaLabel}
+  aria-valuemin={indeterminate ? undefined : 0}
+  aria-valuemax={indeterminate ? undefined : max}
+  aria-valuenow={indeterminate ? undefined : value}
+  aria-valuetext={indeterminate ? undefined : label}
+>
+  <svg class="sv-circ__svg" viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
+    <circle class="sv-circ__track" cx={size / 2} cy={size / 2} r={r} fill="none" stroke-width={thickness} />
+    <circle
+      class="sv-circ__arc"
+      cx={size / 2}
+      cy={size / 2}
+      r={r}
+      fill="none"
+      stroke-width={thickness}
+      stroke-linecap="round"
+      stroke-dasharray={circ}
+      stroke-dashoffset={indeterminate ? circ * 0.7 : offset}
+    />
+  </svg>
+  {#if children}
+    <div class="sv-circ__center">{@render children()}</div>
+  {:else if showLabel && !indeterminate}
+    <div class="sv-circ__center sv-circ__label" style:font-size={`${Math.max(9, size * 0.26)}px`}>{label}</div>
+  {/if}
+</div>
+
+<style>
+  .sv-circ {
+    --_accent: var(--sg-accent, #2563eb);
+    --_c: var(--_accent);
+    position: relative; display: inline-flex; flex: none;
+  }
+  .sv-circ--success { --_c: var(--sg-success, #16a34a); }
+  .sv-circ--warning { --_c: var(--sg-warning, #f59e0b); }
+  .sv-circ--danger { --_c: var(--sg-danger, #dc2626); }
+  .sv-circ__svg { display: block; transform: rotate(-90deg); }
+  .sv-circ__track { stroke: var(--sg-border, #e2e8f0); }
+  .sv-circ__arc { stroke: var(--_c); transition: stroke-dashoffset 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
+  .sv-circ.is-indeterminate .sv-circ__svg { animation: sv-circ-spin 0.9s linear infinite; }
+  .sv-circ.is-indeterminate .sv-circ__arc { transition: none; }
+  @keyframes sv-circ-spin { to { transform: rotate(270deg); } }
+  @media (prefers-reduced-motion: reduce) {
+    .sv-circ.is-indeterminate .sv-circ__svg { animation-duration: 2.4s; }
+    .sv-circ__arc { transition: none; }
+  }
+  .sv-circ__center {
+    position: absolute; inset: 0; display: grid; place-items: center;
+    color: var(--sg-fg, #0f172a);
+  }
+  .sv-circ__label { font-weight: 700; font-variant-numeric: tabular-nums; }
+</style>

package/src/SvColorInput.svelte

@@ -8,20 +8,24 @@
    * 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 { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createColorInput } from './createColorInput.svelte'
 
-  type Props = {
+  /** User-facing strings for the color popover (localizable via `messages`). */
+  type ColorMessages = { dialog: string; picker: string; hex: string }
+  const DEFAULT_MESSAGES: ColorMessages = { dialog: 'Choose color', picker: 'Color picker', hex: 'Hex value' }
+
+  type Props = SvEditorProps & {
     value?: string
     onChange?: (hex: string) => void
-    disabled?: boolean
-    readonly?: boolean
     /** Preset swatches. */
     palette?: string[]
-    name?: string
-    size?: 'sm' | 'md' | 'lg'
-    ariaLabel?: string
     autoOpen?: boolean
+    /** Override the built-in popover strings. */
+    messages?: Partial<ColorMessages>
   }
 
   let {
@@ -33,15 +37,32 @@
     name,
     size = 'md',
     ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
     autoOpen = false,
+    messages,
   }: Props = $props()
 
+  const autoId = nextEditorId('sv-color')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+
   const col = createColorInput({
     value: () => value,
     onChange: (hex) => onChange?.(hex),
     disabled: () => disabled,
     readonly: () => readonly,
     palette: () => palette as string[],
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
     ariaLabel: () => ariaLabel,
   })
 
@@ -60,16 +81,16 @@
     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)
+    const layer = createDismissableLayer({
+      element: () => [triggerEl, panelEl],
+      onDismiss: () => col.popover.close(),
+      closeOnEscape: false,
+    })
+    layer.activate()
     return () => {
       window.removeEventListener('scroll', reposition, true)
       window.removeEventListener('resize', reposition)
-      document.removeEventListener('pointerdown', onDown, true)
+      layer.release()
     }
   })
 
@@ -79,36 +100,40 @@
   }
 </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>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <button
+    bind:this={triggerEl}
+    class="sv-color sv-color--{size}"
+    class:is-disabled={disabled}
+    class:is-invalid={invalid}
+    {...col.swatchProps()}
+    use:focusOpen
+  >
+    <span class="sv-color__swatch" style:background={col.normalized}></span>
+    <span class="sv-color__hex">{col.normalized}</span>
+  </button>
+</SvField>
 
 {#if col.popover.open}
   <div
     class="sv-color__panel"
     bind:this={panelEl}
     use:portalToBody
+    use:popIn={{ up: panelRect.openUpward }}
     style:position="fixed"
     style:top={`${panelRect.top}px`}
     style:left={`${panelRect.left}px`}
     role="dialog"
-    aria-label="Choose color"
+    aria-label={M.dialog}
   >
     <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__native" type="color" value={col.normalized} oninput={(e) => col.pick((e.currentTarget as HTMLInputElement).value)} aria-label={M.picker} />
       <input
         class="sv-color__field"
         type="text"
         bind:value={col.hexDraft}
         spellcheck="false"
-        aria-label="Hex value"
+        aria-label={M.hex}
         onblur={col.commitHex}
         onkeydown={(e) => { if (e.key === 'Enter') col.commitHex() }}
       />
@@ -139,6 +164,8 @@
   .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__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; }

package/src/SvComboBox.svelte

@@ -7,37 +7,106 @@
    * 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 { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { groupOptions, type ListOption } from './list-option'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
   import { createCombobox } from './createCombobox.svelte'
 
-  type Props = {
-    options: ReadonlyArray<ListOption>
+  /** User-facing strings (localizable via `messages`). */
+  type ComboMessages = { noResults: string; loading: string; typeMore: string }
+  const DEFAULT_MESSAGES: ComboMessages = { noResults: 'No matches', loading: 'Loading...', typeMore: 'Type to search' }
+
+  type Props = SvEditorProps & {
+    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
+    /** 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[]>
+    /** Min chars before a remote search fires. Default 1. */
+    minLength?: number
+    /** Debounce (ms) before a remote search fires. Default 250. */
+    debounce?: number
+    /** Override the built-in strings (empty-state / loading text). */
+    messages?: Partial<ComboMessages>
   }
 
-  let { options, value = null, onChange, placeholder = 'Select…', disabled = false, name, size = 'md', ariaLabel, autoOpen = false }: Props = $props()
+  let {
+    options = [],
+    value = null,
+    onChange,
+    placeholder = 'Select…',
+    disabled = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    autoOpen = false,
+    loadOptions,
+    minLength = 1,
+    debounce = 250,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-combo')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
 
   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 })
 
+  // Remote data source: fetch options as the query changes (debounced).
+  let remoteOptions = $state<ListOption[]>([])
+  let loading = $state(false)
+  let searched = $state(false)
+  let debTimer: ReturnType<typeof setTimeout> | undefined
+  let reqSeq = 0
+  const effectiveOptions = $derived(loadOptions ? remoteOptions : options)
+
   const combo = createCombobox({
-    options: () => options,
+    options: () => effectiveOptions,
     value: () => value,
     onChange: (v) => onChange?.(v),
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
+    localFilter: () => !loadOptions,
     focusInput: () => inputEl?.focus(),
     blurInput: () => inputEl?.blur(),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+
+  // Debounced remote search driven by the combobox query while editing.
+  $effect(() => {
+    if (!loadOptions) return
+    const q = combo.editing ? combo.query : ''
+    if (debTimer) clearTimeout(debTimer)
+    if (q.trim().length < minLength) { remoteOptions = []; loading = false; searched = false; return }
+    loading = true
+    const seq = ++reqSeq
+    debTimer = setTimeout(async () => {
+      try {
+        const res = await loadOptions!(q.trim())
+        if (seq === reqSeq) { remoteOptions = res; searched = true }
+      } finally {
+        if (seq === reqSeq) loading = false
+      }
+    }, debounce)
   })
 
   function updatePos() {
@@ -51,9 +120,9 @@
     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) }
+    const layer = createDismissableLayer({ element: () => [fieldEl, panelEl], onDismiss: () => combo.close(), closeOnEscape: false })
+    layer.activate()
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); layer.release() }
   })
   // Keep the active option scrolled into view (render concern).
   $effect(() => {
@@ -64,28 +133,39 @@
   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>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <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}
+      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>
+</SvField>
 
 {#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>
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...combo.listboxProps()}>
+    {#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}
+      <div class="sv-ddl__empty">{M.typeMore}</div>
+    {: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)}
+          <!-- 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>
+        {/each}
+      {/each}
     {:else}
-      <div class="sv-ddl__empty">No matches</div>
-    {/each}
+      <div class="sv-ddl__empty">{M.noResults}</div>
+    {/if}
   </div>
 {/if}
 {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
@@ -101,8 +181,14 @@
   .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-invalid { border-color: var(--sg-danger, #dc2626); }
+  .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: 0 4px 0 10px; }
+  .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__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__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; } }
 </style>