@stonecrop/aform 0.35.0 → 0.36.0

package/dist/aform.js

@@ -2,6 +2,8 @@ import { hasBadgeOptions, isBadgeDescriptor, lookupBadge, selectChoices } from "
 import { install as install$1 } from "@stonecrop/atable";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, unref, useId, useModel, useTemplateRef, vModelCheckbox, vModelRadio, vModelSelect, vModelText, vShow, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
+import { fromISODate } from "@stonecrop/utilities";
+import { Temporal } from "temporal-polyfill";
 import { onClickOutside, useFileDialog } from "@vueuse/core";
 import './assets/index.css';//#region src/utils/deserialize.ts
 /**
@@ -133,7 +135,7 @@ var _hoisted_2$19 = { class: "aform_field-label" };
 var _hoisted_3$17 = { class: "aform_display-value" };
 var _hoisted_4$16 = ["for"];
 var _hoisted_5$16 = { class: "aform_checkbox-container aform_input-field" };
-var _hoisted_6$16 = [
+var _hoisted_6$13 = [
 	"id",
 	"disabled",
 	"required",
@@ -182,7 +184,7 @@ var ACheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					required: __props.required,
 					"aria-invalid": unref(invalid),
 					"aria-describedby": unref(describedBy)
-				}, null, 8, _hoisted_6$16), [[vModelCheckbox, checkbox.value]])]),
+				}, null, 8, _hoisted_6$13), [[vModelCheckbox, checkbox.value]])]),
 				withDirectives(createElementVNode("p", {
 					id: unref(errorId),
 					class: "aform_error",
@@ -203,6 +205,22 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 //#region src/components/form/ACheckbox.vue
 var ACheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ACheckbox_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f28e7db6"]]);
 //#endregion
+//#region src/utils/emptiedBox.ts
+/**
+* A date box's day as `v-model` hands it back, or null once any part of the box is empty, which the
+* browser reports as `''`.
+*/
+function dayFromBox(text) {
+	return text === "" ? null : text;
+}
+/**
+* A number box's number as `v-model` hands it back, or null once the box is empty. `v-model` hands
+* back the box's text when it holds no number, and the browser reports an empty box as `''`.
+*/
+function numberFromBox(value) {
+	return value === "" ? null : value;
+}
+//#endregion
 //#region src/components/form/AFormLink.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$19 = { class: "aform_display-value" };
 var _hoisted_2$18 = {
@@ -222,7 +240,7 @@ var _hoisted_5$15 = [
 	"disabled",
 	"onKeydown"
 ];
-var _hoisted_6$15 = ["onKeydown"];
+var _hoisted_6$12 = ["onKeydown"];
 var _hoisted_7$6 = ["data-icon"];
 var _hoisted_8$6 = {
 	key: 0,
@@ -238,12 +256,12 @@ var _hoisted_12$4 = {
 	key: 0,
 	class: "autocomplete-result loading"
 };
-var _hoisted_13$2 = [
+var _hoisted_13$3 = [
 	"id",
 	"aria-selected",
 	"onMousedown"
 ];
-var _hoisted_14$2 = {
+var _hoisted_14$3 = {
 	key: 0,
 	class: "aform_field-label"
 };
@@ -440,7 +458,7 @@ var AFormLink_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				viewBox: "1.75 2.75 12.5 10.5",
 				"aria-hidden": "true",
 				focusable: "false"
-			}, [__props.icon === "chevron-right" ? (openBlock(), createElementBlock("path", _hoisted_8$6)) : (openBlock(), createElementBlock("path", _hoisted_9$5))], 8, _hoisted_7$6)), createElementVNode("span", _hoisted_10$4, toDisplayString(__props.icon === "chevron-right" ? "›" : "→"), 1)], 40, _hoisted_6$15)) : createCommentVNode("", true)]), dropdownOpen.value ? (openBlock(), createElementBlock("ul", {
+			}, [__props.icon === "chevron-right" ? (openBlock(), createElementBlock("path", _hoisted_8$6)) : (openBlock(), createElementBlock("path", _hoisted_9$5))], 8, _hoisted_7$6)), createElementVNode("span", _hoisted_10$4, toDisplayString(__props.icon === "chevron-right" ? "›" : "→"), 1)], 40, _hoisted_6$12)) : createCommentVNode("", true)]), dropdownOpen.value ? (openBlock(), createElementBlock("ul", {
 				key: 0,
 				id: listboxId,
 				class: "autocomplete-results",
@@ -454,8 +472,8 @@ var AFormLink_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"aria-selected": i === activeIndex.value,
 					class: normalizeClass(["autocomplete-result", { "is-active": i === activeIndex.value }]),
 					onMousedown: withModifiers(($event) => selectOption(option), ["prevent"])
-				}, [renderSlot(_ctx.$slots, "option", { option }, () => [createTextVNode(toDisplayString(option.displayText ?? String(option.id)), 1)], true)], 42, _hoisted_13$2);
-			}), 128))], 8, _hoisted_11$4)) : createCommentVNode("", true)])), [[unref(vOnClickOutside), onClickOutside]]), __props.label && !__props.embedded ? (openBlock(), createElementBlock("label", _hoisted_14$2, toDisplayString(__props.label), 1)) : createCommentVNode("", true)], 64))], 2);
+				}, [renderSlot(_ctx.$slots, "option", { option }, () => [createTextVNode(toDisplayString(option.displayText ?? String(option.id)), 1)], true)], 42, _hoisted_13$3);
+			}), 128))], 8, _hoisted_11$4)) : createCommentVNode("", true)])), [[unref(vOnClickOutside), onClickOutside]]), __props.label && !__props.embedded ? (openBlock(), createElementBlock("label", _hoisted_14$3, toDisplayString(__props.label), 1)) : createCommentVNode("", true)], 64))], 2);
 		};
 	}
 }), [["__scopeId", "data-v-07d20e9b"]]);
@@ -466,7 +484,7 @@ var _hoisted_2$17 = { class: "aform_display-value" };
 var _hoisted_3$15 = { class: "aform_field-label" };
 var _hoisted_4$14 = { class: "acurrency__row" };
 var _hoisted_5$14 = { class: "acurrency__field acurrency__field--amount" };
-var _hoisted_6$14 = { class: "acurrency__group" };
+var _hoisted_6$11 = { class: "acurrency__group" };
 var _hoisted_7$5 = { class: "acurrency__currency" };
 var _hoisted_8$5 = { class: "acurrency__amount-wrap" };
 var _hoisted_9$4 = [
@@ -479,8 +497,8 @@ var _hoisted_9$4 = [
 var _hoisted_10$3 = ["for"];
 var _hoisted_11$3 = { class: "acurrency__row acurrency__row--base" };
 var _hoisted_12$3 = { class: "acurrency__field acurrency__field--base-currency" };
-var _hoisted_13$1 = ["value"];
-var _hoisted_14$1 = { class: "aform_field-label" };
+var _hoisted_13$2 = ["value"];
+var _hoisted_14$2 = { class: "aform_field-label" };
 var _hoisted_15$1 = { class: "acurrency__field acurrency__field--base-amount" };
 var _hoisted_16$1 = ["value"];
 var _hoisted_17$1 = { class: "aform_field-label" };
@@ -510,9 +528,9 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		exchangeRateLabel: { default: "Exchange Rate" }
 	}, {
 		"modelValue": { default: () => ({
-			amount: 0,
+			amount: null,
 			currency: { id: "" },
-			baseAmount: 0,
+			baseAmount: null,
 			baseCurrency: { id: "" },
 			exchangeRate: 1
 		}) },
@@ -570,16 +588,16 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				currency: currencyValue,
 				exchangeRate,
 				baseCurrency: resolvedBaseCurrency.value,
-				baseAmount: roundAmount(amount * exchangeRate)
+				baseAmount: amount === null ? null : roundAmount(amount * exchangeRate)
 			};
 		};
 		const amount = computed({
-			get: () => modelValue.value?.amount ?? 0,
-			set: (value) => recompute(value, modelValue.value?.currency ?? { id: "" })
+			get: () => modelValue.value?.amount ?? null,
+			set: (value) => recompute(numberFromBox(value), modelValue.value?.currency ?? { id: "" })
 		});
 		const currency = computed({
 			get: () => modelValue.value?.currency ?? { id: "" },
-			set: (value) => recompute(modelValue.value?.amount ?? 0, value)
+			set: (value) => recompute(modelValue.value?.amount ?? null, value)
 		});
 		const amountNavigationKeys = /* @__PURE__ */ new Set([
 			"Backspace",
@@ -613,7 +631,7 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		});
 		const displayText = computed(() => {
 			const v = modelValue.value;
-			if (!v || !v.currency?.id) return "—";
+			if (!v || !v.currency?.id || v.amount === null) return "—";
 			const currencyText = v.currency.displayText ?? String(v.currency.id);
 			const base = `${v.amount} ${currencyText}`;
 			if (!showBase.value) return base;
@@ -622,7 +640,7 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$18, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$17, toDisplayString(displayText.value), 1), createElementVNode("label", _hoisted_3$15, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-				createElementVNode("div", _hoisted_4$14, [createElementVNode("div", _hoisted_5$14, [createElementVNode("div", _hoisted_6$14, [createElementVNode("div", _hoisted_7$5, [createVNode(AFormLink_default, {
+				createElementVNode("div", _hoisted_4$14, [createElementVNode("div", _hoisted_5$14, [createElementVNode("div", _hoisted_6$11, [createElementVNode("div", _hoisted_7$5, [createVNode(AFormLink_default, {
 					modelValue: currency.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currency.value = $event),
 					mode: __props.mode,
@@ -672,15 +690,15 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						class: "aform_input-field acurrency__base-field",
 						type: "text",
 						disabled: ""
-					}, null, 8, _hoisted_13$1), createElementVNode("label", _hoisted_14$1, toDisplayString(__props.baseCurrencyLabel), 1)]),
+					}, null, 8, _hoisted_13$2), createElementVNode("label", _hoisted_14$2, toDisplayString(__props.baseCurrencyLabel), 1)]),
 					createElementVNode("div", _hoisted_15$1, [createElementVNode("input", {
-						value: modelValue.value.baseAmount,
+						value: modelValue.value?.baseAmount,
 						class: "aform_input-field acurrency__base-field",
 						type: "number",
 						disabled: ""
 					}, null, 8, _hoisted_16$1), createElementVNode("label", _hoisted_17$1, toDisplayString(__props.baseAmountLabel), 1)]),
 					createElementVNode("div", _hoisted_18$1, [createElementVNode("input", {
-						value: modelValue.value.exchangeRate,
+						value: modelValue.value?.exchangeRate,
 						class: "aform_input-field acurrency__base-field",
 						type: "number",
 						disabled: ""
@@ -694,32 +712,74 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-f61b058f"]]);
+}), [["__scopeId", "data-v-7c503cec"]]);
+//#endregion
+//#region src/utils/typedDay.ts
+var TYPED_DAY_FORMAT = {
+	calendar: "gregory",
+	numberingSystem: "latn"
+};
+/**
+* A day written as the locale writes it in numbers, for a box a user types days into.
+* @param locale - The browser's own when omitted
+*/
+function writeTypedDay(day, locale) {
+	return day.toLocaleString(locale, TYPED_DAY_FORMAT);
+}
+/**
+* Reads a day typed as `writeTypedDay` writes it, or as `YYYY-MM-DD`. Any other text, or a day that does
+* not exist, reads as no day. Not `new Date(text)`, which reads `YYYY-MM-DD` as UTC midnight and rolls an
+* impossible day over.
+* @param locale - The browser's own when omitted
+*/
+function readTypedDay(text, locale) {
+	const isoDay = fromISODate(text.trim());
+	if (isoDay) return isoDay;
+	const numbers = text.match(/\d+/g);
+	if (numbers?.length !== 3) return void 0;
+	const order = new Intl.DateTimeFormat(locale, TYPED_DAY_FORMAT).formatToParts(0).map((part) => part.type).filter((type) => type === "year" || type === "month" || type === "day");
+	const typed = Object.fromEntries(order.map((type, index) => [type, numbers[index]]));
+	if (typed.year?.length !== 4) return void 0;
+	try {
+		return Temporal.PlainDate.from({
+			year: Number(typed.year),
+			month: Number(typed.month),
+			day: Number(typed.day)
+		}, { overflow: "reject" });
+	} catch {
+		return;
+	}
+}
 //#endregion
 //#region src/components/form/ADatePicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$17 = { class: "aform_display-value" };
 var _hoisted_2$16 = { key: 0 };
 var _hoisted_3$14 = ["id"];
-var _hoisted_4$13 = {
-	ref: "datepicker",
-	class: "adatepicker",
-	tabindex: "0"
-};
-var _hoisted_5$13 = {
+var _hoisted_4$13 = { class: "adatepicker" };
+var _hoisted_5$13 = ["aria-label"];
+var _hoisted_6$10 = {
 	colspan: "5",
 	tabindex: -1
 };
-var _hoisted_6$13 = { key: 0 };
-var _hoisted_7$4 = { colspan: "7" };
-var _hoisted_8$4 = { class: "date-input" };
-var _hoisted_9$3 = ["value"];
+var _hoisted_7$4 = { key: 0 };
+var _hoisted_8$4 = {
+	colspan: "7",
+	class: "range-inputs"
+};
+var _hoisted_9$3 = { class: "date-input" };
 var _hoisted_10$2 = ["value"];
-var _hoisted_11$2 = [
+var _hoisted_11$2 = ["value"];
+var _hoisted_12$2 = { class: "days-header" };
+var _hoisted_13$1 = [
+	"tabindex",
+	"aria-label",
+	"aria-selected",
+	"aria-current",
 	"onClick",
 	"onKeydown",
 	"onMouseover"
 ];
-var _hoisted_12$2 = ["id"];
+var _hoisted_14$1 = ["id"];
 var numberOfRows = 6;
 var numberOfColumns = 7;
 //#endregion
@@ -740,7 +800,7 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		validation: { default: () => ({ errorMessage: "" }) },
 		errors: {}
 	}, {
-		"modelValue": { default: () => /* @__PURE__ */ new Date() },
+		"modelValue": {},
 		"modelModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels(["get-date"], ["update:modelValue"]),
@@ -748,11 +808,13 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
 		const { errorId } = fieldErrorA11y(__props.uuid, errorText);
 		const date = useModel(__props, "modelValue");
-		const selectedDate = ref(new Date(date.value));
-		const currentMonth = ref(selectedDate.value.getMonth());
-		const currentYear = ref(selectedDate.value.getFullYear());
+		const selectedDate = ref(fromISODate(date.value ?? "") ?? Temporal.Now.plainDateISO());
+		const currentMonth = ref(selectedDate.value.month - 1);
+		const currentYear = ref(selectedDate.value.year);
 		const currentDates = ref([]);
-		const hoveredDate = ref(new Date(date.value));
+		const focusedDay = ref(selectedDate.value);
+		const grid = useTemplateRef("grid");
+		const hoveredDate = ref(selectedDate.value);
 		const start_date = ref(null);
 		const end_date = ref(null);
 		const startDateInput = useTemplateRef("start-date-input");
@@ -764,69 +826,65 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		/*******************
 		Computed
 		*******************/
-		const monthAndYear = computed(() => {
-			return new Date(currentYear.value, currentMonth.value, 1).toLocaleDateString(void 0, {
-				year: "numeric",
-				month: "long"
-			});
-		});
-		const getStartDate = computed(() => {
-			return start_date.value != null ? parseDateToString(start_date.value) : "";
-		});
-		const getEndDate = computed(() => {
-			return end_date.value != null ? parseDateToString(end_date.value) : "";
-		});
+		const displayValue = computed(() => date.value ? fromISODate(date.value)?.toLocaleString() ?? "Invalid Date" : "");
+		const firstOfMonth = computed(() => Temporal.PlainDate.from({
+			year: currentYear.value,
+			month: currentMonth.value + 1,
+			day: 1
+		}));
+		const monthAndYear = computed(() => firstOfMonth.value.toLocaleString(void 0, {
+			year: "numeric",
+			month: "long"
+		}));
+		const weekdayLetters = computed(() => currentDates.value.slice(0, numberOfColumns).map((day) => day.toLocaleString(void 0, { weekday: "narrow" })));
+		const getStartDate = computed(() => boxText(start_date.value));
+		const getEndDate = computed(() => boxText(end_date.value));
 		/*******************
 		Functions
 		*******************/
-		const parseDateToString = (dateValue) => {
-			if (!validateDate(dateValue)) return "";
-			return dateValue.getMonth() + 1 + "/" + dateValue.getDate() + "/" + dateValue.getFullYear();
-		};
+		const boxText = (day) => day ? writeTypedDay(day) : "";
 		const isTodaysDate = (day) => {
-			const todaysDate = /* @__PURE__ */ new Date();
-			if (currentMonth.value !== todaysDate.getMonth()) return false;
-			return todaysDate.toDateString() === new Date(day).toDateString();
+			const today = Temporal.Now.plainDateISO();
+			if (currentMonth.value !== today.month - 1) return false;
+			return day.equals(today);
 		};
 		const isSelectedDate = (day) => {
-			return new Date(day).toDateString() === new Date(selectedDate.value).toDateString();
+			return day.equals(selectedDate.value);
 		};
 		const isStartDate = (day) => {
-			const start = start_date.value;
-			if (!validateDate(start)) return false;
-			return new Date(day).toDateString() === start.toDateString();
+			return start_date.value !== null && day.equals(start_date.value);
 		};
 		const isEndDate = (day) => {
-			const end = end_date.value;
-			if (!validateDate(end)) return false;
-			return new Date(day).toDateString() === end.toDateString();
-		};
+			return end_date.value !== null && day.equals(end_date.value);
+		};
+		const isPicked = (day) => isSelectedDate(day) || __props.selectRange && (isStartDate(day) || isEndDate(day));
+		const fullDate = (day) => day.toLocaleString(void 0, {
+			weekday: "long",
+			year: "numeric",
+			month: "long",
+			day: "numeric"
+		});
 		const getCurrentCell = (rowNo, colNo) => {
-			return (rowNo - 1) * numberOfColumns + colNo;
+			return (rowNo - 1) * numberOfColumns + colNo - 1;
 		};
 		const isInDateRange = (day) => {
 			const start = start_date.value;
-			if (!validateDate(start)) return false;
-			const this_date = new Date(day);
-			const end = end_date.value;
-			const temp_end_date = validateDate(end) ? end : new Date(hoveredDate.value);
-			return this_date.getTime() > start.getTime() && this_date.getTime() < temp_end_date.getTime();
+			if (!start) return false;
+			const end = end_date.value ?? hoveredDate.value;
+			return Temporal.PlainDate.compare(day, start) > 0 && Temporal.PlainDate.compare(day, end) < 0;
 		};
 		const getCurrentDate = (rowNo, colNo) => {
 			return currentDates.value[getCurrentCell(rowNo, colNo)];
 		};
 		const hoverDate = (currentIndex) => {
-			hoveredDate.value = new Date(currentDates.value[currentIndex]);
+			hoveredDate.value = currentDates.value[currentIndex];
 		};
 		const preventCellSelection = (event) => {
 			if (event.target?.tagName !== "INPUT") event.preventDefault();
 		};
 		const populateMonth = () => {
-			currentDates.value = [];
-			const firstOfMonth = new Date(currentYear.value, currentMonth.value, 1);
-			const monthStartWeekday = firstOfMonth.getDay();
-			const calendarStartDay = firstOfMonth.setDate(firstOfMonth.getDate() - monthStartWeekday);
-			for (const dayIndex of Array(43).keys()) currentDates.value.push(calendarStartDay + dayIndex * 864e5);
+			const gridStart = firstOfMonth.value.subtract({ days: firstOfMonth.value.dayOfWeek - 1 });
+			currentDates.value = Array.from({ length: 42 }, (_, cellIndex) => gridStart.add({ days: cellIndex }));
 		};
 		const previousYear = () => currentYear.value -= 1;
 		const nextYear = () => currentYear.value += 1;
@@ -845,103 +903,141 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const enterDate = (event) => {
 			if (event.key === "Enter") enterInputDate();
 		};
+		/** The day a key moves focus to from `day`, or undefined for a key that moves nothing. */
+		const dayAfterKey = (event, day) => {
+			switch (event.key) {
+				case "ArrowLeft": return day.subtract({ days: 1 });
+				case "ArrowRight": return day.add({ days: 1 });
+				case "ArrowUp": return day.subtract({ weeks: 1 });
+				case "ArrowDown": return day.add({ weeks: 1 });
+				case "PageUp": return day.subtract(event.shiftKey ? { years: 1 } : { months: 1 });
+				case "PageDown": return day.add(event.shiftKey ? { years: 1 } : { months: 1 });
+				case "Home": return day.subtract({ days: day.dayOfWeek - 1 });
+				case "End": return day.add({ days: 7 - day.dayOfWeek });
+			}
+		};
+		const focusTabStop = async () => {
+			await nextTick();
+			grid.value?.querySelector("[tabindex=\"0\"]")?.focus();
+		};
+		const onDayKeydown = (event, currentIndex) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				selectDate(currentIndex);
+				return;
+			}
+			const next = dayAfterKey(event, focusedDay.value);
+			if (!next) return;
+			event.preventDefault();
+			focusedDay.value = next;
+			currentMonth.value = next.month - 1;
+			currentYear.value = next.year;
+			focusTabStop();
+		};
 		const selectDate = (currentIndex) => {
-			date.value = selectedDate.value = new Date(currentDates.value[currentIndex]);
+			const picked = currentDates.value[currentIndex];
+			selectedDate.value = picked;
+			focusedDay.value = picked;
+			if (document.activeElement instanceof HTMLTableCellElement && grid.value?.contains(document.activeElement)) focusTabStop();
+			date.value = picked.toString();
 			if (__props.selectRange) {
 				const start = start_date.value;
 				if (start == null || end_date.value != null) {
-					start_date.value = date.value;
+					start_date.value = picked;
 					end_date.value = null;
-				} else if (validateDate(start) && selectedDate.value.getTime() < start.getTime()) {
+				} else if (Temporal.PlainDate.compare(picked, start) < 0) {
 					end_date.value = null;
-					start_date.value = date.value;
-				} else end_date.value = date.value;
-				if (startDateInput.value) startDateInput.value.value = parseDateToString(start_date.value) ?? "";
-				if (endDateInput.value) endDateInput.value.value = parseDateToString(end_date.value) ?? "";
+					start_date.value = picked;
+				} else end_date.value = picked;
+				if (startDateInput.value) startDateInput.value.value = boxText(start_date.value);
+				if (endDateInput.value) endDateInput.value.value = boxText(end_date.value);
 			}
 			emitData();
 		};
 		const testDateOrder = () => {
 			const start = start_date.value;
 			const end = end_date.value;
-			if (validateDate(end) && validateDate(start) && end.getTime() < start.getTime()) [start_date.value, end_date.value] = [end, start];
-		};
-		const validateDate = (dateValue) => {
-			return dateValue instanceof Date && !isNaN(dateValue.getTime());
+			if (start && end && Temporal.PlainDate.compare(end, start) < 0) [start_date.value, end_date.value] = [end, start];
 		};
 		const enterInputDate = () => {
 			if (startDateInput.value?.value == "") start_date.value = null;
-			else if (startDateInput.value) {
-				const start = new Date(startDateInput.value.value);
-				start_date.value = validateDate(start) ? start : null;
-			}
+			else if (startDateInput.value) start_date.value = readTypedDay(startDateInput.value.value) ?? null;
 			if (endDateInput.value?.value == "") end_date.value = null;
-			else if (endDateInput.value) {
-				const end = new Date(endDateInput.value.value);
-				end_date.value = validateDate(end) ? end : null;
-			}
-			if (validateDate(start_date.value)) {
-				if (validateDate(end_date.value)) testDateOrder();
+			else if (endDateInput.value) end_date.value = readTypedDay(endDateInput.value.value) ?? null;
+			if (start_date.value) {
+				if (end_date.value) testDateOrder();
 				selectedDate.value = start_date.value;
 			}
 			emitData();
 		};
 		const emitData = () => {
 			emit("get-date", {
-				start: __props.selectRange ? start_date.value : null,
-				end: __props.selectRange ? end_date.value : null,
-				selected: selectedDate.value
+				start: __props.selectRange ? start_date.value?.toString() ?? null : null,
+				end: __props.selectRange ? end_date.value?.toString() ?? null : null,
+				selected: selectedDate.value.toString()
 			});
 		};
 		/*******************
 		Hooks
 		*******************/
-		onMounted(async () => {
-			populateMonth();
-			await nextTick();
-			const $selectedDate = document.getElementsByClassName("selectedDate");
-			if ($selectedDate.length > 0) $selectedDate[0].focus();
-			else {
-				const $todaysDate = document.getElementsByClassName("todaysDate");
-				if ($todaysDate.length > 0) $todaysDate[0].focus();
-			}
-		});
+		populateMonth();
 		/*******************
 		Watchers
 		*******************/
-		watch([currentMonth, currentYear], populateMonth);
+		watch([currentMonth, currentYear], () => {
+			populateMonth();
+			const month = currentMonth.value + 1;
+			if (focusedDay.value.month !== month || focusedDay.value.year !== currentYear.value) focusedDay.value = focusedDay.value.with({
+				year: currentYear.value,
+				month
+			});
+		});
+		watch(date, (value) => {
+			const day = fromISODate(value ?? "");
+			if (!day || day.equals(selectedDate.value)) return;
+			selectedDate.value = day;
+			focusedDay.value = day;
+			currentMonth.value = day.month - 1;
+			currentYear.value = day.year;
+		});
 		/*******************
 		Expose
 		*******************/
 		__expose({
 			currentMonth,
 			currentYear,
-			selectedDate
+			selectedDate: computed(() => selectedDate.value.toString())
 		});
 		return (_ctx, _cache) => {
 			return __props.mode === "display" || __props.mode === "read" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-				createElementVNode("span", _hoisted_1$17, toDisplayString(date.value ? new Date(date.value).toLocaleDateString() : ""), 1),
+				createElementVNode("span", _hoisted_1$17, toDisplayString(displayValue.value), 1),
 				__props.label ? (openBlock(), createElementBlock("label", _hoisted_2$16, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
 				withDirectives(createElementVNode("p", {
 					id: unref(errorId),
 					class: "aform_error",
 					role: "alert"
 				}, toDisplayString(errorText.value), 9, _hoisted_3$14), [[vShow, errorText.value]])
-			], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_4$13, [createElementVNode("table", { onMousedown: preventCellSelection }, [createElementVNode("tbody", null, [
+			], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_4$13, [createElementVNode("table", {
+				ref_key: "grid",
+				ref: grid,
+				role: "grid",
+				"aria-label": monthAndYear.value,
+				onMousedown: preventCellSelection
+			}, [createElementVNode("tbody", null, [
 				createElementVNode("tr", null, [
 					createElementVNode("td", {
 						id: "previous-month-btn",
 						tabindex: -1,
 						onClick: previousMonth
 					}, "<"),
-					createElementVNode("th", _hoisted_5$13, toDisplayString(monthAndYear.value), 1),
+					createElementVNode("th", _hoisted_6$10, toDisplayString(monthAndYear.value), 1),
 					createElementVNode("td", {
 						id: "next-month-btn",
 						tabindex: -1,
 						onClick: nextMonth
 					}, ">")
 				]),
-				__props.selectRange ? (openBlock(), createElementBlock("tr", _hoisted_6$13, [createElementVNode("td", _hoisted_7$4, [createElementVNode("div", _hoisted_8$4, [
+				__props.selectRange ? (openBlock(), createElementBlock("tr", _hoisted_7$4, [createElementVNode("td", _hoisted_8$4, [createElementVNode("div", _hoisted_9$3, [
 					createElementVNode("input", {
 						ref: "start-date-input",
 						value: getStartDate.value,
@@ -950,7 +1046,7 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 						placeholder: "start date",
 						onBlur: _cache[0] || (_cache[0] = ($event) => enterInputDate()),
 						onKeydown: enterDate
-					}, null, 40, _hoisted_9$3),
+					}, null, 40, _hoisted_10$2),
 					_cache[2] || (_cache[2] = createElementVNode("div", null, "-", -1)),
 					createElementVNode("input", {
 						ref: "end-date-input",
@@ -960,17 +1056,11 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 						placeholder: "end date",
 						onBlur: _cache[1] || (_cache[1] = ($event) => enterInputDate()),
 						onKeydown: enterDate
-					}, null, 40, _hoisted_10$2)
+					}, null, 40, _hoisted_11$2)
 				])])])) : createCommentVNode("", true),
-				_cache[3] || (_cache[3] = createElementVNode("tr", { class: "days-header" }, [
-					createElementVNode("td", null, "M"),
-					createElementVNode("td", null, "T"),
-					createElementVNode("td", null, "W"),
-					createElementVNode("td", null, "T"),
-					createElementVNode("td", null, "F"),
-					createElementVNode("td", null, "S"),
-					createElementVNode("td", null, "S")
-				], -1)),
+				createElementVNode("tr", _hoisted_12$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(weekdayLetters.value, (letter, weekdayIndex) => {
+					return openBlock(), createElementBlock("td", { key: weekdayIndex }, toDisplayString(letter), 1);
+				}), 128))]),
 				(openBlock(), createElementBlock(Fragment, null, renderList(numberOfRows, (rowNo) => {
 					return createElementVNode("tr", { key: rowNo }, [(openBlock(), createElementBlock(Fragment, null, renderList(numberOfColumns, (colNo) => {
 						return createElementVNode("td", {
@@ -986,21 +1076,24 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 							}]),
 							contenteditable: false,
 							spellcheck: false,
-							tabindex: 0,
+							tabindex: getCurrentDate(rowNo, colNo).equals(focusedDay.value) ? 0 : -1,
+							"aria-label": fullDate(getCurrentDate(rowNo, colNo)),
+							"aria-selected": isPicked(getCurrentDate(rowNo, colNo)),
+							"aria-current": isTodaysDate(getCurrentDate(rowNo, colNo)) ? "date" : void 0,
 							onClick: withModifiers(($event) => selectDate(getCurrentCell(rowNo, colNo)), ["prevent", "stop"]),
-							onKeydown: withKeys(($event) => selectDate(getCurrentCell(rowNo, colNo)), ["enter"]),
+							onKeydown: ($event) => onDayKeydown($event, getCurrentCell(rowNo, colNo)),
 							onMouseover: ($event) => hoverDate(getCurrentCell(rowNo, colNo))
-						}, toDisplayString(new Date(getCurrentDate(rowNo, colNo)).getDate()), 43, _hoisted_11$2);
+						}, toDisplayString(getCurrentDate(rowNo, colNo).day), 43, _hoisted_13$1);
 					}), 64))]);
 				}), 64))
-			])], 32)], 512), withDirectives(createElementVNode("p", {
+			])], 40, _hoisted_5$13)]), withDirectives(createElementVNode("p", {
 				id: unref(errorId),
 				class: "aform_error",
 				role: "alert"
-			}, toDisplayString(errorText.value), 9, _hoisted_12$2), [[vShow, errorText.value]])], 64));
+			}, toDisplayString(errorText.value), 9, _hoisted_14$1), [[vShow, errorText.value]])], 64));
 		};
 	}
-}), [["__scopeId", "data-v-e22e44d1"]]);
+}), [["__scopeId", "data-v-d0133599"]]);
 //#endregion
 //#region src/components/form/ADateTimeInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$16 = { class: "adate_time" };
@@ -1011,7 +1104,7 @@ var _hoisted_5$12 = {
 	key: 0,
 	class: "colon"
 };
-var _hoisted_6$12 = ["onKeydown"];
+var _hoisted_6$9 = ["onKeydown"];
 //#endregion
 //#region src/components/form/ADateTimeInput.vue
 var ADateTimeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1185,7 +1278,7 @@ var ADateTimeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 						_cache[8] || (_cache[8] = withKeys(withModifiers(($event) => tick("seconds"), ["prevent"]), ["up"])),
 						_cache[9] || (_cache[9] = withKeys(withModifiers(($event) => tick("seconds", -1), ["prevent"]), ["down"]))
 					]
-				}, null, 40, _hoisted_6$12)), [[vModelText, timeData.seconds]]) : createCommentVNode("", true),
+				}, null, 40, _hoisted_6$9)), [[vModelText, timeData.seconds]]) : createCommentVNode("", true),
 				!__props.allowMilitaryTime ? withDirectives((openBlock(), createElementBlock("select", {
 					key: 2,
 					ref: "meridiem-selector",
@@ -1229,6 +1322,7 @@ var ADateSelection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			type: Boolean,
 			default: false
 		},
+		defaultDate: {},
 		defaultHours: { default: 12 },
 		defaultMinutes: { default: 0 },
 		defaultSeconds: { default: 0 },
@@ -1246,15 +1340,14 @@ var ADateSelection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		provide("select-range", __props.selectRange);
-		const today = /* @__PURE__ */ new Date();
+		const today = Temporal.Now.plainDateISO();
 		const pickerStart = ref(today);
 		const pickerEnd = ref(today);
 		const startTimeMs = ref(0);
 		const endTimeMs = ref(0);
-		const mergeDateTime = (date, timeMs) => {
-			const d = new Date(date);
-			d.setHours(0, 0, 0, 0);
-			return new Date(d.getTime() + timeMs);
+		const mergeDateTime = (day, timeMs) => {
+			const midnight = day.toZonedDateTime(Temporal.Now.timeZoneId());
+			return new Date(midnight.epochMilliseconds + timeMs);
 		};
 		const timePayloadToMs = (payload) => {
 			let h;
@@ -1276,8 +1369,8 @@ var ADateSelection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		const handleDate = (data) => {
 			emit("get-date", data);
 			if (__props.selectRange) {
-				pickerStart.value = data.start ?? data.selected;
-				pickerEnd.value = data.end ?? data.selected;
+				pickerStart.value = fromISODate(data.start ?? data.selected) ?? today;
+				pickerEnd.value = fromISODate(data.end ?? data.selected) ?? today;
 				tryEmitRange("user");
 			}
 		};
@@ -1294,9 +1387,10 @@ var ADateSelection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			return openBlock(), createElementBlock("div", _hoisted_1$15, [
 				__props.showDate ? (openBlock(), createBlock(ADatePicker_default, {
 					key: 0,
+					"model-value": __props.defaultDate,
 					"select-range": __props.selectRange,
 					onGetDate: handleDate
-				}, null, 8, ["select-range"])) : createCommentVNode("", true),
+				}, null, 8, ["model-value", "select-range"])) : createCommentVNode("", true),
 				__props.showTime ? (openBlock(), createBlock(ADateTimeInput_default, {
 					key: 1,
 					"allow-military-time": __props.allowMilitaryTime,
@@ -1334,21 +1428,67 @@ var ADateSelection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-48e71f28"]]);
+}), [["__scopeId", "data-v-4a079b23"]]);
+//#endregion
+//#region src/utils/fieldCalendar.ts
+/** The keys a date field opens its calendar on: the ones a date input opens the browser's own calendar on, in Chrome. */
+var opensCalendar = (event) => event.key === " " || event.key === "F4" || event.altKey && event.key === "ArrowDown";
+/**
+* The calendar a date field opens from its box, and the keys and focus that go with it.
+* @param box - the field's box, which focus returns to when the calendar closes
+* @param calendar - the calendar, while it is open
+* @param uuid - the field's own id, when it has one
+*/
+function useFieldCalendar(box, calendar, uuid) {
+	const showPicker = ref(false);
+	const calendarId = `${uuid ?? `aform-date-${useId()}`}-calendar`;
+	onClickOutside(calendar, () => showPicker.value = false);
+	const closePicker = () => {
+		box.value?.focus();
+		showPicker.value = false;
+	};
+	const openFromKey = async (event) => {
+		const readOnlyDown = event.key === "ArrowDown" && box.value instanceof HTMLInputElement && box.value.readOnly;
+		if (!opensCalendar(event) && !readOnlyDown) return;
+		event.preventDefault();
+		showPicker.value = true;
+		await nextTick();
+		const root = calendar.value?.$el;
+		if (root instanceof HTMLElement) root.querySelector("[role=\"grid\"] [tabindex=\"0\"]")?.focus();
+	};
+	const closeOnEscape = (event) => {
+		if (event.key !== "Escape" || !showPicker.value) return;
+		event.stopPropagation();
+		closePicker();
+	};
+	const closeWhenFocusLeaves = (event) => {
+		const field = event.currentTarget;
+		const next = event.relatedTarget;
+		if (!(field instanceof Node && next instanceof Node && field.contains(next))) showPicker.value = false;
+	};
+	return {
+		showPicker,
+		calendarId,
+		closePicker,
+		openFromKey,
+		closeOnEscape,
+		closeWhenFocusLeaves
+	};
+}
 //#endregion
 //#region src/components/form/ADate.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = { class: "aform_form-element" };
-var _hoisted_2$13 = { class: "aform_display-value" };
-var _hoisted_3$12 = { class: "aform_field-label" };
-var _hoisted_4$11 = [
+var _hoisted_1$14 = { class: "aform_display-value" };
+var _hoisted_2$13 = { class: "aform_field-label" };
+var _hoisted_3$12 = [
 	"id",
+	"aria-controls",
 	"disabled",
 	"required",
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_5$11 = ["for"];
-var _hoisted_6$11 = ["id"];
+var _hoisted_4$11 = ["for"];
+var _hoisted_5$11 = ["id"];
 //#endregion
 //#region src/components/form/ADate.vue
 var ADate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1372,63 +1512,69 @@ var ADate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
 		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const modelValue = useModel(__props, "modelValue");
-		const currentDate = ref(modelValue.value ? new Date(modelValue.value) : /* @__PURE__ */ new Date());
-		const inputDate = computed({
-			get: () => currentDate.value.toISOString().split("T")[0],
-			set: (value) => {
-				currentDate.value = new Date(value);
-				modelValue.value = value;
-			}
+		const boxDay = computed({
+			get: () => modelValue.value,
+			set: (text) => modelValue.value = dayFromBox(text)
 		});
-		const pickerRef = useTemplateRef("picker");
-		const showPicker = ref(false);
-		onClickOutside(pickerRef, () => showPicker.value = false);
+		const displayValue = computed(() => modelValue.value ? fromISODate(modelValue.value)?.toLocaleString() ?? "Invalid Date" : "");
+		const { showPicker, calendarId, closePicker, openFromKey, closeOnEscape, closeWhenFocusLeaves } = useFieldCalendar(useTemplateRef("date"), useTemplateRef("picker"), __props.uuid);
 		const openPicker = () => {
 			if (__props.mode !== "read") showPicker.value = !showPicker.value;
 		};
-		watch(() => modelValue.value, (newValue) => {
-			if (newValue) currentDate.value = new Date(newValue);
-		});
 		const handleDate = (data) => {
-			currentDate.value = data.selected;
-			modelValue.value = inputDate.value;
-			showPicker.value = false;
+			modelValue.value = data.selected;
+			closePicker();
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$14, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$13, toDisplayString(modelValue.value ? new Date(inputDate.value).toLocaleDateString() : ""), 1), createElementVNode("label", _hoisted_3$12, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+			return openBlock(), createElementBlock("div", {
+				class: "aform_form-element",
+				onFocusout: _cache[2] || (_cache[2] = (...args) => unref(closeWhenFocusLeaves) && unref(closeWhenFocusLeaves)(...args)),
+				onKeydown: _cache[3] || (_cache[3] = (...args) => unref(closeOnEscape) && unref(closeOnEscape)(...args))
+			}, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_1$14, toDisplayString(displayValue.value), 1), createElementVNode("label", _hoisted_2$13, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 				withDirectives(createElementVNode("input", {
 					id: __props.uuid,
 					ref: "date",
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputDate.value = $event),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => boxDay.value = $event),
 					class: "aform_input-field",
 					type: "date",
+					"aria-haspopup": "dialog",
+					"aria-controls": unref(showPicker) ? unref(calendarId) : void 0,
 					disabled: __props.mode === "read",
 					required: __props.required,
 					"aria-invalid": unref(invalid),
 					"aria-describedby": unref(describedBy),
-					onClick: openPicker
-				}, null, 8, _hoisted_4$11), [[vModelText, inputDate.value]]),
+					onClick: withModifiers(openPicker, ["prevent"]),
+					onKeydown: _cache[1] || (_cache[1] = (...args) => unref(openFromKey) && unref(openFromKey)(...args))
+				}, null, 40, _hoisted_3$12), [[vModelText, boxDay.value]]),
 				createElementVNode("label", {
 					class: "aform_field-label",
 					for: __props.uuid
-				}, toDisplayString(__props.label), 9, _hoisted_5$11),
+				}, toDisplayString(__props.label), 9, _hoisted_4$11),
 				withDirectives(createElementVNode("p", {
 					id: unref(errorId),
 					class: "aform_error",
 					role: "alert"
-				}, toDisplayString(errorText.value), 9, _hoisted_6$11), [[vShow, errorText.value]]),
-				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
+				}, toDisplayString(errorText.value), 9, _hoisted_5$11), [[vShow, errorText.value]]),
+				unref(showPicker) ? (openBlock(), createBlock(ADateSelection_default, {
 					key: 0,
+					id: unref(calendarId),
 					ref: "picker",
 					class: "adate-picker",
+					role: "dialog",
+					"aria-label": __props.label,
+					"default-date": modelValue.value || void 0,
 					"select-range": false,
 					"show-time": false,
 					onGetDate: handleDate
-				}, null, 512)) : createCommentVNode("", true)
-			], 64))]);
+				}, null, 8, [
+					"id",
+					"aria-label",
+					"default-date"
+				])) : createCommentVNode("", true)
+			], 64))], 32);
 		};
 	}
-}), [["__scopeId", "data-v-e1403ea0"]]);
+}), [["__scopeId", "data-v-16f8f8f2"]]);
 //#endregion
 //#region src/components/form/ADropdown.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$13 = { class: "aform_form-element" };
@@ -1448,7 +1594,7 @@ var _hoisted_4$10 = [
 	"onKeydown"
 ];
 var _hoisted_5$10 = ["id", "aria-label"];
-var _hoisted_6$10 = {
+var _hoisted_6$8 = {
 	key: 0,
 	class: "loading autocomplete-result"
 };
@@ -1603,7 +1749,7 @@ var ADropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					class: "autocomplete-results",
 					role: "listbox",
 					"aria-label": __props.label
-				}, [dropdown.loading ? (openBlock(), createElementBlock("li", _hoisted_6$10, "Loading results...")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(dropdown.results, (result, i) => {
+				}, [dropdown.loading ? (openBlock(), createElementBlock("li", _hoisted_6$8, "Loading results...")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(dropdown.results, (result, i) => {
 					return openBlock(), createElementBlock("li", {
 						id: `${unref(listboxId)}-opt-${i}`,
 						key: result,
@@ -1696,7 +1842,7 @@ var _hoisted_5$9 = [
 	"value",
 	"disabled"
 ];
-var _hoisted_6$9 = [
+var _hoisted_6$7 = [
 	"name",
 	"value",
 	"disabled"
@@ -1844,7 +1990,7 @@ var ASegmentedControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 						name: groupName.value,
 						value: choice,
 						disabled: __props.mode === "read"
-					}, null, 8, _hoisted_6$9)), [[vModelRadio, selected.value]]), createElementVNode("span", _hoisted_7$2, toDisplayString(segmentLabel(choice)), 1)], 14, _hoisted_4$9);
+					}, null, 8, _hoisted_6$7)), [[vModelRadio, selected.value]]), createElementVNode("span", _hoisted_7$2, toDisplayString(segmentLabel(choice)), 1)], 14, _hoisted_4$9);
 				}), 128))], 8, _hoisted_3$10),
 				withDirectives(createElementVNode("p", {
 					id: unref(errorId),
@@ -1857,18 +2003,19 @@ var ASegmentedControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 }), [["__scopeId", "data-v-8b740fd8"]]);
 //#endregion
 //#region src/components/form/ADateTime.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = { class: "aform_form-element" };
-var _hoisted_2$10 = { class: "aform_display-value" };
-var _hoisted_3$9 = { class: "aform_field-label" };
-var _hoisted_4$8 = [
+var _hoisted_1$11 = { class: "aform_display-value" };
+var _hoisted_2$10 = { class: "aform_field-label" };
+var _hoisted_3$9 = [
 	"id",
+	"aria-expanded",
+	"aria-controls",
 	"value",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_5$8 = ["for"];
-var _hoisted_6$8 = ["id"];
+var _hoisted_4$8 = ["for"];
+var _hoisted_5$8 = ["id"];
 //#endregion
 //#region src/components/form/ADateTime.vue
 var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1900,81 +2047,119 @@ var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
 		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const modelValue = useModel(__props, "modelValue");
-		const currentDateTime = ref(modelValue.value ? new Date(modelValue.value) : /* @__PURE__ */ new Date());
-		const showPicker = ref(false);
-		const pickerRef = ref(null);
-		onClickOutside(pickerRef, () => showPicker.value = false);
+		/** Now, cut down to the smallest unit the picker shows, so a pick that leaves the time alone saves the time shown. */
+		const now = () => Temporal.Now.zonedDateTimeISO().round({
+			smallestUnit: __props.useSeconds ? "second" : "minute",
+			roundingMode: "trunc"
+		});
+		/** The field's moment on the user's clock, or null when the value names no moment. */
+		const readMoment = (value) => {
+			const epochMilliseconds = new Date(value).getTime();
+			if (isNaN(epochMilliseconds)) return null;
+			return Temporal.Instant.fromEpochMilliseconds(epochMilliseconds).toZonedDateTimeISO(Temporal.Now.timeZoneId());
+		};
+		/** What the field holds for a value: its moment, or now for an empty field, where the picker starts. */
+		const heldMoment = (value) => value ? readMoment(value) : now();
+		const currentDateTime = ref(heldMoment(modelValue.value));
+		const { showPicker, calendarId, openFromKey, closeOnEscape, closeWhenFocusLeaves } = useFieldCalendar(useTemplateRef("box"), useTemplateRef("picker"), __props.uuid);
 		const openPicker = () => {
 			if (__props.mode !== "read") showPicker.value = true;
 		};
+		const WITHOUT_SECONDS = {
+			year: "numeric",
+			month: "numeric",
+			day: "numeric",
+			hour: "numeric",
+			minute: "numeric"
+		};
 		const displayValue = computed(() => {
 			if (!modelValue.value) return "";
-			return currentDateTime.value.toLocaleString();
+			const format = __props.useSeconds ? void 0 : WITHOUT_SECONDS;
+			return currentDateTime.value?.toPlainDateTime().toLocaleString(void 0, format) ?? "Invalid Date";
 		});
 		const datetimeDisplay = computed(() => displayValue.value);
 		const pickerDefaults = computed(() => {
-			const d = currentDateTime.value;
-			const hours24 = d.getHours();
+			const d = currentDateTime.value ?? now();
+			const hours24 = d.hour;
 			const meridiem = hours24 >= 12 ? "PM" : "AM";
 			const hours12 = hours24 % 12 || 12;
 			return {
 				hours: __props.allowMilitaryTime ? hours24 : hours12,
-				minutes: d.getMinutes(),
-				seconds: d.getSeconds(),
+				minutes: d.minute,
+				seconds: d.second,
 				meridiem
 			};
 		});
-		const emitModel = () => {
-			modelValue.value = currentDateTime.value.toISOString();
+		const setMoment = (moment) => {
+			currentDateTime.value = moment;
+			modelValue.value = moment.toInstant().toString({ fractionalSecondDigits: 3 });
 		};
 		const handleDate = (data) => {
-			const next = new Date(currentDateTime.value);
-			next.setFullYear(data.selected.getFullYear(), data.selected.getMonth(), data.selected.getDate());
-			currentDateTime.value = next;
-			emitModel();
+			const day = fromISODate(data.selected);
+			if (!day) return;
+			setMoment((currentDateTime.value ?? now()).with({
+				year: day.year,
+				month: day.month,
+				day: day.day
+			}));
 		};
 		const handleTime = (data) => {
 			if (data.source === "init") return;
-			const next = new Date(currentDateTime.value);
 			const hours = data.militaryTime ?? data.hours;
-			next.setHours(hours, data.minutes, __props.useSeconds ? data.seconds : 0, 0);
-			currentDateTime.value = next;
-			emitModel();
-		};
-		watch(() => modelValue.value, (newValue) => {
-			if (newValue) currentDateTime.value = new Date(newValue);
-		});
+			setMoment((currentDateTime.value ?? now()).with({
+				hour: hours,
+				minute: data.minutes,
+				second: __props.useSeconds ? data.seconds : 0,
+				millisecond: 0,
+				microsecond: 0,
+				nanosecond: 0
+			}));
+		};
+		watch(() => modelValue.value, (newValue) => currentDateTime.value = heldMoment(newValue));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$11, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$10, toDisplayString(displayValue.value), 1), createElementVNode("label", _hoisted_3$9, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+			return openBlock(), createElementBlock("div", {
+				class: "aform_form-element",
+				onFocusout: _cache[1] || (_cache[1] = (...args) => unref(closeWhenFocusLeaves) && unref(closeWhenFocusLeaves)(...args)),
+				onKeydown: _cache[2] || (_cache[2] = (...args) => unref(closeOnEscape) && unref(closeOnEscape)(...args))
+			}, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_1$11, toDisplayString(displayValue.value), 1), createElementVNode("label", _hoisted_2$10, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 				createElementVNode("input", {
 					id: __props.uuid,
+					ref: "box",
 					class: "aform_input-field",
 					type: "text",
+					role: "combobox",
+					"aria-haspopup": "dialog",
+					"aria-expanded": unref(showPicker),
+					"aria-controls": unref(showPicker) ? unref(calendarId) : void 0,
 					value: datetimeDisplay.value,
 					placeholder: "Select date and time",
 					disabled: __props.mode === "read",
 					readonly: "",
 					"aria-invalid": unref(invalid),
 					"aria-describedby": unref(describedBy),
-					onClick: openPicker
-				}, null, 8, _hoisted_4$8),
+					onClick: openPicker,
+					onKeydown: _cache[0] || (_cache[0] = (...args) => unref(openFromKey) && unref(openFromKey)(...args))
+				}, null, 40, _hoisted_3$9),
 				createElementVNode("label", {
 					class: "aform_field-label",
 					for: __props.uuid
-				}, toDisplayString(__props.label), 9, _hoisted_5$8),
+				}, toDisplayString(__props.label), 9, _hoisted_4$8),
 				withDirectives(createElementVNode("p", {
 					id: unref(errorId),
 					class: "aform_error",
 					role: "alert"
-				}, toDisplayString(errorText.value), 9, _hoisted_6$8), [[vShow, errorText.value]]),
-				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
+				}, toDisplayString(errorText.value), 9, _hoisted_5$8), [[vShow, errorText.value]]),
+				unref(showPicker) ? (openBlock(), createBlock(ADateSelection_default, {
 					key: 0,
-					ref_key: "pickerRef",
-					ref: pickerRef,
+					id: unref(calendarId),
+					ref: "picker",
 					class: "adatetime-picker",
+					role: "dialog",
+					"aria-label": __props.label,
 					"select-range": false,
 					"show-date": true,
 					"show-time": true,
+					"default-date": currentDateTime.value?.toPlainDate().toString(),
 					"default-hours": pickerDefaults.value.hours,
 					"default-minutes": pickerDefaults.value.minutes,
 					"default-seconds": pickerDefaults.value.seconds,
@@ -1984,6 +2169,9 @@ var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					onGetDate: handleDate,
 					onGetTime: handleTime
 				}, null, 8, [
+					"id",
+					"aria-label",
+					"default-date",
 					"default-hours",
 					"default-minutes",
 					"default-seconds",
@@ -1991,10 +2179,10 @@ var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"allow-military-time",
 					"use-seconds"
 				])) : createCommentVNode("", true)
-			], 64))]);
+			], 64))], 32);
 		};
 	}
-}), [["__scopeId", "data-v-427253ba"]]);
+}), [["__scopeId", "data-v-05cbbabe"]]);
 //#endregion
 //#region src/components/form/ADuration.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$10 = { class: "aduration" };
@@ -2005,7 +2193,7 @@ var _hoisted_4$7 = {
 	class: "aduration__summary"
 };
 var _hoisted_5$7 = { class: "aduration__value" };
-var _hoisted_6$7 = { class: "aduration__ms" };
+var _hoisted_6$6 = { class: "aduration__held" };
 //#endregion
 //#region src/components/form/ADuration.vue
 var ADuration_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -2030,47 +2218,40 @@ var ADuration_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const modelValue = useModel(__props, "modelValue");
 		const startDatetime = ref(null);
 		const endDatetime = ref(null);
-		const duration = computed(() => {
-			if (!startDatetime.value || !endDatetime.value) return 0;
-			const ms = endDatetime.value.getTime() - startDatetime.value.getTime();
-			return ms > 0 ? ms : 0;
-		});
-		watch(duration, (newMs) => {
-			modelValue.value = newMs;
-		});
+		const durationBetween = (start, end) => Temporal.Duration.from({ milliseconds: Math.max(end.getTime() - start.getTime(), 0) }).round({ largestUnit: "days" }).toString();
 		const handleRange = (data) => {
 			if (data.source === "init") return;
 			startDatetime.value = data.start;
 			endDatetime.value = data.end;
-			modelValue.value = duration.value;
-		};
-		const humanDuration = computed(() => {
-			const ms = duration.value;
-			if (ms === 0) return "0s";
-			const s = Math.floor(ms / 1e3) % 60;
-			const m = Math.floor(ms / 6e4) % 60;
-			const h = Math.floor(ms / 36e5) % 24;
-			const d = Math.floor(ms / 864e5);
-			return [
-				d && `${d}d`,
-				h && `${h}h`,
-				m && `${m}m`,
-				s && `${s}s`
-			].filter(Boolean).join(" ") || "0s";
-		});
+			modelValue.value = durationBetween(data.start, data.end);
+		};
+		const readDuration = (value) => {
+			try {
+				return Temporal.Duration.from(value);
+			} catch {
+				return;
+			}
+		};
+		const UNIT_SUFFIXES = [
+			["years", "y"],
+			["months", "mo"],
+			["weeks", "w"],
+			["days", "d"],
+			["hours", "h"],
+			["minutes", "m"]
+		];
+		const describeDuration = (duration) => {
+			const parts = UNIT_SUFFIXES.filter(([unit]) => duration[unit]).map(([unit, suffix]) => `${duration[unit]}${suffix}`);
+			const seconds = duration.seconds + duration.milliseconds / 1e3 + duration.microseconds / 1e6 + duration.nanoseconds / 1e9;
+			if (seconds) parts.push(`${seconds}s`);
+			return parts.join(" ") || "0s";
+		};
+		const heldDuration = computed(() => modelValue.value ? readDuration(modelValue.value) : void 0);
+		const humanDuration = computed(() => heldDuration.value ? describeDuration(heldDuration.value) : "0s");
 		const displayValue = computed(() => {
-			const ms = modelValue.value;
-			if (!ms) return "—";
-			const s = Math.floor(ms / 1e3) % 60;
-			const m = Math.floor(ms / 6e4) % 60;
-			const h = Math.floor(ms / 36e5) % 24;
-			const d = Math.floor(ms / 864e5);
-			return [
-				d && `${d}d`,
-				h && `${h}h`,
-				m && `${m}m`,
-				s && `${s}s`
-			].filter(Boolean).join(" ") || "0s";
+			if (!modelValue.value) return "—";
+			if (!heldDuration.value) return "Invalid Duration";
+			return heldDuration.value.blank ? "—" : describeDuration(heldDuration.value);
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$10, [__props.mode === "display" || __props.mode === "read" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$9, toDisplayString(displayValue.value), 1), createElementVNode("label", null, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(ADateSelection_default, {
@@ -2084,25 +2265,26 @@ var ADuration_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}, null, 8, ["allow-military-time", "use-seconds"]), createElementVNode("div", _hoisted_3$8, [createElementVNode("label", null, toDisplayString(__props.label), 1), startDatetime.value && endDatetime.value ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
 				_cache[0] || (_cache[0] = createElementVNode("span", { class: "aduration__label" }, "Duration:", -1)),
 				createElementVNode("span", _hoisted_5$7, toDisplayString(humanDuration.value), 1),
-				createElementVNode("span", _hoisted_6$7, "(" + toDisplayString(modelValue.value ?? 0) + " ms)", 1)
+				createElementVNode("span", _hoisted_6$6, "(" + toDisplayString(modelValue.value) + ")", 1)
 			])) : createCommentVNode("", true)])], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-64f6240e"]]);
+}), [["__scopeId", "data-v-133162a6"]]);
 //#endregion
 //#region src/components/form/ADateRange.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = { class: "aform_form-element" };
-var _hoisted_2$8 = { class: "aform_display-value" };
-var _hoisted_3$7 = { class: "aform_field-label" };
-var _hoisted_4$6 = [
+var _hoisted_1$9 = { class: "aform_display-value" };
+var _hoisted_2$8 = { class: "aform_field-label" };
+var _hoisted_3$7 = [
 	"id",
+	"aria-expanded",
+	"aria-controls",
 	"value",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_5$6 = ["for"];
-var _hoisted_6$6 = ["id"];
+var _hoisted_4$6 = ["for"];
+var _hoisted_5$6 = ["id"];
 //#endregion
 //#region src/components/form/ADateRange.vue
 var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -2126,22 +2308,18 @@ var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
-		const fmt = (d) => new Date(d).toLocaleDateString();
+		const fmt = (d) => fromISODate(d)?.toLocaleString() ?? "Invalid Date";
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
 		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const modelValue = useModel(__props, "modelValue");
-		const startDate = ref(modelValue.value.start_date ? new Date(modelValue.value.start_date) : null);
-		const endDate = ref(modelValue.value.end_date ? new Date(modelValue.value.end_date) : null);
-		const showPicker = ref(false);
-		const pickerRef = ref(null);
-		onClickOutside(pickerRef, () => showPicker.value = false);
+		const readDay = (day) => day ? fromISODate(day) ?? null : null;
+		const startDate = ref(readDay(modelValue.value?.start_date));
+		const endDate = ref(readDay(modelValue.value?.end_date));
+		const { showPicker, calendarId, closePicker, openFromKey, closeOnEscape, closeWhenFocusLeaves } = useFieldCalendar(useTemplateRef("box"), useTemplateRef("picker"), __props.uuid);
 		const openPicker = () => {
 			if (__props.mode !== "read") showPicker.value = true;
 		};
-		const formatDate = (d) => {
-			if (!d) return "";
-			return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
-		};
+		const formatDate = (d) => d?.toLocaleString() ?? "";
 		const rangeDisplay = computed(() => {
 			const s = formatDate(startDate.value);
 			const e = formatDate(endDate.value);
@@ -2150,8 +2328,8 @@ var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			return "";
 		});
 		const displayValue = computed(() => {
-			const s = modelValue.value.start_date;
-			const e = modelValue.value.end_date;
+			const s = modelValue.value?.start_date;
+			const e = modelValue.value?.end_date;
 			if (!s && !e) return "";
 			if (s && e) return `${fmt(s)} — ${fmt(e)}`;
 			if (s) return `From ${fmt(s)}`;
@@ -2160,64 +2338,75 @@ var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const ensureOrder = () => {
 			const s = startDate.value;
 			const e = endDate.value;
-			if (s && e && e.getTime() < s.getTime()) [startDate.value, endDate.value] = [e, s];
+			if (s && e && Temporal.PlainDate.compare(e, s) < 0) [startDate.value, endDate.value] = [e, s];
 		};
-		const toISODate = (d) => d ? d.toISOString().split("T")[0] : null;
 		const emitModel = () => {
 			modelValue.value = {
-				start_date: toISODate(startDate.value),
-				end_date: toISODate(endDate.value)
+				start_date: startDate.value?.toString() ?? null,
+				end_date: endDate.value?.toString() ?? null
 			};
 		};
 		const handlePickerDate = (data) => {
-			if (data.start) startDate.value = data.start;
+			if (data.start) startDate.value = readDay(data.start);
 			if (data.end) {
-				endDate.value = data.end;
+				endDate.value = readDay(data.end);
 				ensureOrder();
-				showPicker.value = false;
+				closePicker();
 			}
 			emitModel();
 		};
 		watch(() => modelValue.value, (newVal) => {
-			startDate.value = newVal.start_date ? new Date(newVal.start_date) : null;
-			endDate.value = newVal.end_date ? new Date(newVal.end_date) : null;
+			startDate.value = readDay(newVal?.start_date);
+			endDate.value = readDay(newVal?.end_date);
 		}, { deep: true });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$9, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$8, toDisplayString(displayValue.value), 1), createElementVNode("label", _hoisted_3$7, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+			return openBlock(), createElementBlock("div", {
+				class: "aform_form-element",
+				onFocusout: _cache[1] || (_cache[1] = (...args) => unref(closeWhenFocusLeaves) && unref(closeWhenFocusLeaves)(...args)),
+				onKeydown: _cache[2] || (_cache[2] = (...args) => unref(closeOnEscape) && unref(closeOnEscape)(...args))
+			}, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_1$9, toDisplayString(displayValue.value), 1), createElementVNode("label", _hoisted_2$8, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 				createElementVNode("input", {
 					id: __props.uuid,
+					ref: "box",
 					class: "aform_input-field",
 					type: "text",
+					role: "combobox",
+					"aria-haspopup": "dialog",
+					"aria-expanded": unref(showPicker),
+					"aria-controls": unref(showPicker) ? unref(calendarId) : void 0,
 					value: rangeDisplay.value,
 					placeholder: "Select date range",
 					disabled: __props.mode === "read",
 					readonly: "",
 					"aria-invalid": unref(invalid),
 					"aria-describedby": unref(describedBy),
-					onClick: openPicker
-				}, null, 8, _hoisted_4$6),
+					onClick: openPicker,
+					onKeydown: _cache[0] || (_cache[0] = (...args) => unref(openFromKey) && unref(openFromKey)(...args))
+				}, null, 40, _hoisted_3$7),
 				createElementVNode("label", {
 					class: "aform_field-label",
 					for: __props.uuid
-				}, toDisplayString(__props.label), 9, _hoisted_5$6),
+				}, toDisplayString(__props.label), 9, _hoisted_4$6),
 				withDirectives(createElementVNode("p", {
 					id: unref(errorId),
 					class: "aform_error",
 					role: "alert"
-				}, toDisplayString(errorText.value), 9, _hoisted_6$6), [[vShow, errorText.value]]),
-				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
+				}, toDisplayString(errorText.value), 9, _hoisted_5$6), [[vShow, errorText.value]]),
+				unref(showPicker) ? (openBlock(), createBlock(ADateSelection_default, {
 					key: 0,
-					ref_key: "pickerRef",
-					ref: pickerRef,
+					id: unref(calendarId),
+					ref: "picker",
 					class: "adaterange-picker",
+					role: "dialog",
+					"aria-label": __props.label,
 					"select-range": true,
 					"show-time": false,
 					onGetDate: handlePickerDate
-				}, null, 512)) : createCommentVNode("", true)
-			], 64))]);
+				}, null, 8, ["id", "aria-label"])) : createCommentVNode("", true)
+			], 64))], 32);
 		};
 	}
-}), [["__scopeId", "data-v-b7560709"]]);
+}), [["__scopeId", "data-v-ac2c160b"]]);
 //#endregion
 //#region src/components/AForm.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$8 = { class: "aform" };
@@ -2540,18 +2729,22 @@ var ANumericInput_default = /* @__PURE__ */ defineComponent({
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
 		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const inputNumber = useModel(__props, "modelValue");
+		const boxNumber = computed({
+			get: () => inputNumber.value,
+			set: (value) => inputNumber.value = numberFromBox(value)
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$6, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$5, toDisplayString(inputNumber.value ?? ""), 1), createElementVNode("label", _hoisted_3$4, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 				withDirectives(createElementVNode("input", {
 					id: __props.uuid,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputNumber.value = $event),
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => boxNumber.value = $event),
 					class: "aform_input-field",
 					type: "number",
 					disabled: __props.mode === "read",
 					required: __props.required,
 					"aria-invalid": unref(invalid),
 					"aria-describedby": unref(describedBy)
-				}, null, 8, _hoisted_4$4), [[vModelText, inputNumber.value]]),
+				}, null, 8, _hoisted_4$4), [[vModelText, boxNumber.value]]),
 				createElementVNode("label", {
 					class: "aform_field-label",
 					for: __props.uuid
@@ -2629,9 +2822,9 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		conversionFactorLabel: { default: "Conversion Factor" }
 	}, {
 		"modelValue": { default: () => ({
-			qty: 0,
+			qty: null,
 			uom: "",
-			stockQty: 0,
+			stockQty: null,
 			stockUom: "",
 			conversionFactor: 1
 		}) },
@@ -2645,11 +2838,11 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		const uoms = computed(() => __props.options.uoms ?? []);
 		const roundQty = (value) => Number(value.toFixed(6));
 		const resolveConversionFactor = (uom) => {
-			const stockUom = __props.options.stockUom ?? modelValue.value.stockUom;
+			const stockUom = __props.options.stockUom ?? modelValue.value?.stockUom;
 			if (!uom || uom === stockUom) return 1;
 			const mapped = __props.options.conversionFactors?.[uom];
 			if (mapped !== void 0) return mapped;
-			if (uom === modelValue.value.uom) return modelValue.value.conversionFactor ?? 1;
+			if (uom === modelValue.value?.uom) return modelValue.value.conversionFactor ?? 1;
 			return 1;
 		};
 		const recompute = (qty, uom) => {
@@ -2658,17 +2851,17 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				qty,
 				uom,
 				conversionFactor,
-				stockUom: __props.options.stockUom ?? modelValue.value.stockUom,
-				stockQty: roundQty(qty * conversionFactor)
+				stockUom: __props.options.stockUom ?? modelValue.value?.stockUom ?? "",
+				stockQty: qty === null ? null : roundQty(qty * conversionFactor)
 			};
 		};
 		const qty = computed({
-			get: () => modelValue.value?.qty ?? 0,
-			set: (value) => recompute(value, modelValue.value?.uom ?? "")
+			get: () => modelValue.value?.qty ?? null,
+			set: (value) => recompute(numberFromBox(value), modelValue.value?.uom ?? "")
 		});
 		const uom = computed({
 			get: () => modelValue.value?.uom ?? "",
-			set: (value) => recompute(modelValue.value?.qty ?? 0, value)
+			set: (value) => recompute(modelValue.value?.qty ?? null, value)
 		});
 		const qtyNavigationKeys = /* @__PURE__ */ new Set([
 			"Backspace",
@@ -2737,7 +2930,7 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		});
 		const displayText = computed(() => {
 			const v = modelValue.value;
-			if (!v || !v.uom) return "—";
+			if (!v || !v.uom || v.qty === null) return "—";
 			const base = `${v.qty} ${v.uom}`;
 			return showStock.value ? `${base} (${v.stockQty} ${v.stockUom})` : base;
 		});
@@ -2801,19 +2994,19 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				])])]),
 				createElementVNode("div", _hoisted_14, [
 					createElementVNode("div", _hoisted_15, [createElementVNode("input", {
-						value: modelValue.value.stockUom,
+						value: modelValue.value?.stockUom,
 						class: "aform_input-field aquantity__stock-field",
 						type: "text",
 						disabled: ""
 					}, null, 8, _hoisted_16), createElementVNode("label", _hoisted_17, toDisplayString(__props.stockUomLabel), 1)]),
 					createElementVNode("div", _hoisted_18, [createElementVNode("input", {
-						value: modelValue.value.stockQty,
+						value: modelValue.value?.stockQty,
 						class: "aform_input-field aquantity__stock-field",
 						type: "number",
 						disabled: ""
 					}, null, 8, _hoisted_19), createElementVNode("label", _hoisted_20, toDisplayString(__props.stockQtyLabel), 1)]),
 					createElementVNode("div", _hoisted_21, [createElementVNode("input", {
-						value: modelValue.value.conversionFactor,
+						value: modelValue.value?.conversionFactor,
 						class: "aform_input-field aquantity__stock-field",
 						type: "number",
 						disabled: ""
@@ -2827,7 +3020,7 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-a904c817"]]);
+}), [["__scopeId", "data-v-b2c39a5c"]]);
 //#endregion
 //#region src/directives/mask.ts
 /**