checkbox: support undefined state

src/lib/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	export type CheckboxState = 'indeterminate' | boolean;
+	export type CheckboxState = 'indeterminate' | boolean | undefined;
 </script>
 
 <script lang="ts">
@@ -21,7 +21,7 @@
 	let {
 		name,
 		required = false,
-		value = $bindable(false),
+		value = $bindable(),
 		color = 'contrast',
 		class: classValue,
 		children,
@@ -37,7 +37,7 @@
 	<input
 		type="hidden"
 		{name}
-		value={value.toString()}
+		value={value?.toString() ?? 'false'}
 		use:validate={{
 			valfunc: () => {
 				if (required && value !== true) {

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/Button.svelte';
-	import Checkbox from '$lib/Checkbox.svelte';
+	import Checkbox, { type CheckboxState } from '$lib/Checkbox.svelte';
 	import Combobox from '$lib/Combobox.svelte';
 	import DateInput from '$lib/DateInput.svelte';
 	import Dialog from '$lib/Dialog.svelte';
@@ -18,6 +18,7 @@
 	import ToggleSelect from '$lib/ToggleSelect.svelte';
 
 	let dateInputValue = $state<Date | undefined>(undefined);
+	let checkboxValue = $state<CheckboxState>('indeterminate');
 	let dialogOpen = $state(false);
 </script>
 
@@ -68,13 +69,17 @@
 <div class="component">
 	<p class="title">Checkbox</p>
 
+	<div class="flex items-center gap-4">
 		<Checkbox
 			name="example-checkbox"
-		value={'indeterminate'}
+			bind:value={checkboxValue}
 			onchange={(value) => console.log('Checkbox value:', value)}
 		>
 			Agree to terms and conditions
 		</Checkbox>
+		<span>Checkbox is {checkboxValue}</span>
+		<Button onclick={() => (checkboxValue = 'indeterminate')}>Set Indeterminate</Button>
+	</div>
 </div>
 
 <div class="component">