@svgrid/grid 2.2.27 → 2.2.29

package/src/toast-store.test.ts

@@ -1,147 +1,147 @@
-/**
- * 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, updateToast, 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)
-  })
-
-  it('update patches a toast in place (same id) and restarts its timer', () => {
-    const id = toast('working', { duration: 0 })
-    updateToast(id, { message: 'done', variant: 'success', duration: 3000 })
-    expect(toastStore.toasts).toHaveLength(1)
-    const t = toastStore.toasts[0]!
-    expect(t.id).toBe(id)
-    expect(t.message).toBe('done')
-    expect(t.variant).toBe('success')
-    // The new duration now applies.
-    vi.advanceTimersByTime(3000)
-    expect(toastStore.toasts).toHaveLength(0)
-  })
-
-  it('update is a no-op for an unknown id', () => {
-    updateToast(999, { message: 'nope' })
-    expect(toastStore.toasts).toHaveLength(0)
-  })
-
-  it('promise shows a sticky loader, then updates in place to success', async () => {
-    vi.useRealTimers() // real microtask flush for the promise
-    let resolve!: (v: string) => void
-    const p = new Promise<string>((r) => (resolve = r))
-    const ret = toast.promise(p, { loading: 'Saving...', success: (v) => `Saved ${v}`, error: 'Failed' })
-    expect(ret).toBe(p) // returns the original promise
-    expect(toastStore.toasts).toHaveLength(1)
-    const id = toastStore.toasts[0]!.id
-    expect(toastStore.toasts[0]!.message).toBe('Saving...')
-    expect(toastStore.toasts[0]!.variant).toBe('info')
-    resolve('now')
-    await p
-    await Promise.resolve()
-    const t = toastStore.toasts.find((x) => x.id === id)!
-    expect(t.message).toBe('Saved now')
-    expect(t.variant).toBe('success')
-  })
-
-  it('promise updates in place to error on rejection', async () => {
-    vi.useRealTimers()
-    const p = Promise.reject(new Error('x'))
-    toast.promise(p, { loading: 'Load', success: 'ok', error: (e) => `Err: ${(e as Error).message}` })
-    await p.catch(() => {})
-    await Promise.resolve()
-    const t = toastStore.toasts[0]!
-    expect(t.variant).toBe('error')
-    expect(t.message).toBe('Err: x')
-  })
-
-  it('action + cancel are stored on the toast', () => {
-    const onClick = vi.fn()
-    toast('Undo?', { action: { label: 'Undo', onClick }, cancel: { label: 'Dismiss' } })
-    const t = toastStore.toasts[0]!
-    expect(t.action?.label).toBe('Undo')
-    expect(t.cancel?.label).toBe('Dismiss')
-  })
-
-  it('custom carries a render snippet', () => {
-    const render = (() => {}) as never
-    const id = toast.custom(render, { duration: 0 })
-    expect(toastStore.toasts.find((x) => x.id === id)!.render).toBe(render)
-  })
-})
+/**
+ * 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, updateToast, 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)
+  })
+
+  it('update patches a toast in place (same id) and restarts its timer', () => {
+    const id = toast('working', { duration: 0 })
+    updateToast(id, { message: 'done', variant: 'success', duration: 3000 })
+    expect(toastStore.toasts).toHaveLength(1)
+    const t = toastStore.toasts[0]!
+    expect(t.id).toBe(id)
+    expect(t.message).toBe('done')
+    expect(t.variant).toBe('success')
+    // The new duration now applies.
+    vi.advanceTimersByTime(3000)
+    expect(toastStore.toasts).toHaveLength(0)
+  })
+
+  it('update is a no-op for an unknown id', () => {
+    updateToast(999, { message: 'nope' })
+    expect(toastStore.toasts).toHaveLength(0)
+  })
+
+  it('promise shows a sticky loader, then updates in place to success', async () => {
+    vi.useRealTimers() // real microtask flush for the promise
+    let resolve!: (v: string) => void
+    const p = new Promise<string>((r) => (resolve = r))
+    const ret = toast.promise(p, { loading: 'Saving...', success: (v) => `Saved ${v}`, error: 'Failed' })
+    expect(ret).toBe(p) // returns the original promise
+    expect(toastStore.toasts).toHaveLength(1)
+    const id = toastStore.toasts[0]!.id
+    expect(toastStore.toasts[0]!.message).toBe('Saving...')
+    expect(toastStore.toasts[0]!.variant).toBe('info')
+    resolve('now')
+    await p
+    await Promise.resolve()
+    const t = toastStore.toasts.find((x) => x.id === id)!
+    expect(t.message).toBe('Saved now')
+    expect(t.variant).toBe('success')
+  })
+
+  it('promise updates in place to error on rejection', async () => {
+    vi.useRealTimers()
+    const p = Promise.reject(new Error('x'))
+    toast.promise(p, { loading: 'Load', success: 'ok', error: (e) => `Err: ${(e as Error).message}` })
+    await p.catch(() => {})
+    await Promise.resolve()
+    const t = toastStore.toasts[0]!
+    expect(t.variant).toBe('error')
+    expect(t.message).toBe('Err: x')
+  })
+
+  it('action + cancel are stored on the toast', () => {
+    const onClick = vi.fn()
+    toast('Undo?', { action: { label: 'Undo', onClick }, cancel: { label: 'Dismiss' } })
+    const t = toastStore.toasts[0]!
+    expect(t.action?.label).toBe('Undo')
+    expect(t.cancel?.label).toBe('Dismiss')
+  })
+
+  it('custom carries a render snippet', () => {
+    const render = (() => {}) as never
+    const id = toast.custom(render, { duration: 0 })
+    expect(toastStore.toasts.find((x) => x.id === id)!.render).toBe(render)
+  })
+})

package/src/ui-buttons.test.ts

@@ -1,144 +1,144 @@
-/**
- * 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'
-import SvSegmented from './SvSegmented.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() }
-  })
-  it('readonly blocks the change but stays focusable + aria-readonly', () => {
-    let got: boolean | undefined
-    const { target, destroy } = mnt(SvSwitchButton, { checked: false, readonly: true, onChange: (v: boolean) => (got = v) })
-    try {
-      const sw = target.querySelector<HTMLButtonElement>('[role="switch"]')!
-      expect(sw.getAttribute('aria-readonly')).toBe('true')
-      expect(sw.hasAttribute('disabled')).toBe(false) // focusable, unlike disabled
-      sw.click(); flushSync()
-      expect(got).toBeUndefined() // no change emitted
-    } 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() }
-  })
-  it('readonly blocks the toggle', () => {
-    let got: boolean | undefined
-    const { target, destroy } = mnt(SvCheckBox, { checked: false, readonly: true, onChange: (v: boolean) => (got = v) })
-    try {
-      const box = target.querySelector<HTMLButtonElement>('[role="checkbox"]')!
-      expect(box.getAttribute('aria-readonly')).toBe('true')
-      box.click(); flushSync()
-      expect(got).toBeUndefined()
-    } finally { 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() }
-  })
-})
-
-describe('SvSegmented', () => {
-  const opts = [{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }, { value: 'map', label: 'Map' }]
-  it('is a radiogroup; clicking selects and reports the value', () => {
-    let got: unknown
-    const { target, destroy } = mnt(SvSegmented, { options: opts, value: 'list', onChange: (v: unknown) => (got = v) })
-    try {
-      expect(target.querySelector('[role="radiogroup"]')).not.toBeNull()
-      const radios = target.querySelectorAll<HTMLButtonElement>('[role="radio"]')
-      expect(radios.length).toBe(3)
-      expect(radios[0]!.getAttribute('aria-checked')).toBe('true')
-      radios[2]!.click(); flushSync()
-      expect(got).toBe('map')
-      expect(radios[2]!.getAttribute('aria-checked')).toBe('true')
-    } finally { destroy() }
-  })
-})
+/**
+ * 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'
+import SvSegmented from './SvSegmented.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() }
+  })
+  it('readonly blocks the change but stays focusable + aria-readonly', () => {
+    let got: boolean | undefined
+    const { target, destroy } = mnt(SvSwitchButton, { checked: false, readonly: true, onChange: (v: boolean) => (got = v) })
+    try {
+      const sw = target.querySelector<HTMLButtonElement>('[role="switch"]')!
+      expect(sw.getAttribute('aria-readonly')).toBe('true')
+      expect(sw.hasAttribute('disabled')).toBe(false) // focusable, unlike disabled
+      sw.click(); flushSync()
+      expect(got).toBeUndefined() // no change emitted
+    } 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() }
+  })
+  it('readonly blocks the toggle', () => {
+    let got: boolean | undefined
+    const { target, destroy } = mnt(SvCheckBox, { checked: false, readonly: true, onChange: (v: boolean) => (got = v) })
+    try {
+      const box = target.querySelector<HTMLButtonElement>('[role="checkbox"]')!
+      expect(box.getAttribute('aria-readonly')).toBe('true')
+      box.click(); flushSync()
+      expect(got).toBeUndefined()
+    } finally { 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() }
+  })
+})
+
+describe('SvSegmented', () => {
+  const opts = [{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }, { value: 'map', label: 'Map' }]
+  it('is a radiogroup; clicking selects and reports the value', () => {
+    let got: unknown
+    const { target, destroy } = mnt(SvSegmented, { options: opts, value: 'list', onChange: (v: unknown) => (got = v) })
+    try {
+      expect(target.querySelector('[role="radiogroup"]')).not.toBeNull()
+      const radios = target.querySelectorAll<HTMLButtonElement>('[role="radio"]')
+      expect(radios.length).toBe(3)
+      expect(radios[0]!.getAttribute('aria-checked')).toBe('true')
+      radios[2]!.click(); flushSync()
+      expect(got).toBe('map')
+      expect(radios[2]!.getAttribute('aria-checked')).toBe('true')
+    } finally { destroy() }
+  })
+})