@svgrid/grid 1.2.34 → 2.0.1

package/src/createCheckbox.svelte.ts

@@ -15,18 +15,30 @@
  *
  * The styled <SvCheckBox> is just one renderer over this core.
  */
+import { editorAria, type EditorAriaState } from './editor-contract'
+
 export type CheckboxConfig = {
   checked: () => boolean
   indeterminate?: () => boolean
   onChange?: (checked: boolean) => void
   disabled?: () => boolean
+  // Editor contract (ARIA + validation) - folded into boxProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
   ariaLabel?: () => string | undefined
 }
 
 export type CheckboxBoxProps = {
   type: 'button'
   role: 'checkbox'
+  id: string | undefined
   'aria-checked': boolean | 'mixed'
+  'aria-invalid': 'true' | undefined
+  'aria-required': 'true' | undefined
+  'aria-describedby': string | undefined
   'aria-label': string | undefined
   disabled: boolean
   'data-checked': '' | undefined
@@ -55,6 +67,15 @@ export function createCheckbox(config: CheckboxConfig): Checkbox {
     config.onChange?.(indeterminate() ? true : !checked())
   }
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   return {
     get checked() { return checked() },
     get indeterminate() { return indeterminate() },
@@ -63,11 +84,12 @@ export function createCheckbox(config: CheckboxConfig): Checkbox {
     boxProps: () => ({
       type: 'button',
       role: 'checkbox',
+      id: config.id?.(),
       'aria-checked': indeterminate() ? 'mixed' : checked(),
-      'aria-label': config.ariaLabel?.(),
       disabled: disabled(),
       'data-checked': checked() && !indeterminate() ? '' : undefined,
       'data-indeterminate': indeterminate() ? '' : undefined,
+      ...editorAria(ariaState()),
       onclick: toggle,
     }),
   }

package/src/createColorInput.svelte.ts

@@ -17,6 +17,7 @@
  * The styled <SvColorInput> is just one renderer over this core (it adds the
  * portal + anchored positioning).
  */
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 export const DEFAULT_PALETTE = [
   '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981', '#14b8a6',
@@ -39,6 +40,12 @@ export type ColorInputConfig = {
   disabled?: () => boolean
   readonly?: () => boolean
   palette?: () => string[]
+  // Editor contract (ARIA + validation) - folded into swatchProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
   ariaLabel?: () => string | undefined
 }
 
@@ -71,6 +78,15 @@ export function createColorInput(config: ColorInputConfig) {
   }
   const isActive = (c: string) => normalizeHex(c) === normalized
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   // Popover control surface (open state + show/close/toggle), no DOM measurement.
   const popover = {
     get open() { return open },
@@ -96,9 +112,13 @@ export function createColorInput(config: ColorInputConfig) {
     isActive,
     /** Spread onto the swatch trigger button. */
     swatchProps: () => ({
+      id: config.id?.(),
       type: 'button' as const,
       'aria-haspopup': 'dialog' as const,
       'aria-expanded': open,
+      // aria-invalid/required/describedby come from the editor contract; the
+      // aria-label default names the swatch by its current color when unset.
+      ...editorAria(ariaState()),
       'aria-label': config.ariaLabel?.() ?? `Color ${normalized}`,
       disabled: !isInteractive,
       onclick: toggle,

package/src/createCombobox.svelte.ts

@@ -20,6 +20,7 @@
  * ```
  */
 import { filterOptions, type ListOption } from './list-option'
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 export type ComboboxValue = string | number | null
 
@@ -30,9 +31,17 @@ export type ComboboxConfig = {
   onChange?: (value: ComboboxValue) => void
   disabled?: () => boolean
   ariaLabel?: () => string | undefined
+  /** Filter the options locally by the query. Set false for server-side search. */
+  localFilter?: () => boolean
   /** DOM focus hooks provided by the renderer; the core itself never touches the DOM. */
   focusInput?: () => void
   blurInput?: () => void
+  // Editor contract (ARIA + validation) - folded into inputProps().
+  id?: () => string | undefined
+  invalid?: () => boolean
+  required?: () => boolean
+  error?: () => string | undefined
+  hint?: () => string | undefined
 }
 
 let uid = 0
@@ -48,8 +57,9 @@ export function createCombobox(config: ComboboxConfig) {
   let active = $state(0)
   let editing = $state(false)
 
+  const localFilter = () => config.localFilter?.() ?? true
   const selected = $derived(opts().find((o) => o.value === config.value()) ?? null)
-  const filtered = $derived(editing ? filterOptions(opts(), query) : [...opts()])
+  const filtered = $derived(editing && localFilter() ? filterOptions(opts(), query) : [...opts()])
   const shownText = $derived(editing ? query : selected?.label ?? '')
 
   // While not actively editing, keep the shown text in sync with the selection.
@@ -57,6 +67,15 @@ export function createCombobox(config: ComboboxConfig) {
 
   const optionId = (i: number) => `${listId}-opt-${i}`
 
+  const ariaState = (): EditorAriaState => ({
+    id: config.id?.(),
+    invalid: config.invalid?.(),
+    required: config.required?.(),
+    error: config.error?.(),
+    hint: config.hint?.(),
+    ariaLabel: config.ariaLabel?.(),
+  })
+
   function openPanel() { if (disabled() || open) return; open = true; active = 0 }
   function close(revert = true) {
     open = false; editing = false
@@ -114,11 +133,12 @@ export function createCombobox(config: ComboboxConfig) {
     onKeydown,
     /** Spread onto the editable <input>. */
     inputProps: () => ({
+      id: config.id?.(),
       role: 'combobox' as const,
       'aria-expanded': open,
       'aria-controls': listId,
       'aria-autocomplete': 'list' as const,
-      'aria-label': config.ariaLabel?.(),
+      ...editorAria(ariaState()),
       value: shownText,
       disabled: disabled(),
       oninput: onInput,

package/src/createCountryInput.svelte.ts

@@ -21,6 +21,7 @@
  * ```
  */
 import { COUNTRIES, COUNTRY_BY_CODE, type Country } from './countries'
+import { editorAria, type EditorAriaState } from './editor-contract'
 
 /** Reactive inputs are passed as getters so the core tracks live prop changes. */
 export type CountryInputConfig = {
@@ -28,13 +29,30 @@ export type CountryInputConfig = {
   onChange?: (code: string) => void
   disabled?: () => boolean
   ariaLabel?: () => string | undefined
+  /** Accessible label for the in-panel search field (localizable). */
+  searchLabel?: () => 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 createCountryInput(config: CountryInputConfig) {
   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 query = $state('')
   let active = $state(0)
@@ -89,10 +107,11 @@ export function createCountryInput(config: CountryInputConfig) {
     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,
     }),
@@ -100,7 +119,7 @@ export function createCountryInput(config: CountryInputConfig) {
     searchProps: () => ({
       type: 'text' as const,
       value: query,
-      'aria-label': 'Search countries',
+      'aria-label': config.searchLabel?.() ?? 'Search countries',
       oninput: onSearchInput,
       onkeydown: onKeydown,
     }),

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/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?.(),
   })