StyledRawInput: support external force invalid visual state

src/lib/StyledRawInput.svelte

@@ -16,6 +16,8 @@
 		compact?: boolean;
 		use?: (node: HTMLInputElement) => void;
 		ref?: HTMLInputElement | null;
+		/** Forces the input to be visually marked as invalid */
+		forceInvalid?: boolean;
 		onvalidate?: (e: InputValidatorEvent) => void;
 	};
 
@@ -30,6 +32,7 @@
 		compact = false,
 		use,
 		ref = $bindable<HTMLInputElement | null>(null),
+		forceInvalid = false,
 		onvalidate,
 		class: classValue,
 		...others
@@ -71,7 +74,7 @@
 		'dark:text-sui-background dark:placeholder:text-sui-background/60 dark:sm:bg-slate-800',
 		'ring-sui-primary ring-offset-1 placeholder-shown:text-ellipsis focus:ring-2',
 		!compact ? 'px-[1.125rem] py-3.5' : 'px-[0.75rem] py-2',
-		!valid && 'border-red-500!',
+		(!valid || forceInvalid) && 'border-red-500!',
 		disabled &&
 			'border-sui-accent/20 text-sui-text/60 dark:text-sui-background/60 cursor-not-allowed',
 		classValue