@svgrid/grid 1.2.34 → 2.0.1

package/src/index.ts

@@ -69,12 +69,60 @@ export { createGrid, createSvGrid, type SvelteGrid } from './createGrid.svelte'
 export { createGridState, createSvGridState } from './createGridState.svelte'
 export { subscribeGrid, subscribeSvGrid } from './subscribe'
 export { default as SvGrid } from './SvGrid.svelte'
+export { default as SvGridBoard } from './SvGridBoard.svelte'
+export type { BoardConfig, BoardLane, BoardCardMoveEvent, BoardCardCommitEvent, BoardLayout, BoardSubtask, BoardComment, BoardMenuContext, BoardLaneMenuContext, BoardDrawerConfig } from './SvGrid.types'
 export { default as SvGridDropdown } from './SvGridDropdown.svelte'
 export { default as SvCalendar, type CalendarValue, type CalendarPreset, type CalendarAnimation } from './SvCalendar.svelte'
+export { matchesRecurrence, expandRecurrence, type RecurrenceRule, type RecurrenceFreq } from './recurrence'
 export { default as SvTimePicker, type TimeValue } from './SvTimePicker.svelte'
 export { default as SvDateTimePicker, type DateTimeValue } from './SvDateTimePicker.svelte'
+export { default as SvDateRangeInput, type DateRangeValue } from './SvDateRangeInput.svelte'
+export { default as SvButtonGroup, type ButtonGroupItem, type ButtonGroupMode, type ButtonGroupValue } from './SvButtonGroup.svelte'
 // UI kit - shared editor contract (common props + a11y wiring for every editor)
-export { editorAria, editorErrorId, type SvEditorProps, type EditorSize, type EditorAriaState } from './editor-contract'
+export {
+  editorAria,
+  editorErrorId,
+  editorHintId,
+  nextEditorId,
+  resolveMessages,
+  type SvEditorProps,
+  type EditorSize,
+  type EditorDir,
+  type EditorAriaState,
+} from './editor-contract'
+// UI kit - editor interaction surface (commit/cancel/close for grid-cell use)
+export { type EditorInteraction } from './editor-contract'
+// UI kit - shared a11y primitives (focus trap, scroll lock, dismissable layers, live region)
+export {
+  FOCUSABLE_SELECTOR,
+  getFocusable,
+  createFocusTrap,
+  type FocusTrap,
+  type FocusTrapOptions,
+} from './a11y/focus-trap'
+export { lockScroll, scrollLockDepth } from './a11y/scroll-lock'
+export {
+  createDismissableLayer,
+  dismissableDepth,
+  type DismissableLayer,
+  type DismissableOptions,
+} from './a11y/dismissable'
+export { announce, type AnnounceOptions } from './a11y/live-region'
+// UI kit - custom cell-editor registry (register any component as a grid editor)
+export {
+  registerCellEditor,
+  getCellEditor,
+  hasCellEditor,
+  unregisterCellEditor,
+  registeredCellEditorTypes,
+  defaultEditorProps,
+  resolveEditorProps,
+  type CellEditorContext,
+  type CellEditorRegistration,
+} from './editor-registry'
+export { registerBuiltinEditors } from './builtin-editors'
+// UI kit - shared field chrome (label + hint + error + direction wrapper)
+export { default as SvField } from './SvField.svelte'
 // UI kit - headless cores (state + prop-getters you render yourself, like createSvGrid)
 export {
   createListbox,
@@ -94,7 +142,7 @@ export { createCountryInput, type CountryInput, type CountryInputConfig } from '
 // Text-input family cores
 export { createNumberInput, type NumberInputConfig, type NumberInputCore } from './createNumberInput.svelte'
 export { createMaskedInput, type MaskedInputConfig, type MaskedInputCore } from './createMaskedInput.svelte'
-export { createPhoneInput, type PhoneInputConfig, type PhoneInputCore } from './createPhoneInput.svelte'
+export { createPhoneInput, type PhoneInputConfig, type PhoneInputCore, type PhoneParts } from './createPhoneInput.svelte'
 export { createColorInput, normalizeHex, type ColorInputConfig, type ColorInputCore } from './createColorInput.svelte'
 export { createPasswordInput, passwordStrength, STRENGTH_LABELS, type PasswordInputConfig, type PasswordInputCore } from './createPasswordInput.svelte'
 // Buttons & toggles family cores
@@ -109,9 +157,10 @@ export { createTimePicker, parseTimeValue, type TimePicker, type TimePickerConfi
 export { createDateTimePicker, type DateTimePicker, type DateTimePickerConfig, type DropDownDisplayMode, type DateTimeTab } from './createDateTimePicker.svelte'
 // Layout & range family cores
 export { createTabs, type Tabs, type TabsConfig, type TabsOrientation, type TabsActivation } from './createTabs.svelte'
-export { createTree, treeDescendantIds, treeCheckState, type Tree, type TreeConfig, type TreeRow, type CheckState } from './createTree.svelte'
+export { createTree, treeDescendantIds, treeCheckState, moveTreeNode, sortTreeNodes, treeContains, type Tree, type TreeConfig, type TreeRow, type CheckState, type TreeDropPosition } from './createTree.svelte'
 export { createSlider, type Slider, type SliderConfig, type SliderValue, type SliderOrientation, type SliderThumb, type SliderPoint } from './createSlider.svelte'
 export { createGauge, type Gauge, type GaugeConfig, type GaugePoint } from './createGauge.svelte'
+export { createButtonGroup, toGroupArray, type ButtonGroup, type ButtonGroupConfig } from './createButtonGroup.svelte'
 // UI kit - Group B (buttons & toggles)
 export { default as SvButton } from './SvButton.svelte'
 export { default as SvRepeatButton } from './SvRepeatButton.svelte'
@@ -121,28 +170,106 @@ export { default as SvCheckBox } from './SvCheckBox.svelte'
 export { default as SvRadioGroup, type RadioOption } from './SvRadioGroup.svelte'
 export { default as SvRating } from './SvRating.svelte'
 // UI kit - Group C (text inputs)
+export { default as SvTextInput } from './SvTextInput.svelte'
+export { default as SvTextArea } from './SvTextArea.svelte'
+export { default as SvOtpInput } from './SvOtpInput.svelte'
+export { sanitizeOtp, otpCells, isOtpComplete } from './otp'
+export { default as SvDurationInput } from './SvDurationInput.svelte'
+export { parseDuration, formatDuration } from './duration'
 export { default as SvNumberInput } from './SvNumberInput.svelte'
 export { default as SvPasswordInput } from './SvPasswordInput.svelte'
 export { default as SvMaskedInput } from './SvMaskedInput.svelte'
 export { default as SvPhoneInput } from './SvPhoneInput.svelte'
 export { default as SvColorInput } from './SvColorInput.svelte'
 export { applyMask, unmask, isMaskComplete } from './datetime/mask'
-export { COUNTRIES, COUNTRY_BY_CODE, flagEmoji, type Country } from './countries'
+export { COUNTRIES, COUNTRY_BY_CODE, flagEmoji, phoneDigitsValid, PHONE_NATIONAL_LENGTHS, type Country } from './countries'
 // UI kit - Group D (selection overlays)
 export { default as SvListBox } from './SvListBox.svelte'
 export { default as SvDropDownList } from './SvDropDownList.svelte'
 export { default as SvComboBox } from './SvComboBox.svelte'
 export { default as SvAutoComplete } from './SvAutoComplete.svelte'
 export { default as SvTagsInput } from './SvTagsInput.svelte'
+export { default as SvMultiSelect, type MultiSelectOption } from './SvMultiSelect.svelte'
+export { debounce, type Debounced } from './debounce'
+export { default as SvTreeSelect, type TreeSelectNode } from './SvTreeSelect.svelte'
+export { flattenVisible, findNodePath, branchValues, type FlatRow } from './tree-select'
+export { default as SvGridSelect, type GridSelectColumn } from './SvGridSelect.svelte'
+export { filterGridRows } from './grid-select'
 export { default as SvCountryInput } from './SvCountryInput.svelte'
-export { filterOptions, type ListOption } from './list-option'
+export {
+  filterOptions,
+  groupOptions,
+  hasGroups,
+  nextTypeaheadIndex,
+  createTypeaheadBuffer,
+  isTypeaheadKey,
+  type ListOption,
+  type IndexedOption,
+  type OptionGroup,
+} from './list-option'
+export { virtualRange, scrollToIndex, type VirtualRange, type VirtualParams } from './virtual'
 // UI kit - Group E (range & feedback)
 export { default as SvSlider } from './SvSlider.svelte'
 export { default as SvGauge } from './SvGauge.svelte'
 // UI kit - Group F (composite / layout)
 export { default as SvTabs, type TabItem } from './SvTabs.svelte'
 export { default as SvTree, type TreeNode as SvTreeNode } from './SvTree.svelte'
+export { default as SvAccordion, type AccordionItem, type AccordionExpandMode } from './SvAccordion.svelte'
+export { createAccordion, type Accordion, type AccordionConfig } from './createAccordion.svelte'
+export { default as SvSplitter, type SplitterOrientation } from './SvSplitter.svelte'
+export { createSplitter, type Splitter, type SplitterConfig, type SplitterPoint } from './createSplitter.svelte'
+export { default as SvFileUpload, type FileRejection, type FileRejectReason } from './SvFileUpload.svelte'
+export { createFileUpload, fileMatchesAccept, type FileUpload, type FileUploadConfig } from './createFileUpload.svelte'
+// UI kit - overlays (popover / tooltip / modal), sharing the popover.ts positioning + animation
+export { default as SvPopover } from './SvPopover.svelte'
+export { default as SvTooltip } from './SvTooltip.svelte'
+export { default as SvModal } from './SvModal.svelte'
+export { default as SvDrawer } from './SvDrawer.svelte'
+export type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
+export { default as SvToaster } from './SvToaster.svelte'
+export { default as SvBadge } from './SvBadge.svelte'
+export { default as SvSkeleton } from './SvSkeleton.svelte'
+export { default as SvCard } from './SvCard.svelte'
+export { default as SvAlert } from './SvAlert.svelte'
+export { default as SvEmptyState } from './SvEmptyState.svelte'
+export { default as SvDivider } from './SvDivider.svelte'
+export { default as SvChip } from './SvChip.svelte'
+export { default as SvStat } from './SvStat.svelte'
+export { default as SvTimeline, type TimelineItem } from './SvTimeline.svelte'
+export { default as SvSparkline } from './SvSparkline.svelte'
+export { default as SvScrollArea } from './SvScrollArea.svelte'
+export { default as SvAvatarGroup } from './SvAvatarGroup.svelte'
+export { default as SvCommand, type CommandItem } from './SvCommand.svelte'
+export { fuzzyScore, fuzzyMatch } from './fuzzy'
+export { default as SvRichText, type RichTextTool } from './SvRichText.svelte'
+export { default as SvCarousel } from './SvCarousel.svelte'
+export { default as SvTour, type TourStep } from './SvTour.svelte'
+export { default as SvPagination } from './SvPagination.svelte'
+export { paginationRange, type PaginationItem, type PaginationRangeOptions } from './paginate'
+export { default as SvBreadcrumb, type BreadcrumbItem } from './SvBreadcrumb.svelte'
+export { default as SvStepper, type StepItem } from './SvStepper.svelte'
+export { default as SvAvatar } from './SvAvatar.svelte'
+export { avatarInitials, avatarColorHue } from './avatar'
+export { default as SvContextMenu } from './SvContextMenu.svelte'
+export {
+  toast,
+  dismissToast,
+  clearToasts,
+  pauseToast,
+  resumeToast,
+  toastStore,
+  type Toast,
+  type ToastVariant,
+  type ToastOptions,
+  type ToastFn,
+} from './toast-store.svelte'
+export { default as SvMenu, type MenuItem } from './SvMenu.svelte'
+export { default as SvNavPane, type NavItem, type NavSection, type NavModule } from './SvNavPane.svelte'
+export { default as SvProgress } from './SvProgress.svelte'
+export { default as SvCircularProgress } from './SvCircularProgress.svelte'
+export { popIn } from './popover'
 export { default as SvForm, type FormField, type FormFieldType } from './SvForm.svelte'
+export { rules, runRules, isEmptyValue, type Validator, type RuleOptions, type CompareOp } from './validators'
 export { anchoredRect, portalToBody, PANEL_THEME_VARS, type AnchoredRect } from './popover'
 export {
   toDate, startOfDay, addDays, addMonths, addYears, clampDate, isSameDay,
@@ -258,7 +385,25 @@ export {
   type ServerState,
   type ServerSortModel,
   type ServerFilterModel,
+  type ServerAggregation,
+  type ServerGroupRow,
+  type ServerLeafRow,
+  type ServerMoreRow,
+  type ServerFooterRow,
+  type ServerSkeletonRow,
+  type ServerDisplayRow,
 } from './server-data-source'
+export {
+  createServerGroupModel,
+  serverGroupRows,
+  serverGroupNav,
+  type ServerGroupController,
+  type ServerGroupControllerOptions,
+  type ServerGroupState,
+  type ServerGroupGridRow,
+} from './server-group-model'
+export { default as SvGroupCell } from './SvGroupCell.svelte'
+export { default as SvRowGroupPanel } from './SvRowGroupPanel.svelte'
 export {
   createNamedViews,
   memoryViews,

package/src/keyboard-handlers.ts

@@ -245,6 +245,26 @@ export function createKeyboard<
     }
     event.preventDefault();
 
+    // Server-side group / tree navigation, built into the grid: ArrowRight
+    // expands a collapsed group row, ArrowLeft collapses an expanded one,
+    // instead of moving the active cell (treegrid-style). Leaves fall through
+    // to normal navigation.
+    const serverGroup = ctx.props.serverGroup;
+    if (serverGroup && (intent === "moveRight" || intent === "moveLeft")) {
+      const data = ctx.allRows[current.rowIndex]?.original;
+      if (data !== undefined && serverGroup.isGroup(data)) {
+        const expanded = serverGroup.expanded?.(data) ?? false;
+        if (intent === "moveRight" && !expanded) {
+          serverGroup.onToggle(data);
+          return;
+        }
+        if (intent === "moveLeft" && expanded) {
+          serverGroup.onToggle(data);
+          return;
+        }
+      }
+    }
+
     if (intent === "clearCells") {
       // Excel `Delete` - clear contents of every cell in the selection
       // (or the active cell if no range). Formatting is left alone, only

package/src/list-option.ts

@@ -13,3 +13,77 @@ export function filterOptions(options: ReadonlyArray<ListOption>, query: string)
   if (!q) return [...options]
   return options.filter((o) => o.label.toLowerCase().includes(q))
 }
+
+/** An option carrying its position in the flat source array (for prop-getters). */
+export type IndexedOption = ListOption & { index: number }
+/** A section of options that share a `group` heading (null = ungrouped). */
+export type OptionGroup = { group: string | null; options: IndexedOption[] }
+
+/**
+ * Bucket options by their `group` heading, preserving each option's flat index
+ * so grouped rendering still drives `optionProps(index)` etc. Groups appear in
+ * first-seen order. When no option sets `group`, the result is a single
+ * `group: null` section (render it flat).
+ */
+export function groupOptions(options: ReadonlyArray<ListOption>): OptionGroup[] {
+  const groups: OptionGroup[] = []
+  const byName = new Map<string | null, OptionGroup>()
+  options.forEach((o, index) => {
+    const key = o.group ?? null
+    let g = byName.get(key)
+    if (!g) { g = { group: key, options: [] }; byName.set(key, g); groups.push(g) }
+    g.options.push({ ...o, index })
+  })
+  return groups
+}
+
+/** Whether any option declares a `group` (so headings are worth rendering). */
+export function hasGroups(options: ReadonlyArray<ListOption>): boolean {
+  return options.some((o) => o.group != null)
+}
+
+/**
+ * Next enabled option index whose label starts with `buffer` (type-ahead),
+ * searching forward from just after `from` and wrapping. Returns -1 for no
+ * match / empty buffer. Case-insensitive.
+ */
+export function nextTypeaheadIndex(
+  options: ReadonlyArray<ListOption>,
+  buffer: string,
+  from: number,
+): number {
+  const b = buffer.trim().toLowerCase()
+  if (!b || !options.length) return -1
+  const n = options.length
+  for (let k = 1; k <= n; k++) {
+    const i = (from + k) % n
+    const o = options[i]
+    if (o && !o.disabled && o.label.toLowerCase().startsWith(b)) return i
+  }
+  return -1
+}
+
+/**
+ * A tiny type-ahead buffer: accumulates printable characters within `timeout`
+ * ms of each other, then resets. Frameworkfree; the caller supplies scheduling.
+ */
+export function createTypeaheadBuffer(timeout = 600) {
+  let buffer = ''
+  let timer: ReturnType<typeof setTimeout> | undefined
+  return {
+    get value() { return buffer },
+    /** Append a character and (re)arm the reset timer. Returns the new buffer. */
+    push(char: string): string {
+      buffer += char
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => { buffer = '' }, timeout)
+      return buffer
+    },
+    clear() { buffer = ''; if (timer) clearTimeout(timer) },
+  }
+}
+
+/** Whether a keydown is a bare printable character (a type-ahead candidate). */
+export function isTypeaheadKey(e: KeyboardEvent): boolean {
+  return e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && e.key !== ' '
+}

package/src/list-power.test.ts

@@ -0,0 +1,71 @@
+/**
+ * Tests for the list "power" features: option grouping (preserving flat index),
+ * type-ahead matching, and their wiring into SvListBox (group headings render;
+ * typing a prefix moves the active option).
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvListBox from './SvListBox.svelte'
+import { groupOptions, hasGroups, nextTypeaheadIndex } from './list-option'
+
+const opts = [
+  { value: 'us', label: 'United States', group: 'Americas' },
+  { value: 'ca', label: 'Canada', group: 'Americas' },
+  { value: 'fr', label: 'France', group: 'Europe' },
+  { value: 'de', label: 'Germany', group: 'Europe' },
+]
+
+describe('groupOptions', () => {
+  it('buckets by group in first-seen order and preserves the flat index', () => {
+    const groups = groupOptions(opts)
+    expect(groups.map((g) => g.group)).toEqual(['Americas', 'Europe'])
+    expect(groups[0].options.map((o) => o.index)).toEqual([0, 1])
+    expect(groups[1].options.map((o) => o.index)).toEqual([2, 3])
+    expect(hasGroups(opts)).toBe(true)
+  })
+  it('returns a single null group when nothing is grouped', () => {
+    const flat = [{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }]
+    expect(groupOptions(flat)).toEqual([{ group: null, options: [{ value: 'a', label: 'A', index: 0 }, { value: 'b', label: 'B', index: 1 }] }])
+    expect(hasGroups(flat)).toBe(false)
+  })
+})
+
+describe('nextTypeaheadIndex', () => {
+  it('finds the next enabled label-prefix match, wrapping from `from`', () => {
+    expect(nextTypeaheadIndex(opts, 'f', -1)).toBe(2)   // France
+    expect(nextTypeaheadIndex(opts, 'g', 2)).toBe(3)    // Germany
+    expect(nextTypeaheadIndex(opts, 'can', 0)).toBe(1)  // Canada
+    expect(nextTypeaheadIndex(opts, 'z', 0)).toBe(-1)   // no match
+    expect(nextTypeaheadIndex(opts, '', 0)).toBe(-1)
+  })
+})
+
+function mountLb(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvListBox, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('SvListBox grouping + type-ahead', () => {
+  it('renders group headings above their options', () => {
+    const { target, destroy } = mountLb({ options: opts, value: 'us' })
+    try {
+      const headings = [...target.querySelectorAll('.sv-listbox__group')].map((n) => n.textContent)
+      expect(headings).toEqual(['Americas', 'Europe'])
+      expect(target.querySelectorAll('.sv-listbox__opt')).toHaveLength(4)
+    } finally { destroy() }
+  })
+
+  it('type-ahead moves the active option to a label prefix', () => {
+    const { target, destroy } = mountLb({ options: opts, value: 'us' })
+    try {
+      const list = target.querySelector<HTMLElement>('.sv-listbox')!
+      list.dispatchEvent(new KeyboardEvent('keydown', { key: 'g', bubbles: true }))
+      flushSync()
+      const active = target.querySelector('.sv-listbox__opt.is-active .sv-listbox__label')!
+      expect(active.textContent).toBe('Germany')
+    } finally { destroy() }
+  })
+})

package/src/otp.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { sanitizeOtp, otpCells, isOtpComplete } from './otp'
+
+describe('sanitizeOtp', () => {
+  it('keeps only digits in numeric mode and clamps to length', () => {
+    expect(sanitizeOtp('12ab34-56', 4, true)).toBe('1234')
+  })
+  it('keeps non-whitespace in text mode', () => {
+    expect(sanitizeOtp('a b\tc d', 3, false)).toBe('abc')
+  })
+  it('clamps to length', () => {
+    expect(sanitizeOtp('123456789', 6, true)).toBe('123456')
+  })
+})
+
+describe('otpCells', () => {
+  it('pads to exactly length cells', () => {
+    expect(otpCells('12', 4)).toEqual(['1', '2', '', ''])
+  })
+})
+
+describe('isOtpComplete', () => {
+  it('is true only when every cell is filled', () => {
+    expect(isOtpComplete('1234', 4)).toBe(true)
+    expect(isOtpComplete('12', 4)).toBe(false)
+    expect(isOtpComplete('', 4)).toBe(false)
+  })
+})

package/src/otp.ts

@@ -0,0 +1,28 @@
+/**
+ * otp - pure helpers behind <SvOtpInput>: sanitize/spread a raw string across N
+ * segments (used on paste and per-cell input) and detect completion.
+ * Framework-free + pure so they are unit-tested directly.
+ */
+
+/**
+ * Keep only the characters allowed for `numeric` mode (digits) or any
+ * non-whitespace otherwise, then clamp to `length`. Returns the cleaned string
+ * (<= length chars).
+ */
+export function sanitizeOtp(raw: string, length: number, numeric: boolean): string {
+  const kept = numeric ? raw.replace(/\D/g, '') : raw.replace(/\s/g, '')
+  return kept.slice(0, Math.max(0, length))
+}
+
+/** Split a value into exactly `length` single-char cells (padding with ''). */
+export function otpCells(value: string, length: number): string[] {
+  const cells: string[] = []
+  for (let i = 0; i < length; i++) cells[i] = value[i] ?? ''
+  return cells
+}
+
+/** Whether `value` fills every cell (a joined OTP has no internal gaps, so an
+ *  exact-length string is complete). */
+export function isOtpComplete(value: string, length: number): boolean {
+  return value.length === length
+}

package/src/overlays.test.ts

@@ -0,0 +1,85 @@
+/**
+ * Component tests for the overlay trio: SvModal (dialog semantics, Escape /
+ * backdrop close), SvPopover (click open + outside close) and SvTooltip
+ * (focus-triggered, aria-describedby wiring).
+ */
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
+import SvModal from './SvModal.svelte'
+import SvPopover from './SvPopover.svelte'
+import SvTooltip from './SvTooltip.svelte'
+
+const body = createRawSnippet(() => ({ render: () => `<p class="body">hello</p>` }))
+const anchorBtn = createRawSnippet(() => ({ render: () => `<button class="anchor">open</button>` }))
+
+function mountC(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() } }
+}
+afterEach(() => {
+  document.querySelectorAll('.sv-modal__backdrop, .sv-pop__panel, .sv-tip').forEach((n) => n.remove())
+})
+
+describe('SvModal', () => {
+  it('renders a labelled modal dialog when open', () => {
+    const { destroy } = mountC(SvModal, { open: true, title: 'Edit', children: body })
+    try {
+      const dialog = document.querySelector<HTMLElement>('.sv-modal')!
+      expect(dialog.getAttribute('role')).toBe('dialog')
+      expect(dialog.getAttribute('aria-modal')).toBe('true')
+      const titleId = dialog.getAttribute('aria-labelledby')!
+      expect(document.getElementById(titleId)!.textContent).toBe('Edit')
+      expect(document.querySelector('.sv-modal .body')!.textContent).toBe('hello')
+    } finally { destroy() }
+  })
+
+  it('Escape and the close button both fire onClose', () => {
+    let closed = 0
+    const { destroy } = mountC(SvModal, { open: true, title: 'X', onClose: () => (closed++), children: body })
+    try {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      flushSync()
+      expect(closed).toBe(1)
+    } finally { destroy() }
+  })
+})
+
+describe('SvPopover', () => {
+  it('opens the panel on anchor click and closes on outside pointerdown', () => {
+    const { target, destroy } = mountC(SvPopover, { anchor: anchorBtn, children: body })
+    try {
+      expect(document.querySelector('.sv-pop__panel')).toBeNull()
+      target.querySelector<HTMLElement>('.anchor')!.click()
+      flushSync()
+      const panel = document.querySelector<HTMLElement>('.sv-pop__panel')!
+      expect(panel).not.toBeNull()
+      expect(panel.getAttribute('role')).toBe('dialog')
+      // Outside click closes.
+      document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+      flushSync()
+      expect(document.querySelector('.sv-pop__panel')).toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvTooltip', () => {
+  it('shows after the delay on focus and wires aria-describedby', () => {
+    vi.useFakeTimers()
+    try {
+      const child = createRawSnippet(() => ({ render: () => `<button class="t">i</button>` }))
+      const { target, destroy } = mountC(SvTooltip, { text: 'Tip text', delay: 200, children: child })
+      const anchor = target.querySelector<HTMLElement>('.sv-tip__anchor')!
+      anchor.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
+      vi.advanceTimersByTime(210)
+      flushSync()
+      const tip = document.querySelector<HTMLElement>('.sv-tip')!
+      expect(tip).not.toBeNull()
+      expect(tip.getAttribute('role')).toBe('tooltip')
+      expect(anchor.getAttribute('aria-describedby')).toBe(tip.id)
+      destroy()
+    } finally { vi.useRealTimers() }
+  })
+})

package/src/paginate.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { paginationRange } from './paginate'
+
+describe('paginationRange', () => {
+  it('returns an empty list for zero pages', () => {
+    expect(paginationRange({ page: 1, pageCount: 0 })).toEqual([])
+  })
+
+  it('shows every page when the count is small', () => {
+    expect(paginationRange({ page: 3, pageCount: 5 })).toEqual([1, 2, 3, 4, 5])
+  })
+
+  it('adds a trailing ellipsis near the start', () => {
+    expect(paginationRange({ page: 1, pageCount: 10 })).toEqual([1, 2, 'ellipsis-right', 10])
+  })
+
+  it('adds ellipses on both sides in the middle', () => {
+    expect(paginationRange({ page: 5, pageCount: 10 })).toEqual([
+      1, 'ellipsis-left', 4, 5, 6, 'ellipsis-right', 10,
+    ])
+  })
+
+  it('adds a leading ellipsis near the end', () => {
+    expect(paginationRange({ page: 10, pageCount: 10 })).toEqual([1, 'ellipsis-left', 9, 10])
+  })
+
+  it('collapses a single-page gap to that page number, not an ellipsis', () => {
+    // Between boundary 1 and sibling-start 3 there is exactly one page (2): show it.
+    expect(paginationRange({ page: 4, pageCount: 8 })).toEqual([1, 2, 3, 4, 5, 'ellipsis-right', 8])
+  })
+
+  it('clamps an out-of-range page', () => {
+    expect(paginationRange({ page: 99, pageCount: 5 })).toEqual([1, 2, 3, 4, 5])
+  })
+
+  it('honours a larger siblingCount', () => {
+    expect(paginationRange({ page: 6, pageCount: 12, siblingCount: 2 })).toEqual([
+      1, 'ellipsis-left', 4, 5, 6, 7, 8, 'ellipsis-right', 12,
+    ])
+  })
+})

package/src/paginate.ts

@@ -0,0 +1,61 @@
+/**
+ * paginate - the pure page-range algorithm behind <SvPagination>. Given the
+ * current page and total page count, returns the sequence of page numbers and
+ * ellipsis markers to render (boundary pages + a window of siblings around the
+ * current page, with gaps collapsed to an ellipsis). Framework-free + pure so
+ * it is unit-tested on its own.
+ */
+export type PaginationItem = number | 'ellipsis-left' | 'ellipsis-right'
+
+export type PaginationRangeOptions = {
+  /** 1-based current page. */
+  page: number
+  /** Total number of pages. */
+  pageCount: number
+  /** Pages shown on each side of the current page. Default 1. */
+  siblingCount?: number
+  /** Pages pinned at each end. Default 1. */
+  boundaryCount?: number
+}
+
+const clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi)
+
+/** Build the page/ellipsis sequence (e.g. `[1, 'ellipsis-left', 4, 5, 6, 'ellipsis-right', 20]`). */
+export function paginationRange(options: PaginationRangeOptions): PaginationItem[] {
+  const { pageCount } = options
+  if (pageCount <= 0) return []
+  const siblingCount = Math.max(0, options.siblingCount ?? 1)
+  const boundaryCount = Math.max(1, options.boundaryCount ?? 1)
+  const page = clamp(options.page, 1, pageCount)
+
+  // If ellipsis could hide at most one page, just show every page.
+  if (pageCount <= boundaryCount * 2 + siblingCount * 2 + 3) {
+    return Array.from({ length: pageCount }, (_, i) => i + 1)
+  }
+
+  const pages = new Set<number>()
+  // End boundaries (both ends).
+  for (let i = 1; i <= boundaryCount && i <= pageCount; i++) {
+    pages.add(i)
+    pages.add(pageCount - i + 1)
+  }
+  // Siblings around the current page.
+  for (let i = page - siblingCount; i <= page + siblingCount; i++) {
+    if (i >= 1 && i <= pageCount) pages.add(i)
+  }
+
+  const sorted = [...pages].sort((a, b) => a - b)
+  const result: PaginationItem[] = []
+  let prev = 0
+  for (const p of sorted) {
+    if (p - prev === 2) {
+      // Exactly one page in the gap: show it instead of an ellipsis.
+      result.push(prev + 1)
+    } else if (p - prev > 2) {
+      result.push(p <= page ? 'ellipsis-left' : 'ellipsis-right')
+    }
+    result.push(p)
+    prev = p
+  }
+  return result
+}

package/src/phone-valid.test.ts

@@ -0,0 +1,26 @@
+/**
+ * Per-country phone length validation (phoneDigitsValid): exact lengths, ranges,
+ * unknown countries (any non-empty), and empty handling.
+ */
+import { describe, expect, it } from 'vitest'
+import { phoneDigitsValid } from './countries'
+
+describe('phoneDigitsValid', () => {
+  it('checks exact national lengths', () => {
+    expect(phoneDigitsValid('US', '4155551234')).toBe(true) // 10
+    expect(phoneDigitsValid('US', '415555')).toBe(false)
+    expect(phoneDigitsValid('IN', '9876543210')).toBe(true) // 10
+    expect(phoneDigitsValid('SG', '81234567')).toBe(true) // 8
+    expect(phoneDigitsValid('SG', '8123456')).toBe(false)
+  })
+  it('accepts ranges', () => {
+    expect(phoneDigitsValid('DE', '1701234567')).toBe(true) // 10 in [10,11]
+    expect(phoneDigitsValid('DE', '17012345678')).toBe(true) // 11
+    expect(phoneDigitsValid('DE', '170')).toBe(false)
+  })
+  it('ignores non-digits and unknown countries', () => {
+    expect(phoneDigitsValid('US', '(415) 555-1234')).toBe(true)
+    expect(phoneDigitsValid('ZZ', '12345')).toBe(true) // unknown -> any non-empty
+    expect(phoneDigitsValid('ZZ', '')).toBe(false)
+  })
+})