diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 0b011065..b34b465e 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -47,7 +47,7 @@ jobs:
         registry-url: https://npm.pkg.github.com/
 
     - name: Install Rush
-      run: node common/scripts/install-run-rush.js install
+      run: node common/scripts/install-run-rush.js install && node common/scripts/install-run-rush.js build
 
     - name: Run Tests
       working-directory: ./aform
@@ -86,7 +86,7 @@ jobs:
         registry-url: https://npm.pkg.github.com/
 
     - name: Install Rush
-      run: node common/scripts/install-run-rush.js install
+      run: node common/scripts/install-run-rush.js install && node common/scripts/install-run-rush.js build
 
     - name: Run Tests
       working-directory: ./atable
diff --git a/aform/src/components/form/ADate.vue b/aform/src/components/form/ADate.vue
index c045b50a..b40d1ceb 100644
--- a/aform/src/components/form/ADate.vue
+++ b/aform/src/components/form/ADate.vue
@@ -1,277 +1,94 @@
 <template>
-	<div
-		v-if="!readonly"
-		:event="event"
-		:colIndex="colIndex"
-		:rowIndex="rowIndex"
-		:tableid="tableid"
-		class="adate"
-		tabindex="0"
-		ref="adatepicker">
-		<table>
-			<tr>
-				<td @click="previousMonth" :tabindex="-1">&lt;</td>
-				<th colspan="5">{{ monthAndYear }}</th>
-				<td @click="nextMonth" :tabindex="-1">&gt;</td>
-			</tr>
-			<tr v-for="rowNo in numberOfRows" :key="rowNo">
-				<!-- TODO: (style) remove inline styling and replace with theme package -->
-				<td
-					v-for="colNo in numberOfColumns"
-					:key="(rowNo - 1) * numberOfColumns + colNo"
-					:contenteditable="false"
-					:spellcheck="false"
-					:tabindex="0"
-					:style="{
-						border: isSelectedDate(currentDates[(rowNo - 1) * numberOfColumns + colNo])
-							? '2px solid var(--focus-cell-outline)'
-							: 'none',
-						borderBottomColor: isTodaysDate(currentDates[(rowNo - 1) * numberOfColumns + colNo])
-							? 'var(--focus-cell-outline)'
-							: 'none',
-					}"
-					@click.prevent.stop="selectDate($event, (rowNo - 1) * numberOfColumns + colNo)"
-					:class="{
-						todaysdate: isTodaysDate(currentDates[(rowNo - 1) * numberOfColumns + colNo]),
-						selecteddate: isSelectedDate(currentDates[(rowNo - 1) * numberOfColumns + colNo]),
-					}">
-					{{ new Date(currentDates[(rowNo - 1) * numberOfColumns + colNo]).getDate() }}
-				</td>
-			</tr>
-		</table>
+	<div>
+		<input
+			ref="dateRef"
+			type="date"
+			:id="uuid"
+			:disabled="readonly"
+			:required="required"
+			:value="inputDate"
+			@click="showPicker" />
+		<label :for="uuid">{{ label }}</label>
+		<p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
-
-import { TableDataStore } from '@stonecrop/atable'
-import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
-
-const props = defineProps<{
-	colIndex?: number
-	rowIndex?: number
-	tableid?: string
-	event?: Event
-	indent?: number
-	readonly?: boolean
-}>()
-
-const tableData = inject<TableDataStore>(props.tableid)
-
-const numberOfRows = 6
-const numberOfColumns = 7
-const todaysDate = new Date()
-
-const selectedDate = ref<Date>()
-const currentMonth = ref<number>()
-const currentYear = ref<number>()
-const currentDates = ref<number[]>([])
-// const width = ref('')
-
-onMounted(async () => {
-	let cellDate = tableData.cellData<string | number | Date>(props.colIndex, props.rowIndex)
-	if (cellDate) {
-		if (!(cellDate instanceof Date)) {
-			cellDate = new Date(cellDate)
-		}
-
-		selectedDate.value = cellDate
-		currentMonth.value = selectedDate.value.getMonth()
-		currentYear.value = selectedDate.value.getFullYear()
-	} else {
-		currentMonth.value = todaysDate.getMonth()
-		currentYear.value = todaysDate.getFullYear()
-	}
-
-	renderMonth()
-	await nextTick()
-
-	const $selectedDate = document.getElementsByClassName('selecteddate')
-	if ($selectedDate.length > 0) {
-		;($selectedDate[0] as HTMLElement).focus()
-	} else {
-		const $todaysDate = document.getElementsByClassName('todaysdate')
-		if ($todaysDate.length > 0) {
-			;($todaysDate[0] as HTMLElement).focus()
-		}
-	}
-})
-
-watch([currentMonth, currentYear], () => {
-	renderMonth()
-})
-
-const renderMonth = () => {
-	currentDates.value = []
-	const firstOfMonth = new Date(currentYear.value, currentMonth.value, 1)
-	const monthStartWeekday = firstOfMonth.getDay()
-	const calendarStartDay = firstOfMonth.setDate(firstOfMonth.getDate() - monthStartWeekday)
-	for (let dayIndex of Array(43).keys()) {
-		currentDates.value.push(calendarStartDay + dayIndex * 86400000)
-	}
-}
-
-const previousYear = () => {
-	currentYear.value -= 1
-}
-
-const nextYear = () => {
-	currentYear.value += 1
-}
-
-const previousMonth = () => {
-	if (currentMonth.value == 0) {
-		currentMonth.value = 11
-		previousYear()
-	} else {
-		currentMonth.value -= 1
+import { ref } from 'vue'
+
+withDefaults(
+	defineProps<{
+		label: string
+		required?: boolean
+		readonly?: boolean
+		uuid?: string
+		validation?: Record<string, any>
+	}>(),
+	{
+		validation: () => ({ errorMessage: '&nbsp;' }),
 	}
-}
+)
 
-const nextMonth = () => {
-	if (currentMonth.value == 11) {
-		currentMonth.value = 0
-		nextYear()
-	} else {
-		currentMonth.value += 1
-	}
-}
+const inputDate = defineModel<string | number | Date>()
+const dateRef = ref<HTMLInputElement | null>(null)
 
-const isTodaysDate = (day: string | number | Date) => {
-	if (currentMonth.value !== todaysDate.getMonth()) {
-		return
+const showPicker = () => {
+	if (dateRef.value) {
+		dateRef.value.showPicker()
 	}
-	return todaysDate.toDateString() === new Date(day).toDateString()
 }
-
-const isSelectedDate = (day: string | number | Date) => {
-	return new Date(day).toDateString() === new Date(selectedDate.value).toDateString()
-}
-
-const selectDate = (event: Event, currentIndex: number) => {
-	selectedDate.value = new Date(currentDates.value[currentIndex])
-	updateData()
-	// TODO: (typing) figure out a way to close datepicker
-	// context.refs.adatepicker.destroy()
-}
-
-const updateData = () => {
-	// TODO: check proper date format to feed back (assuming number for now)
-	tableData.setCellData(props.rowIndex, props.colIndex, selectedDate.value.getTime())
-}
-
-// const dayWidth = computed(() => {
-// 	const widthValue = Number(width.value.replace('px', ''))
-// 	return `${widthValue / (numberOfColumns - 1)}px`
-// })
-
-const monthAndYear = computed(() => {
-	return new Date(currentYear.value, currentMonth.value, 1).toLocaleDateString(undefined, {
-		year: 'numeric',
-		month: 'long',
-	})
-})
-
-// setup keyboard navigation
-useKeyboardNav([
-	{
-		parent: 'table.adate',
-		selectors: 'td',
-		handlers: {
-			...defaultKeypressHandlers,
-			...{
-				'keydown.pageup': previousMonth,
-				'keydown.shift.pageup': previousYear,
-				'keydown.pagedown': nextMonth,
-				'keydown.shift.pagedown': nextYear,
-			},
-		},
-	},
-])
 </script>
 
 <style scoped>
-@import '@/theme/aform.css';
-
-.adate {
-	border: 2px solid var(--focus-cell-outline);
+div {
+	min-width: 40ch;
+	border: 1px solid transparent;
+	padding: 0rem;
+	margin: 0rem;
+	margin-right: 1ch;
+}
+
+input {
+	width: calc(100% - 1ch);
+	outline: 1px solid transparent;
+	border: 1px solid var(--input-border-color);
+	padding: 1ch 0.5ch 0.5ch 1ch;
+	margin: calc(1.15rem / 2) 0 0 0;
+	min-height: 1.15rem;
+	border-radius: 0.25rem;
+}
+
+p,
+label {
+	color: var(--input-label-color);
+	display: block;
+	min-height: 1.15rem;
+	padding: 0rem;
+	margin: 0rem;
+	border: 1px solid transparent;
+	margin-bottom: 0.25rem;
+}
+
+p {
+	width: 100%;
+	color: red;
+	font-size: 85%;
+}
+
+label {
+	z-index: 2;
+	font-size: 80%;
 	position: absolute;
-	z-index: 100;
-	font-size: var(--table-font-size);
-	display: inline-table;
-	background-color: var(--row-color-zebra-light);
-	color: var(--cell-text-color);
-	outline: none;
-	width: calc(100% - 4px);
-}
-
-.adate tr {
-	height: 1.15rem;
-	text-align: center;
-	vertical-align: middle;
-}
-
-.adate td {
-	border: 2px solid transparent;
-	min-width: 2.25ch; /* this doesn't zoom correctly */
-}
-
-.adate td:hover {
-	border: 2px solid var(--focus-cell-outline);
-}
-
-.adate td {
-	border: 1px;
-	border-style: solid;
-	border-color: var(--cell-border-color);
-	border-radius: 0px;
-	box-sizing: border-box;
-	margin: 0px;
-	outline: none;
-	box-shadow: none;
-	color: var(--cell-text-color);
-	text-overflow: ellipsis;
-	overflow: hidden;
-	padding-left: 0.5ch;
-	padding-right: 0.5ch;
-}
-
-.adate td:focus,
-.adate td:focus-within {
-	background-color: var(--focus-cell-background);
-	outline-width: 2px;
-	outline-style: solid;
-	outline-color: var(--focus-cell-outline);
-	box-shadow: none;
-	overflow: hidden;
-	min-height: 1.15em;
-	max-height: 1.15em;
-	overflow: hidden;
-}
-
-button {
-	background-color: var(--row-color-zebra-light);
-	border: none;
-	padding: 0px;
-	margin: 0px;
-	color: var(--cell-text-color);
-	outline: none;
-	font-size: var(--table-font-size);
-}
-
-.dateheader {
-	font-weight: 700;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+	background: white;
+	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
+	padding: 0 0.25ch 0 0.25ch;
 }
 
-.adate .todaysdate {
-	border-bottom-color: var(--focus-cell-outline);
+input:focus {
+	border: 1px solid var(--input-active-border-color);
 }
 
-.adate .selecteddate {
-	border: 2px solid var(--focus-cell-outline);
+input:focus + label {
+	color: var(--input-active-label-color);
 }
 </style>
diff --git a/aform/src/components/form/ADatePicker.vue b/aform/src/components/form/ADatePicker.vue
new file mode 100644
index 00000000..ba1a91fd
--- /dev/null
+++ b/aform/src/components/form/ADatePicker.vue
@@ -0,0 +1,160 @@
+<template>
+	<div class="adatepicker" tabindex="0" ref="adatepicker">
+		<table>
+			<tr>
+				<td @click="previousMonth" :tabindex="-1">&lt;</td>
+				<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
+				<td @click="nextMonth" :tabindex="-1">&gt;</td>
+			</tr>
+			<tr class="days-header">
+				<td>M</td>
+				<td>T</td>
+				<td>W</td>
+				<td>T</td>
+				<td>F</td>
+				<td>S</td>
+				<td>S</td>
+			</tr>
+			<tr v-for="rowNo in numberOfRows" :key="rowNo">
+				<td
+					v-for="colNo in numberOfColumns"
+					:key="getCurrentCell(rowNo, colNo)"
+					:contenteditable="false"
+					:spellcheck="false"
+					:tabindex="0"
+					@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
+					@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
+					:class="{
+						todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
+						selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
+					}">
+					{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
+				</td>
+			</tr>
+		</table>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+const numberOfRows = 6
+const numberOfColumns = 7
+
+const date = defineModel<number | Date>({ default: new Date() })
+const selectedDate = ref(new Date(date.value))
+const currentMonth = ref<number>(selectedDate.value.getMonth())
+const currentYear = ref<number>(selectedDate.value.getFullYear())
+const currentDates = ref<number[]>([])
+const adatepicker = ref<HTMLElement | null>(null)
+
+onMounted(async () => {
+	populateMonth()
+
+	// required to allow the elements to be focused in the next step
+	await nextTick()
+
+	const $selectedDate = document.getElementsByClassName('selectedDate')
+	if ($selectedDate.length > 0) {
+		;($selectedDate[0] as HTMLElement).focus()
+	} else {
+		const $todaysDate = document.getElementsByClassName('todaysDate')
+		if ($todaysDate.length > 0) {
+			;($todaysDate[0] as HTMLElement).focus()
+		}
+	}
+})
+
+const populateMonth = () => {
+	currentDates.value = []
+	const firstOfMonth = new Date(currentYear.value, currentMonth.value, 1)
+	const monthStartWeekday = firstOfMonth.getDay()
+	const calendarStartDay = firstOfMonth.setDate(firstOfMonth.getDate() - monthStartWeekday)
+
+	// assume midnight for all dates while building the calendar
+	for (const dayIndex of Array(43).keys()) {
+		currentDates.value.push(calendarStartDay + dayIndex * 86400000)
+	}
+}
+
+watch([currentMonth, currentYear], populateMonth)
+const previousYear = () => (currentYear.value -= 1)
+const nextYear = () => (currentYear.value += 1)
+
+const previousMonth = () => {
+	if (currentMonth.value == 0) {
+		currentMonth.value = 11
+		previousYear()
+	} else {
+		currentMonth.value -= 1
+	}
+}
+
+const nextMonth = () => {
+	if (currentMonth.value == 11) {
+		currentMonth.value = 0
+		nextYear()
+	} else {
+		currentMonth.value += 1
+	}
+}
+
+const isTodaysDate = (day: string | number | Date) => {
+	const todaysDate = new Date()
+	if (currentMonth.value !== todaysDate.getMonth()) {
+		return
+	}
+	return todaysDate.toDateString() === new Date(day).toDateString()
+}
+
+const isSelectedDate = (day: string | number | Date) => {
+	return new Date(day).toDateString() === new Date(selectedDate.value).toDateString()
+}
+
+const getCurrentCell = (rowNo: number, colNo: number) => {
+	return (rowNo - 1) * numberOfColumns + colNo
+}
+
+const getCurrentDate = (rowNo: number, colNo: number) => {
+	return currentDates.value[getCurrentCell(rowNo, colNo)]
+}
+
+const selectDate = (currentIndex: number) => {
+	date.value = selectedDate.value = new Date(currentDates.value[currentIndex])
+}
+
+const monthAndYear = computed(() => {
+	return new Date(currentYear.value, currentMonth.value, 1).toLocaleDateString(undefined, {
+		year: 'numeric',
+		month: 'long',
+	})
+})
+
+// setup keyboard navigation
+useKeyboardNav([
+	{
+		parent: adatepicker,
+		selectors: 'td',
+		handlers: {
+			...defaultKeypressHandlers,
+			...{
+				'keydown.pageup': previousMonth,
+				'keydown.shift.pageup': previousYear,
+				'keydown.pagedown': nextMonth,
+				'keydown.shift.pagedown': nextYear,
+				// TODO: this is a hack to override the stonecrop enter handler;
+				// store context inside the component so that handlers can be setup consistently
+				// eslint-disable-next-line @typescript-eslint/no-empty-function
+				'keydown.enter': () => {}, // select this date
+			},
+		},
+	},
+])
+</script>
+
+<style>
+@import url('@stonecrop/themes/default/default.css');
+@import url('@/theme/adate.css');
+@import url('@/theme/aform.css');
+</style>
diff --git a/aform/src/histoire.setup.ts b/aform/src/histoire.setup.ts
index d8875bed..f39f7e75 100644
--- a/aform/src/histoire.setup.ts
+++ b/aform/src/histoire.setup.ts
@@ -1,6 +1,8 @@
 import { defineSetupVue3 } from '@histoire/plugin-vue'
 
 import ACheckbox from '@/components/form/ACheckbox.vue'
+import ADate from '@/components/form/ADate.vue'
+import ADatePicker from '@/components/form/ADatePicker.vue'
 import AFieldset from '@/components/form/AFieldset.vue'
 import AForm from '@/components/AForm.vue'
 import ANumericInput from '@/components/form/ANumericInput.vue'
@@ -12,6 +14,8 @@ import '@stonecrop/atable/styles'
 export const setupVue3 = defineSetupVue3(({ app }) => {
 	// TODO: (typing) add typing for ATable components
 	app.component('ACheckbox', ACheckbox)
+	app.component('ADate', ADate)
+	app.component('ADatePicker', ADatePicker)
 	app.component('AFieldset', AFieldset)
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
diff --git a/aform/src/index.ts b/aform/src/index.ts
index 74554cb5..0afeea9c 100644
--- a/aform/src/index.ts
+++ b/aform/src/index.ts
@@ -4,6 +4,7 @@ import ACheckbox from '@/components/form/ACheckbox.vue'
 import AComboBox from '@/components/form/AComboBox.vue'
 import ADate from '@/components/form/ADate.vue'
 import ADropdown from '@/components/form/ADropdown.vue'
+import ADatePicker from '@/components/form/ADatePicker.vue'
 import AFieldset from '@/components/form/AFieldset.vue'
 import AForm from '@/components/AForm.vue'
 import ANumericInput from '@/components/form/ANumericInput.vue'
@@ -16,6 +17,7 @@ function install(app: App /* options */) {
 	app.component('ACombobox', AComboBox)
 	app.component('ADate', ADate)
 	app.component('ADropdown', ADropdown)
+	app.component('ADatePicker', ADatePicker)
 	app.component('AFieldset', AFieldset)
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
@@ -24,4 +26,4 @@ function install(app: App /* options */) {
 	// app.component('AQuantity', AQuantity)
 }
 
-export { ACheckbox, AComboBox, ADate, ADropdown, AFieldset, AForm, ANumericInput, ATextInput, install }
+export { ACheckbox, AComboBox, ADate, ADropdown, ADatePicker, AFieldset, AForm, ANumericInput, ATextInput, install }
diff --git a/aform/src/theme/adate.css b/aform/src/theme/adate.css
new file mode 100644
index 00000000..6734f5d8
--- /dev/null
+++ b/aform/src/theme/adate.css
@@ -0,0 +1,49 @@
+.adatepicker {
+	font-size: var(--table-font-size);
+	display: inline-table;
+	color: var(--cell-text-color);
+	outline: none;
+	border-collapse: collapse;
+	/* width: calc(100% - 4px); */
+}
+
+.adatepicker tr {
+	height: 1.15rem;
+	height: 1.15rem;
+	text-align: center;
+	vertical-align: middle;
+}
+
+.adatepicker td {
+	border: 2px solid transparent;
+	outline: 2px solid transparent;
+	min-width: 3ch;
+	max-width: 3ch;
+}
+
+.adatepicker td:focus,
+.adatepicker td:focus-within {
+	outline: 1px dashed black;
+	box-shadow: none;
+	overflow: hidden;
+	min-height: 1.15em;
+	max-height: 1.15em;
+	overflow: hidden;
+}
+.adatepicker .selectedDate {
+	outline: 1px solid black;
+	background: var(--gray-20);
+	font-weight: bolder;
+}
+
+.adatepicker .todaysDate {
+	font-weight: bolder;
+	text-decoration: underline;
+	color: black;
+}
+.days-header > td {
+	font-weight: bold;
+}
+.prev-date {
+	color: var(--gray-20);
+}
diff --git a/aform/stories/assets/basic_table_schema.json b/aform/stories/assets/basic_table_schema.json
index 9e2c7e71..bf38d8a5 100644
--- a/aform/stories/assets/basic_table_schema.json
+++ b/aform/stories/assets/basic_table_schema.json
@@ -44,6 +44,7 @@
 				"name": "report_date",
 				"fieldname": "report_date",
 				"fieldtype": "component",
+				"modalComponent": "ADatePicker",
 				"align": "center",
 				"edit": true,
 				"width": "25ch",
diff --git a/aform/stories/assets/fieldset_table_schema.json b/aform/stories/assets/fieldset_table_schema.json
index ba970425..78b3e1f5 100644
--- a/aform/stories/assets/fieldset_table_schema.json
+++ b/aform/stories/assets/fieldset_table_schema.json
@@ -49,6 +49,7 @@
 						"name": "report_date",
 						"fieldname": "report_date",
 						"fieldtype": "component",
+						"modalComponent": "ADatePicker",
 						"align": "center",
 						"edit": true,
 						"width": "25ch",
diff --git a/aform/stories/date.story.vue b/aform/stories/date.story.vue
new file mode 100644
index 00000000..8ac3753d
--- /dev/null
+++ b/aform/stories/date.story.vue
@@ -0,0 +1,25 @@
+<template>
+	<Story>
+		<Variant title="Date Picker">
+			<h3>Default Date</h3>
+			<ADatePicker />
+
+			<h3>Custom Date</h3>
+			<ADatePicker v-model="defaultDate" />
+		</Variant>
+		<Variant title="Date Input with Picker">
+			<ADate label="Date" v-model="defaultDate" />
+		</Variant>
+	</Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const twoDaysAgo = new Date().setDate(new Date().getDate() - 2)
+const defaultDate = ref(new Date(twoDaysAgo))
+</script>
+
+<style>
+@import url('@stonecrop/themes/default/default.css');
+</style>
diff --git a/aform/stories/dropdown.story.vue b/aform/stories/dropdown.story.vue
index edb5269c..48f7ddb9 100644
--- a/aform/stories/dropdown.story.vue
+++ b/aform/stories/dropdown.story.vue
@@ -1,5 +1,5 @@
 <template>
-	<Story title="dropdown">
+	<Story>
 		<div class="dropdown-form">
 			<ADropdown
 				data-theme="purple"
@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
+
 import ADropdown from '@/components/form/ADropdown.vue'
 
 const dropdown_data = ref({
diff --git a/aform/stories/default.story.vue b/aform/stories/form.story.vue
similarity index 98%
rename from aform/stories/default.story.vue
rename to aform/stories/form.story.vue
index a6eb2430..8df2311c 100644
--- a/aform/stories/default.story.vue
+++ b/aform/stories/form.story.vue
@@ -1,5 +1,5 @@
 <template>
-	<Story title="default">
+	<Story>
 		<Variant title="Form" :setup-app="formSetup">
 			<AForm class="aform-main" v-model="form_schema" :data="data" :key="formKey" />
 
diff --git a/aform/stories/login.story.vue b/aform/stories/login.story.vue
index 265fa399..f9d499f8 100644
--- a/aform/stories/login.story.vue
+++ b/aform/stories/login.story.vue
@@ -1,5 +1,5 @@
 <template>
-	<Story title="login">
+	<Story>
 		<Login />
 	</Story>
 </template>
diff --git a/aform/tests/adatepicker.spec.ts b/aform/tests/adatepicker.spec.ts
new file mode 100644
index 00000000..5033c2ce
--- /dev/null
+++ b/aform/tests/adatepicker.spec.ts
@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import ADatePicker from '@/components/form/ADatePicker.vue'
+
+describe('datepicker component', () => {
+	const wrapper = mount(ADatePicker)
+
+	it('emits update event when date is changed', async () => {
+		await wrapper.find('.todaysDate').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// ADatePicker assumes midnight for all dates while building the calendar
+		const todaysDatetime = new Date().setHours(0, 0, 0, 0)
+		const todaysDate = new Date(todaysDatetime)
+
+		const updateEvents = wrapper.emitted('update:modelValue')
+		expect(updateEvents).toBeTruthy()
+		expect(updateEvents![0][0]).toEqual(todaysDate)
+	})
+})
diff --git a/aform/tests/numeric_input.spec.ts b/aform/tests/numeric_input.spec.ts
index d6bdb85f..7977d685 100644
--- a/aform/tests/numeric_input.spec.ts
+++ b/aform/tests/numeric_input.spec.ts
@@ -4,14 +4,14 @@ import { mount } from '@vue/test-utils'
 import ANumericInput from '@/components/form/ANumericInput.vue'
 
 describe('numeric input component', () => {
-	let numericInputModel = 25
-	let schema = {
+	const numericInputModel = 25
+	const schema = {
 		fieldname: 'age',
 		label: 'Age',
 	}
 
 	let wrapper = mount(ANumericInput, {
-		props: { modelValue: numericInputModel, schema: schema },
+		props: { modelValue: numericInputModel, label: 'Age', schema: schema },
 	})
 
 	it('emits update event when input changed', async () => {
diff --git a/aform/tests/text_input.spec.ts b/aform/tests/text_input.spec.ts
index 63764935..561f3299 100644
--- a/aform/tests/text_input.spec.ts
+++ b/aform/tests/text_input.spec.ts
@@ -4,14 +4,14 @@ import { mount } from '@vue/test-utils'
 import ATextInput from '@/components/form/ATextInput.vue'
 
 describe('text input component', () => {
-	let textInputModel = 'John'
-	let schema = {
+	const textInputModel = 'John'
+	const schema = {
 		fieldname: 'first_name',
 		label: 'First Name',
 	}
 
 	let wrapper = mount(ATextInput, {
-		props: { modelValue: textInputModel, schema: schema },
+		props: { modelValue: textInputModel, label: 'First Name', schema: schema },
 	})
 
 	it('emits update event when input changed', async () => {
diff --git a/aform/tsconfig.json b/aform/tsconfig.json
index fe3271f6..bd983a10 100644
--- a/aform/tsconfig.json
+++ b/aform/tsconfig.json
@@ -18,6 +18,7 @@
 		"src/**/*.vue",
 		"stories/**/*.json",
 		"stories/**/*.story.vue",
+		"tests/**/*.spec.ts",
 		"tests/**/*.ts",
 		"tests/**/*.vue",
 		"types/**/*.ts"
diff --git a/atable/src/components/ACell.vue b/atable/src/components/ACell.vue
index 0743e154..aeee9402 100644
--- a/atable/src/components/ACell.vue
+++ b/atable/src/components/ACell.vue
@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { computed, CSSProperties, inject, ref } from 'vue'
 
-import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 import TableDataStore from '.'
 
 const props = withDefaults(
@@ -35,7 +35,7 @@ const props = withDefaults(
 		colIndex: number
 		rowIndex: number
 		tableid: string
-		addNavigation?: boolean | object
+		addNavigation?: boolean | KeypressHandlers
 		tabIndex?: number
 		clickHandler?: (event: MouseEvent) => void
 	}>(),
diff --git a/atable/src/components/AExpansionRow.vue b/atable/src/components/AExpansionRow.vue
index 64735916..abc6b889 100644
--- a/atable/src/components/AExpansionRow.vue
+++ b/atable/src/components/AExpansionRow.vue
@@ -16,7 +16,7 @@
 import { TableRow } from 'types'
 import { inject, ref } from 'vue'
 
-import { useKeyboardNav } from '@stonecrop/utilities'
+import { type KeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 
 import TableDataStore from '.'
 
@@ -26,9 +26,7 @@ const props = withDefaults(
 		rowIndex: number
 		tableid: string
 		tabIndex?: number
-		addNavigation?: {
-			[key: string]: (ev: KeyboardEvent) => any
-		}
+		addNavigation?: boolean | KeypressHandlers
 	}>(),
 	{
 		tabIndex: -1,
@@ -43,18 +41,23 @@ const getRowExpandSymbol = () => {
 	return tableData.display[props.rowIndex].expanded ? '▼' : '►'
 }
 
-if (props.addNavigation !== undefined) {
-	const keyboardNav = Object.assign({}, props.addNavigation)
-	keyboardNav['keydown.control.g'] = (event: KeyboardEvent) => {
-		event.stopPropagation()
-		event.preventDefault()
-		tableData.toggleRowExpand(props.rowIndex)
+if (props.addNavigation) {
+	const handlers: KeypressHandlers = {
+		'keydown.control.g': (event: KeyboardEvent) => {
+			event.stopPropagation()
+			event.preventDefault()
+			tableData.toggleRowExpand(props.rowIndex)
+		},
+	}
+
+	if (typeof props.addNavigation === 'object') {
+		Object.assign(handlers, props.addNavigation)
 	}
 
 	useKeyboardNav([
 		{
 			selectors: rowEl,
-			handlers: keyboardNav,
+			handlers: handlers,
 		},
 	])
 }
diff --git a/atable/src/components/ARow.vue b/atable/src/components/ARow.vue
index 68ddb451..e37e4ae8 100644
--- a/atable/src/components/ARow.vue
+++ b/atable/src/components/ARow.vue
@@ -21,7 +21,7 @@
 <script setup lang="ts">
 import { TableRow } from 'types'
 import { inject, ref } from 'vue'
-import { useKeyboardNav } from '@stonecrop/utilities'
+import { type KeypressHandlers, useKeyboardNav, defaultKeypressHandlers } from '@stonecrop/utilities'
 
 import TableDataStore from '.'
 
@@ -31,10 +31,11 @@ const props = withDefaults(
 		rowIndex: number
 		tableid: string
 		tabIndex?: number
-		addNavigation?: object
+		addNavigation?: boolean | KeypressHandlers
 	}>(),
 	{
 		tabIndex: -1,
+		addNavigation: false, // default to allowing cell navigation
 	}
 )
 
@@ -79,10 +80,19 @@ const toggleRowExpand = (rowIndex: number) => {
 }
 
 if (props.addNavigation) {
+	let handlers = defaultKeypressHandlers
+
+	if (typeof props.addNavigation === 'object') {
+		handlers = {
+			...handlers,
+			...props.addNavigation,
+		}
+	}
+
 	useKeyboardNav([
 		{
 			selectors: rowEl,
-			handlers: props.addNavigation,
+			handlers: handlers,
 		},
 	])
 }
diff --git a/common/changes/@stonecrop/aform/adate_refactor_2024-04-17-14-05.json b/common/changes/@stonecrop/aform/adate_refactor_2024-04-17-14-05.json
new file mode 100644
index 00000000..386b77c1
--- /dev/null
+++ b/common/changes/@stonecrop/aform/adate_refactor_2024-04-17-14-05.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "Add ADatePicker base component",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}
\ No newline at end of file
diff --git a/common/changes/@stonecrop/atable/adate_refactor_2024-05-06-11-10.json b/common/changes/@stonecrop/atable/adate_refactor_2024-05-06-11-10.json
new file mode 100644
index 00000000..0b1c5332
--- /dev/null
+++ b/common/changes/@stonecrop/atable/adate_refactor_2024-05-06-11-10.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "Update table keyboard navigation",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}
\ No newline at end of file
diff --git a/common/changes/@stonecrop/utilities/adate_refactor_2024-05-06-11-10.json b/common/changes/@stonecrop/utilities/adate_refactor_2024-05-06-11-10.json
new file mode 100644
index 00000000..484af047
--- /dev/null
+++ b/common/changes/@stonecrop/utilities/adate_refactor_2024-05-06-11-10.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/utilities",
+      "comment": "Update keyboard navigation composable",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/utilities"
+}
\ No newline at end of file
diff --git a/utilities/src/composables/keyboard.ts b/utilities/src/composables/keyboard.ts
index c19fe608..514f0305 100644
--- a/utilities/src/composables/keyboard.ts
+++ b/utilities/src/composables/keyboard.ts
@@ -1,7 +1,8 @@
-import { onMounted, onBeforeUnmount } from 'vue'
-import { useElementVisibility } from '@/composables/visibility'
+import { type WatchStopHandle, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useFocusWithin } from '@vueuse/core'
 
 import type { KeyboardNavigationOptions, KeypressHandlers } from 'types'
+import { useElementVisibility } from '@/composables/visibility'
 
 // helper functions
 const isVisible = (element: HTMLElement) => {
@@ -328,50 +329,67 @@ export const defaultKeypressHandlers: KeypressHandlers = {
 }
 
 export function useKeyboardNav(options: KeyboardNavigationOptions[]) {
-	const getSelectors = (option: KeyboardNavigationOptions) => {
-		// get parent element
-		let $parent: Element | null = null
+	const getParentElement = (option: KeyboardNavigationOptions) => {
+		let $parent: HTMLElement | null = null
 		if (option.parent) {
 			if (typeof option.parent === 'string') {
 				$parent = document.querySelector(option.parent)
-			} else if (option.parent instanceof Element) {
+			} else if (option.parent instanceof HTMLElement) {
 				$parent = option.parent
 			} else {
 				$parent = option.parent.value
 			}
 		}
+		return $parent
+	}
 
-		// generate a list of selector(s)
-		let selectors: Element[] = []
-
-		if (option.selectors) {
-			if (typeof option.selectors === 'string') {
-				selectors = $parent
-					? Array.from($parent.querySelectorAll(option.selectors))
-					: Array.from(document.querySelectorAll(option.selectors))
-			} else if (option.selectors instanceof Element) {
-				selectors.push(option.selectors)
-			} else {
-				if (Array.isArray(option.selectors.value)) {
-					for (const element of option.selectors.value) {
-						if (element instanceof Element) {
-							selectors.push(element)
-						} else {
-							selectors.push(element.$el as Element)
-						}
-					}
+	const getSelectorsFromOption = (option: KeyboardNavigationOptions) => {
+		// assumes that option.selectors is provided
+		const $parent = getParentElement(option)
+		let selectors: HTMLElement[] = []
+		if (typeof option.selectors === 'string') {
+			selectors = $parent
+				? Array.from($parent.querySelectorAll(option.selectors))
+				: Array.from(document.querySelectorAll(option.selectors))
+		} else if (Array.isArray(option.selectors)) {
+			for (const element of option.selectors) {
+				if (element instanceof HTMLElement) {
+					selectors.push(element)
 				} else {
-					selectors.push(option.selectors.value)
+					selectors.push(element.$el as HTMLElement)
 				}
 			}
+		} else if (option.selectors instanceof HTMLElement) {
+			selectors.push(option.selectors)
 		} else {
-			const $children = Array.from($parent.children)
-			selectors = $children.filter((selector: HTMLElement) => {
+			if (Array.isArray(option.selectors.value)) {
+				for (const element of option.selectors.value) {
+					if (element instanceof HTMLElement) {
+						selectors.push(element)
+					} else {
+						selectors.push(element.$el as HTMLElement)
+					}
+				}
+			} else {
+				selectors.push(option.selectors.value)
+			}
+		}
+		return selectors
+	}
+
+	const getSelectors = (option: KeyboardNavigationOptions) => {
+		const $parent = getParentElement(option)
+		let selectors: HTMLElement[] = []
+		if (option.selectors) {
+			selectors = getSelectorsFromOption(option)
+		} else if ($parent) {
+			// TODO: what should happen if no parent or selectors are provided?
+			const $children = Array.from($parent.children) as HTMLElement[]
+			selectors = $children.filter(selector => {
 				// ignore elements not in the tab order or are not visible
 				return isFocusable(selector) && isVisible(selector)
 			})
 		}
-
 		return selectors
 	}
 
@@ -420,21 +438,33 @@ export function useKeyboardNav(options: KeyboardNavigationOptions[]) {
 		}
 	}
 
+	const watchStopHandlers: WatchStopHandle[] = []
 	onMounted(() => {
 		for (const option of options) {
+			const $parent = getParentElement(option)
 			const selectors = getSelectors(option)
-			for (const selector of selectors) {
-				selector.addEventListener('keydown', getEventListener(option))
+			const listener = getEventListener(option)
+			const listenerElements = $parent
+				? [$parent] // watch for focus recursively within the parent element
+				: selectors // watch for focus on each selector element TODO: too much JS?
+
+			for (const element of listenerElements) {
+				const { focused } = useFocusWithin(ref(element))
+				const stopHandler = watch(focused, value => {
+					if (value) {
+						element.addEventListener('keydown', listener)
+					} else {
+						element.removeEventListener('keydown', listener)
+					}
+				})
+				watchStopHandlers.push(stopHandler)
 			}
 		}
 	})
 
 	onBeforeUnmount(() => {
-		for (const option of options) {
-			const selectors = getSelectors(option)
-			for (const selector of selectors) {
-				selector.removeEventListener('keydown', getEventListener(option))
-			}
+		for (const stopHandler of watchStopHandlers) {
+			stopHandler()
 		}
 	})
 }
diff --git a/utilities/src/index.ts b/utilities/src/index.ts
index 728c88cc..edd4880b 100644
--- a/utilities/src/index.ts
+++ b/utilities/src/index.ts
@@ -1,7 +1,8 @@
 import { App } from 'vue'
 
 import { defaultKeypressHandlers, useKeyboardNav } from './composables/keyboard'
+import type { KeypressHandlers } from '../types'
 
 function install(app: App /* options */) {}
 
-export { defaultKeypressHandlers, install, useKeyboardNav }
+export { KeypressHandlers, defaultKeypressHandlers, install, useKeyboardNav }
diff --git a/utilities/types/index.ts b/utilities/types/index.ts
index df80d62b..2b723de2 100644
--- a/utilities/types/index.ts
+++ b/utilities/types/index.ts
@@ -5,7 +5,14 @@ export type KeypressHandlers = {
 }
 
 export type KeyboardNavigationOptions = {
-	parent?: string | Element | Ref<Element>
-	selectors?: string | Element | Ref<Element> | Ref<Element[]> | Ref<ComponentPublicInstance[]>
+	parent?: string | HTMLElement | Ref<HTMLElement>
+	selectors?:
+		| string
+		| HTMLElement
+		| HTMLElement[]
+		| ComponentPublicInstance[]
+		| Ref<HTMLElement>
+		| Ref<HTMLElement[]>
+		| Ref<ComponentPublicInstance[]>
 	handlers?: KeypressHandlers
 }