<script lang="ts"> import type { ClassValue } from 'svelte/elements'; const { class: className = undefined, id, name, label = 'Password', required = false, }: { class?: ClassValue; id: string; name: string; required?: boolean; label?: string; } = $props(); </script> <div class="relative {className ?? ''}"> <input {id} type="password" {name} class="peer w-full min-w-0 rounded bg-gray-200 px-2 py-1.5 text-black" placeholder="" {required} /> <label class="pointer-events-none absolute -top-6 left-0 text-sm transition-[translate,color,font-size] peer-placeholder-shown:translate-x-2 peer-placeholder-shown:translate-y-7.5 peer-placeholder-shown:text-base peer-placeholder-shown:text-black/50 peer-focus:translate-x-0 peer-focus:translate-y-0 peer-focus:text-sm peer-focus:text-white" for={id}>{label}</label > </div>