@threadlabs/looma 0.34.0 → 0.35.0

package/vue/chunks/UiCard.js

@@ -7,6 +7,7 @@ var _hoisted_1 = [
 	"data-ui-card-prop-padding",
 	"data-ui-card-prop-size",
 	"data-ui-card-prop-tone",
+	"data-ui-card-prop-treatment",
 	"data-ui-card-prop-variant",
 	"data-ui-card-state"
 ];
@@ -15,6 +16,7 @@ var _hoisted_2 = [
 	"data-ui-card-prop-padding",
 	"data-ui-card-prop-size",
 	"data-ui-card-prop-tone",
+	"data-ui-card-prop-treatment",
 	"data-ui-card-prop-variant",
 	"data-ui-card-state"
 ];
@@ -23,6 +25,7 @@ var _hoisted_3 = [
 	"data-ui-card-prop-padding",
 	"data-ui-card-prop-size",
 	"data-ui-card-prop-tone",
+	"data-ui-card-prop-treatment",
 	"data-ui-card-prop-variant",
 	"data-ui-card-state"
 ];
@@ -31,6 +34,7 @@ var _hoisted_4 = [
 	"data-ui-card-prop-padding",
 	"data-ui-card-prop-size",
 	"data-ui-card-prop-tone",
+	"data-ui-card-prop-treatment",
 	"data-ui-card-prop-variant",
 	"data-ui-card-state"
 ];
@@ -44,6 +48,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		padding: { type: null },
 		size: { type: null },
 		tone: { type: null },
+		treatment: { type: null },
 		variant: { type: null },
 		[BINDING_INPUTS_PROP]: { type: null }
 	},
@@ -104,7 +109,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				},
 				required: false,
 				target: { attribute: "tone" },
-				description: "accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the\n      surface hue; action controls retain their own intent.",
+				description: "accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the\n      surface hue; action controls retain their own intent.",
 				values: [
 					"neutral",
 					"accent",
@@ -115,6 +120,17 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				],
 				default: "neutral"
 			},
+			treatment: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "treatment" },
+				description: "How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment.\n      This does not add elevation or require glass.",
+				values: ["standard", "expressive"],
+				default: "standard"
+			},
 			variant: {
 				type: {
 					kind: "terminal",
@@ -122,12 +138,11 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				},
 				required: false,
 				target: { attribute: "variant" },
-				description: "The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated floats above the page with a shadow, for a view's one card, such as sign-in. glass frames an opaque readable content plane with frosted material;\n      shared glassiness and surface separation govern its treatment.",
+				description: "The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated adds a subtle lift above the page, for a view's one card, such as sign-in. Treatment independently controls decorative material.",
 				values: [
 					"outlined",
 					"subtle",
-					"elevated",
-					"glass"
+					"elevated"
 				],
 				default: "outlined"
 			}
@@ -138,12 +153,14 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			padding: "md",
 			size: "content",
 			tone: "neutral",
+			treatment: "standard",
 			variant: "outlined"
 		}, {
 			as: "div",
 			padding: "md",
 			size: "content",
 			tone: "neutral",
+			treatment: "standard",
 			variant: "outlined"
 		}, (name, value, source, values) => {
 			switch (name) {
@@ -163,6 +180,10 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					kind: "terminal",
 					name: "keyword"
 				}, true, true);
+				case "treatment": return checkPropInput(value, {
+					kind: "terminal",
+					name: "keyword"
+				}, true, true);
 				case "variant": return checkPropInput(value, {
 					kind: "terminal",
 					name: "keyword"
@@ -180,6 +201,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				padding: propInputs.value("padding", props["padding"], props[BINDING_INPUTS_PROP]),
 				size: propInputs.value("size", props["size"], props[BINDING_INPUTS_PROP]),
 				tone: propInputs.value("tone", props["tone"], props[BINDING_INPUTS_PROP]),
+				treatment: propInputs.value("treatment", props["treatment"], props[BINDING_INPUTS_PROP]),
 				variant: propInputs.value("variant", props["variant"], props[BINDING_INPUTS_PROP])
 			};
 		});
@@ -197,6 +219,8 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			checkedProps.value.padding != null && `padding=${encodeURIComponent(checkedProps.value.padding)}`,
 			checkedProps.value.variant && "variant",
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+			checkedProps.value.treatment && "treatment",
+			checkedProps.value.treatment != null && `treatment=${encodeURIComponent(checkedProps.value.treatment)}`,
 			checkedProps.value.tone && "tone",
 			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
 			checkedProps.value.size && "size",
@@ -213,6 +237,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-ui-card-prop-padding": unref(reflectedProp)("padding", "padding", checkedProps.value.padding, void 0, false),
 				"data-ui-card-prop-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
 				"data-ui-card-prop-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-card-prop-treatment": unref(reflectedProp)("treatment", "treatment", checkedProps.value.treatment, void 0, false),
 				"data-ui-card-prop-variant": unref(reflectedProp)("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-card-state": hostState.value || void 0,
 				ref: "@html-next/root"
@@ -229,6 +254,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-ui-card-prop-padding": unref(reflectedProp)("padding", "padding", checkedProps.value.padding, void 0, false),
 				"data-ui-card-prop-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
 				"data-ui-card-prop-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-card-prop-treatment": unref(reflectedProp)("treatment", "treatment", checkedProps.value.treatment, void 0, false),
 				"data-ui-card-prop-variant": unref(reflectedProp)("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-card-state": hostState.value || void 0,
 				ref: "@html-next/root"
@@ -245,6 +271,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-ui-card-prop-padding": unref(reflectedProp)("padding", "padding", checkedProps.value.padding, void 0, false),
 				"data-ui-card-prop-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
 				"data-ui-card-prop-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-card-prop-treatment": unref(reflectedProp)("treatment", "treatment", checkedProps.value.treatment, void 0, false),
 				"data-ui-card-prop-variant": unref(reflectedProp)("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-card-state": hostState.value || void 0,
 				ref: "@html-next/root"
@@ -261,6 +288,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-ui-card-prop-padding": unref(reflectedProp)("padding", "padding", checkedProps.value.padding, void 0, false),
 				"data-ui-card-prop-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
 				"data-ui-card-prop-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-card-prop-treatment": unref(reflectedProp)("treatment", "treatment", checkedProps.value.treatment, void 0, false),
 				"data-ui-card-prop-variant": unref(reflectedProp)("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-card-state": hostState.value || void 0,
 				ref: "@html-next/root"
@@ -270,6 +298,6 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b502adfc"]]);
+}), [["__scopeId", "data-v-2c59052c"]]);
 //#endregion
 export { UiCard_default as t };

package/vue/chunks/UiCheckbox.js

@@ -356,6 +356,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0e08e52b"]]);
+}), [["__scopeId", "data-v-4950a023"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiDialog.js

@@ -354,6 +354,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ea8be62a"]]);
+}), [["__scopeId", "data-v-0eef3ecb"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiIconButton.js

@@ -463,6 +463,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fd184bfc"]]);
+}), [["__scopeId", "data-v-bcecf531"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiInput.js

@@ -704,6 +704,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-26ec48c2"]]);
+}), [["__scopeId", "data-v-c67ac937"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -220,6 +220,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fa51ee35"]]);
+}), [["__scopeId", "data-v-8da21070"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiLightEditor.js

@@ -0,0 +1,347 @@
+import { a as concat, b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, o as createDispatch, t as _plugin_vue_export_helper_default, y as useComponentHost } from "./_plugin-vue_export-helper.js";
+import { d as requireInputStatus, i as checkPropInput, m as vuePropInputs, p as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP, u as propValidityState } from "./props.js";
+import { t as UiNumberInput_default } from "./UiNumberInput.js";
+import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
+//#region .build/vue/UiLightEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-ui-light-editor-prop-disabled",
+	"data-ui-light-editor-prop-label",
+	"data-ui-light-editor-prop-size",
+	"data-ui-light-editor-prop-x",
+	"data-ui-light-editor-prop-y"
+];
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = {
+	class: "specimen",
+	"data-hn-ui-light-editor": ""
+};
+var _hoisted_4 = ["disabled", "aria-label"];
+var _hoisted_5 = {
+	class: "coordinates",
+	"data-hn-ui-light-editor": ""
+};
+//#endregion
+//#region .build/vue/UiLightEditor.vue
+var UiLightEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiLightEditor",
+	props: {
+		disabled: { type: null },
+		label: { type: null },
+		size: { type: null },
+		x: { type: null },
+		y: { type: null },
+		[BINDING_INPUTS_PROP]: { type: null }
+	},
+	emits: [
+		"update:x",
+		"update:y",
+		"input",
+		"change"
+	],
+	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Prevents pointer, keyboard and exact edits.",
+				default: false
+			},
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "Accessible name for the position editor.",
+				default: "Light position"
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "Sets both coordinate fields to the shared small, medium or large control height.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			x: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "x" },
+				description: "Horizontal source position from 0 (left) to 1 (right), relative to every surface.",
+				default: .5
+			},
+			y: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "y" },
+				description: "Vertical source position from 0 (top) to 1 (bottom), relative to every surface.",
+				default: 0
+			}
+		} };
+		const props = __props;
+		const inputTracking = vuePropInputs({
+			disabled: false,
+			label: "Light position",
+			size: "md",
+			x: .5,
+			y: 0
+		}, {
+			disabled: false,
+			label: "Light position",
+			size: "md",
+			x: .5,
+			y: 0
+		}, (name, value, source, values) => {
+			switch (name) {
+				case "disabled": return checkPropInput(value, {
+					kind: "terminal",
+					name: "boolean"
+				}, true, true);
+				case "label": return checkPropInput(value, {
+					kind: "terminal",
+					name: "string"
+				}, true, true);
+				case "size": return checkPropInput(value, {
+					kind: "terminal",
+					name: "keyword"
+				}, true, true);
+				case "x": return checkPropInput(value, {
+					kind: "terminal",
+					name: "number"
+				}, true, true);
+				case "y": return checkPropInput(value, {
+					kind: "terminal",
+					name: "number"
+				}, true, true);
+				default: return { ok: false };
+			}
+		}, () => {
+			checkedProps.value;
+		});
+		const propInputs = inputTracking.inputs;
+		const checkedProps = computed(() => {
+			inputTracking.version.value;
+			return {
+				disabled: propInputs.value("disabled", props["disabled"], props[BINDING_INPUTS_PROP]),
+				label: propInputs.value("label", props["label"], props[BINDING_INPUTS_PROP]),
+				size: propInputs.value("size", props["size"], props[BINDING_INPUTS_PROP]),
+				x: propInputs.value("x", props["x"], props[BINDING_INPUTS_PROP]),
+				y: propInputs.value("y", props["y"], props[BINDING_INPUTS_PROP])
+			};
+		});
+		const inputStatus = (name, handlesError) => {
+			checkedProps.value;
+			inputTracking.version.value;
+			return requireInputStatus(propInputs.status(name), handlesError);
+		};
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		const hydrationInstance = getCurrentInstance();
+		const emit = __emit;
+		const root = ref(null);
+		const planeElement = useTemplateRef("planeElement");
+		const sourceElement = useTemplateRef("sourceElement");
+		const horizontal = ref("50");
+		const vertical = ref("0");
+		let guardedPrevious = null;
+		const guarded = computed(() => {
+			const candidate = concat(checkedProps.value.label, ". Arrow keys move the source; Shift moves faster.");
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedPrevious;
+			return guardedPrevious = candidate;
+		});
+		provide("html-next:ui-light-editor:horizontal", horizontal);
+		provide("html-next:ui-light-editor:vertical", vertical);
+		checkHydratedRoot("span", "ui-light-editor");
+		const isInputDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["x"] === "number" && Number.isFinite(detail["x"]) && typeof detail["y"] === "number" && Number.isFinite(detail["y"]) && Object.keys(detail).every((key) => ["x", "y"].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				input: isInputDetail,
+				change: isInputDetail
+			},
+			modeled: ["x", "y"]
+		});
+		useComponentHost(() => import("@threadlabs/looma/components/ui-light-editor/ui-light-editor.js"), {
+			root,
+			module: true,
+			dispatch,
+			acceptsState: (name, keys, value) => acceptsControllerWrite(value, {
+				horizontal: {
+					kind: "terminal",
+					name: "string"
+				},
+				vertical: {
+					kind: "terminal",
+					name: "string"
+				}
+			}[name], keys),
+			initials: {
+				horizontal: "50",
+				vertical: "0"
+			},
+			controllerSource: {
+				specifier: "../components/ui-light-editor/ui-light-editor.js",
+				definition: "./components/ui-light-editor/ui-light-editor.html"
+			},
+			props: checkedProps,
+			inputs: propInputs,
+			inputTracking,
+			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: [
+				"disabled",
+				"label",
+				"size",
+				"x",
+				"y"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name),
+			refs: {
+				plane: planeElement,
+				source: sourceElement
+			},
+			state: {
+				horizontal,
+				vertical
+			}
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("span", mergeProps({ class: "ui-light-editor" }, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
+				"data-hn-ui-light-editor": "",
+				"data-ui-light-editor-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-ui-light-editor-prop-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
+				"data-ui-light-editor-prop-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
+				"data-ui-light-editor-prop-x": unref(reflectedProp)("x", "x", checkedProps.value.x, void 0, false),
+				"data-ui-light-editor-prop-y": unref(reflectedProp)("y", "y", checkedProps.value.y, void 0, false),
+				ref_key: "root",
+				ref: root
+			}), [
+				createElementVNode("span", {
+					class: "stage",
+					role: "group",
+					"data-hn-ui-light-editor": "",
+					"aria-label": checkedProps.value.label ?? void 0
+				}, [createElementVNode("span", {
+					class: "plane",
+					"data-hn-ui-light-editor": "",
+					ref_key: "planeElement",
+					ref: planeElement
+				}, [
+					_cache[0] || (_cache[0] = createElementVNode("svg", {
+						viewBox: "0 0 100 60",
+						preserveAspectRatio: "none",
+						"aria-hidden": "true",
+						"data-hn-ui-light-editor": ""
+					}, [createElementVNode("path", {
+						d: "M0 30 H100 M50 0 V60",
+						"data-hn-ui-light-editor": ""
+					})], -1)),
+					_cache[1] || (_cache[1] = createTextVNode(toDisplayString(" "), -1)),
+					createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					_cache[2] || (_cache[2] = createTextVNode(toDisplayString(" "), -1)),
+					createElementVNode("button", {
+						type: "button",
+						class: "source",
+						"data-hn-ui-light-editor": "",
+						disabled: checkedProps.value.disabled ?? void 0,
+						"aria-label": guarded.value,
+						ref_key: "sourceElement",
+						ref: sourceElement
+					}, null, 8, _hoisted_4)
+				], 512)], 8, _hoisted_2),
+				_cache[4] || (_cache[4] = createTextVNode(toDisplayString(" "), -1)),
+				createElementVNode("span", _hoisted_5, [
+					createVNode(UiNumberInput_default, mergeProps({
+						class: "ui-number-input",
+						"data-coordinate": "x",
+						min: 0,
+						max: 100,
+						step: 1,
+						unit: "%",
+						label: "Light horizontal position",
+						value: horizontal.value,
+						size: checkedProps.value.size,
+						disabled: checkedProps.value.disabled
+					}, { [unref(BINDING_INPUTS_PROP)]: {
+						size: () => ({
+							value: checkedProps.value.size,
+							status: inputStatus("size", true)
+						}),
+						disabled: () => ({
+							value: checkedProps.value.disabled,
+							status: inputStatus("disabled", true)
+						})
+					} }), null, 16, [
+						"value",
+						"size",
+						"disabled"
+					]),
+					_cache[3] || (_cache[3] = createTextVNode(toDisplayString(" "), -1)),
+					createVNode(UiNumberInput_default, mergeProps({
+						class: "ui-number-input",
+						"data-coordinate": "y",
+						min: 0,
+						max: 100,
+						step: 1,
+						unit: "%",
+						label: "Light vertical position",
+						value: vertical.value,
+						size: checkedProps.value.size,
+						disabled: checkedProps.value.disabled
+					}, { [unref(BINDING_INPUTS_PROP)]: {
+						size: () => ({
+							value: checkedProps.value.size,
+							status: inputStatus("size", true)
+						}),
+						disabled: () => ({
+							value: checkedProps.value.disabled,
+							status: inputStatus("disabled", true)
+						})
+					} }), null, 16, [
+						"value",
+						"size",
+						"disabled"
+					])
+				]),
+				_cache[5] || (_cache[5] = createTextVNode(toDisplayString(" "), -1)),
+				_cache[6] || (_cache[6] = createElementVNode("span", {
+					class: "hint",
+					"data-hn-ui-light-editor": ""
+				}, "Drag the light, use arrow keys, or enter its position. Top centre is 50%, 0%.", -1))
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-1cd5c26a"]]);
+//#endregion
+export { UiLightEditor_default as t };

package/vue/chunks/UiMenu.js

@@ -281,6 +281,6 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-cec0dff3"]]);
+}), [["__scopeId", "data-v-d3d70bb1"]]);
 //#endregion
 export { UiMenu_default as t };

package/vue/chunks/UiNumberInput.js

@@ -1,9 +1,9 @@
-import { a as concat, b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, o as createDispatch, t as _plugin_vue_export_helper_default, y as useComponentHost } from "./_plugin-vue_export-helper.js";
-import { d as requireInputStatus, i as checkPropInput, l as inputRead, m as vuePropInputs, n as READY_INPUT, p as vPropValidity, s as evaluateInput, t as BINDING_INPUTS_PROP, u as propValidityState } from "./props.js";
+import { S as warnUnless, a as concat, b as useReflectedProp, d as initializedState, i as checkHydratedRoot, m as nativeAttrs, o as createDispatch, t as _plugin_vue_export_helper_default, y as useComponentHost } from "./_plugin-vue_export-helper.js";
+import { d as requireInputStatus, i as checkPropInput, l as inputRead, m as vuePropInputs, n as READY_INPUT, o as copyStateSeed, p as vPropValidity, r as acceptsControllerWrite, s as evaluateInput, t as BINDING_INPUTS_PROP, u as propValidityState } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiInput_default } from "./UiInput.js";
 import { t as UiIconButton_default } from "./UiIconButton.js";
-import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderList, toDisplayString, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderList, toDisplayString, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiNumberInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-ui-number-input-prop-disabled",
@@ -228,6 +228,13 @@ var UiNumberInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
+		const display = initializedState(() => evaluateInput(() => {
+			return inputRead(checkedProps.value.value, propInputs.status("value"));
+		}), (next) => typeof next === "string", copyStateSeed, () => warnUnless(false, "initializer:display", "State `display` does not satisfy its declared type."));
+		provide("html-next:ui-number-input:display", display);
+		const declarationStatuses = { display: () => display.status() };
+		const declarationStatus = (name) => declarationStatuses[name]();
+		display.start();
 		checkHydratedRoot("span", "ui-number-input");
 		const isInputDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && Object.keys(detail).every((key) => ["value"].includes(key));
 		const dispatch = createDispatch(root, emit, {
@@ -241,6 +248,10 @@ var UiNumberInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			root,
 			module: true,
 			dispatch,
+			acceptsState: (name, keys, value) => acceptsControllerWrite(value, { display: {
+				kind: "terminal",
+				name: "string"
+			} }[name], keys),
 			controllerSource: {
 				specifier: "../components/ui-number-input/ui-number-input.js",
 				definition: "./components/ui-number-input/ui-number-input.html"
@@ -267,7 +278,9 @@ var UiNumberInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			propValidity: (name) => propValidityState({
 				contract: propValidityContract,
 				values: { ...props }
-			}, name)
+			}, name),
+			state: { display },
+			availability: { display: () => declarationStatus("display") }
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("span", mergeProps({ class: "ui-number-input" }, unref(nativeAttrs)(_ctx.$attrs), {
@@ -324,7 +337,7 @@ var UiNumberInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 					"aria-description": "Enter calculates arithmetic. Arrow keys step; Shift changes ten steps.",
 					size: checkedProps.value.size,
 					disabled: checkedProps.value.disabled,
-					value: checkedProps.value.value,
+					value: unref(display),
 					"aria-label": checkedProps.value.label,
 					name: checkedProps.value.name
 				}, { [unref(BINDING_INPUTS_PROP)]: {
@@ -337,8 +350,8 @@ var UiNumberInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 						status: inputStatus("disabled", true)
 					}),
 					value: () => ({
-						value: checkedProps.value.value,
-						status: inputStatus("value", true)
+						value: unref(display),
+						status: declarationStatus("display")
 					})
 				} }), null, 16, [
 					"size",
@@ -385,6 +398,6 @@ var UiNumberInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-8ef7cc4b"]]);
+}), [["__scopeId", "data-v-4b6c1ff2"]]);
 //#endregion
 export { UiNumberInput_default as t };

package/vue/chunks/UiPopover.js

@@ -238,6 +238,6 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-eaf1afa0"]]);
+}), [["__scopeId", "data-v-d6b6c696"]]);
 //#endregion
 export { UiPopover_default as t };

package/vue/chunks/UiSelect.js

@@ -221,6 +221,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-c21e6b0a"]]);
+}), [["__scopeId", "data-v-4348aae0"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSwitch.js

@@ -287,6 +287,6 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b042348b"]]);
+}), [["__scopeId", "data-v-f98aba92"]]);
 //#endregion
 export { UiSwitch_default as t };

package/vue/chunks/UiTextarea.js

@@ -308,6 +308,6 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-01de9436"]]);
+}), [["__scopeId", "data-v-5cdc217a"]]);
 //#endregion
 export { UiTextarea_default as t };