From 9d0f10f0fda88029f56317a78e74400958b803e5 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 11 Dec 2025 16:00:41 -0800
Subject: [PATCH] duration & time input: input visual invalidation

---
 src/lib/DurationInput.svelte | 13 +++++++++++--
 src/lib/TimeInput.svelte     |  1 +
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/DurationInput.svelte b/src/lib/DurationInput.svelte
index 642caf1..6533faf 100644
--- a/src/lib/DurationInput.svelte
+++ b/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>
diff --git a/src/lib/TimeInput.svelte b/src/lib/TimeInput.svelte
index 0fc43df..fcc0c7c 100644
--- a/src/lib/TimeInput.svelte
+++ b/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}