fix(input-tel): use full locale to translate country names in dropdown

[Hzunax]

What I did

1. Pass full locale to new Intl.DisplayNames constructor.

Issue

The constructor accepts either a language (e.g. en, nl, ...) or the full locale (e.g. en-GB, nl-BE, ...). Instead, we're passing only the region (e.g. GB, BE, ...), which is not a valid param for the constructor. Sometimes that works because language and region are the same (e.g. fr-FR, de-DE), but that is not always the case.

• Intl locales argument
• Intl.Locale

If the specified locale is not recognized, the translations default to English.

Reproduce

1. Go to the demo of input-tel-dropdown extension
2. Open the dropdown and check the translations.
3. Open the browser dev tools to change the lang of the html tag to nl-BE.
4. Open the dropdown again.
5. The countries are shown in English.
6. Change the lang attribute to fr-FR
7. Open the dropdown again
8. The countries are shown in French

Fix

By using the full locale in the constructor for Intl.DisplayNames, the countries are translated correctly to the browser language:

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 4b1b09ac3aaba030fc25230c9a77388aa2e9810b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@lion/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Hzunax]

I have now also added a fix for the nameForRegion, which was displayed incorrectly. I created a regionCodeToLocale function, which estimates the full locale based on a region code, in order to pass it to the new Intl.DisplayNames constructor.