@svgrid/grid 1.2.34 → 2.0.0

package/dist/createColorInput.svelte.d.ts

@@ -1,22 +1,3 @@
-/**
- * createColorInput - the HEADLESS core behind <SvColorInput>: a runes-based
- * state machine that owns hex normalization, the palette, the draft hex field
- * and the open/close popover state, exposed as **prop-getters** you spread onto
- * YOUR OWN markup. DOM measurement / portalling stays in the renderer, NOT here.
- *
- * ```svelte
- * <script lang="ts">
- *   import { createColorInput } from '@svgrid/grid'
- *   let value = $state('#3b82f6')
- *   const col = createColorInput({ value: () => value, onChange: (v) => (value = v) })
- * </script>
- * <button {...col.swatchProps()}>{col.normalized}</button>
- * {#if col.popover.open}<div>...palette...</div>{/if}
- * ```
- *
- * The styled <SvColorInput> is just one renderer over this core (it adds the
- * portal + anchored positioning).
- */
 export declare const DEFAULT_PALETTE: string[];
 /** Normalize a hex string (#abc / #aabbcc / abc) to lower-case #aabbcc (pure). */
 export declare function normalizeHex(h: string): string | null;
@@ -27,6 +8,11 @@ export type ColorInputConfig = {
     disabled?: () => boolean;
     readonly?: () => boolean;
     palette?: () => string[];
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
     ariaLabel?: () => string | undefined;
 };
 export declare function createColorInput(config: ColorInputConfig): {
@@ -50,12 +36,16 @@ export declare function createColorInput(config: ColorInputConfig): {
     isActive: (c: string) => boolean;
     /** Spread onto the swatch trigger button. */
     swatchProps: () => {
-        type: "button";
-        'aria-haspopup': "dialog";
-        'aria-expanded': boolean;
         'aria-label': string;
         disabled: boolean;
         onclick: () => void;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        id: string | undefined;
+        type: "button";
+        'aria-haspopup': "dialog";
+        'aria-expanded': boolean;
     };
     /** Spread onto a palette chip button for color `c`. */
     chipProps: (c: string) => {

package/dist/createColorInput.svelte.js

@@ -17,6 +17,7 @@
  * The styled <SvColorInput> is just one renderer over this core (it adds the
  * portal + anchored positioning).
  */
+import { editorAria } from './editor-contract';
 export const DEFAULT_PALETTE = [
     '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981', '#14b8a6',
     '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899',
@@ -59,6 +60,14 @@ export function createColorInput(config) {
             hexDraft = normalized;
     }
     const isActive = (c) => normalizeHex(c) === normalized;
+    const ariaState = () => ({
+        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; },
@@ -83,9 +92,13 @@ export function createColorInput(config) {
         isActive,
         /** Spread onto the swatch trigger button. */
         swatchProps: () => ({
+            id: config.id?.(),
             type: 'button',
             'aria-haspopup': 'dialog',
             '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/dist/createCombobox.svelte.d.ts

@@ -28,9 +28,16 @@ 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;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
 };
 export declare function createCombobox(config: ComboboxConfig): {
     /** Panel open state. */
@@ -63,16 +70,20 @@ export declare function createCombobox(config: ComboboxConfig): {
     onKeydown: (e: KeyboardEvent) => void;
     /** Spread onto the editable <input>. */
     inputProps: () => {
-        role: "combobox";
-        'aria-expanded': boolean;
-        'aria-controls': string;
-        'aria-autocomplete': "list";
-        'aria-label': string | undefined;
         value: string;
         disabled: boolean;
         oninput: (e: Event) => void;
         onfocus: () => void;
         onkeydown: (e: KeyboardEvent) => void;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        id: string | undefined;
+        role: "combobox";
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-autocomplete': "list";
     };
     /** Spread onto the chevron/toggle <button>. */
     triggerProps: () => {

package/dist/createCombobox.svelte.js

@@ -20,6 +20,7 @@
  * ```
  */
 import { filterOptions } from './list-option';
+import { editorAria } from './editor-contract';
 let uid = 0;
 export function createCombobox(config) {
     const id = `sv-combo-${uid++}`;
@@ -30,13 +31,22 @@ export function createCombobox(config) {
     let query = $state('');
     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.
     $effect(() => { if (!editing)
         query = selected?.label ?? ''; });
     const optionId = (i) => `${listId}-opt-${i}`;
+    const ariaState = () => ({
+        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) {
@@ -128,11 +138,12 @@ export function createCombobox(config) {
         onKeydown,
         /** Spread onto the editable <input>. */
         inputProps: () => ({
+            id: config.id?.(),
             role: 'combobox',
             'aria-expanded': open,
             'aria-controls': listId,
             'aria-autocomplete': 'list',
-            'aria-label': config.ariaLabel?.(),
+            ...editorAria(ariaState()),
             value: shownText,
             disabled: disabled(),
             oninput: onInput,

package/dist/createCountryInput.svelte.d.ts

@@ -27,8 +27,15 @@ 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;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
 };
 export declare function createCountryInput(config: CountryInputConfig): {
     /** Panel open state. */
@@ -54,12 +61,16 @@ export declare function createCountryInput(config: CountryInputConfig): {
     onKeydown: (e: KeyboardEvent) => void;
     /** Spread onto the trigger <button>. */
     triggerProps: () => {
+        disabled: boolean;
+        onclick: () => void;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        id: string | undefined;
         type: "button";
         'aria-haspopup': "listbox";
         'aria-expanded': boolean;
-        'aria-label': string | undefined;
-        disabled: boolean;
-        onclick: () => void;
     };
     /** Spread onto the search <input> inside the panel. */
     searchProps: () => {

package/dist/createCountryInput.svelte.js

@@ -21,8 +21,17 @@
  * ```
  */
 import { COUNTRIES, COUNTRY_BY_CODE } from './countries';
+import { editorAria } from './editor-contract';
 export function createCountryInput(config) {
     const disabled = () => config.disabled?.() ?? false;
+    const ariaState = () => ({
+        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);
@@ -90,10 +99,11 @@ export function createCountryInput(config) {
         onKeydown,
         /** Spread onto the trigger <button>. */
         triggerProps: () => ({
+            id: config.id?.(),
             type: 'button',
             'aria-haspopup': 'listbox',
             'aria-expanded': open,
-            'aria-label': config.ariaLabel?.(),
+            ...editorAria(ariaState()),
             disabled: disabled(),
             onclick: toggle,
         }),
@@ -101,7 +111,7 @@ export function createCountryInput(config) {
         searchProps: () => ({
             type: 'text',
             value: query,
-            'aria-label': 'Search countries',
+            'aria-label': config.searchLabel?.() ?? 'Search countries',
             oninput: onSearchInput,
             onkeydown: onKeydown,
         }),

package/dist/createDateTimePicker.svelte.d.ts

@@ -20,6 +20,16 @@ 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;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
+    ariaLabel?: () => string | undefined;
 };
 export declare function createDateTimePicker(config: DateTimePickerConfig): {
     readonly current: Date | null;
@@ -42,11 +52,16 @@ export declare function createDateTimePicker(config: DateTimePickerConfig): {
     /** The text field: masked value round-trips through the token engine. Spread
      *  alongside `bind:value={dtp.text}`. */
     inputProps(): {
+        onblur: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        id: string | undefined;
         type: "text";
         disabled: boolean;
         readonly: boolean;
-        onblur: () => void;
-        onkeydown: (e: KeyboardEvent) => void;
     };
     /** The calendar-toggle button. */
     toggleProps(): {

package/dist/createDateTimePicker.svelte.js

@@ -17,6 +17,7 @@
  */
 import { formatDate, parseDate } from './datetime/date-format';
 import { toDate, clampDate, withTime, startOfDay } from './datetime/date-core';
+import { editorAria } from './editor-contract';
 const defaultLocale = () => (typeof navigator !== 'undefined' ? navigator.language : 'en-US');
 export function createDateTimePicker(config) {
     const formatString = () => config.formatString?.() ?? 'yyyy-MM-dd HH:mm';
@@ -152,9 +153,18 @@ export function createDateTimePicker(config) {
          *  alongside `bind:value={dtp.text}`. */
         inputProps() {
             return {
+                id: config.id?.(),
                 type: 'text',
                 disabled: isDisabled(),
                 readonly: isReadonly(),
+                ...editorAria({
+                    id: config.id?.(),
+                    invalid: config.invalid?.(),
+                    required: config.required?.(),
+                    error: config.error?.(),
+                    hint: config.hint?.(),
+                    ariaLabel: config.ariaLabel?.(),
+                }),
                 onblur: commitFromText,
                 onkeydown: onInputKeydown,
             };
@@ -163,7 +173,7 @@ export function createDateTimePicker(config) {
         toggleProps() {
             return {
                 type: 'button',
-                'aria-label': 'Open picker',
+                'aria-label': config.toggleLabel?.() ?? 'Open picker',
                 'aria-haspopup': 'dialog',
                 'aria-expanded': open,
                 disabled: !isInteractive,
@@ -175,7 +185,7 @@ export function createDateTimePicker(config) {
         clearProps() {
             return {
                 type: 'button',
-                'aria-label': 'Clear',
+                'aria-label': config.clearLabel?.() ?? 'Clear',
                 onclick: () => commit(null),
             };
         },

package/dist/createDropdownList.svelte.d.ts

@@ -19,7 +19,7 @@
  * {/if}
  * ```
  */
-import type { ListOption } from './list-option';
+import { type ListOption } from './list-option';
 export type DropdownValue = string | number | null;
 /** Reactive inputs are passed as getters so the core tracks live prop changes. */
 export type DropdownListConfig = {
@@ -30,6 +30,11 @@ export type DropdownListConfig = {
     ariaLabel?: () => string | undefined;
     /** DOM focus hook provided by the renderer; the core never touches the DOM. */
     focusTrigger?: () => void;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    hint?: () => string | undefined;
 };
 export declare function createDropdownList(config: DropdownListConfig): {
     /** Panel open state. */
@@ -51,13 +56,17 @@ export declare function createDropdownList(config: DropdownListConfig): {
     onKeydown: (e: KeyboardEvent) => void;
     /** Spread onto the trigger <button>. */
     triggerProps: () => {
-        type: "button";
-        'aria-haspopup': "listbox";
-        'aria-expanded': boolean;
-        'aria-label': string | undefined;
         disabled: boolean;
         onclick: () => void;
         onkeydown: (e: KeyboardEvent) => void;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        id: string | undefined;
+        type: "button";
+        'aria-haspopup': "listbox";
+        'aria-expanded': boolean;
     };
     /** Spread onto the listbox container. */
     listboxProps: () => {

package/dist/createDropdownList.svelte.js

@@ -1,6 +1,37 @@
+/**
+ * createDropdownList - the HEADLESS core behind <SvDropDownList>: a single-select
+ * dropdown state machine (trigger open/close, roving active index over enabled
+ * options, full keyboard) exposed as **prop-getters** you spread onto YOUR OWN
+ * markup. No styles, no DOM, no portal/measurement - those stay in the styled
+ * component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createDropdownList } from '@svgrid/grid'
+ *   let value = $state<string | null>(null)
+ *   const dd = createDropdownList({ options: () => options, value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <button {...dd.triggerProps()}>{dd.selected?.label ?? 'Select'}</button>
+ * {#if dd.open}
+ *   <ul {...dd.listboxProps()}>
+ *     {#each options as opt, i (opt.value)}<li {...dd.optionProps(i)}>{opt.label}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { createTypeaheadBuffer, isTypeaheadKey, nextTypeaheadIndex } from './list-option';
+import { editorAria } from './editor-contract';
 export function createDropdownList(config) {
     const opts = () => config.options();
     const disabled = () => config.disabled?.() ?? false;
+    const ariaState = () => ({
+        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);
     const selected = $derived(opts().find((o) => o.value === config.value()) ?? null);
@@ -32,9 +63,26 @@ export function createDropdownList(config) {
         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) {
+        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) {
         if (disabled())
             return;
+        if (isTypeaheadKey(e)) {
+            onTypeahead(e.key);
+            return;
+        }
         if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) {
             e.preventDefault();
             openPanel();
@@ -86,10 +134,11 @@ export function createDropdownList(config) {
         onKeydown,
         /** Spread onto the trigger <button>. */
         triggerProps: () => ({
+            id: config.id?.(),
             type: 'button',
             'aria-haspopup': 'listbox',
             'aria-expanded': open,
-            'aria-label': config.ariaLabel?.(),
+            ...editorAria(ariaState()),
             disabled: disabled(),
             onclick: toggle,
             onkeydown: onKeydown,

package/dist/createFileUpload.svelte.d.ts

@@ -0,0 +1,68 @@
+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;
+    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 declare function fileMatchesAccept(file: File, accept?: string): boolean;
+export declare function createFileUpload(config: FileUploadConfig): {
+    /** Whether files are being dragged over the dropzone. */
+    readonly dragging: boolean;
+    /** Whether interaction is allowed. */
+    readonly isInteractive: boolean;
+    /** Selected files (controlled value). */
+    readonly files: File[];
+    addFiles: (incoming: File[]) => void;
+    removeAt: (index: number) => void;
+    clear: () => void;
+    setDragging: (v: boolean) => void;
+    /** 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: () => {
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        role: "button";
+        tabindex: number;
+        'data-dragging': string | undefined;
+        'aria-disabled': true | undefined;
+    };
+    /** Spread onto the visually-hidden <input type="file">. */
+    inputProps: () => {
+        type: "file";
+        accept: string | undefined;
+        multiple: boolean;
+        disabled: boolean;
+        tabindex: number;
+    };
+    /** Spread onto a selected file's remove <button> at `index`. */
+    removeProps: (index: number) => {
+        type: "button";
+        onclick: () => void;
+    };
+};
+export type FileUpload = ReturnType<typeof createFileUpload>;

package/dist/createFileUpload.svelte.js

@@ -0,0 +1,122 @@
+/**
+ * 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 } from './editor-contract';
+/** Whether `file` satisfies an `accept` list (MIME globs or extensions). Pure. */
+export function fileMatchesAccept(file, accept) {
+    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) {
+    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) {
+        if (!isInteractive || !incoming.length)
+            return;
+        const accepted = [];
+        const rejected = [];
+        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) {
+        if (!isInteractive)
+            return;
+        config.onChange?.(config.files().filter((_, i) => i !== index));
+    }
+    function clear() { if (isInteractive)
+        config.onChange?.([]); }
+    const setDragging = (v) => { if (isInteractive)
+        dragging = v; };
+    const ariaState = () => ({
+        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',
+            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',
+            accept: accept(),
+            multiple: multiple(),
+            disabled: !isInteractive,
+            tabindex: -1,
+        }),
+        /** Spread onto a selected file's remove <button> at `index`. */
+        removeProps: (index) => ({
+            type: 'button',
+            onclick: () => removeAt(index),
+        }),
+    };
+}