@orkestrel/form 0.0.10 → 0.0.12

package/README.md

@@ -4,8 +4,8 @@
 > the answers given against it, declarative `FieldRule` data stating what those answers must
 > satisfy, acknowledged editing, and a terminal submit that settles the form exactly once.
 
-A terminal prompt and a browser form ask the same thing in different places, so this package ships
-what they share and neither renders nor reads input itself. Its `answer` promise is the parking seam
+A terminal prompt and a browser form ask the same thing in different places, so the core ships
+what they share. The browser entry binds native controls and renders neutral feedback. Its `answer` promise is the parking seam
 a server needs: hand the document out, wait, receive the answers back. A live form can take a field
 out and put it back with `disable` and `enable`, and exported budgets bound what one schema and its
 answers may retain, so a document that arrives from a wire costs a known maximum before anything
@@ -67,8 +67,15 @@ concept inventory of what this package leaves to the layer above.
 
 ## Package
 
-Published as one entry point per the `exports` field in `package.json`: `.`, the host-independent
-core. It ships dual ESM+CJS builds with declarations for both.
+The `.` entry ships the host-independent core in ESM and CJS. The `./browser` entry ships the native
+binding in ESM. Both include declarations. The binding supports password reveal, rule messages
+without duplicate native feedback, presented-control write notifications and touch, and optional
+blur deferral through footer presses. See [Native binding](./guides/form.md#native-binding).
+
+Use `control: 'list'` for free-text tags or recipient arrays. Its `required` rule requires an entry,
+`minimum` and `maximum` count entries, and `email: true` checks each address. Bind it to a native
+`select multiple` for repeated FormData values and authored-option reset. See
+[List fields](./guides/form.md#list).
 
 ## Development
 

package/dist/src/browser/index.d.ts

@@ -126,11 +126,12 @@ declare interface FieldError {
  * `minimum` and `maximum` measure whatever the control makes countable: characters for
  * `text`, `editor`, and `password`; magnitude for `number`; chronology for `date`, `time`,
  * and `datetime`, whose operand is a string written in that control's own format; and the
- * number of selections for `checkbox` and `file`.
+ * number of entries for `checkbox`, `list`, and `file`.
  *
  * `step` is the interval a numeric value must land on. `pattern` is regular-expression
  * source. `email`, `url`, `integer`, and `alphanumeric` each assert one shape over the whole
- * value. `custom` runs last and is the only rule that sees the rest of the form.
+ * value, or each entry of a `list`. `required` requires an entry for `list` and presence
+ * for other controls. `custom` runs last and is the only rule that sees the rest of the form.
  *
  * @example
  * ```ts
@@ -189,7 +190,7 @@ declare type FieldValidator = (value: FieldValue | undefined, values: FormValues
  *
  * @remarks
  * The variant follows the control: text-like controls hold a `string`, `number` holds a
- * `number`, `confirm` holds a `boolean`, and `checkbox` holds its checked values as a
+ * `number`, `confirm` holds a `boolean`, and `checkbox`, `list`, and `file` hold a
  * `readonly string[]`.
  */
 declare type FieldValue = string | number | boolean | readonly string[];
@@ -259,6 +260,8 @@ export declare type FormBindingErrorCode = 'CONTROL' | 'PENDING' | 'DOM';
 /** Lists the native binding's notifications after their associated DOM effects. */
 export declare type FormBindingEventMap = {
     readonly render: readonly [];
+    /** Reports a control after its native value changes during document projection. */
+    readonly write: readonly [control: FormControl];
     readonly submit: readonly [submission: FormSubmission, submitter: HTMLElement | undefined];
     readonly error: readonly [error: unknown];
 };
@@ -281,6 +284,10 @@ export declare interface FormBindingInterface {
 export declare interface FormBindingOptions {
     readonly feedback?: ReadonlyMap<string, HTMLElement>;
     readonly summary?: HTMLElement;
+    /** Maps native controls to feedback and summary focus targets whose departure touches the field. */
+    readonly presentations?: ReadonlyMap<FormControl, HTMLElement>;
+    /** Defers blur touch until a same-form button's primary pointer press finishes. Default: false. */
+    readonly defer?: boolean;
     readonly on?: EmitterHooks<FormBindingEventMap>;
     readonly error?: EmitterErrorHandler;
 }
@@ -333,7 +340,7 @@ declare type FormEventMap = {
  * }
  * ```
  */
-declare type FormField = TextField | EditorField | PasswordField | NumberField | DateField | TimeField | DatetimeField | ColorField | ConfirmField | SelectField | CheckboxField | FileField;
+declare type FormField = TextField | EditorField | PasswordField | NumberField | DateField | TimeField | DatetimeField | ColorField | ConfirmField | SelectField | CheckboxField | ListField | FileField;
 
 /**
  * Represents a named section of a form.
@@ -650,6 +657,26 @@ export declare function isFormBindingError(value: unknown): value is FormBinding
  */
 export declare function isFormControl(value: unknown): value is FormControl;
 
+/**
+ * Represents an ordered list of free-text strings.
+ *
+ * @remarks
+ * `required` requires at least one entry. `minimum` and `maximum` count entries.
+ * `pattern`, `email`, `url`, `integer`, and `alphanumeric` check each entry and name
+ * the failing value in its message. `custom` checks the whole list. Duplicates are retained.
+ *
+ * @example
+ * ```ts
+ * const to: ListField = {
+ * 	control: 'list', name: 'to', rule: { required: true, email: true },
+ * }
+ * ```
+ */
+declare interface ListField extends FieldBase {
+    readonly control: 'list';
+    readonly default?: readonly string[];
+}
+
 /**
  * Checks a native control population against a field's declared value shape.
  * @param field - The declared field.
@@ -696,6 +723,24 @@ declare interface PasswordField extends FieldBase {
  */
 export declare function readFormControls(field: FormField, controls: readonly FormControl[]): FieldValue | undefined;
 
+/**
+ * Reads native constraint messages not already reported by document rules.
+ * @param control - The native control with binding-owned custom validity removed.
+ * @param errors - The document's reported failures.
+ * @returns Uncovered constraint messages, preserving authored custom validity.
+ * @remarks
+ * A lone native failure retains platform copy. Competing failures use constraint-specific
+ * copy because the platform exposes only one message for the whole control.
+ * @example
+ * ```ts
+ * const input = document.createElement('input')
+ * input.name = 'name'
+ * input.required = true
+ * readNativeMessages(input, [{ field: 'name', rule: 'required', message: 'Enter a name' }]) // []
+ * ```
+ */
+export declare function readNativeMessages(control: FormControl, errors: readonly FieldError[]): readonly string[];
+
 /**
  * Represents one choice out of a list.
  *

package/dist/src/browser/index.js

@@ -42,6 +42,7 @@ Object.freeze([
 	"confirm",
 	"select",
 	"checkbox",
+	"list",
 	"file"
 ]);
 /** Lists the members every field declares, whatever its control. */
@@ -90,6 +91,7 @@ Object.freeze({
 		"choices",
 		"default"
 	]),
+	list: Object.freeze([...FIELD_BASE_KEYS, "default"]),
 	file: Object.freeze([
 		...FIELD_BASE_KEYS,
 		"accept",
@@ -101,7 +103,8 @@ Object.freeze([
 	"settled",
 	"abandoned"
 ]);
-Object.freeze({
+/** Holds the default failure copy for every named field rule. */
+var RULE_MESSAGES = Object.freeze({
 	required: "This field is required",
 	minimum: "Must be at least {limit}",
 	maximum: "Must be at most {limit}",
@@ -160,6 +163,7 @@ function matchesField(field, value) {
 		case "confirm": return isBoolean(value);
 		case "select": return isString(value) && !field.choices.some((choice) => choice.value === value && choice.disabled === true) && (field.open === true || field.choices.some((choice) => choice.value === value && choice.disabled !== true));
 		case "checkbox": return entries !== void 0 && entries.every((entry) => isString(entry) && field.choices.some((choice) => choice.value === entry && choice.disabled !== true)) && new Set(entries).size === entries.length;
+		case "list": return entries !== void 0;
 		case "file": return entries !== void 0 && (field.multiple === true || entries.length <= 1);
 	}
 }
@@ -170,7 +174,7 @@ function matchesField(field, value) {
 * Bind with `fill(name, matchesAnswer(raw) ? raw : undefined)`. This projection treats an absent
 * value and a string containing only whitespace as unanswered. Every other field value is an
 * answer, including an empty list, `false`, and zero. Core evaluation does not use this projection:
-* its `required` rule remains presence-only.
+* its `required` rule remains presence-only except that `list` requires an entry.
 *
 * @param value - The raw field value, or absence.
 * @returns True if the binding preserves the value as an answer; false otherwise.
@@ -189,6 +193,22 @@ function matchesValue(a, b) {
 	if (isArray(a) || isArray(b)) return isArray(a) && isArray(b) && a.length === b.length && a.every((entry, index) => entry === b[index]);
 	return a === b;
 }
+/**
+* Resolves and interpolates one rule message.
+*
+* @remarks
+* A replacement in `messages` is read first and {@link RULE_MESSAGES} supplies the copy otherwise,
+* and `{limit}` in whichever text wins is replaced with the rule's operand.
+*
+* @param rule - The rule whose message to resolve.
+* @param limit - The optional operand substituted for `{limit}`.
+* @param messages - Optional rule-specific message replacements.
+* @returns The resolved failure text.
+*/
+function formatMessage(rule, limit, messages) {
+	const message = messages?.[rule] ?? RULE_MESSAGES[rule];
+	return limit === void 0 ? message : message.replaceAll("{limit}", String(limit));
+}
 //#endregion
 //#region src/browser/helpers.ts
 /**
@@ -206,7 +226,7 @@ function matchesFormControls(field, controls) {
 	if (controls.length > 1 && field.control !== "checkbox" && field.control !== "select") return false;
 	return controls.every((control) => {
 		if (control instanceof HTMLTextAreaElement) return field.control === "editor" && controls.length === 1;
-		if (control instanceof HTMLSelectElement) return controls.length === 1 && (control.multiple ? field.control === "checkbox" : field.control === "select");
+		if (control instanceof HTMLSelectElement) return controls.length === 1 && (control.multiple ? field.control === "checkbox" || field.control === "list" : field.control === "select");
 		switch (field.control) {
 			case "text": return [
 				"text",
@@ -216,7 +236,7 @@ function matchesFormControls(field, controls) {
 				"tel",
 				"hidden"
 			].includes(control.type);
-			case "password": return control.type === "password";
+			case "password": return control.type === "password" || control.type === "text";
 			case "number": return control.type === "number" || control.type === "range";
 			case "datetime": return control.type === "datetime-local";
 			case "confirm": return control.type === "checkbox";
@@ -228,6 +248,44 @@ function matchesFormControls(field, controls) {
 	});
 }
 /**
+* Reads native constraint messages not already reported by document rules.
+* @param control - The native control with binding-owned custom validity removed.
+* @param errors - The document's reported failures.
+* @returns Uncovered constraint messages, preserving authored custom validity.
+* @remarks
+* A lone native failure retains platform copy. Competing failures use constraint-specific
+* copy because the platform exposes only one message for the whole control.
+* @example
+* ```ts
+* const input = document.createElement('input')
+* input.name = 'name'
+* input.required = true
+* readNativeMessages(input, [{ field: 'name', rule: 'required', message: 'Enter a name' }]) // []
+* ```
+*/
+function readNativeMessages(control, errors) {
+	const rules = new Set(errors.filter((error) => error.field === control.name).map((error) => error.rule));
+	const validity = control.validity;
+	const failures = /* @__PURE__ */ new Map();
+	if (validity.valueMissing) failures.set("required", formatMessage("required"));
+	if (validity.rangeUnderflow) failures.set("minimum", formatMessage("minimum", control.getAttribute("min") ?? ""));
+	if (validity.rangeOverflow) failures.set("maximum", formatMessage("maximum", control.getAttribute("max") ?? ""));
+	if (validity.tooShort) failures.set("minimum", formatMessage("minimum", control.getAttribute("minlength") ?? ""));
+	if (validity.tooLong) failures.set("maximum", formatMessage("maximum", control.getAttribute("maxlength") ?? ""));
+	if (validity.stepMismatch) failures.set("step", "Use a permitted value for this step");
+	if (validity.patternMismatch) failures.set("pattern", formatMessage("pattern"));
+	if (validity.typeMismatch && control instanceof HTMLInputElement) {
+		if (control.type === "email") failures.set("email", formatMessage("email"));
+		else if (control.type === "url") failures.set("url", formatMessage("url"));
+	}
+	const messages = [];
+	if (validity.customError) messages.push(control.validationMessage);
+	const lone = failures.size + Number(validity.customError) + Number(validity.badInput) === 1;
+	if (validity.badInput) messages.push(lone ? control.validationMessage : "Enter a valid value");
+	for (const [rule, message] of failures) if (!rules.has(rule)) messages.push(lone ? control.validationMessage : message);
+	return messages;
+}
+/**
 * Reads one compatible native population using the document's blank-to-absence semantics.
 * @param field - The field declaring the answer shape.
 * @param controls - Controls sharing the field's name, in native order.
@@ -245,7 +303,8 @@ function readFormControls(field, controls) {
 	const first = controls[0];
 	if (first === void 0) return void 0;
 	let value;
-	if (field.control === "checkbox") value = first instanceof HTMLSelectElement ? Array.from(first.selectedOptions, (option) => option.value) : controls.filter((control) => control instanceof HTMLInputElement && control.checked).map((control) => control.value);
+	if (field.control === "list" && first instanceof HTMLSelectElement) value = Array.from(first.selectedOptions).filter((option) => !option.matches(":disabled")).map((option) => option.value);
+	else if (field.control === "checkbox") value = first instanceof HTMLSelectElement ? Array.from(first.selectedOptions, (option) => option.value) : controls.filter((control) => control instanceof HTMLInputElement && control.checked).map((control) => control.value);
 	else if (field.control === "select" && first instanceof HTMLInputElement) value = controls.find((control) => control instanceof HTMLInputElement && control.checked)?.value;
 	else if (field.control === "confirm" && first instanceof HTMLInputElement) value = first.checked;
 	else if (field.control === "number" && first instanceof HTMLInputElement) {
@@ -288,6 +347,10 @@ var FormBinding = class {
 	#logical = /* @__PURE__ */ new Set();
 	#unreadable = /* @__PURE__ */ new Set();
 	#names = /* @__PURE__ */ new Map();
+	#readings = /* @__PURE__ */ new Map();
+	#lists = /* @__PURE__ */ new Map();
+	#resets = /* @__PURE__ */ new Map();
+	#deferred = /* @__PURE__ */ new Set();
 	#refresh = this.#onState.bind(this);
 	#fill = this.#onFill.bind(this);
 	#disable = this.#onDisable.bind(this);
@@ -299,13 +362,15 @@ var FormBinding = class {
 	#summaryText = "";
 	#destroyed = false;
 	#running = false;
-	#queued = false;
+	#preserve;
 	#reading = false;
 	#excluding;
 	#changed = false;
 	#notified = false;
 	#scheduled = false;
 	#submitting = false;
+	#pointer;
+	#release;
 	/**
 	* Binds existing controls to the supplied document's answers.
 	* @param element - The native form, including its externally associated controls.
@@ -318,7 +383,7 @@ var FormBinding = class {
 		this.#document = document;
 		this.#options = options;
 		this.#emitter = new Emitter(options);
-		this.#observer = new MutationObserver(() => this.#onDocument());
+		this.#observer = new MutationObserver(() => this.#onDocument(true));
 		for (const name of document.disabled) this.#logical.add(name);
 		try {
 			this.#controls = this.#discover();
@@ -329,6 +394,21 @@ var FormBinding = class {
 			element.ownerDocument.addEventListener("change", (event) => this.#onInput(event), { signal });
 			element.ownerDocument.addEventListener("focusout", (event) => this.#onBlur(event), { signal });
 			element.ownerDocument.addEventListener("click", (event) => this.#onClick(event), { signal });
+			if (options?.defer) {
+				element.ownerDocument.addEventListener("pointerdown", (event) => this.#onPress(event), {
+					signal,
+					capture: true
+				});
+				element.ownerDocument.addEventListener("pointerup", (event) => this.#onRelease(event), {
+					signal,
+					capture: true
+				});
+				element.ownerDocument.addEventListener("pointercancel", (event) => this.#onRelease(event), {
+					signal,
+					capture: true
+				});
+				element.ownerDocument.defaultView?.addEventListener("blur", () => this.#finishPress(), { signal });
+			}
 			document.emitter.on("fill", this.#fill);
 			document.emitter.on("disable", this.#disable);
 			document.emitter.on("enable", this.#enable);
@@ -433,6 +513,7 @@ var FormBinding = class {
 		this.#destroyed = true;
 		this.#observer.disconnect();
 		this.#listeners.abort();
+		this.#clearPress();
 		this.#document.emitter.off("fill", this.#fill);
 		this.#document.emitter.off("disable", this.#disable);
 		this.#document.emitter.off("enable", this.#enable);
@@ -460,27 +541,31 @@ var FormBinding = class {
 		this.#excluded.clear();
 		this.#feedback.clear();
 		this.#names.clear();
+		this.#readings.clear();
+		this.#lists.clear();
+		this.#resets.clear();
 		this.#unreadable.clear();
 		this.#logical.clear();
 		this.#controls = /* @__PURE__ */ new Map();
 		this.#summary = void 0;
 		this.#emitter.destroy();
 	}
-	#drain() {
+	#drain(preserve = false) {
 		if (this.#destroyed) return;
-		this.#queued = true;
+		this.#preserve = this.#preserve === false ? false : preserve;
 		if (this.#running || this.#reading) return;
 		this.#running = true;
 		try {
 			let turns = 0;
-			while (this.#queued && !this.#destroyed && turns < 2) {
-				this.#queued = false;
+			while (this.#preserve !== void 0 && !this.#destroyed && turns < 2) {
+				const retaining = this.#preserve;
+				this.#preserve = void 0;
 				this.#changed = false;
 				this.#controls = this.#discover();
 				this.#releaseRemoved();
 				this.#exclusions();
 				if (this.#destroyed) break;
-				this.#paint();
+				this.#paint(retaining);
 				if (!this.#destroyed && (this.#changed || !this.#notified)) {
 					this.#notified = true;
 					this.#emitter.emit("render");
@@ -488,15 +573,15 @@ var FormBinding = class {
 				turns += 1;
 			}
 		} catch (error) {
-			this.#queued = false;
+			this.#preserve = void 0;
 			throw isFormBindingError(error) ? error : new FormBindingError("DOM", "Native form projection failed", { cause: error });
 		} finally {
 			this.#running = false;
-			if (this.#queued && !this.#destroyed && !this.#scheduled) {
+			if (this.#preserve !== void 0 && !this.#destroyed && !this.#scheduled) {
 				this.#scheduled = true;
 				queueMicrotask(() => {
 					this.#scheduled = false;
-					if (!this.#destroyed) this.#onDocument();
+					if (!this.#destroyed) this.#onDocument(this.#preserve ?? false);
 				});
 			}
 		}
@@ -560,7 +645,7 @@ var FormBinding = class {
 			}
 		}
 	}
-	#paint() {
+	#paint(preserve) {
 		this.#attribute(this.#element, "novalidate", "");
 		this.#attribute(this.#element, "aria-busy", this.#document.pending === void 0 ? "false" : "true");
 		const errors = [...this.#document.errors];
@@ -570,11 +655,12 @@ var FormBinding = class {
 			const group = this.#controls.get(field.name) ?? [];
 			for (const control of group) {
 				this.#metadata(field, control);
-				if (!this.#unreadable.has(field.name)) this.#value(field, control, Object.hasOwn(values, field.name) ? values[field.name] : void 0);
+				if (!this.#unreadable.has(field.name)) this.#value(field, control, Object.hasOwn(values, field.name) ? values[field.name] : void 0, preserve);
+				if (this.#destroyed) return;
 				this.#restoreValidity(control);
-				if (!this.#document.disabled.has(field.name) && !control.validity.valid && control.willValidate) errors.push({
+				if (!this.#document.disabled.has(field.name) && !control.validity.valid && control.willValidate) for (const message of readNativeMessages(control, this.#document.errors)) errors.push({
 					field: field.name,
-					message: control.validationMessage
+					message
 				});
 			}
 		}
@@ -613,12 +699,24 @@ var FormBinding = class {
 				}
 				this.#attribute(control, "aria-invalid", visible && message !== "" ? "true" : null);
 				if (feedback !== void 0) this.#description(control, feedback.id, visible && message !== "");
+				const presentation = this.#options?.presentations?.get(control);
+				if (presentation !== void 0) {
+					this.#attribute(presentation, "aria-invalid", visible && message !== "" ? "true" : null);
+					if (feedback !== void 0) this.#description(presentation, feedback.id, visible && message !== "");
+				}
 			}
 		}
 		this.#paintSummary(errors.filter((error) => this.#document.touched.has(error.field) && !this.#document.disabled.has(error.field)));
 		for (const control of Array.from(this.#element.elements)) if (control instanceof HTMLButtonElement && control.type === "submit" || control instanceof HTMLInputElement && ["submit", "image"].includes(control.type)) this.#attribute(control, "aria-busy", this.#document.pending === void 0 ? "false" : "true");
 	}
 	#metadata(field, control) {
+		if (field.control === "list" && control instanceof HTMLSelectElement && !this.#lists.has(control)) {
+			const snapshot = control.cloneNode(true);
+			if (snapshot instanceof HTMLSelectElement) {
+				for (const [index, option] of Array.from(snapshot.options).entries()) option.selected = control.options[index]?.selected ?? false;
+				this.#lists.set(control, snapshot);
+			}
+		}
 		if (this.#logical.has(field.name)) this.#attribute(control, "disabled", "");
 		else this.#releaseAttribute(control, "disabled");
 		if (field.locked && !(control instanceof HTMLSelectElement) && !(control instanceof HTMLInputElement && [
@@ -639,12 +737,22 @@ var FormBinding = class {
 			if (field.control === "number" && field.rule?.step !== void 0 && !control.hasAttribute("step")) this.#attribute(control, "step", String(field.rule.step));
 		}
 	}
-	#value(field, control, value) {
+	#value(field, control, value, preserve) {
+		if (preserve && !field.locked && control.ownerDocument.activeElement === control && this.#readings.has(control) && (control instanceof HTMLTextAreaElement || control instanceof HTMLInputElement && [
+			"text",
+			"search",
+			"email",
+			"url",
+			"tel",
+			"password"
+		].includes(control.type)) && control.value !== this.#readings.get(control)) return;
+		let changed = false;
 		if (control instanceof HTMLInputElement && control.type === "file") {
 			const names = Array.from(control.files ?? [], (file) => file.name);
 			if (names.length > 0 && (value === void 0 || !matchesValue(names, value))) {
 				control.value = "";
 				this.#changed = true;
+				this.#emitter.emit("write", control);
 			}
 			return;
 		}
@@ -652,13 +760,39 @@ var FormBinding = class {
 			const checked = field.control === "confirm" ? value === true : Array.isArray(value) ? value.includes(control.value) : value === control.value;
 			if (control.checked !== checked) {
 				control.checked = checked;
-				this.#changed = true;
+				changed = true;
+			}
+		} else if (control instanceof HTMLSelectElement && field.control === "list") {
+			const remaining = Array.from(control.options).filter((option) => !option.matches(":disabled"));
+			const selected = [];
+			for (const entry of Array.isArray(value) ? value : []) {
+				const index = remaining.findIndex((option) => option.value === entry);
+				let option = index < 0 ? void 0 : remaining.splice(index, 1)[0];
+				if (option === void 0) {
+					option = control.ownerDocument.createElement("option");
+					option.value = entry;
+					option.text = entry;
+					control.append(option);
+					changed = true;
+				}
+				if (!option.selected) changed = true;
+				option.selected = true;
+				selected.push(option);
+			}
+			for (const option of remaining) {
+				if (option.selected) changed = true;
+				option.selected = false;
+			}
+			const ordered = Array.from(control.selectedOptions).filter((option) => !option.matches(":disabled"));
+			if (selected.some((option, index) => ordered[index] !== option)) {
+				control.append(...selected);
+				changed = true;
 			}
 		} else if (control instanceof HTMLSelectElement && control.multiple) for (const option of Array.from(control.options)) {
 			const selected = Array.isArray(value) && value.includes(option.value);
 			if (option.selected !== selected) {
 				option.selected = selected;
-				this.#changed = true;
+				changed = true;
 			}
 		}
 		else {
@@ -667,9 +801,21 @@ var FormBinding = class {
 				const before = control.value;
 				const invalid = control.validity.badInput;
 				control.value = text;
-				if (control.value !== before || invalid) this.#changed = true;
+				if (control.value !== before || invalid) changed = true;
 			}
 		}
+		this.#readings.set(control, control.value);
+		if (control instanceof HTMLSelectElement) {
+			const before = this.#resets.get(control);
+			if (before !== void 0) {
+				this.#resets.delete(control);
+				changed = !matchesValue(before, Array.from(control.selectedOptions, (option) => option.value));
+			}
+		}
+		if (changed) {
+			this.#changed = true;
+			this.#emitter.emit("write", control);
+		}
 	}
 	#attribute(element, name, value) {
 		const attributes = this.#attributes.get(element) ?? /* @__PURE__ */ new Map();
@@ -721,13 +867,21 @@ var FormBinding = class {
 	}
 	#releaseRemoved() {
 		const live = new Set([...this.#controls.values()].flat());
+		const presentations = new Set([...live].map((control) => this.#options?.presentations?.get(control)));
 		for (const [control, name] of this.#names) if (!live.has(control) || control.name !== name) {
+			if (control instanceof HTMLSelectElement) {
+				this.#lists.delete(control);
+				this.#resets.delete(control);
+			}
+			const presentation = this.#options?.presentations?.get(control);
+			if (presentation !== void 0) this.#restore(presentation);
 			this.#restoreValidity(control);
 			this.#restore(control);
 			this.#names.delete(control);
+			this.#readings.delete(control);
 		}
 		for (const control of live) this.#names.set(control, control.name);
-		for (const element of this.#attributes.keys()) if ((isFormControl(element) || element instanceof HTMLButtonElement) && element.form !== this.#element) this.#restore(element);
+		for (const element of this.#attributes.keys()) if (!presentations.has(element) && (isFormControl(element) || element instanceof HTMLButtonElement) && element.form !== this.#element) this.#restore(element);
 		for (const [name, feedback] of this.#feedback) if (!this.#controls.has(name) && !this.#options?.feedback?.has(name)) {
 			feedback.remove();
 			this.#feedback.delete(name);
@@ -766,12 +920,12 @@ var FormBinding = class {
 		destination.append(this.#summary);
 	}
 	#focusable(name) {
-		return this.#controls.get(name)?.find((control) => !control.matches(":disabled") && control.closest("[inert]") === null && control.getClientRects().length > 0 && !["hidden", "collapse"].includes(getComputedStyle(control).visibility) && !(control instanceof HTMLInputElement && control.type === "hidden"));
+		return this.#controls.get(name)?.filter((control) => !control.matches(":disabled")).map((control) => this.#options?.presentations?.get(control) ?? control)?.find((control) => !control.matches(":disabled") && control.closest("[inert]") === null && control.getClientRects().length > 0 && !["hidden", "collapse"].includes(getComputedStyle(control).visibility) && !(control instanceof HTMLInputElement && control.type === "hidden"));
 	}
-	#onDocument() {
+	#onDocument(preserve = false) {
 		if (this.#destroyed) return;
 		try {
-			this.#drain();
+			this.#drain(preserve);
 		} catch (error) {
 			this.#emitter.emit("error", error);
 		}
@@ -796,6 +950,7 @@ var FormBinding = class {
 		this.#onState();
 	}
 	#onClear() {
+		this.#clearPress();
 		this.#logical.clear();
 		this.#excluded.clear();
 		this.#unreadable.clear();
@@ -828,8 +983,17 @@ var FormBinding = class {
 		].includes(control.type)) event.preventDefault();
 	}
 	#onBlur(event) {
-		const control = event.target;
+		let control = event.target;
+		for (const [native, presentation] of this.#options?.presentations ?? []) if (control === presentation) {
+			control = native;
+			break;
+		}
 		if (!isFormControl(control) || control.form !== this.#element || !this.#document.field(control.name) || this.#destroyed || this.#document.status !== "editing") return;
+		if (event.relatedTarget === this.#options?.presentations?.get(control)) return;
+		if (this.#pointer !== void 0) {
+			this.#deferred.add(control.name);
+			return;
+		}
 		try {
 			this.#document.touch(control.name);
 			this.#drain();
@@ -837,6 +1001,42 @@ var FormBinding = class {
 			this.#emitter.emit("error", error);
 		}
 	}
+	#onPress(event) {
+		if (!event.isPrimary || event.button !== 0 || !(event.target instanceof Element)) return;
+		const button = event.target.closest("button,input");
+		if (!((button instanceof HTMLButtonElement || button instanceof HTMLInputElement && [
+			"button",
+			"submit",
+			"reset",
+			"image"
+		].includes(button.type)) && button.form === this.#element && !button.matches(":disabled"))) return;
+		this.#finishPress();
+		this.#pointer = event.pointerId;
+	}
+	#onRelease(event) {
+		if (event.pointerId !== this.#pointer) return;
+		if (this.#release !== void 0) clearTimeout(this.#release);
+		this.#release = setTimeout(() => this.#finishPress(), 0);
+	}
+	#finishPress() {
+		const names = [...this.#deferred];
+		this.#clearPress();
+		if (this.#destroyed || this.#document.status !== "editing") return;
+		try {
+			for (const name of names) {
+				if (this.#destroyed) break;
+				this.#document.touch(name);
+			}
+		} catch (error) {
+			this.#emitter.emit("error", error);
+		}
+	}
+	#clearPress() {
+		if (this.#release !== void 0) clearTimeout(this.#release);
+		this.#release = void 0;
+		this.#pointer = void 0;
+		this.#deferred.clear();
+	}
 	#onSubmit(event) {
 		if (event.defaultPrevented || this.#destroyed) return;
 		event.preventDefault();
@@ -886,10 +1086,30 @@ var FormBinding = class {
 		if (event.defaultPrevented || this.#destroyed) return;
 		event.preventDefault();
 		try {
-			this.#document.clear();
+			const lists = /* @__PURE__ */ new Map();
+			for (const [control, snapshot] of this.#lists) if (control.form === this.#element && control.name === snapshot.name && this.#document.field(control.name)?.control === "list") {
+				lists.set(control, snapshot);
+				this.#resets.set(control, Array.from(control.selectedOptions, (option) => option.value));
+			}
+			this.#reading = true;
+			try {
+				this.#document.clear();
+				for (const [control, snapshot] of lists) {
+					if (this.#destroyed) return;
+					if (control.form !== this.#element || control.name !== snapshot.name) continue;
+					control.replaceChildren(...Array.from(snapshot.childNodes, (node) => node.cloneNode(true)));
+					for (const [index, option] of Array.from(control.options).entries()) option.selected = snapshot.options[index]?.selected ?? false;
+					const field = this.#document.field(control.name);
+					if (field !== void 0) this.#document.fill(field.name, readFormControls(field, [control]));
+				}
+			} finally {
+				this.#reading = false;
+			}
 			this.refresh();
 		} catch (error) {
 			this.#emitter.emit("error", error);
+		} finally {
+			this.#resets.clear();
 		}
 	}
 };
@@ -911,6 +1131,6 @@ function createFormBinding(element, document, options) {
 	return new FormBinding(element, document, options);
 }
 //#endregion
-export { FormBinding, FormBindingError, createFormBinding, isFormBindingError, isFormControl, matchesFormControls, readFormControls };
+export { FormBinding, FormBindingError, createFormBinding, isFormBindingError, isFormControl, matchesFormControls, readFormControls, readNativeMessages };
 
 //# sourceMappingURL=index.js.map