@svgrid/grid 2.2.27 → 2.2.29

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

package/src/ui-range.test.ts

@@ -1,70 +1,70 @@
-/** Group E (slider + gauge) component tests. */
-import { describe, expect, it } from 'vitest'
-import { mount, unmount, flushSync } from 'svelte'
-import SvSlider from './SvSlider.svelte'
-import SvGauge from './SvGauge.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('SvSlider', () => {
-  it('single: arrow keys step within bounds', () => {
-    let got: any
-    const { target, destroy } = mnt(SvSlider, { value: 50, min: 0, max: 100, step: 5, onChange: (v: any) => (got = v) })
-    try {
-      const thumb = target.querySelector<HTMLElement>('[role="slider"]')!
-      expect(thumb.getAttribute('aria-valuenow')).toBe('50')
-      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
-      flushSync()
-      expect(got).toBe(55)
-      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
-      flushSync()
-      expect(got).toBe(0)
-    } finally { destroy() }
-  })
-  it('range: two thumbs, low thumb capped at high value', () => {
-    let got: any
-    const { target, destroy } = mnt(SvSlider, { value: [20, 80], range: true, min: 0, max: 100, step: 10, onChange: (v: any) => (got = v) })
-    try {
-      const thumbs = target.querySelectorAll<HTMLElement>('[role="slider"]')
-      expect(thumbs.length).toBe(2)
-      thumbs[0]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
-      flushSync()
-      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', () => {
-  it('exposes a meter role with clamped value + label', () => {
-    const { target, destroy } = mnt(SvGauge, { value: 150, min: 0, max: 100 })
-    try {
-      const meter = target.querySelector('[role="meter"]')!
-      expect(meter.getAttribute('aria-valuenow')).toBe('100') // clamped to max
-      expect(target.querySelector('.sv-gauge__label')!.textContent).toContain('100')
-    } finally { destroy() }
-  })
-  it('renders one path per band when bands are given', () => {
-    const { target, destroy } = mnt(SvGauge, {
-      value: 50, bands: [{ from: 0, to: 50, color: '#16a34a' }, { from: 50, to: 100, color: '#dc2626' }],
-    })
-    try {
-      // track + 2 bands = 3 paths, no value arc
-      expect(target.querySelectorAll('path').length).toBe(3)
-    } finally { destroy() }
-  })
-})
+/** Group E (slider + gauge) component tests. */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvSlider from './SvSlider.svelte'
+import SvGauge from './SvGauge.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('SvSlider', () => {
+  it('single: arrow keys step within bounds', () => {
+    let got: any
+    const { target, destroy } = mnt(SvSlider, { value: 50, min: 0, max: 100, step: 5, onChange: (v: any) => (got = v) })
+    try {
+      const thumb = target.querySelector<HTMLElement>('[role="slider"]')!
+      expect(thumb.getAttribute('aria-valuenow')).toBe('50')
+      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      expect(got).toBe(55)
+      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
+      flushSync()
+      expect(got).toBe(0)
+    } finally { destroy() }
+  })
+  it('range: two thumbs, low thumb capped at high value', () => {
+    let got: any
+    const { target, destroy } = mnt(SvSlider, { value: [20, 80], range: true, min: 0, max: 100, step: 10, onChange: (v: any) => (got = v) })
+    try {
+      const thumbs = target.querySelectorAll<HTMLElement>('[role="slider"]')
+      expect(thumbs.length).toBe(2)
+      thumbs[0]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      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', () => {
+  it('exposes a meter role with clamped value + label', () => {
+    const { target, destroy } = mnt(SvGauge, { value: 150, min: 0, max: 100 })
+    try {
+      const meter = target.querySelector('[role="meter"]')!
+      expect(meter.getAttribute('aria-valuenow')).toBe('100') // clamped to max
+      expect(target.querySelector('.sv-gauge__label')!.textContent).toContain('100')
+    } finally { destroy() }
+  })
+  it('renders one path per band when bands are given', () => {
+    const { target, destroy } = mnt(SvGauge, {
+      value: 50, bands: [{ from: 0, to: 50, color: '#16a34a' }, { from: 50, to: 100, color: '#dc2626' }],
+    })
+    try {
+      // track + 2 bands = 3 paths, no value arc
+      expect(target.querySelectorAll('path').length).toBe(3)
+    } finally { destroy() }
+  })
+})