Localized Changelog Block for React

Edit LANGUAGES at the top of the file. A language has a code, the name it calls itself, rtl (true for a language with an RTL script), a title and its entries. An entry has a version, the day as that language writes it, the same day as an ISO iso date, a kind, the type word as tag and the text. The Select's items are built from the same list, so a new language appears in it without more edits.

The card is the element that carries lang and dir, so only its contents flip. Its spacing uses logical properties (start and end), so padding, the badge and the date column mirror by themselves. Versions are set in mono with dir="ltr" so "5.2.0" always reads the same, and each date is wrapped so mixed text and numbers keep their order. The page around the card stays in its own direction.

It's the catalog's Select with a visible "Language" label and one item per language, shown by the language's own name. It opens with Enter, Space or the arrow keys, the arrows move through the items and Escape closes it. A visually hidden polite line says which language is showing.

Translations differ in length, so every language's card is also laid out unseen in the same grid cell, and the tallest sets the height. The unseen copies are hidden from assistive technology and the keyboard, and they carry their own direction so they are measured correctly.

No. Each language has its dates written out in data, next to the ISO day that goes in the time element's datetime, so the server and every browser show the same text. Nothing uses today's date.

The header and the card fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Changing language swaps the text at once.