cozy-ui 142.2.3 → 142.3.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [142.3.1](https://github.com/cozy/cozy-ui/compare/v142.3.0...v142.3.1) (2026-10-13)
+
+
+### Bug Fixes
+
+* **Badge:** Draw counts as a pill ([5e0875c](https://github.com/cozy/cozy-ui/commit/5e0875c))
+
+# [142.3.0](https://github.com/cozy/cozy-ui/compare/v142.2.3...v142.3.0) (2026-10-06)
+
+
+### Features
+
+* Add Spanish, German and Italian locales ([0397ea2](https://github.com/cozy/cozy-ui/commit/0397ea2))
+
 ## [142.2.3](https://github.com/cozy/cozy-ui/compare/v142.2.2...v142.2.3) (2026-10-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "142.2.3",
+  "version": "142.3.1",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/ActionsBar/locales/de.json

@@ -0,0 +1,4 @@
+{
+  "selected": "%{smart_count} Element ausgewählt |||| %{smart_count} Elemente ausgewählt",
+  "selected_light": "%{smart_count} Element |||| %{smart_count} Elemente"
+}

package/react/ActionsBar/locales/es.json

@@ -0,0 +1,4 @@
+{
+  "selected": "%{smart_count} elemento seleccionado |||| %{smart_count} elementos seleccionados",
+  "selected_light": "%{smart_count} elemento |||| %{smart_count} elementos"
+}

package/react/ActionsBar/locales/it.json

@@ -0,0 +1,4 @@
+{
+  "selected": "%{smart_count} elemento selezionato |||| %{smart_count} elementi selezionati",
+  "selected_light": "%{smart_count} elemento |||| %{smart_count} elementi"
+}

package/react/ActionsBar/locales/withActionsLocales.jsx

@@ -1,13 +1,19 @@
 import { withOnlyLocales } from 'twake-i18n'
 
+import de from './de.json'
 import en from './en.json'
+import es from './es.json'
 import fr from './fr.json'
+import it from './it.json'
 import ru from './ru.json'
 import vi from './vi.json'
 
 export const locales = {
+  de,
   en,
+  es,
   fr,
+  it,
   ru,
   vi
 }

package/react/ActionsMenu/Actions/locales/de.json

@@ -0,0 +1,30 @@
+{
+  "menu": "Menü",
+  "viewInContacts": "In Cozy Contacts anzeigen",
+  "viewInDrive": "Öffnen",
+  "modify": "Bearbeiten",
+  "emailTo": "E-Mail senden",
+  "smsTo": "Nachricht senden",
+  "print": "Drucken",
+  "download": "Herunterladen",
+  "favorites": {
+    "add": {
+      "label": "Zu Favoriten hinzufügen",
+      "success": "%{filename} wurde zu den Favoriten hinzugefügt |||| Diese Elemente wurden zu den Favoriten hinzugefügt"
+    },
+    "remove": {
+      "label": "Aus Favoriten entfernen",
+      "success": "%{filename} wurde aus den Favoriten entfernt |||| Diese Elemente wurden aus den Favoriten entfernt"
+    },
+    "error": "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut."
+  },
+  "others": "Weitere",
+  "editAttribute": "Attribut bearbeiten",
+  "copyToClipboard": {
+    "copy": "Kopieren",
+    "success": "In die Zwischenablage kopiert",
+    "error": "Kopieren in die Zwischenablage nicht möglich"
+  },
+  "call": "Anrufen",
+  "exportToText": "Als Text exportieren"
+}

package/react/ActionsMenu/Actions/locales/es.json

@@ -0,0 +1,30 @@
+{
+  "menu": "Menú",
+  "viewInContacts": "Ver en Cozy Contacts",
+  "viewInDrive": "Abrir",
+  "modify": "Modificar",
+  "emailTo": "Enviar un correo",
+  "smsTo": "Enviar un mensaje",
+  "print": "Imprimir",
+  "download": "Descargar",
+  "favorites": {
+    "add": {
+      "label": "Añadir a favoritos",
+      "success": "%{filename} se ha añadido a favoritos |||| Estos elementos se han añadido a favoritos"
+    },
+    "remove": {
+      "label": "Quitar de favoritos",
+      "success": "%{filename} se ha quitado de favoritos |||| Estos elementos se han quitado de favoritos"
+    },
+    "error": "Se ha producido un error. Inténtelo de nuevo."
+  },
+  "others": "Otros",
+  "editAttribute": "Editar atributo",
+  "copyToClipboard": {
+    "copy": "Copiar",
+    "success": "Copiado al portapapeles",
+    "error": "No se puede copiar al portapapeles"
+  },
+  "call": "Llamar",
+  "exportToText": "Exportar como texto"
+}

package/react/ActionsMenu/Actions/locales/it.json

@@ -0,0 +1,30 @@
+{
+  "menu": "Menu",
+  "viewInContacts": "Visualizza in Cozy Contacts",
+  "viewInDrive": "Apri",
+  "modify": "Modifica",
+  "emailTo": "Invia un'email",
+  "smsTo": "Invia un messaggio",
+  "print": "Stampa",
+  "download": "Scarica",
+  "favorites": {
+    "add": {
+      "label": "Aggiungi ai preferiti",
+      "success": "%{filename} è stato aggiunto ai preferiti |||| Questi elementi sono stati aggiunti ai preferiti"
+    },
+    "remove": {
+      "label": "Rimuovi dai preferiti",
+      "success": "%{filename} è stato rimosso dai preferiti |||| Questi elementi sono stati rimossi dai preferiti"
+    },
+    "error": "Si è verificato un errore, riprova."
+  },
+  "others": "Altro",
+  "editAttribute": "Modifica attributo",
+  "copyToClipboard": {
+    "copy": "Copia",
+    "success": "Copiato negli appunti",
+    "error": "Impossibile copiare negli appunti"
+  },
+  "call": "Chiama",
+  "exportToText": "Esporta come testo"
+}

package/react/ActionsMenu/Actions/locales/withActionsLocales.jsx

@@ -1,13 +1,19 @@
 import { withOnlyLocales, getI18n } from 'twake-i18n'
 
+import de from './de.json'
 import en from './en.json'
+import es from './es.json'
 import fr from './fr.json'
+import it from './it.json'
 import ru from './ru.json'
 import vi from './vi.json'
 
 export const locales = {
+  de,
   en,
+  es,
   fr,
+  it,
   ru,
   vi
 }

package/react/Badge/Readme.md

@@ -56,6 +56,32 @@ const DemoBadge = ({ variant, ...props }) => {
 </Variants>
 ```
 
+### Counts
+
+One or two digits sit in a circle, longer counts in a pill.
+
+```jsx
+import Badge from 'cozy-ui/transpiled/react/Badge'
+import { CircleFilled, Icon } from '@linagora/twake-icons'
+
+;
+
+<>
+  {[1, 12, 44, 99, 120].map(count => (
+    <Badge
+      key={count}
+      className="u-m-1"
+      badgeContent={count}
+      max={99}
+      color="primary"
+      size="medium"
+    >
+      <Icon icon={CircleFilled} size="24" color="var(--iconTextColor)" />
+    </Badge>
+  ))}
+</>
+```
+
 ### Double badges
 
 Badges can be combined — in this example, we have an item with a new qualification.

package/react/ColorPickerCustom/locales/de.json

@@ -0,0 +1,6 @@
+{
+  "ColorPickerCustom": {
+    "cancel": "Abbrechen",
+    "submit": "Speichern"
+  }
+}

package/react/ColorPickerCustom/locales/es.json

@@ -0,0 +1,6 @@
+{
+  "ColorPickerCustom": {
+    "cancel": "Cancelar",
+    "submit": "Guardar"
+  }
+}

package/react/ColorPickerCustom/locales/index.js

@@ -1,11 +1,17 @@
+import de from './de.json'
 import en from './en.json'
+import es from './es.json'
 import fr from './fr.json'
+import it from './it.json'
 import ru from './ru.json'
 import vi from './vi.json'
 
 export const locales = {
+  de,
   en,
+  es,
   fr,
+  it,
   ru,
   vi
 }

package/react/ColorPickerCustom/locales/it.json

@@ -0,0 +1,6 @@
+{
+  "ColorPickerCustom": {
+    "cancel": "Annulla",
+    "submit": "Salva"
+  }
+}

package/react/CozyDialogs/SpecificDialogs/locales/de.json

@@ -0,0 +1,41 @@
+{
+  "cancel": "Abbrechen",
+  "allow": "Zulassen",
+  "allow-location-dialog": {
+    "title": "Zugriff auf Ihren Standort zulassen",
+    "description": "Ihr Twake benötigt dauerhaft Zugriff auf den Standort Ihres Telefons, um Ihre Wege zu speichern und Ihnen bei deren Auswertung zu helfen, auch wenn die App nicht verwendet wird.\n\nIhr Standort wird NIEMALS ohne Ihre Zustimmung an Dritte weitergegeben.\n\nSie können diese Funktion in den Einstellungen der App Coach CO2 deaktivieren."
+  },
+  "install-flagship-app-dialog": {
+    "title": "Scannen Sie den QR-Code",
+    "text": "oder öffnen Sie direkt den <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>oder den <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a>, um die App Twake Workplace zu installieren",
+    "a11n": "Zur Downloadseite der Anwendung Twake Workplace"
+  },
+  "authentification-dialog": {
+    "title": "Anmeldung",
+    "title-oidc": "Twake Pass",
+    "subtitle": "Bitte bestätigen Sie aus Sicherheitsgründen Ihre Identität",
+    "label": "Twake-Passwort",
+    "label-oidc": "Twake Pass-Passwort",
+    "abort": "Verlassen",
+    "unlock": "Entsperren",
+    "forgotten-password": "Ich habe mein Passwort vergessen",
+    "errors": {
+      "invalid_password": "Falsches Passwort. Bitte versuchen Sie es erneut.",
+      "server_error": "Auf dem Server ist ein Fehler aufgetreten. Bitte laden Sie die Seite neu."
+    }
+  },
+  "shortcut-dialog": {
+    "create-title": "Verknüpfung erstellen",
+    "edit-title": "Verknüpfung bearbeiten",
+    "filename": "Name der Verknüpfung",
+    "url": "URL",
+    "cancel": "Abbrechen",
+    "create": "Erstellen",
+    "edit": "Speichern",
+    "created": "Die Verknüpfung wurde erstellt",
+    "edited": "Die Verknüpfung wurde geändert",
+    "errored": "Ein Fehler ist aufgetreten",
+    "needs-info": "Eine Verknüpfung benötigt einen Namen und eine URL",
+    "url-bad-format": "Die eingegebene URL hat nicht das richtige Format"
+  }
+}

package/react/CozyDialogs/SpecificDialogs/locales/es.json

@@ -0,0 +1,41 @@
+{
+  "cancel": "Cancelar",
+  "allow": "Permitir",
+  "allow-location-dialog": {
+    "title": "Permitir el acceso a su ubicación",
+    "description": "Su Twake necesita tener siempre autorización para acceder a la ubicación de su teléfono a fin de memorizar sus desplazamientos y ayudarle a analizarlos, incluso cuando la app no esté en uso.\n\nNUNCA se compartirá con nadie sin su solicitud.\n\nPuede desactivar esta función desde los ajustes de la app Coach CO2."
+  },
+  "install-flagship-app-dialog": {
+    "title": "Escanee el código QR",
+    "text": "o vaya directamente a <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>o a <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> para instalar la app Twake Workplace",
+    "a11n": "Ir a la página de descarga de la aplicación Twake Workplace"
+  },
+  "authentification-dialog": {
+    "title": "Inicio de sesión",
+    "title-oidc": "Twake Pass",
+    "subtitle": "Por seguridad, confirme su identidad",
+    "label": "Contraseña de Twake",
+    "label-oidc": "Contraseña de Twake Pass",
+    "abort": "Salir",
+    "unlock": "Desbloquear",
+    "forgotten-password": "He olvidado mi contraseña",
+    "errors": {
+      "invalid_password": "Contraseña incorrecta. Inténtelo de nuevo.",
+      "server_error": "Se ha producido un error en el servidor. Vuelva a cargar la página."
+    }
+  },
+  "shortcut-dialog": {
+    "create-title": "Crear un acceso directo",
+    "edit-title": "Modificar un acceso directo",
+    "filename": "Nombre del acceso directo",
+    "url": "URL",
+    "cancel": "Cancelar",
+    "create": "Crear",
+    "edit": "Guardar",
+    "created": "Se ha creado el acceso directo",
+    "edited": "Se ha modificado el acceso directo",
+    "errored": "Se ha producido un error",
+    "needs-info": "Un acceso directo necesita un nombre y una URL",
+    "url-bad-format": "La URL introducida no tiene el formato correcto"
+  }
+}

package/react/CozyDialogs/SpecificDialogs/locales/it.json

@@ -0,0 +1,41 @@
+{
+  "cancel": "Annulla",
+  "allow": "Consenti",
+  "allow-location-dialog": {
+    "title": "Consenti l'accesso alla tua posizione",
+    "description": "Il tuo Twake deve essere sempre autorizzato ad accedere alla posizione del tuo telefono per memorizzare i tuoi spostamenti e aiutarti ad analizzarli, anche quando l'app non è in uso.\n\nNon verrà MAI condivisa con nessuno senza una tua richiesta.\n\nPuoi disattivare questa funzione dalle impostazioni dell'app Coach CO2."
+  },
+  "install-flagship-app-dialog": {
+    "title": "Scansiona il codice QR",
+    "text": "oppure vai direttamente su <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>o su <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> per installare l'app Twake Workplace",
+    "a11n": "Vai alla pagina di download dell'applicazione Twake Workplace"
+  },
+  "authentification-dialog": {
+    "title": "Accesso",
+    "title-oidc": "Twake Pass",
+    "subtitle": "Per sicurezza, conferma la tua identità",
+    "label": "Password di Twake",
+    "label-oidc": "Password di Twake Pass",
+    "abort": "Esci",
+    "unlock": "Sblocca",
+    "forgotten-password": "Ho dimenticato la password",
+    "errors": {
+      "invalid_password": "Password errata, riprova.",
+      "server_error": "Si è verificato un errore del server. Ricarica la pagina."
+    }
+  },
+  "shortcut-dialog": {
+    "create-title": "Crea un collegamento",
+    "edit-title": "Modifica un collegamento",
+    "filename": "Nome del collegamento",
+    "url": "URL",
+    "cancel": "Annulla",
+    "create": "Crea",
+    "edit": "Salva",
+    "created": "Il collegamento è stato creato",
+    "edited": "Il collegamento è stato modificato",
+    "errored": "Si è verificato un errore",
+    "needs-info": "Un collegamento richiede un nome e un URL",
+    "url-bad-format": "L'URL inserito non è nel formato corretto"
+  }
+}

package/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx

@@ -1,13 +1,19 @@
 import { withOnlyLocales } from 'twake-i18n'
 
+import de from './locales/de.json'
 import en from './locales/en.json'
+import es from './locales/es.json'
 import fr from './locales/fr.json'
+import it from './locales/it.json'
 import ru from './locales/ru.json'
 import vi from './locales/vi.json'
 
 export const locales = {
+  de,
   en,
+  es,
   fr,
+  it,
   ru,
   vi
 }

package/react/CozyDialogs/locales.js

@@ -11,6 +11,14 @@ export default {
     closeButton: 'Cerrar',
     backButton: 'Atrás'
   },
+  de: {
+    closeButton: 'Schließen',
+    backButton: 'Zurück'
+  },
+  it: {
+    closeButton: 'Chiudi',
+    backButton: 'Indietro'
+  },
   ru: {
     closeButton: 'Закрыть',
     backButton: 'Назад'

package/react/DatePicker/helpers.js

@@ -1,16 +1,25 @@
+const dayFirstDateFormats = {
+  fr: 'dd/LL/yyyy',
+  es: 'dd/LL/yyyy',
+  it: 'dd/LL/yyyy',
+  de: 'dd.LL.yyyy'
+}
+
 export const makeFormat = ({ ampm, mode, lang }) => {
+  const dayFirstDate = dayFirstDateFormats[lang]
+
   switch (mode) {
     case 'date':
-      return lang === 'fr' ? 'dd/LL/yyyy' : 'LL/dd/yyyy'
+      return dayFirstDate || 'LL/dd/yyyy'
     case 'time':
-      return lang === 'fr' ? 'HH:mm' : ampm ? 'HH:mm a' : 'HH:mm'
+      return dayFirstDate ? 'HH:mm' : ampm ? 'HH:mm a' : 'HH:mm'
     case 'dateTime':
-      return lang === 'fr'
-        ? 'dd/LL/yyyy HH:mm'
+      return dayFirstDate
+        ? `${dayFirstDate} HH:mm`
         : ampm
         ? 'LL/dd/yyyy HH:mm a'
         : 'LL/dd/yyyy HH:mm'
     default:
-      return lang === 'fr' ? 'dd/LL/yyyy' : ampm ? 'LL/dd/yyyy a' : 'LL/dd/yyyy'
+      return dayFirstDate || (ampm ? 'LL/dd/yyyy a' : 'LL/dd/yyyy')
   }
 }

package/react/DatePicker/helpers.spec.js

@@ -35,7 +35,29 @@ describe('makeFormat', () => {
     })
   })
 
-  describe('When lang is not "fr"', () => {
+  describe.each([
+    ['es', 'dd/LL/yyyy'],
+    ['it', 'dd/LL/yyyy'],
+    ['de', 'dd.LL.yyyy']
+  ])('When lang is "%s"', (lang, dateFormat) => {
+    it('should return a day-first format for default mode', () => {
+      expect(makeFormat({ lang })).toBe(dateFormat)
+      expect(makeFormat({ ampm: true, lang })).toBe(dateFormat)
+    })
+
+    it('should return a 24-hour format for time mode', () => {
+      expect(makeFormat({ mode: 'time', lang })).toBe('HH:mm')
+      expect(makeFormat({ mode: 'time', ampm: true, lang })).toBe('HH:mm')
+    })
+
+    it('should return a day-first format for dateTime mode', () => {
+      expect(makeFormat({ mode: 'dateTime', ampm: true, lang })).toBe(
+        `${dateFormat} HH:mm`
+      )
+    })
+  })
+
+  describe('When lang is "en"', () => {
     it('should return the right format for default mode', () => {
       const format = makeFormat({ lang: 'en', ampm: false })
       expect(format).toBe('LL/dd/yyyy')

package/react/DatePicker/index.jsx

@@ -11,8 +11,11 @@ import {
 import cx from 'classnames'
 import formatFNS from 'date-fns/format'
 import isBefore from 'date-fns/isBefore'
+import LocaleDE from 'date-fns/locale/de'
 import LocaleEN from 'date-fns/locale/en-US'
+import LocaleES from 'date-fns/locale/es'
 import LocaleFR from 'date-fns/locale/fr'
+import LocaleIT from 'date-fns/locale/it'
 import subDays from 'date-fns/subDays'
 import PropTypes from 'prop-types'
 import React, { forwardRef, useState } from 'react'
@@ -25,7 +28,10 @@ import { makeStyles } from '../styles'
 
 const localesFNS = {
   fr: LocaleFR,
-  en: LocaleEN
+  en: LocaleEN,
+  es: LocaleES,
+  de: LocaleDE,
+  it: LocaleIT
 }
 
 const useStyles = makeStyles(() => ({

package/react/DatePicker/locales/de.json

@@ -0,0 +1,8 @@
+{
+  "cancel": "Abbrechen",
+  "clear": "Löschen",
+  "invalidDate": "Ungültiges Datum",
+  "ok": "OK",
+  "today": "Heute",
+  "minDateLabelError": "Das Datum darf nicht vor dem Mindestdatum liegen (%{date})"
+}

package/react/DatePicker/locales/es.json

@@ -0,0 +1,8 @@
+{
+  "cancel": "Cancelar",
+  "clear": "Borrar",
+  "invalidDate": "Fecha no válida",
+  "ok": "Aceptar",
+  "today": "Hoy",
+  "minDateLabelError": "La fecha no debe ser anterior a la fecha mínima (%{date})"
+}

package/react/DatePicker/locales/it.json

@@ -0,0 +1,8 @@
+{
+  "cancel": "Annulla",
+  "clear": "Cancella",
+  "invalidDate": "Data non valida",
+  "ok": "OK",
+  "today": "Oggi",
+  "minDateLabelError": "La data non deve essere precedente alla data minima (%{date})"
+}

package/react/DatePicker/locales/withOwnLocales.jsx

@@ -1,13 +1,19 @@
 import { withOnlyLocales } from 'twake-i18n'
 
+import de from './de.json'
 import en from './en.json'
+import es from './es.json'
 import fr from './fr.json'
+import it from './it.json'
 import ru from './ru.json'
 import vi from './vi.json'
 
 export const locales = {
+  de,
   en,
+  es,
   fr,
+  it,
   ru,
   vi
 }

package/react/EditBadge/locales/de.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Aktualisieren",
+      "delete": "Löschen"
+    },
+    "upload": {
+      "file-size": "Die maximale Dateigröße beträgt 5 MB.",
+      "file-type": "Dieser Dateityp wird nicht unterstützt. Bitte versuchen Sie es erneut.",
+      "success": "Avatar erfolgreich aktualisiert",
+      "error": "Das Hochladen des Avatars ist fehlgeschlagen. Bitte versuchen Sie es erneut."
+    },
+    "delete": {
+      "success": "Avatar erfolgreich gelöscht",
+      "error": "Das Löschen des Avatars ist fehlgeschlagen. Bitte versuchen Sie es erneut."
+    }
+  }
+}

package/react/EditBadge/locales/es.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Actualizar",
+      "delete": "Eliminar"
+    },
+    "upload": {
+      "file-size": "El tamaño máximo del archivo es de 5 MB.",
+      "file-type": "Este tipo de archivo no es compatible. Inténtelo de nuevo.",
+      "success": "Avatar actualizado correctamente",
+      "error": "No se ha podido subir el avatar. Inténtelo de nuevo."
+    },
+    "delete": {
+      "success": "Avatar eliminado correctamente",
+      "error": "No se ha podido eliminar el avatar. Inténtelo de nuevo."
+    }
+  }
+}

package/react/EditBadge/locales/index.js

@@ -1,11 +1,17 @@
+import de from './de.json'
 import en from './en.json'
+import es from './es.json'
 import fr from './fr.json'
+import it from './it.json'
 import ru from './ru.json'
 import vi from './vi.json'
 
 export const locales = {
+  de,
   en,
+  es,
   fr,
+  it,
   ru,
   vi
 }

package/react/EditBadge/locales/it.json

@@ -0,0 +1,18 @@
+{
+  "EditBadge": {
+    "menu": {
+      "update": "Aggiorna",
+      "delete": "Elimina"
+    },
+    "upload": {
+      "file-size": "La dimensione massima del file è 5 MB.",
+      "file-type": "Il tipo di file non è supportato. Riprova.",
+      "success": "Avatar aggiornato correttamente",
+      "error": "Il caricamento dell'avatar non è riuscito. Riprova."
+    },
+    "delete": {
+      "success": "Avatar eliminato correttamente",
+      "error": "L'eliminazione dell'avatar non è riuscita. Riprova."
+    }
+  }
+}

package/react/MuiCozyTheme/overrides/makeLightOverrides.js

@@ -1047,7 +1047,9 @@ export const makeLightOverrides = theme => ({
     badge: {
       boxSizing: 'content-box',
       padding: 0,
-      borderRadius: '100%',
+      borderRadius: 100,
+      // Every two-digit count fits the circle, longer counts grow into a pill
+      fontVariantNumeric: 'tabular-nums',
       '&.badgeBorder': {
         border: `2px solid ${theme.palette.background.paper}`
       },

package/react/Nav/locales/de.json

@@ -0,0 +1,6 @@
+{
+  "navLimiter": {
+    "showMore": "Mehr anzeigen",
+    "showLess": "Weniger anzeigen"
+  }
+}