Fundamentals

Localization

Formats come from Intl; texts come from Kern in English or German, and every one can be replaced.

Locale

Components that format dates, times, numbers or sizes take a locale (BCP 47). Without it they use <html lang>, then the browser language.

Texts

Buttons, hints, validation messages and names for screen readers are Kern texts. Kern ships them in English and German and picks the language in this order:

the language set with setKernLocale(),
<html lang>, also when it changes later,
English.

The browser language is not used for texts, so they match the language of the app. A change re-renders all components at once, including validation messages already shown.

import { setKernLocale } from '@yfridelance/kern'; setKernLocale('de'); // German texts setKernLocale(); // follow <html lang> again

Up to version 0.8 the texts were German by default. An app that relies on this sets <html lang="de"> or calls setKernLocale('de').

More languages and own wording

setKernStrings() adds texts for a language or replaces single ones; missing texts fall back to the built-in ones of the base language, then English. Texts for a region (de-CH) win over those for the language (de).

import { setKernLocale, setKernStrings } from '@yfridelance/kern'; setKernStrings('fr', { 'kern-pagination.labelNext': 'Page suivante', 'kern-pagination.labelRange': '{from}–{to} sur {total}', }); setKernStrings('de-CH', { 'kern-table.labelEmpty': 'Nüt da' }); setKernLocale('fr');

Apps with their own i18n call setKernLocale() where they switch the language:

translate.onLangChange.subscribe(({ lang }) => setKernLocale(lang));

Language switcher

kern-language-select lets people pick the language: as a dropdown with names or codes, with or without flags, or side by side. It reports the choice with kernChange; the app switches its own texts and Kern's.

switcher.addEventListener('kernChange', (e) => setKernLocale(e.detail.value));

Single components

Every text is also a property, mostly starting with label, e.g. close-label on kern-dialog, label-invalid on typed fields, label-range on kern-pagination. A property set on a component wins over the Kern text. Placeholders like {n} or {name} are replaced. The property tables on each component page list them with their English and German default.

<kern-pagination total="380" label-range="{from}–{to} of {total} devices"></kern-pagination>

Functions take their texts as options (confirmLabel, cancelLabel for confirm(), closeLabel for toast()) and otherwise use the Kern texts too. setToastRegionLabel() fixes the name of the region all toasts share; without it the name follows the language.

All texts

Keys are <tag>.<property>, plus confirm.… and toast.… for the functions.

Key	en	de
`kern-app-shell.labelSkip`	Skip to content	Zum Inhalt springen
`kern-app-shell.labelNavigation`	Navigation	Navigation
`kern-breadcrumb.label`	Path	Pfad
`kern-breadcrumb.labelMore`	More levels	Weitere Ebenen
`kern-calendar.label`	Calendar	Kalender
`kern-calendar.labelPrev`	Previous month	Vorheriger Monat
`kern-calendar.labelNext`	Next month	Nächster Monat
`kern-calendar.labelWeek`	Wk	KW
`kern-chip.labelRemove`	Remove {label}	{label} entfernen
`kern-code.labelCopy`	Copy	Kopieren
`kern-code.labelCopied`	Copied	Kopiert
`kern-code.labelLatest`	Jump to latest	Zum Neuesten
`kern-color-picker.labelOpen`	Choose color	Farbe wählen
`kern-color-picker.labelArea`	Saturation and brightness	Sättigung und Helligkeit
`kern-color-picker.labelHue`	Hue	Farbton
`kern-color-picker.labelTemperature`	Color temperature	Farbtemperatur
`kern-color-picker.labelInvalid`	Not a valid color	Keine gültige Farbe
`kern-command-palette.label`	Command palette	Befehlspalette
`kern-command-palette.placeholder`	Search pages, devices and actions …	Seiten, Geräte und Aktionen suchen …
`kern-command-palette.labelLoading`	Searching …	Suche läuft …
`kern-command-palette.labelNoResults`	No results	Keine Treffer
`kern-command-palette.labelResults`	{n} results	{n} Treffer
`kern-command-palette.labelOneResult`	1 result	1 Treffer
`kern-copy.label`	Copy	Kopieren
`kern-date-picker.labelOpen`	Open calendar	Kalender öffnen
`kern-date-picker.labelClear`	Clear	Leeren
`kern-date-picker.labelInvalid`	Not a valid date	Kein gültiges Datum
`kern-date-picker.labelOutOfRange`	Date not allowed	Datum nicht erlaubt
`kern-date-range-picker.labelStart`	From	Von
`kern-date-range-picker.labelEnd`	To	Bis
`kern-date-range-picker.labelOpen`	Open calendar	Kalender öffnen
`kern-date-range-picker.labelClear`	Clear	Leeren
`kern-date-range-picker.labelInvalid`	Not a valid date	Kein gültiges Datum
`kern-date-range-picker.labelOutOfRange`	Date not allowed	Datum nicht erlaubt
`kern-date-range-picker.labelIncomplete`	Enter start and end	Start und Ende angeben
`kern-date-range-picker.labelTooLong`	At most {n} days	Höchstens {n} Tage
`kern-dialog.closeLabel`	Close	Schliessen
`kern-drawer.closeLabel`	Close	Schliessen
`kern-empty-state.headingEmpty`	No entries yet	Noch keine Einträge
`kern-empty-state.headingNoResults`	No matches	Keine Treffer
`kern-empty-state.headingError`	Could not load	Laden fehlgeschlagen
`kern-file-input.labelChoose`	Choose file	Datei wählen
`kern-file-input.labelChooseMultiple`	Choose files	Dateien wählen
`kern-file-input.labelDrop`	or drop here	oder hierher ziehen
`kern-file-input.labelRemove`	Remove {name}	{name} entfernen
`kern-file-input.labelTooLarge`	“{name}” is larger than {max}.	«{name}» ist grösser als {max}.
`kern-file-input.labelWrongType`	“{name}” is not an allowed file type.	«{name}» hat keinen erlaubten Dateityp.
`kern-ip-input.labelInvalid`	Not a valid IPv4 address	Keine gültige IPv4-Adresse
`kern-ip-input.labelNotAllowed`	This form is not allowed here	Diese Form ist hier nicht erlaubt
`kern-ip-input.labelTooMany`	At most {n} addresses	Höchstens {n} Adressen
`kern-ip-input.labelCount`	{n} addresses	{n} Adressen
`kern-ip-input.labelInvalidMask`	Not a valid subnet mask	Keine gültige Subnetzmaske
`kern-ip-input.labelMaskCount`	/{prefix} · {n} hosts	/{prefix} · {n} Hosts
`kern-json-diff.labelBefore`	Before	Vorher
`kern-json-diff.labelAfter`	After	Nachher
`kern-json-diff.labelPath`	Path	Pfad
`kern-json-diff.labelKind`	Kind	Art
`kern-json-diff.labelAdded`	added	neu
`kern-json-diff.labelRemoved`	removed	entfernt
`kern-json-diff.labelChanged`	changed	geändert
`kern-json-diff.labelNone`	No differences	Keine Unterschiede
`kern-json-diff.labelSummary`	{n} differences: {changed} changed, {added} added, {removed} removed	{n} Unterschiede: {changed} geändert, {added} neu, {removed} entfernt
`kern-language-select.label`	Language	Sprache
`kern-link.labelExternal`	opens in a new tab	öffnet in neuem Tab
`kern-list.empty`	No entries	Keine Einträge
`kern-log.label`	Log	Log
`kern-log.labelSearch`	Search log	Log durchsuchen
`kern-log.labelLevel`	Level	Stufe
`kern-log.labelAllLevels`	All levels	Alle Stufen
`kern-log.labelSource`	Source	Quelle
`kern-log.labelAllSources`	All sources	Alle Quellen
`kern-log.labelDebug`	Debug	Debug
`kern-log.labelInfo`	Info	Info
`kern-log.labelWarn`	Warning	Warnung
`kern-log.labelError`	Error	Fehler
`kern-log.labelPause`	Pause	Anhalten
`kern-log.labelResume`	Resume	Fortsetzen
`kern-log.labelCopy`	Copy	Kopieren
`kern-log.labelCopyEntry`	Copy entry	Eintrag kopieren
`kern-log.labelCopied`	Copied	Kopiert
`kern-log.labelDownload`	Download	Herunterladen
`kern-log.labelDetails`	Details	Details
`kern-log.labelLatest`	Jump to latest	Zum Neuesten
`kern-log.labelNew`	{n} new	{n} neu
`kern-log.labelAnnounce`	New log entries: {n}	Neue Log-Einträge: {n}
`kern-log.labelCount`	{n} of {total}	{n} von {total}
`kern-log.labelReset`	Reset filters	Filter zurücksetzen
`kern-mac-input.labelInvalid`	Not a valid MAC address	Keine gültige MAC-Adresse
`kern-pagination.label`	Pages	Seiten
`kern-pagination.labelRange`	{from}–{to} of {total}	{from}–{to} von {total}
`kern-pagination.labelPageSize`	Per page	Pro Seite
`kern-pagination.labelPage`	Page {n}	Seite {n}
`kern-pagination.labelFirst`	First page	Erste Seite
`kern-pagination.labelPrevious`	Previous page	Vorherige Seite
`kern-pagination.labelNext`	Next page	Nächste Seite
`kern-pagination.labelLast`	Last page	Letzte Seite
`kern-range.labelFrom`	From	Von
`kern-range.labelTo`	To	Bis
`kern-rating.labelValue`	{n} of {max} stars	{n} von {max} Sternen
`kern-select.labelSearch`	Search …	Suchen …
`kern-select.labelNoResults`	No results	Keine Treffer
`kern-select.labelRemove`	Remove {label}	{label} entfernen
`kern-signal.label`	Wi-Fi signal	WLAN-Signal
`kern-sparkline.label`	Trend	Verlauf
`kern-step-input.labelDecrease`	Decrease	Verringern
`kern-step-input.labelIncrease`	Increase	Erhöhen
`kern-step-input.labelInvalid`	Not a valid number	Keine gültige Zahl
`kern-table.labelEmpty`	No entries	Keine Einträge
`kern-table.labelSelectAll`	Select all	Alle auswählen
`kern-table.labelSelectRow`	Select row	Zeile auswählen
`kern-table.labelExpandRow`	Show details	Details anzeigen
`kern-table-columns.label`	Columns	Spalten
`kern-table-columns.labelMoveUp`	Move {label} up	{label} nach oben
`kern-table-columns.labelMoveDown`	Move {label} down	{label} nach unten
`kern-table-columns.labelPinnedStart`	Pinned to start	Am Anfang fixiert
`kern-table-columns.labelPinnedEnd`	Pinned to end	Am Ende fixiert
`kern-table-columns.labelMoved`	{label}: position {position} of {count}	{label}: Position {position} von {count}
`kern-theme-toggle.labelLight`	Switch to light theme	Zu hellem Design wechseln
`kern-theme-toggle.labelDark`	Switch to dark theme	Zu dunklem Design wechseln
`kern-time-picker.labelHour`	Hours	Stunden
`kern-time-picker.labelMinute`	Minutes	Minuten
`kern-time-picker.labelSecond`	Seconds	Sekunden
`kern-time-picker.labelPeriod`	AM/PM	Vormittag/Nachmittag
`kern-time-picker.labelList`	Choose time	Zeit wählen
`kern-time-picker.labelOutOfRange`	Time not allowed	Zeit nicht erlaubt
`kern-timeline.empty`	No events yet	Noch keine Ereignisse
`kern-timeline.labelMore`	Load more	Weitere laden
`kern-timeline.labelLoaded`	{n} more events loaded	{n} weitere Ereignisse geladen
`kern-timeline-item.labelShow`	Show details	Details anzeigen
`kern-timeline-item.labelHide`	Hide details	Details ausblenden
`kern-toast.closeLabel`	Close	Schliessen
`kern-topbar.labelMenu`	Menu	Menü
`kern-topbar.navLabel`	Main navigation	Hauptnavigation
`confirm.confirmLabel`	OK	OK
`confirm.cancelLabel`	Cancel	Abbrechen
`confirm.typeToConfirmLabel`	Type {list} to confirm	Zur Bestätigung {list} eintippen
`confirm.quote`	“{text}”	«{text}»
`confirm.or`	or	oder
`toast.regionLabel`	Notifications	Benachrichtigungen