@svgrid/grid 1.2.34 → 2.0.1

package/src/svgrid.responsive.test.ts

@@ -0,0 +1,72 @@
+/**
+ * Responsive (narrow-container) mode: below the breakpoint the grid un-pins
+ * columns, drops `hideBelow` columns, and marks the scroll container.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+
+afterEach(() => { document.body.innerHTML = '' })
+
+/** Force a narrow measured width so `viewportWidth` reads < breakpoint. */
+function withWidth(px: number, fn: () => void) {
+  const desc = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth')
+  Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, get: () => px })
+  try { fn() } finally {
+    if (desc) Object.defineProperty(HTMLElement.prototype, 'clientWidth', desc)
+    else delete (HTMLElement.prototype as any).clientWidth
+  }
+}
+
+const data = [{ id: 1, a: 'x', b: 'y', c: 'z' }]
+const columns = [
+  { field: 'a', header: 'A', width: 120 },
+  { field: 'b', header: 'B', width: 120 },
+  { field: 'c', header: 'C', width: 120, hideBelow: 500 },
+]
+
+function render(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid as any, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('SvGrid responsive mode', () => {
+  it('un-pins columns, hides hideBelow columns and marks the container when narrow', () => {
+    withWidth(400, () => {
+      const { target, destroy } = render({ data, columns, initialColumnPinning: { left: ['a'] }, responsive: true, containerHeight: 300 })
+      try {
+        const container = target.querySelector('.sv-grid-container')!
+        expect(container.classList.contains('sv-grid-narrow')).toBe(true)
+        // pinning is suspended -> no sticky pinned cells
+        expect(target.querySelectorAll('[data-pinned]')).toHaveLength(0)
+        // column c (hideBelow 500, width 400) is dropped; a + b stay
+        expect(target.querySelector('[data-col-id="a"]')).not.toBeNull()
+        expect(target.querySelector('[data-col-id="c"]')).toBeNull()
+      } finally { destroy() }
+    })
+  })
+
+  it('keeps pinning + all columns on a wide container', () => {
+    withWidth(1000, () => {
+      const { target, destroy } = render({ data, columns, initialColumnPinning: { left: ['a'] }, responsive: true, containerHeight: 300 })
+      try {
+        expect(target.querySelector('.sv-grid-container')!.classList.contains('sv-grid-narrow')).toBe(false)
+        expect(target.querySelectorAll('[data-pinned]').length).toBeGreaterThan(0) // 'a' still pinned
+        expect(target.querySelector('[data-col-id="c"]')).not.toBeNull() // 500 < 1000 -> shown
+      } finally { destroy() }
+    })
+  })
+
+  it('does nothing without the responsive prop', () => {
+    withWidth(400, () => {
+      const { target, destroy } = render({ data, columns, initialColumnPinning: { left: ['a'] }, containerHeight: 300 })
+      try {
+        expect(target.querySelector('.sv-grid-container')!.classList.contains('sv-grid-narrow')).toBe(false)
+        expect(target.querySelectorAll('[data-pinned]').length).toBeGreaterThan(0)
+      } finally { destroy() }
+    })
+  })
+})

package/src/toast-store.svelte.ts

@@ -0,0 +1,148 @@
+/**
+ * toast-store - the headless model behind <SvToaster>: a singleton reactive
+ * queue of transient notifications with auto-dismiss timers, plus the `toast()`
+ * API you call from anywhere. Every toast is also pushed to the shared ARIA
+ * live region via `announce()`, so screen-reader users hear it even though the
+ * visual toast is off to the side.
+ *
+ * ```ts
+ * import { toast } from '@svgrid/grid'
+ * toast.success('Saved')
+ * toast.error('Could not save', { duration: 0 }) // sticky
+ * ```
+ *
+ * Mount a single <SvToaster /> once near the app root to render the queue.
+ */
+import { announce } from './a11y/live-region'
+
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error'
+
+export type ToastOptions = {
+  variant?: ToastVariant
+  /** Auto-dismiss after N ms. `0` = sticky (dismiss manually). Default 4000. */
+  duration?: number
+  /** Show the dismiss (x) button. Default true. */
+  dismissible?: boolean
+  /** Optional bold title above the message. */
+  title?: string
+}
+
+export type Toast = {
+  id: number
+  message: string
+  variant: ToastVariant
+  duration: number
+  dismissible: boolean
+  title?: string
+}
+
+type VariantOptions = Omit<ToastOptions, 'variant'>
+
+export type ToastFn = {
+  (message: string, options?: ToastOptions): number
+  info: (message: string, options?: VariantOptions) => number
+  success: (message: string, options?: VariantOptions) => number
+  warning: (message: string, options?: VariantOptions) => number
+  error: (message: string, options?: VariantOptions) => number
+}
+
+function createToastStore() {
+  const toasts = $state<Toast[]>([])
+  const timers = new Map<number, ReturnType<typeof setTimeout>>()
+  // Remaining ms + when the current run started, so hovering can pause/resume
+  // the auto-dismiss countdown instead of losing it.
+  const meta = new Map<number, { remaining: number; startedAt: number }>()
+  let seq = 0
+
+  function schedule(id: number, ms: number) {
+    meta.set(id, { remaining: ms, startedAt: Date.now() })
+    timers.set(id, setTimeout(() => dismiss(id), ms))
+  }
+  /** Pause a toast's auto-dismiss (e.g. on hover), banking the time left. */
+  function pause(id: number): void {
+    const timer = timers.get(id)
+    const m = meta.get(id)
+    if (!timer || !m) return
+    clearTimeout(timer)
+    timers.delete(id)
+    m.remaining = Math.max(0, m.remaining - (Date.now() - m.startedAt))
+  }
+  /** Resume a paused toast with the banked time remaining. */
+  function resume(id: number): void {
+    const m = meta.get(id)
+    if (!m || timers.has(id) || m.remaining <= 0) return
+    m.startedAt = Date.now()
+    timers.set(id, setTimeout(() => dismiss(id), m.remaining))
+  }
+
+  function dismiss(id: number): void {
+    const i = toasts.findIndex((t) => t.id === id)
+    if (i >= 0) toasts.splice(i, 1)
+    const timer = timers.get(id)
+    if (timer) {
+      clearTimeout(timer)
+      timers.delete(id)
+    }
+    meta.delete(id)
+  }
+
+  function clear(): void {
+    for (const timer of timers.values()) clearTimeout(timer)
+    timers.clear()
+    meta.clear()
+    toasts.splice(0, toasts.length)
+  }
+
+  function push(message: string, options: ToastOptions = {}): number {
+    const id = ++seq
+    const variant = options.variant ?? 'info'
+    const duration = options.duration ?? 4000
+    const entry: Toast = {
+      id,
+      message,
+      variant,
+      duration,
+      dismissible: options.dismissible ?? true,
+      title: options.title,
+    }
+    toasts.push(entry)
+    // Errors/warnings interrupt (assertive); info/success are polite.
+    announce(entry.title ? `${entry.title}: ${message}` : message, {
+      assertive: variant === 'error' || variant === 'warning',
+    })
+    if (duration > 0) schedule(id, duration)
+    return id
+  }
+
+  const toast = push as ToastFn
+  toast.info = (m, o = {}) => push(m, { ...o, variant: 'info' })
+  toast.success = (m, o = {}) => push(m, { ...o, variant: 'success' })
+  toast.warning = (m, o = {}) => push(m, { ...o, variant: 'warning' })
+  toast.error = (m, o = {}) => push(m, { ...o, variant: 'error' })
+
+  return {
+    get toasts() {
+      return toasts
+    },
+    toast,
+    dismiss,
+    clear,
+    pause,
+    resume,
+  }
+}
+
+const store = createToastStore()
+
+/** Live reactive list of active toasts (read inside a component/effect). */
+export const toastStore = { get toasts() { return store.toasts } }
+/** Show a toast. Returns its id. Has `.info/.success/.warning/.error` helpers. */
+export const toast: ToastFn = store.toast
+/** Dismiss a toast by id. */
+export const dismissToast = (id: number): void => store.dismiss(id)
+/** Remove every toast (and cancel their timers). */
+export const clearToasts = (): void => store.clear()
+/** Pause a toast's auto-dismiss countdown (e.g. while hovered). */
+export const pauseToast = (id: number): void => store.pause(id)
+/** Resume a paused toast's countdown with the time it had left. */
+export const resumeToast = (id: number): void => store.resume(id)

package/src/toast-store.test.ts

@@ -0,0 +1,86 @@
+/**
+ * Tests for the headless toast store: queueing, variants, auto-dismiss timers,
+ * manual dismiss, sticky toasts, and the SR announcement side effect.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { toast, dismissToast, clearToasts, pauseToast, resumeToast, toastStore } from './toast-store.svelte'
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  clearToasts()
+  vi.useRealTimers()
+  document.body.innerHTML = ''
+})
+
+describe('toast store', () => {
+  it('queues a toast with defaults', () => {
+    const id = toast('Hello')
+    expect(toastStore.toasts).toHaveLength(1)
+    const t = toastStore.toasts[0]!
+    expect(t.id).toBe(id)
+    expect(t.message).toBe('Hello')
+    expect(t.variant).toBe('info')
+    expect(t.dismissible).toBe(true)
+  })
+
+  it('variant helpers set the variant', () => {
+    toast.success('ok')
+    toast.error('bad')
+    toast.warning('hmm')
+    expect(toastStore.toasts.map((t) => t.variant)).toEqual(['success', 'error', 'warning'])
+  })
+
+  it('auto-dismisses after its duration', () => {
+    toast('bye', { duration: 3000 })
+    expect(toastStore.toasts).toHaveLength(1)
+    vi.advanceTimersByTime(2999)
+    expect(toastStore.toasts).toHaveLength(1)
+    vi.advanceTimersByTime(1)
+    expect(toastStore.toasts).toHaveLength(0)
+  })
+
+  it('duration 0 is sticky (no auto-dismiss)', () => {
+    toast('stay', { duration: 0 })
+    vi.advanceTimersByTime(60_000)
+    expect(toastStore.toasts).toHaveLength(1)
+  })
+
+  it('dismissToast removes by id and cancels its timer', () => {
+    const id = toast('x', { duration: 5000 })
+    dismissToast(id)
+    expect(toastStore.toasts).toHaveLength(0)
+    // Advancing past the original duration must not throw or double-remove.
+    vi.advanceTimersByTime(5000)
+    expect(toastStore.toasts).toHaveLength(0)
+  })
+
+  it('announces via a live region (assertive for errors)', () => {
+    toast.error('boom')
+    vi.runOnlyPendingTimers()
+    // The store routes errors to the assertive live region.
+    expect(document.querySelector('[aria-live="assertive"]')).not.toBeNull()
+  })
+
+  it('pause banks the remaining time and resume finishes it (hover to keep)', () => {
+    const id = toast('hover me', { duration: 3000 })
+    vi.advanceTimersByTime(1000) // 2000 left
+    pauseToast(id)
+    vi.advanceTimersByTime(10_000) // stays while paused
+    expect(toastStore.toasts).toHaveLength(1)
+    resumeToast(id)
+    vi.advanceTimersByTime(1999)
+    expect(toastStore.toasts).toHaveLength(1)
+    vi.advanceTimersByTime(1) // banked 2000ms elapsed
+    expect(toastStore.toasts).toHaveLength(0)
+  })
+
+  it('clearToasts empties the queue', () => {
+    toast('a'); toast('b'); toast('c')
+    expect(toastStore.toasts).toHaveLength(3)
+    clearToasts()
+    expect(toastStore.toasts).toHaveLength(0)
+  })
+})

package/src/tree-edit.test.ts

@@ -0,0 +1,49 @@
+/**
+ * Tests for the pure tree edit helpers: moveTreeNode (before/after/inside +
+ * invalid-move guards) and sortTreeNodes (recursive), plus treeContains.
+ */
+import { describe, expect, it } from 'vitest'
+import { moveTreeNode, sortTreeNodes, treeContains, type TreeNode } from './createTree.svelte'
+
+const tree: TreeNode[] = [
+  { id: 'a', label: 'A', children: [{ id: 'a1', label: 'A1' }, { id: 'a2', label: 'A2' }] },
+  { id: 'b', label: 'B' },
+  { id: 'c', label: 'C' },
+]
+const ids = (list: TreeNode[]) => list.map((n) => n.id)
+
+describe('moveTreeNode', () => {
+  it('moves before / after a sibling', () => {
+    expect(ids(moveTreeNode(tree, 'c', 'a', 'before'))).toEqual(['c', 'a', 'b'])
+    expect(ids(moveTreeNode(tree, 'b', 'c', 'after'))).toEqual(['a', 'c', 'b'])
+  })
+  it('moves inside a folder (appends to children)', () => {
+    const out = moveTreeNode(tree, 'b', 'a', 'inside')
+    expect(ids(out)).toEqual(['a', 'c'])
+    expect(out[0].children!.map((n) => n.id)).toEqual(['a1', 'a2', 'b'])
+  })
+  it('refuses to drop a node into its own descendant, or onto itself', () => {
+    expect(moveTreeNode(tree, 'a', 'a1', 'inside')).toEqual(tree)
+    expect(moveTreeNode(tree, 'a', 'a', 'before')).toEqual(tree)
+  })
+})
+
+describe('sortTreeNodes', () => {
+  it('sorts siblings recursively', () => {
+    const unsorted: TreeNode[] = [
+      { id: 'z', label: 'Zebra' },
+      { id: 'm', label: 'Mango', children: [{ id: 'p', label: 'Pear' }, { id: 'a', label: 'Apple' }] },
+      { id: 'a', label: 'Ant' },
+    ]
+    const asc = sortTreeNodes(unsorted, (x, y) => x.label.localeCompare(y.label))
+    expect(ids(asc)).toEqual(['a', 'm', 'z'])
+    expect(asc[1].children!.map((n) => n.label)).toEqual(['Apple', 'Pear'])
+  })
+})
+
+describe('treeContains', () => {
+  it('detects descendants', () => {
+    expect(treeContains(tree[0], 'a2')).toBe(true)
+    expect(treeContains(tree[0], 'b')).toBe(false)
+  })
+})

package/src/tree-filter.test.ts

@@ -0,0 +1,56 @@
+/**
+ * SvTree filter/search: typing a query shows only matching nodes + their
+ * ancestors (auto-expanded), and clearing restores the tree.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvTree from './SvTree.svelte'
+
+const nodes = [
+  { id: 'src', label: 'src', children: [
+    { id: 'a', label: 'App.svelte' },
+    { id: 'b', label: 'utils.ts' },
+  ] },
+  { id: 'pub', label: 'public', children: [
+    { id: 'c', label: 'logo.svg' },
+  ] },
+]
+
+function mountTree(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvTree, { target, props: { nodes, expandedIds: ['src', 'pub'], ...props } as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+const labels = (t: HTMLElement) => [...t.querySelectorAll('.sv-tree__label')].map((n) => n.textContent)
+
+describe('SvTree filter', () => {
+  it('shows only matches + ancestors (auto-expanded)', () => {
+    const { target, destroy } = mountTree({ filter: 'utils' })
+    try {
+      const shown = labels(target)
+      expect(shown).toContain('src')       // ancestor kept
+      expect(shown).toContain('utils.ts')  // match
+      expect(shown).not.toContain('App.svelte')
+      expect(shown).not.toContain('public')
+    } finally { destroy() }
+  })
+
+  it('matching an ancestor label shows it (and its subtree stays reachable)', () => {
+    const { target, destroy } = mountTree({ filter: 'public' })
+    try {
+      const shown = labels(target)
+      expect(shown).toContain('public')
+      expect(shown).not.toContain('src')
+    } finally { destroy() }
+  })
+
+  it('renders a built-in search box when searchable', () => {
+    const { target, destroy } = mountTree({ searchable: true })
+    try {
+      expect(target.querySelector('.sv-tree__search-input')).not.toBeNull()
+      expect(labels(target)).toContain('App.svelte') // unfiltered initially
+    } finally { destroy() }
+  })
+})

package/src/tree-select.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { flattenVisible, findNodePath, branchValues } from './tree-select'
+import type { TreeSelectNode } from './ui-app.types'
+
+const tree: TreeSelectNode[] = [
+  { value: 'asia', label: 'Asia', children: [
+    { value: 'jp', label: 'Japan', children: [{ value: 'tokyo', label: 'Tokyo' }] },
+    { value: 'cn', label: 'China' },
+  ] },
+  { value: 'eu', label: 'Europe', children: [{ value: 'fr', label: 'France' }] },
+]
+
+describe('flattenVisible', () => {
+  it('shows only roots when nothing is expanded', () => {
+    const rows = flattenVisible(tree, new Set())
+    expect(rows.map((r) => r.node.value)).toEqual(['asia', 'eu'])
+    expect(rows.every((r) => r.depth === 0)).toBe(true)
+    expect(rows[0]!.hasChildren).toBe(true)
+  })
+
+  it('reveals children of expanded nodes with increasing depth', () => {
+    const rows = flattenVisible(tree, new Set(['asia']))
+    expect(rows.map((r) => r.node.value)).toEqual(['asia', 'jp', 'cn', 'eu'])
+    expect(rows.find((r) => r.node.value === 'jp')!.depth).toBe(1)
+  })
+
+  it('nests deeply when a branch chain is expanded', () => {
+    const rows = flattenVisible(tree, new Set(['asia', 'jp']))
+    expect(rows.map((r) => r.node.value)).toEqual(['asia', 'jp', 'tokyo', 'cn', 'eu'])
+    expect(rows.find((r) => r.node.value === 'tokyo')!.depth).toBe(2)
+  })
+})
+
+describe('findNodePath', () => {
+  it('returns the root-to-node path', () => {
+    expect(findNodePath(tree, 'tokyo')!.map((n) => n.value)).toEqual(['asia', 'jp', 'tokyo'])
+    expect(findNodePath(tree, 'eu')!.map((n) => n.value)).toEqual(['eu'])
+  })
+  it('returns null for unknown values', () => {
+    expect(findNodePath(tree, 'nope')).toBeNull()
+  })
+})
+
+describe('branchValues', () => {
+  it('lists every node that has children', () => {
+    expect(branchValues(tree).sort()).toEqual(['asia', 'eu', 'jp'])
+  })
+})

package/src/tree-select.ts

@@ -0,0 +1,62 @@
+/**
+ * tree-select - pure tree helpers behind <SvTreeSelect>: flatten the visible
+ * rows for the current expansion state (so keyboard nav is a flat index), and
+ * resolve the path from root to a value (for the trigger label). Framework-free
+ * + pure so they are unit-tested directly.
+ */
+import type { TreeSelectNode } from './ui-app.types'
+
+export type FlatRow = {
+  node: TreeSelectNode
+  depth: number
+  hasChildren: boolean
+  expanded: boolean
+}
+
+/** The rows currently visible given the `expanded` set, in display order. */
+export function flattenVisible(
+  nodes: ReadonlyArray<TreeSelectNode>,
+  expanded: ReadonlySet<string | number>,
+  depth = 0,
+): FlatRow[] {
+  const rows: FlatRow[] = []
+  for (const node of nodes) {
+    const hasChildren = !!node.children && node.children.length > 0
+    const isExpanded = expanded.has(node.value)
+    rows.push({ node, depth, hasChildren, expanded: isExpanded })
+    if (hasChildren && isExpanded) {
+      rows.push(...flattenVisible(node.children!, expanded, depth + 1))
+    }
+  }
+  return rows
+}
+
+/** Path of nodes from a root down to `value`, or null if not found. */
+export function findNodePath(
+  nodes: ReadonlyArray<TreeSelectNode>,
+  value: string | number,
+): TreeSelectNode[] | null {
+  for (const node of nodes) {
+    if (node.value === value) return [node]
+    if (node.children) {
+      const sub = findNodePath(node.children, value)
+      if (sub) return [node, ...sub]
+    }
+  }
+  return null
+}
+
+/** Every value that has children (useful for "expand all"). */
+export function branchValues(nodes: ReadonlyArray<TreeSelectNode>): Array<string | number> {
+  const out: Array<string | number> = []
+  const walk = (list: ReadonlyArray<TreeSelectNode>) => {
+    for (const n of list) {
+      if (n.children && n.children.length) {
+        out.push(n.value)
+        walk(n.children)
+      }
+    }
+  }
+  walk(nodes)
+  return out
+}

package/src/ui-app.test.ts

@@ -0,0 +1,130 @@
+/**
+ * Component tests for the app-UI set: SvPagination, SvBreadcrumb, SvStepper,
+ * SvAvatar, SvContextMenu - semantics, active/current state, and interaction.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvPagination from './SvPagination.svelte'
+import SvBreadcrumb from './SvBreadcrumb.svelte'
+import SvStepper from './SvStepper.svelte'
+import SvAvatar from './SvAvatar.svelte'
+import SvContextMenu from './SvContextMenu.svelte'
+
+function mountOn(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('SvPagination', () => {
+  it('marks the current page with aria-current and disables prev on page 1', () => {
+    const { target, destroy } = mountOn(SvPagination, { page: 1, pageCount: 10 })
+    try {
+      const active = target.querySelector('.sv-pg__btn.is-active')!
+      expect(active.getAttribute('aria-current')).toBe('page')
+      expect(active.textContent).toBe('1')
+      const prev = target.querySelector<HTMLButtonElement>('[aria-label="Previous page"]')!
+      expect(prev.disabled).toBe(true)
+    } finally { destroy() }
+  })
+
+  it('emits the page number on click', () => {
+    let got: number | undefined
+    const { target, destroy } = mountOn(SvPagination, { page: 1, pageCount: 10, onChange: (n: number) => (got = n) })
+    try {
+      const next = target.querySelector<HTMLButtonElement>('[aria-label="Next page"]')!
+      next.click()
+      flushSync()
+      expect(got).toBe(2)
+    } finally { destroy() }
+  })
+})
+
+describe('SvBreadcrumb', () => {
+  const items = [{ label: 'Home', href: '/' }, { label: 'Orders', href: '/orders' }, { label: '#1024' }]
+
+  it('renders links for non-last crumbs and marks the last as current', () => {
+    const { target, destroy } = mountOn(SvBreadcrumb, { items })
+    try {
+      expect(target.querySelectorAll('a.sv-bc__link')).toHaveLength(2)
+      expect(target.querySelector('[aria-current="page"]')!.textContent).toContain('#1024')
+    } finally { destroy() }
+  })
+
+  it('collapses the middle when over maxItems', () => {
+    const many = [
+      { label: 'A', href: '/a' }, { label: 'B', href: '/b' }, { label: 'C', href: '/c' },
+      { label: 'D', href: '/d' }, { label: 'E' },
+    ]
+    const { target, destroy } = mountOn(SvBreadcrumb, { items: many, maxItems: 3 })
+    try {
+      expect(target.querySelector('.sv-bc__ellipsis')).not.toBeNull()
+      target.querySelector<HTMLButtonElement>('.sv-bc__ellipsis')!.click()
+      flushSync()
+      expect(target.querySelector('.sv-bc__ellipsis')).toBeNull() // expanded
+    } finally { destroy() }
+  })
+})
+
+describe('SvStepper', () => {
+  const steps = [{ label: 'Cart' }, { label: 'Shipping' }, { label: 'Pay' }]
+
+  it('flags the active step and completes earlier ones', () => {
+    const { target, destroy } = mountOn(SvStepper, { steps, current: 1 })
+    try {
+      const items = target.querySelectorAll('.sv-step__item')
+      expect(items[0]!.classList.contains('is-complete')).toBe(true)
+      expect(items[1]!.classList.contains('is-active')).toBe(true)
+      expect(items[2]!.classList.contains('is-upcoming')).toBe(true)
+      expect(target.querySelector('[aria-current="step"]')).not.toBeNull()
+    } finally { destroy() }
+  })
+
+  it('disables upcoming steps in linear mode', () => {
+    const { target, destroy } = mountOn(SvStepper, { steps, current: 1, linear: true })
+    try {
+      const btns = target.querySelectorAll<HTMLButtonElement>('.sv-step__btn')
+      expect(btns[2]!.disabled).toBe(true) // upcoming, not reachable
+      expect(btns[0]!.disabled).toBe(false) // completed, reachable
+    } finally { destroy() }
+  })
+})
+
+describe('SvAvatar', () => {
+  it('renders initials with an img role when there is no src', () => {
+    const { target, destroy } = mountOn(SvAvatar, { name: 'Ada Lovelace' })
+    try {
+      const el = target.querySelector('.sv-avatar')!
+      expect(el.getAttribute('role')).toBe('img')
+      expect(el.getAttribute('aria-label')).toBe('Ada Lovelace')
+      expect(target.querySelector('.sv-avatar__initials')!.textContent).toBe('AL')
+    } finally { destroy() }
+  })
+
+  it('renders a status dot when status is set', () => {
+    const { target, destroy } = mountOn(SvAvatar, { name: 'X', status: 'online' })
+    try {
+      expect(target.querySelector('.sv-avatar__status.is-online')).not.toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvContextMenu', () => {
+  it('opens a menu at the pointer on contextmenu and closes on Escape', () => {
+    const items = [{ label: 'Copy' }, { label: 'Delete' }]
+    const { target, destroy } = mountOn(SvContextMenu, { items })
+    try {
+      const zone = target.querySelector('.sv-ctx__zone')!
+      zone.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 40, clientY: 40 }))
+      flushSync()
+      expect(document.body.querySelector('.sv-ctx')).not.toBeNull()
+      expect(document.body.querySelectorAll('[role="menuitem"]').length).toBe(2)
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      flushSync()
+      expect(document.body.querySelector('.sv-ctx')).toBeNull()
+    } finally { destroy() }
+  })
+})