@stonecrop/aform 0.34.0 → 0.35.0

package/dist/aform.js

@@ -1,6 +1,6 @@
 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 { onClickOutside, useFileDialog } from "@vueuse/core";
 import './assets/index.css';//#region src/utils/deserialize.ts
@@ -115,6 +115,18 @@ 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" };
@@ -124,9 +136,11 @@ var _hoisted_5$16 = { class: "aform_checkbox-container aform_input-field" };
 var _hoisted_6$16 = [
 	"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 +165,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 +179,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
+					required: __props.required,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy)
 				}, null, 8, _hoisted_6$16), [[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 +201,19 @@ 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/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 +222,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$15 = ["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$2 = [
 	"id",
 	"aria-selected",
 	"onMousedown"
 ];
-var _hoisted_9$5 = {
+var _hoisted_14$2 = {
 	key: 0,
 	class: "aform_field-label"
 };
@@ -274,6 +304,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 +404,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 +412,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 +428,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$15)) : 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 +454,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$2);
+			}), 128))], 8, _hoisted_11$4)) : createCommentVNode("", true)])), [[unref(vOnClickOutside), onClickOutside]]), __props.label && !__props.embedded ? (openBlock(), createElementBlock("label", _hoisted_14$2, toDisplayString(__props.label), 1)) : createCommentVNode("", true)], 64))], 2);
 		};
 	}
-}), [["__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" };
@@ -434,7 +472,9 @@ 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" };
@@ -447,7 +487,7 @@ 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 +501,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" },
@@ -480,6 +520,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(() => {
@@ -611,6 +653,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), [[
@@ -643,18 +687,19 @@ var ACurrencyInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					}, 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-f61b058f"]]);
 //#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_3$14 = ["id"];
 var _hoisted_4$13 = {
 	ref: "datepicker",
 	class: "adatepicker",
@@ -674,7 +719,7 @@ var _hoisted_11$2 = [
 	"onKeydown",
 	"onMouseover"
 ];
-var _hoisted_12$2 = ["innerHTML"];
+var _hoisted_12$2 = ["id"];
 var numberOfRows = 6;
 var numberOfColumns = 7;
 //#endregion
@@ -701,6 +746,7 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	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());
@@ -877,9 +923,10 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 				createElementVNode("span", _hoisted_1$17, toDisplayString(date.value ? new Date(date.value).toLocaleDateString() : ""), 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]])
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_3$14), [[vShow, errorText.value]])
 			], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_4$13, [createElementVNode("table", { onMousedown: preventCellSelection }, [createElementVNode("tbody", null, [
 				createElementVNode("tr", null, [
 					createElementVNode("td", {
@@ -947,12 +994,13 @@ var ADatePicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					}), 64))]);
 				}), 64))
 			])], 32)], 512), 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_12$2), [[vShow, errorText.value]])], 64));
 		};
 	}
-}), [["__scopeId", "data-v-ef698187"]]);
+}), [["__scopeId", "data-v-e22e44d1"]]);
 //#endregion
 //#region src/components/form/ADateTimeInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$16 = { class: "adate_time" };
@@ -1148,7 +1196,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" };
@@ -1286,7 +1334,7 @@ var ADateSelection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-36e737ea"]]);
+}), [["__scopeId", "data-v-48e71f28"]]);
 //#endregion
 //#region src/components/form/ADate.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$14 = { class: "aform_form-element" };
@@ -1295,10 +1343,12 @@ var _hoisted_3$12 = { class: "aform_field-label" };
 var _hoisted_4$11 = [
 	"id",
 	"disabled",
-	"required"
+	"required",
+	"aria-invalid",
+	"aria-describedby"
 ];
 var _hoisted_5$11 = ["for"];
-var _hoisted_6$11 = ["innerHTML"];
+var _hoisted_6$11 = ["id"];
 //#endregion
 //#region src/components/form/ADate.vue
 var ADate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1320,6 +1370,7 @@ 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({
@@ -1353,6 +1404,8 @@ var ADate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					type: "date",
 					disabled: __props.mode === "read",
 					required: __props.required,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
 					onClick: openPicker
 				}, null, 8, _hoisted_4$11), [[vModelText, inputDate.value]]),
 				createElementVNode("label", {
@@ -1360,9 +1413,10 @@ var ADate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					for: __props.uuid
 				}, toDisplayString(__props.label), 9, _hoisted_5$11),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$11), [[vShow, errorText.value]]),
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_6$11), [[vShow, errorText.value]]),
 				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
 					key: 0,
 					ref: "picker",
@@ -1374,7 +1428,7 @@ var ADate_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-5de3fe7a"]]);
+}), [["__scopeId", "data-v-e1403ea0"]]);
 //#endregion
 //#region src/components/form/ADropdown.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$13 = { class: "aform_form-element" };
@@ -1383,18 +1437,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_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$10 = {
 	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 +1489,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 +1574,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$10, "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 +1686,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 = [
@@ -1613,7 +1702,7 @@ var _hoisted_6$9 = [
 	"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 +1750,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 +1819,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,
@@ -1755,13 +1847,14 @@ var ASegmentedControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 					}, null, 8, _hoisted_6$9)), [[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" };
@@ -1770,10 +1863,12 @@ var _hoisted_3$9 = { class: "aform_field-label" };
 var _hoisted_4$8 = [
 	"id",
 	"value",
-	"disabled"
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
 ];
 var _hoisted_5$8 = ["for"];
-var _hoisted_6$8 = ["innerHTML"];
+var _hoisted_6$8 = ["id"];
 //#endregion
 //#region src/components/form/ADateTime.vue
 var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -1803,6 +1898,7 @@ 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);
@@ -1858,6 +1954,8 @@ var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					placeholder: "Select date and time",
 					disabled: __props.mode === "read",
 					readonly: "",
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
 					onClick: openPicker
 				}, null, 8, _hoisted_4$8),
 				createElementVNode("label", {
@@ -1865,9 +1963,10 @@ var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					for: __props.uuid
 				}, toDisplayString(__props.label), 9, _hoisted_5$8),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$8), [[vShow, errorText.value]]),
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_6$8), [[vShow, errorText.value]]),
 				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
 					key: 0,
 					ref_key: "pickerRef",
@@ -1895,7 +1994,7 @@ var ADateTime_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-b0fa488b"]]);
+}), [["__scopeId", "data-v-427253ba"]]);
 //#endregion
 //#region src/components/form/ADuration.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$10 = { class: "aduration" };
@@ -1989,7 +2088,7 @@ var ADuration_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			])) : createCommentVNode("", true)])], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-43788a3d"]]);
+}), [["__scopeId", "data-v-64f6240e"]]);
 //#endregion
 //#region src/components/form/ADateRange.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$9 = { class: "aform_form-element" };
@@ -1998,10 +2097,12 @@ var _hoisted_3$7 = { class: "aform_field-label" };
 var _hoisted_4$6 = [
 	"id",
 	"value",
-	"disabled"
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
 ];
 var _hoisted_5$6 = ["for"];
-var _hoisted_6$6 = ["innerHTML"];
+var _hoisted_6$6 = ["id"];
 //#endregion
 //#region src/components/form/ADateRange.vue
 var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -2027,6 +2128,7 @@ var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	setup(__props) {
 		const fmt = (d) => new Date(d).toLocaleDateString();
 		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);
@@ -2090,6 +2192,8 @@ var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					placeholder: "Select date range",
 					disabled: __props.mode === "read",
 					readonly: "",
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy),
 					onClick: openPicker
 				}, null, 8, _hoisted_4$6),
 				createElementVNode("label", {
@@ -2097,9 +2201,10 @@ var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					for: __props.uuid
 				}, toDisplayString(__props.label), 9, _hoisted_5$6),
 				withDirectives(createElementVNode("p", {
+					id: unref(errorId),
 					class: "aform_error",
-					innerHTML: errorText.value
-				}, null, 8, _hoisted_6$6), [[vShow, errorText.value]]),
+					role: "alert"
+				}, toDisplayString(errorText.value), 9, _hoisted_6$6), [[vShow, errorText.value]]),
 				showPicker.value ? (openBlock(), createBlock(ADateSelection_default, {
 					key: 0,
 					ref_key: "pickerRef",
@@ -2112,7 +2217,7 @@ var ADateRange_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 64))]);
 		};
 	}
-}), [["__scopeId", "data-v-f8dad4d3"]]);
+}), [["__scopeId", "data-v-b7560709"]]);
 //#endregion
 //#region src/components/AForm.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$8 = { class: "aform" };
@@ -2155,6 +2260,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 +2334,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 +2361,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 +2388,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 +2502,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 +2511,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,6 +2538,7 @@ 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");
 		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 }, [
@@ -2407,16 +2548,19 @@ var ANumericInput_default = /* @__PURE__ */ defineComponent({
 					class: "aform_input-field",
 					type: "number",
 					disabled: __props.mode === "read",
-					required: __props.required
+					required: __props.required,
+					"aria-invalid": unref(invalid),
+					"aria-describedby": unref(describedBy)
 				}, null, 8, _hoisted_4$4), [[vModelText, inputNumber.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 +2576,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 +2607,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 +2620,7 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		required: { type: Boolean },
 		mode: {},
 		uuid: {},
-		validation: { default: () => ({ errorMessage: " " }) },
+		validation: { default: () => ({ errorMessage: "" }) },
 		errors: {},
 		options: { default: () => ({}) },
 		uomLabel: { default: "UOM" },
@@ -2493,6 +2639,8 @@ 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));
@@ -2595,56 +2743,62 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		});
 		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,
@@ -2666,13 +2820,14 @@ var AQuantityInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					}, 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-a904c817"]]);
 //#endregion
 //#region src/directives/mask.ts
 /**
@@ -2771,10 +2926,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 +2953,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 +2964,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 +2992,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 +3022,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 +3034,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 +3109,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 +3124,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 = {};