PixelPilot: Instructions file for GitHub Copilot

UI/UX Internationalization (i18n) 2026

Language switchers, RTL support, date/time formatting, number/currency formatting, and pluralization rules.

1. LANGUAGE SWITCHER (Flag/Text & dir Attribute)

<div class="language-switcher">
  <button class="language-switcher__trigger" aria-haspopup="listbox" aria-expanded="false">
    <span class="language-switcher__flag">🇺🇸</span>
    <span class="language-switcher__text">English</span>
    <i data-lucide="chevron-down"></i>
  </button>
  <ul role="listbox" class="language-switcher__menu" hidden>
    <li role="option" class="language-switcher__item" data-lang="en" data-dir="ltr">English</li>
    <li role="option" class="language-switcher__item" data-lang="ar" data-dir="rtl">العربية</li>
  </ul>
</div>

// Language Switcher Logic
const switcher = document.querySelector('.language-switcher');
const trigger = switcher.querySelector('.language-switcher__trigger');
const menu = switcher.querySelector('.language-switcher__menu');

trigger.addEventListener('click', () => {
  const expanded = trigger.getAttribute('aria-expanded') === 'true';
  trigger.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});

menu.addEventListener('click', (e) => {
  const item = e.target.closest('.language-switcher__item');
  if (!item) return;

  const lang = item.dataset.lang;
  const dir = item.dataset.dir;

  document.documentElement.lang = lang;
  document.documentElement.dir = dir;
  localStorage.setItem('lang', lang);
  localStorage.setItem('dir', dir);

  // Update UI
  trigger.querySelector('.language-switcher__text').textContent = item.textContent;
  trigger.setAttribute('aria-expanded', 'false');
  menu.hidden = true;

  // Reload or update translations
  updateTranslations(lang);
});

2. RTL SUPPORT (CSS Logical Properties)

Rule: Use logical properties (margin-inline, padding-inline, inset-inline) instead of physical properties (margin-left, padding-right, left).