<script lang="ts">
	import type { HTMLInputAttributes } from 'svelte/elements';

	type Props = HTMLInputAttributes;

	let { value = $bindable(''), class: className = '', ...rest }: Props = $props();
</script>

<!--
  Focus lifts the border rather than drawing an outer ring: the ring gets
  clipped wherever an input sits inside a scroll container, and this matches
  the composer cards on the landing and chat pages.
-->
<input
	bind:value
	class="w-full rounded-full border border-border bg-surface-raised px-4 py-2 text-sm text-ink transition-colors placeholder:text-ink-muted focus:border-border-strong focus:outline-none disabled:opacity-50 {className}"
	{...rest}
/>
