@svgrid/grid 1.2.33 → 2.0.0

package/src/createDateTimePicker.svelte.ts

@@ -17,6 +17,7 @@
  */
 import { formatDate, parseDate } from './datetime/date-format'
 import { toDate, clampDate, withTime, startOfDay, type DateLike } from './datetime/date-core'
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 export type DateTimeValue = Date | string | number | null
 export type DropDownDisplayMode = 'both' | 'calendar' | 'time'
@@ -40,6 +41,17 @@ export type DateTimePickerConfig = {
   stepMinutes?: () => number
   disabled?: () => boolean
   readonly?: () => boolean
+  /** Accessible label for the open-picker toggle (localizable). */
+  toggleLabel?: () => string | undefined
+  /** Accessible label for the clear button (localizable). */
+  clearLabel?: () => string | undefined
+  // Editor contract (ARIA + validation) - folded into inputProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
+  ariaLabel?: () => string | undefined
 }
 
 const defaultLocale = () => (typeof navigator !== 'undefined' ? navigator.language : 'en-US')
@@ -164,9 +176,18 @@ export function createDateTimePicker(config: DateTimePickerConfig) {
      *  alongside `bind:value={dtp.text}`. */
     inputProps() {
       return {
+        id: config.id?.(),
         type: 'text' as const,
         disabled: isDisabled(),
         readonly: isReadonly(),
+        ...editorAria({
+          id: config.id?.(),
+          invalid: config.invalid?.(),
+          required: config.required?.(),
+          error: config.error?.(),
+          hint: config.hint?.(),
+          ariaLabel: config.ariaLabel?.(),
+        } satisfies EditorAriaState),
         onblur: commitFromText,
         onkeydown: onInputKeydown,
       }
@@ -175,7 +196,7 @@ export function createDateTimePicker(config: DateTimePickerConfig) {
     toggleProps() {
       return {
         type: 'button' as const,
-        'aria-label': 'Open picker',
+        'aria-label': config.toggleLabel?.() ?? 'Open picker',
         'aria-haspopup': 'dialog' as const,
         'aria-expanded': open,
         disabled: !isInteractive,
@@ -187,7 +208,7 @@ export function createDateTimePicker(config: DateTimePickerConfig) {
     clearProps() {
       return {
         type: 'button' as const,
-        'aria-label': 'Clear',
+        'aria-label': config.clearLabel?.() ?? 'Clear',
         onclick: () => commit(null),
       }
     },

package/src/createDropdownList.svelte.ts

@@ -19,7 +19,8 @@
  * {/if}
  * ```
  */
-import type { ListOption } from './list-option'
+import { createTypeaheadBuffer, isTypeaheadKey, nextTypeaheadIndex, type ListOption } from './list-option'
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 export type DropdownValue = string | number | null
 
@@ -32,12 +33,27 @@ export type DropdownListConfig = {
   ariaLabel?: () => string | undefined
   /** DOM focus hook provided by the renderer; the core never touches the DOM. */
   focusTrigger?: () => void
+  // Editor contract (ARIA + validation) - folded into triggerProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
 }
 
 export function createDropdownList(config: DropdownListConfig) {
   const opts = () => config.options()
   const disabled = () => config.disabled?.() ?? false
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   let open = $state(false)
   let active = $state(-1)
 
@@ -61,8 +77,20 @@ export function createDropdownList(config: DropdownListConfig) {
     const pos = enabledIdx.indexOf(active)
     active = enabledIdx[(pos + d + enabledIdx.length) % enabledIdx.length] ?? active
   }
+  // Type-ahead: typing a label prefix jumps the active option (and selects it
+  // when the list is closed, matching a native <select>).
+  const typeahead = createTypeaheadBuffer()
+  function onTypeahead(char: string) {
+    const buffer = typeahead.push(char.toLowerCase())
+    const from = active >= 0 ? active : opts().findIndex((o) => o.value === config.value())
+    const next = nextTypeaheadIndex(opts(), buffer, from)
+    if (next < 0) return
+    active = next
+    if (!open) config.onChange?.(opts()[next]!.value)
+  }
   function onKeydown(e: KeyboardEvent) {
     if (disabled()) return
+    if (isTypeaheadKey(e)) { onTypeahead(e.key); return }
     if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); openPanel(); return }
     if (!open) return
     if (e.key === 'ArrowDown') { e.preventDefault(); move(1) }
@@ -93,10 +121,11 @@ export function createDropdownList(config: DropdownListConfig) {
     onKeydown,
     /** Spread onto the trigger <button>. */
     triggerProps: () => ({
+      id: config.id?.(),
       type: 'button' as const,
       'aria-haspopup': 'listbox' as const,
       'aria-expanded': open,
-      'aria-label': config.ariaLabel?.(),
+      ...editorAria(ariaState()),
       disabled: disabled(),
       onclick: toggle,
       onkeydown: onKeydown,

package/src/createFileUpload.svelte.ts

@@ -0,0 +1,144 @@
+/**
+ * createFileUpload - the HEADLESS core behind <SvFileUpload>: a drag-and-drop
+ * file field with accept / size / count validation, exposed as **prop-getters**
+ * you spread onto YOUR OWN markup. The DataTransfer / File reading is a DOM
+ * concern that stays in the renderer; the core owns the list, validation, drag
+ * state and ARIA. Parity: Smart `smart-file-upload`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createFileUpload } from '@svgrid/grid'
+ *   let files = $state<File[]>([])
+ *   const fu = createFileUpload({ files: () => files, onChange: (f) => (files = f) })
+ * </script>
+ * <div {...fu.dropzoneProps()} ondrop={(e) => fu.addFiles([...e.dataTransfer.files])}>...</div>
+ * <input {...fu.inputProps()} />
+ * ```
+ */
+import { editorAria, type EditorAriaState } from './editor-contract'
+
+export type FileRejectReason = 'type' | 'size' | 'count'
+export type FileRejection = { file: File; reason: FileRejectReason }
+
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type FileUploadConfig = {
+  files: () => File[]
+  onChange?: (files: File[]) => void
+  /** Rejected files (wrong type / too big / over the count cap). */
+  onReject?: (rejections: FileRejection[]) => void
+  /** Comma list like "image/*,.pdf" (matches MIME or extension). */
+  accept?: () => string | undefined
+  multiple?: () => boolean
+  /** Max size per file in bytes. */
+  maxSize?: () => number | undefined
+  /** Max number of files (multiple mode). */
+  maxFiles?: () => number | undefined
+  disabled?: () => boolean
+  readonly?: () => boolean
+  // Editor contract (ARIA + validation) - folded into dropzoneProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
+  ariaLabel?: () => string | undefined
+}
+
+/** Whether `file` satisfies an `accept` list (MIME globs or extensions). Pure. */
+export function fileMatchesAccept(file: File, accept?: string): boolean {
+  if (!accept || !accept.trim()) return true
+  const name = file.name.toLowerCase()
+  const type = file.type.toLowerCase()
+  return accept.split(',').map((s) => s.trim().toLowerCase()).filter(Boolean).some((tok) => {
+    if (tok.startsWith('.')) return name.endsWith(tok)
+    if (tok.endsWith('/*')) return type.startsWith(tok.slice(0, -1))
+    return type === tok
+  })
+}
+
+export function createFileUpload(config: FileUploadConfig) {
+  const accept = () => config.accept?.()
+  const multiple = () => config.multiple?.() ?? false
+  const maxSize = () => config.maxSize?.()
+  const maxFiles = () => config.maxFiles?.()
+  const disabled = () => config.disabled?.() ?? false
+  const readonly = () => config.readonly?.() ?? false
+  const isInteractive = $derived(!disabled() && !readonly())
+
+  let dragging = $state(false)
+
+  function addFiles(incoming: File[]) {
+    if (!isInteractive || !incoming.length) return
+    const accepted: File[] = []
+    const rejected: FileRejection[] = []
+    for (const f of incoming) {
+      if (!fileMatchesAccept(f, accept())) { rejected.push({ file: f, reason: 'type' }); continue }
+      const cap = maxSize()
+      if (cap != null && f.size > cap) { rejected.push({ file: f, reason: 'size' }); continue }
+      accepted.push(f)
+    }
+    let next = multiple() ? [...config.files(), ...accepted] : accepted.slice(-1)
+    const limit = maxFiles()
+    if (multiple() && limit != null && next.length > limit) {
+      for (const f of next.slice(limit)) rejected.push({ file: f, reason: 'count' })
+      next = next.slice(0, limit)
+    }
+    if (rejected.length) config.onReject?.(rejected)
+    config.onChange?.(next)
+  }
+
+  function removeAt(index: number) {
+    if (!isInteractive) return
+    config.onChange?.(config.files().filter((_, i) => i !== index))
+  }
+  function clear() { if (isInteractive) config.onChange?.([]) }
+
+  const setDragging = (v: boolean) => { if (isInteractive) dragging = v }
+
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
+  return {
+    /** Whether files are being dragged over the dropzone. */
+    get dragging() { return dragging },
+    /** Whether interaction is allowed. */
+    get isInteractive() { return isInteractive },
+    /** Selected files (controlled value). */
+    get files() { return config.files() },
+    addFiles,
+    removeAt,
+    clear,
+    setDragging,
+    /** Spread onto the dropzone element (click opens the picker; Enter/Space too).
+     *  Wire drag events yourself (they carry a DataTransfer): call
+     *  `setDragging(true/false)` and `addFiles([...e.dataTransfer.files])`. */
+    dropzoneProps: () => ({
+      role: 'button' as const,
+      tabindex: isInteractive ? 0 : -1,
+      'data-dragging': dragging ? '' : undefined,
+      'aria-disabled': !isInteractive || undefined,
+      ...editorAria(ariaState()),
+    }),
+    /** Spread onto the visually-hidden <input type="file">. */
+    inputProps: () => ({
+      type: 'file' as const,
+      accept: accept(),
+      multiple: multiple(),
+      disabled: !isInteractive,
+      tabindex: -1,
+    }),
+    /** Spread onto a selected file's remove <button> at `index`. */
+    removeProps: (index: number) => ({
+      type: 'button' as const,
+      onclick: () => removeAt(index),
+    }),
+  }
+}
+
+export type FileUpload = ReturnType<typeof createFileUpload>

package/src/createGrid.svelte.ts

@@ -1,42 +1,42 @@
-import { createSvGridCore } from './core'
-import type {
-  RowData,
-  SvGrid,
-  SvGridOptions,
-  TableFeatures,
-} from './core'
-
-export type SvelteGrid<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSelected = {},
-> = SvGrid<TData> & {
-  readonly state: Readonly<TSelected>
-}
-
-export function createSvGrid<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSelected = {},
->(
-  gridOptions: SvGridOptions<TFeatures, TData>,
-  selector: (state: Record<string, any>) => TSelected = () => ({}) as TSelected,
-): SvelteGrid<TFeatures, TData, TSelected> {
-  const grid = createSvGridCore(gridOptions) as SvelteGrid<TFeatures, TData, TSelected>
-  let selected = $state(selector(grid.store.state))
-  grid.store.subscribe(() => {
-    selected = selector(grid.store.state)
-  })
-
-  Object.defineProperty(grid, 'state', {
-    get() {
-      return selected
-    },
-    configurable: true,
-    enumerable: true,
-  })
-
-  return grid
-}
-
-export const createGrid = createSvGrid
+import { createSvGridCore } from './core'
+import type {
+  RowData,
+  SvGrid,
+  SvGridOptions,
+  TableFeatures,
+} from './core'
+
+export type SvelteGrid<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = {},
+> = SvGrid<TData> & {
+  readonly state: Readonly<TSelected>
+}
+
+export function createSvGrid<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = {},
+>(
+  gridOptions: SvGridOptions<TFeatures, TData>,
+  selector: (state: Record<string, any>) => TSelected = () => ({}) as TSelected,
+): SvelteGrid<TFeatures, TData, TSelected> {
+  const grid = createSvGridCore(gridOptions) as SvelteGrid<TFeatures, TData, TSelected>
+  let selected = $state(selector(grid.store.state))
+  grid.store.subscribe(() => {
+    selected = selector(grid.store.state)
+  })
+
+  Object.defineProperty(grid, 'state', {
+    get() {
+      return selected
+    },
+    configurable: true,
+    enumerable: true,
+  })
+
+  return grid
+}
+
+export const createGrid = createSvGrid

package/src/createGrid.test.ts

@@ -1,10 +1,10 @@
-import { describe, expect, it } from 'vitest'
-import { createGridState } from './index'
-
-describe('createGrid', () => {
-  it('createGridState updates controlled values', () => {
-    const [sorting, setSorting] = createGridState([{ id: 'age', desc: false }])
-    setSorting((prev) => prev.map((entry) => ({ ...entry, desc: true })))
-    expect(sorting()[0]?.desc).toBe(true)
-  })
-})
+import { describe, expect, it } from 'vitest'
+import { createGridState } from './index'
+
+describe('createGrid', () => {
+  it('createGridState updates controlled values', () => {
+    const [sorting, setSorting] = createGridState([{ id: 'age', desc: false }])
+    setSorting((prev) => prev.map((entry) => ({ ...entry, desc: true })))
+    expect(sorting()[0]?.desc).toBe(true)
+  })
+})

package/src/createGridState.svelte.ts

@@ -1,17 +1,17 @@
-import type { Updater } from './core'
-
-export function createGridState<TState>(
-  initialValue: TState,
-): [() => TState, (updater: Updater<TState>) => void] {
-  let value = $state(initialValue)
-
-  return [
-    () => value,
-    (updater: Updater<TState>) => {
-      if (updater instanceof Function) value = updater(value)
-      else value = updater
-    },
-  ]
-}
-
-export const createSvGridState = createGridState
+import type { Updater } from './core'
+
+export function createGridState<TState>(
+  initialValue: TState,
+): [() => TState, (updater: Updater<TState>) => void] {
+  let value = $state(initialValue)
+
+  return [
+    () => value,
+    (updater: Updater<TState>) => {
+      if (updater instanceof Function) value = updater(value)
+      else value = updater
+    },
+  ]
+}
+
+export const createSvGridState = createGridState

package/src/createListbox.svelte.ts

@@ -22,7 +22,8 @@
  *
  * The styled <SvListBox> is just one renderer over this core.
  */
-import type { ListOption } from './list-option'
+import { createTypeaheadBuffer, isTypeaheadKey, nextTypeaheadIndex, type ListOption } from './list-option'
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 export type ListboxValue = string | number | Array<string | number> | null
 
@@ -35,6 +36,12 @@ export type ListboxConfig = {
   multiple?: () => boolean
   disabled?: () => boolean
   ariaLabel?: () => string | undefined
+  // Editor contract (ARIA + validation) - folded into rootProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
 }
 
 export type OptionProps = {
@@ -51,10 +58,14 @@ export type OptionProps = {
 
 export type ListboxRootProps = {
   role: 'listbox'
+  id: string | undefined
   'aria-multiselectable': boolean
   'aria-label': string | undefined
   'aria-disabled': boolean
   'aria-activedescendant': string | undefined
+  'aria-invalid': 'true' | undefined
+  'aria-required': 'true' | undefined
+  'aria-describedby': string | undefined
   tabindex: number
   onkeydown: (e: KeyboardEvent) => void
 }
@@ -136,6 +147,14 @@ export function createListbox(config: ListboxConfig): Listbox {
   const first = () => { active = enabledIdx[0] ?? 0 }
   const last = () => { active = enabledIdx.at(-1) ?? 0 }
 
+  // Type-ahead: typing a label prefix jumps the active highlight to it.
+  const typeahead = createTypeaheadBuffer()
+  function onTypeahead(char: string) {
+    const buffer = typeahead.push(char.toLowerCase())
+    const next = nextTypeaheadIndex(opts(), buffer, active)
+    if (next >= 0) active = next
+  }
+
   function onKeydown(e: KeyboardEvent) {
     if (disabled()) return
     switch (e.key) {
@@ -145,9 +164,20 @@ export function createListbox(config: ListboxConfig): Listbox {
       case 'End': e.preventDefault(); last(); break
       case ' ':
       case 'Enter': e.preventDefault(); pick(active); break
+      default: if (isTypeaheadKey(e)) onTypeahead(e.key)
     }
   }
 
+  // Editor-contract ARIA state, folded onto the focusable listbox root.
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   return {
     get activeIndex() { return active },
     get selectedValues() { return selected },
@@ -160,11 +190,13 @@ export function createListbox(config: ListboxConfig): Listbox {
     last,
     onKeydown,
     rootProps: () => ({
-      role: 'listbox',
+      role: 'listbox' as const,
+      id: config.id?.(),
       'aria-multiselectable': multiple(),
-      'aria-label': config.ariaLabel?.(),
       'aria-disabled': disabled(),
       'aria-activedescendant': opts()[active] ? optionId(active) : undefined,
+      // aria-label + aria-invalid/required/describedby from the editor contract.
+      ...editorAria(ariaState()),
       tabindex: disabled() ? -1 : 0,
       onkeydown: onKeydown,
     }),

package/src/createMaskedInput.svelte.ts

@@ -16,6 +16,7 @@
  * The styled <SvMaskedInput> is just one renderer over this core.
  */
 import { applyMask, unmask, isMaskComplete } from './datetime/mask'
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 /** Reactive inputs are passed as getters so the core tracks live prop changes. */
 export type MaskedInputConfig = {
@@ -26,6 +27,12 @@ export type MaskedInputConfig = {
   placeholder?: () => string | undefined
   disabled?: () => boolean
   readonly?: () => boolean
+  // Editor contract (ARIA + validation) - folded into inputProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
   ariaLabel?: () => string | undefined
 }
 
@@ -58,6 +65,15 @@ export function createMaskedInput(config: MaskedInputConfig) {
     config.onChange?.(masked, raw, m ? isMaskComplete(masked, m) : true)
   }
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   return {
     /** The current masked display text. */
     get masked() { return text },
@@ -67,12 +83,13 @@ export function createMaskedInput(config: MaskedInputConfig) {
     get complete() { return mask() ? isMaskComplete(text, mask()) : true },
     /** Spread onto the text input element. */
     inputProps: () => ({
+      id: config.id?.(),
       value: text,
       type: 'text' as const,
       placeholder: config.placeholder?.() ?? mask(),
       disabled: disabled(),
       readonly: readonly(),
-      'aria-label': config.ariaLabel?.(),
+      ...editorAria(ariaState()),
       oninput: onInput,
     }),
   }

package/src/createNumberInput.svelte.ts

@@ -39,6 +39,7 @@ export type NumberInputConfig = {
   invalid?: () => boolean
   required?: () => boolean
   error?: () => string | undefined
+  hint?: () => string | undefined
   ariaLabel?: () => string | undefined
 }
 
@@ -138,6 +139,7 @@ export function createNumberInput(config: NumberInputConfig) {
     invalid: config.invalid?.(),
     required: config.required?.(),
     error: config.error?.(),
+    hint: config.hint?.(),
     ariaLabel: config.ariaLabel?.(),
   })
 

package/src/createPasswordInput.svelte.ts

@@ -15,6 +15,7 @@
  *
  * The styled <SvPasswordInput> is just one renderer over this core.
  */
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 export const STRENGTH_LABELS = ['', 'Weak', 'Fair', 'Good', 'Strong']
 
@@ -36,8 +37,21 @@ export type PasswordInputConfig = {
   placeholder?: () => string | undefined
   disabled?: () => boolean
   readonly?: () => boolean
-  ariaLabel?: () => string | undefined
   autocomplete?: () => string | undefined
+  // Localizable strings (fall back to the built-in English defaults).
+  /** Accessible label for the reveal toggle when the value is hidden. */
+  showLabel?: () => string | undefined
+  /** Accessible label for the reveal toggle when the value is shown. */
+  hideLabel?: () => string | undefined
+  /** Strength labels indexed 0-4 (index 0 unused; 1..4 = weak..strong). */
+  strengthLabels?: () => readonly string[]
+  // Editor contract (ARIA + validation) - folded into inputProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
+  ariaLabel?: () => string | undefined
 }
 
 export function createPasswordInput(config: PasswordInputConfig) {
@@ -53,29 +67,41 @@ export function createPasswordInput(config: PasswordInputConfig) {
   }
   const toggle = () => (revealed = !revealed)
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   return {
     /** Whether the value is currently shown as plain text. */
     get revealed() { return revealed },
     /** Strength score, 0-4. */
     get strength() { return strength },
-    /** Human label for the strength score. */
-    get strengthLabel() { return STRENGTH_LABELS[strength] },
+    /** Human label for the strength score (localizable via `strengthLabels`). */
+    get strengthLabel() { return (config.strengthLabels?.() ?? STRENGTH_LABELS)[strength] },
     toggle,
     /** Spread onto the text/password input element. */
     inputProps: () => ({
+      id: config.id?.(),
       value: config.value(),
       type: (revealed ? 'text' : 'password') as 'text' | 'password',
       placeholder: config.placeholder?.(),
       disabled: disabled(),
       readonly: readonly(),
       autocomplete: (config.autocomplete?.() ?? 'current-password') as AutoFill,
-      'aria-label': config.ariaLabel?.(),
+      ...editorAria(ariaState()),
       oninput: onInput,
     }),
     /** Spread onto the reveal (show/hide) toggle button. */
     toggleProps: () => ({
       type: 'button' as const,
-      'aria-label': revealed ? 'Hide password' : 'Show password',
+      'aria-label': revealed
+        ? (config.hideLabel?.() ?? 'Hide password')
+        : (config.showLabel?.() ?? 'Show password'),
       'aria-pressed': revealed,
       disabled: disabled(),
       tabindex: -1,