@stonecrop/aform 0.34.0 → 0.36.0

package/dist/aform.js

@@ -1,7 +1,9 @@
 import { hasBadgeOptions, isBadgeDescriptor, lookupBadge, selectChoices } from "@stonecrop/schema";
 import { install as install$1 } from "@stonecrop/atable";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, useTemplateRef, vModelCheckbox, vModelRadio, vModelSelect, vModelText, vShow, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+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
 /**
@@ -115,18 +117,32 @@ function resolvedFieldsToColumns(fields) {
 	return columns;
 }
 //#endregion
+//#region src/composables/fieldErrorA11y.ts
+function fieldErrorA11y(uuid, errorText) {
+	const errorId = computed(() => uuid ? `${uuid}-error` : void 0);
+	const hasError = computed(() => Boolean(errorText.value));
+	return {
+		errorId,
+		hasError,
+		describedBy: computed(() => hasError.value && errorId.value ? errorId.value : void 0),
+		invalid: computed(() => hasError.value ? true : void 0)
+	};
+}
+//#endregion
 //#region src/components/form/ACheckbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$20 = { class: "aform_form-element" };
 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"
+	"required",
+	"aria-invalid",
+	"aria-describedby"
 ];
-var _hoisted_7$7 = ["innerHTML"];
+var _hoisted_7$7 = ["id"];
 var ACheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ACheckbox",
 	props: /*@__PURE__*/ mergeModels({
@@ -151,6 +167,7 @@ var ACheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
+		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const checkbox = useModel(__props, "modelValue");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$20, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("label", _hoisted_2$19, toDisplayString(__props.label), 1), createElementVNode("span", _hoisted_3$17, toDisplayString(checkbox.value ? "✓" : "✗"), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -164,12 +181,15 @@ var ACheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					type: "checkbox",
 					class: "aform_checkbox",
 					disabled: __props.mode === "read",
-					required: __props.required
-				}, null, 8, _hoisted_6$16), [[vModelCheckbox, checkbox.value]])]),
+					required: __props.required,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy)
+				}, null, 8, _hoisted_6$13), [[vModelCheckbox, checkbox.value]])]),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_7$7), [[vShow, errorText.value]])
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_7$7), [[vShow, errorText.value]])
 			], 64))]);
 		};
 	}
@@ -183,17 +203,35 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#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-ca06741d"]]);
+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 = {
+var _hoisted_1$19 = { class: "aform_display-value" };
+var _hoisted_2$18 = {
 	key: 0,
-	class: "aform_display-value"
+	class: "aform_field-label"
 };
-var _hoisted_2$18 = { class: "aform_form-link-wrapper" };
-var _hoisted_3$16 = { class: "input-group" };
-var _hoisted_4$15 = [
+var _hoisted_3$16 = { class: "aform_form-link-wrapper" };
+var _hoisted_4$15 = { class: "input-group" };
+var _hoisted_5$15 = [
 	"placeholder",
+	"size",
 	"aria-label",
 	"required",
 	"aria-expanded",
@@ -202,18 +240,28 @@ var _hoisted_4$15 = [
 	"disabled",
 	"onKeydown"
 ];
-var _hoisted_5$15 = ["onKeydown"];
-var _hoisted_6$15 = ["aria-label"];
-var _hoisted_7$6 = {
+var _hoisted_6$12 = ["onKeydown"];
+var _hoisted_7$6 = ["data-icon"];
+var _hoisted_8$6 = {
+	key: 0,
+	d: "M6 3.5 10.5 8 6 12.5"
+};
+var _hoisted_9$5 = {
+	key: 1,
+	d: "M2.5 8h11M9 3.5 13.5 8 9 12.5"
+};
+var _hoisted_10$4 = { class: "aform_form-btn-name" };
+var _hoisted_11$4 = ["aria-label"];
+var _hoisted_12$4 = {
 	key: 0,
 	class: "autocomplete-result loading"
 };
-var _hoisted_8$6 = [
+var _hoisted_13$3 = [
 	"id",
 	"aria-selected",
 	"onMousedown"
 ];
-var _hoisted_9$5 = {
+var _hoisted_14$3 = {
 	key: 0,
 	class: "aform_field-label"
 };
@@ -274,6 +322,7 @@ var AFormLink_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return linkDisplayText(modelValue.value) ?? id;
 		});
 		const searchText = ref(hasValidId.value ? displayedText.value : "");
+		const embeddedSize = computed(() => __props.embedded ? Math.max((searchText.value || __props.placeholder || "").length, 1) : void 0);
 		const dropdownOpen = ref(false);
 		const loading = ref(false);
 		const dropdownResults = ref([]);
@@ -373,7 +422,7 @@ var AFormLink_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			if (activeIndex.value !== null && dropdownResults.value[activeIndex.value]) selectOption(dropdownResults.value[activeIndex.value]);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["aform_form-element", { "aform_form-element--embedded": __props.embedded }]) }, [__props.mode === "display" ? (openBlock(), createElementBlock("span", _hoisted_1$19, toDisplayString(displayedText.value), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [withDirectives((openBlock(), createElementBlock("div", _hoisted_2$18, [createElementVNode("div", _hoisted_3$16, [withDirectives(createElementVNode("input", {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["aform_form-element", { "aform_form-element--embedded": __props.embedded }]) }, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_1$19, toDisplayString(displayedText.value), 1), __props.label && !__props.embedded ? (openBlock(), createElementBlock("label", _hoisted_2$18, toDisplayString(__props.label), 1)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [withDirectives((openBlock(), createElementBlock("div", _hoisted_3$16, [createElementVNode("div", _hoisted_4$15, [withDirectives(createElementVNode("input", {
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
 				type: "text",
 				role: "combobox",
@@ -381,6 +430,7 @@ var AFormLink_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"aria-autocomplete": "list",
 				class: normalizeClass(["aform_input-field", { "aform_input-field--embedded": __props.embedded }]),
 				placeholder: __props.placeholder,
+				size: embeddedSize.value,
 				"aria-label": __props.ariaLabel,
 				required: __props.required,
 				"aria-expanded": dropdownOpen.value,
@@ -396,19 +446,25 @@ var AFormLink_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					withKeys(closeDropdown, ["esc"]),
 					withKeys(closeDropdown, ["tab"])
 				]
-			}, null, 42, _hoisted_4$15), [[vModelText, searchText.value]]), hasValidId.value && !__props.disabled && !__props.embedded ? (openBlock(), createElementBlock("button", {
+			}, null, 42, _hoisted_5$15), [[vModelText, searchText.value]]), hasValidId.value && !__props.disabled && !__props.embedded ? (openBlock(), createElementBlock("button", {
 				key: 0,
 				type: "button",
 				class: "aform_form-btn",
 				onClick: handleNavigate,
 				onKeydown: withKeys(withModifiers(handleNavigate, ["prevent"]), ["enter"])
-			}, [createElementVNode("span", null, toDisplayString(__props.icon === "chevron-right" ? "›" : "→"), 1)], 40, _hoisted_5$15)) : createCommentVNode("", true)]), dropdownOpen.value ? (openBlock(), createElementBlock("ul", {
+			}, [(openBlock(), createElementBlock("svg", {
+				class: "aform_form-btn-icon",
+				"data-icon": __props.icon,
+				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$12)) : createCommentVNode("", true)]), dropdownOpen.value ? (openBlock(), createElementBlock("ul", {
 				key: 0,
 				id: listboxId,
 				class: "autocomplete-results",
 				role: "listbox",
 				"aria-label": __props.ariaLabel
-			}, [loading.value ? (openBlock(), createElementBlock("li", _hoisted_7$6, "Loading…")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(dropdownResults.value, (option, i) => {
+			}, [loading.value ? (openBlock(), createElementBlock("li", _hoisted_12$4, "Loading…")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(dropdownResults.value, (option, i) => {
 				return openBlock(), createElementBlock("li", {
 					id: `${listboxId}-opt-${i}`,
 					key: String(option.id),
@@ -416,11 +472,11 @@ 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_8$6);
-			}), 128))], 8, _hoisted_6$15)) : createCommentVNode("", true)])), [[unref(vOnClickOutside), onClickOutside]]), __props.label && !__props.embedded ? (openBlock(), createElementBlock("label", _hoisted_9$5, 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-91a761d0"]]);
+}), [["__scopeId", "data-v-07d20e9b"]]);
 //#endregion
 //#region src/components/form/ACurrencyInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$18 = { class: "aform_form-element acurrency" };
@@ -428,26 +484,28 @@ 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 = [
 	"id",
 	"disabled",
-	"required"
+	"required",
+	"aria-invalid",
+	"aria-describedby"
 ];
 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" };
 var _hoisted_18$1 = { class: "acurrency__field acurrency__field--exchange-rate" };
 var _hoisted_19$1 = ["value"];
 var _hoisted_20$1 = { class: "aform_field-label" };
-var _hoisted_21$1 = ["innerHTML"];
+var _hoisted_21$1 = ["id"];
 var FLOAT_NOISE_DECIMALS = 6;
 //#endregion
 //#region src/components/form/ACurrencyInput.vue
@@ -461,7 +519,7 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		required: { type: Boolean },
 		mode: {},
 		uuid: {},
-		validation: { default: () => ({ errorMessage: " " }) },
+		validation: { default: () => ({ errorMessage: "" }) },
 		errors: {},
 		options: { default: () => ({}) },
 		currencyLabel: { default: "Currency" },
@@ -470,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
 		}) },
@@ -480,6 +538,8 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
+		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
+		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const currencySymbol = (value) => value.symbol ?? value.displayText ?? String(value.id);
 		const modelValue = useModel(__props, "modelValue");
 		const normalizedBaseCurrency = computed(() => {
@@ -528,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",
@@ -571,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;
@@ -580,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,
@@ -611,6 +671,8 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					type: "number",
 					disabled: __props.mode === "read",
 					required: __props.required,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
 					onKeydown: onAmountKeydown,
 					onPaste: onAmountPaste
 				}, null, 40, _hoisted_9$4), [[
@@ -628,53 +690,96 @@ 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: ""
 					}, null, 8, _hoisted_19$1), createElementVNode("label", _hoisted_20$1, toDisplayString(__props.exchangeRateLabel), 1)])
 				]),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: __props.validation.errorMessage
-				}, null, 8, _hoisted_21$1), [[vShow, __props.validation.errorMessage]])
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_21$1), [[vShow, errorText.value]])
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-77852830"]]);
+}), [["__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 = ["innerHTML"];
-var _hoisted_4$13 = {
-	ref: "datepicker",
-	class: "adatepicker",
-	tabindex: "0"
-};
-var _hoisted_5$13 = {
+var _hoisted_3$14 = ["id"];
+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 = ["innerHTML"];
+var _hoisted_14$1 = ["id"];
 var numberOfRows = 6;
 var numberOfColumns = 7;
 //#endregion
@@ -695,18 +800,21 @@ 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"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		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");
@@ -718,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;
@@ -799,102 +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",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_3$14), [[vShow, errorText.value]])
-			], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_4$13, [createElementVNode("table", { onMousedown: preventCellSelection }, [createElementVNode("tbody", null, [
+					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", {
+				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,
@@ -903,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",
@@ -913,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", {
@@ -939,20 +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",
-				innerHTML: errorText.value
-			}, null, 8, _hoisted_12$2), [[vShow, errorText.value]])], 64));
+				role: "alert"
+			}, toDisplayString(errorText.value), 9, _hoisted_14$1), [[vShow, errorText.value]])], 64));
 		};
 	}
-}), [["__scopeId", "data-v-ef698187"]]);
+}), [["__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" };
@@ -963,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({
@@ -1137,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",
@@ -1148,7 +1289,7 @@ var ADateTimeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			])]);
 		};
 	}
-}), [["__scopeId", "data-v-95ad0aa4"]]);
+}), [["__scopeId", "data-v-3a6e48db"]]);
 //#endregion
 //#region src/components/form/ADateSelection.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$15 = { class: "adate-selection" };
@@ -1181,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 },
@@ -1198,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;
@@ -1228,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");
 			}
 		};
@@ -1246,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,
@@ -1286,19 +1428,67 @@ var ADateSelection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-36e737ea"]]);
+}), [["__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"
+	"required",
+	"aria-invalid",
+	"aria-describedby"
 ];
-var _hoisted_5$11 = ["for"];
-var _hoisted_6$11 = ["innerHTML"];
+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({
@@ -1320,61 +1510,71 @@ var ADate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	emits: ["update:modelValue"],
 	setup(__props) {
 		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,
-					onClick: openPicker
-				}, null, 8, _hoisted_4$11), [[vModelText, inputDate.value]]),
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
+					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",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$11), [[vShow, errorText.value]]),
-				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
+					role: "alert"
+				}, 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-5de3fe7a"]]);
+}), [["__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" };
@@ -1383,18 +1583,28 @@ var _hoisted_2$12 = {
 	class: "aform_display-value"
 };
 var _hoisted_3$11 = { class: "aform_field-label" };
-var _hoisted_4$10 = ["disabled"];
-var _hoisted_5$10 = {
-	id: "autocomplete-results",
-	class: "autocomplete-results"
-};
-var _hoisted_6$10 = {
+var _hoisted_4$10 = [
+	"id",
+	"disabled",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-invalid",
+	"aria-describedby",
+	"onKeydown"
+];
+var _hoisted_5$10 = ["id", "aria-label"];
+var _hoisted_6$8 = {
 	key: 0,
 	class: "loading autocomplete-result"
 };
-var _hoisted_7$3 = ["onClick"];
-var _hoisted_8$3 = { class: "aform_field-label" };
-var _hoisted_9$2 = ["innerHTML"];
+var _hoisted_7$3 = [
+	"id",
+	"aria-selected",
+	"onMousedown"
+];
+var _hoisted_8$3 = ["for"];
+var _hoisted_9$2 = ["id"];
 //#endregion
 //#region src/components/form/ADropdown.vue
 var ADropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1425,12 +1635,14 @@ var ADropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
+		const listboxId = useId();
 		const choiceList = computed(() => selectChoices(__props.options));
 		const formatFn = computed(() => __props.format ? deserializeFunction(__props.format) : void 0);
 		const badgeDescriptor = computed(() => resolveFieldBadge(search.value, __props.options, formatFn.value));
 		const inputAccentStyle = computed(() => badgeInputAccentStyle(badgeDescriptor.value));
 		const displayAccentStyle = computed(() => badgeInputAccentStyle(badgeDescriptor.value));
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
+		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const search = useModel(__props, "modelValue");
 		const committedValue = ref(search.value ?? "");
 		const dropdown = reactive({
@@ -1508,36 +1720,57 @@ var ADropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				style: normalizeStyle(displayAccentStyle.value)
 			}, toDisplayString(badgeDescriptor.value.label), 5)) : (openBlock(), createElementBlock("span", _hoisted_2$12, toDisplayString(search.value ?? ""), 1)), createElementVNode("label", _hoisted_3$11, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [withDirectives((openBlock(), createElementBlock("div", { class: normalizeClass(["autocomplete", { isOpen: dropdown.open }]) }, [
 				withDirectives(createElementVNode("input", {
+					id: __props.uuid,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
 					type: "text",
+					role: "combobox",
+					autocomplete: "off",
+					"aria-autocomplete": "list",
 					class: "aform_input-field",
 					disabled: __props.mode === "read",
 					style: normalizeStyle(inputAccentStyle.value),
+					"aria-expanded": dropdown.open,
+					"aria-controls": dropdown.open ? unref(listboxId) : void 0,
+					"aria-activedescendant": dropdown.activeItemIndex === null ? void 0 : `${unref(listboxId)}-opt-${dropdown.activeItemIndex}`,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
 					onInput: filter,
 					onFocus: openDropdown,
 					onKeydown: [
-						withKeys(selectNextResult, ["down"]),
-						withKeys(selectPrevResult, ["up"]),
-						withKeys(setCurrentResult, ["enter"]),
+						withKeys(withModifiers(selectNextResult, ["prevent"]), ["down"]),
+						withKeys(withModifiers(selectPrevResult, ["prevent"]), ["up"]),
+						withKeys(withModifiers(setCurrentResult, ["prevent"]), ["enter"]),
 						withKeys(onClickOutside, ["esc"]),
 						withKeys(onClickOutside, ["tab"])
 					]
 				}, null, 44, _hoisted_4$10), [[vModelText, search.value]]),
-				withDirectives(createElementVNode("ul", _hoisted_5$10, [dropdown.loading ? (openBlock(), createElementBlock("li", _hoisted_6$10, "Loading results...")) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(dropdown.results, (result, i) => {
+				withDirectives(createElementVNode("ul", {
+					id: unref(listboxId),
+					class: "autocomplete-results",
+					role: "listbox",
+					"aria-label": __props.label
+				}, [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,
+						role: "option",
+						"aria-selected": i === dropdown.activeItemIndex,
 						class: normalizeClass(["autocomplete-result", { "is-active": i === dropdown.activeItemIndex }]),
-						onClick: withModifiers(($event) => setResult(result), ["stop"])
-					}, toDisplayString(result), 11, _hoisted_7$3);
-				}), 128))], 512), [[vShow, dropdown.open]]),
-				createElementVNode("label", _hoisted_8$3, toDisplayString(__props.label), 1)
+						onMousedown: withModifiers(($event) => setResult(result), ["prevent"])
+					}, toDisplayString(result), 43, _hoisted_7$3);
+				}), 128))], 8, _hoisted_5$10), [[vShow, dropdown.open]]),
+				createElementVNode("label", {
+					class: "aform_field-label",
+					for: __props.uuid
+				}, toDisplayString(__props.label), 9, _hoisted_8$3)
 			], 2)), [[unref(vOnClickOutside), onClickOutside]]), withDirectives(createElementVNode("p", {
+				id: unref(errorId),
 				class: "aform_error",
-				innerHTML: errorText.value
-			}, null, 8, _hoisted_9$2), [[vShow, errorText.value]])], 64))]);
+				role: "alert"
+			}, toDisplayString(errorText.value), 9, _hoisted_9$2), [[vShow, errorText.value]])], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-4206fcf7"]]);
+}), [["__scopeId", "data-v-2275075e"]]);
 //#endregion
 //#region src/components/form/ABadge.vue
 var ABadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1599,7 +1832,9 @@ var _hoisted_3$10 = [
 	"role",
 	"aria-labelledby",
 	"aria-label",
-	"aria-busy"
+	"aria-busy",
+	"aria-invalid",
+	"aria-describedby"
 ];
 var _hoisted_4$9 = ["data-segment-value"];
 var _hoisted_5$9 = [
@@ -1607,13 +1842,13 @@ var _hoisted_5$9 = [
 	"value",
 	"disabled"
 ];
-var _hoisted_6$9 = [
+var _hoisted_6$7 = [
 	"name",
 	"value",
 	"disabled"
 ];
 var _hoisted_7$2 = { class: "aform_segmented-label" };
-var _hoisted_8$2 = ["innerHTML"];
+var _hoisted_8$2 = ["id"];
 //#endregion
 //#region src/components/form/ASegmentedControl.vue
 var ASegmentedControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1661,6 +1896,7 @@ var ASegmentedControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}
 		});
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
+		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const fallbackId = useId();
 		const groupName = computed(() => __props.uuid ?? `aform-segmented-${fallbackId}`);
 		const labelId = computed(() => `${groupName.value}-label`);
@@ -1729,7 +1965,9 @@ var ASegmentedControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 					class: "aform_segmented-track",
 					"aria-labelledby": groupAriaLabel.value ? void 0 : labelId.value,
 					"aria-label": groupAriaLabel.value,
-					"aria-busy": __props.busy || void 0
+					"aria-busy": __props.busy || void 0,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy)
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(choices.value, (choice) => {
 					return openBlock(), createElementBlock("label", {
 						key: choice,
@@ -1752,28 +1990,32 @@ 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),
 					class: "aform_error",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_8$2), [[vShow, errorText.value]])
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_8$2), [[vShow, errorText.value]])
 			], 64))], 2);
 		};
 	}
-}), [["__scopeId", "data-v-23f09651"]]);
+}), [["__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"
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
 ];
-var _hoisted_5$8 = ["for"];
-var _hoisted_6$8 = ["innerHTML"];
+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({
@@ -1803,79 +2045,121 @@ var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	emits: ["update:modelValue"],
 	setup(__props) {
 		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: "",
-					onClick: openPicker
-				}, null, 8, _hoisted_4$8),
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
+					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",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$8), [[vShow, errorText.value]]),
-				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
+					role: "alert"
+				}, 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,
@@ -1885,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",
@@ -1892,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-b0fa488b"]]);
+}), [["__scopeId", "data-v-05cbbabe"]]);
 //#endregion
 //#region src/components/form/ADuration.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$10 = { class: "aduration" };
@@ -1906,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({
@@ -1931,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, {
@@ -1985,23 +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-43788a3d"]]);
+}), [["__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"
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
 ];
-var _hoisted_5$6 = ["for"];
-var _hoisted_6$6 = ["innerHTML"];
+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({
@@ -2025,21 +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);
@@ -2048,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)}`;
@@ -2058,61 +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: "",
-					onClick: openPicker
-				}, null, 8, _hoisted_4$6),
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
+					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",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$6), [[vShow, errorText.value]]),
-				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
+					role: "alert"
+				}, 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-f8dad4d3"]]);
+}), [["__scopeId", "data-v-ac2c160b"]]);
 //#endregion
 //#region src/components/AForm.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$8 = { class: "aform" };
@@ -2155,6 +2449,23 @@ var AForm_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				emit("update:data", { ...dataModel.value });
 			}
 		};
+		const isListExpansionTable = (componentObj) => componentObj.kind === "table" && componentObj.config?.view === "list-expansion";
+		const tableExpansionSchema = (table) => table.schema.filter((col) => Boolean(col.component)).map(({ fieldname, component, ...rest }) => Object.assign(rest, {
+			kind: "field",
+			fieldname,
+			component
+		}));
+		const updateTableRow = (fieldname, rowIndex, val) => {
+			const rows = Array.isArray(dataModel.value?.[fieldname]) ? [...dataModel.value[fieldname]] : [];
+			rows[rowIndex] = {
+				...rows[rowIndex],
+				...val
+			};
+			if (dataModel.value) {
+				dataModel.value[fieldname] = rows;
+				emit("update:data", { ...dataModel.value });
+			}
+		};
 		const componentProps = (componentObj) => {
 			const propsToPass = {};
 			for (const [key, value] of Object.entries(componentObj)) if (![
@@ -2212,6 +2523,7 @@ var AForm_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		const childModels = computed(() => childModelsCache.value);
 		return (_ctx, _cache) => {
+			const _component_AForm = resolveComponent("AForm", true);
 			return openBlock(), createElementBlock("form", _hoisted_1$8, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.schema, (componentObj, key) => {
 				return openBlock(), createElementBlock(Fragment, { key }, [isNestedSection(componentObj) ? (openBlock(), createElementBlock("div", _hoisted_2$7, [componentObj.label && componentObj.kind !== "fieldset" ? (openBlock(), createElementBlock("h4", _hoisted_3$6, toDisplayString(componentObj.label), 1)) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent(componentObj.component ?? "AForm"), {
 					data: nestedData.value[componentObj.fieldname],
@@ -2238,7 +2550,22 @@ var AForm_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					data: dataModel.value[componentObj.fieldname],
 					mode: resolvedMode(componentObj),
 					errors: __props.errors?.[componentObj.fieldname]
-				}, { ref_for: true }, componentProps(componentObj)), null, 16, [
+				}, { ref_for: true }, componentProps(componentObj)), createSlots({ _: 2 }, [isListExpansionTable(componentObj) ? {
+					name: "content",
+					fn: withCtx(({ row, rowIndex }) => [createVNode(_component_AForm, {
+						class: "aform-table-expansion",
+						data: row,
+						schema: tableExpansionSchema(componentObj),
+						mode: resolvedMode(componentObj),
+						"onUpdate:data": (val) => updateTableRow(componentObj.fieldname, rowIndex, val)
+					}, null, 8, [
+						"data",
+						"schema",
+						"mode",
+						"onUpdate:data"
+					])]),
+					key: "0"
+				} : void 0]), 1040, [
 					"modelValue",
 					"onUpdate:modelValue",
 					"style",
@@ -2250,7 +2577,7 @@ var AForm_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			}), 128))]);
 		};
 	}
-}), [["__scopeId", "data-v-713aca93"]]);
+}), [["__scopeId", "data-v-dbfe4358"]]);
 //#endregion
 //#region src/components/base/CollapseButton.vue
 var CollapseButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -2364,7 +2691,7 @@ var AFileAttach_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-8eefd179"]]);
+}), [["__scopeId", "data-v-79ce33a7"]]);
 //#endregion
 //#region src/components/form/ANumericInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$6 = { class: "aform_form-element" };
@@ -2373,10 +2700,12 @@ var _hoisted_3$4 = { class: "aform_field-label" };
 var _hoisted_4$4 = [
 	"id",
 	"disabled",
-	"required"
+	"required",
+	"aria-invalid",
+	"aria-describedby"
 ];
 var _hoisted_5$4 = ["for"];
-var _hoisted_6$4 = ["innerHTML"];
+var _hoisted_6$4 = ["id"];
 //#endregion
 //#region src/components/form/ANumericInput.vue
 var ANumericInput_default = /* @__PURE__ */ defineComponent({
@@ -2398,25 +2727,33 @@ var ANumericInput_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props) {
 		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
-				}, null, 8, _hoisted_4$4), [[vModelText, inputNumber.value]]),
+					required: __props.required,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy)
+				}, null, 8, _hoisted_4$4), [[vModelText, boxNumber.value]]),
 				createElementVNode("label", {
 					class: "aform_field-label",
 					for: __props.uuid
 				}, toDisplayString(__props.label), 9, _hoisted_5$4),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$4), [[vShow, errorText.value]])
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_6$4), [[vShow, errorText.value]])
 			], 64))]);
 		};
 	}
@@ -2432,7 +2769,9 @@ var _hoisted_6$3 = { class: "aquantity__group" };
 var _hoisted_7$1 = [
 	"id",
 	"disabled",
-	"required"
+	"required",
+	"aria-invalid",
+	"aria-describedby"
 ];
 var _hoisted_8$1 = { class: "aquantity__uom" };
 var _hoisted_9$1 = [
@@ -2461,7 +2800,7 @@ var _hoisted_20 = { class: "aform_field-label" };
 var _hoisted_21 = { class: "aquantity__field aquantity__field--conversion" };
 var _hoisted_22 = ["value"];
 var _hoisted_23 = { class: "aform_field-label" };
-var _hoisted_24 = ["innerHTML"];
+var _hoisted_24 = ["id"];
 //#endregion
 //#region src/components/form/AQuantityInput.vue
 var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -2474,7 +2813,7 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		required: { type: Boolean },
 		mode: {},
 		uuid: {},
-		validation: { default: () => ({ errorMessage: "&nbsp;" }) },
+		validation: { default: () => ({ errorMessage: "" }) },
 		errors: {},
 		options: { default: () => ({}) },
 		uomLabel: { default: "UOM" },
@@ -2483,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
 		}) },
@@ -2493,15 +2832,17 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
+		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 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) => {
@@ -2510,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",
@@ -2589,90 +2930,97 @@ 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;
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$5, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$4, toDisplayString(displayText.value), 1), createElementVNode("label", _hoisted_3$3, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-				createElementVNode("div", _hoisted_4$3, [createElementVNode("div", _hoisted_5$3, [createElementVNode("div", _hoisted_6$3, [withDirectives(createElementVNode("input", {
-					id: __props.uuid,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => qty.value = $event),
-					class: "aquantity__qty",
-					type: "number",
-					disabled: __props.mode === "read",
-					required: __props.required,
-					onKeydown: onQtyKeydown,
-					onPaste: onQtyPaste
-				}, null, 40, _hoisted_7$1), [[
-					vModelText,
-					qty.value,
-					void 0,
-					{ number: true }
-				]]), withDirectives((openBlock(), createElementBlock("div", _hoisted_8$1, [createElementVNode("button", {
-					id: `${__props.uuid}-uom`,
-					type: "button",
-					class: "aquantity__uom-toggle",
-					disabled: __props.mode === "read",
-					"aria-haspopup": "listbox",
-					"aria-expanded": dropdown.open,
-					"aria-activedescendant": dropdown.open && dropdown.activeIndex >= 0 ? `${__props.uuid}-uom-opt-${dropdown.activeIndex}` : void 0,
-					onClick: toggleDropdown,
-					onKeydown: [
-						_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => moveActive(1), ["prevent"]), ["down"])),
-						_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => moveActive(-1), ["prevent"]), ["up"])),
-						withKeys(withModifiers(selectActive, ["prevent"]), ["enter"]),
-						withKeys(closeDropdown, ["esc"])
-					]
-				}, [createElementVNode("span", _hoisted_10$1, toDisplayString(uom.value || __props.uomLabel), 1), _cache[3] || (_cache[3] = createElementVNode("span", {
-					class: "aquantity__caret",
-					"aria-hidden": "true"
-				}, null, -1))], 40, _hoisted_9$1), withDirectives(createElementVNode("ul", {
-					class: "aquantity__uom-menu",
-					role: "listbox",
-					"aria-label": __props.uomLabel
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(uoms.value, (option, i) => {
-					return openBlock(), createElementBlock("li", {
-						id: `${__props.uuid}-uom-opt-${i}`,
-						key: option,
-						role: "option",
-						"aria-selected": option === uom.value,
-						class: normalizeClass(["aquantity__uom-option", { "is-active": i === dropdown.activeIndex }]),
-						onMouseenter: ($event) => dropdown.activeIndex = i,
-						onClick: ($event) => selectUom(option)
-					}, toDisplayString(option), 43, _hoisted_12$1);
-				}), 128))], 8, _hoisted_11$1), [[vShow, dropdown.open]])])), [[unref(vOnClickOutside), closeDropdown]])]), createElementVNode("label", {
-					class: "aform_field-label",
-					for: __props.uuid
-				}, toDisplayString(__props.label), 9, _hoisted_13)])]),
+				createElementVNode("div", _hoisted_4$3, [createElementVNode("div", _hoisted_5$3, [createElementVNode("div", _hoisted_6$3, [
+					withDirectives(createElementVNode("input", {
+						id: __props.uuid,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => qty.value = $event),
+						class: "aquantity__qty",
+						type: "number",
+						disabled: __props.mode === "read",
+						required: __props.required,
+						"aria-invalid": unref(invalid),
+						"aria-describedby": unref(describedBy),
+						onKeydown: onQtyKeydown,
+						onPaste: onQtyPaste
+					}, null, 40, _hoisted_7$1), [[
+						vModelText,
+						qty.value,
+						void 0,
+						{ number: true }
+					]]),
+					withDirectives((openBlock(), createElementBlock("div", _hoisted_8$1, [createElementVNode("button", {
+						id: `${__props.uuid}-uom`,
+						type: "button",
+						class: "aquantity__uom-toggle",
+						disabled: __props.mode === "read",
+						"aria-haspopup": "listbox",
+						"aria-expanded": dropdown.open,
+						"aria-activedescendant": dropdown.open && dropdown.activeIndex >= 0 ? `${__props.uuid}-uom-opt-${dropdown.activeIndex}` : void 0,
+						onClick: toggleDropdown,
+						onKeydown: [
+							_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => moveActive(1), ["prevent"]), ["down"])),
+							_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => moveActive(-1), ["prevent"]), ["up"])),
+							withKeys(withModifiers(selectActive, ["prevent"]), ["enter"]),
+							withKeys(closeDropdown, ["esc"])
+						]
+					}, [createElementVNode("span", _hoisted_10$1, toDisplayString(uom.value || __props.uomLabel), 1), _cache[3] || (_cache[3] = createElementVNode("span", {
+						class: "aquantity__caret",
+						"aria-hidden": "true"
+					}, null, -1))], 40, _hoisted_9$1), withDirectives(createElementVNode("ul", {
+						class: "aquantity__uom-menu",
+						role: "listbox",
+						"aria-label": __props.uomLabel
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(uoms.value, (option, i) => {
+						return openBlock(), createElementBlock("li", {
+							id: `${__props.uuid}-uom-opt-${i}`,
+							key: option,
+							role: "option",
+							"aria-selected": option === uom.value,
+							class: normalizeClass(["aquantity__uom-option", { "is-active": i === dropdown.activeIndex }]),
+							onMouseenter: ($event) => dropdown.activeIndex = i,
+							onClick: ($event) => selectUom(option)
+						}, toDisplayString(option), 43, _hoisted_12$1);
+					}), 128))], 8, _hoisted_11$1), [[vShow, dropdown.open]])])), [[unref(vOnClickOutside), closeDropdown]]),
+					createElementVNode("label", {
+						class: "aform_field-label",
+						for: __props.uuid
+					}, toDisplayString(__props.label), 9, _hoisted_13)
+				])])]),
 				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: ""
 					}, null, 8, _hoisted_22), createElementVNode("label", _hoisted_23, toDisplayString(__props.conversionFactorLabel), 1)])
 				]),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: __props.validation.errorMessage
-				}, null, 8, _hoisted_24), [[vShow, __props.validation.errorMessage]])
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_24), [[vShow, errorText.value]])
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-f16b20ca"]]);
+}), [["__scopeId", "data-v-b2c39a5c"]]);
 //#endregion
 //#region src/directives/mask.ts
 /**
@@ -2771,10 +3119,12 @@ var _hoisted_4$2 = [
 	"id",
 	"disabled",
 	"maxlength",
-	"required"
+	"required",
+	"aria-invalid",
+	"aria-describedby"
 ];
 var _hoisted_5$2 = ["for"];
-var _hoisted_6$2 = ["innerHTML"];
+var _hoisted_6$2 = ["id"];
 //#endregion
 //#region src/components/form/ATextInput.vue
 var ATextInput_default = /* @__PURE__ */ defineComponent({
@@ -2796,6 +3146,7 @@ var ATextInput_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
+		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const maskFilled = ref(true);
 		const inputText = useModel(__props, "modelValue");
 		return (_ctx, _cache) => {
@@ -2806,16 +3157,19 @@ var ATextInput_default = /* @__PURE__ */ defineComponent({
 					class: "aform_input-field",
 					disabled: __props.mode === "read",
 					maxlength: __props.mask ? maskFilled.value ? __props.mask.length : void 0 : void 0,
-					required: __props.required
+					required: __props.required,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy)
 				}, null, 8, _hoisted_4$2), [[vModelText, inputText.value], [unref(useStringMask), __props.mask]]),
 				createElementVNode("label", {
 					class: "aform_field-label",
 					for: __props.uuid
 				}, toDisplayString(__props.label), 9, _hoisted_5$2),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$2), [[vShow, errorText.value]])
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_6$2), [[vShow, errorText.value]])
 			], 64))]);
 		};
 	}
@@ -2831,10 +3185,12 @@ var _hoisted_4$1 = [
 	"rows",
 	"maxlength",
 	"disabled",
-	"required"
+	"required",
+	"aria-invalid",
+	"aria-describedby"
 ];
 var _hoisted_5$1 = ["for"];
-var _hoisted_6$1 = ["innerHTML"];
+var _hoisted_6$1 = ["id"];
 //#endregion
 //#region src/components/form/ATextboxInput.vue
 var ATextboxInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -2859,6 +3215,7 @@ var ATextboxInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const errorText = computed(() => __props.errors?.length ? __props.errors.join("; ") : __props.validation.errorMessage ?? "");
+		const { errorId, describedBy, invalid } = fieldErrorA11y(__props.uuid, errorText);
 		const inputText = useModel(__props, "modelValue");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$3, [__props.mode === "display" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_2$2, toDisplayString(inputText.value ?? ""), 1), createElementVNode("label", _hoisted_3$1, toDisplayString(__props.label), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -2870,20 +3227,23 @@ var ATextboxInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 					rows: __props.rows,
 					maxlength: __props.maxlength,
 					disabled: __props.mode === "read",
-					required: __props.required
+					required: __props.required,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy)
 				}, null, 8, _hoisted_4$1), [[vModelText, inputText.value]]),
 				createElementVNode("label", {
 					class: "aform_field-label",
 					for: __props.uuid
 				}, toDisplayString(__props.label), 9, _hoisted_5$1),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$1), [[vShow, errorText.value]])
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_6$1), [[vShow, errorText.value]])
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-2a9c793b"]]);
+}), [["__scopeId", "data-v-19e611fa"]]);
 //#endregion
 //#region src/components/utilities/Login.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$2 = { class: "login-container" };
@@ -2942,9 +3302,9 @@ var Login_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 						name: "email",
 						placeholder: "name@example.com",
 						type: "email",
-						"auto-capitalize": "none",
-						"auto-complete": "email",
-						"auto-correct": "off",
+						autocomplete: "email",
+						autocapitalize: "none",
+						autocorrect: "off",
 						disabled: isLoading.value
 					}, null, 8, _hoisted_8), [[vModelText, email.value]])]),
 					createElementVNode("div", _hoisted_9, [_cache[3] || (_cache[3] = createElementVNode("label", {
@@ -2957,19 +3317,23 @@ var Login_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 						class: "aform_input-field",
 						name: "password",
 						type: "password",
+						autocomplete: "current-password",
 						disabled: isLoading.value
 					}, null, 8, _hoisted_10), [[vModelText, password.value]])]),
 					createElementVNode("button", {
+						type: "submit",
 						class: "btn",
-						disabled: isLoading.value || !email.value || !password.value,
-						onClick: onSubmit
+						disabled: isLoading.value || !email.value || !password.value
 					}, [isLoading.value ? (openBlock(), createElementBlock("span", _hoisted_12, "progress_activity")) : createCommentVNode("", true), _cache[4] || (_cache[4] = createElementVNode("span", { id: "login-form-button" }, "Login", -1))], 8, _hoisted_11)
 				])], 32),
-				_cache[5] || (_cache[5] = createElementVNode("button", { class: "btn" }, [createElementVNode("span", { id: "forgot-password-button" }, "Forgot password?")], -1))
+				_cache[5] || (_cache[5] = createElementVNode("button", {
+					type: "button",
+					class: "btn"
+				}, [createElementVNode("span", { id: "forgot-password-button" }, "Forgot password?")], -1))
 			])])]);
 		};
 	}
-}), [["__scopeId", "data-v-2c0f0634"]]);
+}), [["__scopeId", "data-v-555c3224"]]);
 //#endregion
 //#region src/components/AFormLoading.vue
 var _sfc_main = {};