@threadlabs/looma 0.22.9 → 0.22.10

package/vue/chunks/UiTextarea.js

@@ -1,6 +1,6 @@
 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 { r as vPropValidity, t as checkedProp } from "./props.js";
+import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
 import { n as readBoundControl, r as vBindControl } from "./control.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiTextarea.vue?vue&type=script&setup=true&lang.ts
@@ -149,43 +149,53 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}
 		} };
 		const props = __props;
+		const acceptedProps = {
+			autosize: false,
+			disabled: false,
+			invalid: false,
+			readonly: false,
+			required: false,
+			rows: 4,
+			size: "md",
+			value: null
+		};
 		const checkedProps = computed(() => ({
 			autosize: checkedProp(props["autosize"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "autosize"),
+			}, false, "autosize", acceptedProps),
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled"),
+			}, false, "disabled", acceptedProps),
 			invalid: checkedProp(props["invalid"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "invalid"),
+			}, false, "invalid", acceptedProps),
 			readonly: checkedProp(props["readonly"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "readonly"),
+			}, false, "readonly", acceptedProps),
 			required: checkedProp(props["required"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "required"),
+			}, false, "required", acceptedProps),
 			rows: checkedProp(props["rows"], {
 				kind: "terminal",
 				name: "integer"
-			}, false, "rows"),
+			}, false, "rows", acceptedProps),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size"),
+			}, false, "size", acceptedProps),
 			value: checkedProp(props["value"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "value"),
+			}, false, "value", acceptedProps),
 			modelValue: checkedProp(props.modelValue, {
 				kind: "terminal",
 				name: "string"
-			}, false, "modelValue")
+			}, false, "modelValue", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -232,7 +242,26 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				specifier: "../components/ui-textarea/ui-textarea.js",
 				definition: "./components/ui-textarea/ui-textarea.html"
 			},
-			props: checkedProps
+			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: [
+				"autosize",
+				"disabled",
+				"invalid",
+				"readonly",
+				"required",
+				"rows",
+				"size",
+				"value"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name)
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("textarea", mergeProps({ "data-component": "ui-textarea" }, nativeAttrs(_ctx.$attrs), {
@@ -256,7 +285,7 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				ref: root
 			}), null, 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
-				values: { ...checkedProps.value }
+				values: { ...props }
 			}], [unref(vBindControl), {
 				tag: "textarea",
 				name: "value",
@@ -265,6 +294,6 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-3c4cc7d8"]]);
+}), [["__scopeId", "data-v-80fd27c3"]]);
 //#endregion
 export { UiTextarea_default as t };

package/vue/chunks/UiToast.js

@@ -1,6 +1,6 @@
 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 { r as vPropValidity, t as checkedProp } from "./props.js";
+import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiIconButton_default } from "./UiIconButton.js";
 import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
@@ -63,15 +63,19 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}
 		} };
 		const props = __props;
+		const acceptedProps = {
+			duration: 0,
+			tone: "neutral"
+		};
 		const checkedProps = computed(() => ({
 			duration: checkedProp(props["duration"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "duration"),
+			}, false, "duration", acceptedProps),
 			tone: checkedProp(props["tone"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "tone")
+			}, false, "tone", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -117,6 +121,16 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				definition: "./components/ui-toast/ui-toast.html"
 			},
 			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: ["duration", "tone"],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name),
 			refs: { action: actionElement }
 		});
 		function text(value) {
@@ -156,10 +170,10 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				})
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
-				values: { ...checkedProps.value }
+				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-25a15b35"]]);
+}), [["__scopeId", "data-v-c2203cd3"]]);
 //#endregion
 export { UiToast_default as t };

package/vue/chunks/UiToastRegion.js

@@ -1,6 +1,6 @@
 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 { r as vPropValidity, t as checkedProp } from "./props.js";
+import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiIconButton_default } from "./UiIconButton.js";
 import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, normalizeClass, openBlock, provide, ref, renderList, renderSlot, toDisplayString, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
@@ -65,15 +65,19 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}
 		} };
 		const props = __props;
+		const acceptedProps = {
+			duration: 0,
+			placement: "top"
+		};
 		const checkedProps = computed(() => ({
 			duration: checkedProp(props["duration"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "duration"),
+			}, false, "duration", acceptedProps),
 			placement: checkedProp(props["placement"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "placement")
+			}, false, "placement", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -144,6 +148,16 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				definition: "./components/ui-toast-region/ui-toast-region.html"
 			},
 			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: ["duration", "placement"],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name),
 			state: { toasts }
 		});
 		__expose({ show: async (...args) => {
@@ -223,10 +237,10 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				_: 1
 			})], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
-				values: { ...checkedProps.value }
+				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fef309f3"]]);
+}), [["__scopeId", "data-v-3a5d9920"]]);
 //#endregion
 export { UiToastRegion_default as t };

package/vue/chunks/UiTooltip.js

@@ -1,6 +1,6 @@
 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 { r as vPropValidity, t as checkedProp } from "./props.js";
+import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiTooltip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -150,35 +150,44 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}
 		} };
 		const props = __props;
+		const acceptedProps = {
+			for: "",
+			hideDelay: 100,
+			inverse: false,
+			open: false,
+			placement: "top",
+			showDelay: 500,
+			trigger: "hover"
+		};
 		const checkedProps = computed(() => ({
 			for: checkedProp(props["for"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "for"),
+			}, false, "for", acceptedProps),
 			hideDelay: checkedProp(props["hideDelay"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "hideDelay"),
+			}, false, "hideDelay", acceptedProps),
 			inverse: checkedProp(props["inverse"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "inverse"),
+			}, false, "inverse", acceptedProps),
 			open: checkedProp(props["open"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "open"),
+			}, false, "open", acceptedProps),
 			placement: checkedProp(props["placement"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "placement"),
+			}, false, "placement", acceptedProps),
 			showDelay: checkedProp(props["showDelay"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "showDelay"),
+			}, false, "showDelay", acceptedProps),
 			trigger: checkedProp(props["trigger"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "trigger")
+			}, false, "trigger", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -236,6 +245,24 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				definition: "./components/ui-tooltip/ui-tooltip.html"
 			},
 			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: [
+				"for",
+				"hideDelay",
+				"inverse",
+				"open",
+				"placement",
+				"showDelay",
+				"trigger"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name),
 			state: { internalOpen }
 		});
 		return (_ctx, _cache) => {
@@ -256,10 +283,10 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				ref: root
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default"), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "shortcut")])])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
-				values: { ...checkedProps.value }
+				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-07f66486"]]);
+}), [["__scopeId", "data-v-56fb49c0"]]);
 //#endregion
 export { UiTooltip_default as t };

package/vue/chunks/UiTopBar.js

@@ -33,6 +33,6 @@ var UiTopBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-de062241"]]);
+}), [["__scopeId", "data-v-e4d0ab3d"]]);
 //#endregion
 export { UiTopBar_default as t };

package/vue/chunks/UiTree.js

@@ -1,6 +1,6 @@
 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 { r as vPropValidity, t as checkedProp } from "./props.js";
+import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiTree.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -119,31 +119,39 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}
 		} };
 		const props = __props;
+		const acceptedProps = {
+			density: "comfortable",
+			hoverExpandDelay: 700,
+			label: "Tree",
+			marquee: false,
+			maxDepth: 0,
+			selection: "none"
+		};
 		const checkedProps = computed(() => ({
 			density: checkedProp(props["density"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "density"),
+			}, false, "density", acceptedProps),
 			hoverExpandDelay: checkedProp(props["hoverExpandDelay"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "hoverExpandDelay"),
+			}, false, "hoverExpandDelay", acceptedProps),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label"),
+			}, false, "label", acceptedProps),
 			marquee: checkedProp(props["marquee"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "marquee"),
+			}, false, "marquee", acceptedProps),
 			maxDepth: checkedProp(props["maxDepth"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "maxDepth"),
+			}, false, "maxDepth", acceptedProps),
 			selection: checkedProp(props["selection"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "selection")
+			}, false, "selection", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -213,7 +221,24 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				specifier: "../components/ui-tree/ui-tree.js",
 				definition: "./components/ui-tree/ui-tree.html"
 			},
-			props: checkedProps
+			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: [
+				"density",
+				"hoverExpandDelay",
+				"label",
+				"marquee",
+				"maxDepth",
+				"selection"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name)
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({
@@ -231,10 +256,10 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
-				values: { ...checkedProps.value }
+				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ed8eac91"]]);
+}), [["__scopeId", "data-v-ee69a15a"]]);
 //#endregion
 export { UiTree_default as t };

package/vue/chunks/UiTreeItem.js

@@ -1,6 +1,6 @@
 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 { r as vPropValidity, t as checkedProp } from "./props.js";
+import { i as vPropValidity, n as propValidityState, 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 = [
@@ -259,63 +259,79 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}
 		} };
 		const props = __props;
+		const acceptedProps = {
+			accepts: "",
+			container: false,
+			disabled: false,
+			dragType: "item",
+			dropDepth: null,
+			dropScope: "",
+			expanded: false,
+			itemId: "",
+			label: "",
+			lazy: false,
+			marquee: false,
+			selected: false,
+			sortable: false,
+			subtreeDepth: null
+		};
 		const checkedProps = computed(() => ({
 			accepts: checkedProp(props["accepts"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "accepts"),
+			}, false, "accepts", acceptedProps),
 			container: checkedProp(props["container"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "container"),
+			}, false, "container", acceptedProps),
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled"),
+			}, false, "disabled", acceptedProps),
 			dragType: checkedProp(props["dragType"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "dragType"),
+			}, false, "dragType", acceptedProps),
 			dropDepth: checkedProp(props["dropDepth"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "dropDepth"),
+			}, false, "dropDepth", acceptedProps),
 			dropScope: checkedProp(props["dropScope"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "dropScope"),
+			}, false, "dropScope", acceptedProps),
 			expanded: checkedProp(props["expanded"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "expanded"),
+			}, false, "expanded", acceptedProps),
 			itemId: checkedProp(props["itemId"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "itemId"),
+			}, false, "itemId", acceptedProps),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label"),
+			}, false, "label", acceptedProps),
 			lazy: checkedProp(props["lazy"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "lazy"),
+			}, false, "lazy", acceptedProps),
 			marquee: checkedProp(props["marquee"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "marquee"),
+			}, false, "marquee", acceptedProps),
 			selected: checkedProp(props["selected"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "selected"),
+			}, false, "selected", acceptedProps),
 			sortable: checkedProp(props["sortable"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "sortable"),
+			}, false, "sortable", acceptedProps),
 			subtreeDepth: checkedProp(props["subtreeDepth"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "subtreeDepth")
+			}, false, "subtreeDepth", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -403,6 +419,31 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				definition: "./components/ui-tree-item/ui-tree-item.html"
 			},
 			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: [
+				"accepts",
+				"container",
+				"disabled",
+				"dragType",
+				"dropDepth",
+				"dropScope",
+				"expanded",
+				"itemId",
+				"label",
+				"lazy",
+				"marquee",
+				"selected",
+				"sortable",
+				"subtreeDepth"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name),
 			refs: {
 				row: rowElement,
 				dragHandle: dragHandleElement,
@@ -534,10 +575,10 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				}, null, -1))
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
-				values: { ...checkedProps.value }
+				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b4babb28"]]);
+}), [["__scopeId", "data-v-cec2ae88"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/chunks/host.js

@@ -66,7 +66,7 @@ function slottedElements(nodes) {
 * and reinsertion without treating an in-tree move as a new connection.
 */
 function useComponentHost(controllerLoader, options) {
-	const { root, dispatch, props, refs = {}, state = {}, computed: computedValues = {} } = options;
+	const { root, dispatch, props, propInputs = () => null, propNames = [], refs = {}, state = {}, computed: computedValues = {}, data = {}, context = {} } = options;
 	const vueSlots = useSlots();
 	const component = getCurrentInstance();
 	const report = (error) => {
@@ -99,7 +99,23 @@ function useComponentHost(controllerLoader, options) {
 		throw controllerDiagnostic("HJ001", error);
 	});
 	const stops = [];
-	const read = (name) => Object.hasOwn(state, name) ? state[name].value : Object.hasOwn(computedValues, name) ? computedValues[name].value : props?.value[name];
+	const readState = (name) => Object.hasOwn(state, name) ? state[name].value : Object.hasOwn(computedValues, name) ? computedValues[name].value : Object.hasOwn(data, name) ? data[name].value : Object.hasOwn(context, name) ? context[name].value : void 0;
+	const propHandles = Object.create(null);
+	for (const name of propNames) {
+		const validity = () => options.propValidity?.(name);
+		propHandles[name] = Object.freeze({
+			get value() {
+				return props?.value[name];
+			},
+			get inputValue() {
+				return propInputs(name);
+			},
+			get validity() {
+				return validity();
+			},
+			validate: validity
+		});
+	}
 	const host = {
 		get element() {
 			return root.value;
@@ -108,13 +124,15 @@ function useComponentHost(controllerLoader, options) {
 			return root.value;
 		},
 		state: new Proxy({}, {
-			get: (_target, name) => typeof name === "string" ? read(name) : void 0,
+			get: (_target, name) => typeof name === "string" ? readState(name) : void 0,
 			set: (_target, name, value) => {
 				if (typeof name !== "string" || !Object.hasOwn(state, name)) throw new TypeError(`Only declared state is writable; \`${String(name)}\` is not.`);
 				state[name].value = value;
 				return true;
-			}
+			},
+			has: (_target, name) => typeof name === "string" && (Object.hasOwn(state, name) || Object.hasOwn(computedValues, name) || Object.hasOwn(data, name) || Object.hasOwn(context, name))
 		}),
+		props: Object.freeze(propHandles),
 		refs: Object.defineProperties({}, Object.fromEntries(Object.entries(refs).map(([name, ref]) => [name, {
 			enumerable: true,
 			get: () => Array.isArray(ref.value) ? inDocumentOrder(ref.value) : ref.value