{#if variant === 'segmented'}
{#if showLabel}
{label}
{/if}
{#each locales as locale (locale.code)}
select(locale)} class={[ 'inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30', segmentSize, value === locale.code ? 'bg-surface-elevated text-primary shadow-sm' : 'text-secondary hover:text-primary' ]} title={locale.englishLabel ?? locale.label} > {#if showFlags && locale.flag}
{locale.flag}
{/if}
{locale.code.split('-')[0].toUpperCase()}
{/each}
{:else if variant === 'list'}
{label}
Choose how the product is displayed
{#each locales as locale (locale.code)}
select(locale)} class={[ 'flex w-full items-center gap-3 px-4 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500/30', value === locale.code ? 'bg-brand-500/5' : 'hover:bg-surface-overlay' ]} > {#if showFlags}
{locale.flag ?? '🌐'}
{/if}
{locale.label}
{locale.englishLabel ?? locale.code} {#if locale.region}· {locale.region}{/if}
{#if value === locale.code}
{/if}
{/each}
{:else}
{#if showLabel}
{label}
{/if}
(open = !open)} > {#if showFlags && current?.flag}
{current.flag}
{:else}
{/if} {#if stacked}
{current?.label ?? value}
{shortCode}
{:else}
{current?.label ?? value}
{shortCode}
{/if}
{#if open}
{label}
{#each locales as locale (locale.code)}
select(locale)} class={[ 'flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:bg-surface-overlay', value === locale.code ? 'bg-brand-500/5' : 'hover:bg-surface-overlay' ]} > {#if showFlags}
{locale.flag ?? '🌐'}
{/if}
{locale.label}
{locale.englishLabel ?? locale.code} {#if locale.region}· {locale.region}{/if}
{#if value === locale.code}
{/if}
{/each}
{/if}
{/if}