@svgrid/grid 2.7.0 → 3.0.1

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() }
+  })
+})

package/src/ui-inputs.test.ts

@@ -1,118 +1,118 @@
-/** Group C (text inputs) component tests. */
-import { describe, expect, it } from 'vitest'
-import { mount, unmount, flushSync } from 'svelte'
-import SvNumberInput from './SvNumberInput.svelte'
-import SvPasswordInput from './SvPasswordInput.svelte'
-import SvMaskedInput from './SvMaskedInput.svelte'
-import SvPhoneInput from './SvPhoneInput.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('SvNumberInput validation a11y (editor contract)', () => {
-  it('wires aria-invalid + aria-required + aria-describedby -> error text', () => {
-    const { target, destroy } = mnt(SvNumberInput, { value: 5, id: 'qty', invalid: true, required: true, error: 'Too big' })
-    try {
-      const input = target.querySelector<HTMLInputElement>('.sv-num__input')!
-      expect(input.getAttribute('aria-invalid')).toBe('true')
-      expect(input.getAttribute('aria-required')).toBe('true')
-      expect(input.getAttribute('aria-describedby')).toBe('qty__error')
-      const err = target.querySelector('#qty__error')!
-      expect(err.getAttribute('role')).toBe('alert')
-      expect(err.textContent).toBe('Too big')
-      expect(target.querySelector('.sv-field__control.is-invalid')).toBeTruthy()
-    } finally { destroy() }
-  })
-
-  it('adds no validation attributes when the props are unset', () => {
-    const { target, destroy } = mnt(SvNumberInput, { value: 1 })
-    try {
-      const input = target.querySelector<HTMLInputElement>('.sv-num__input')!
-      expect(input.getAttribute('aria-invalid')).toBeNull()
-      expect(input.getAttribute('aria-describedby')).toBeNull()
-      expect(target.querySelector('.sv-field__control.is-invalid')).toBeNull()
-    } finally { destroy() }
-  })
-})
-
-describe('SvNumberInput', () => {
-  it('clamps to max on commit', () => {
-    let got: number | null | undefined
-    const { target, destroy } = mnt(SvNumberInput, { value: 5, min: 0, max: 10, step: 2, onChange: (v: number | null) => (got = v) })
-    try {
-      const input = target.querySelector<HTMLInputElement>('.sv-num__input')!
-      input.dispatchEvent(new FocusEvent('focus'))
-      input.value = '99'
-      input.dispatchEvent(new Event('input', { bubbles: true }))
-      input.dispatchEvent(new FocusEvent('blur'))
-      flushSync()
-      expect(got).toBe(10)
-    } finally { destroy() }
-  })
-  it('ArrowDown steps down by step from the current value', () => {
-    let got: number | null | undefined
-    const { target, destroy } = mnt(SvNumberInput, { value: 8, min: 0, max: 10, step: 2, onChange: (v: number | null) => (got = v) })
-    try {
-      target.querySelector<HTMLInputElement>('.sv-num__input')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
-      flushSync()
-      expect(got).toBe(6)
-    } finally { destroy() }
-  })
-})
-
-describe('SvPasswordInput', () => {
-  it('reveal toggle flips the input type', () => {
-    const { target, destroy } = mnt(SvPasswordInput, { value: 'secret' })
-    try {
-      const input = target.querySelector<HTMLInputElement>('.sv-pw__input')!
-      expect(input.type).toBe('password')
-      target.querySelector<HTMLButtonElement>('.sv-pw__eye')!.click()
-      flushSync()
-      expect(target.querySelector<HTMLInputElement>('.sv-pw__input')!.type).toBe('text')
-    } finally { destroy() }
-  })
-  it('computes a strength score', () => {
-    const { target, destroy } = mnt(SvPasswordInput, { value: 'Abcdef1!', showStrength: true })
-    try {
-      expect(target.querySelector('.sv-pw__strength')!.textContent).toBe('Strong')
-    } finally { destroy() }
-  })
-})
-
-describe('SvMaskedInput', () => {
-  it('formats input to the mask and reports raw', () => {
-    let raw = ''
-    let masked = ''
-    const { target, destroy } = mnt(SvMaskedInput, {
-      mask: '(###) ###-####',
-      onChange: (m: string, r: string) => { masked = m; raw = r },
-    })
-    try {
-      const input = target.querySelector<HTMLInputElement>('.sv-masked__input')!
-      input.value = '1234567890'
-      input.dispatchEvent(new Event('input', { bubbles: true }))
-      flushSync()
-      expect(masked).toBe('(123) 456-7890')
-      expect(raw).toBe('1234567890')
-    } finally { destroy() }
-  })
-})
-
-describe('SvPhoneInput', () => {
-  it('emits E.164 with dial code and national digits', () => {
-    let out = ''
-    const { target, destroy } = mnt(SvPhoneInput, { country: 'US', onChange: (v: string) => (out = v) })
-    try {
-      const input = target.querySelector<HTMLInputElement>('.sv-phone__number')!
-      input.value = '(415) 555-1234'
-      input.dispatchEvent(new Event('input', { bubbles: true }))
-      flushSync()
-      expect(out).toBe('+14155551234')
-    } finally { destroy() }
-  })
-})
+/** Group C (text inputs) component tests. */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvNumberInput from './SvNumberInput.svelte'
+import SvPasswordInput from './SvPasswordInput.svelte'
+import SvMaskedInput from './SvMaskedInput.svelte'
+import SvPhoneInput from './SvPhoneInput.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('SvNumberInput validation a11y (editor contract)', () => {
+  it('wires aria-invalid + aria-required + aria-describedby -> error text', () => {
+    const { target, destroy } = mnt(SvNumberInput, { value: 5, id: 'qty', invalid: true, required: true, error: 'Too big' })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-num__input')!
+      expect(input.getAttribute('aria-invalid')).toBe('true')
+      expect(input.getAttribute('aria-required')).toBe('true')
+      expect(input.getAttribute('aria-describedby')).toBe('qty__error')
+      const err = target.querySelector('#qty__error')!
+      expect(err.getAttribute('role')).toBe('alert')
+      expect(err.textContent).toBe('Too big')
+      expect(target.querySelector('.sv-field__control.is-invalid')).toBeTruthy()
+    } finally { destroy() }
+  })
+
+  it('adds no validation attributes when the props are unset', () => {
+    const { target, destroy } = mnt(SvNumberInput, { value: 1 })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-num__input')!
+      expect(input.getAttribute('aria-invalid')).toBeNull()
+      expect(input.getAttribute('aria-describedby')).toBeNull()
+      expect(target.querySelector('.sv-field__control.is-invalid')).toBeNull()
+    } finally { destroy() }
+  })
+})
+
+describe('SvNumberInput', () => {
+  it('clamps to max on commit', () => {
+    let got: number | null | undefined
+    const { target, destroy } = mnt(SvNumberInput, { value: 5, min: 0, max: 10, step: 2, onChange: (v: number | null) => (got = v) })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-num__input')!
+      input.dispatchEvent(new FocusEvent('focus'))
+      input.value = '99'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      input.dispatchEvent(new FocusEvent('blur'))
+      flushSync()
+      expect(got).toBe(10)
+    } finally { destroy() }
+  })
+  it('ArrowDown steps down by step from the current value', () => {
+    let got: number | null | undefined
+    const { target, destroy } = mnt(SvNumberInput, { value: 8, min: 0, max: 10, step: 2, onChange: (v: number | null) => (got = v) })
+    try {
+      target.querySelector<HTMLInputElement>('.sv-num__input')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      flushSync()
+      expect(got).toBe(6)
+    } finally { destroy() }
+  })
+})
+
+describe('SvPasswordInput', () => {
+  it('reveal toggle flips the input type', () => {
+    const { target, destroy } = mnt(SvPasswordInput, { value: 'secret' })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-pw__input')!
+      expect(input.type).toBe('password')
+      target.querySelector<HTMLButtonElement>('.sv-pw__eye')!.click()
+      flushSync()
+      expect(target.querySelector<HTMLInputElement>('.sv-pw__input')!.type).toBe('text')
+    } finally { destroy() }
+  })
+  it('computes a strength score', () => {
+    const { target, destroy } = mnt(SvPasswordInput, { value: 'Abcdef1!', showStrength: true })
+    try {
+      expect(target.querySelector('.sv-pw__strength')!.textContent).toBe('Strong')
+    } finally { destroy() }
+  })
+})
+
+describe('SvMaskedInput', () => {
+  it('formats input to the mask and reports raw', () => {
+    let raw = ''
+    let masked = ''
+    const { target, destroy } = mnt(SvMaskedInput, {
+      mask: '(###) ###-####',
+      onChange: (m: string, r: string) => { masked = m; raw = r },
+    })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-masked__input')!
+      input.value = '1234567890'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      flushSync()
+      expect(masked).toBe('(123) 456-7890')
+      expect(raw).toBe('1234567890')
+    } finally { destroy() }
+  })
+})
+
+describe('SvPhoneInput', () => {
+  it('emits E.164 with dial code and national digits', () => {
+    let out = ''
+    const { target, destroy } = mnt(SvPhoneInput, { country: 'US', onChange: (v: string) => (out = v) })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-phone__number')!
+      input.value = '(415) 555-1234'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      flushSync()
+      expect(out).toBe('+14155551234')
+    } finally { destroy() }
+  })
+})