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