<script lang="ts">
  export let type: string = 'text';
  export let name: string | undefined;
  export let value: string | number | undefined = undefined;
  export let placeholder: string = '';
  export let disabled: boolean = false;
</script>

<input
  class="textfield"
  {type}
  {name}
  bind:value
  {placeholder}
  {disabled}
/>

<style>
  .textfield {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
  }
  .textfield:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
</style>
