@threadlabs/looma 0.24.0 → 0.25.0

package/vue/chunks/UiText.js

@@ -1,6 +1,6 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as preserveRootFocus } from "./host.js";
-import { i as vPropValidity, t as checkedProp } from "./props.js";
+import { a as vPropValidity, n as checkedProp } from "./props.js";
 import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiText.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -612,6 +612,6 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-5c4eb9b4"]]);
+}), [["__scopeId", "data-v-d830471c"]]);
 //#endregion
 export { UiText_default as t };

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 { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState } 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
@@ -290,10 +290,11 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				tag: "textarea",
 				name: "value",
 				value: model.value,
+				optionalValue: true,
 				defaultValue: ""
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-10c76c4f"]]);
+}), [["__scopeId", "data-v-ce29cce2"]]);
 //#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 { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState } 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";
@@ -12,10 +12,6 @@ var _hoisted_1 = [
 	"data-ui-toast-state"
 ];
 var _hoisted_2 = { class: "message" };
-var _hoisted_3 = {
-	class: "action",
-	ref: "action"
-};
 //#endregion
 //#region .build/vue/UiToast.vue
 var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -96,7 +92,7 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
-		const actionElement = useTemplateRef("action");
+		const actionElement = useTemplateRef("actionElement");
 		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-toast> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -157,7 +153,11 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				ref: root
 			}), [
 				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
-				createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "action", {}, void 0, true)], 512),
+				createElementVNode("div", {
+					class: "action",
+					ref_key: "actionElement",
+					ref: actionElement
+				}, [renderSlot(_ctx.$slots, "action", {}, void 0, true)], 512),
 				createVNode(UiIconButton_default, {
 					class: "dismiss",
 					size: "sm",
@@ -174,6 +174,6 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d15c765a"]]);
+}), [["__scopeId", "data-v-93ffe07f"]]);
 //#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 { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState, t as acceptsControllerWrite } 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";
@@ -32,8 +32,12 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			default: "top"
 		}
 	},
-	emits: ["dismiss"],
-	setup(__props, { expose: __expose, emit: __emit }) {
+	emits: [
+		"update:duration",
+		"dismiss",
+		"show-toast"
+	],
+	setup(__props, { emit: __emit }) {
 		const propValidityContract = { props: {
 			duration: {
 				type: {
@@ -42,7 +46,7 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				},
 				required: false,
 				target: { attribute: "duration" },
-				description: "Default milliseconds for toasts added with show() or the show command; 0 keeps each until dismissed. Hover or focus pauses a timer.",
+				description: "Default milliseconds for toasts added with the show-toast event or command; 0 keeps each until dismissed. Hover or focus pauses a timer.",
 				default: 0
 			},
 			placement: {
@@ -139,10 +143,85 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			"reason",
 			"trigger"
 		].includes(key));
-		const dispatch = createDispatch(root, emit, { checks: { dismiss: isDismissDetail } });
-		const { host, ready } = useComponentHost(() => import("@threadlabs/looma/components/ui-toast-region/ui-toast-region.js"), {
+		const isShowToastDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["message"] === "string" && (detail["id"] === void 0 || typeof detail["id"] === "string") && (detail["tone"] === void 0 || detail["tone"] === "neutral" || detail["tone"] === "info" || detail["tone"] === "success" || detail["tone"] === "warning" || detail["tone"] === "danger") && (detail["duration"] === void 0 || typeof detail["duration"] === "number" && Number.isFinite(detail["duration"])) && Object.keys(detail).every((key) => [
+			"message",
+			"id",
+			"tone",
+			"duration"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				dismiss: isDismissDetail,
+				"show-toast": isShowToastDetail
+			},
+			modeled: ["duration"]
+		});
+		useComponentHost(() => import("@threadlabs/looma/components/ui-toast-region/ui-toast-region.js"), {
 			root,
 			dispatch,
+			acceptsState: (name, keys, value) => acceptsControllerWrite(value, { toasts: {
+				kind: "list",
+				item: {
+					kind: "object",
+					fields: [
+						{
+							name: "id",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						},
+						{
+							name: "message",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						},
+						{
+							name: "tone",
+							type: {
+								kind: "constrained",
+								base: {
+									kind: "terminal",
+									name: "keyword"
+								},
+								values: [
+									"neutral",
+									"info",
+									"success",
+									"warning",
+									"danger"
+								]
+							},
+							optional: false
+						},
+						{
+							name: "role",
+							type: {
+								kind: "constrained",
+								base: {
+									kind: "terminal",
+									name: "keyword"
+								},
+								values: ["alert", "status"]
+							},
+							optional: false
+						},
+						{
+							name: "closing",
+							type: {
+								kind: "terminal",
+								name: "boolean"
+							},
+							optional: false
+						}
+					],
+					open: false
+				}
+			} }[name], keys),
 			controllerSource: {
 				specifier: "../components/ui-toast-region/ui-toast-region.js",
 				definition: "./components/ui-toast-region/ui-toast-region.html"
@@ -160,19 +239,6 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, name),
 			state: { toasts }
 		});
-		__expose({ show: async (...args) => {
-			const controllerModule = await ready();
-			if (controllerModule === void 0) throw new TypeError("Controller method `show` is not ready for <ui-toast-region>.");
-			const method = Reflect.get(controllerModule, "show");
-			if (typeof method !== "function") throw Object.assign(/* @__PURE__ */ new Error("HJ003: Controller does not export method `show`."), {
-				name: "HtmlDiagnosticError",
-				diagnostic: Object.freeze({
-					code: "HJ003",
-					message: "Controller does not export method `show`."
-				})
-			});
-			return method(host, ...args);
-		} });
 		function text(value) {
 			if (Array.isArray(value)) return value.map(text).join(" ");
 			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
@@ -247,6 +313,6 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-325ee136"]]);
+}), [["__scopeId", "data-v-3ac36321"]]);
 //#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 { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState, t as acceptsControllerWrite } 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 = [
@@ -16,6 +16,14 @@ var _hoisted_1 = [
 ];
 var _hoisted_2 = { class: "surface" };
 var _hoisted_3 = { class: "shortcut" };
+var htmlNextAuthoredCheck2Reported = /* @__PURE__ */ new Set();
+function htmlNextAuthoredCheck2(accepted, location, message) {
+	if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
+		htmlNextAuthoredCheck2Reported.add(location);
+		console.warn(message);
+	}
+	return accepted;
+}
 //#endregion
 //#region .build/vue/UiTooltip.vue
 var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -211,7 +219,7 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const internalOpen = ref(false);
 		let guardedPrevious;
 		const guarded = computed(() => {
-			if (!(internalOpen.value == null || typeof internalOpen.value === "boolean")) return guardedPrevious;
+			if (!htmlNextAuthoredCheck2(internalOpen.value == null || typeof internalOpen.value === "boolean", "not internalOpen:internalOpen", "./components/ui-tooltip/ui-tooltip.html: HR007: Reference internalOpen does not satisfy its declared type.")) return guardedPrevious;
 			return guardedPrevious = !internalOpen.value;
 		});
 		provide("html-next:ui-tooltip:internalOpen", internalOpen);
@@ -240,6 +248,10 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		useComponentHost(() => import("@threadlabs/looma/components/ui-tooltip/ui-tooltip.js"), {
 			root,
 			dispatch,
+			acceptsState: (name, keys, value) => acceptsControllerWrite(value, { internalOpen: {
+				kind: "terminal",
+				name: "boolean"
+			} }[name], keys),
 			controllerSource: {
 				specifier: "../components/ui-tooltip/ui-tooltip.js",
 				definition: "./components/ui-tooltip/ui-tooltip.html"
@@ -287,6 +299,6 @@ var UiTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d3ca1ab9"]]);
+}), [["__scopeId", "data-v-2b35c0b2"]]);
 //#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-048e5700"]]);
+}), [["__scopeId", "data-v-0e27e22f"]]);
 //#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 { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState } 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 = [
@@ -286,6 +286,6 @@ var UiTree_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a5dd0a1d"]]);
+}), [["__scopeId", "data-v-e6ba8ae7"]]);
 //#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 { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState, t as acceptsControllerWrite } from "./props.js";
 import { t as UiButton_default } from "./UiButton.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiTreeItem.vue?vue&type=script&setup=true&lang.ts
@@ -25,35 +25,23 @@ var _hoisted_1 = [
 	"data-subtree-depth",
 	"data-ui-tree-item-state"
 ];
-var _hoisted_2 = {
-	class: "row",
-	ref: "row"
-};
-var _hoisted_3 = ["aria-label"];
-var _hoisted_4 = ["disabled", "hidden"];
-var _hoisted_5 = { class: "selection-hit" };
-var _hoisted_6 = [
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = ["disabled", "hidden"];
+var _hoisted_4 = { class: "selection-hit" };
+var _hoisted_5 = [
 	"^checked",
 	"disabled",
 	"aria-label"
 ];
-var _hoisted_7 = {
-	class: "leading",
-	ref: "leading"
-};
-var _hoisted_8 = {
-	class: "label",
-	ref: "label"
-};
-var _hoisted_9 = {
-	class: "label-text",
-	ref: "labelText"
-};
-var _hoisted_10 = {
-	class: "actions",
-	ref: "actions"
-};
-var _hoisted_11 = ["hidden"];
+var _hoisted_6 = ["hidden"];
+var htmlNextAuthoredCheck2Reported = /* @__PURE__ */ new Set();
+function htmlNextAuthoredCheck2(accepted, location, message) {
+	if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
+		htmlNextAuthoredCheck2Reported.add(location);
+		console.warn(message);
+	}
+	return accepted;
+}
 //#endregion
 //#region .build/vue/UiTreeItem.vue
 var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -353,14 +341,14 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
-		const rowElement = useTemplateRef("row");
-		const dragHandleElement = useTemplateRef("dragHandle");
-		const disclosureElement = useTemplateRef("disclosure");
-		const leadingElement = useTemplateRef("leading");
-		const labelElement = useTemplateRef("label");
-		const labelTextElement = useTemplateRef("labelText");
-		const actionsElement = useTemplateRef("actions");
-		const childrenElement = useTemplateRef("children");
+		const rowElement = useTemplateRef("rowElement");
+		const dragHandleElement = useTemplateRef("dragHandleElement");
+		const disclosureElement = useTemplateRef("disclosureElement");
+		const leadingElement = useTemplateRef("leadingElement");
+		const labelElement = useTemplateRef("labelElement");
+		const labelTextElement = useTemplateRef("labelTextElement");
+		const actionsElement = useTemplateRef("actionsElement");
+		const childrenElement = useTemplateRef("childrenElement");
 		const internalExpanded = ref(false);
 		const structuralLevel = ref(1);
 		const tabStop = ref(false);
@@ -368,12 +356,12 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const moving = ref(false);
 		let guardedPrevious;
 		const guarded = computed(() => {
-			if (!(structuralLevel.value == null || Number.isInteger(structuralLevel.value))) return guardedPrevious;
+			if (!htmlNextAuthoredCheck2(structuralLevel.value == null || Number.isInteger(structuralLevel.value), "structuralLevel:structuralLevel", "./components/ui-tree-item/ui-tree-item.html: HR007: Reference structuralLevel does not satisfy its declared type.")) return guardedPrevious;
 			return guardedPrevious = structuralLevel.value;
 		});
 		let guardedBindingPrevious = null;
 		const guardedBinding = computed(() => {
-			if (!(moving.value == null || typeof moving.value === "boolean")) return guardedBindingPrevious;
+			if (!htmlNextAuthoredCheck2(moving.value == null || typeof moving.value === "boolean", "{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]:moving", "./components/ui-tree-item/ui-tree-item.html: HR007: Reference moving does not satisfy its declared type.")) return guardedBindingPrevious;
 			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
 				const value = {
 					true: concat("Cancel moving ", checkedProps.value.label),
@@ -403,7 +391,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		});
 		let guardedBinding2Previous;
 		const guardedBinding2 = computed(() => {
-			if (!(isContainer.value == null || typeof isContainer.value === "boolean")) return guardedBinding2Previous;
+			if (!htmlNextAuthoredCheck2(isContainer.value == null || typeof isContainer.value === "boolean", "not isContainer:isContainer", "./components/ui-tree-item/ui-tree-item.html: HR007: Reference isContainer does not satisfy its declared type.")) return guardedBinding2Previous;
 			return guardedBinding2Previous = !isContainer.value;
 		});
 		let guardedBinding3Previous = null;
@@ -414,7 +402,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		});
 		let guardedBinding4Previous;
 		const guardedBinding4 = computed(() => {
-			if (!((internalExpanded.value == null || typeof internalExpanded.value === "boolean") && (isContainer.value == null || typeof isContainer.value === "boolean"))) return guardedBinding4Previous;
+			if (!(htmlNextAuthoredCheck2(internalExpanded.value == null || typeof internalExpanded.value === "boolean", "not (isContainer and internalExpanded):internalExpanded", "./components/ui-tree-item/ui-tree-item.html: HR007: Reference internalExpanded does not satisfy its declared type.") && htmlNextAuthoredCheck2(isContainer.value == null || typeof isContainer.value === "boolean", "not (isContainer and internalExpanded):isContainer", "./components/ui-tree-item/ui-tree-item.html: HR007: Reference isContainer does not satisfy its declared type."))) return guardedBinding4Previous;
 			return guardedBinding4Previous = !(isContainer.value && internalExpanded.value);
 		});
 		provide("html-next:ui-tree-item:internalExpanded", internalExpanded);
@@ -453,6 +441,28 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		useComponentHost(() => import("@threadlabs/looma/components/ui-tree-item/ui-tree-item.js"), {
 			root,
 			dispatch,
+			acceptsState: (name, keys, value) => acceptsControllerWrite(value, {
+				internalExpanded: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				structuralLevel: {
+					kind: "terminal",
+					name: "integer"
+				},
+				tabStop: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				isContainer: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				moving: {
+					kind: "terminal",
+					name: "boolean"
+				}
+			}[name], keys),
 			controllerSource: {
 				specifier: "../components/ui-tree-item/ui-tree-item.js",
 				definition: "./components/ui-tree-item/ui-tree-item.html"
@@ -542,14 +552,19 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				ref_key: "root",
 				ref: root
 			}), [
-				createElementVNode("div", _hoisted_2, [
+				createElementVNode("div", {
+					class: "row",
+					ref_key: "rowElement",
+					ref: rowElement
+				}, [
 					checkedProps.value.sortable && !checkedProps.value.disabled ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						class: "drag-handle",
 						type: "button",
 						draggable: "true",
 						"aria-label": guardedBinding.value,
-						ref: "dragHandle"
+						ref_key: "dragHandleElement",
+						ref: dragHandleElement
 					}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
 						"aria-hidden": "true",
 						focusable: "false",
@@ -590,28 +605,45 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 							cy: "19",
 							r: "1"
 						})
-					], -1)])], 8, _hoisted_3)) : createCommentVNode("v-if", true),
+					], -1)])], 8, _hoisted_2)) : createCommentVNode("v-if", true),
 					createElementVNode("button", {
 						class: "disclosure",
 						type: "button",
 						disabled: checkedProps.value.disabled ?? void 0,
 						hidden: guardedBinding2.value,
-						ref: "disclosure"
+						ref_key: "disclosureElement",
+						ref: disclosureElement
 					}, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
 						class: "disclosure-icon",
 						"aria-hidden": "true"
-					}, null, -1)])], 8, _hoisted_4),
-					createElementVNode("label", _hoisted_5, [createElementVNode("input", {
+					}, null, -1)])], 8, _hoisted_3),
+					createElementVNode("label", _hoisted_4, [createElementVNode("input", {
 						class: "selection-checkbox",
 						type: "checkbox",
 						tabindex: "-1",
 						"^checked": checkedProps.value.selected ? true : void 0,
 						disabled: checkedProps.value.disabled ?? void 0,
 						"aria-label": guardedBinding3.value
-					}, 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(checkedProps.value.label), 1)])], 512)], 512),
-					createElementVNode("span", _hoisted_10, [moving.value ? (openBlock(), createBlock(UiButton_default, {
+					}, null, 8, _hoisted_5)]),
+					createElementVNode("span", {
+						class: "leading",
+						ref_key: "leadingElement",
+						ref: leadingElement
+					}, [renderSlot(_ctx.$slots, "leading")], 512),
+					createElementVNode("span", {
+						class: "label",
+						ref_key: "labelElement",
+						ref: labelElement
+					}, [createElementVNode("span", {
+						class: "label-text",
+						ref_key: "labelTextElement",
+						ref: labelTextElement
+					}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(checkedProps.value.label), 1)])], 512)], 512),
+					createElementVNode("span", {
+						class: "actions",
+						ref_key: "actionsElement",
+						ref: actionsElement
+					}, [moving.value ? (openBlock(), createBlock(UiButton_default, {
 						key: 0,
 						"data-tree-cancel-move": "",
 						variant: "ghost",
@@ -631,8 +663,9 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					class: "children",
 					role: "group",
 					hidden: guardedBinding4.value,
-					ref: "children"
-				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_11),
+					ref_key: "childrenElement",
+					ref: childrenElement
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_6),
 				_cache[4] || (_cache[4] = createElementVNode("span", {
 					class: "drop-indicator subtree-drop-indicator",
 					"aria-hidden": "true"
@@ -643,6 +676,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-51fcc84c"]]);
+}), [["__scopeId", "data-v-4981f1b6"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/chunks/control.js

@@ -24,6 +24,7 @@ function snapshotValue(value) {
 }
 function writeBoundControl(element, binding) {
 	const value = binding.value;
+	if (binding.optionalValue && value === void 0) return;
 	if (binding.name === "checked" && element instanceof HTMLInputElement) {
 		const next = Boolean(value);
 		if (element.checked !== next) element.checked = next;
@@ -84,7 +85,8 @@ var SelectedOptions = defineComponent({
 	props: {
 		value: { type: null },
 		multiple: Boolean,
-		nativeProperty: Boolean
+		nativeProperty: Boolean,
+		optionalValue: Boolean
 	},
 	setup(props, { slots }) {
 		let defaults = [];
@@ -101,6 +103,10 @@ var SelectedOptions = defineComponent({
 		onMounted(restoreDefaults);
 		onUpdated(restoreDefaults);
 		return () => {
+			if (props.optionalValue && props.value === void 0) {
+				defaults = [];
+				return createVNode(Fragment, null, slots.default?.() ?? []);
+			}
 			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));
@@ -111,7 +117,8 @@ var SelectedOptions = defineComponent({
 var vBindControl = {
 	deep: true,
 	getSSRProps(binding) {
-		const { tag, name, value, nativeProperty } = binding.value;
+		const { tag, name, value, nativeProperty, optionalValue } = binding.value;
+		if (optionalValue && value === void 0) return void 0;
 		if (name === "checked") return { checked: Boolean(value) };
 		if (tag === "input" || tag === "textarea") return { value: nativeProperty ? String(value) : value == null ? "" : String(value) };
 	},