SPA & Text Inputs

src/lib/TextInput.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    export let id: string;
+    export let value: string = "";
+    export let placeholder: string = "";
+
+    let width: number;
+
+    $: width = Math.max(value.length + 3, placeholder.length + 3);
+</script>
+
+<input {id} type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value} {placeholder}>
+
+<style>
+    .letterInput {
+        width: var(--valuelen);
+        padding-left: 1ch;
+    }
+</style>