@svgrid/grid 2.6.21 → 2.7.0

package/src/SvNumberInput.svelte

@@ -1,168 +1,172 @@
-<script lang="ts">
-  /**
-   * SvNumberInput - a numeric input with min/max/step, spinner buttons, optional
-   * thousands grouping + precision, prefix/suffix. Parity: Smart `smart-number-input`.
-   * Emits number | null. The SvGrid number cell editor, standalone too.
-   *
-   * This is the styled renderer over the headless `createNumberInput` core - the
-   * same split as the grid (`createSvGrid` / `<SvGrid>`): parse/format/clamp,
-   * spinner + keyboard and ARIA all come from the core via prop-getters. The box,
-   * size, invalid state and focus ring are owned by SvField's `frame` chrome; the
-   * `prefix`/`suffix` are formatted INTO the value (they travel with the
-   * right-aligned number), and the spinner + clear live in the trailing slot.
-   */
-  import type { Snippet } from 'svelte'
-  import SvRepeatButton from './SvRepeatButton.svelte'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createNumberInput } from './createNumberInput.svelte'
-
-  type Props = SvEditorProps & {
-    value?: number | null
-    onChange?: (value: number | null) => void
-    min?: number
-    max?: number
-    step?: number
-    precision?: number
-    /** Group thousands (1,234) on display. */
-    grouping?: boolean
-    /** Text formatted before the number (e.g. `$`); travels with the value. */
-    prefix?: string
-    /** Text formatted after the number (e.g. `%`); travels with the value. */
-    suffix?: string
-    placeholder?: string
-    spinButtons?: boolean
-    /** Show a clear (x) button when there is a value. */
-    clearable?: boolean
-    /** Select the whole value when the field is focused. */
-    selectOnFocus?: boolean
-    /** Step the value with the mouse wheel while the field is focused. */
-    wheelStep?: boolean
-    /** Leading adornment (icon) inside the field. */
-    leading?: Snippet
-    /** Stretch to the container width. */
-    block?: boolean
-    /** Control width in px (ignored when `block`). Default 150. */
-    width?: number
-  }
-
-  let {
-    value = $bindable<number | null>(null),
-    onChange,
-    min = -Infinity,
-    max = Infinity,
-    step = 1,
-    precision,
-    grouping = false,
-    prefix = '',
-    suffix = '',
-    placeholder,
-    disabled = false,
-    readonly = false,
-    spinButtons = true,
-    clearable = false,
-    selectOnFocus = false,
-    wheelStep = false,
-    name,
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    loading = false,
-    leading,
-    block = false,
-    width = 150,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-num')
-  const uid = $derived(id ?? autoId)
-
-  const num = createNumberInput({
-    value: () => value,
-    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
-    onChange: (v) => { value = v; onChange?.(v) },
-    min: () => min,
-    max: () => max,
-    step: () => step,
-    precision: () => precision,
-    grouping: () => grouping,
-    prefix: () => prefix,
-    suffix: () => suffix,
-    placeholder: () => placeholder,
-    disabled: () => disabled,
-    readonly: () => readonly,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-    ariaLabel: () => ariaLabel,
-  })
-
-  // DOM-bound ergonomics the headless core stays out of: select-all on focus and
-  // wheel-to-step (only while focused, so scrolling the page never changes it).
-  function numExtras(node: HTMLInputElement) {
-    const onFocus = () => { if (selectOnFocus) requestAnimationFrame(() => node.select()) }
-    const onWheel = (e: WheelEvent) => {
-      if (!wheelStep || document.activeElement !== node || !num.isInteractive) return
-      e.preventDefault()
-      num.bump(e.deltaY < 0 ? 1 : -1)
-    }
-    node.addEventListener('focus', onFocus)
-    node.addEventListener('wheel', onWheel, { passive: false })
-    return { destroy() { node.removeEventListener('focus', onFocus); node.removeEventListener('wheel', onWheel) } }
-  }
-</script>
-
-{#snippet trailing()}
-  {#if clearable && value != null && !disabled && !readonly}
-    <button type="button" class="sv-num__clear" aria-label="Clear" tabindex="-1" onclick={() => { value = null; onChange?.(null) }}>
-      <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
-    </button>
-  {/if}
-  {#if spinButtons}
-    <div class="sv-num__spin">
-      <SvRepeatButton size="sm" variant="ghost" ariaLabel="Increment" onclick={num.increment}>
-        <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6" /></svg>
-      </SvRepeatButton>
-      <SvRepeatButton size="sm" variant="ghost" ariaLabel="Decrement" onclick={num.decrement}>
-        <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6" /></svg>
-      </SvRepeatButton>
-    </div>
-  {/if}
-{/snippet}
-
-<SvField
-  frame
-  id={uid}
-  {label}
-  {hint}
-  {error}
-  {required}
-  {dir}
-  {size}
-  {invalid}
-  {disabled}
-  {readonly}
-  {loading}
-  {block}
-  {width}
-  {leading}
-  {trailing}
->
-  <input class="sv-num__input" use:numExtras {...num.inputProps()} />
-  {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
-</SvField>
-
-<style>
-  .sv-num__input { text-align: end; }
-  .sv-num__clear { display: grid; place-items: center; width: 20px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
-  .sv-num__clear:hover { color: var(--sg-danger, #dc2626); }
-  .sv-num__spin { display: flex; flex-direction: column; margin-inline-start: 2px; }
-  .sv-num__spin :global(.sv-repeat) { flex: 1; min-height: 0; padding: 0 5px; border-radius: 4px; line-height: 1; }
-</style>
+<script lang="ts">
+  /**
+   * SvNumberInput - a numeric input with min/max/step, spinner buttons, optional
+   * thousands grouping + precision, prefix/suffix. Parity: Smart `smart-number-input`.
+   * Emits number | null. The SvGrid number cell editor, standalone too.
+   *
+   * This is the styled renderer over the headless `createNumberInput` core - the
+   * same split as the grid (`createSvGrid` / `<SvGrid>`): parse/format/clamp,
+   * spinner + keyboard and ARIA all come from the core via prop-getters. The box,
+   * size, invalid state and focus ring are owned by SvField's `frame` chrome; the
+   * `prefix`/`suffix` are formatted INTO the value (they travel with the
+   * right-aligned number), and the spinner + clear live in the trailing slot.
+   */
+  import type { Snippet } from 'svelte'
+  import SvRepeatButton from './SvRepeatButton.svelte'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createNumberInput } from './createNumberInput.svelte'
+
+  type Props = SvEditorProps & {
+    value?: number | null
+    onChange?: (value: number | null) => void
+    min?: number
+    max?: number
+    step?: number
+    precision?: number
+    /** Group thousands (1,234) on display. */
+    grouping?: boolean
+    /** Text formatted before the number (e.g. `$`); travels with the value. */
+    prefix?: string
+    /** Text formatted after the number (e.g. `%`); travels with the value. */
+    suffix?: string
+    placeholder?: string
+    spinButtons?: boolean
+    /** Show a clear (x) button when there is a value. */
+    clearable?: boolean
+    /** Select the whole value when the field is focused. */
+    selectOnFocus?: boolean
+    /** Step the value with the mouse wheel while the field is focused. */
+    wheelStep?: boolean
+    /** Leading adornment (icon) inside the field. */
+    leading?: Snippet
+    /** Stretch to the container width. */
+    block?: boolean
+    /** Control width in px (ignored when `block`). Default 150. */
+    width?: number
+  }
+
+  let {
+    value = $bindable<number | null>(null),
+    onChange,
+    min = -Infinity,
+    max = Infinity,
+    step = 1,
+    precision,
+    grouping = false,
+    prefix = '',
+    suffix = '',
+    placeholder,
+    disabled = false,
+    readonly = false,
+    spinButtons = true,
+    clearable = false,
+    selectOnFocus = false,
+    wheelStep = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    loading = false,
+    leading,
+    block = false,
+    width = 150,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-num')
+  const uid = $derived(id ?? autoId)
+
+  const num = createNumberInput({
+    value: () => value,
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (v) => { value = v; onChange?.(v) },
+    min: () => min,
+    max: () => max,
+    step: () => step,
+    precision: () => precision,
+    grouping: () => grouping,
+    prefix: () => prefix,
+    suffix: () => suffix,
+    placeholder: () => placeholder,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel,
+  })
+
+  // DOM-bound ergonomics the headless core stays out of: select-all on focus and
+  // wheel-to-step (only while focused, so scrolling the page never changes it).
+  function numExtras(node: HTMLInputElement) {
+    const onFocus = () => { if (selectOnFocus) requestAnimationFrame(() => node.select()) }
+    const onWheel = (e: WheelEvent) => {
+      if (!wheelStep || document.activeElement !== node || !num.isInteractive) return
+      e.preventDefault()
+      num.bump(e.deltaY < 0 ? 1 : -1)
+    }
+    node.addEventListener('focus', onFocus)
+    node.addEventListener('wheel', onWheel, { passive: false })
+    return { destroy() { node.removeEventListener('focus', onFocus); node.removeEventListener('wheel', onWheel) } }
+  }
+</script>
+
+{#snippet trailing()}
+  {#if clearable && value != null && !disabled && !readonly}
+    <button type="button" class="sv-num__clear" aria-label="Clear" tabindex="-1" onclick={() => { value = null; onChange?.(null) }}>
+      <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+    </button>
+  {/if}
+  {#if spinButtons}
+    <div class="sv-num__spin">
+      <SvRepeatButton size="sm" variant="ghost" ariaLabel="Increment" onclick={num.increment}>
+        <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6" /></svg>
+      </SvRepeatButton>
+      <SvRepeatButton size="sm" variant="ghost" ariaLabel="Decrement" onclick={num.decrement}>
+        <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6" /></svg>
+      </SvRepeatButton>
+    </div>
+  {/if}
+{/snippet}
+
+<SvField
+  frame
+  id={uid}
+  {label}
+  {hint}
+  {error}
+  {required}
+  {dir}
+  {size}
+  {invalid}
+  {disabled}
+  {readonly}
+  {loading}
+  {block}
+  {width}
+  {leading}
+  {trailing}
+>
+  <input class="sv-num__input" use:numExtras {...num.inputProps()} />
+  {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+</SvField>
+
+<style>
+  .sv-num__input { text-align: end; }
+  /* Digits line up on the right; a placeholder is prose, and right-aligning
+     it puts one field out of step with every other label-above-control row
+     in a form. */
+  .sv-num__input:placeholder-shown { text-align: start; }
+  .sv-num__clear { display: grid; place-items: center; width: 20px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
+  .sv-num__clear:hover { color: var(--sg-danger, #dc2626); }
+  .sv-num__spin { display: flex; flex-direction: column; margin-inline-start: 2px; }
+  .sv-num__spin :global(.sv-repeat) { flex: 1; min-height: 0; padding: 0 5px; border-radius: 4px; line-height: 1; }
+</style>

package/src/SvOtpInput.svelte

@@ -1,158 +1,158 @@
-<script lang="ts">
-  /**
-   * SvOtpInput - a segmented one-time-code / PIN entry: N single-char cells with
-   * auto-advance, Backspace-to-previous, arrow navigation, and paste that
-   * distributes across the cells. Emits the joined string. Parity: Smart OTP.
-   *
-   * ```svelte
-   * <SvOtpInput length={6} value={code} onChange={(v) => (code = v)}
-   *   onComplete={(v) => verify(v)} />
-   * ```
-   */
-  import SvField from './SvField.svelte'
-  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
-  import { sanitizeOtp, otpCells, isOtpComplete } from './otp'
-
-  type Props = Pick<
-    SvEditorProps,
-    'disabled' | 'label' | 'hint' | 'error' | 'required' | 'dir' | 'size' | 'id' | 'name' | 'invalid'
-  > & {
-    value?: string
-    onChange?: (value: string) => void
-    /** Fired once every cell is filled. */
-    onComplete?: (value: string) => void
-    length?: number
-    /** Digits only (default) vs any character. */
-    numeric?: boolean
-    /** Mask the characters (password dots). */
-    mask?: boolean
-    autofocus?: boolean
-  }
-
-  let {
-    value = $bindable(''),
-    onChange,
-    onComplete,
-    length = 6,
-    numeric = true,
-    mask = false,
-    disabled = false,
-    label,
-    hint,
-    error,
-    required = false,
-    dir,
-    size = 'md',
-    id,
-    name,
-    invalid = false,
-    autofocus = false,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-otp')
-  const uid = $derived(id ?? autoId)
-  const cells = $derived(otpCells(sanitizeOtp(value, length, numeric), length))
-  const inputs = $state<HTMLInputElement[]>([])
-
-  function commit(next: string) {
-    const clean = sanitizeOtp(next, length, numeric)
-    value = clean // enables bind:value
-    onChange?.(clean)
-    if (isOtpComplete(clean, length)) onComplete?.(clean)
-  }
-  function focusCell(i: number) {
-    const el = inputs[Math.max(0, Math.min(length - 1, i))]
-    el?.focus()
-    el?.select()
-  }
-  function currentCells(): string[] {
-    return otpCells(sanitizeOtp(value, length, numeric), length)
-  }
-
-  function onCellInput(i: number, e: Event) {
-    const ch = sanitizeOtp((e.currentTarget as HTMLInputElement).value, 1, numeric).slice(-1)
-    const arr = currentCells()
-    arr[i] = ch
-    commit(arr.join(''))
-    if (ch) focusCell(i + 1)
-  }
-  function onCellKeydown(i: number, e: KeyboardEvent) {
-    const rtl = dir === 'rtl'
-    if (e.key === 'Backspace') {
-      e.preventDefault()
-      const arr = currentCells()
-      if (arr[i]) {
-        arr[i] = ''
-        commit(arr.join(''))
-      } else if (i > 0) {
-        arr[i - 1] = ''
-        commit(arr.join(''))
-        focusCell(i - 1)
-      }
-    } else if (e.key === 'ArrowLeft') {
-      e.preventDefault()
-      focusCell(rtl ? i + 1 : i - 1)
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault()
-      focusCell(rtl ? i - 1 : i + 1)
-    }
-  }
-  function onPaste(i: number, e: ClipboardEvent) {
-    e.preventDefault()
-    const text = e.clipboardData?.getData('text') ?? ''
-    const arr = currentCells()
-    const pasted = sanitizeOtp(text, length - i, numeric)
-    for (let k = 0; k < pasted.length; k++) arr[i + k] = pasted[k]!
-    const joined = arr.join('')
-    commit(joined)
-    focusCell(Math.min(i + pasted.length, length - 1))
-  }
-  function mountFocus(node: HTMLInputElement, i: number) {
-    if (autofocus && i === 0) node.focus()
-  }
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div
-    class="sv-otp sv-otp--{size}"
-    class:is-disabled={disabled}
-    class:is-invalid={invalid}
-    role="group"
-    {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel: label ?? 'One-time code' })}
-  >
-    {#each cells as cell, i (i)}
-      <input
-        bind:this={inputs[i]}
-        use:mountFocus={i}
-        class="sv-otp__cell"
-        type={mask ? 'password' : 'text'}
-        inputmode={numeric ? 'numeric' : 'text'}
-        autocomplete={i === 0 ? 'one-time-code' : 'off'}
-        maxlength="1"
-        value={cell}
-        {disabled}
-        aria-label={`Character ${i + 1} of ${length}`}
-        oninput={(e) => onCellInput(i, e)}
-        onkeydown={(e) => onCellKeydown(i, e)}
-        onpaste={(e) => onPaste(i, e)}
-        onfocus={(e) => (e.currentTarget as HTMLInputElement).select()}
-      />
-    {/each}
-    {#if name}<input type="hidden" {name} value={value} />{/if}
-  </div>
-</SvField>
-
-<style>
-  .sv-otp { --_accent: var(--sg-accent, #2563eb); display: inline-flex; gap: 8px; }
-  .sv-otp.is-disabled { opacity: 0.6; }
-  .sv-otp__cell {
-    width: 40px; height: 46px; text-align: center; font: inherit; font-weight: 650; font-size: 18px;
-    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);
-    outline: none; caret-color: var(--_accent);
-  }
-  .sv-otp--sm .sv-otp__cell { width: 34px; height: 40px; font-size: 16px; }
-  .sv-otp--lg .sv-otp__cell { width: 46px; height: 54px; font-size: 20px; }
-  .sv-otp__cell:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
-  .sv-otp.is-invalid .sv-otp__cell { border-color: var(--sg-danger, #dc2626); }
-</style>
+<script lang="ts">
+  /**
+   * SvOtpInput - a segmented one-time-code / PIN entry: N single-char cells with
+   * auto-advance, Backspace-to-previous, arrow navigation, and paste that
+   * distributes across the cells. Emits the joined string. Parity: Smart OTP.
+   *
+   * ```svelte
+   * <SvOtpInput length={6} value={code} onChange={(v) => (code = v)}
+   *   onComplete={(v) => verify(v)} />
+   * ```
+   */
+  import SvField from './SvField.svelte'
+  import { editorAria, nextEditorId, type SvEditorProps } from './editor-contract'
+  import { sanitizeOtp, otpCells, isOtpComplete } from './otp'
+
+  type Props = Pick<
+    SvEditorProps,
+    'disabled' | 'label' | 'hint' | 'error' | 'required' | 'dir' | 'size' | 'id' | 'name' | 'invalid'
+  > & {
+    value?: string
+    onChange?: (value: string) => void
+    /** Fired once every cell is filled. */
+    onComplete?: (value: string) => void
+    length?: number
+    /** Digits only (default) vs any character. */
+    numeric?: boolean
+    /** Mask the characters (password dots). */
+    mask?: boolean
+    autofocus?: boolean
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    onComplete,
+    length = 6,
+    numeric = true,
+    mask = false,
+    disabled = false,
+    label,
+    hint,
+    error,
+    required = false,
+    dir,
+    size = 'md',
+    id,
+    name,
+    invalid = false,
+    autofocus = false,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-otp')
+  const uid = $derived(id ?? autoId)
+  const cells = $derived(otpCells(sanitizeOtp(value, length, numeric), length))
+  const inputs = $state<HTMLInputElement[]>([])
+
+  function commit(next: string) {
+    const clean = sanitizeOtp(next, length, numeric)
+    value = clean // enables bind:value
+    onChange?.(clean)
+    if (isOtpComplete(clean, length)) onComplete?.(clean)
+  }
+  function focusCell(i: number) {
+    const el = inputs[Math.max(0, Math.min(length - 1, i))]
+    el?.focus()
+    el?.select()
+  }
+  function currentCells(): string[] {
+    return otpCells(sanitizeOtp(value, length, numeric), length)
+  }
+
+  function onCellInput(i: number, e: Event) {
+    const ch = sanitizeOtp((e.currentTarget as HTMLInputElement).value, 1, numeric).slice(-1)
+    const arr = currentCells()
+    arr[i] = ch
+    commit(arr.join(''))
+    if (ch) focusCell(i + 1)
+  }
+  function onCellKeydown(i: number, e: KeyboardEvent) {
+    const rtl = dir === 'rtl'
+    if (e.key === 'Backspace') {
+      e.preventDefault()
+      const arr = currentCells()
+      if (arr[i]) {
+        arr[i] = ''
+        commit(arr.join(''))
+      } else if (i > 0) {
+        arr[i - 1] = ''
+        commit(arr.join(''))
+        focusCell(i - 1)
+      }
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      focusCell(rtl ? i + 1 : i - 1)
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      focusCell(rtl ? i - 1 : i + 1)
+    }
+  }
+  function onPaste(i: number, e: ClipboardEvent) {
+    e.preventDefault()
+    const text = e.clipboardData?.getData('text') ?? ''
+    const arr = currentCells()
+    const pasted = sanitizeOtp(text, length - i, numeric)
+    for (let k = 0; k < pasted.length; k++) arr[i + k] = pasted[k]!
+    const joined = arr.join('')
+    commit(joined)
+    focusCell(Math.min(i + pasted.length, length - 1))
+  }
+  function mountFocus(node: HTMLInputElement, i: number) {
+    if (autofocus && i === 0) node.focus()
+  }
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-otp sv-otp--{size}"
+    class:is-disabled={disabled}
+    class:is-invalid={invalid}
+    role="group"
+    {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel: label ?? 'One-time code' })}
+  >
+    {#each cells as cell, i (i)}
+      <input
+        bind:this={inputs[i]}
+        use:mountFocus={i}
+        class="sv-otp__cell"
+        type={mask ? 'password' : 'text'}
+        inputmode={numeric ? 'numeric' : 'text'}
+        autocomplete={i === 0 ? 'one-time-code' : 'off'}
+        maxlength="1"
+        value={cell}
+        {disabled}
+        aria-label={`Character ${i + 1} of ${length}`}
+        oninput={(e) => onCellInput(i, e)}
+        onkeydown={(e) => onCellKeydown(i, e)}
+        onpaste={(e) => onPaste(i, e)}
+        onfocus={(e) => (e.currentTarget as HTMLInputElement).select()}
+      />
+    {/each}
+    {#if name}<input type="hidden" {name} value={value} />{/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-otp { --_accent: var(--sg-accent, #2563eb); display: inline-flex; gap: 8px; }
+  .sv-otp.is-disabled { opacity: 0.6; }
+  .sv-otp__cell {
+    width: 40px; height: 46px; text-align: center; font: inherit; font-weight: 650; font-size: 18px;
+    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);
+    outline: none; caret-color: var(--_accent);
+  }
+  .sv-otp--sm .sv-otp__cell { width: 34px; height: 40px; font-size: 16px; }
+  .sv-otp--lg .sv-otp__cell { width: 46px; height: 54px; font-size: 20px; }
+  .sv-otp__cell:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+  .sv-otp.is-invalid .sv-otp__cell { border-color: var(--sg-danger, #dc2626); }
+</style>