Ariane

Ariane s'appuie sur la micro-librairie @shoelace-style/localize pour fournir un mécanisme de traduction de ses composants.

La langue par défaut est déterminée par la valeur de l'attribut <html lang>, mais l'ajout d'un attribut lang sur un composant permet une surcharge locale.
Si aucun des deux attributs n'est présent, c'est la langue du navigateur (navigator.language) qui est utilisé.
Dans tous les cas s'il n'existe pas de traduction pour la langue identifiée, c'est l'anglais qui sera utilisé, quelle que soit la langue du navigateur.

<!-- Langue par défaut de la page -->
<html lang="en">

<!-- Ou par composant, en surcharge -->
<ar-table-sort lang="es">Prix</ar-table-sort>

Contrairement à d'autres bibliothèques qui publient un fichier par langue à charger à la demande, les traductions en (langue de repli) et fr sont embarquées directement dans chaque composant qui en a besoin (CDN ou npm). Charger ar-table-sort ou ar-datepicker suffit — les deux langues sont déjà enregistrées, aucun import supplémentaire n'est nécessaire pour les utiliser.

Que vous souhaitiez surcharger une langue fournie, ou disposer sans attendre d'une traduction non disponible pour votre propre langue, le mécanisme à utiliser est très simple.

Consultez /core/src/translations/fr.ts (la traduction source du package, la plus à jour) pour la liste des termes.
Écrivez un module qui n'exporte que votre traduction, avec les termes à changer : les termes absents de votre traduction s'affichent en anglais.

// es.js — vos termes traduits, sans import ni typage (usage CDN). Les termes absents de votre traduction s'affichent en anglais.

const translation = {
    $code: 'es',
    $name: 'Español',
    $dir: 'ltr',

    // ... les termes à traduire (voir fr.ts pour la liste)
    term1: '...',
    term2: '...',
};

export default translation;

Dans votre HTML, importez ensuite l'utilitaire registerTranslation depuis cdn/utils.js.
En environnement de développement, utilisez utils.dev.js et veillez dans ce cas à charger autoloader.dev.js ou index.dev.js. Sinon, la traduction serait enregistrée dans un registre que les composants ne lisent pas, sans erreur visible.

<html lang="es">
  <head>
    <!-- Enregistrez votre traduction -->
    <script type="module">
      import { registerTranslation } from 'https://unpkg.com/@ariane-ui/core@<version>/cdn/utils.js';
      import translation from './translations/es.js';
      registerTranslation(translation);
    </script>

    <!-- Puis chargez les composants -->
    <script type="module" src="https://unpkg.com/@ariane-ui/core/cdn/autoloader.js"></script>
  </head>

  <body>
    ...
  </body>
</html>

Consultez /core/src/translations/fr.ts (la traduction source du package, la plus à jour) pour la liste des termes, et traduisez ceux dont vous avez besoin.
Le type Translation, exporté par le package, n'impose que $code, $name et $dir : un terme absent se replie sur la langue de base (en pour en-GB), puis sur l'anglais intégré. Pour que le compilateur garantisse une traduction complète, et signale les termes ajoutés dans une version ultérieure, typez avec FullTranslation (même export) : un nouveau terme devient alors une erreur de compilation, par choix de votre part.

// es.ts — vos termes traduits ; les termes absents de votre traduction s'affichent en anglais
import { registerTranslation } from '@ariane-ui/core/utils';
import type { Translation } from '@ariane-ui/core/utils';

const translation: Translation = {
    $code: 'es',
    $name: 'Español',
    $dir: 'ltr',

    // ... les termes à traduire (voir fr.ts pour la liste)
    term1: '...',
    term2: '...',
};

registerTranslation(translation);

export default translation;

Importez votre traduction une seule fois, dans le point d'entrée de l'application ou dans le layout racine : le registre est partagé par tous les composants, il n'y a rien à importer composant par composant. L'ordre d'import n'a pas d'incidence sur l'affichage :

// main.js (ou layout racine)
import '@ariane-ui/core'; // les composants
import './translations/es.js'; // votre traduction (l'ordre d'import n'a pas d'importance)

Avec registerTranslation importé de @ariane-ui/core/utils (ou de cdn/utils.js), les traductions intégrées sont enregistrées à l'import, l'anglais en premier : c'est toujours la langue de repli, complète (c'est la version intégrée : une surcharge de en ne s'applique qu'aux pages en en). Pour surcharger une langue fournie (fr ou en), enregistrez un objet partiel avec le même $code : seuls les termes que vous donnez changent, avant ou après le chargement des composants. Une variante régionale s'ajoute avec son code (fr-CA ne s'applique qu'à fr-CA). Ces garanties ne valent pas pour un registerTranslation importé directement de @shoelace-style/localize, où la première traduction enregistrée devient la langue de repli.

Chaque composant concerné documente son propre support i18n dans sa page.
Pour le détail des termes, voir les traductions existantes sur le repo Github