{#if !compact} {/if}

typeahead?.refresh()}
			onclick={() => typeahead?.refresh()}
			onscroll={() => typeahead?.refresh()}
			onblur={() => typeahead?.close()}
			class={classes.field()}
		/>
		{#if trailing}
			<div class="shrink-0">
				{@render trailing()}
			</div>
		{/if}
		{#if preview}
			<div
				bind:this={pane}
				onscroll={handlePreviewScroll}
				class="absolute inset-0 flex flex-col overflow-y-auto"
			>
				<Pending>
					{#snippet failed()}
						<div
							class="px-2.5 py-xs typography-paragraph-small text-foreground-subtle italic"
							data-preview-ready
						>
							Could not render preview.
						</div>
					{/snippet}
					{@const html = await rendered}
					<div
						class="markup px-2.5 py-xs"
						data-preview-ready
						use:enhanceCodeblocks={html}
						{@attach alignPreview}
					>
						
						{@html html}
					</div>
				</Pending>
			</div>
		{/if}
	</div>
</div>