0.2.14

package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "https://gitea.auvem.com/svelte-toolkit/sui.git"
 	},
-	"version": "0.2.12",
+	"version": "0.2.14",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",

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>

src/lib/TextInput.svelte

@@ -11,6 +11,7 @@
 		value?: string;
 		invalidMessage?: string | null;
 		ref?: HTMLInputElement | null;
+		asterisk?: boolean;
 		class?: ClassValue | null | undefined;
 	}
 
@@ -20,6 +21,7 @@
 		value = $bindable(''),
 		invalidMessage = 'Field is required',
 		ref = $bindable<HTMLInputElement | null>(null),
+		asterisk = false,
 		class: classValue,
 		...others
 	}: Props = $props();
@@ -33,7 +35,12 @@
 
 <div class={['w-full', classValue]}>
 	{#if label}
-		<Label for={id}>{label}</Label>
+		<Label for={id}>
+			{label}
+			{#if asterisk}
+				<span class="text-red-500">*</span>
+			{/if}
+		</Label>
 	{/if}
 
 	<StyledRawInput

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()}