@svgrid/grid 1.2.21 → 1.2.23

package/src/server-data-source.ts

@@ -8,6 +8,12 @@
  * It's headless and framework-agnostic on purpose: wire `setSort` /
  * `setFilter` / `setPage` to the grid's controlled callbacks, and render the
  * grid from the `{ rows, total, loading }` it hands you. See the demo.
+ *
+ * The write side (`createRow` / `updateRow` / `deleteRow`) is optional: a
+ * source that only implements `getRows` stays a pure read model, and the
+ * matching controller methods throw a clear error if called. Mutations are
+ * non-optimistic for now - the grid reflects a change only after the
+ * follow-up re-fetch of the current page lands.
  */
 export type ServerSortModel = Array<{ id: string; desc: boolean }>
 
@@ -44,12 +50,23 @@ export type ServerResult<TData> = {
 
 export type ServerDataSource<TData> = {
   getRows(request: ServerRequest): Promise<ServerResult<TData>>
+  /**
+   * Optional write side. Implement whichever your backend supports; the
+   * controller exposes matching `createRow` / `updateRow` / `deleteRow`
+   * methods that call through and then `refresh()` the current page.
+   * Calling a controller method whose source counterpart is missing throws.
+   */
+  createRow?(input: Partial<TData>): Promise<TData>
+  updateRow?(id: string, patch: Partial<TData>): Promise<TData>
+  deleteRow?(id: string): Promise<void>
 }
 
 export type ServerState<TData> = {
   rows: ReadonlyArray<TData>
   total: number
   loading: boolean
+  /** True while a create / update / delete mutation is in flight. */
+  saving: boolean
   error: unknown
   pageIndex: number
   pageSize: number
@@ -65,6 +82,23 @@ export type ServerController<TData> = {
   setFilter(filterModel: ServerFilterModel): void
   setPage(pageIndex: number): void
   setPageSize(pageSize: number): void
+  /**
+   * Create a row through the source, then refresh the current page. Resolves
+   * with the created row. Rejects if the source has no `createRow` (or if the
+   * create itself fails - the read state is left untouched on failure).
+   */
+  createRow(input: Partial<TData>): Promise<TData>
+  /**
+   * Update a row by id through the source. Non-optimistic: refreshes the page.
+   * Optimistic (see `optimistic` + `getRowId` options): patches the local row
+   * immediately, then reconciles with the server result, rolling back on error.
+   */
+  updateRow(id: string, patch: Partial<TData>): Promise<TData>
+  /**
+   * Delete a row by id through the source. Non-optimistic: refreshes the page.
+   * Optimistic: removes the local row immediately, restoring it on error.
+   */
+  deleteRow(id: string): Promise<void>
   getState(): ServerState<TData>
   /** Stop accepting in-flight responses (call on unmount). */
   dispose(): void
@@ -74,6 +108,15 @@ export type ServerControllerOptions<TData> = {
   pageSize?: number
   /** Called whenever any of `rows` / `total` / `loading` / page changes. */
   onChange: (state: ServerState<TData>) => void
+  /**
+   * Apply `updateRow` / `deleteRow` to the local rows immediately (before the
+   * server confirms) and roll back on error - so edits feel instant and no
+   * refetch is needed. Requires `getRowId` to locate rows; ignored without it.
+   * A subsequent `refresh()` reconciles ordering/filtering. Default false.
+   */
+  optimistic?: boolean
+  /** Resolve a row's stable id, so optimistic update/delete can find it in `rows`. */
+  getRowId?: (row: TData) => string
 }
 
 export function createServerDataSource<TData>(
@@ -84,6 +127,7 @@ export function createServerDataSource<TData>(
     rows: [],
     total: 0,
     loading: false,
+    saving: false,
     error: null,
     pageIndex: 0,
     pageSize: options.pageSize ?? 50,
@@ -132,8 +176,105 @@ export function createServerDataSource<TData>(
     }
   }
 
+  // Shared mutation lifecycle: flip `saving`, run the write, refresh the
+  // current page on success, and always clear `saving`. A missing source
+  // method (or a disposed controller) rejects before anything is emitted.
+  function mutate<T>(name: string, thunk: (() => Promise<T>) | null): Promise<T> {
+    if (disposed) {
+      return Promise.reject(new Error('createServerDataSource: controller is disposed'))
+    }
+    if (!thunk) {
+      return Promise.reject(
+        new Error(`createServerDataSource: the datasource does not implement ${name}()`),
+      )
+    }
+    state.saving = true
+    emit()
+    return (async () => {
+      try {
+        const result = await thunk()
+        await fetchPage()
+        return result
+      } finally {
+        state.saving = false
+        emit()
+      }
+    })()
+  }
+
+  const optimistic = !!options.optimistic && !!options.getRowId
+  const getRowId = options.getRowId
+
+  // Optimistic update: patch the local row, reconcile with the server result,
+  // roll back on error. Falls back to the plain refresh path when the row
+  // isn't on the current page (nothing local to update).
+  async function optimisticUpdate(
+    id: string,
+    patch: Partial<TData>,
+    fn: (id: string, patch: Partial<TData>) => Promise<TData>,
+  ): Promise<TData> {
+    if (disposed) throw new Error('createServerDataSource: controller is disposed')
+    const prevRows = state.rows
+    const idx = prevRows.findIndex((r) => getRowId!(r) === id)
+    if (idx < 0) return mutate('updateRow', () => fn(id, patch))
+
+    state.rows = [...prevRows.slice(0, idx), { ...prevRows[idx]!, ...patch }, ...prevRows.slice(idx + 1)]
+    state.saving = true
+    emit()
+    try {
+      const result = await fn(id, patch)
+      state.rows = state.rows.map((r) => (getRowId!(r) === id ? result : r))
+      return result
+    } catch (err) {
+      state.rows = prevRows
+      throw err
+    } finally {
+      state.saving = false
+      emit()
+    }
+  }
+
+  // Optimistic delete: drop the local row + decrement total, restore on error.
+  async function optimisticDelete(
+    id: string,
+    fn: (id: string) => Promise<void>,
+  ): Promise<void> {
+    if (disposed) throw new Error('createServerDataSource: controller is disposed')
+    const prevRows = state.rows
+    const prevTotal = state.total
+    const next = prevRows.filter((r) => getRowId!(r) !== id)
+    if (next.length === prevRows.length) return mutate('deleteRow', () => fn(id))
+
+    state.rows = next
+    state.total = Math.max(0, prevTotal - (prevRows.length - next.length))
+    state.saving = true
+    emit()
+    try {
+      await fn(id)
+    } catch (err) {
+      state.rows = prevRows
+      state.total = prevTotal
+      throw err
+    } finally {
+      state.saving = false
+      emit()
+    }
+  }
+
   return {
     refresh: fetchPage,
+    createRow: (input) =>
+      mutate('createRow', source.createRow ? () => source.createRow!(input) : null),
+    updateRow: (id, patch) => {
+      if (!source.updateRow) return mutate('updateRow', null)
+      const fn = source.updateRow
+      return optimistic ? optimisticUpdate(id, patch, fn) : mutate('updateRow', () => fn(id, patch))
+    },
+    deleteRow: (id) => {
+      if (!source.deleteRow) return mutate('deleteRow', null)
+      const fn = source.deleteRow
+      return optimistic ? optimisticDelete(id, fn) : mutate('deleteRow', () => fn(id))
+    },
     setSort(sortModel) {
       state.sortModel = sortModel
       state.pageIndex = 0
@@ -158,6 +299,13 @@ export function createServerDataSource<TData>(
     getState: () => ({ ...state }),
     dispose() {
       disposed = true
+      // An in-flight fetch's resolution short-circuits on `disposed`, so it
+      // never clears `loading`. Clear it here (and emit) so a disposed
+      // controller doesn't report a permanent loading state.
+      if (state.loading) {
+        state.loading = false
+        emit()
+      }
     },
   }
 }

package/src/sparkline.test.ts

@@ -34,6 +34,15 @@ describe('buildSparkline', () => {
     expect(g.areaPath.endsWith('Z')).toBe(true)
   })
 
+  it('renders a visible mark for a single data point (#84)', () => {
+    // A lone point used to produce just "M x,y" (a moveto), which draws
+    // nothing. The fix centres it and emits a short segment.
+    const g = buildSparkline([5], { type: 'line', width: 100, height: 20 })!
+    expect(g.linePath).not.toBe('')
+    expect(g.linePath).toMatch(/M[\d.]+,[\d.]+ L[\d.]+,[\d.]+/)
+    expect(g.lastPoint).not.toBeNull()
+  })
+
   it('emits one bar per value and flags negatives', () => {
     const g = buildSparkline([-2, 4, -1], { type: 'bar' })!
     expect(g.bars).toHaveLength(3)

package/src/sparkline.ts

@@ -137,12 +137,17 @@ export function buildSparkline(
   const n = values.length
   const stepX = n > 1 ? innerW / (n - 1) : 0
   const pts = values.map((v, i) => ({
-    x: pad + i * stepX,
+    // A single point has no span to walk, so centre it rather than pinning it
+    // to the left edge.
+    x: n === 1 ? pad + innerW / 2 : pad + i * stepX,
     y: pad + innerH - ((v - min) / span) * innerH,
   }))
-  const linePath = pts
-    .map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`)
-    .join(' ')
+  const linePath =
+    n === 1
+      ? // One point produces only a moveto, which draws nothing. Emit a tiny
+        // horizontal segment so a single value still renders a visible mark.
+        `M${round(pts[0]!.x - 1)},${round(pts[0]!.y)} L${round(pts[0]!.x + 1)},${round(pts[0]!.y)}`
+      : pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`).join(' ')
   const first = pts[0]!
   const last = pts[pts.length - 1]!
   const baseY = pad + innerH

package/src/svgrid-wrapper.types.ts

@@ -1,4 +1,5 @@
-import type { ColumnDef, RowData, SvGridOptions, TableFeatures } from './core'
+import type { CellFormatConfig, ColumnDef, RowData, SvGridOptions, TableFeatures } from './core'
+import type { GridExportOptions, GridClipboardOptions } from './export-format'
 
 export type SvGridFilterOperator =
   | 'contains'
@@ -197,8 +198,34 @@ export type SvGridApi<
     field?: string
     header: string
     visible: boolean
+    /** The column's `format` config, when set. Lets an exporter reproduce
+     *  the on-screen display value (currency, date pattern, etc.). */
+    format?: CellFormatConfig
+    /** Effective horizontal alignment ('left' | 'center' | 'right'). */
+    align?: 'left' | 'center' | 'right'
   }>
 
+  // ----- Free data export (CSV / TSV / JSON + clipboard) -----
+  /**
+   * Export the grid to a **CSV** file. Free in the community grid; the
+   * richer Excel / PDF / styled formats live in @svgrid/enterprise. Values
+   * are formatted as shown on screen (pass `rawValues: true` for raw). Rows
+   * default to the current view (`rows: 'selected' | 'all'` to change).
+   * Resolves with the serialized text; pass `download: false` to skip the
+   * browser download and just get the string.
+   */
+  exportCsv(options?: GridExportOptions): Promise<string>
+  /** Export the grid to a **TSV** file (tab-separated). See `exportCsv`. */
+  exportTsv(options?: GridExportOptions): Promise<string>
+  /** Export the grid to a **JSON** file (array of `{ field: value }`). */
+  exportJson(options?: GridExportOptions): Promise<string>
+  /**
+   * Copy the grid to the system clipboard. `format: 'tsv'` (default) pastes
+   * straight into Excel / Sheets; `'csv'` / `'markdown'` also supported.
+   * Resolves with the copied text.
+   */
+  copyToClipboard(options?: GridClipboardOptions): Promise<string>
+
   /** Clear every checked row. Emits `onRowSelectionChange({}, [])`. */
   clearRowSelection(): void
 

package/src/svgrid.behavior.test.ts

@@ -351,6 +351,33 @@ describe('SvGrid - capability shortcuts', () => {
     }
   })
 
+  it('paginationPosition mounts + gates the bottom pager', async () => {
+    // The top pager is gated on measurement (jsdom does not measure), so it's not
+    // asserted here; the visible top pager is covered by the browser/e2e check.
+    // This guards the mount path (a top footer rendered pre-measure used to crash).
+    for (const paginationPosition of ['top', 'both', 'bottom'] as const) {
+      const g = await mountGrid({ showPagination: true, paginationPosition })
+      try {
+        await tick()
+        expect(g.api).toBeTruthy()
+        const bottoms = [...g.target.querySelectorAll('.sv-grid-pagination')].filter((el) => !el.classList.contains('sv-grid-pagination-top'))
+        expect(bottoms.length).toBe(paginationPosition === 'top' ? 0 : 1) // no bottom pager when position is 'top'
+      } finally {
+        g.destroy()
+      }
+    }
+  })
+
+  it('pageSizeOptions is accepted by the pager', async () => {
+    const g = await mountGrid({ showPagination: true, pageSizeOptions: [5, 15, 45] })
+    try {
+      await tick()
+      expect(g.target.querySelector('.sv-grid-pagination')).toBeTruthy()
+    } finally {
+      g.destroy()
+    }
+  })
+
   it('editable={false} blocks inline editing entry points', async () => {
     const { api, target, destroy } = await mountGrid({ editable: false })
     try {

package/src/svgrid.new-features.wrapper.test.ts

@@ -75,11 +75,37 @@ describe('SvGrid wrapper - cellClass + rowClass', () => {
 
   it('computes the cell-level class per column and threads it onto the <td>', () => {
     expect(source).toMatch(/function computeCellClass/)
-    expect(source).toMatch(/userCellClass = computeCellClass\(row, rendered\.column\)/)
+    expect(source).toMatch(/userCellClass = computeCellClass\(\s*row,\s*rendered\.column,?\s*\)/)
     expect(source).toMatch(/class=\{`sv-grid-cell \$\{userCellClass\}`\}/)
   })
 })
 
+describe('SvGrid wrapper - declarative cell validation (validate hook)', () => {
+  it('reads the column validate hook with the documented return union', () => {
+    expect(source).toMatch(/column\.columnDef\.validate/)
+    expect(source).toMatch(/=>\s*string\s*\|\s*boolean\s*\|\s*null\s*\|\s*undefined/)
+  })
+
+  it('computes per-cell validity in the render layer (runs for every rendered cell)', () => {
+    expect(source).toMatch(/function computeCellValidity/)
+    expect(source).toMatch(/columnDef\.validate/)
+    // Valid when null / undefined / true; invalid on false or a message.
+    expect(source).toMatch(/if \(out == null \|\| out === true\)/)
+  })
+
+  it('threads the invalid class + message tooltip onto both <td> render paths', () => {
+    const hits = source.match(/class:sv-grid-cell-invalid=\{cellValidity\.invalid\}/g) ?? []
+    expect(hits.length).toBeGreaterThanOrEqual(2)
+    // Message wins over the plain column tooltip when the cell is invalid.
+    expect(source).toMatch(/cellValidity\.invalid && cellValidity\.message/)
+  })
+
+  it('forwards computeCellValidity through the controller so the wrapper can read it', () => {
+    expect(source).toMatch(/get computeCellValidity\(\)\s*\{\s*return computeCellValidity;/)
+    expect(source).toMatch(/computeCellValidity\s*=\s*\$derived\(ctrl\.computeCellValidity\)/)
+  })
+})
+
 describe('SvGrid wrapper - column-layout API', () => {
   it('declares setColumnWidth + getColumnWidths in the public type', () => {
     expect(types).toContain('setColumnWidth(columnId: string, width: number): void')

package/src/ui-buttons.test.ts

@@ -0,0 +1,105 @@
+/**
+ * Group B (buttons & toggles) component tests. Each asserts the emitted value /
+ * ARIA state a real interaction produces.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvToggleButton from './SvToggleButton.svelte'
+import SvSwitchButton from './SvSwitchButton.svelte'
+import SvCheckBox from './SvCheckBox.svelte'
+import SvRadioGroup from './SvRadioGroup.svelte'
+import SvRating from './SvRating.svelte'
+
+function mnt(Comp: any, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(Comp, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('SvToggleButton', () => {
+  it('reflects pressed and emits the flipped value', () => {
+    let got: boolean | undefined
+    const { target, destroy } = mnt(SvToggleButton, { pressed: false, onChange: (v: boolean) => (got = v) })
+    try {
+      const btn = target.querySelector<HTMLButtonElement>('.sv-toggle')!
+      expect(btn.getAttribute('aria-pressed')).toBe('false')
+      btn.click(); flushSync()
+      expect(got).toBe(true)
+    } finally { destroy() }
+  })
+})
+
+describe('SvSwitchButton', () => {
+  it('has role switch and toggles', () => {
+    let got: boolean | undefined
+    const { target, destroy } = mnt(SvSwitchButton, { checked: false, onChange: (v: boolean) => (got = v) })
+    try {
+      const sw = target.querySelector<HTMLButtonElement>('[role="switch"]')!
+      expect(sw.getAttribute('aria-checked')).toBe('false')
+      sw.click(); flushSync()
+      expect(got).toBe(true)
+    } finally { destroy() }
+  })
+  it('ArrowRight turns on, ArrowLeft off', () => {
+    const states: boolean[] = []
+    const { target, destroy } = mnt(SvSwitchButton, { checked: false, onChange: (v: boolean) => states.push(v) })
+    try {
+      const sw = target.querySelector<HTMLButtonElement>('[role="switch"]')!
+      sw.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      expect(states.at(-1)).toBe(true)
+    } finally { destroy() }
+  })
+})
+
+describe('SvCheckBox', () => {
+  it('toggles and reports aria-checked mixed when indeterminate', () => {
+    let got: boolean | undefined
+    const a = mnt(SvCheckBox, { checked: false, onChange: (v: boolean) => (got = v) })
+    try {
+      const box = a.target.querySelector<HTMLButtonElement>('[role="checkbox"]')!
+      box.click(); flushSync()
+      expect(got).toBe(true)
+    } finally { a.destroy() }
+    const b = mnt(SvCheckBox, { indeterminate: true })
+    try {
+      expect(b.target.querySelector('[role="checkbox"]')!.getAttribute('aria-checked')).toBe('mixed')
+    } finally { b.destroy() }
+  })
+})
+
+describe('SvRadioGroup', () => {
+  it('selects on click and arrow-navigates', () => {
+    const picks: unknown[] = []
+    const opts = [{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }, { value: 'c', label: 'C' }]
+    const { target, destroy } = mnt(SvRadioGroup, { options: opts, value: 'a', onChange: (v: unknown) => picks.push(v) })
+    try {
+      const radios = target.querySelectorAll<HTMLButtonElement>('[role="radio"]')
+      expect(radios[0]!.getAttribute('aria-checked')).toBe('true')
+      radios[2]!.click(); flushSync()
+      expect(picks.at(-1)).toBe('c')
+      // roving tabindex: selected is 0, others -1
+      radios[0]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      flushSync()
+      expect(picks.at(-1)).toBe('b')
+    } finally { destroy() }
+  })
+})
+
+describe('SvRating', () => {
+  it('clicking a star emits its value; keyboard steps', () => {
+    const vals: number[] = []
+    const { target, destroy } = mnt(SvRating, { value: 2, onChange: (v: number) => vals.push(v) })
+    try {
+      const stars = target.querySelectorAll<HTMLButtonElement>('.sv-rating__star')
+      expect(stars.length).toBe(5)
+      stars[3]!.click(); flushSync()
+      expect(vals.at(-1)).toBe(4)
+      target.querySelector<HTMLElement>('.sv-rating')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      expect(vals.at(-1)).toBe(3) // 2 + 1 step
+    } finally { destroy() }
+  })
+})

package/src/ui-composite.test.ts

@@ -0,0 +1,89 @@
+/** Group F (tabs / tree / form) component tests. */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvTabs from './SvTabs.svelte'
+import SvTree from './SvTree.svelte'
+import SvForm from './SvForm.svelte'
+
+function mnt(Comp: any, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(Comp, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('SvTabs', () => {
+  const tabs = [{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }, { id: 'c', label: 'C', disabled: true }]
+  it('selects on click and arrow-navigates skipping disabled', () => {
+    let got = ''
+    const { target, destroy } = mnt(SvTabs, { tabs, value: 'a', onChange: (id: string) => (got = id) })
+    try {
+      const els = target.querySelectorAll<HTMLButtonElement>('[role="tab"]')
+      expect(els[0]!.getAttribute('aria-selected')).toBe('true')
+      els[1]!.click(); flushSync()
+      expect(got).toBe('b')
+      // ArrowRight from b wraps past disabled c back to a
+      els[1]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      expect(got).toBe('a')
+    } finally { destroy() }
+  })
+})
+
+describe('SvTree', () => {
+  const nodes = [
+    { id: '1', label: 'Root', children: [
+      { id: '1a', label: 'Child A' },
+      { id: '1b', label: 'Child B', children: [{ id: '1b1', label: 'Leaf' }] },
+    ] },
+    { id: '2', label: 'Sibling' },
+  ]
+  it('expands to reveal children and selects', () => {
+    let sel = ''
+    const { target, destroy } = mnt(SvTree, { nodes, expandedIds: ['1'], onSelect: (id: string) => (sel = id) })
+    try {
+      // Root expanded -> shows 1, 1a, 1b, 2 (1b collapsed)
+      expect(target.querySelectorAll('[role="treeitem"]').length).toBe(4)
+      const childA = Array.from(target.querySelectorAll<HTMLElement>('[role="treeitem"]')).find((r) => r.textContent?.includes('Child A'))!
+      childA.click(); flushSync()
+      expect(sel).toBe('1a')
+    } finally { destroy() }
+  })
+  it('cascading checkbox checks all descendants', () => {
+    let checked: string[] = []
+    const { target, destroy } = mnt(SvTree, { nodes, expandedIds: ['1', '1b'], checkable: true, checked, onCheck: (ids: string[]) => (checked = ids) })
+    try {
+      const rootCheck = target.querySelector<HTMLButtonElement>('.sv-tree__check')!
+      rootCheck.click(); flushSync()
+      // Root + all descendants: 1,1a,1b,1b1
+      expect(new Set(checked)).toEqual(new Set(['1', '1a', '1b', '1b1']))
+    } finally { destroy() }
+  })
+})
+
+describe('SvForm', () => {
+  const fields = [
+    { name: 'name', label: 'Name', required: true },
+    { name: 'age', label: 'Age', type: 'number' as const },
+  ]
+  it('blocks submit and shows errors when required is empty', () => {
+    let submitted: any = null
+    const { target, destroy } = mnt(SvForm, { fields, onSubmit: (v: any) => (submitted = v) })
+    try {
+      target.querySelector<HTMLFormElement>('.sv-form')!.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+      flushSync()
+      expect(submitted).toBeNull()
+      expect(target.querySelector('.sv-form__error')!.textContent).toContain('required')
+    } finally { destroy() }
+  })
+  it('submits values when valid', () => {
+    let submitted: any = null
+    const { target, destroy } = mnt(SvForm, { fields, initial: { name: 'Ada' }, onSubmit: (v: any) => (submitted = v) })
+    try {
+      target.querySelector<HTMLFormElement>('.sv-form')!.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+      flushSync()
+      expect(submitted).toEqual({ name: 'Ada' })
+    } finally { destroy() }
+  })
+})

package/src/ui-inputs.test.ts

@@ -0,0 +1,92 @@
+/** Group C (text inputs) component tests. */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvNumberInput from './SvNumberInput.svelte'
+import SvPasswordInput from './SvPasswordInput.svelte'
+import SvMaskedInput from './SvMaskedInput.svelte'
+import SvPhoneInput from './SvPhoneInput.svelte'
+
+function mnt(Comp: any, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(Comp, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('SvNumberInput', () => {
+  it('clamps to max on commit', () => {
+    let got: number | null | undefined
+    const { target, destroy } = mnt(SvNumberInput, { value: 5, min: 0, max: 10, step: 2, onChange: (v: number | null) => (got = v) })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-num__input')!
+      input.dispatchEvent(new FocusEvent('focus'))
+      input.value = '99'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      input.dispatchEvent(new FocusEvent('blur'))
+      flushSync()
+      expect(got).toBe(10)
+    } finally { destroy() }
+  })
+  it('ArrowDown steps down by step from the current value', () => {
+    let got: number | null | undefined
+    const { target, destroy } = mnt(SvNumberInput, { value: 8, min: 0, max: 10, step: 2, onChange: (v: number | null) => (got = v) })
+    try {
+      target.querySelector<HTMLInputElement>('.sv-num__input')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      flushSync()
+      expect(got).toBe(6)
+    } finally { destroy() }
+  })
+})
+
+describe('SvPasswordInput', () => {
+  it('reveal toggle flips the input type', () => {
+    const { target, destroy } = mnt(SvPasswordInput, { value: 'secret' })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-pw__input')!
+      expect(input.type).toBe('password')
+      target.querySelector<HTMLButtonElement>('.sv-pw__eye')!.click()
+      flushSync()
+      expect(target.querySelector<HTMLInputElement>('.sv-pw__input')!.type).toBe('text')
+    } finally { destroy() }
+  })
+  it('computes a strength score', () => {
+    const { target, destroy } = mnt(SvPasswordInput, { value: 'Abcdef1!', showStrength: true })
+    try {
+      expect(target.querySelector('.sv-pw__strength')!.textContent).toBe('Strong')
+    } finally { destroy() }
+  })
+})
+
+describe('SvMaskedInput', () => {
+  it('formats input to the mask and reports raw', () => {
+    let raw = ''
+    let masked = ''
+    const { target, destroy } = mnt(SvMaskedInput, {
+      mask: '(###) ###-####',
+      onChange: (m: string, r: string) => { masked = m; raw = r },
+    })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-masked')!
+      input.value = '1234567890'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      flushSync()
+      expect(masked).toBe('(123) 456-7890')
+      expect(raw).toBe('1234567890')
+    } finally { destroy() }
+  })
+})
+
+describe('SvPhoneInput', () => {
+  it('emits E.164 with dial code and national digits', () => {
+    let out = ''
+    const { target, destroy } = mnt(SvPhoneInput, { country: 'US', onChange: (v: string) => (out = v) })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-phone__number')!
+      input.value = '(415) 555-1234'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      flushSync()
+      expect(out).toBe('+14155551234')
+    } finally { destroy() }
+  })
+})