{#each items as item (item.id)} {@const isActive = getActive() === item.id} {@const Icon = item.icon} select(item.id, item.disabled)} class={[ 'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30', sizeClasses[size], fullWidth && 'flex-1', isActive ? 'bg-brand-500 text-white shadow-sm' : 'text-secondary hover:bg-surface-elevated/70 hover:text-primary', item.disabled && 'cursor-not-allowed opacity-40' ]} > {#if Icon} {/if} {item.label} {/each}