From 02054c3a1f6d1c1e98aec64e3ab11924b9e10b8e Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Tue, 16 Sep 2025 18:28:05 -0700
Subject: [PATCH] checkbox: fix invalid state, shrinking of button

---
 src/lib/Checkbox.svelte              | 7 ++-----
 src/routes/statemachine/+page.svelte | 9 ++++++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/lib/Checkbox.svelte b/src/lib/Checkbox.svelte
index 65ea3c5..6295b68 100644
--- a/src/lib/Checkbox.svelte
+++ b/src/lib/Checkbox.svelte
@@ -57,11 +57,11 @@
 		type="button"
 		{id}
 		class={[
-			'text-sui-text flex size-7 appearance-none items-center',
+			'text-sui-text flex size-7 shrink-0 appearance-none items-center',
 			'justify-center rounded-lg shadow transition-all hover:opacity-75',
 			color === 'default' && 'bg-white',
 			color === 'contrast' && 'border-text/40 border bg-white',
-			!valid && 'border-sui-accent-400 border'
+			!valid && 'border border-red-500'
 		]}
 		onclick={() => {
 			if (value === false || value === undefined || value === 'indeterminate') {
@@ -86,9 +86,6 @@
 			for={id}
 		>
 			{@render children()}
-			{#if required}
-				<span class="text-sui-accent-400">*</span>
-			{/if}
 		</label>
 	{/if}
 </div>
diff --git a/src/routes/statemachine/+page.svelte b/src/routes/statemachine/+page.svelte
index cf2ca46..36935a4 100644
--- a/src/routes/statemachine/+page.svelte
+++ b/src/routes/statemachine/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Checkbox from '$lib/Checkbox.svelte';
+	import Link from '$lib/Link.svelte';
 	import PhoneInput from '$lib/PhoneInput.svelte';
 	import RadioGroup from '$lib/RadioGroup.svelte';
 	import StateMachine, { type StateMachinePage } from '$lib/StateMachine.svelte';
@@ -79,7 +81,7 @@
 ></StateMachine>
 
 {#snippet firstPage()}
-	<TextInput label="What's your name?" validate={{ required: true }} />
+	<TextInput label="What's your name?" validate={{ required: true }} asterisk />
 
 	<RadioGroup
 		label="What's your favorite color?"
@@ -90,6 +92,11 @@
 		]}
 		required={true}
 	/>
+
+	<Checkbox name="consent" required={true} class="mt-1 mb-2">
+		I consent to the collection, use, and sharing described above and in the
+		<Link href="/privacy">Privacy Policy</Link>.
+	</Checkbox>
 {/snippet}
 
 {#snippet secondPage()}