{#if item.matchesQuery}
{ onhighlight?.(); item.highlight(); }} onclick={item.activate} class={[ 'gap-2 rounded-lg px-2.5 py-2 text-sm flex w-full items-center text-left transition-colors', 'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset', disabled && 'cursor-not-allowed opacity-40', !disabled && (item.isHighlighted ? 'bg-brand-500 text-white' : item.isSelected ? 'bg-brand-500/10 font-medium text-primary' : 'text-primary hover:bg-surface-overlay'), className ]} > {#if leading}
{@render leading()}
{/if}
{#if children} {@render children()} {:else} {label || value} {/if}
{#if trailing}
{@render trailing()}
{:else if item.isSelected}
{/if}
{/if}