Tags Input + Improved Date Input

src/lib/ListTextInput/ListTextInputElement.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+    export let id: number;
+    export let value: string;
+
+    let width: number;
+
+    $: width = Math.max(value.length + 3, 6);
+
+    const handleClick = () => {
+        dispatch('deleted', {
+            tagId: id,
+        });
+    }
+</script>
+
+<input id="tag-{id}" type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value}>
+<button on:click={handleClick}>X</button>
+
+<style>
+    .letterInput {
+        width: var(--valuelen);
+        padding-left: 1ch;
+    }
+</style>