fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/field.js

@@ -1,211 +1,625 @@
-import { a as Machine, f as registerFieldMachine, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
-import { a as getLabelId, i as getErrorId, n as getDescriptionEl, o as getRootEl, r as getDescriptionId, s as getRootId, t as getControlId } from "./field.dom-CJQXpQbZ.js";
-import { n as getFormMachineFor, r as registerFieldMachineForForm } from "./form.registry-CmpTny_s.js";
-import { createMachine } from "@zag-js/core";
-import { createAnatomy } from "@zag-js/anatomy";
+import { A as queryRootEl, C as toErrorArray, D as getVisibleErrorTextIds, E as getControlEl, H as trimArraySuffix, I as unregisterFieldMachineForForm, M as getFormMachineFor, N as registerFieldMachineForForm, O as hasHelperText, S as suppressValueMissing, T as FIELD_VALUE_CHANGE_EVENT, at as Machine$1, b as resolveValidation, c as registerFieldMachine, d as connectField, j as getFieldMachinesFor, k as isInsideField, l as unregisterFieldMachine, m as getCurrentFieldValue, p as getComparableFieldValue, rt as Component, u as FIELD_DEPENDENCY_CHANGE_EVENT, v as VALID_SNAPSHOT, w as withValueMissing, x as shouldCommit, y as getValiditySnapshot } from "./Client-HrMIqv7d.js";
+import { _ as createFormValues, n as getFieldMessages } from "./form.fields-B58TZukv.js";
+import { observeChildren, trackFormControl } from "@zag-js/dom-query";
+import { createSplitProps, isEqual } from "@zag-js/utils";
+import { setup } from "@zag-js/core";
+import { createProps } from "@zag-js/types";
 
-//#region Resources/Private/Primitives/Field/src/field.anatomy.ts
-const anatomy = createAnatomy("field").parts("root", "label", "control", "error", "description");
-const parts = anatomy.build();
-
-//#endregion
-//#region Resources/Private/Primitives/Field/src/field.connect.ts
-function connect(service, normalize) {
-	const { scope, prop, context, computed } = service;
-	const invalid = context.get("invalid");
-	const disabled = context.get("disabled");
-	const required = context.get("required");
-	const readOnly = context.get("readOnly");
-	const errors = computed("errors");
-	return {
-		getFormMachine: () => context.get("formMachine"),
-		invalid,
-		disabled,
-		required,
-		readOnly,
-		errors,
-		name: prop("name"),
-		getErrorText() {
-			return errors.length > 0 ? errors.join(" ") : null;
-		},
-		getRootProps() {
-			return normalize.element({
-				...parts.root.attrs,
-				id: getRootId(scope),
-				"data-invalid": invalid ? "" : void 0,
-				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readOnly ? "" : void 0,
-				"data-required": required ? "" : void 0,
-				"data-name": prop("name")
-			});
-		},
-		getLabelProps() {
-			return normalize.label({
-				...parts.label.attrs,
-				id: getLabelId(scope),
-				htmlFor: getControlId(scope),
-				"data-invalid": invalid ? "" : void 0,
-				"data-disabled": disabled ? "" : void 0,
-				"data-required": required ? "" : void 0
-			});
-		},
-		getControlProps() {
-			return normalize.element({
-				...parts.control.attrs,
-				id: getControlId(scope),
-				name: prop("name"),
-				disabled: disabled || void 0,
-				readOnly: readOnly || void 0,
-				required: required || void 0,
-				"aria-invalid": invalid ? "true" : void 0,
-				"aria-describedby": context.get("describeIds") || void 0,
-				"aria-required": required ? "true" : void 0,
-				"data-invalid": invalid ? "" : void 0,
-				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readOnly ? "" : void 0
-			});
-		},
-		getErrorProps() {
-			return normalize.element({
-				...parts.error.attrs,
-				id: getErrorId(scope),
-				hidden: !invalid
-			});
-		},
-		getDescriptionProps() {
-			return normalize.element({
-				...parts.description.attrs,
-				id: getDescriptionId(scope)
-			});
-		}
-	};
-}
-
-//#endregion
 //#region Resources/Private/Primitives/Field/src/field.machine.ts
-const machine = createMachine({
+/**
+* Derived from @zag-js/field of Zag.js (https://github.com/chakra-ui/zag, packages/machines/field,
+* commit 0ce8e3de63b571d37e438bcf28e64759466e56e9), MIT License, Copyright (c) 2021 Chakra UI.
+* Adapted for Fluid Primitives, the git history shows what changed from the original.
+*/
+const { createMachine: createMachine$1 } = setup();
+const machine = createMachine$1({
+	props({ props }) {
+		return {
+			dir: "ltr",
+			disabled: false,
+			readOnly: false,
+			required: false,
+			validationMode: "onBlur",
+			...props
+		};
+	},
 	initialState() {
-		return "ready";
+		return "idle";
 	},
-	context({ bindable, prop }) {
+	context({ prop, bindable }) {
 		return {
-			invalid: bindable(() => ({ defaultValue: prop("invalid") ?? false })),
-			required: bindable(() => ({ defaultValue: prop("required") ?? false })),
-			disabled: bindable(() => ({ defaultValue: prop("disabled") ?? false })),
-			readOnly: bindable(() => ({ defaultValue: prop("readOnly") ?? false })),
-			formMachine: bindable(() => ({
-				defaultValue: null,
-				hash: (value) => JSON.stringify({
-					state: value?.state,
-					errors: value?.context.get("errors")
-				})
+			touched: bindable(() => ({
+				defaultValue: false,
+				value: prop("touched")
+			})),
+			dirty: bindable(() => ({
+				defaultValue: false,
+				value: prop("dirty")
 			})),
-			describeIds: bindable(() => ({ defaultValue: void 0 })),
-			hasDescription: bindable(() => ({ defaultValue: false }))
+			filled: bindable(() => ({ defaultValue: false })),
+			focused: bindable(() => ({ defaultValue: false })),
+			validating: bindable(() => ({ defaultValue: false })),
+			errors: bindable(() => ({ defaultValue: [] })),
+			validity: bindable(() => ({ defaultValue: null })),
+			errorTextIds: bindable(() => ({ defaultValue: [] })),
+			hasHelperText: bindable(() => ({ defaultValue: false })),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+			submitAttempted: bindable(() => ({ defaultValue: false }))
 		};
 	},
-	entry: [
-		"getFormMachine",
-		"checkForDescription",
-		"determineDescribeIds",
-		"updateInvalid"
-	],
-	states: { ready: {} },
-	computed: { errors({ context, prop }) {
-		const formMachineCtx = context.get("formMachine")?.context;
-		if (!formMachineCtx) return [];
-		return (formMachineCtx.get("errors")?.[prop("name")])?.messages ?? [];
-	} },
-	watch({ track, context, computed, action }) {
-		track([() => context.hash("formMachine"), () => computed("errors").join("|")], () => {
-			action(["updateInvalid"]);
+	refs() {
+		return {
+			markedDirty: false,
+			initialValue: null,
+			seq: 0,
+			rootEl: null
+		};
+	},
+	computed: {
+		disabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+		valid: ({ prop, context }) => {
+			if (prop("invalid")) return false;
+			if (prop("disabled") || context.get("fieldsetDisabled")) return null;
+			return context.get("validity")?.valid ?? null;
+		},
+		invalid: ({ prop, context }) => {
+			if (prop("invalid")) return true;
+			if (prop("disabled") || context.get("fieldsetDisabled")) return false;
+			return context.get("validity")?.valid === false;
+		}
+	},
+	watch({ track, prop, context, refs }) {
+		track([() => prop("disabled")], () => {
+			if (prop("disabled") && context.get("focused")) context.set("focused", false);
 		});
-		track([() => context.get("invalid"), () => context.get("hasDescription")], () => {
-			action(["determineDescribeIds"]);
+		track([() => context.get("dirty")], () => {
+			if (context.get("dirty")) refs.set("markedDirty", true);
 		});
 	},
-	implementations: { actions: {
-		getFormMachine({ context, scope }) {
-			if (context.get("formMachine")) return;
-			const fieldRootEl = getRootEl(scope);
-			if (!fieldRootEl) return;
-			const formMachine = getFormMachineFor(fieldRootEl) ?? null;
-			if (formMachine) context.set("formMachine", formMachine);
-			else {
-				const closestForm = fieldRootEl.closest("form");
-				if (!closestForm) return;
-				const handler = () => {
-					const fs = getFormMachineFor(fieldRootEl) ?? null;
-					context.set("formMachine", fs);
-					closestForm.removeEventListener("fluid-primitives:form:registered", handler);
-				};
-				closestForm.addEventListener("fluid-primitives:form:registered", handler);
-			}
+	effects: [
+		"trackRoot",
+		"trackControlState",
+		"trackTextParts",
+		"trackFieldEvents"
+	],
+	on: {
+		"CONTROL.FOCUS": { actions: ["setFocused"] },
+		"CONTROL.BLUR": [{
+			guard: "shouldCommit",
+			actions: ["setBlurred", "commitValidation"]
+		}, { actions: ["setBlurred"] }],
+		"CONTROL.CHANGE": [{
+			guard: "shouldCommit",
+			actions: ["trackValueState", "commitValidation"]
+		}, { actions: [
+			"trackValueState",
+			"dropStaleValidation",
+			"recoverValueMissing"
+		] }],
+		"SUBMIT.INVALID": { actions: ["markSubmitAttempted", "commitValidation"] },
+		VALIDATE: { actions: ["forceDirty", "commitValidation"] },
+		"VALIDATE.RESOLVE": {
+			guard: "isCurrentValidation",
+			actions: ["applyAsyncValidation"]
 		},
-		checkForDescription({ context, scope }) {
-			const descriptionEl = getDescriptionEl(scope);
-			context.set("hasDescription", !!descriptionEl);
+		"ERRORS.CLEAR": { actions: ["clearValidation"] },
+		RESET: { actions: ["resetField"] },
+		BASELINE: { actions: ["rebaseline"] }
+	},
+	states: { idle: {} },
+	implementations: {
+		guards: {
+			isCurrentValidation: ({ refs, event }) => event.seq === refs.get("seq"),
+			shouldCommit: ({ prop, context, refs, event }) => shouldCommit({
+				mode: prop("validationMode"),
+				submitAttempted: context.get("submitAttempted"),
+				eventType: event.type,
+				edited: refs.get("markedDirty") || context.get("dirty"),
+				showingErrors: context.get("errors").length > 0
+			})
 		},
-		determineDescribeIds({ context, scope }) {
-			const ids = [];
-			if (context.get("hasDescription")) ids.push(getDescriptionId(scope));
-			if (context.get("invalid")) ids.push(getErrorId(scope));
-			const idsStr = ids.join(" ") || void 0;
-			context.set("describeIds", idsStr);
+		effects: {
+			trackRoot({ refs, scope }) {
+				refs.set("rootEl", queryRootEl(scope));
+			},
+			trackControlState({ context, refs, send, prop }) {
+				const rootEl = refs.get("rootEl");
+				if (!rootEl) return;
+				if (refs.get("initialValue") == null) {
+					const value = readValue({
+						refs,
+						prop
+					});
+					refs.set("initialValue", value);
+					context.set("filled", value.length > 0);
+				}
+				return trackFormControl(rootEl, {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						send({ type: "RESET" });
+					}
+				});
+			},
+			trackTextParts({ context, refs }) {
+				const rootEl = refs.get("rootEl");
+				if (!rootEl) return;
+				const sync = () => {
+					const errorTextIds = getVisibleErrorTextIds(rootEl);
+					if (!isEqual(context.get("errorTextIds"), errorTextIds)) context.set("errorTextIds", errorTextIds);
+					context.set("hasHelperText", hasHelperText(rootEl));
+				};
+				sync();
+				return observeChildren(rootEl, {
+					defer: true,
+					callback: sync,
+					attributes: true,
+					attributeFilter: ["hidden"]
+				});
+			},
+			trackFieldEvents({ refs, send, prop }) {
+				const rootEl = refs.get("rootEl");
+				if (!rootEl) return;
+				let timer;
+				const read = () => readValue({
+					refs,
+					prop
+				});
+				let announced = read();
+				const sendChange = () => {
+					timer = void 0;
+					const value = read();
+					send({
+						type: "CONTROL.CHANGE",
+						value
+					});
+					if (value === announced) return;
+					announced = value;
+					rootEl.dispatchEvent(new CustomEvent(FIELD_VALUE_CHANGE_EVENT, {
+						bubbles: true,
+						detail: { value }
+					}));
+				};
+				const schedule = () => {
+					clearTimeout(timer);
+					timer = setTimeout(sendChange, getSettleDelay(rootEl));
+				};
+				const sendNow = () => {
+					clearTimeout(timer);
+					sendChange();
+				};
+				const flush = () => {
+					if (timer !== void 0) sendNow();
+				};
+				const listeners = {
+					focusin: () => send({ type: "CONTROL.FOCUS" }),
+					focusout: (event) => {
+						if (isInsideField(rootEl, event.relatedTarget)) return;
+						flush();
+						send({
+							type: "CONTROL.BLUR",
+							value: read()
+						});
+					},
+					input: schedule,
+					change: (event) => event.isTrusted ? sendNow() : schedule(),
+					click: (event) => {
+						if (!event.isTrusted && isChoiceInput(event.target)) schedule();
+					},
+					invalid: (event) => {
+						event.preventDefault();
+						send({
+							type: "SUBMIT.INVALID",
+							value: read()
+						});
+					}
+				};
+				for (const [type, listener] of Object.entries(listeners)) rootEl.addEventListener(type, listener, true);
+				return () => {
+					clearTimeout(timer);
+					for (const [type, listener] of Object.entries(listeners)) rootEl.removeEventListener(type, listener, true);
+				};
+			}
 		},
-		updateInvalid({ context, prop }) {
-			const formMachineCtx = context.get("formMachine")?.context;
-			if (!formMachineCtx) {
-				context.set("invalid", prop("invalid") ?? false);
-				return;
+		actions: {
+			setFocused({ context }) {
+				context.set("focused", true);
+			},
+			setBlurred({ context }) {
+				context.set("focused", false);
+				context.set("touched", true);
+			},
+			trackValueState({ context, refs, event }) {
+				const value = event.value;
+				const dirty = value !== (refs.get("initialValue") ?? "");
+				context.set("dirty", dirty);
+				if (dirty) refs.set("markedDirty", true);
+				context.set("filled", value.length > 0);
+			},
+			dropStaleValidation({ context, refs }) {
+				if (!context.get("validating")) return;
+				refs.set("seq", refs.get("seq") + 1);
+				context.set("validating", false);
+			},
+			recoverValueMissing(params) {
+				const { context, event } = params;
+				const validity = context.get("validity");
+				if (!validity || validity.valid || !validity.valueMissing) return;
+				const nextValidity = readValidity(params, event.value);
+				if (!nextValidity.valid) return;
+				applyValidation(params, {
+					customErrors: [],
+					validity: nextValidity,
+					value: event.value,
+					nativeMessage: ""
+				});
+			},
+			markSubmitAttempted({ context, refs }) {
+				context.set("submitAttempted", true);
+				refs.set("markedDirty", true);
+			},
+			forceDirty({ refs }) {
+				refs.set("markedDirty", true);
+			},
+			commitValidation(params) {
+				commitValidation(params, { value: params.event.value });
+			},
+			applyAsyncValidation(params) {
+				const { event } = params;
+				applyValidation(params, {
+					customErrors: toErrorArray(event.result),
+					validity: event.validity,
+					value: event.value,
+					nativeMessage: event.nativeMessage
+				});
+			},
+			clearValidation(params) {
+				clearValidation(params);
+			},
+			resetField(params) {
+				const { context, refs } = params;
+				clearValidation(params);
+				context.set("touched", false);
+				context.set("dirty", false);
+				context.set("focused", false);
+				context.set("submitAttempted", false);
+				refs.set("markedDirty", false);
+				context.set("filled", (refs.get("initialValue") ?? "").length > 0);
+			},
+			rebaseline(params) {
+				rebaseline(params);
 			}
-			const errs = (formMachineCtx.get("errors")?.[prop("name")])?.messages ?? [];
-			context.set("invalid", errs.length > 0);
 		}
-	} }
+	}
 });
+function commitValidation(params, options = {}) {
+	const { prop, context, refs, send } = params;
+	const hostEl = getHostEl(params);
+	hostEl?.setCustomValidity("");
+	const value = options.value ?? readValue(params);
+	let validity = readValidity(params, value);
+	if (!refs.get("markedDirty") && !context.get("dirty")) validity = suppressValueMissing(validity);
+	const nativeMessage = validity.valid ? "" : getNativeMessage(params, hostEl, validity);
+	const seq = refs.get("seq") + 1;
+	refs.set("seq", seq);
+	const result = prop("validate")?.({
+		value,
+		validity
+	});
+	if (isPromise$1(result)) {
+		context.set("validating", true);
+		result.then((resolved) => send({
+			type: "VALIDATE.RESOLVE",
+			seq,
+			result: resolved,
+			validity,
+			value,
+			nativeMessage
+		}), (error) => {
+			send({
+				type: "VALIDATE.RESOLVE",
+				seq,
+				result: null,
+				validity,
+				value,
+				nativeMessage
+			});
+			queueMicrotask(() => {
+				throw error;
+			});
+		});
+		return;
+	}
+	applyValidation(params, {
+		customErrors: toErrorArray(result),
+		validity,
+		value,
+		nativeMessage
+	});
+}
+function applyValidation(params, options) {
+	const { context, prop } = params;
+	const { errors, validity } = resolveValidation(options);
+	if (options.customErrors.length > 0) getHostEl(params)?.setCustomValidity(options.customErrors.join(" "));
+	const changed = context.get("validity")?.valid !== validity.valid || !isEqual(context.get("errors"), errors);
+	context.set("validating", false);
+	context.set("validity", validity);
+	context.set("errors", errors);
+	if (changed) prop("onValidityChange")?.({
+		valid: validity.valid,
+		errors,
+		validity,
+		value: options.value
+	});
+}
+function clearValidation(params) {
+	const { context, refs } = params;
+	refs.set("seq", refs.get("seq") + 1);
+	context.set("validating", false);
+	context.set("errors", []);
+	context.set("validity", null);
+	getHostEl(params)?.setCustomValidity("");
+}
+/**
+* The native control that hosts constraint validation (`setCustomValidity`, `validity`), when there
+* is one: the element the control id points at, if it is the one carrying the field's name. Looked
+* up at call time, and absent for groups, a Slider, or a Combobox's visible input (no name).
+*/
+function getHostEl({ scope, prop }) {
+	const controlEl = getControlEl(scope);
+	if (!controlEl || typeof controlEl.setCustomValidity !== "function") return null;
+	return trimArraySuffix(controlEl.name) === trimArraySuffix(prop("name")) ? controlEl : null;
+}
+/** Makes the current value the baseline for `dirty`, unless the user already changed it. */
+function rebaseline(params) {
+	const { context, refs } = params;
+	if (context.get("dirty") || refs.get("markedDirty")) return;
+	const value = readValue(params);
+	refs.set("initialValue", value);
+	context.set("filled", value.length > 0);
+}
+function readValue({ refs, prop }) {
+	return getComparableFieldValue(refs.get("rootEl"), prop("name"), prop("defaultValue"));
+}
+/** Native flags of the host, with `valueMissing` decided by the field's `required` and its value. */
+function readValidity(params, value) {
+	const { prop } = params;
+	const hostEl = getHostEl(params);
+	return withValueMissing(hostEl ? getValiditySnapshot(hostEl) : VALID_SNAPSHOT, !!prop("required") && !prop("readOnly") && value === "");
+}
+function getNativeMessage(params, hostEl, validity) {
+	if (hostEl?.validationMessage) return hostEl.validationMessage;
+	if (!validity.valueMissing) return "";
+	const probe = params.scope.getDoc().createElement("input");
+	probe.required = true;
+	return probe.validationMessage;
+}
+function isPromise$1(value) {
+	return typeof value === "object" && value !== null && "then" in value;
+}
+/** At least a short settle, whatever the form's `inputDebounceMs`: see `schedule` in `trackFieldEvents`. */
+function getSettleDelay(rootEl) {
+	const debounceMs = getFormMachineFor(rootEl)?.prop("inputDebounceMs") ?? 100;
+	return Math.max(debounceMs, 50);
+}
+function isChoiceInput(target) {
+	return target instanceof HTMLInputElement && (target.type === "checkbox" || target.type === "radio");
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.pointer.ts
+/**
+* Whether a pointer button is held down, and a way to wait for its release. A field blurs on the
+* mousedown that moves the focus away, and showing its error text then shifts the layout: by the
+* mouseup the button the user pressed has moved, and the click is lost.
+*/
+const MAX_PRESS_MS = 1500;
+const waiting = /* @__PURE__ */ new Set();
+let pressed = false;
+let installed = false;
+let giveUp;
+function release() {
+	pressed = false;
+	clearTimeout(giveUp);
+	const callbacks = Array.from(waiting);
+	waiting.clear();
+	callbacks.forEach((callback) => callback());
+}
+function install() {
+	if (installed) return;
+	installed = true;
+	document.addEventListener("pointerdown", () => {
+		pressed = true;
+		clearTimeout(giveUp);
+		giveUp = setTimeout(release, MAX_PRESS_MS);
+	}, true);
+	for (const type of ["pointerup", "pointercancel"]) document.addEventListener(type, () => setTimeout(release, 0), true);
+}
+function isPointerPressed() {
+	install();
+	return pressed;
+}
+/** Runs `callback` once no pointer button is held down, right away if none is. Returns a cancel function. */
+function whenPointerReleased(callback) {
+	install();
+	if (!pressed) {
+		callback();
+		return () => {};
+	}
+	waiting.add(callback);
+	return () => waiting.delete(callback);
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.props.ts
+/**
+* Derived from @zag-js/field of Zag.js (https://github.com/chakra-ui/zag, packages/machines/field,
+* commit 0ce8e3de63b571d37e438bcf28e64759466e56e9), MIT License, Copyright (c) 2021 Chakra UI.
+* Adapted for Fluid Primitives, the git history shows what changed from the original.
+*/
+const props = createProps()([
+	"defaultValue",
+	"dir",
+	"dirty",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"listenTo",
+	"name",
+	"onValidityChange",
+	"readOnly",
+	"required",
+	"touched",
+	"validate",
+	"validationMode"
+]);
+const splitProps = createSplitProps(props);
 
 //#endregion
 //#region Resources/Private/Primitives/Field/Field.ts
 var Field = class extends Component {
-	static name = "field";
-	subscribedToForm = false;
+	static componentName = "field";
+	/** The `validate` a consumer set; the machine itself runs {@link validate}, which adds the form's. */
+	ownValidate;
+	cleanups = [];
+	cancelDeferredRender;
+	/** The base class types its machine as `Machine<any>`. */
+	get fieldMachine() {
+		return this.machine;
+	}
 	initMachine(props) {
-		const createdMachine = new Machine(machine, props);
-		registerFieldMachine(this.getElement("root"), createdMachine);
-		registerFieldMachineForForm(this.getElement("root"), createdMachine);
+		const [machineProps] = splitProps(props);
+		this.ownValidate = machineProps.validate;
+		const createdMachine = new Machine$1(machine, {
+			...machineProps,
+			validate: (details) => this.validate(details)
+		});
+		const rootEl = this.hydrator.query("root");
+		registerFieldMachine(rootEl, createdMachine);
+		registerFieldMachineForForm(rootEl, createdMachine);
 		return createdMachine;
 	}
 	initApi() {
-		return connect(this.machine.service, normalizeProps);
+		return connectField(this.fieldMachine);
 	}
-	subscribeToFormMachine() {
-		if (this.subscribedToForm) return;
-		const formMachine = this.api.getFormMachine();
-		if (!formMachine) return;
-		this.subscribedToForm = true;
-		formMachine.subscribe(() => {
-			this.machine.notify();
-		});
+	init() {
+		super.init();
+		this.listenToDependencies();
+	}
+	updateProps(newProps) {
+		const { validate, ...rest } = newProps;
+		if ("validate" in newProps) this.ownValidate = validate;
+		super.updateProps(rest);
 	}
 	render() {
-		this.subscribeToFormMachine();
-		const rootEl = this.getElement("root");
+		const rootEl = this.hydrator.query("root");
 		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
-		const labelEl = this.getElement("label");
+		const labelEl = this.hydrator.query("label");
 		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
-		const controlEl = this.getElement("control");
-		if (controlEl) this.spreadProps(controlEl, this.api.getControlProps());
-		const descriptionEl = this.getElement("description");
-		if (descriptionEl) this.spreadProps(descriptionEl, this.api.getDescriptionProps());
-		const errorEl = this.getElement("error");
-		if (errorEl) {
-			this.spreadProps(errorEl, this.api.getErrorProps());
-			const msg = this.api.getErrorText();
-			if (msg) errorEl.textContent = msg;
+		const controlEl = this.hydrator.query("control");
+		if (controlEl) this.spreadProps(controlEl, this.getControlProps(controlEl));
+		const helperTextEl = this.hydrator.query("helperText");
+		if (helperTextEl) this.spreadProps(helperTextEl, this.api.getHelperTextProps());
+		if (isPointerPressed()) {
+			this.cancelDeferredRender ??= whenPointerReleased(() => {
+				this.cancelDeferredRender = void 0;
+				this.render();
+			});
+			return;
+		}
+		this.spreadPropsByOptionalValue("errorText", ({ el, value }) => {
+			if (value === void 0 && this.api.errors.length > 0) el.textContent = this.api.errors.join(" ");
+			return this.api.getErrorTextProps({ match: value });
+		});
+		this.spreadPropsByValue("indicator", ({ value }) => this.api.getIndicatorProps({ type: value }));
+	}
+	destroy() {
+		const rootEl = this.fieldMachine.refs.get("rootEl");
+		if (rootEl) unregisterFieldMachine(rootEl);
+		unregisterFieldMachineForForm(rootEl, this.fieldMachine);
+		this.cancelDeferredRender?.();
+		for (const cleanup of this.cleanups.splice(0)) cleanup();
+		super.destroy();
+	}
+	/**
+	* Zag's props differ per element only in `readOnly`, and the control part is the one place a
+	* bare native element is wired up by the field itself (primitives bring their own control).
+	*/
+	getControlProps(controlEl) {
+		switch (controlEl.localName) {
+			case "input": return this.api.getInputProps();
+			case "textarea": return this.api.getTextareaProps();
+			case "select": return this.api.getSelectProps();
+			default: return this.api.getControlProps();
+		}
+	}
+	/** What the machine validates with: the form's messages for this field, then the consumer's own. */
+	validate(details) {
+		const formMachine = getFormMachineFor(this.fieldMachine.refs.get("rootEl"));
+		const formMessages = formMachine ? getFieldMessages(formMachine, this.fieldMachine.prop("name")) : [];
+		const own = this.ownValidate?.(details);
+		if (isPromise(own)) return own.then((result) => [...formMessages, ...toErrorArray(result)]);
+		return [...formMessages, ...toErrorArray(own)];
+	}
+	/**
+	* `listenTo`: when a named sibling field in the same form changes value, this field announces
+	* `fluid-primitives:field:dependencychange` for consumer DOM reactions and treats it like a
+	* change of its own, so it revalidates under the same rules as when its user types.
+	*
+	* A sibling's registration may come later than this field's (the form can hydrate after its
+	* fields), so subscribing is retried whenever a form registers, until every name resolved.
+	*/
+	listenToDependencies() {
+		const listenTo = this.fieldMachine.prop("listenTo");
+		const rootEl = this.fieldMachine.refs.get("rootEl");
+		const formEl = rootEl?.closest("form");
+		if (!listenTo?.length || !rootEl || !formEl) return;
+		const names = listenTo.map(trimArraySuffix);
+		const pending = new Set(names);
+		const readSibling = (sibling) => getCurrentFieldValue(sibling.refs.get("rootEl"), sibling.prop("name"), sibling.prop("defaultValue"));
+		const announce = () => {
+			const dependencies = {};
+			listenTo.forEach((name, index) => {
+				const sibling = getFieldMachinesFor(rootEl).get(names[index]);
+				dependencies[name] = sibling ? readSibling(sibling) : null;
+			});
+			const detail = {
+				name: this.fieldMachine.prop("name"),
+				dependencies,
+				values: createFormValues(new FormData(formEl))
+			};
+			rootEl.dispatchEvent(new CustomEvent(FIELD_DEPENDENCY_CHANGE_EVENT, {
+				bubbles: true,
+				detail
+			}));
+			this.fieldMachine.send({
+				type: "CONTROL.CHANGE",
+				value: getComparableFieldValue(rootEl, this.fieldMachine.prop("name"), this.fieldMachine.prop("defaultValue"))
+			});
+		};
+		const trySubscribe = () => {
+			for (const name of Array.from(pending)) {
+				const siblingRootEl = getFieldMachinesFor(rootEl).get(name)?.refs.get("rootEl");
+				if (!siblingRootEl) continue;
+				siblingRootEl.addEventListener(FIELD_VALUE_CHANGE_EVENT, announce);
+				this.cleanups.push(() => siblingRootEl.removeEventListener(FIELD_VALUE_CHANGE_EVENT, announce));
+				pending.delete(name);
+			}
+			if (pending.size === 0) formEl.removeEventListener("fluid-primitives:form:registered", trySubscribe);
+		};
+		trySubscribe();
+		if (pending.size > 0) {
+			formEl.addEventListener("fluid-primitives:form:registered", trySubscribe);
+			this.cleanups.push(() => formEl.removeEventListener("fluid-primitives:form:registered", trySubscribe));
 		}
 	}
 };
+function isPromise(value) {
+	return typeof value === "object" && value !== null && "then" in value;
+}
 
 //#endregion
 export { Field };