#501
Basic
A language switcher with three options named in their own language; picking one awaits an async onselect before the value changes.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Basic" pattern (@codeatlasdev/ui demo #501, navigation/locale-switcher) in my app.
Call get_demo({ ids: ["#501"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A language selector in a public header or settings: persist the choice, set the cookie and navigate to the localized URL, with the control busy meanwhile.
Keep these library parts, with the props and tokens the demo uses:
- LocaleSwitcher from "@codeatlasdev/ui"
Behaviour to keep:
- `<LocaleSwitcher {options} bind:value={locale} {onselect} />` with `options` of `pt-BR` (label `Português`, `short: 'PT'`), `en` (`English`) and `es` (`Español`)
- `async function onselect(next: string)` waits 600 ms, then writes a visible `saved` note: Saved <locale>; the app would now go to /<locale>/login.
- Before any pick the note reads `Pick a language: the switcher stays busy until onselect resolves.`
- The column is left-aligned with `gap: var(--ca-space-3)`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- LocaleSwitcher
@codeatlasdev/ui
How it is built
- `<LocaleSwitcher {options} bind:value={locale} {onselect} />` with `options` of `pt-BR` (label `Português`, `short: 'PT'`), `en` (`English`) and `es` (`Español`)
- `async function onselect(next: string)` waits 600 ms, then writes a visible `saved` note: Saved <locale>; the app would now go to /<locale>/login.
- Before any pick the note reads `Pick a language: the switcher stays busy until onselect resolves.`
- The column is left-aligned with `gap: var(--ca-space-3)`
Related
Loading source.