@svgrid/grid 2.2.0 → 2.2.1

package/dist/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 { 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))
-  let 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"
-    aria-label={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 { 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))
+  let 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"
+    aria-label={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>

package/dist/SvPopover.svelte

@@ -1,139 +1,139 @@
-<script lang="ts">
-  /**
-   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
-   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
-   * manually via `open`. Flips above the trigger when there's no room below,
-   * closes on outside-click / Escape, and animates in. Parity: Smart popover.
-   *
-   * ```svelte
-   * <SvPopover>
-   *   {#snippet anchor()}<button>Open</button>{/snippet}
-   *   <p>Panel content</p>
-   * </SvPopover>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { createDismissableLayer } from './a11y/dismissable'
-
-  type Props = {
-    /** Controlled open state (bindable). */
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    /** How the anchor opens the panel. `manual` = only `open` drives it. */
-    trigger?: 'click' | 'hover' | 'manual'
-    /** Estimated panel height for flip decisions. */
-    estimatedHeight?: number
-    /** Force a minimum panel width (else it hugs its content). */
-    minWidth?: number
-    /** Close when clicking outside. Default true. */
-    closeOnOutsideClick?: boolean
-    ariaLabel?: string
-    /** The anchor element(s) that open the panel. */
-    anchor?: Snippet
-    /** Panel content. */
-    children?: Snippet
-  }
-
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    trigger = 'click',
-    estimatedHeight = 220,
-    minWidth,
-    closeOnOutsideClick = true,
-    ariaLabel,
-    anchor,
-    children,
-  }: Props = $props()
-
-  let anchorEl = $state<HTMLSpanElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
-
-  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
-  function toggle() { setOpen(!open) }
-
-  function updatePos() {
-    if (!anchorEl) return
-    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight, minWidth })
-  }
-
-  $effect(() => {
-    if (!open) return
-    updatePos()
-    const rp = () => updatePos()
-    window.addEventListener('scroll', rp, true)
-    window.addEventListener('resize', rp)
-    // Escape + outside-click dismissal via the shared layer stack (so a popover
-    // nested in a dialog closes top-first). The trigger is passed alongside the
-    // panel so clicking it toggles rather than dismiss-then-reopen.
-    const layer = createDismissableLayer({
-      element: () => [anchorEl, panelEl],
-      onDismiss: () => setOpen(false),
-      closeOnOutside: closeOnOutsideClick,
-    })
-    layer.activate()
-    return () => {
-      window.removeEventListener('scroll', rp, true)
-      window.removeEventListener('resize', rp)
-      layer.release()
-    }
-  })
-
-  let hoverTimer: ReturnType<typeof setTimeout> | undefined
-  function onEnter() { if (trigger === 'hover') { clearTimeout(hoverTimer); setOpen(true) } }
-  function onLeave() { if (trigger === 'hover') { hoverTimer = setTimeout(() => setOpen(false), 120) } }
-
-  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
-   * anchor's own aria-label, else its trimmed text content. */
-  function anchorFallbackLabel(): string | undefined {
-    const label = anchorEl?.getAttribute('aria-label')
-    if (label) return label
-    return anchorEl?.textContent?.trim() || undefined
-  }
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<span
-  bind:this={anchorEl}
-  class="sv-pop__anchor"
-  onclick={() => trigger === 'click' && toggle()}
-  onpointerenter={onEnter}
-  onpointerleave={onLeave}
-  onfocusin={onEnter}
-  onfocusout={onLeave}
->
-  {@render anchor?.()}
-</span>
-
-{#if open}
-  <div
-    bind:this={panelEl}
-    class="sv-pop__panel"
-    use:portalToBody
-    use:popIn={{ up: rect.openUpward }}
-    style:position="fixed"
-    style:top={`${rect.top}px`}
-    style:left={`${rect.left}px`}
-    style:min-width={minWidth ? `${rect.width}px` : undefined}
-    role="dialog"
-    aria-label={ariaLabel ?? anchorFallbackLabel()}
-    onpointerenter={onEnter}
-    onpointerleave={onLeave}
-    onfocusin={onEnter}
-    onfocusout={onLeave}
-  >
-    {@render children?.()}
-  </div>
-{/if}
-
-<style>
-  .sv-pop__anchor { display: inline-flex; }
-  :global(.sv-pop__panel) {
-    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
-    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; line-height: 1.55;
-  }
-</style>
+<script lang="ts">
+  /**
+   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
+   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
+   * manually via `open`. Flips above the trigger when there's no room below,
+   * closes on outside-click / Escape, and animates in. Parity: Smart popover.
+   *
+   * ```svelte
+   * <SvPopover>
+   *   {#snippet anchor()}<button>Open</button>{/snippet}
+   *   <p>Panel content</p>
+   * </SvPopover>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+
+  type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /** How the anchor opens the panel. `manual` = only `open` drives it. */
+    trigger?: 'click' | 'hover' | 'manual'
+    /** Estimated panel height for flip decisions. */
+    estimatedHeight?: number
+    /** Force a minimum panel width (else it hugs its content). */
+    minWidth?: number
+    /** Close when clicking outside. Default true. */
+    closeOnOutsideClick?: boolean
+    ariaLabel?: string
+    /** The anchor element(s) that open the panel. */
+    anchor?: Snippet
+    /** Panel content. */
+    children?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    trigger = 'click',
+    estimatedHeight = 220,
+    minWidth,
+    closeOnOutsideClick = true,
+    ariaLabel,
+    anchor,
+    children,
+  }: Props = $props()
+
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+
+  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
+  function toggle() { setOpen(!open) }
+
+  function updatePos() {
+    if (!anchorEl) return
+    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight, minWidth })
+  }
+
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    // Escape + outside-click dismissal via the shared layer stack (so a popover
+    // nested in a dialog closes top-first). The trigger is passed alongside the
+    // panel so clicking it toggles rather than dismiss-then-reopen.
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnOutside: closeOnOutsideClick,
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+    }
+  })
+
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined
+  function onEnter() { if (trigger === 'hover') { clearTimeout(hoverTimer); setOpen(true) } }
+  function onLeave() { if (trigger === 'hover') { hoverTimer = setTimeout(() => setOpen(false), 120) } }
+
+  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
+   * anchor's own aria-label, else its trimmed text content. */
+  function anchorFallbackLabel(): string | undefined {
+    const label = anchorEl?.getAttribute('aria-label')
+    if (label) return label
+    return anchorEl?.textContent?.trim() || undefined
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  bind:this={anchorEl}
+  class="sv-pop__anchor"
+  onclick={() => trigger === 'click' && toggle()}
+  onpointerenter={onEnter}
+  onpointerleave={onLeave}
+  onfocusin={onEnter}
+  onfocusout={onLeave}
+>
+  {@render anchor?.()}
+</span>
+
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-pop__panel"
+    use:portalToBody
+    use:popIn={{ up: rect.openUpward }}
+    style:position="fixed"
+    style:top={`${rect.top}px`}
+    style:left={`${rect.left}px`}
+    style:min-width={minWidth ? `${rect.width}px` : undefined}
+    role="dialog"
+    aria-label={ariaLabel ?? anchorFallbackLabel()}
+    onpointerenter={onEnter}
+    onpointerleave={onLeave}
+    onfocusin={onEnter}
+    onfocusout={onLeave}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  .sv-pop__anchor { display: inline-flex; }
+  :global(.sv-pop__panel) {
+    z-index: 2147483646; max-width: min(92vw, 360px); padding: 12px 14px;
+    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; line-height: 1.55;
+  }
+</style>