merge: upstream

Author: sosweetham

platforms/metagram/src/lib/ui/Input/Input.stories.ts

@@ -28,20 +28,31 @@ export const Tel = {
     },
 };
 
+<<<<<<< HEAD
 export const number = {
     args: {
         type: "number",
         placeholder: "Enter something",
     },
 };
 
+=======
+>>>>>>> a741e7819d230dbf0f597842938d0eb5b7db018f
 export const Email = {
     args: {
         type: "email",
         placeholder: "example@email.com",
     },
 };
 
+export const Invalid = {
+	args: {
+		type: 'email',
+		placeholder: 'Invalid email',
+		value: 'not-an-email'
+	}
+};
+
 export const Password = {
     args: {
         type: "password",

platforms/metagram/src/lib/ui/Input/Input.svelte

@@ -14,7 +14,7 @@
 	}: IInputProps = $props();
 
 	const cbase = $derived(
-		'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent focus:text-black-800 focus:border-transparent border invalid:border-red invalid:text-red'
+		'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent'
 	);
 </script>