date input: full keyboard nav, use internationalized/CalendarDate

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { CalendarDate, today, getLocalTimeZone } from '@internationalized/date';
 	import Button from '$lib/Button.svelte';
 	import ActionSelect from '$lib/ActionSelect.svelte';
 	import Checkbox, { type CheckboxState } from '$lib/Checkbox.svelte';
@@ -27,10 +28,16 @@
 		TextStrikethrough,
 		TextUnderline
 	} from 'phosphor-svelte';
+	import type { Option } from '$lib';
 
-	let dateInputValue = $state<Date | undefined>(undefined);
+	let dateInputValue = $state<CalendarDate | undefined>(undefined);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
 	let dialogOpen = $state(false);
+	let toggleOptions: Option[] = $state([
+		'item one',
+		'item two',
+		{ value: 'complex', label: 'Complex item' }
+	]);
 
 	const toolbar = new Toolbar();
 	const fontGroup = toolbar.group();
@@ -141,7 +148,7 @@
 			<Button
 				icon={{ component: Plus }}
 				onclick={() => {
-					dateInputValue = new Date();
+					dateInputValue = today(getLocalTimeZone());
 					console.log('Dateinput value set to:', dateInputValue);
 				}}
 			>
@@ -208,10 +215,13 @@
 
 	<ToggleSelect name="example-toggle-select" class="mb-4">Toggle Me!</ToggleSelect>
 
-	<ToggleGroup
-		label="Toggle Group"
-		options={['item one', 'item two', { value: 'complex', label: 'Complex item' }]}
-	/>
+	<ToggleGroup label="Toggle Group" options={toggleOptions} />
+
+	<Button
+		onclick={() => {
+			toggleOptions.push({ value: 'new', label: 'New Option' });
+		}}>Add Option</Button
+	>
 </div>
 
 <div class="component">