From 645320d3353b08e1612b111776a5eabd3bc9025f Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Mon, 7 Jul 2025 15:49:30 -0700
Subject: [PATCH] style raw input: fix class prop

---
 src/lib/StyledRawInput.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/StyledRawInput.svelte b/src/lib/StyledRawInput.svelte
index 9d51ae4..1cd08e5 100644
--- a/src/lib/StyledRawInput.svelte
+++ b/src/lib/StyledRawInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
 	import {
 		validate,
 		type InputValidatorEvent,
@@ -8,7 +8,7 @@
 	import { generateIdentifier } from './util';
 	import { onMount } from 'svelte';
 
-	type $Props = Omit<HTMLInputAttributes, 'name' | 'value'> & {
+	type $Props = Omit<HTMLInputAttributes, 'name' | 'value' | 'class'> & {
 		name?: string;
 		value?: string;
 		validate?: ValidatorOptions;
@@ -16,6 +16,7 @@
 		use?: (node: HTMLInputElement) => void;
 		ref?: HTMLInputElement | null;
 		onvalidate?: (e: InputValidatorEvent) => void;
+		class?: ClassValue | null | undefined;
 	};
 
 	let {
@@ -28,6 +29,7 @@
 		use,
 		ref = $bindable<HTMLInputElement | null>(null),
 		onvalidate,
+		class: classValue,
 		...others
 	}: $Props = $props();
 
@@ -66,7 +68,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',
 		!valid && 'border-red-500!',
-		others.class
+		classValue
 	]}
 	use:validate={validateOpts}
 	use:conditionalUse