@threadlabs/looma 0.21.6 → 0.22.1

package/vue/chunks/UiTreeItem.js

@@ -1,7 +1,7 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { r as useComponentHost, t as createDispatch } from "./host.js";
-import { t as checkedProp } from "./props.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiTreeItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-label",
@@ -118,64 +118,204 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	},
 	emits: ["update:expanded", "expand"],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			accepts: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "data-accepts" },
+				description: "A comma-separated list of the dragType values this branch accepts dropped inside it. Empty accepts any type. It does not affect drops before or after the\n      item.",
+				default: ""
+			},
+			container: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "container" },
+				description: "Makes the item a branch even before it has children: it gets the expand button and aria-expanded, and accepts drops inside it. An item with nested items is\n      a branch without it.",
+				default: false
+			},
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "aria-disabled" },
+				description: "Makes the item unavailable: faded, skipped by keyboard navigation, unable to expand or be dragged, and closed to drops inside it.",
+				default: false
+			},
+			dragType: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "data-drag-type" },
+				description: "The item's kind, for drag rules: it can be dropped before or after only items of the same type, and inside a branch only if that branch's accepts allows\n      it. Reported as sourceType and targetType.",
+				default: "item"
+			},
+			dropDepth: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "data-drop-depth" },
+				description: "Overrides the level this item counts as when the tree checks maxDepth for a drop onto it. Unset, its level in the rendered tree is used; set it when the\n      item sits deeper in the real hierarchy than the rendered tree shows."
+			},
+			dropScope: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "data-drop-scope" },
+				description: "Names the list the item sits in, such as its parent's id, and is reported as sourceScope and targetScope in the tree's reorder events, so a handler can\n      tell a reorder within one list from a move between lists. It never restricts where an item can be dropped; dragType and accepts do that.",
+				default: ""
+			},
+			expanded: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "expanded" },
+				description: "Whether the branch shows its children, initially or when set externally. The expand button, a click on the row, and the arrow keys toggle it from there,\n      each reported as an expand event. Only meaningful for a branch.",
+				default: false
+			},
+			itemId: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "data-item-id" },
+				description: "The item's identifier, reported as sourceId and targetId in the tree's reorder events and as id in its expand event. A sortable item needs one to be\n      dragged, and a drop onto an item without one is not reported.",
+				default: ""
+			},
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "The item's accessible name, also shown as the row text unless the label slot supplies content.",
+				default: ""
+			},
+			lazy: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "lazy" },
+				description: "Keeps an empty item expandable while its children are supplied later. Expanding emits expand; the item is aria-busy until child Tree Items are appended.\n      Clear lazy if loading finishes with no children.",
+				default: false
+			},
+			marquee: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "marquee" },
+				description: "Scrolls a name too long for its row while a pointer hovers the row or keyboard focus is in it, rests at the end, then scrolls it again from the start. A\n      touch does not start it. Off by default: a tree of short names should not move, and a product decides whether reading the whole name matters more than a\n      still list.",
+				default: false
+			},
+			selected: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "aria-selected" },
+				description: "Marks the item selected: it sets aria-selected and highlights the row. This is controlled state; respond to the parent Tree's select request by updating\n      it.",
+				default: false
+			},
+			sortable: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "sortable" },
+				description: "Gives the item a move handle. Drag it, or activate it and choose a target by a second click or the keyboard. The tree reports reorder and leaves moving the\n      item to you. Needs itemId; disabled items show no handle.",
+				default: false
+			},
+			subtreeDepth: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "data-subtree-depth" },
+				description: "Overrides how many levels sit beneath this item when the tree checks maxDepth for a drag of it. Unset, the tree counts the rendered descendants; set it\n      when some are not rendered, such as children that load later."
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			accepts: checkedProp(props["accepts"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "accepts", void 0, void 0),
+			}, false, "accepts"),
 			container: checkedProp(props["container"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "container", void 0, void 0),
+			}, false, "container"),
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled", void 0, void 0),
+			}, false, "disabled"),
 			dragType: checkedProp(props["dragType"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "dragType", void 0, void 0),
+			}, false, "dragType"),
 			dropDepth: checkedProp(props["dropDepth"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "dropDepth", void 0, void 0),
+			}, false, "dropDepth"),
 			dropScope: checkedProp(props["dropScope"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "dropScope", void 0, void 0),
+			}, false, "dropScope"),
 			expanded: checkedProp(props["expanded"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "expanded", void 0, void 0),
+			}, false, "expanded"),
 			itemId: checkedProp(props["itemId"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "itemId", void 0, void 0),
+			}, false, "itemId"),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label", void 0, void 0),
+			}, false, "label"),
 			lazy: checkedProp(props["lazy"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "lazy", void 0, void 0),
+			}, false, "lazy"),
 			marquee: checkedProp(props["marquee"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "marquee", void 0, void 0),
+			}, false, "marquee"),
 			selected: checkedProp(props["selected"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "selected", void 0, void 0),
+			}, false, "selected"),
 			sortable: checkedProp(props["sortable"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "sortable", void 0, void 0),
+			}, false, "sortable"),
 			subtreeDepth: checkedProp(props["subtreeDepth"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "subtreeDepth", void 0, void 0)
+			}, false, "subtreeDepth")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -208,6 +348,25 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const structuralLevel = ref(1);
 		const tabStop = ref(false);
 		const isContainer = ref(false);
+		let guardedPrevious;
+		const guarded = computed(() => {
+			if (!(structuralLevel.value == null || Number.isInteger(structuralLevel.value))) return guardedPrevious;
+			return guardedPrevious = structuralLevel.value;
+		});
+		let guardedBindingPrevious;
+		const guardedBinding = computed(() => {
+			if (!(isContainer.value == null || typeof isContainer.value === "boolean")) return guardedBindingPrevious;
+			return guardedBindingPrevious = !isContainer.value;
+		});
+		let guardedBinding2Previous;
+		const guardedBinding2 = computed(() => {
+			if (!((internalExpanded.value == null || typeof internalExpanded.value === "boolean") && (isContainer.value == null || typeof isContainer.value === "boolean"))) return guardedBinding2Previous;
+			return guardedBinding2Previous = !(isContainer.value && internalExpanded.value);
+		});
+		provide("html-next:ui-tree-item:internalExpanded", internalExpanded);
+		provide("html-next:ui-tree-item:structuralLevel", structuralLevel);
+		provide("html-next:ui-tree-item:tabStop", tabStop);
+		provide("html-next:ui-tree-item:isContainer", isContainer);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-tree-item> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -262,12 +421,12 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-tree-item",
 				role: "treeitem"
 			}, nativeAttrs(_ctx.$attrs), {
 				"aria-label": checkedProps.value.label ?? void 0,
-				"aria-level": structuralLevel.value,
+				"aria-level": guarded.value,
 				"aria-selected": checkedProps.value.selected ?? void 0,
 				"aria-disabled": checkedProps.value.disabled ?? void 0,
 				"data-accepts": reflectedProp("accepts", "accepts", checkedProps.value.accepts, void 0, true),
@@ -341,7 +500,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						class: "disclosure",
 						type: "button",
 						disabled: checkedProps.value.disabled ?? void 0,
-						hidden: !isContainer.value,
+						hidden: guardedBinding.value,
 						ref: "disclosure"
 					}, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
 						class: "disclosure-icon",
@@ -366,16 +525,19 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				createElementVNode("div", {
 					class: "children",
 					role: "group",
-					hidden: !(isContainer.value && internalExpanded.value),
+					hidden: guardedBinding2.value,
 					ref: "children"
 				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_11),
 				_cache[3] || (_cache[3] = createElementVNode("span", {
 					class: "drop-indicator subtree-drop-indicator",
 					"aria-hidden": "true"
 				}, null, -1))
-			], 16, _hoisted_1);
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-f1e8a2e7"]]);
+}), [["__scopeId", "data-v-0e350273"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/chunks/props.js

@@ -171,17 +171,6 @@ var CSS_NAMED_COLOR_SET = /* @__PURE__ */ new Set([
 	"yellowgreen"
 ]);
 var HTML_EMAIL_PATTERN = /^[a-zA-Z0-9.!#$%&'*+/?=^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-var HtmlDiagnosticError = class extends Error {
-	diagnostic;
-	constructor(code, message) {
-		super(code + ": " + message);
-		this.name = "HtmlDiagnosticError";
-		this.diagnostic = Object.freeze({
-			code,
-			message
-		});
-	}
-};
 function issue(path, message) {
 	return {
 		ok: false,
@@ -287,7 +276,7 @@ function typeName(node) {
 			"object"
 		].includes(node.value) ? node.value : JSON.stringify(node.value);
 		case "union": return node.members.map(typeName).join(" | ");
-		case "constrained": return typeName(node.base) + " with values " + node.values.map(String).join(", ");
+		case "constrained": return typeName(node.base) + (node.values === void 0 ? "" : " with values " + node.values.map(String).join(", "));
 		case "list": return "list(" + typeName(node.item) + ")";
 		case "record": return "record(" + typeName(node.value) + ")";
 		case "object": return "object({ " + [...node.fields.map((field) => field.name + (field.optional ? "?" : "") + ": " + typeName(field.type)), ...node.open ? ["..."] : []].join(", ") + " })";
@@ -371,7 +360,10 @@ function parse(value, node, path) {
 			return issue(path, "Must match " + typeName(node) + ".");
 		case "constrained": {
 			const parsed = parse(value, node.base, path);
-			return parsed.ok && node.values.some((choice) => choice === parsed.value) ? parsed : issue(path, "Must be one of " + node.values.map(String).join(", ") + ".");
+			if (!parsed.ok) return parsed;
+			if (node.values !== void 0 && !node.values.some((choice) => choice === parsed.value)) return issue(path, "Must be one of " + node.values.map(String).join(", ") + ".");
+			const problem = boundProblem(parsed.value, node.base.kind === "terminal" ? node.base.name : "", node);
+			return problem === void 0 ? parsed : issue(path, problem);
 		}
 		case "list": {
 			const input = structured(value);
@@ -445,34 +437,278 @@ function selectedPropNode(selector, options) {
 		kind: "terminal",
 		name: "null"
 	};
-	const option = options.find((candidate) => candidate.value === selector);
-	if (option === void 0) throw new HtmlDiagnosticError("HR002", "A selecting prop has no matching type option.");
-	return option.type;
+	return options.find((candidate) => candidate.value === selector)?.type ?? {
+		kind: "terminal",
+		name: "null"
+	};
 }
-function checkedProp(value, type, required, name, pattern, values) {
-	if (value === void 0) {
-		if (required) throw new HtmlDiagnosticError("HC020", "Required prop `" + name + "` was not provided.");
-		return null;
+function comparable(value, type) {
+	if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+	if (typeof value !== "string") return void 0;
+	const date = /^([0-9]{4,})-([0-9]{2})-([0-9]{2})$/.exec(value);
+	const month = /^([0-9]{4,})-([0-9]{2})$/.exec(value);
+	const week = /^([0-9]{4,})-W([0-9]{2})$/.exec(value);
+	const time = /^([0-9]{2}):([0-9]{2})(?::([0-9]{2})(?:\.([0-9]+))?)?$/.exec(value);
+	switch (type) {
+		case "number":
+		case "integer": return Number.isFinite(Number(value)) ? Number(value) : void 0;
+		case "date": return date === null ? void 0 : Number(date[1]) * 372 + Number(date[2]) * 31 + Number(date[3]);
+		case "month": return month === null ? void 0 : Number(month[1]) * 12 + Number(month[2]);
+		case "week": return week === null ? void 0 : Number(week[1]) * 53 + Number(week[2]);
+		case "time": return time === null ? void 0 : Number(time[1]) * 3600 + Number(time[2]) * 60 + Number(time[3] ?? 0) + Number("0." + (time[4] ?? "0"));
+		case "datetime-local": {
+			const parsed = Date.parse(value.replace(" ", "T") + "Z");
+			return Number.isFinite(parsed) ? parsed : void 0;
+		}
+		case "datetime": {
+			const parsed = Date.parse(value);
+			return Number.isFinite(parsed) ? parsed : void 0;
+		}
+		default: return;
 	}
-	if (value === null) {
-		if (required) throw new HtmlDiagnosticError("HC021", "A required prop cannot be null.");
-		return null;
+}
+function boundProblem(value, type, bounds) {
+	if (value === null || value === void 0 || value === "") return void 0;
+	const actual = comparable(value, type);
+	if (actual !== void 0) {
+		const min = comparable(bounds.min, type);
+		const max = comparable(bounds.max, type);
+		if (min !== void 0 && actual < min) return "Value is below its minimum.";
+		if (max !== void 0 && actual > max) return "Value is above its maximum.";
 	}
+	if (typeof value === "string") {
+		if (bounds.minLength !== void 0 && value.length < bounds.minLength) return "Value is too short.";
+		if (bounds.maxLength !== void 0 && value.length > bounds.maxLength) return "Value is too long.";
+		if (bounds.pattern !== void 0) {
+			let expression;
+			try {
+				expression = new RegExp("^(?:" + bounds.pattern + ")$", "v");
+			} catch {
+				expression = new RegExp("^(?:" + bounds.pattern + ")$", "u");
+			}
+			if (!expression.test(value)) return "Value does not match its pattern.";
+		}
+	}
+}
+function checkedProp(value, type, _required, _name) {
+	if (value === void 0 || value === null) return null;
 	if (value === "" && type.kind === "terminal" && type.name === "boolean") value = true;
-	if (required && value === "") throw new HtmlDiagnosticError("HR002", "A required prop cannot be empty.");
 	const result = parse(value, type, "$");
-	if (!result.ok) throw new HtmlDiagnosticError("HR002", "A prop invocation value does not satisfy its declared type. " + result.issues.join("; "));
-	if (values !== void 0 && !values.some((choice) => choice === result.value)) throw new HtmlDiagnosticError("HR002", "A prop invocation value is not among its permitted values.");
-	if (pattern !== void 0 && value !== "") {
-		let expression;
-		try {
-			expression = new RegExp("^(?:" + pattern + ")$", "v");
-		} catch {
-			expression = new RegExp("^(?:" + pattern + ")$", "u");
+	return result.ok ? result.value : value;
+}
+function propValidity(binding) {
+	const errors = [];
+	for (const [name, prop] of Object.entries(binding.contract.props)) {
+		const value = binding.values[name];
+		const selected = prop.select === void 0 ? prop.type : selectedPropNode(binding.values[prop.select.from], prop.select.options);
+		if (value === null || value === void 0 || value === "") {
+			if (prop.required) errors.push({
+				reason: "valueMissing",
+				message: "This field is required.",
+				path: name
+			});
+			continue;
+		}
+		if (selected.kind === "terminal" && selected.name === "null") {
+			errors.push({
+				reason: "typeMismatch",
+				message: "No type option matches the selector.",
+				path: name
+			});
+			continue;
+		}
+		const result = parse(value, selected, name);
+		if (!result.ok) {
+			const terminal = selected.kind === "terminal" ? selected.name : "";
+			errors.push(...result.issues.map((message) => ({
+				reason: terminal === "email" || terminal === "url" ? "typeMismatch" : "badInput",
+				message,
+				path: name
+			})));
 		}
-		if (typeof value !== "string" || !expression.test(value)) throw new HtmlDiagnosticError("HR002", "A prop invocation value does not match its pattern.");
+		if (prop.values !== void 0 && !prop.values.some((choice) => choice === value)) errors.push({
+			reason: "typeMismatch",
+			message: "Value must be one of " + prop.values.map(String).join(", ") + ".",
+			path: name
+		});
+		const type = selected.kind === "terminal" ? selected.name : "";
+		const actual = comparable(value, type);
+		const min = comparable(prop.min, type);
+		const max = comparable(prop.max, type);
+		if (actual !== void 0 && min !== void 0 && actual < min) errors.push({
+			reason: "rangeUnderflow",
+			message: "Value must be at least " + prop.min + ".",
+			path: name
+		});
+		if (actual !== void 0 && max !== void 0 && actual > max) errors.push({
+			reason: "rangeOverflow",
+			message: "Value must be at most " + prop.max + ".",
+			path: name
+		});
+		if (typeof value === "string") {
+			if (prop.minLength !== void 0 && value.length < prop.minLength) errors.push({
+				reason: "tooShort",
+				message: "Use at least " + prop.minLength + " characters.",
+				path: name
+			});
+			if (prop.maxLength !== void 0 && value.length > prop.maxLength) errors.push({
+				reason: "tooLong",
+				message: "Use at most " + prop.maxLength + " characters.",
+				path: name
+			});
+			if (prop.pattern !== void 0) {
+				let pattern;
+				try {
+					pattern = new RegExp("^(?:" + prop.pattern + ")$", "v");
+				} catch {
+					try {
+						pattern = new RegExp("^(?:" + prop.pattern + ")$", "u");
+					} catch {}
+				}
+				if (pattern !== void 0 && !pattern.test(value)) errors.push({
+					reason: "patternMismatch",
+					message: "Value does not match the required format.",
+					path: name
+				});
+			}
+		}
+	}
+	return {
+		valid: errors.length === 0,
+		errors
+	};
+}
+var validityStates = /* @__PURE__ */ new WeakMap();
+var ariaMirrors = /* @__PURE__ */ new WeakSet();
+var REASONS = [
+	"valueMissing",
+	"typeMismatch",
+	"patternMismatch",
+	"tooLong",
+	"tooShort",
+	"rangeUnderflow",
+	"rangeOverflow",
+	"stepMismatch",
+	"badInput",
+	"customError",
+	"schemaMismatch",
+	"untrustedValue"
+];
+function reflectValidity(el, state) {
+	const errors = [...state.validity.errors, ...state.external];
+	const valid = errors.length === 0;
+	if ([
+		"button",
+		"fieldset",
+		"input",
+		"object",
+		"output",
+		"select",
+		"textarea"
+	].includes(el.localName) && "setCustomValidity" in el && typeof el.setCustomValidity === "function") {
+		el.setCustomValidity(valid ? "" : errors[0].message);
+		return;
 	}
-	return result.value;
+	el.toggleAttribute("data-valid", valid);
+	el.toggleAttribute("data-invalid", !valid);
+	el.toggleAttribute("data-user-invalid", state.interacted && !valid);
+	if (valid) {
+		if (ariaMirrors.has(el)) {
+			el.removeAttribute("aria-invalid");
+			ariaMirrors.delete(el);
+		}
+	} else if (!el.hasAttribute("aria-invalid") || ariaMirrors.has(el)) {
+		el.setAttribute("aria-invalid", "true");
+		ariaMirrors.add(el);
+	}
+}
+function validityState(state) {
+	const errors = [...state.validity.errors, ...state.external];
+	const reasons = new Set(errors.map((error) => error.reason));
+	return Object.freeze({
+		valid: errors.length === 0,
+		...Object.fromEntries(REASONS.map((reason) => [reason, reasons.has(reason)])),
+		errors
+	});
 }
+var vPropValidity = {
+	mounted(el, binding) {
+		const state = {
+			current: binding.value,
+			validity: propValidity(binding.value),
+			external: [],
+			interacted: false,
+			cleanup: () => {}
+		};
+		validityStates.set(el, state);
+		if (!("validity" in el)) {
+			const target = el;
+			Object.defineProperties(target, {
+				validity: {
+					configurable: true,
+					get: () => validityState(state)
+				},
+				validationMessage: {
+					configurable: true,
+					get: () => validityState(state).errors[0]?.message ?? ""
+				},
+				willValidate: {
+					configurable: true,
+					get: () => true
+				},
+				checkValidity: {
+					configurable: true,
+					value: () => {
+						const valid = validityState(state).valid;
+						if (!valid) el.dispatchEvent(new Event("invalid", { cancelable: true }));
+						return valid;
+					}
+				},
+				reportValidity: {
+					configurable: true,
+					value: () => {
+						state.interacted = true;
+						reflectValidity(el, state);
+						return target.checkValidity();
+					}
+				},
+				setCustomValidity: {
+					configurable: true,
+					value: (message) => {
+						state.external = message === "" ? [] : [{
+							reason: "customError",
+							message
+						}];
+						reflectValidity(el, state);
+					}
+				}
+			});
+		}
+		const interacted = () => {
+			state.interacted = true;
+			reflectValidity(el, state);
+		};
+		el.addEventListener("input", interacted);
+		el.addEventListener("change", interacted);
+		el.addEventListener("blur", interacted, true);
+		state.cleanup = () => {
+			el.removeEventListener("input", interacted);
+			el.removeEventListener("change", interacted);
+			el.removeEventListener("blur", interacted, true);
+		};
+		reflectValidity(el, state);
+	},
+	updated(el, binding) {
+		const state = validityStates.get(el);
+		if (state === void 0) return;
+		state.current = binding.value;
+		state.validity = propValidity(state.current);
+		reflectValidity(el, state);
+	},
+	unmounted(el) {
+		validityStates.get(el)?.cleanup();
+		validityStates.delete(el);
+	}
+};
 //#endregion
-export { selectedPropNode as n, checkedProp as t };
+export { selectedPropNode as n, vPropValidity as r, checkedProp as t };