duration & time input: input visual invalidation

src/lib/DurationInput.svelte

@@ -80,7 +80,7 @@
 		/** Whether the input is required */
 		required?: boolean;
 		/** Message to show when the input is invalid */
-		invalidMessage?: string;
+		invalidMessage?: string | null;
 		/** Whether to use compact styling */
 		compact?: boolean;
 		/** Additional classes are applied to the root container (div element) */
@@ -96,7 +96,7 @@
 		value = $bindable(null),
 		formattedValue = $bindable(''),
 		required = false,
-		invalidMessage = 'Please enter a duration',
+		invalidMessage = null,
 		compact,
 		class: classValue,
 		onchange
@@ -280,6 +280,7 @@
 					placeholder={opts.placeholder}
 					validate={{ pattern: opts.pattern }}
 					use={(n) => liveValidator(n, keydownValidatorOpts)}
+					forceInvalid={!valid}
 					onkeydown={opts.onkeydown}
 					oninput={opts.oninput}
 					onblur={opts.onblur}
@@ -296,4 +297,12 @@
 			{/if}
 		{/each}
 	</div>
+
+	{#if !valid && invalidMessage}
+		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
+			<Label for={id} error={true}>
+				{invalidMessage}
+			</Label>
+		</div>
+	{/if}
 </div>

src/lib/TimeInput.svelte

@@ -266,6 +266,7 @@
 				min={0}
 				validate={{ pattern: opts.pattern }}
 				use={(n) => liveValidator(n, keydownValidatorOpts)}
+				forceInvalid={!valid}
 				onkeydown={opts.onkeydown}
 				oninput={opts.oninput}
 				onblur={opts.onblur}