npm - @svgrid/grid - Versions diffs - 3.0.0 → 3.0.1 - Mend

@svgrid/grid 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (259) hide show

package/CHANGELOG.md +116 -88
package/README.md +199 -199
package/dist/FlexRender.svelte +96 -96
package/dist/GridFooter.svelte +181 -181
package/dist/SvAutoComplete.svelte +169 -169
package/dist/SvAvatar.svelte +75 -75
package/dist/SvCalendar.svelte +503 -503
package/dist/SvCarousel.svelte +141 -141
package/dist/SvCheckBox.svelte +102 -102
package/dist/SvCircularProgress.svelte +109 -109
package/dist/SvColorInput.svelte +181 -181
package/dist/SvComboBox.svelte +279 -279
package/dist/SvContextMenu.svelte +116 -116
package/dist/SvCountryInput.svelte +163 -163
package/dist/SvDrawer.svelte +254 -254
package/dist/SvDropDownList.svelte +378 -378
package/dist/SvDurationInput.svelte +126 -126
package/dist/SvField.svelte +293 -293
package/dist/SvForm.svelte +437 -437
package/dist/SvGridCellEditor.svelte +748 -744
package/dist/SvGridChart.svelte +1716 -1716
package/dist/SvGridChartPanel.svelte +485 -485
package/dist/SvGridChartView.svelte +70 -70
package/dist/SvGridDropdown.svelte +728 -728
package/dist/SvGridSelect.svelte +270 -270
package/dist/SvGroupCell.svelte +116 -116
package/dist/SvListBox.svelte +334 -334
package/dist/SvMaskedInput.svelte +122 -122
package/dist/SvMenu.svelte +124 -124
package/dist/SvMenuList.svelte +146 -146
package/dist/SvMultiSelect.svelte +293 -293
package/dist/SvNumberInput.svelte +172 -172
package/dist/SvOtpInput.svelte +158 -158
package/dist/SvPasswordInput.svelte +151 -151
package/dist/SvPhoneInput.svelte +133 -133
package/dist/SvPopover.svelte +197 -197
package/dist/SvProgress.svelte +116 -116
package/dist/SvRadioGroup.svelte +107 -107
package/dist/SvRating.svelte +112 -112
package/dist/SvResult.svelte +73 -73
package/dist/SvRichText.svelte +211 -211
package/dist/SvRowGroupPanel.svelte +170 -170
package/dist/SvScrollArea.svelte +61 -61
package/dist/SvSlider.svelte +203 -203
package/dist/SvSwitchButton.svelte +108 -108
package/dist/SvTagsInput.svelte +115 -115
package/dist/SvTextInput.svelte +147 -147
package/dist/SvTimePicker.svelte +245 -245
package/dist/SvToaster.svelte +159 -159
package/dist/SvToggleButton.svelte +85 -85
package/dist/SvTooltip.svelte +161 -161
package/dist/SvTour.svelte +208 -208
package/dist/SvTree.svelte +444 -444
package/dist/SvTreeSelect.svelte +239 -239
package/dist/cdn/{GridMenus-DMihUtma.js → GridMenus-CYzOvmNQ.js} +3 -3
package/dist/cdn/{GridMenus-nmNDj1a3.js → GridMenus-DFB6iwF8.js} +3 -3
package/dist/cdn/{SvDateRangeInput-DflbiP7N.js → SvDateRangeInput-CaOuMs8O.js} +1 -1
package/dist/cdn/{SvDateRangeInput-Bh0A0JkF.js → SvDateRangeInput-DMLKmGEc.js} +1 -1
package/dist/cdn/{SvDateTimePicker-Bivn8dAP.js → SvDateTimePicker-CCbDZNZB.js} +1 -1
package/dist/cdn/{SvDateTimePicker-BWwpfB_o.js → SvDateTimePicker-sonaH0oh.js} +1 -1
package/dist/cdn/{SvGridCellEditor-Ba7rY3eu.js → SvGridCellEditor-BWnTi2N7.js} +2 -2
package/dist/cdn/{SvGridCellEditor-AXL8cHGO.js → SvGridCellEditor-CjEJMJKc.js} +2 -2
package/dist/cdn/{SvGridChart-CwhFz7GV.js → SvGridChart-BEJmNNx9.js} +1 -1
package/dist/cdn/{SvGridChart-Bs2GIR2Q.js → SvGridChart-BwVos976.js} +1 -1
package/dist/cdn/{SvGridChartPanel-1WXuStzM.js → SvGridChartPanel-BOknOkrP.js} +1 -1
package/dist/cdn/{SvGridChartPanel-e5_nqNP9.js → SvGridChartPanel-D2PjII4O.js} +1 -1
package/dist/cdn/{SvGridChartView-SmPW10dI.js → SvGridChartView-00LPUHL1.js} +1 -1
package/dist/cdn/{SvGridChartView-eSPuJE6g.js → SvGridChartView-BhUEJ5ki.js} +1 -1
package/dist/cdn/{SvGridDropdown-B1ZcLpgs.js → SvGridDropdown-D0VdjeR8.js} +1 -1
package/dist/cdn/{SvGridDropdown-CtdbHcIS.js → SvGridDropdown-D13MtJ2j.js} +1 -1
package/dist/cdn/{date-format-DZT7T1wf.js → date-format-BNii4zeD.js} +2 -2
package/dist/cdn/{date-format-CcP1tafP.js → date-format-BnnHlqGw.js} +2 -2
package/dist/cdn/{src-B_YS5AOc.js → src-C8QjSaq-.js} +42 -44
package/dist/cdn/{src-DYXXpuSk.js → src-D0hO2eYN.js} +41 -43
package/dist/cdn/svgrid.js +7 -7
package/dist/cdn/svgrid.svelte-external.js +7 -7
package/dist/chart-export.js +8 -8
package/dist/editing.js +22 -13
package/package.json +11 -11
package/src/FlexRender.svelte +96 -96
package/src/GridFooter.svelte +181 -181
package/src/SvAutoComplete.svelte +169 -169
package/src/SvAvatar.svelte +75 -75
package/src/SvCalendar.svelte +503 -503
package/src/SvCalendar.test.ts +226 -226
package/src/SvCarousel.svelte +141 -141
package/src/SvCheckBox.svelte +102 -102
package/src/SvCircularProgress.svelte +109 -109
package/src/SvColorInput.svelte +181 -181
package/src/SvComboBox.svelte +279 -279
package/src/SvContextMenu.svelte +116 -116
package/src/SvCountryInput.svelte +163 -163
package/src/SvDrawer.svelte +254 -254
package/src/SvDropDownList.svelte +378 -378
package/src/SvDurationInput.svelte +126 -126
package/src/SvField.svelte +293 -293
package/src/SvForm.svelte +437 -437
package/src/SvForm.test.ts +411 -411
package/src/SvGrid.types.ts +2092 -2092
package/src/SvGridCellEditor.svelte +748 -744
package/src/SvGridChart.svelte +1716 -1716
package/src/SvGridChartPanel.svelte +485 -485
package/src/SvGridChartView.svelte +70 -70
package/src/SvGridDropdown.svelte +728 -728
package/src/SvGridSelect.svelte +270 -270
package/src/SvGroupCell.svelte +116 -116
package/src/SvListBox.svelte +334 -334
package/src/SvMaskedInput.svelte +122 -122
package/src/SvMenu.svelte +124 -124
package/src/SvMenu.test.ts +97 -97
package/src/SvMenuList.svelte +146 -146
package/src/SvMultiSelect.svelte +293 -293
package/src/SvNumberInput.svelte +172 -172
package/src/SvOtpInput.svelte +158 -158
package/src/SvPasswordInput.svelte +151 -151
package/src/SvPhoneInput.svelte +133 -133
package/src/SvPopover.svelte +197 -197
package/src/SvProgress.svelte +116 -116
package/src/SvRadioGroup.svelte +107 -107
package/src/SvRating.svelte +112 -112
package/src/SvResult.svelte +73 -73
package/src/SvRichText.svelte +211 -211
package/src/SvRowGroupPanel.svelte +170 -170
package/src/SvScrollArea.svelte +61 -61
package/src/SvSlider.svelte +203 -203
package/src/SvSwitchButton.svelte +108 -108
package/src/SvTagsInput.svelte +115 -115
package/src/SvTextInput.svelte +147 -147
package/src/SvTimePicker.svelte +245 -245
package/src/SvToaster.svelte +159 -159
package/src/SvToaster.test.ts +95 -95
package/src/SvToggleButton.svelte +85 -85
package/src/SvTooltip.svelte +161 -161
package/src/SvTour.svelte +208 -208
package/src/SvTree.svelte +444 -444
package/src/SvTreeSelect.svelte +239 -239
package/src/a11y/dismissable.test.ts +119 -119
package/src/a11y/dismissable.ts +114 -114
package/src/a11y.contract.test.ts +49 -49
package/src/a11y.test.ts +59 -59
package/src/a11y.ts +61 -61
package/src/ai.test.ts +502 -502
package/src/ai.ts +1419 -1419
package/src/build-api.coverage.test.ts +633 -633
package/src/build-api.ts +846 -846
package/src/builtin-editors.grid.test.ts +83 -83
package/src/cell-formatting.ts +171 -171
package/src/cell-render.test.ts +513 -513
package/src/cell-render.ts +496 -496
package/src/cell-values.ts +148 -148
package/src/chart-export.ts +202 -202
package/src/chart-view.svelte.ts +36 -36
package/src/chart.ts +2321 -2321
package/src/collaboration.test.ts +104 -104
package/src/collaboration.ts +167 -167
package/src/column-groups.ts +78 -78
package/src/core.performance.test.ts +30 -30
package/src/core.ts +1865 -1865
package/src/createAutocomplete.svelte.ts +132 -132
package/src/createCombobox.svelte.ts +191 -191
package/src/createCountryInput.svelte.ts +157 -157
package/src/createDropdownList.svelte.ts +168 -168
package/src/createForm.svelte.ts +386 -386
package/src/createGrid.svelte.ts +42 -42
package/src/createGrid.test.ts +10 -10
package/src/createGridState.svelte.ts +17 -17
package/src/createListbox.svelte.ts +250 -250
package/src/createMenu.svelte.ts +224 -224
package/src/createPopoverSelect.svelte.ts +213 -213
package/src/createSlider.svelte.ts +191 -191
package/src/createTooltip.svelte.ts +144 -144
package/src/createTree.svelte.ts +322 -322
package/src/datetime/date-core.ts +206 -206
package/src/datetime/date-restrict.ts +61 -61
package/src/datetime/timezone.ts +135 -135
package/src/dock-manager-model.ts +596 -596
package/src/dock-model.ts +374 -374
package/src/editing.test.ts +974 -974
package/src/editing.ts +618 -609
package/src/editor-contract.ts +171 -171
package/src/editor-registry.grid.test.ts +144 -144
package/src/editor-registry.ts +122 -122
package/src/export-data-api.test.ts +126 -126
package/src/export-format.test.ts +107 -107
package/src/export-format.ts +601 -601
package/src/filter-operators.ts +160 -160
package/src/filtering/excel-filters.ts +325 -325
package/src/flex-render.ts +3 -3
package/src/form-field.ts +127 -127
package/src/group-display.test.ts +167 -167
package/src/group-display.ts +200 -200
package/src/headless.ts +87 -87
package/src/js-scroller.svelte.ts +173 -173
package/src/keyboard-handlers.ts +270 -270
package/src/keyboard.test.ts +59 -59
package/src/keyboard.ts +97 -97
package/src/list-nav.test.ts +49 -49
package/src/list-nav.ts +29 -29
package/src/list-option.test.ts +56 -56
package/src/list-option.ts +179 -179
package/src/menus.ts +597 -597
package/src/merge-objects.ts +48 -48
package/src/overlays.test.ts +90 -90
package/src/positioning.ts +268 -268
package/src/render-component.ts +28 -28
package/src/row-drag.test.ts +401 -401
package/src/row-drag.ts +419 -419
package/src/row-resize.test.ts +524 -524
package/src/row-resize.ts +228 -228
package/src/scheduler-ical.ts +181 -181
package/src/scheduler-model.test.ts +562 -562
package/src/scheduler-model.ts +873 -873
package/src/selection.test.ts +885 -885
package/src/server-data-source.test.ts +383 -383
package/src/server-data-source.ts +469 -469
package/src/sparkline.test.ts +68 -68
package/src/sparkline.ts +169 -169
package/src/spreadsheet.test.ts +488 -488
package/src/spreadsheet.ts +312 -312
package/src/static-functions.ts +11 -11
package/src/subscribe.ts +38 -38
package/src/summaries.ts +113 -113
package/src/svgrid-wrapper.types.ts +563 -563
package/src/svgrid.async-editor-options.test.ts +273 -273
package/src/svgrid.auto-row-height.test.ts +204 -204
package/src/svgrid.behavior.test.ts +910 -910
package/src/svgrid.charting.test.ts +534 -534
package/src/svgrid.comments-autocomplete.test.ts +127 -127
package/src/svgrid.context-menu.test.ts +147 -147
package/src/svgrid.features.test.ts +157 -157
package/src/svgrid.filter-depth.test.ts +163 -163
package/src/svgrid.filter-menu-listbox.svelte.test.ts +382 -377
package/src/svgrid.filter-menu-scroll.test.ts +112 -112
package/src/svgrid.grand-total.test.ts +188 -188
package/src/svgrid.group-display-mode.test.ts +171 -171
package/src/svgrid.group-footers.test.ts +121 -121
package/src/svgrid.group-pagination.test.ts +153 -153
package/src/svgrid.new-features.wrapper.test.ts +251 -251
package/src/svgrid.tree-data.test.ts +186 -186
package/src/svgrid.wrapper.test.ts +63 -63
package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
package/src/test-setup.ts +62 -62
package/src/themes/index.ts +288 -288
package/src/toast-store.svelte.ts +250 -250
package/src/toast-store.test.ts +147 -147
package/src/tree-row-model.test.ts +168 -168
package/src/ui-buttons.test.ts +144 -144
package/src/ui-inputs.test.ts +118 -118
package/src/ui-localization.test.ts +113 -113
package/src/ui-range.test.ts +70 -70
package/src/ui-selection.test.ts +155 -155
package/src/ui-tier1.test.ts +142 -142
package/src/virtual.test.ts +88 -88
package/src/virtualization/column-virtualizer.test.ts +27 -27
package/src/virtualization/column-virtualizer.ts +30 -30
package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
package/src/virtualization/types.ts +30 -30
package/src/virtualization/virtualizer.test.ts +47 -47
package/src/virtualization/virtualizer.ts +322 -322

package/src/ui-selection.test.ts CHANGED Viewed

@@ -1,155 +1,155 @@
-/** Group D (selection overlays) component tests. Panels portal to <body>. */
-import { describe, expect, it, afterEach } from 'vitest'
-import { mount, unmount, flushSync } from 'svelte'
-import SvListBox from './SvListBox.svelte'
-import SvDropDownList from './SvDropDownList.svelte'
-import SvComboBox from './SvComboBox.svelte'
-import SvTagsInput from './SvTagsInput.svelte'
-import SvCountryInput from './SvCountryInput.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() } }
-}
-afterEach(() => {
-  document.querySelectorAll('.sv-ddl__panel, .sv-country__panel').forEach((n) => n.remove())
-})
-const OPTS = [
-  { value: 'a', label: 'Apple' },
-  { value: 'b', label: 'Banana' },
-  { value: 'c', label: 'Cherry' },
-]
-describe('SvListBox', () => {
-  it('single select emits scalar; multi toggles array', () => {
-    let got: any
-    const a = mnt(SvListBox, { options: OPTS, value: 'a', onChange: (v: any) => (got = v) })
-    try {
-      a.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[2]!.click(); flushSync()
-      expect(got).toBe('c')
-    } finally { a.destroy() }
-    const b = mnt(SvListBox, { options: OPTS, value: ['a'], multiple: true, onChange: (v: any) => (got = v) })
-    try {
-      b.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[1]!.click(); flushSync()
-      expect(got).toEqual(['a', 'b'])
-    } finally { b.destroy() }
-  })
-  it('posts its value(s) via hidden inputs when `name` is set (multi -> repeated name)', () => {
-    const m = mnt(SvListBox, { options: OPTS, value: ['a', 'c'], multiple: true, name: 'tags' })
-    try {
-      const hidden = Array.from(m.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="tags"]'))
-      expect(hidden.map((h) => h.value)).toEqual(['a', 'c'])
-    } finally { m.destroy() }
-    const s = mnt(SvListBox, { options: OPTS, value: 'b', name: 'choice' })
-    try {
-      const hidden = Array.from(s.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="choice"]'))
-      expect(hidden.map((h) => h.value)).toEqual(['b'])
-    } finally { s.destroy() }
-  })
-})
-describe('SvDropDownList', () => {
-  it('opens a portalled listbox and picks a value', () => {
-    let got: any
-    const { target, destroy } = mnt(SvDropDownList, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
-    try {
-      target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
-      const panel = document.querySelector('.sv-ddl__panel')!
-      expect(panel).not.toBeNull()
-      panel.querySelectorAll<HTMLElement>('.sv-ddl__opt')[1]!.click(); flushSync()
-      expect(got).toBe('b')
-      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', () => {
-  it('filters as you type and picks a match', () => {
-    let got: any
-    const { target, destroy } = mnt(SvComboBox, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
-    try {
-      const input = target.querySelector<HTMLInputElement>('.sv-combo__input')!
-      input.dispatchEvent(new FocusEvent('focus')); flushSync()
-      input.value = 'ban'
-      input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
-      const opts = document.querySelectorAll<HTMLElement>('.sv-ddl__opt')
-      expect(opts.length).toBe(1)
-      opts[0]!.click(); flushSync()
-      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', () => {
-  it('adds on Enter and removes on Backspace', () => {
-    let tags: string[] = ['x']
-    const { target, destroy } = mnt(SvTagsInput, { value: tags, onChange: (t: string[]) => (tags = t) })
-    try {
-      const input = target.querySelector<HTMLInputElement>('.sv-tags__input')!
-      input.value = 'new'
-      // Svelte bind:value needs an input event before the keydown reads draft.
-      input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
-      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); flushSync()
-      expect(tags).toEqual(['x', 'new'])
-    } finally { destroy() }
-  })
-})
-describe('SvCountryInput', () => {
-  it('searches and selects a country code', () => {
-    let got: any
-    const { target, destroy } = mnt(SvCountryInput, { value: null, onChange: (v: any) => (got = v) })
-    try {
-      target.querySelector<HTMLButtonElement>('.sv-country')!.click(); flushSync()
-      const search = document.querySelector<HTMLInputElement>('.sv-country__search')!
-      search.value = 'germ'
-      search.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
-      const opts = document.querySelectorAll<HTMLElement>('.sv-country__opt')
-      expect(opts.length).toBe(1)
-      opts[0]!.click(); flushSync()
-      expect(got).toBe('DE')
-    } finally { destroy() }
-  })
-})
+/** Group D (selection overlays) component tests. Panels portal to <body>. */
+import { describe, expect, it, afterEach } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvListBox from './SvListBox.svelte'
+import SvDropDownList from './SvDropDownList.svelte'
+import SvComboBox from './SvComboBox.svelte'
+import SvTagsInput from './SvTagsInput.svelte'
+import SvCountryInput from './SvCountryInput.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() } }
+}
+afterEach(() => {
+  document.querySelectorAll('.sv-ddl__panel, .sv-country__panel').forEach((n) => n.remove())
+})
+const OPTS = [
+  { value: 'a', label: 'Apple' },
+  { value: 'b', label: 'Banana' },
+  { value: 'c', label: 'Cherry' },
+]
+describe('SvListBox', () => {
+  it('single select emits scalar; multi toggles array', () => {
+    let got: any
+    const a = mnt(SvListBox, { options: OPTS, value: 'a', onChange: (v: any) => (got = v) })
+    try {
+      a.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[2]!.click(); flushSync()
+      expect(got).toBe('c')
+    } finally { a.destroy() }
+    const b = mnt(SvListBox, { options: OPTS, value: ['a'], multiple: true, onChange: (v: any) => (got = v) })
+    try {
+      b.target.querySelectorAll<HTMLElement>('.sv-listbox__opt')[1]!.click(); flushSync()
+      expect(got).toEqual(['a', 'b'])
+    } finally { b.destroy() }
+  })
+  it('posts its value(s) via hidden inputs when `name` is set (multi -> repeated name)', () => {
+    const m = mnt(SvListBox, { options: OPTS, value: ['a', 'c'], multiple: true, name: 'tags' })
+    try {
+      const hidden = Array.from(m.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="tags"]'))
+      expect(hidden.map((h) => h.value)).toEqual(['a', 'c'])
+    } finally { m.destroy() }
+    const s = mnt(SvListBox, { options: OPTS, value: 'b', name: 'choice' })
+    try {
+      const hidden = Array.from(s.target.querySelectorAll<HTMLInputElement>('input[type="hidden"][name="choice"]'))
+      expect(hidden.map((h) => h.value)).toEqual(['b'])
+    } finally { s.destroy() }
+  })
+})
+describe('SvDropDownList', () => {
+  it('opens a portalled listbox and picks a value', () => {
+    let got: any
+    const { target, destroy } = mnt(SvDropDownList, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
+    try {
+      target.querySelector<HTMLButtonElement>('.sv-ddl')!.click(); flushSync()
+      const panel = document.querySelector('.sv-ddl__panel')!
+      expect(panel).not.toBeNull()
+      panel.querySelectorAll<HTMLElement>('.sv-ddl__opt')[1]!.click(); flushSync()
+      expect(got).toBe('b')
+      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', () => {
+  it('filters as you type and picks a match', () => {
+    let got: any
+    const { target, destroy } = mnt(SvComboBox, { options: OPTS, value: null, onChange: (v: any) => (got = v) })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-combo__input')!
+      input.dispatchEvent(new FocusEvent('focus')); flushSync()
+      input.value = 'ban'
+      input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
+      const opts = document.querySelectorAll<HTMLElement>('.sv-ddl__opt')
+      expect(opts.length).toBe(1)
+      opts[0]!.click(); flushSync()
+      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', () => {
+  it('adds on Enter and removes on Backspace', () => {
+    let tags: string[] = ['x']
+    const { target, destroy } = mnt(SvTagsInput, { value: tags, onChange: (t: string[]) => (tags = t) })
+    try {
+      const input = target.querySelector<HTMLInputElement>('.sv-tags__input')!
+      input.value = 'new'
+      // Svelte bind:value needs an input event before the keydown reads draft.
+      input.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); flushSync()
+      expect(tags).toEqual(['x', 'new'])
+    } finally { destroy() }
+  })
+})
+describe('SvCountryInput', () => {
+  it('searches and selects a country code', () => {
+    let got: any
+    const { target, destroy } = mnt(SvCountryInput, { value: null, onChange: (v: any) => (got = v) })
+    try {
+      target.querySelector<HTMLButtonElement>('.sv-country')!.click(); flushSync()
+      const search = document.querySelector<HTMLInputElement>('.sv-country__search')!
+      search.value = 'germ'
+      search.dispatchEvent(new Event('input', { bubbles: true })); flushSync()
+      const opts = document.querySelectorAll<HTMLElement>('.sv-country__opt')
+      expect(opts.length).toBe(1)
+      opts[0]!.click(); flushSync()
+      expect(got).toBe('DE')
+    } finally { destroy() }
+  })
+})

package/src/ui-tier1.test.ts CHANGED Viewed

@@ -1,142 +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-field__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() }
-  })
-})
+/**
+ * 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-field__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() }
+  })
+})