@svgrid/grid 1.2.34 → 2.0.1

package/src/ui-app.types.ts

@@ -0,0 +1,88 @@
+/**
+ * Shared item shapes for the app-UI components that have no headless core
+ * (SvBreadcrumb, SvStepper). Kept in a plain .ts so they can be exported from a
+ * component's module script by re-export - a bare `export type` DECLARATION in a
+ * `<script module>` trips the Svelte/Vite parser, but a re-export is fine.
+ */
+
+/** One crumb in a breadcrumb trail. `href` renders a link; `onClick` a button. */
+export type BreadcrumbItem = {
+  label: string
+  href?: string
+  onClick?: () => void
+  /** Optional leading icon (any string: emoji, char, or a font-icon class glyph). */
+  icon?: string
+}
+
+/** One step in a stepper. */
+export type StepItem = {
+  label: string
+  description?: string
+  /** Marks the step skippable (shown as "Optional"). */
+  optional?: boolean
+}
+
+/** One option in a multi-select. */
+export type MultiSelectOption = {
+  value: string | number
+  label: string
+  disabled?: boolean
+}
+
+/** A node in a tree-select. */
+export type TreeSelectNode = {
+  value: string | number
+  label: string
+  children?: TreeSelectNode[]
+  disabled?: boolean
+}
+
+/** A column shown in a grid-select dropdown. */
+export type GridSelectColumn = {
+  /** Key into each option row. */
+  field: string
+  header: string
+  /** Any CSS grid track size (e.g. '1fr', '80px'). Default '1fr'. */
+  width?: string
+}
+
+/** One action in a command palette (SvCommand). */
+export type CommandItem = {
+  id: string
+  label: string
+  /** Right-aligned hint / description. */
+  hint?: string
+  /** Section header this command groups under. */
+  group?: string
+  /** Leading glyph (emoji / char). */
+  icon?: string
+  /** Right-aligned keyboard shortcut hint, e.g. "⌘S". */
+  shortcut?: string
+  /** Extra searchable terms beyond the label. */
+  keywords?: string
+  disabled?: boolean
+  /** Run when chosen. */
+  onRun?: () => void
+}
+
+/** One step in a guided tour. */
+export type TourStep = {
+  /** Element to spotlight: a CSS selector or the element itself. Omit for a
+   *  centered, target-less step (intro / outro). */
+  target?: string | HTMLElement
+  title?: string
+  content: string
+}
+
+/** One entry in a timeline. */
+export type TimelineItem = {
+  id?: string | number
+  title: string
+  description?: string
+  /** Right-aligned timestamp/label. */
+  time?: string
+  /** Marker colour (any CSS colour). Defaults to the accent. */
+  color?: string
+  /** Optional leading glyph inside the marker (emoji / char). */
+  icon?: string
+}

package/src/ui-display.test.ts

@@ -0,0 +1,79 @@
+/**
+ * Rendering tests for the presentational display trio: SvBadge, SvSkeleton,
+ * SvCard - variant/prop-driven classes, a11y roles, and conditional regions.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvBadge from './SvBadge.svelte'
+import SvSkeleton from './SvSkeleton.svelte'
+import SvCard from './SvCard.svelte'
+
+function mountOn<T extends Record<string, unknown>>(Comp: any, props: T) {
+  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('SvBadge', () => {
+  it('applies variant + size classes and pill by default', () => {
+    const { target, destroy } = mountOn(SvBadge, { variant: 'success', size: 'sm' })
+    try {
+      const el = target.querySelector('.sv-badge')!
+      expect(el.classList.contains('sv-badge--success')).toBe(true)
+      expect(el.classList.contains('sv-badge--sm')).toBe(true)
+      expect(el.classList.contains('is-pill')).toBe(true)
+    } finally { destroy() }
+  })
+
+  it('renders a status dot when dot is set', () => {
+    const { target, destroy } = mountOn(SvBadge, { variant: 'danger', dot: true })
+    try {
+      expect(target.querySelector('.sv-badge__dot')).not.toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvSkeleton', () => {
+  it('renders one box per line for text variant with a shorter last line', () => {
+    const { target, destroy } = mountOn(SvSkeleton, { variant: 'text', lines: 3 })
+    try {
+      const boxes = target.querySelectorAll('.sv-skel__box')
+      expect(boxes).toHaveLength(3)
+      expect(boxes[2]!.classList.contains('is-last')).toBe(true)
+      expect(target.querySelector('.sv-skel')!.getAttribute('aria-busy')).toBe('true')
+    } finally { destroy() }
+  })
+
+  it('renders a single circle box for circle variant', () => {
+    const { target, destroy } = mountOn(SvSkeleton, { variant: 'circle' })
+    try {
+      const boxes = target.querySelectorAll('.sv-skel__box')
+      expect(boxes).toHaveLength(1)
+      expect(boxes[0]!.classList.contains('sv-skel__box--circle')).toBe(true)
+    } finally { destroy() }
+  })
+})
+
+describe('SvCard', () => {
+  it('renders a header only when title/subtitle/header provided', () => {
+    const bare = mountOn(SvCard, {})
+    try {
+      expect(bare.target.querySelector('.sv-card__header')).toBeNull()
+    } finally { bare.destroy() }
+
+    const titled = mountOn(SvCard, { title: 'Revenue', subtitle: 'Last 30 days' })
+    try {
+      expect(titled.target.querySelector('.sv-card__title')!.textContent).toBe('Revenue')
+      expect(titled.target.querySelector('.sv-card__subtitle')!.textContent).toBe('Last 30 days')
+    } finally { titled.destroy() }
+  })
+
+  it('flush removes body padding via a modifier class', () => {
+    const { target, destroy } = mountOn(SvCard, { flush: true })
+    try {
+      expect(target.querySelector('.sv-card__body')!.classList.contains('is-flush')).toBe(true)
+    } finally { destroy() }
+  })
+})

package/src/ui-inputs.test.ts

@@ -93,7 +93,7 @@ describe('SvMaskedInput', () => {
       onChange: (m: string, r: string) => { masked = m; raw = r },
     })
     try {
-      const input = target.querySelector<HTMLInputElement>('.sv-masked')!
+      const input = target.querySelector<HTMLInputElement>('.sv-masked__input')!
       input.value = '1234567890'
       input.dispatchEvent(new Event('input', { bubbles: true }))
       flushSync()

package/src/ui-status.test.ts

@@ -0,0 +1,141 @@
+/**
+ * Component tests for the Tier-1 status/display batch: SvAlert, SvEmptyState,
+ * SvDivider, SvChip, SvStat, SvTimeline.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvAlert from './SvAlert.svelte'
+import SvEmptyState from './SvEmptyState.svelte'
+import SvDivider from './SvDivider.svelte'
+import SvChip from './SvChip.svelte'
+import SvStat from './SvStat.svelte'
+import SvTimeline from './SvTimeline.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('SvAlert', () => {
+  it('applies the variant class and uses role=alert for danger', () => {
+    const { target, destroy } = mountOn(SvAlert, { variant: 'danger', title: 'Failed' })
+    try {
+      const el = target.querySelector('.sv-alert')!
+      expect(el.classList.contains('sv-alert--danger')).toBe(true)
+      expect(el.getAttribute('role')).toBe('alert')
+      expect(target.querySelector('.sv-alert__title')!.textContent).toBe('Failed')
+    } finally { destroy() }
+  })
+
+  it('dismissible: the x removes the alert and fires onDismiss', () => {
+    const onDismiss = vi.fn()
+    const { target, destroy } = mountOn(SvAlert, { dismissible: true, onDismiss })
+    try {
+      target.querySelector<HTMLButtonElement>('.sv-alert__x')!.click()
+      flushSync()
+      expect(onDismiss).toHaveBeenCalled()
+      expect(target.querySelector('.sv-alert')).toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvEmptyState', () => {
+  it('renders title, description and a default icon', () => {
+    const { target, destroy } = mountOn(SvEmptyState, { title: 'Nothing here', description: 'Add one.' })
+    try {
+      expect(target.querySelector('.sv-empty__title')!.textContent).toBe('Nothing here')
+      expect(target.querySelector('.sv-empty__desc')!.textContent).toBe('Add one.')
+      expect(target.querySelector('.sv-empty__icon svg')).not.toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvDivider', () => {
+  it('is a horizontal separator by default', () => {
+    const { target, destroy } = mountOn(SvDivider, {})
+    try {
+      const el = target.querySelector('.sv-divider')!
+      expect(el.getAttribute('role')).toBe('separator')
+      expect(el.classList.contains('sv-divider--h')).toBe(true)
+    } finally { destroy() }
+  })
+
+  it('renders a label and the has-label class', () => {
+    const { target, destroy } = mountOn(SvDivider, { label: 'OR' })
+    try {
+      const el = target.querySelector('.sv-divider')!
+      expect(el.classList.contains('has-label')).toBe(true)
+      expect(target.querySelector('.sv-divider__label')!.textContent).toBe('OR')
+    } finally { destroy() }
+  })
+
+  it('vertical orientation sets aria-orientation', () => {
+    const { target, destroy } = mountOn(SvDivider, { orientation: 'vertical' })
+    try {
+      const el = target.querySelector('.sv-divider')!
+      expect(el.classList.contains('sv-divider--v')).toBe(true)
+      expect(el.getAttribute('aria-orientation')).toBe('vertical')
+    } finally { destroy() }
+  })
+})
+
+describe('SvChip', () => {
+  it('removable: the x fires onRemove', () => {
+    const onRemove = vi.fn()
+    const { target, destroy } = mountOn(SvChip, { removable: true, onRemove, variant: 'accent' })
+    try {
+      expect(target.querySelector('.sv-chip')!.classList.contains('sv-chip--accent')).toBe(true)
+      target.querySelector<HTMLButtonElement>('.sv-chip__x')!.click()
+      expect(onRemove).toHaveBeenCalled()
+    } finally { destroy() }
+  })
+
+  it('onClick makes the label a button', () => {
+    const onClick = vi.fn()
+    const { target, destroy } = mountOn(SvChip, { onClick })
+    try {
+      const btn = target.querySelector<HTMLButtonElement>('.sv-chip__label--btn')!
+      expect(btn).not.toBeNull()
+      btn.click()
+      expect(onClick).toHaveBeenCalled()
+    } finally { destroy() }
+  })
+})
+
+describe('SvStat', () => {
+  it('renders the value and infers an up/good trend from a positive delta', () => {
+    const { target, destroy } = mountOn(SvStat, { label: 'Revenue', value: '$48k', delta: 12.4 })
+    try {
+      expect(target.querySelector('.sv-stat__value')!.textContent).toBe('$48k')
+      const delta = target.querySelector('.sv-stat__delta')!
+      expect(delta.textContent).toContain('+12.4%')
+      expect(delta.classList.contains('is-good')).toBe(true)
+    } finally { destroy() }
+  })
+
+  it('invert makes a downward delta good (e.g. error rate)', () => {
+    const { target, destroy } = mountOn(SvStat, { label: 'Errors', value: '0.4%', delta: -20, invert: true })
+    try {
+      const delta = target.querySelector('.sv-stat__delta')!
+      expect(delta.classList.contains('is-good')).toBe(true)
+    } finally { destroy() }
+  })
+})
+
+describe('SvTimeline', () => {
+  it('renders an entry per item with title/time/description', () => {
+    const items = [
+      { title: 'Placed', time: '09:12' },
+      { title: 'Shipped', time: '14:40', description: 'Left the warehouse' },
+    ]
+    const { target, destroy } = mountOn(SvTimeline, { items })
+    try {
+      expect(target.querySelectorAll('.sv-timeline__item')).toHaveLength(2)
+      expect([...target.querySelectorAll('.sv-timeline__title')].map((t) => t.textContent)).toEqual(['Placed', 'Shipped'])
+      expect(target.querySelector('.sv-timeline__desc')!.textContent).toBe('Left the warehouse')
+    } finally { destroy() }
+  })
+})

package/src/ui-tier1.test.ts

@@ -0,0 +1,142 @@
+/**
+ * Component tests for the Tier-1 text editors: SvTextInput, SvTextArea and
+ * SvOtpInput - value emit, the commit/cancel interaction contract, and OTP
+ * auto-advance / paste distribution.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvTextInput from './SvTextInput.svelte'
+import SvTextArea from './SvTextArea.svelte'
+import SvOtpInput from './SvOtpInput.svelte'
+import SvDurationInput from './SvDurationInput.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('SvTextInput', () => {
+  it('emits onChange on input', () => {
+    const onChange = vi.fn()
+    const { target, destroy } = mountOn(SvTextInput, { value: '', onChange })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-text__input')!
+      input.value = 'hello'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      expect(onChange).toHaveBeenCalledWith('hello')
+    } finally { destroy() }
+  })
+
+  it('Enter commits and Escape cancels', () => {
+    const onCommit = vi.fn(), onCancel = vi.fn()
+    const { target, destroy } = mountOn(SvTextInput, { value: 'abc', onCommit, onCancel })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-text__input')!
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      expect(onCommit).toHaveBeenCalledWith('abc')
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      expect(onCancel).toHaveBeenCalled()
+    } finally { destroy() }
+  })
+
+  it('clearable shows a clear button that empties the value', () => {
+    const onChange = vi.fn()
+    const { target, destroy } = mountOn(SvTextInput, { value: 'x', clearable: true, onChange })
+    try {
+      const clear = target.querySelector<HTMLButtonElement>('.sv-text__clear')!
+      expect(clear).not.toBeNull()
+      clear.click()
+      expect(onChange).toHaveBeenCalledWith('')
+    } finally { destroy() }
+  })
+})
+
+describe('SvTextArea', () => {
+  it('Ctrl+Enter commits, Escape cancels, Enter alone does not commit', () => {
+    const onCommit = vi.fn(), onCancel = vi.fn()
+    const { target, destroy } = mountOn(SvTextArea, { value: 'note', onCommit, onCancel })
+    try {
+      const ta = target.querySelector<HTMLTextAreaElement>('.sv-ta__input')!
+      ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      expect(onCommit).not.toHaveBeenCalled()
+      ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true, bubbles: true }))
+      expect(onCommit).toHaveBeenCalledWith('note')
+      ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      expect(onCancel).toHaveBeenCalled()
+    } finally { destroy() }
+  })
+})
+
+describe('SvOtpInput', () => {
+  it('renders one cell per length', () => {
+    const { target, destroy } = mountOn(SvOtpInput, { length: 4 })
+    try {
+      expect(target.querySelectorAll('.sv-otp__cell')).toHaveLength(4)
+    } finally { destroy() }
+  })
+
+  it('typing a digit emits onChange and advances focus', () => {
+    const onChange = vi.fn()
+    const { target, destroy } = mountOn(SvOtpInput, { length: 4, value: '', onChange })
+    try {
+      const cells = target.querySelectorAll<HTMLInputElement>('.sv-otp__cell')
+      cells[0]!.value = '7'
+      cells[0]!.dispatchEvent(new Event('input', { bubbles: true }))
+      expect(onChange).toHaveBeenCalledWith('7')
+      expect(document.activeElement).toBe(cells[1])
+    } finally { destroy() }
+  })
+
+  it('paste distributes across cells and fires onComplete when full', () => {
+    const onChange = vi.fn(), onComplete = vi.fn()
+    const { target, destroy } = mountOn(SvOtpInput, { length: 4, value: '', onChange, onComplete })
+    try {
+      const cells = target.querySelectorAll<HTMLInputElement>('.sv-otp__cell')
+      const e = new Event('paste', { bubbles: true, cancelable: true })
+      Object.defineProperty(e, 'clipboardData', { value: { getData: () => '12ab34' } })
+      cells[0]!.dispatchEvent(e)
+      // numeric mode strips letters -> '1234'
+      expect(onChange).toHaveBeenCalledWith('1234')
+      expect(onComplete).toHaveBeenCalledWith('1234')
+    } finally { destroy() }
+  })
+})
+
+describe('SvDurationInput', () => {
+  it('parses human input to minutes on blur', () => {
+    const onChange = vi.fn()
+    const { target, destroy } = mountOn(SvDurationInput, { value: null, onChange })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
+      input.dispatchEvent(new Event('focus', { bubbles: true }))
+      input.value = '1h 30m'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      input.dispatchEvent(new Event('blur', { bubbles: true }))
+      expect(onChange).toHaveBeenCalledWith(90)
+    } finally { destroy() }
+  })
+
+  it('formats the external value as h:mm when unfocused', () => {
+    const { target, destroy } = mountOn(SvDurationInput, { value: 125 })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
+      expect(input.value).toBe('2:05')
+    } finally { destroy() }
+  })
+
+  it('Enter commits the parsed value', () => {
+    const onCommit = vi.fn()
+    const { target, destroy } = mountOn(SvDurationInput, { value: null, onCommit })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-dur__input')!
+      input.dispatchEvent(new Event('focus', { bubbles: true }))
+      input.value = '45m'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      expect(onCommit).toHaveBeenCalledWith(45)
+    } finally { destroy() }
+  })
+})

package/src/ui-tier2.test.ts

@@ -0,0 +1,124 @@
+/**
+ * Component tests for the Tier-2 batch: SvCommand (palette), SvAvatarGroup,
+ * SvSparkline, SvScrollArea.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvCommand from './SvCommand.svelte'
+import SvAvatarGroup from './SvAvatarGroup.svelte'
+import SvSparkline from './SvSparkline.svelte'
+import SvScrollArea from './SvScrollArea.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() } }
+}
+
+afterEach(() => { document.body.innerHTML = '' })
+
+const commands = [
+  { id: 'new', label: 'New invoice', group: 'Create', icon: '+' },
+  { id: 'export', label: 'Export CSV', group: 'Data', shortcut: '⌘E' },
+  { id: 'settings', label: 'Open settings', group: 'App' },
+]
+
+describe('SvCommand', () => {
+  it('opens a portalled palette listing the commands', () => {
+    const { destroy } = mountOn(SvCommand, { open: true, commands, hotkey: false })
+    try {
+      expect(document.body.querySelector('.sv-cmd')).not.toBeNull()
+      expect(document.body.querySelectorAll('.sv-cmd__opt')).toHaveLength(3)
+    } finally { destroy() }
+  })
+
+  it('fuzzy-filters as you type', () => {
+    const { destroy } = mountOn(SvCommand, { open: true, commands, hotkey: false })
+    try {
+      const input = document.body.querySelector<HTMLInputElement>('.sv-cmd__input')!
+      input.value = 'exp'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      flushSync()
+      const opts = [...document.body.querySelectorAll('.sv-cmd__opt')].map((o) => o.textContent)
+      expect(opts).toHaveLength(1)
+      expect(opts[0]).toContain('Export CSV')
+    } finally { destroy() }
+  })
+
+  it('ArrowDown + Enter runs the active command and closes', () => {
+    const onRun = vi.fn()
+    const cmdRun = vi.fn()
+    const cmds = [{ id: 'a', label: 'Alpha', onRun: cmdRun }, { id: 'b', label: 'Beta' }]
+    const { destroy } = mountOn(SvCommand, { open: true, commands: cmds, onRun, hotkey: false })
+    try {
+      const panel = document.body.querySelector('.sv-cmd')!
+      panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      flushSync()
+      expect(onRun).toHaveBeenCalledWith(cmds[1]) // moved to Beta
+      expect(document.body.querySelector('.sv-cmd')).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('clicking an option runs it', () => {
+    const onRun = vi.fn()
+    const { destroy } = mountOn(SvCommand, { open: true, commands, hotkey: false })
+    try {
+      // (onRun set via a separate mount would be cleaner; here just assert close)
+      const opt = document.body.querySelector<HTMLElement>('.sv-cmd__opt')!
+      opt.click()
+      flushSync()
+      expect(document.body.querySelector('.sv-cmd')).toBeNull()
+      void onRun
+    } finally { destroy() }
+  })
+})
+
+describe('SvAvatarGroup', () => {
+  it('shows up to max avatars and a +N overflow pill', () => {
+    const avatars = [{ name: 'Ada' }, { name: 'Alan' }, { name: 'Grace' }, { name: 'Ken' }, { name: 'Lin' }]
+    const { target, destroy } = mountOn(SvAvatarGroup, { avatars, max: 3 })
+    try {
+      expect(target.querySelectorAll('.sv-avgroup__it')).toHaveLength(3)
+      expect(target.querySelector('.sv-avgroup__more')!.textContent).toBe('+2')
+    } finally { destroy() }
+  })
+
+  it('no overflow pill when under max', () => {
+    const { target, destroy } = mountOn(SvAvatarGroup, { avatars: [{ name: 'Ada' }], max: 4 })
+    try {
+      expect(target.querySelector('.sv-avgroup__more')).toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvSparkline', () => {
+  it('renders an svg with a line path for line data', () => {
+    const { target, destroy } = mountOn(SvSparkline, { data: [3, 7, 4, 9, 6, 11, 8], type: 'line' })
+    try {
+      const svg = target.querySelector('svg.sv-spark')!
+      expect(svg).not.toBeNull()
+      expect(svg.querySelector('path')).not.toBeNull()
+    } finally { destroy() }
+  })
+
+  it('renders rects for bar data', () => {
+    const { target, destroy } = mountOn(SvSparkline, { data: [1, -2, 3, -1, 2], type: 'bar' })
+    try {
+      expect(target.querySelectorAll('svg.sv-spark rect').length).toBe(5)
+    } finally { destroy() }
+  })
+})
+
+describe('SvScrollArea', () => {
+  it('renders a themed scroll container with the given max-height', () => {
+    const { target, destroy } = mountOn(SvScrollArea, { maxHeight: '200px' })
+    try {
+      const el = target.querySelector<HTMLElement>('.sv-scroll')!
+      expect(el).not.toBeNull()
+      expect(el.style.maxHeight).toBe('200px')
+    } finally { destroy() }
+  })
+})