From 642ab24029bef614bf00a1a871296bcb6dc00553 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Mon, 18 Aug 2025 18:40:44 -0700
Subject: [PATCH] fix buttons missing type="button"

Triggers unintentional form submits if missing `type` property.
---
 src/lib/Checkbox.svelte     |  1 +
 src/lib/Dialog.svelte       |  1 +
 src/lib/StateMachine.svelte |  1 +
 src/lib/Tabs.svelte         |  1 +
 src/lib/ToggleSelect.svelte |  1 +
 src/routes/+page.svelte     | 13 +++++++++++--
 6 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/Checkbox.svelte b/src/lib/Checkbox.svelte
index e9a2e7b..65ea3c5 100644
--- a/src/lib/Checkbox.svelte
+++ b/src/lib/Checkbox.svelte
@@ -54,6 +54,7 @@
 	/>
 
 	<button
+		type="button"
 		{id}
 		class={[
 			'text-sui-text flex size-7 appearance-none items-center',
diff --git a/src/lib/Dialog.svelte b/src/lib/Dialog.svelte
index 6d51278..e3c40c1 100644
--- a/src/lib/Dialog.svelte
+++ b/src/lib/Dialog.svelte
@@ -219,6 +219,7 @@
 				{/if}
 			</div>
 			<button
+				type="button"
 				aria-label="close"
 				class="absolute top-4 right-4 inline-flex cursor-pointer items-center
 				justify-center disabled:cursor-not-allowed disabled:opacity-50"
diff --git a/src/lib/StateMachine.svelte b/src/lib/StateMachine.svelte
index 98bb364..a5064bd 100644
--- a/src/lib/StateMachine.svelte
+++ b/src/lib/StateMachine.svelte
@@ -334,6 +334,7 @@
 	<!-- Back button -->
 	{#if backButtonVisible}
 		<button
+			type="button"
 			class="text-sui-text hover:text-sui-text-700 dark:text-sui-background dark:hover:text-sui-background/80 flex cursor-pointer items-center
 			gap-2.5 font-medium transition-colors"
 			onclick={() => (index -= 1)}
diff --git a/src/lib/Tabs.svelte b/src/lib/Tabs.svelte
index fa7d8e4..f9e6d65 100644
--- a/src/lib/Tabs.svelte
+++ b/src/lib/Tabs.svelte
@@ -93,6 +93,7 @@
 		{#each pages as page, i (page.title)}
 			{@const active = activeIndex === i}
 			<button
+				type="button"
 				bind:this={refs[i]}
 				class={['-mb-[2px] cursor-pointer px-2']}
 				onclick={() => {
diff --git a/src/lib/ToggleSelect.svelte b/src/lib/ToggleSelect.svelte
index 5db1bb1..39bc158 100644
--- a/src/lib/ToggleSelect.svelte
+++ b/src/lib/ToggleSelect.svelte
@@ -43,6 +43,7 @@
 {/if}
 
 <button
+	type="button"
 	bind:this={ref}
 	{...others}
 	class={[
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 848f634..1169d9f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -320,10 +320,17 @@
 		</div>
 		<div class="bg-sui-text/50 w-[1px] self-stretch"></div>
 		<div class="flex items-center gap-1">
-			<button class="item" title="Toggle Bold" aria-label="bold" {@attach boldToggle.attachment}>
+			<button
+				type="button"
+				class="item"
+				title="Toggle Bold"
+				aria-label="bold"
+				{@attach boldToggle.attachment}
+			>
 				<TextB size="1.25em" />
 			</button>
 			<button
+				type="button"
 				class="item"
 				title="Toggle Italic"
 				aria-label="italic"
@@ -332,6 +339,7 @@
 				<TextItalic size="1.25em" />
 			</button>
 			<button
+				type="button"
 				class="item"
 				title="Toggle Underline"
 				aria-label="underline"
@@ -340,6 +348,7 @@
 				<TextUnderline size="1.25em" />
 			</button>
 			<button
+				type="button"
 				class="item"
 				title="Toggle Strikethrough"
 				aria-label="strikethrough"
@@ -414,7 +423,7 @@
 				<input type="checkbox" id="darkmode" />
 				<label for="darkmode">Dark mode</label>
 			</div>
-			<button class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+			<button type="button" class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
 				Save Changes
 			</button>
 		</form>