Built for people who think better out loud.
1<script lang="ts">
2 import type { HTMLInputAttributes } from "svelte/elements";
3 let { class: className = "", value = $bindable(""), ...props }: HTMLInputAttributes = $props();
4</script>
5
6<input
7 {...props}
8 bind:value
9 class="
10 px-3 py-px font-base bg-slate-950/7
11 border-s-slate-950 rounded-md
12 border-l-4 border-t-4 border-r border-b
13 shadow-[inset_-1px_-1px_3px_rgba(15,23,42,0.85)]
14 focus-visible:outline-none focus-visible:border-blue-700
15 focus-visible:shadow-[inset_-1px_-1px_3px_rgb(15,23,42)]
16 transition-all motion-reduce:transition-none duration-60
17 {className}
18 "
19/>