{#if value}
{value}
{:else}
{placeholder ?? ($t('app.icon') ?? 'Icon')}
{/if}
{#if open}
{ if (e.target === e.currentTarget) open = false; }} >
{#if value}
{$t('common.clear') ?? 'Clear icon'}
{/if}
{#if filteredIcons.length === 0}
{$t('common.no_results') ?? 'No matching icons'}
{:else}
{#each filteredIcons as iconName (iconName)}
selectIcon(iconName)} class="flex items-center justify-center rounded-lg p-1.5 transition-colors hover:bg-accent {value === iconName ? 'bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'}" title={iconName} >
{/each}
{/if}
{ const v = (e.target as HTMLInputElement).value; value = v; onchange(v); }} placeholder={$t('app.icon_manual') ?? 'Or type icon name...'} class="w-full rounded-xl border border-input bg-background px-2 py-1 text-xs text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30" />
{/if}