@svgrid/grid 2.2.16 → 2.2.18

package/src/toast-store.test.ts

@@ -3,7 +3,7 @@
  * 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'
+import { toast, dismissToast, updateToast, clearToasts, pauseToast, resumeToast, toastStore } from './toast-store.svelte'
 
 beforeEach(() => {
   vi.useFakeTimers()
@@ -83,4 +83,65 @@ describe('toast store', () => {
     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-breadth.test.ts

@@ -0,0 +1,138 @@
+/**
+ * Tests for the Pillar C breadth components: SvCollapsible (accessible toggle),
+ * SvResult (status), SvLoadingOverlay (scrim), and the layout primitives.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvCollapsible from './SvCollapsible.svelte'
+import SvResult from './SvResult.svelte'
+import SvLoadingOverlay from './SvLoadingOverlay.svelte'
+import SvSimpleGrid from './SvSimpleGrid.svelte'
+import SvTitle from './SvTitle.svelte'
+import SvText from './SvText.svelte'
+import SvAnchor from './SvAnchor.svelte'
+import SvKbd from './SvKbd.svelte'
+import SvCode from './SvCode.svelte'
+import SvVisuallyHidden from './SvVisuallyHidden.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('SvCollapsible', () => {
+  it('toggles aria-expanded and wires the region', () => {
+    let open: boolean | undefined
+    const { target, destroy } = mnt(SvCollapsible, { title: 'More', onOpenChange: (o: boolean) => (open = o) })
+    try {
+      const trigger = target.querySelector<HTMLButtonElement>('.sv-collapse__trigger')!
+      expect(trigger.getAttribute('aria-expanded')).toBe('false')
+      const region = target.querySelector('.sv-collapse__region')!
+      expect(trigger.getAttribute('aria-controls')).toBe(region.id)
+      trigger.click(); flushSync()
+      expect(trigger.getAttribute('aria-expanded')).toBe('true')
+      expect(open).toBe(true)
+    } finally { destroy() }
+  })
+  it('disabled does not toggle', () => {
+    const { target, destroy } = mnt(SvCollapsible, { title: 'X', disabled: true })
+    try {
+      const trigger = target.querySelector<HTMLButtonElement>('.sv-collapse__trigger')!
+      trigger.click(); flushSync()
+      expect(trigger.getAttribute('aria-expanded')).toBe('false')
+    } finally { destroy() }
+  })
+})
+
+describe('SvResult', () => {
+  it('renders the status class, title and description', () => {
+    const { target, destroy } = mnt(SvResult, { status: 'success', title: 'Done', description: 'All good' })
+    try {
+      expect(target.querySelector('.sv-result--success')).not.toBeNull()
+      expect(target.querySelector('.sv-result__title')?.textContent).toBe('Done')
+      expect(target.querySelector('.sv-result__desc')?.textContent).toBe('All good')
+    } finally { destroy() }
+  })
+})
+
+describe('SvLoadingOverlay', () => {
+  it('renders only when visible, with a polite status role', () => {
+    const hidden = mnt(SvLoadingOverlay, { visible: false })
+    try { expect(hidden.target.querySelector('.sv-loading')).toBeNull() } finally { hidden.destroy() }
+    const shown = mnt(SvLoadingOverlay, { visible: true, label: 'Saving' })
+    try {
+      const el = shown.target.querySelector('.sv-loading')!
+      expect(el).not.toBeNull()
+      expect(el.getAttribute('role')).toBe('status')
+      expect(el.getAttribute('aria-label')).toBe('Saving')
+    } finally { shown.destroy() }
+  })
+})
+
+describe('SvSimpleGrid', () => {
+  it('uses a fixed column template when cols is set', () => {
+    const { target, destroy } = mnt(SvSimpleGrid, { cols: 3 })
+    try {
+      const el = target.querySelector<HTMLElement>('.sv-simplegrid')!
+      expect(el.style.gridTemplateColumns).toContain('repeat(3')
+    } finally { destroy() }
+  })
+})
+
+describe('SvTitle', () => {
+  it('renders the heading tag for its order', () => {
+    const { target, destroy } = mnt(SvTitle, { order: 3, children: undefined })
+    try { expect(target.querySelector('h3')).not.toBeNull() } finally { destroy() }
+  })
+})
+
+describe('SvText', () => {
+  it('applies the line clamp when clamp is set', () => {
+    const { target, destroy } = mnt(SvText, { clamp: 2 })
+    try {
+      const el = target.querySelector<HTMLElement>('.sv-text')!
+      expect(el.classList.contains('is-clamp')).toBe(true)
+      expect(el.style.getPropertyValue('--sv-text-clamp')).toBe('2')
+    } finally { destroy() }
+  })
+})
+
+describe('SvAnchor', () => {
+  it('adds safe rel and target for external links', () => {
+    const { target, destroy } = mnt(SvAnchor, { href: 'https://svelte.dev', external: true })
+    try {
+      const a = target.querySelector('a')!
+      expect(a.getAttribute('target')).toBe('_blank')
+      expect(a.getAttribute('rel')).toBe('noopener noreferrer')
+    } finally { destroy() }
+  })
+})
+
+describe('SvKbd', () => {
+  it('renders one <kbd> per key in a combo', () => {
+    const { target, destroy } = mnt(SvKbd, { keys: ['Ctrl', 'K'] })
+    try { expect(target.querySelectorAll('kbd').length).toBe(2) } finally { destroy() }
+  })
+})
+
+describe('SvCode', () => {
+  it('renders a <pre> in block mode and inline <code> otherwise', () => {
+    const block = mnt(SvCode, { block: true, code: 'a' })
+    try { expect(block.target.querySelector('pre.sv-code--block')).not.toBeNull() } finally { block.destroy() }
+    const inline = mnt(SvCode, { code: 'a' })
+    try {
+      expect(inline.target.querySelector('pre')).toBeNull()
+      expect(inline.target.querySelector('code.sv-code--inline')).not.toBeNull()
+    } finally { inline.destroy() }
+  })
+})
+
+describe('SvVisuallyHidden', () => {
+  it('renders content in an off-screen element', () => {
+    const { target, destroy } = mnt(SvVisuallyHidden, { children: undefined })
+    try { expect(target.querySelector('.sv-vh')).not.toBeNull() } finally { destroy() }
+  })
+})

package/src/ui-buttons.test.ts

@@ -9,6 +9,7 @@ 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')
@@ -52,6 +53,17 @@ describe('SvSwitchButton', () => {
       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', () => {
@@ -68,6 +80,16 @@ describe('SvCheckBox', () => {
       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', () => {
@@ -103,3 +125,20 @@ describe('SvRating', () => {
     } 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() }
+  })
+})

package/src/ui-inputs.test.ts

@@ -25,7 +25,7 @@ describe('SvNumberInput validation a11y (editor contract)', () => {
       const err = target.querySelector('#qty__error')!
       expect(err.getAttribute('role')).toBe('alert')
       expect(err.textContent).toBe('Too big')
-      expect(target.querySelector('.sv-num.is-invalid')).toBeTruthy()
+      expect(target.querySelector('.sv-field__control.is-invalid')).toBeTruthy()
     } finally { destroy() }
   })
 
@@ -35,7 +35,7 @@ describe('SvNumberInput validation a11y (editor contract)', () => {
       const input = target.querySelector<HTMLInputElement>('.sv-num__input')!
       expect(input.getAttribute('aria-invalid')).toBeNull()
       expect(input.getAttribute('aria-describedby')).toBeNull()
-      expect(target.querySelector('.sv-num.is-invalid')).toBeNull()
+      expect(target.querySelector('.sv-field__control.is-invalid')).toBeNull()
     } finally { destroy() }
   })
 })

package/src/ui-range.test.ts

@@ -38,6 +38,15 @@ describe('SvSlider', () => {
       expect(got).toEqual([30, 80])
     } finally { destroy() }
   })
+  it('wires validation ARIA onto the thumb (aria-invalid + describedby)', () => {
+    const { target, destroy } = mnt(SvSlider, { value: 50, invalid: true, error: 'Out of range', id: 'vol', required: true })
+    try {
+      const thumb = target.querySelector<HTMLElement>('[role="slider"]')!
+      expect(thumb.getAttribute('aria-invalid')).toBe('true')
+      expect(thumb.getAttribute('aria-required')).toBe('true')
+      expect(thumb.getAttribute('aria-describedby')).toContain('vol__error')
+    } finally { destroy() }
+  })
 })
 
 describe('SvGauge', () => {

package/src/ui-selection.test.ts

@@ -67,6 +67,31 @@ describe('SvDropDownList', () => {
       expect(document.querySelector('.sv-ddl__panel')).toBeNull() // closed
     } finally { destroy() }
   })
+  it('readonly does not open the panel and marks aria-readonly', () => {
+    let got: any
+    const { target, destroy } = mnt(SvDropDownList, { options: OPTS, value: 'a', readonly: true, onChange: (v: any) => (got = v) })
+    try {
+      const trigger = target.querySelector<HTMLButtonElement>('.sv-ddl')!
+      expect(trigger.getAttribute('aria-readonly')).toBe('true')
+      expect(trigger.hasAttribute('disabled')).toBe(false) // still focusable
+      trigger.click(); flushSync()
+      expect(document.querySelector('.sv-ddl__panel')).toBeNull() // stayed closed
+      expect(got).toBeUndefined()
+    } finally { destroy() }
+  })
+  it('renders a resize grip only when resizable and the panel opens downward', () => {
+    const off = mnt(SvDropDownList, { options: OPTS, value: null })
+    try {
+      off.target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
+      expect(document.querySelector('.sv-ddl__grip')).toBeNull() // no grip by default
+    } finally { off.destroy() }
+    const on = mnt(SvDropDownList, { options: OPTS, value: null, resizable: true })
+    try {
+      on.target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
+      expect(document.querySelector('.sv-ddl__panel.is-resizable')).not.toBeNull()
+      expect(document.querySelector('.sv-ddl__grip')).not.toBeNull()
+    } finally { on.destroy() }
+  })
 })
 
 describe('SvComboBox', () => {
@@ -84,6 +109,17 @@ describe('SvComboBox', () => {
       expect(got).toBe('b')
     } finally { destroy() }
   })
+  it('shows a resize grip on the open panel when resizable', () => {
+    const { target, destroy } = mnt(SvComboBox, { options: OPTS, value: null, resizable: true })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-combo__input')!
+      input.dispatchEvent(new FocusEvent('focus')); flushSync()
+      input.value = 'b'
+      input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
+      expect(document.querySelector('.sv-ddl__panel.is-resizable')).not.toBeNull()
+      expect(document.querySelector('.sv-ddl__grip')).not.toBeNull()
+    } finally { destroy() }
+  })
 })
 
 describe('SvTagsInput', () => {

package/src/ui-tier1.test.ts

@@ -46,7 +46,7 @@ describe('SvTextInput', () => {
     const onChange = vi.fn()
     const { target, destroy } = mountOn(SvTextInput, { value: 'x', clearable: true, onChange })
     try {
-      const clear = target.querySelector<HTMLButtonElement>('.sv-text__clear')!
+      const clear = target.querySelector<HTMLButtonElement>('.sv-field__clear')!
       expect(clear).not.toBeNull()
       clear.click()
       expect(onChange).toHaveBeenCalledWith('')

package/src/virtual.test.ts

@@ -48,12 +48,26 @@ describe('SvListBox virtual', () => {
       const rendered = target.querySelectorAll('.sv-listbox__opt').length
       expect(rendered).toBeGreaterThan(0)
       expect(rendered).toBeLessThan(60) // nowhere near 5000
-      // Top + bottom spacers + the windowed rows reserve the full scroll height,
-      // keeping the scrollbar honest without positioning rows out of flow.
-      const spacers = target.querySelectorAll<HTMLElement>('.sv-listbox__spacer')
-      expect(spacers.length).toBe(2)
-      const spacerPx = [...spacers].reduce((sum, s) => sum + parseFloat(s.style.height || '0'), 0)
-      expect(spacerPx + rendered * 32).toBe(5000 * 32)
+      // Virtual mode is a JS-driven scroller: one clipped viewport holds the
+      // windowed rows (moved by `scrollOffset`, not native scroll) plus a custom
+      // scrollbar - so there is no native async-scroll gap to flash blank.
+      expect(target.querySelector('.sv-listbox__vp')).not.toBeNull()
+      expect(target.querySelector('.sv-listbox__sb')).not.toBeNull()
+    } finally { unmount(app); target.remove() }
+  })
+
+  it('windows a GROUPED list too (group headings render inside the window)', () => {
+    const roles = ['Eng', 'Design', 'Ops']
+    const options = Array.from({ length: 3000 }, (_, i) => ({ value: i, label: `User ${i}`, group: roles[i % 3] }))
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const app = mount(SvListBox, { target, props: { options, virtual: true } as any })
+    flushSync()
+    try {
+      const rendered = target.querySelectorAll('.sv-listbox__opt').length
+      expect(rendered).toBeGreaterThan(0)
+      expect(rendered).toBeLessThan(60) // grouped list is windowed, not fully rendered
+      expect(target.querySelector('.sv-listbox__vp')).not.toBeNull()
     } finally { unmount(app); target.remove() }
   })