listformat conjunction and wrong order locale de bug

Fix ListFormat conjunction in the wrong order for German

TL;DR

You joined the list by hand with an English and, so use Intl.ListFormat for the locale instead. German uses und with its own spacing and Oxford-comma rules, and hand joining ignores all of that. Replace the manual join with the formatter and the order and conjunction become correct.

The error

German list renders "A, B, and C" with the English and
expected German conjunction handling

Fix it

Step 1: Find the hand-rolled joins

grep -rn '.join(' src/utils/ | grep -i "and\|&" | head -8

Expected: You see where lists are joined manually.

Step 2: Replace with Intl.ListFormat

node -e "console.log(new Intl.ListFormat('de',{style:'long',type:'conjunction'}).format(['A','B','C']))"

Expected: The formatter produces the German-correct list.

Step 3: Delete the manual join code

node -e "console.log('remove the .join(\", \") plus and logic, one formatter call replaces it')"

Expected: No hand joining remains.

Step 4: Check two-item and one-item lists

node -e "const f=new Intl.ListFormat('de',{style:'long',type:'conjunction'}); console.log(f.format(['A','B']), '|', f.format(['A']))"

Expected: Edge lengths render correctly too.

When to use this

• Lists show the wrong conjunction for the locale
• You join translated items with a hardcoded and

When NOT to use this

• The items are in the wrong order, sort before formatting
• You need disjunction (or), use type disjunction

Tool and version compatibility

• Intl.ListFormat, all modern browsers and Node 13+
• style long/short/narrow, type conjunction/disjunction/unit

Variant phrasings

disjunction lists (or) wrong

Same fix with type: 'disjunction'. German oder follows the same locale rules.

narrow style needed for UI chips

Use style: 'narrow'. The conjunction still localizes, just more compactly.

Why it happens

List conjunctions are locale data - the word, the spacing, and whether there is a serial comma all vary. Hardcoded joins bake in one language's rules, so every other locale reads wrong.

Edge cases

• Empty lists format to an empty string, handle that in UI code
• Unit type is for measurements, not general lists
• The formatter does not sort, sort first if order matters

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_mY-00rje2LLLAz9-5DQRwA