Allow custom classes to be on the button, make the button change the cursor type, and adjust indent on the script to make it consistent with other components

web-svelte/src/components/SciFi-Button.svelte

@@ -1,35 +1,38 @@
 <script lang="ts">
-	export let height: string|number = "50px";
-	export let width: string|number = "unset";
-	export let background: string = "#00aa00";
-	export let handler: (e: Event) => unknown;
-	export let hoverBackground: string = "transparent";
+export let height: string|number = "50px";
+export let width: string|number = "unset";
+export let background: string = "#00aa00";
+export let handler: (e: Event) => unknown;
+export let hoverBackground: string = "transparent";
+export let classes: string = "";
+export let title: string = "";
 
-	// Add the units to the height value if not provided, and ensure that the
-	// provided height is not less than 50 (the default)
-	$: if (typeof(height) == "string") {
+
+// Add the units to the height value if not provided, and ensure that the
+// provided height is not less than 50 (the default)
+$: if (typeof(height) == "string") {
 	if (height.match(/[0-9]$/)) {
 		if (height.match(/^[0-4]?[0-9]$/)) {
 			height = `50`;
 		};
 		height = `${height}px`;
 	};
-	} else {
+} else {
 	if (height < 50) {
 		height = 50;
 	};
 	height = `${height}px`;
-	};
+};
 
 
-	// Add the units to the width value if not provided
-	$: if (typeof(width) == "string") {
+// Add the units to the width value if not provided
+$: if (typeof(width) == "string") {
 	if (width.match(/[0-9]$/)) {
 		width = `${width}px`;
 	};
-	} else {
+} else {
 	width = `${width}px`;
-	};
+};
 </script>
 
 <div
@@ -38,9 +41,13 @@
 		--width: {width};
 		--background-colour: {background};
 		--hover-background-colour: {hoverBackground};"
-	class="button-container"
+	class="button-container {classes}"
 >
-	<button on:click={handler}>
+	<button
+		class="clickable"
+		{title}
+		on:click|trusted|stopPropagation={handler}
+	>
 		<slot></slot>
 	</button>
 </div>