@threadlabs/looma 0.19.0 → 0.20.0

package/vue/chunks/UiTree.js

@@ -1,24 +1,47 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-tree/ui-tree.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiTree.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-tree-state"];
+var _hoisted_1 = [
+	"data-density",
+	"data-hover-expand-delay",
+	"data-label",
+	"data-marquee",
+	"data-max-depth",
+	"data-selection",
+	"data-ui-tree-state"
+];
 //#endregion
 //#region .build/vue/UiTree.vue
 var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiTree",
 	props: {
-		density: { default: "comfortable" },
-		hoverExpandDelay: { default: 700 },
-		label: { default: "Tree" },
+		density: {
+			type: null,
+			default: "comfortable"
+		},
+		hoverExpandDelay: {
+			type: null,
+			default: 700
+		},
+		label: {
+			type: null,
+			default: "Tree"
+		},
 		marquee: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		maxDepth: { default: 0 },
-		selection: { default: "none" }
+		maxDepth: {
+			type: null,
+			default: 0
+		},
+		selection: {
+			type: null,
+			default: "none"
+		}
 	},
 	emits: [
 		"update:maxDepth",
@@ -28,10 +51,69 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			density: checkedProp(props["density"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "density", void 0, ["comfortable", "compact"]),
+			hoverExpandDelay: checkedProp(props["hoverExpandDelay"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "hoverExpandDelay", void 0, void 0),
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", void 0, void 0),
+			marquee: checkedProp(props["marquee"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "marquee", void 0, void 0),
+			maxDepth: checkedProp(props["maxDepth"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "maxDepth", void 0, void 0),
+			selection: checkedProp(props["selection"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "selection", void 0, [
+				"none",
+				"single",
+				"multiple"
+			])
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
+		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> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-tree> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.marquee && "marquee", props.density && `density density=${props.density}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			checkedProps.value.marquee && "marquee",
+			checkedProps.value.density && "density",
+			checkedProps.value.density != null && `density=${encodeURIComponent(checkedProps.value.density)}`
+		].filter(Boolean).join(" "));
 		const isReorderDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["sourceId"] === "string" && typeof detail["targetId"] === "string" && (detail["position"] === "before" || detail["position"] === "inside" || detail["position"] === "after") && typeof detail["sourceType"] === "string" && typeof detail["targetType"] === "string" && typeof detail["sourceScope"] === "string" && typeof detail["targetScope"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"sourceId",
 			"targetId",
@@ -60,22 +142,32 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			},
 			modeled: ["maxDepth"]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-tree/ui-tree.js"), {
 			root,
 			dispatch,
-			props
+			controllerSource: {
+				specifier: "../components/ui-tree/ui-tree.js",
+				definition: "./components/ui-tree/ui-tree.html"
+			},
+			props: checkedProps
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-tree",
 				role: "tree"
-			}, _ctx.$attrs, {
+			}, nativeAttrs(_ctx.$attrs), {
+				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
+				"data-hover-expand-delay": reflectedProp("hoverExpandDelay", "hover-expand-delay", checkedProps.value.hoverExpandDelay, void 0, false),
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
+				"data-marquee": reflectedProp("marquee", "marquee", checkedProps.value.marquee, void 0, false),
+				"data-max-depth": reflectedProp("maxDepth", "max-depth", checkedProps.value.maxDepth, void 0, false),
+				"data-selection": reflectedProp("selection", "selection", checkedProps.value.selection, void 0, false),
 				"data-ui-tree-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3dab8614"]]);
+}), [["__scopeId", "data-v-6c11562f"]]);
 //#endregion
 export { UiTree_default as t };

package/vue/chunks/UiTreeItem.js

@@ -1,18 +1,26 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-tree-item/ui-tree-item.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";
 //#region .build/vue/UiTreeItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-label",
 	"aria-level",
 	"aria-selected",
 	"aria-disabled",
-	"data-item-id",
-	"data-drag-type",
-	"data-drop-scope",
 	"data-accepts",
+	"data-container",
+	"data-disabled",
+	"data-drag-type",
 	"data-drop-depth",
+	"data-drop-scope",
+	"data-expanded",
+	"data-item-id",
+	"data-label",
+	"data-lazy",
+	"data-marquee",
+	"data-selected",
+	"data-sortable",
 	"data-subtree-depth",
 	"data-ui-tree-item-state"
 ];
@@ -24,7 +32,7 @@ var _hoisted_3 = ["aria-label"];
 var _hoisted_4 = ["disabled", "hidden"];
 var _hoisted_5 = { class: "selection-hit" };
 var _hoisted_6 = [
-	"checked",
+	"^checked",
 	"disabled",
 	"aria-label"
 ];
@@ -51,45 +59,141 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	inheritAttrs: false,
 	__name: "UiTreeItem",
 	props: {
-		accepts: { default: "" },
+		accepts: {
+			type: null,
+			default: ""
+		},
 		container: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		dragType: { default: "item" },
-		dropDepth: {},
-		dropScope: { default: "" },
+		dragType: {
+			type: null,
+			default: "item"
+		},
+		dropDepth: {
+			type: null,
+			default: null
+		},
+		dropScope: {
+			type: null,
+			default: ""
+		},
 		expanded: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		itemId: { default: "" },
-		label: { default: "" },
+		itemId: {
+			type: null,
+			default: ""
+		},
+		label: {
+			type: null,
+			default: ""
+		},
 		lazy: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		marquee: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		selected: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		sortable: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		subtreeDepth: {}
+		subtreeDepth: {
+			type: null,
+			default: null
+		}
 	},
 	emits: ["update:expanded", "expand"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			accepts: checkedProp(props["accepts"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "accepts", void 0, void 0),
+			container: checkedProp(props["container"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "container", void 0, void 0),
+			disabled: checkedProp(props["disabled"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "disabled", void 0, void 0),
+			dragType: checkedProp(props["dragType"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "dragType", void 0, void 0),
+			dropDepth: checkedProp(props["dropDepth"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "dropDepth", void 0, void 0),
+			dropScope: checkedProp(props["dropScope"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "dropScope", void 0, void 0),
+			expanded: checkedProp(props["expanded"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "expanded", void 0, void 0),
+			itemId: checkedProp(props["itemId"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "itemId", void 0, void 0),
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", void 0, void 0),
+			lazy: checkedProp(props["lazy"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "lazy", void 0, void 0),
+			marquee: checkedProp(props["marquee"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "marquee", void 0, void 0),
+			selected: checkedProp(props["selected"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "selected", void 0, void 0),
+			sortable: checkedProp(props["sortable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "sortable", void 0, void 0),
+			subtreeDepth: checkedProp(props["subtreeDepth"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "subtreeDepth", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
 		const rowElement = useTemplateRef("row");
@@ -104,10 +208,18 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const structuralLevel = ref(1);
 		const tabStop = ref(false);
 		const isContainer = ref(false);
+		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",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-tree-item> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.selected && "selected",
-			props.disabled && "disabled",
+			checkedProps.value.selected && "selected",
+			checkedProps.value.disabled && "disabled",
 			isContainer.value && "isContainer"
 		].filter(Boolean).join(" "));
 		const isExpandDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && typeof detail["expanded"] === "boolean" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
@@ -124,10 +236,14 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checks: { expand: isExpandDetail },
 			modeled: ["expanded"]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-tree-item/ui-tree-item.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-tree-item/ui-tree-item.js",
+				definition: "./components/ui-tree-item/ui-tree-item.html"
+			},
+			props: checkedProps,
 			refs: {
 				row: rowElement,
 				dragHandle: dragHandleElement,
@@ -149,28 +265,36 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-tree-item",
 				role: "treeitem"
-			}, _ctx.$attrs, {
-				"aria-label": __props.label,
+			}, nativeAttrs(_ctx.$attrs), {
+				"aria-label": checkedProps.value.label ?? void 0,
 				"aria-level": structuralLevel.value,
-				"aria-selected": __props.selected,
-				"aria-disabled": __props.disabled,
-				"data-item-id": __props.itemId,
-				"data-drag-type": __props.dragType,
-				"data-drop-scope": __props.dropScope,
-				"data-accepts": __props.accepts,
-				"data-drop-depth": __props.dropDepth,
-				"data-subtree-depth": __props.subtreeDepth,
+				"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),
+				"data-container": reflectedProp("container", "container", checkedProps.value.container, void 0, false),
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-drag-type": reflectedProp("dragType", "drag-type", checkedProps.value.dragType, void 0, true),
+				"data-drop-depth": reflectedProp("dropDepth", "drop-depth", checkedProps.value.dropDepth, void 0, true),
+				"data-drop-scope": reflectedProp("dropScope", "drop-scope", checkedProps.value.dropScope, void 0, true),
+				"data-expanded": reflectedProp("expanded", "expanded", checkedProps.value.expanded, void 0, false),
+				"data-item-id": reflectedProp("itemId", "item-id", checkedProps.value.itemId, void 0, true),
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
+				"data-lazy": reflectedProp("lazy", "lazy", checkedProps.value.lazy, void 0, false),
+				"data-marquee": reflectedProp("marquee", "marquee", checkedProps.value.marquee, void 0, false),
+				"data-selected": reflectedProp("selected", "selected", checkedProps.value.selected, void 0, false),
+				"data-sortable": reflectedProp("sortable", "sortable", checkedProps.value.sortable, void 0, false),
+				"data-subtree-depth": reflectedProp("subtreeDepth", "subtree-depth", checkedProps.value.subtreeDepth, void 0, true),
 				"data-ui-tree-item-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [
 				createElementVNode("div", _hoisted_2, [
-					__props.sortable && !__props.disabled ? (openBlock(), createElementBlock("button", {
+					checkedProps.value.sortable && !checkedProps.value.disabled ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						class: "drag-handle",
 						type: "button",
 						draggable: "true",
-						"aria-label": `Drag ${__props.label} to reorder`,
+						"aria-label": `Drag ${checkedProps.value.label ?? ""} to reorder`,
 						ref: "dragHandle"
 					}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
 						"aria-hidden": "true",
@@ -216,7 +340,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					createElementVNode("button", {
 						class: "disclosure",
 						type: "button",
-						disabled: __props.disabled,
+						disabled: checkedProps.value.disabled ?? void 0,
 						hidden: !isContainer.value,
 						ref: "disclosure"
 					}, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
@@ -227,12 +351,12 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						class: "selection-checkbox",
 						type: "checkbox",
 						tabindex: "-1",
-						checked: __props.selected,
-						disabled: __props.disabled,
-						"aria-label": `Select ${__props.label}`
+						"^checked": checkedProps.value.selected ? true : void 0,
+						disabled: checkedProps.value.disabled ?? void 0,
+						"aria-label": `Select ${checkedProps.value.label ?? ""}`
 					}, null, 8, _hoisted_6)]),
 					createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "leading")], 512),
-					createElementVNode("span", _hoisted_8, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 512)], 512),
+					createElementVNode("span", _hoisted_8, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(checkedProps.value.label), 1)])], 512)], 512),
 					createElementVNode("span", _hoisted_10, [renderSlot(_ctx.$slots, "actions")], 512),
 					_cache[2] || (_cache[2] = createElementVNode("span", {
 						class: "drop-indicator row-drop-indicator",
@@ -252,6 +376,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-78d948f0"]]);
+}), [["__scopeId", "data-v-9978c0fb"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/chunks/control.js

@@ -0,0 +1,171 @@
+import { Fragment, cloneVNode, createVNode, defineComponent, onMounted, onUpdated } from "vue";
+//#region .build/vue/control.ts
+var connectedControls = /* @__PURE__ */ new WeakSet();
+var boundValues = /* @__PURE__ */ new WeakMap();
+var selectOptions = /* @__PURE__ */ new WeakMap();
+var selectBindings = /* @__PURE__ */ new WeakMap();
+var selectObservers = /* @__PURE__ */ new WeakMap();
+function currentOptions(element) {
+	return Array.from(element.options, (option) => [option, option.value]);
+}
+function optionsChanged(element) {
+	const previous = selectOptions.get(element);
+	const next = currentOptions(element);
+	selectOptions.set(element, next);
+	return previous !== void 0 && (previous.length !== next.length || next.some(([option, value], index) => previous[index]?.[0] !== option || previous[index]?.[1] !== value));
+}
+function sameValue(left, right) {
+	if (Object.is(left, right)) return true;
+	if (Array.isArray(left) && Array.isArray(right)) return left.length === right.length && left.every((value, index) => Object.is(value, right[index]));
+	return false;
+}
+function snapshotValue(value) {
+	return Array.isArray(value) ? [...value] : value;
+}
+function writeBoundControl(element, binding) {
+	const value = binding.value;
+	if (binding.name === "checked" && element instanceof HTMLInputElement) {
+		const next = Boolean(value);
+		if (element.checked !== next) element.checked = next;
+	} else if (element instanceof HTMLSelectElement && element.multiple && !binding.nativeProperty) {
+		const selected = new Set(Array.isArray(value) ? value.map(String) : []);
+		for (const option of Array.from(element.options)) {
+			const next = selected.has(option.value);
+			if (option.selected !== next) option.selected = next;
+		}
+	} else {
+		if (element instanceof HTMLInputElement && (element.type === "number" || element.type === "range")) {
+			if (typeof value === "number" && element.valueAsNumber === value) return;
+			if (value == null && element.value === "") return;
+		}
+		const next = binding.nativeProperty ? String(value) : value == null ? "" : String(value);
+		if (element.value !== next) element.value = next;
+	}
+}
+/** SSR must not turn a live property binding into a new native form-reset default. */
+function restoreDefault(element, binding) {
+	if (element instanceof HTMLInputElement && binding.name === "checked") {
+		const current = element.checked;
+		element.checked = current;
+		element.defaultChecked = binding.defaultChecked ?? false;
+		element.checked = current;
+	} else if (!(element instanceof HTMLSelectElement)) {
+		const current = element.value;
+		element.value = current;
+		element.defaultValue = binding.defaultValue ?? "";
+		element.value = current;
+	}
+}
+function optionText(node) {
+	if (typeof node.children === "string") return node.children;
+	if (Array.isArray(node.children)) return node.children.map((child) => typeof child === "string" ? child : optionText(child)).join("");
+	return "";
+}
+function selectChildren(nodes, selected, defaults) {
+	if (!Array.isArray(nodes)) return nodes;
+	return nodes.map((child) => {
+		if (child.type === "option") {
+			const value = child.props?.value ?? optionText(child).replace(/\s+/g, " ").trim();
+			const copy = cloneVNode(child, { selected: selected.has(String(value)) });
+			defaults.push([copy, child.props !== null && Object.hasOwn(child.props, "selected") && child.props.selected !== false && child.props.selected !== null && child.props.selected !== void 0]);
+			return copy;
+		}
+		if (child.type === "optgroup" || child.type === Fragment) {
+			const copy = cloneVNode(child);
+			copy.children = selectChildren(child.children, selected, defaults);
+			return copy;
+		}
+		return child;
+	});
+}
+/** Render options through Vue VNodes so slotted options receive SSR selection too. */
+var SelectedOptions = defineComponent({
+	name: "SelectedOptions",
+	props: {
+		value: { type: null },
+		multiple: Boolean,
+		nativeProperty: Boolean
+	},
+	setup(props, { slots }) {
+		let defaults = [];
+		const restoreDefaults = () => {
+			const options = defaults.flatMap(([node, original]) => node.el instanceof HTMLOptionElement ? [{
+				option: node.el,
+				original,
+				selected: node.el.selected
+			}] : []);
+			for (const { option, original } of options) option.defaultSelected = original;
+			for (const { option, selected } of options) if (!selected) option.selected = false;
+			for (const { option, selected } of options) if (selected) option.selected = true;
+		};
+		onMounted(restoreDefaults);
+		onUpdated(restoreDefaults);
+		return () => {
+			const values = props.nativeProperty ? [String(props.value)] : props.multiple ? Array.isArray(props.value) ? props.value.map(String) : [] : [props.value == null ? "" : String(props.value)];
+			defaults = [];
+			return createVNode(Fragment, null, selectChildren(slots.default?.() ?? [], new Set(values), defaults));
+		};
+	}
+});
+/** Vue reactivity drives this directive; native controls own their edited value until state changes. */
+var vBindControl = {
+	deep: true,
+	getSSRProps(binding) {
+		const { tag, name, value, nativeProperty } = binding.value;
+		if (name === "checked") return { checked: Boolean(value) };
+		if (tag === "input" || tag === "textarea") return { value: nativeProperty ? String(value) : value == null ? "" : String(value) };
+	},
+	created(element) {
+		if (element.isConnected) connectedControls.add(element);
+	},
+	mounted(element, binding) {
+		boundValues.set(element, snapshotValue(binding.value.value));
+		if (!connectedControls.has(element)) writeBoundControl(element, binding.value);
+		restoreDefault(element, binding.value);
+		connectedControls.delete(element);
+		if (element instanceof HTMLSelectElement) {
+			selectBindings.set(element, binding.value);
+			selectOptions.set(element, currentOptions(element));
+			const observer = new MutationObserver(() => {
+				const current = selectBindings.get(element);
+				if (current !== void 0 && optionsChanged(element)) writeBoundControl(element, current);
+			});
+			observer.observe(element, {
+				childList: true,
+				subtree: true,
+				characterData: true,
+				attributes: true,
+				attributeFilter: ["value"]
+			});
+			selectObservers.set(element, observer);
+		}
+	},
+	updated(element, binding) {
+		const previous = boundValues.get(element);
+		if (element instanceof HTMLSelectElement) selectBindings.set(element, binding.value);
+		if (!sameValue(previous, binding.value.value)) {
+			writeBoundControl(element, binding.value);
+			boundValues.set(element, snapshotValue(binding.value.value));
+		}
+	},
+	beforeUnmount(element) {
+		boundValues.delete(element);
+		connectedControls.delete(element);
+		if (element instanceof HTMLSelectElement) {
+			selectOptions.delete(element);
+			selectBindings.delete(element);
+			selectObservers.get(element)?.disconnect();
+			selectObservers.delete(element);
+		}
+	}
+};
+function readBoundControl(element) {
+	if (element instanceof HTMLInputElement) {
+		if (element.type === "checkbox" || element.type === "radio") return element.checked;
+		if (element.type === "number" || element.type === "range") return Number.isNaN(element.valueAsNumber) ? null : element.valueAsNumber;
+	}
+	if (element instanceof HTMLSelectElement && element.multiple) return Array.from(element.selectedOptions, (option) => option.value);
+	return element.value;
+}
+//#endregion
+export { readBoundControl as n, vBindControl as r, SelectedOptions as t };