pin input: make name optional, custom class support, fix hidden input

src/lib/PinInput.svelte

@@ -1,6 +1,19 @@
 <script lang="ts">
 	import { isValueValid, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
 	import Label from './Label.svelte';
+	import type { ClassValue } from 'svelte/elements';
+	import { generateIdentifier } from './util.js';
+
+	interface Props {
+		label?: string;
+		length: number;
+		required?: boolean;
+		name?: string;
+		value?: string;
+		oncomplete?: (value: string) => void;
+		onchange?: (value: string) => void;
+		class?: ClassValue | null | undefined;
+	}
 
 	let {
 		label,
@@ -9,16 +22,11 @@
 		name,
 		value = $bindable(''),
 		oncomplete,
-		onchange
+		onchange,
-	}: {
+		class: classValue
-		label?: string;
+	}: Props = $props();
-		length: number;
+
-		required?: boolean;
+	const id = $derived(generateIdentifier('pin-input', name));
-		name: string;
-		value?: string;
-		oncomplete?: (value: string) => void;
-		onchange?: (value: string) => void;
-	} = $props();
 
 	let hiddenInput: HTMLInputElement;
 	let valid: boolean = $state(true);
@@ -148,20 +156,23 @@
 	});
 </script>
 
-<input
+<div class={classValue}>
+	<input
+		{id}
+		{name}
 		class="hidden"
 		use:validate={validateOpts}
 		onvalidate={(e) => {
 			valid = e.detail.valid;
 		}}
 		bind:this={hiddenInput}
-/>
+	/>
 
-{#if label}
+	{#if label}
-	<Label bigError={!valid} for={name}>{label}</Label>
+		<Label bigError={!valid} for={id}>{label}</Label>
-{/if}
+	{/if}
 
-<div>
+	<div>
 		<div class="flex gap-4">
 			{#each { length: length } as _, i}
 				<input
@@ -185,4 +196,5 @@
 				/>
 			{/each}
 		</div>
+	</div>
 </div>

src/routes/+page.svelte

@@ -98,7 +98,7 @@
 
 <div class="component">
 	<p class="title">Pin Input</p>
-	<PinInput name="pin" length={6} />
+	<PinInput label="Please enter your 6-digit PIN" length={6} />
 </div>
 
 <div class="component">