i18n

Vy UI components render their own text in only a few places — a close button's label, "Next Page" in pagination, the default screen-reader names covered in a11y. Everything else is content you pass in, so most translation lives in your app, not the library. The goal for i18n is to make the few library-owned strings overridable and to format locale-sensitive values correctly.

What works today

Lynx runs your JavaScript on a real engine, but native PrimJS can ship incomplete Intl APIs. Vy UI works around that with a small English-only stopgap in @vyui/core:

• installIntlPolyfill() fills broken or missing Intl.DateTimeFormat, Intl.NumberFormat, Intl.Collator, and Intl.Locale pieces.
• DateFormatter and useDateFormatter() avoid the host formatter when it is not safe to use.
• ConfigProvider accepts locale and dir, and useLocale() / useDirection() expose those values to primitives.

These APIs are meant to keep current components from crashing on native Lynx. They are not a complete localization system.

Still planned

• Overridable built-in strings — every library-owned label (close, pagination, clear) resolves through a small message map you can replace per locale, so a French app gets "Suivant" instead of "Next Page".
• Richer formatting helpers — a real locale-aware layer instead of the current English-only fallback formatter.
• Complete RTL coverage — direction-aware layout for Arabic, Hebrew, and similar, so start/end spacing and icon flipping resolve consistently from dir.
• Locale-aware accessibility defaults — built-in accessibility-label text should read from the active locale instead of being fixed English.

What you do today

Translate at the app level: pass already-localized text into components, install the polyfill once on native Lynx if your runtime needs it, and override built-in labels with the accessibility-label and slot props each component exposes.

import { installIntlPolyfill } from '@vyui/core'

installIntlPolyfill()

<template>
  <!-- your text, your translation layer -->
  <VyButton>{{ t('cart.checkout') }}</VyButton>

  <!-- override a built-in label per locale -->
  <VyButton :accessibility-label="t('a11y.addToFavorites')">
    <Icon name="heart" />
  </VyButton>
</template>

On the roadmap

The remaining work is the overridable string map, richer formatting, locale-aware accessibility defaults, and full RTL coverage — see the roadmap.