fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/form.js

@@ -1,57 +1,55 @@
-import { a as Machine, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
-import { i as registerFormMachine, t as getFieldMachinesFor } from "./form.registry-CmpTny_s.js";
-import { debounce } from "@zag-js/utils";
+import { H as trimArraySuffix, P as registerFormMachine, a as normalizeProps, at as Machine$1, f as createFieldHandle, j as getFieldMachinesFor, rt as Component, z as prefixFieldName } from "./Client-HrMIqv7d.js";
+import { _ as createFormValues, a as getRegisteredFieldMachines, b as getFormEl, c as pruneStaleFieldMachines, d as settleFieldMachines, f as attachErrorValues, g as validateWithValidation, h as mapServerErrors, i as getFormData, l as renameFieldMachine, m as getFormErrorMessages, o as hasInvalidFieldMachines, p as filterErrorsForCurrentValues, r as getFirstInvalidField, s as hasUnownedErrors, t as focusField, u as sendToFieldMachines, v as FormError, x as parts, y as ValidationError } from "./form.fields-B58TZukv.js";
+import { nextTick } from "@zag-js/dom-query";
+import { createSplitProps } from "@zag-js/utils";
 import { createMachine } from "@zag-js/core";
-import { createAnatomy } from "@zag-js/anatomy";
-import * as z from "zod";
+import { createProps } from "@zag-js/types";
 
-//#region Resources/Private/Primitives/Form/src/form.anatomy.ts
-const anatomy = createAnatomy("form").parts("form");
-const parts = anatomy.build();
-
-//#endregion
-//#region Resources/Private/Primitives/Form/src/form.dom.ts
-const getFormId = (scope) => scope.ids?.form ?? `form:${scope.id}:form`;
-const getFormEl = (scope) => scope.getById(getFormId(scope));
-
-//#endregion
 //#region Resources/Private/Primitives/Form/src/form.connect.ts
 function connect(service, normalize) {
 	const { context, state, send, scope, prop } = service;
+	const formEl = getFormEl(scope);
+	function getFieldHandles() {
+		return new Map(Array.from(getRegisteredFieldMachines(scope), ([name, fieldMachine]) => [name, createFieldHandle(fieldMachine)]));
+	}
 	function getValues() {
-		return context.get("values");
+		return createFormValues(formEl ? new FormData(formEl) : new FormData());
 	}
 	function getErrors() {
-		return context.get("errors");
+		const errors = {};
+		for (const [name, field] of getFieldHandles()) {
+			if (field.errors.length === 0) continue;
+			errors[name] = {
+				messages: [...field.errors],
+				value: field.getValue()
+			};
+		}
+		return errors;
 	}
 	function getDirty() {
-		return context.get("dirty");
+		const dirty = {};
+		for (const [name, field] of getFieldHandles()) if (field.dirty) dirty[name] = true;
+		return dirty;
 	}
 	function getTouched() {
-		return context.get("touched");
+		const touched = {};
+		for (const [name, field] of getFieldHandles()) if (field.touched) touched[name] = true;
+		return touched;
+	}
+	function getErrorText() {
+		return context.get("errorText");
 	}
-	function getFormEl$1() {
-		return getFormEl(scope);
+	function getSuccessText() {
+		return context.get("successText");
 	}
+	const fieldHandles = getFieldHandles();
 	const isSubmitting = state.matches("submitting");
-	const isDirty = Object.values(getDirty()).length > 0;
-	const isInvalid = Object.keys(getErrors()).length > 0;
+	const isDirty = Array.from(fieldHandles.values()).some((field) => field.dirty);
+	const isInvalid = Array.from(fieldHandles.values()).some((field) => field.invalid);
 	const isSuccessful = state.matches("success");
 	const isError = state.matches("error");
-	const isTouched = Object.values(getTouched()).length > 0;
+	const isTouched = Array.from(fieldHandles.values()).some((field) => field.touched);
 	const stateValue = state.get();
-	const inputDebounceMs = prop("inputDebounceMs") ?? 100;
-	const debouncedSendInput = inputDebounceMs > 0 ? debounce((target) => {
-		send({
-			type: "INPUT",
-			detail: { target }
-		});
-	}, inputDebounceMs) : (target) => {
-		send({
-			type: "INPUT",
-			detail: { target }
-		});
-	};
 	return {
 		isSubmitting,
 		isDirty,
@@ -62,34 +60,86 @@ function connect(service, normalize) {
 		getErrors,
 		getDirty,
 		getTouched,
+		getErrorText,
+		getSuccessText,
+		setErrorText(text) {
+			send({
+				type: "SET_ERROR_TEXT",
+				detail: { text }
+			});
+		},
+		setSuccessText(text) {
+			send({
+				type: "SET_SUCCESS_TEXT",
+				detail: { text }
+			});
+		},
+		clearStatusText() {
+			send({ type: "CLEAR_STATUS_TEXT" });
+		},
 		_userRenderFn: prop("render"),
-		getFormEl: getFormEl$1,
+		getFormEl() {
+			return formEl;
+		},
 		getAllFields() {
-			return getFieldMachinesFor(getFormEl(scope));
+			return getFieldHandles();
 		},
 		getField(name) {
-			return this.getAllFields().get(name);
+			return this.getAllFields().get(trimArraySuffix(name));
 		},
 		getAction() {
-			return getFormEl$1()?.getAttribute("action") || "";
+			return formEl?.getAttribute("action") || "";
 		},
 		reset() {
 			send({ type: "RESET" });
 		},
+		syncFields() {
+			send({ type: "SYNC_FIELDS" });
+		},
+		renameField(oldName, newName) {
+			renameFieldMachine(scope, oldName, newName);
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs(scope.id),
+				hidden: isError || isSuccessful
+			});
+		},
+		getIndicatorProps(indicatorState) {
+			return normalize.element({
+				...parts.indicator.attrs(scope.id),
+				hidden: stateValue !== indicatorState
+			});
+		},
+		getErrorTextProps() {
+			return normalize.element({
+				...parts["errorText"].attrs(scope.id),
+				hidden: !isError,
+				role: "alert"
+			});
+		},
+		getSuccessTextProps() {
+			return normalize.element({
+				...parts["successText"].attrs(scope.id),
+				hidden: !isSuccessful,
+				role: "status",
+				"aria-live": "polite"
+			});
+		},
 		getFormProps() {
 			return normalize.element({
-				...parts.form.attrs,
+				...parts.root.attrs(scope.id),
 				noValidate: true,
-				id: getFormId(scope),
+				/** The state of the form. */
 				"data-state": stateValue,
+				/** Present while the form is being submitted. */
 				"data-submitting": isSubmitting ? "" : void 0,
 				"data-invalid": isInvalid ? "" : void 0,
 				"data-dirty": isDirty ? "" : void 0,
 				"data-touched": isTouched ? "" : void 0,
-				onSubmit: async (event) => {
+				onSubmit: (event) => {
 					event.preventDefault();
-					const form = event.currentTarget;
-					context.set("values", new FormData(form));
+					if (isSubmitting) return;
 					send({
 						type: "SUBMIT",
 						detail: {
@@ -103,112 +153,12 @@ function connect(service, normalize) {
 						type: "RESET",
 						detail: { omitManualReset: true }
 					});
-				},
-				onInput: (event) => {
-					debouncedSendInput(event.target);
-				},
-				onBlur: (event) => {
-					const target = event.target;
-					if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement) && !(target instanceof HTMLSelectElement) && !(target instanceof HTMLButtonElement && target.getAttribute("data-scope") === "select")) return;
-					send({
-						type: "BLUR",
-						detail: { target }
-					});
 				}
 			});
 		}
 	};
 }
 
-//#endregion
-//#region Resources/Private/Primitives/Form/src/form.types.ts
-/**
-* Error thrown by post() when server returns 422 validation errors.
-* The machine catches this and transitions to 'invalid' state.
-*/
-var ValidationError = class extends Error {
-	constructor(errors) {
-		super("Server validation failed");
-		this.errors = errors;
-		this.name = "ValidationError";
-	}
-};
-
-//#endregion
-//#region Resources/Private/Primitives/Form/src/form.utils.ts
-function validateWithSchema(schema, formData) {
-	if (!schema) return {};
-	const dataObject = formDataToObject(formData);
-	const validationResult = schema.safeParse(dataObject);
-	if (validationResult.success) return {};
-	const flat = z.flattenError(validationResult.error).fieldErrors;
-	const errors = {};
-	for (const key in flat) {
-		if (!flat[key]) continue;
-		errors[key] = {
-			messages: flat[key],
-			value: getFormDataValue(formData, key)
-		};
-	}
-	return errors;
-}
-function errorsFromServer(responseErrors, objectName, formData) {
-	const out = {};
-	for (const key in responseErrors) {
-		let newKey = key;
-		if (objectName) newKey = newKey.replace(objectName + ".", "");
-		out[newKey] = {
-			messages: responseErrors[key],
-			value: getFormDataValue(formData, newKey)
-		};
-	}
-	return out;
-}
-function getInputValue(target) {
-	const el = target;
-	if (!el || !("type" in el)) return void 0;
-	if (el.type === "checkbox") {
-		const input = el;
-		if (input.name) {
-			const form = input.form;
-			if (form) {
-				const checkboxes = Array.from(form.querySelectorAll(`input[type="checkbox"][name="${CSS.escape(input.name)}"]`));
-				const values = checkboxes.filter((c) => c.checked).map((c) => c.value || "on");
-				if (checkboxes.length === 1 && !checkboxes[0].value) return checkboxes[0].checked;
-				return values;
-			}
-		}
-		return input.checked;
-	}
-	if (el.type === "radio") {
-		const input = el;
-		if (input.form && input.name) {
-			const selected = input.form.querySelector(`input[type="radio"][name="${CSS.escape(input.name)}"]:checked`);
-			return selected ? selected.value : "";
-		}
-		return input.checked ? input.value : "";
-	}
-	if (el instanceof HTMLSelectElement && el.multiple) return Array.from(el.selectedOptions).map((o) => o.value);
-	return el.value;
-}
-function getFormDataValue(formData, fieldName) {
-	return formData.getAll(fieldName).length > 1 || fieldName.endsWith("[]") ? formData.getAll(fieldName) : formData.get(fieldName);
-}
-function formDataToObject(formData) {
-	return Object.fromEntries(Array.from(formData.keys()).map((key) => [key.endsWith("[]") ? key.slice(0, -2) : key, getFormDataValue(formData, key) ?? ""]));
-}
-function prefixFieldName(fieldName, prefix, objectName) {
-	if (fieldName === "") return "";
-	const isArrayField = fieldName.endsWith("[]");
-	if (isArrayField) fieldName = fieldName.slice(0, -2);
-	if (objectName) fieldName = `${objectName}[${fieldName}]`;
-	const fieldNameSegments = fieldName.split("[", 2);
-	let prefixedFieldName = `${prefix}[${fieldNameSegments[0]}]`;
-	if (fieldNameSegments.length > 1) prefixedFieldName += `[${fieldNameSegments[1]}`;
-	if (isArrayField) prefixedFieldName += "[]";
-	return prefixedFieldName;
-}
-
 //#endregion
 //#region Resources/Private/Primitives/Form/src/form.machine.ts
 const machine = createMachine({
@@ -217,13 +167,13 @@ const machine = createMachine({
 	},
 	context({ bindable }) {
 		return {
-			values: bindable(() => ({ defaultValue: new FormData() })),
-			initialValues: bindable(() => ({ defaultValue: new FormData() })),
-			errors: bindable(() => ({ defaultValue: {} })),
-			dirty: bindable(() => ({ defaultValue: {} })),
-			touched: bindable(() => ({ defaultValue: {} }))
+			errorText: bindable(() => ({ defaultValue: null })),
+			successText: bindable(() => ({ defaultValue: null }))
 		};
 	},
+	refs() {
+		return { serverErrors: {} };
+	},
 	states: {
 		ready: {},
 		invalid: {},
@@ -234,13 +184,12 @@ const machine = createMachine({
 	on: {
 		SUBMIT: {
 			target: "submitting",
-			actions: ["validateAll"]
+			actions: ["clearStatusText", "validateAll"]
 		},
 		VALIDATE: { actions: ["validateAll"] },
-		VALIDATE_FIELD: { actions: ["validateField"] },
+		SYNC_FIELDS: { actions: ["syncFields"] },
+		FIELDS_CHANGED: { actions: ["syncState"] },
 		INVALID: { target: "invalid" },
-		INPUT: { actions: ["handleInput"] },
-		BLUR: { actions: ["handleBlur"] },
 		RESET: {
 			target: "ready",
 			actions: ["resetForm"]
@@ -249,43 +198,62 @@ const machine = createMachine({
 		SUCCESS: {
 			target: "success",
 			actions: ["clearErrors"]
-		}
+		},
+		SET_ERROR_TEXT: { actions: ["setErrorText"] },
+		SET_SUCCESS_TEXT: { actions: ["setSuccessText"] },
+		CLEAR_STATUS_TEXT: { actions: ["clearStatusText"] }
 	},
-	entry: ["setupFormListeners"],
 	implementations: { actions: {
-		validateAll({ context, send, prop, state, action, event, scope }) {
+		validateAll({ send, prop, state, action, event, scope, refs }) {
 			const submitting = state.matches("submitting");
-			const schema = prop("schema");
-			if (schema) {
-				const errs = validateWithSchema(schema, context.get("values"));
-				context.set("errors", errs);
-				if (Object.keys(errs).length > 0) {
+			const validation = prop("validation");
+			pruneStaleFieldMachines(scope);
+			const submittedFormData = getFormData(scope);
+			const submittedValues = createFormValues(submittedFormData);
+			const cachedServerErrors = filterErrorsForCurrentValues(refs.get("serverErrors"), submittedValues);
+			let errors = cachedServerErrors;
+			if (validation) errors = {
+				...cachedServerErrors,
+				...validateWithValidation(validation, submittedValues)
+			};
+			sendToFieldMachines(scope, submitting ? "SUBMIT.INVALID" : "VALIDATE");
+			(async () => {
+				await settleFieldMachines(scope);
+				if (hasInvalidFieldMachines(scope) || hasUnownedErrors(scope, errors)) {
 					send({ type: "INVALID" });
 					if (submitting) action(["focusFirstInvalid"]);
 					return;
 				}
-			}
-			if (!submitting) {
-				state.set("ready");
-				return;
-			}
-			const onSubmit = prop("onSubmit");
-			if (!onSubmit) {
-				send({ type: "SUCCESS" });
-				return;
-			}
-			(async () => {
+				if (!submitting) {
+					state.set("ready");
+					return;
+				}
+				const onSubmit = prop("onSubmit");
+				if (!onSubmit) {
+					send({ type: "SUCCESS" });
+					return;
+				}
+				const invalidateWithErrors = (nextErrors) => {
+					const currentErrors = attachErrorValues(nextErrors, submittedValues);
+					refs.set("serverErrors", {
+						...refs.get("serverErrors"),
+						...currentErrors
+					});
+					sendToFieldMachines(scope, "VALIDATE");
+					send({ type: "INVALID" });
+					action(["focusFirstInvalid"]);
+				};
 				try {
-					if (await onSubmit({
-						formData: context.get("values"),
+					const result = await onSubmit({
+						values: submittedValues,
 						api: event.detail.api,
 						event: event.detail.event,
-						post: async (url, data) => {
+						post: async (url) => {
 							const prefixedData = new FormData();
 							const objectName = prop("objectName");
 							const prefix = getFormEl(scope)?.getAttribute("data-field-name-prefix") || "";
-							for (const [key, value] of data.entries()) {
-								if (key.includes(prefix)) {
+							for (const [key, value] of submittedFormData.entries()) {
+								if (prefix && key.startsWith(`${prefix}[`)) {
 									prefixedData.append(key, value);
 									continue;
 								}
@@ -295,138 +263,157 @@ const machine = createMachine({
 								method: "POST",
 								body: prefixedData
 							});
-							if (response.status === 422) throw new ValidationError(errorsFromServer(await response.json(), objectName, data));
+							if (response.status === 422) {
+								const responseErrors = await response.json();
+								const formErrorMessages = getFormErrorMessages(responseErrors, objectName);
+								if (formErrorMessages) throw new FormError(formErrorMessages);
+								throw new ValidationError(mapServerErrors(responseErrors, objectName, submittedValues));
+							}
 							return response;
 						}
-					})) send({ type: "SUCCESS" });
-					else send({ type: "ERROR" });
+					});
+					if (result === true) {
+						send({ type: "SUCCESS" });
+						return;
+					}
+					if (result === false) {
+						send({ type: "ERROR" });
+						return;
+					}
+					if (isFormErrors(result)) {
+						if (Object.keys(result).length === 0) {
+							send({ type: "SUCCESS" });
+							return;
+						}
+						invalidateWithErrors(result);
+						return;
+					}
+					send({ type: "ERROR" });
 				} catch (error) {
+					if (error instanceof FormError) {
+						send({
+							type: "SET_ERROR_TEXT",
+							detail: { text: error.errors.join(" ") }
+						});
+						send({ type: "ERROR" });
+						return;
+					}
 					if (error instanceof ValidationError) {
-						context.set("errors", error.errors);
-						send({ type: "INVALID" });
-						action(["focusFirstInvalid"]);
+						invalidateWithErrors(error.errors);
 						return;
 					}
 					send({ type: "ERROR" });
 				}
 			})();
 		},
-		validateField({ context, prop, event }) {
-			const schema = prop("schema");
-			if (!schema) return;
-			let fieldName = event.detail?.fieldName;
-			if (!fieldName) return;
-			const formData = context.get("values");
-			const currentErrors = context.get("errors");
-			const existingError = currentErrors[fieldName];
-			const currentValue = getFormDataValue(formData, fieldName);
-			if (existingError) {
-				const errorValue = existingError.value;
-				if (JSON.stringify(currentValue) === JSON.stringify(errorValue)) return;
-			}
-			const allErrors = validateWithSchema(schema, formData);
-			const updatedErrors = { ...currentErrors };
-			const fieldNameWithoutSuffix = fieldName.replace(/\[\]$/, "");
-			if (allErrors[fieldNameWithoutSuffix]) updatedErrors[fieldNameWithoutSuffix] = allErrors[fieldNameWithoutSuffix];
-			else delete updatedErrors[fieldNameWithoutSuffix];
-			context.set("errors", updatedErrors);
-		},
-		handleInput({ context, event, send }) {
-			const e = event;
-			const target = e?.detail?.target ?? e?.target ?? e?.currentTarget;
-			const name = target?.name;
-			if (!name) return;
-			const value = e?.detail?.value ?? getInputValue(target);
-			const values = context.get("values");
-			values.set(name, value);
-			context.set("values", values);
-			const initial = context.get("initialValues").get(name);
-			const dirty = { ...context.get("dirty") };
-			dirty[name] = JSON.stringify(values.get(name)) !== JSON.stringify(initial);
-			context.set("dirty", dirty);
-			const currentErrors = context.get("errors");
-			const touched = context.get("touched");
-			const hasFieldError = !!currentErrors[name];
-			const fieldTouched = !!touched[name];
-			if (hasFieldError || fieldTouched) send({
-				type: "VALIDATE_FIELD",
-				detail: { fieldName: name }
-			});
-		},
-		handleBlur({ context, send, prop, event }) {
-			const target = event?.detail?.target;
-			let name = target?.name;
-			if (!name) name = target?.closest("[data-scope=\"field\"]")?.getAttribute("name") || void 0;
-			if (!name) return;
-			const touched = { ...context.get("touched") };
-			touched[name] = true;
-			context.set("touched", touched);
-			const form = target.form;
-			if (form) {
-				const values = new FormData(form);
-				context.set("values", values);
-			}
-			if (prop("schema")) send({
-				type: "VALIDATE_FIELD",
-				detail: { fieldName: name }
-			});
+		syncState({ scope, state }) {
+			if (!state.matches("ready", "invalid")) return;
+			state.set(hasInvalidFieldMachines(scope) ? "invalid" : "ready");
 		},
-		resetForm({ context, scope, event }) {
+		resetForm({ context, scope, event, refs }) {
 			const form = getFormEl(scope);
 			if (form && !event?.detail?.omitManualReset) form.reset();
-			const initial = form ? new FormData(form) : context.get("initialValues");
-			context.set("values", initial);
-			context.set("initialValues", initial);
-			context.set("errors", {});
-			context.set("touched", {});
-			context.set("dirty", {});
+			context.set("errorText", null);
+			context.set("successText", null);
+			refs.set("serverErrors", {});
 		},
-		focusFirstInvalid({ context, scope }) {
-			const errors = context.get("errors");
-			const firstKey = Object.keys(errors)[0];
-			if (!firstKey) return;
-			const form = getFormEl(scope);
-			if (!form) return;
-			const invalidEl = form.querySelector(`[name="${CSS.escape(firstKey)}"]`);
-			invalidEl?.focus();
-			if (invalidEl instanceof HTMLInputElement || invalidEl instanceof HTMLTextAreaElement) invalidEl.select();
+		setErrorText({ context, event }) {
+			context.set("errorText", event.detail?.text ?? null);
 		},
-		setupFormListeners({ scope, send }) {
-			const form = getFormEl(scope);
-			if (!form) return;
-			form.addEventListener("change", (event) => {
-				send({
-					type: "INPUT",
-					detail: { target: event.target }
-				});
-			}, true);
+		setSuccessText({ context, event }) {
+			context.set("successText", event.detail?.text ?? null);
+		},
+		clearStatusText({ context }) {
+			context.set("errorText", null);
+			context.set("successText", null);
+		},
+		focusFirstInvalid({ scope }) {
+			nextTick(() => {
+				const firstInvalidField = getFirstInvalidField(scope);
+				const form = getFormEl(scope);
+				if (!firstInvalidField || !form) return;
+				focusField(form, ...firstInvalidField);
+			});
 		},
-		clearErrors({ context }) {
-			context.set("errors", {});
-			context.set("touched", {});
+		clearErrors({ scope, refs }) {
+			refs.set("serverErrors", {});
+			sendToFieldMachines(scope, "ERRORS.CLEAR");
+		},
+		syncFields({ scope }) {
+			pruneStaleFieldMachines(scope);
 		}
 	} }
 });
+function isFormErrors(result) {
+	return typeof result === "object" && result !== null && !Array.isArray(result);
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Form/src/form.props.ts
+const props = createProps()([
+	"id",
+	"validation",
+	"objectName",
+	"inputDebounceMs",
+	"onSubmit",
+	"render"
+]);
+const splitProps = createSplitProps(props);
 
 //#endregion
 //#region Resources/Private/Primitives/Form/Form.ts
 var Form = class extends Component {
-	static name = "form";
+	static componentName = "form";
+	fieldSubscriptions = /* @__PURE__ */ new Map();
 	initMachine(props) {
-		const createdMachine = new Machine(machine, props);
-		registerFormMachine(this.getElement("form"), createdMachine);
+		const [machineProps] = splitProps(props);
+		const createdMachine = new Machine$1(machine, machineProps);
+		registerFormMachine(this.hydrator.query("root"), createdMachine);
 		return createdMachine;
 	}
 	initApi() {
 		return connect(this.machine.service, normalizeProps);
 	}
+	subscribeToFieldMachines(formEl) {
+		for (const fieldMachine of getFieldMachinesFor(formEl).values()) {
+			if (this.fieldSubscriptions.has(fieldMachine)) continue;
+			const unsubscribe = fieldMachine.subscribe(() => {
+				this.machine.send({ type: "FIELDS_CHANGED" });
+				this.api = this.initApi();
+				this.render();
+			});
+			this.fieldSubscriptions.set(fieldMachine, unsubscribe);
+		}
+	}
 	render() {
-		const formEl = this.getElement("form");
+		const formEl = this.hydrator.query("root");
 		if (!formEl) return;
+		this.subscribeToFieldMachines(formEl);
 		this.spreadProps(formEl, this.api.getFormProps());
+		this.hydrator.queryAll("content").forEach((contentEl) => {
+			this.spreadProps(contentEl, this.api.getContentProps());
+		});
+		this.spreadPropsByValue("indicator", ({ value }) => this.api.getIndicatorProps(value));
+		this.hydrator.queryAll("errorText").forEach((errorTextEl) => {
+			this.spreadProps(errorTextEl, this.api.getErrorTextProps());
+			syncStatusText(errorTextEl, this.api.getErrorText());
+		});
+		this.hydrator.queryAll("successText").forEach((successTextEl) => {
+			this.spreadProps(successTextEl, this.api.getSuccessTextProps());
+			syncStatusText(successTextEl, this.api.getSuccessText());
+		});
 		this.api._userRenderFn?.(this);
 	}
+	destroy() {
+		for (const unsubscribe of this.fieldSubscriptions.values()) unsubscribe();
+		this.fieldSubscriptions.clear();
+		super.destroy();
+	}
 };
+function syncStatusText(element, text) {
+	if (element.dataset.defaultText === void 0) element.dataset.defaultText = element.textContent ?? "";
+	element.textContent = text ?? element.dataset.defaultText;
+}
 
 //#endregion
-export { Form, ValidationError };
+export { Form };