{#each tabs as tab (tab.id)} {@const active = tab.id === value} select(tab.id)} class={[ 'px-3 h-9 text-sm font-medium border-b-2 -mb-px transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring rounded-t', active ? 'text-accent border-accent' : 'text-dim border-transparent hover:text-text', tab.disabled ? 'opacity-50 cursor-not-allowed' : '', ].join(' ')} > {tab.label} {/each}