time input: custom class support, name optional

src/lib/TimeInput.svelte

@@ -4,6 +4,19 @@
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { onMount } from 'svelte';
 	import moment from 'moment';
+	import type { ClassValue } from 'svelte/elements';
+	import { generateIdentifier } from './util.js';
+
+	interface Props {
+		name?: string;
+		label?: string;
+		value?: string;
+		formattedValue?: string;
+		required?: boolean;
+		invalidMessage?: string;
+		showConfirm?: boolean;
+		class?: ClassValue | null | undefined;
+	}
 
 	let {
 		name,
@@ -12,17 +25,11 @@
 		formattedValue = $bindable(''),
 		required,
 		invalidMessage = 'Please select a time',
-		showConfirm = false
+		showConfirm = false,
-	}: {
+		class: classValue
-		name: string;
+	}: Props = $props();
-		label?: string;
-		value?: string;
-		formattedValue?: string;
-		required?: boolean;
-		invalidMessage?: string;
-		showConfirm?: boolean;
-	} = $props();
 
+	const id = $derived(generateIdentifier('time-input', name));
 	let ampm: 'AM' | 'PM' = $state('AM');
 	let type: HTMLInputElement['type'] = $state('number');
 	let valid: boolean = $state(true);
@@ -190,14 +197,15 @@
 	});
 </script>
 
-<div>
+<div class={classValue}>
 	{#if label}
-		<Label for={name}>{label}</Label>
+		<Label for={id}>{label}</Label>
 	{/if}
 
 	<!-- Hidden input stores the selected time in 24-hour format -->
 	<input
 		type="hidden"
+		{id}
 		{name}
 		use:validate={{ required, autovalOnInvalid: true }}
 		onvalidate={(e) => (valid = e.detail.valid)}
@@ -344,7 +352,7 @@
 	</div>
 
 	<div class={['opacity-0 transition-opacity', (!valid || showConfirm) && 'opacity-100']}>
-		<Label for={name} error={!valid}>
+		<Label for={id} error={!valid}>
 			{#if !valid}
 				{invalidMessage}
 			{:else if showConfirm}