Copy page

Components

LangSelect

src/lib/components/LangSelect.svelte

Purpose

The topbar language selector. A DropdownMenu whose trigger shows the current language's flag (via flag-icons fi-* classes) and a two-letter suffix (uiLangTopBarTwoLetterSuffix). The menu lists all supported UI languages sorted by the browser's navigator.languages (orderLangEntriesByBrowser), marks the active one with a selected class, and persists the choice via setUiLang (backed by the uiLang store). Supported codes: en-GB, en-US, it-IT, fr-FR, es-ES, de-DE, pt-PT.

Origin

Custom — Primebrick-written. Uses shadcn-svelte™ Button and DropdownMenu, $lib/i18n/store.svelte, and @lucide/svelte ChevronDown.

Usage

Default (mounted in AppTopbar)

Code
<LangSelect />

Programmatic language change

The selection is driven by the uiLang store; call setUiLang anywhere to update the trigger reactively.

Code
<script lang="ts">
  import { setUiLang } from '$lib/i18n/store.svelte';
</script>

<button onclick={() => setUiLang('it-IT')}>Italiano</button>

Trigger layout

The trigger is a soft-variant Button capped at 14rem, showing flag + 2-char suffix + chevron. It is aria-labeled with the current language label.

Props

Full prop table: see API reference — langselect.

Key props: none — LangSelect takes no props; it reads/writes the uiLang store.

Next steps

• Component catalog
• UI stack
• API reference