npm - @svgrid/grid - Versions diffs - 2.6.4 → 2.6.5 - Mend

@svgrid/grid 2.6.4 → 2.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (368) hide show

package/src/SvContextMenu.svelte CHANGED Viewed

@@ -1,116 +1,116 @@
-<script lang="ts" module>
-  export type { MenuItem } from './SvMenuList.svelte'
-</script>
-<script lang="ts">
-  /**
-   * SvContextMenu - wraps a region and opens a menu at the pointer on right-click
-   * (or long-press). Reuses SvMenuList (submenus, keyboard, icons, shortcuts),
-   * portals to <body>, and closes via the shared dismissable layer stack.
-   * Parity: Smart context-menu.
-   *
-   * ```svelte
-   * <SvContextMenu items={items} onSelect={(i) => run(i)}>
-   *   <div class="drop-zone">Right-click me</div>
-   * </SvContextMenu>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { portalToBody, popIn } from './popover'
-  import { createDismissableLayer, onScrollOutside } from './a11y/dismissable'
-  import { createFocusTrap } from './a11y/focus-trap'
-  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
-  type Props = {
-    items: ReadonlyArray<MenuItem>
-    onSelect?: (item: MenuItem) => void
-    disabled?: boolean
-    ariaLabel?: string
-    children?: Snippet
-  }
-  let { items, onSelect, disabled = false, ariaLabel, children }: Props = $props()
-  let open = $state(false)
-  let pos = $state({ x: 0, y: 0 })
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let zoneEl = $state<HTMLDivElement | null>(null)
-  const MENU_W = 200
-  function openAt(clientX: number, clientY: number) {
-    // Clamp so the menu stays on-screen (estimate height from item count).
-    const estH = Math.min(items.length, 12) * 34 + 8
-    const x = Math.min(clientX, window.innerWidth - MENU_W - 6)
-    const y = Math.min(clientY, window.innerHeight - estH - 6)
-    pos = { x: Math.max(6, x), y: Math.max(6, y) }
-    open = true
-  }
-  function onContextMenu(e: MouseEvent) {
-    if (disabled) return
-    e.preventDefault()
-    openAt(e.clientX, e.clientY)
-  }
-  // Keyboard equivalent of a right-click: the ContextMenu key, or Shift+F10.
-  // Anchors at the focused zone's own position instead of the (nonexistent)
-  // pointer coordinates.
-  function onZoneKeydown(e: KeyboardEvent) {
-    if (disabled) return
-    const isMenuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
-    if (!isMenuKey) return
-    e.preventDefault()
-    const rect = zoneEl?.getBoundingClientRect()
-    openAt(rect ? rect.left : 0, rect ? rect.bottom : 0)
-  }
-  $effect(() => {
-    if (!open || !panelEl) return
-    const trap = createFocusTrap(panelEl, {
-      initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
-    })
-    trap.activate()
-    const layer = createDismissableLayer({
-      element: () => panelEl,
-      onDismiss: () => (open = false),
-    })
-    layer.activate()
-    // Reposition-close on scroll (a moved anchor would leave the menu stranded).
-    // Scrolling the menu's own item list doesn't count as the anchor moving.
-    const offScroll = onScrollOutside(() => panelEl, () => (open = false))
-    return () => { layer.release(); trap.release(); offScroll() }
-  })
-</script>
-<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
-<div class="sv-ctx__zone" bind:this={zoneEl} tabindex={disabled ? -1 : 0} oncontextmenu={onContextMenu} onkeydown={onZoneKeydown}>
-  {@render children?.()}
-</div>
-{#if open}
-  <div
-    bind:this={panelEl}
-    class="sv-ctx"
-    use:portalToBody
-    use:popIn={{}}
-    style:position="fixed"
-    style:top={`${pos.y}px`}
-    style:left={`${pos.x}px`}
-    aria-label={ariaLabel}
-  >
-    <SvMenuList {items} onclose={() => (open = false)} onselect={(i) => onSelect?.(i)} />
-  </div>
-{/if}
-<style>
-  /* display:contents generates no box and per spec cannot receive focus - it
-     must be a real box for the keyboard-open path (tabindex) to work at all. */
-  .sv-ctx__zone { display: block; }
-  .sv-ctx__zone:focus-visible { outline: 2px solid var(--sg-accent, #6366f1); outline-offset: 1px; }
-  :global(.sv-ctx) {
-    z-index: 2147483646; min-width: 200px;
-    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); font-size: 13px;
-  }
-</style>
+<script lang="ts" module>
+  export type { MenuItem } from './SvMenuList.svelte'
+</script>
+<script lang="ts">
+  /**
+   * SvContextMenu - wraps a region and opens a menu at the pointer on right-click
+   * (or long-press). Reuses SvMenuList (submenus, keyboard, icons, shortcuts),
+   * portals to <body>, and closes via the shared dismissable layer stack.
+   * Parity: Smart context-menu.
+   *
+   * ```svelte
+   * <SvContextMenu items={items} onSelect={(i) => run(i)}>
+   *   <div class="drop-zone">Right-click me</div>
+   * </SvContextMenu>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { portalToBody, popIn } from './popover'
+  import { createDismissableLayer, onScrollOutside } from './a11y/dismissable'
+  import { createFocusTrap } from './a11y/focus-trap'
+  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
+  type Props = {
+    items: ReadonlyArray<MenuItem>
+    onSelect?: (item: MenuItem) => void
+    disabled?: boolean
+    ariaLabel?: string
+    children?: Snippet
+  }
+  let { items, onSelect, disabled = false, ariaLabel, children }: Props = $props()
+  let open = $state(false)
+  let pos = $state({ x: 0, y: 0 })
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let zoneEl = $state<HTMLDivElement | null>(null)
+  const MENU_W = 200
+  function openAt(clientX: number, clientY: number) {
+    // Clamp so the menu stays on-screen (estimate height from item count).
+    const estH = Math.min(items.length, 12) * 34 + 8
+    const x = Math.min(clientX, window.innerWidth - MENU_W - 6)
+    const y = Math.min(clientY, window.innerHeight - estH - 6)
+    pos = { x: Math.max(6, x), y: Math.max(6, y) }
+    open = true
+  }
+  function onContextMenu(e: MouseEvent) {
+    if (disabled) return
+    e.preventDefault()
+    openAt(e.clientX, e.clientY)
+  }
+  // Keyboard equivalent of a right-click: the ContextMenu key, or Shift+F10.
+  // Anchors at the focused zone's own position instead of the (nonexistent)
+  // pointer coordinates.
+  function onZoneKeydown(e: KeyboardEvent) {
+    if (disabled) return
+    const isMenuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
+    if (!isMenuKey) return
+    e.preventDefault()
+    const rect = zoneEl?.getBoundingClientRect()
+    openAt(rect ? rect.left : 0, rect ? rect.bottom : 0)
+  }
+  $effect(() => {
+    if (!open || !panelEl) return
+    const trap = createFocusTrap(panelEl, {
+      initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
+    })
+    trap.activate()
+    const layer = createDismissableLayer({
+      element: () => panelEl,
+      onDismiss: () => (open = false),
+    })
+    layer.activate()
+    // Reposition-close on scroll (a moved anchor would leave the menu stranded).
+    // Scrolling the menu's own item list doesn't count as the anchor moving.
+    const offScroll = onScrollOutside(() => panelEl, () => (open = false))
+    return () => { layer.release(); trap.release(); offScroll() }
+  })
+</script>
+<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
+<div class="sv-ctx__zone" bind:this={zoneEl} tabindex={disabled ? -1 : 0} oncontextmenu={onContextMenu} onkeydown={onZoneKeydown}>
+  {@render children?.()}
+</div>
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-ctx"
+    use:portalToBody
+    use:popIn={{}}
+    style:position="fixed"
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    aria-label={ariaLabel}
+  >
+    <SvMenuList {items} onclose={() => (open = false)} onselect={(i) => onSelect?.(i)} />
+  </div>
+{/if}
+<style>
+  /* display:contents generates no box and per spec cannot receive focus - it
+     must be a real box for the keyboard-open path (tabindex) to work at all. */
+  .sv-ctx__zone { display: block; }
+  .sv-ctx__zone:focus-visible { outline: 2px solid var(--sg-accent, #6366f1); outline-offset: 1px; }
+  :global(.sv-ctx) {
+    z-index: 2147483646; min-width: 200px;
+    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); font-size: 13px;
+  }
+</style>

package/src/SvCountryInput.svelte CHANGED Viewed

@@ -1,163 +1,163 @@
-<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, popIn, type AnchoredRect } from './popover'
-  import { flagEmoji } from './countries'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
-  import { createCountryInput } from './createCountryInput.svelte'
-  /** User-facing strings (localizable via `messages`). */
-  type CountryMessages = { search: string; noResults: string }
-  const DEFAULT_MESSAGES: CountryMessages = { search: 'Search countries', noResults: 'No matches' }
-  type Props = SvEditorProps & {
-    value?: string | null
-    onChange?: (code: string) => void
-    /** Show the dial code beside each country. */
-    showDial?: boolean
-    placeholder?: string
-    /** Override the built-in strings (search + empty-state). */
-    messages?: Partial<CountryMessages>
-  }
-  let {
-    value = $bindable<string | null>(null),
-    onChange,
-    showDial = false,
-    placeholder = 'Select country…',
-    disabled = false,
-    name,
-    size = 'md',
-    ariaLabel,
-    block = false,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    messages,
-  }: Props = $props()
-  const autoId = nextEditorId('sv-country')
-  const uid = $derived(id ?? autoId)
-  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
-  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, maxHeight: 0, availHeight: 0 })
-  const ci = createCountryInput({
-    value: () => value,
-    onChange: (c) => { value = c; onChange?.(c) },
-    disabled: () => disabled,
-    ariaLabel: () => ariaLabel,
-    searchLabel: () => M.search,
-    focusTrigger: () => triggerEl?.focus(),
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-  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>
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-block={block} class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...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>
-</SvField>
-{#if ci.open}
-  <div bind:this={panelEl} class="sv-country__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`} role="dialog">
-    <input bind:this={searchEl} class="sv-country__search" placeholder={`${M.search}…`} {...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">{M.noResults}</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: start;
-    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-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-country.is-invalid.is-open, .sv-country.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .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; }
-  /* Fill the container - see `block` in SvEditorProps. */
-  .sv-country.is-block { width: 100%; max-width: 100%; }
-</style>
+<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, popIn, type AnchoredRect } from './popover'
+  import { flagEmoji } from './countries'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { createCountryInput } from './createCountryInput.svelte'
+  /** User-facing strings (localizable via `messages`). */
+  type CountryMessages = { search: string; noResults: string }
+  const DEFAULT_MESSAGES: CountryMessages = { search: 'Search countries', noResults: 'No matches' }
+  type Props = SvEditorProps & {
+    value?: string | null
+    onChange?: (code: string) => void
+    /** Show the dial code beside each country. */
+    showDial?: boolean
+    placeholder?: string
+    /** Override the built-in strings (search + empty-state). */
+    messages?: Partial<CountryMessages>
+  }
+  let {
+    value = $bindable<string | null>(null),
+    onChange,
+    showDial = false,
+    placeholder = 'Select country…',
+    disabled = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    block = false,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+  const autoId = nextEditorId('sv-country')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+  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, maxHeight: 0, availHeight: 0 })
+  const ci = createCountryInput({
+    value: () => value,
+    onChange: (c) => { value = c; onChange?.(c) },
+    disabled: () => disabled,
+    ariaLabel: () => ariaLabel,
+    searchLabel: () => M.search,
+    focusTrigger: () => triggerEl?.focus(),
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+  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>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-block={block} class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...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>
+</SvField>
+{#if ci.open}
+  <div bind:this={panelEl} class="sv-country__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`} role="dialog">
+    <input bind:this={searchEl} class="sv-country__search" placeholder={`${M.search}…`} {...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">{M.noResults}</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: start;
+    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-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-country.is-invalid.is-open, .sv-country.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  .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; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-country.is-block { width: 100%; max-width: 100%; }
+</style>