state machine: add demo & fix

src/lib/StateMachine.svelte

@@ -40,7 +40,7 @@
 	import { tweened } from 'svelte/motion';
 	import { fade, fly } from 'svelte/transition';
 	import { validateForm } from '@svelte-toolkit/validate';
-	import { ArrowLeft, Check } from 'phosphor-svelte';
+	import { ArrowLeft, Check, CheckFat } from 'phosphor-svelte';
 	import type { IconDef } from './util';
 
 	interface Props {
@@ -167,6 +167,7 @@
 
 		// validate the form
 		const result = await validateForm(formElement);
+		console.log('validated form', result);
 		if (!result) {
 			buttonComponent.animateBounce();
 			setTimeout(() => focusFirstInput(true), 50);
@@ -359,7 +360,7 @@
 			{#if i >= index}
 				<span class="mb-[0.0625rem]">{i + 1}</span>
 			{:else}
-				<Check class="mt-0.5" size="1.5rem" weight="bold" />
+				<CheckFat size="0.9rem" weight="fill" />
 			{/if}
 		</div>
 	{/each}
@@ -378,7 +379,7 @@
 			onclick={() => (index -= 1)}
 			transition:fly={{ x: -200, duration: 200 }}
 		>
-			<ArrowLeft />
+			<ArrowLeft size="1.5em" />
 			Back
 		</button>
 	{/if}
@@ -460,6 +461,7 @@
 		{#if index < pages.length - 1 && page.button && $height > 0}
 			<div class="mt-4" out:fade bind:this={buttonContainer}>
 				<Button
+					type="submit"
 					icon={page.button.icon}
 					onclick={handleContinueClick}
 					animate={false}