<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>