--- name: gh-translate-button description: >- Use when the user wants to add a language switcher, a translate button, an i18n toggle, or multi-language support to a page or component. Triggers on "translation button", "language switcher", "language selector", "i18n toggle", "add languages to this page", "multi-language", "localize this", "RTL support", "Arabic support", "lang switcher", "translate widget". Specs a reusable component supporting EN, IT, AR, NL, ZH-CN, ES, FR, DE, PT-BR — with Arabic as RTL and the active language driven by a ?lang= URL param (never localStorage) — and ships a drop-in vanilla HTML/JS snippet. --- # gh-translate-button A reusable, dependency-free language switcher. Drop it into any page; it switches UI strings, flips direction for RTL, and persists the choice **only** through the `?lang=` URL parameter. ## Requirements (non-negotiable) - **Languages (9):** `en`, `it`, `ar`, `nl`, `zh-CN`, `es`, `fr`, `de`, `pt-BR`. - **Arabic is RTL.** When `ar` is active, set `dir="rtl"` on ``; all others are `ltr`. - **State lives in `?lang=` only.** The active language is read from and written to the URL query param. **Never use `localStorage`/cookies** — the URL is the single source of truth, so a shared link reproduces the exact language, and there's no hidden persisted state. - **No reload on switch.** Update the URL with `history.replaceState` and re-render in place. - **Graceful fallback.** Unknown/missing `?lang=` → default `en`. Missing key in a dictionary → fall back to the `en` string. - **Accessible.** The control is a labelled `