From 4ec36ef01e377e06b1797a75446fc421d79414bf Mon Sep 17 00:00:00 2001
From: Florian Laabs <florian.laabs@wirecore.net>
Date: Fri, 23 Oct 2026 19:39:47 +0200
Subject: [PATCH 1/5] fix(vue): type bindInput for Input and Textarea in SFC
 templates

Input and Textarea emit string | undefined (defineModel); bindInput declared string only, which vue-tsc reported for <Input v-bind="bindInput(field)" />. A type test in packages/vue/typecheck checks the bind helpers against the components.

Signed-off-by: Florian Laabs <florian.laabs@wirecore.net>
---
 .changeset/vue-bind-input-types.md      |  7 +++++++
 packages/vue/src/form/bind.ts           |  5 +++--
 packages/vue/tsconfig.json              |  2 +-
 packages/vue/typecheck/FormBindings.vue | 24 ++++++++++++++++++++++++
 4 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/vue-bind-input-types.md
 create mode 100644 packages/vue/typecheck/FormBindings.vue

diff --git a/.changeset/vue-bind-input-types.md b/.changeset/vue-bind-input-types.md
new file mode 100644
index 0000000..2d243b7
--- /dev/null
+++ b/.changeset/vue-bind-input-types.md
@@ -0,0 +1,7 @@
+---
+'@wirecore/wirelayer-vue': patch
+---
+
+`bindInput` from `/form` fits `Input` and `Textarea` in compiled SFC templates: `onUpdate:modelValue` accepts
+`string | undefined` (what the components emit) and `modelValue` falls back to `''`, like the React variant. Before,
+`<Input v-bind="bindInput(field)" />` was a vue-tsc error.
diff --git a/packages/vue/src/form/bind.ts b/packages/vue/src/form/bind.ts
index cf8a133..dc374fe 100644
--- a/packages/vue/src/form/bind.ts
+++ b/packages/vue/src/form/bind.ts
@@ -4,8 +4,9 @@ import type { CheckedState } from '../components/Checkbox/Checkbox.vue';
 /** v-bind for Input and Textarea: `<Input v-bind="bindInput(field)" />` */
 export const bindInput = (field: AnyFieldApi) => ({
     name: field.name,
-    modelValue: field.state.value as string,
-    'onUpdate:modelValue': (value: string) => field.handleChange(value),
+    modelValue: (field.state.value as string | undefined) ?? '',
+    // Input and Textarea emit string | undefined (defineModel) – the field keeps a string, like in React
+    'onUpdate:modelValue': (value: string | undefined) => field.handleChange(value ?? ''),
     onBlur: field.handleBlur,
 });
 
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 7bbf6cd..d1bd62a 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -5,5 +5,5 @@
         "types": ["node"],
         "noEmit": true
     },
-    "include": ["src", ".storybook", "vite.config.ts"]
+    "include": ["src", "typecheck", ".storybook", "vite.config.ts"]
 }
diff --git a/packages/vue/typecheck/FormBindings.vue b/packages/vue/typecheck/FormBindings.vue
new file mode 100644
index 0000000..fe14adf
--- /dev/null
+++ b/packages/vue/typecheck/FormBindings.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// Type test, checked by vue-tsc in `pnpm typecheck` (not part of the package): the bind helpers of /form fit the
+// components they are meant for in a compiled SFC template
+import { useForm } from '@tanstack/vue-form';
+import Checkbox from '../src/components/Checkbox/Checkbox.vue';
+import Input from '../src/components/Input/Input.vue';
+import Select from '../src/components/Select/Select.vue';
+import Switch from '../src/components/Switch/Switch.vue';
+import Textarea from '../src/components/Textarea/Textarea.vue';
+import { bindCheckbox, bindInput, bindValue } from '../src/form/bind.js';
+
+const form = useForm({ defaultValues: { name: '', note: '', terms: false, newsletter: false, service: 'web' } });
+const services = [{ value: 'web', label: 'Web' }];
+</script>
+
+<template>
+    <form.Field v-slot="{ field }" name="name"><Input v-bind="bindInput(field)" aria-label="Name" /></form.Field>
+    <form.Field v-slot="{ field }" name="note"><Textarea v-bind="bindInput(field)" aria-label="Note" /></form.Field>
+    <form.Field v-slot="{ field }" name="terms"><Checkbox v-bind="bindCheckbox(field)" label="Terms" /></form.Field>
+    <form.Field v-slot="{ field }" name="newsletter"><Switch v-bind="bindCheckbox(field)" label="News" /></form.Field>
+    <form.Field v-slot="{ field }" name="service">
+        <Select v-bind="bindValue(field)" :items="services" aria-label="Service" />
+    </form.Field>
+</template>

From bbb430cbfca18cdc1596029e5caed56a86f234fa Mon Sep 17 00:00:00 2001
From: Florian Laabs <florian.laabs@wirecore.net>
Date: Fri, 23 Oct 2026 19:39:47 +0200
Subject: [PATCH 2/5] feat: export the types of the props from the component
 packages

Variant, size, status and data types that appear in public props came only from @wirecore/wirelayer-recipes, a transitive dependency of apps.

Signed-off-by: Florian Laabs <florian.laabs@wirecore.net>
---
 .changeset/reexport-recipe-types.md    | 10 +++++
 packages/native/src/index.ts           | 39 ++++++++++++++++++
 packages/native/src/pdf/index.ts       |  3 ++
 packages/react/src/data-table/index.ts |  3 ++
 packages/react/src/index.ts            | 57 ++++++++++++++++++++++++++
 packages/react/src/virtual/index.ts    |  3 ++
 packages/vue/src/data-table/index.ts   |  3 ++
 packages/vue/src/index.ts              | 56 +++++++++++++++++++++++++
 packages/vue/src/virtual/index.ts      |  3 ++
 9 files changed, 177 insertions(+)
 create mode 100644 .changeset/reexport-recipe-types.md

diff --git a/.changeset/reexport-recipe-types.md b/.changeset/reexport-recipe-types.md
new file mode 100644
index 0000000..d7c8735
--- /dev/null
+++ b/.changeset/reexport-recipe-types.md
@@ -0,0 +1,10 @@
+---
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+'@wirecore/wirelayer-native': minor
+---
+
+The types that appear in the props are exported by the component packages themselves, so apps no longer need
+`@wirecore/wirelayer-recipes` (or `NonNullable<BadgeProps['variant']>`) for them – e.g. `BadgeVariant`,
+`ButtonVariant`, `ButtonSize`, `AlertStatus`, `DialogPosition`, `OverlaySize`, `StatusDotStatus`, `DataSource`,
+`RecipeClasses`. `/data-table` adds `PivotValue`, `/virtual` `ItemAccessor`, React Native's `/pdf` `PdfZoom`.
diff --git a/packages/native/src/index.ts b/packages/native/src/index.ts
index 8650f51..17749bc 100644
--- a/packages/native/src/index.ts
+++ b/packages/native/src/index.ts
@@ -347,3 +347,42 @@ export { RadialBar, type RadialBarItem, type RadialBarProps } from './components
 export { Sankey, type SankeyProps } from './components/Sankey/Sankey.js';
 export { Treemap, type TreemapItem, type TreemapProps } from './components/Treemap/Treemap.js';
 export type { FunnelStage, SankeyLinkInput, SankeyNodeInput, VisualTone } from '@wirecore/wirelayer-recipes/native';
+
+// Types of the recipes that appear in the props above – apps use them without depending on the recipes package
+export type {
+    AlertStatus,
+    AlertVariant,
+    AvatarColor,
+    AvatarShape,
+    AvatarSize,
+    AvatarVariant,
+    BadgeVariant,
+    ButtonColor,
+    ButtonShape,
+    ButtonVariant,
+    CarouselBreakpoint,
+    ChipSize,
+    DataQuery,
+    DataSource,
+    DateInput,
+    DateLike,
+    DialogStatus,
+    DurationValueType,
+    HighlightColor,
+    IconButtonVariant,
+    ItemAccessor,
+    ItemValueOf,
+    LayoutGap,
+    MaskTokens,
+    OverlaySize,
+    PhoneCountry,
+    PinInputType,
+    RadioGroupOrientation,
+    RecurrenceScope,
+    ResponsiveColumns,
+    Size,
+    StatusDotStatus,
+    ToastType,
+    UploadFunction,
+    UploadState,
+} from '@wirecore/wirelayer-recipes/native';
diff --git a/packages/native/src/pdf/index.ts b/packages/native/src/pdf/index.ts
index ef8e419..8356704 100644
--- a/packages/native/src/pdf/index.ts
+++ b/packages/native/src/pdf/index.ts
@@ -1,2 +1,5 @@
 // PdfViewer for React Native on react-native-pdf (optional peer dependency with react-native-blob-util)
 export { PdfViewer, type PdfSource, type PdfViewerProps } from './PdfViewer.js';
+
+// Type of the recipes in the props above
+export type { PdfZoom } from '@wirecore/wirelayer-recipes/native';
diff --git a/packages/react/src/data-table/index.ts b/packages/react/src/data-table/index.ts
index 779468f..9b24a52 100644
--- a/packages/react/src/data-table/index.ts
+++ b/packages/react/src/data-table/index.ts
@@ -46,3 +46,6 @@ export { moveItem } from '@wirecore/wirelayer-recipes';
 export { moveTreeRow } from '@wirecore/wirelayer-recipes';
 /** A data source controller for own lists (abort, cache, debounced search) and the DataTable adapters */
 export { createDataController, dataSourceToRows, rowsToDataSource } from '@wirecore/wirelayer-recipes';
+
+// Types of the recipes in the pivot props above
+export type { PivotValue } from '@wirecore/wirelayer-recipes';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 33912be..da0e019 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -470,3 +470,60 @@ export {
     type UploadState,
 } from '@wirecore/wirelayer-recipes';
 export * from './hooks/index.js';
+
+// Types of the recipes that appear in the props above – apps use them without depending on the recipes package
+export type {
+    AlertStatus,
+    AlertVariant,
+    AvatarColor,
+    AvatarShape,
+    AvatarSize,
+    AvatarVariant,
+    BadgeVariant,
+    BannerPosition,
+    BannerVariant,
+    ButtonColor,
+    ButtonShape,
+    ButtonSize,
+    ButtonVariant,
+    CalendarDayState,
+    CarouselBreakpoint,
+    ChipSize,
+    DataQuery,
+    DataSource,
+    DateInput,
+    DateLike,
+    DialogPosition,
+    DialogStatus,
+    DividerOrientation,
+    DrawerPlacement,
+    DurationValueType,
+    HighlightColor,
+    HotkeyRegistry,
+    IconButtonVariant,
+    ItemValueOf,
+    LayoutGap,
+    MaskTokens,
+    MegaMenuCollapse,
+    MeterColor,
+    OverlaySize,
+    PasswordRequirement,
+    RadioGroupOrientation,
+    RecipeClasses,
+    RecipeConfig,
+    RecurrenceScope,
+    ResponsiveColumns,
+    ResultStatus,
+    SankeyLinkInput,
+    SankeyNodeInput,
+    SchedulerDropReason,
+    SegmentedControlSize,
+    Size,
+    SkeletonShape,
+    SpeedDialDirection,
+    SpeedDialLayout,
+    StatusDotStatus,
+    StepStatus,
+    TreeCheckedStrategy,
+    VisualTone,
+} from '@wirecore/wirelayer-recipes';
diff --git a/packages/react/src/virtual/index.ts b/packages/react/src/virtual/index.ts
index f99816a..5437ead 100644
--- a/packages/react/src/virtual/index.ts
+++ b/packages/react/src/virtual/index.ts
@@ -2,3 +2,6 @@
 export { VirtualSelect, type VirtualSelectProps } from './VirtualSelect.js';
 export { VirtualList, type VirtualListHandle, type VirtualListProps } from './VirtualList.js';
 export { VirtualTree, type VirtualTreeProps } from './VirtualTree.js';
+
+// Type of the recipes in the props above (item accessors: a key or a function)
+export type { ItemAccessor } from '@wirecore/wirelayer-recipes';
diff --git a/packages/vue/src/data-table/index.ts b/packages/vue/src/data-table/index.ts
index 10374b1..3fa04ff 100644
--- a/packages/vue/src/data-table/index.ts
+++ b/packages/vue/src/data-table/index.ts
@@ -46,3 +46,6 @@ export { moveItem } from '@wirecore/wirelayer-recipes';
 export { moveTreeRow } from '@wirecore/wirelayer-recipes';
 /** A data source controller for own lists (abort, cache, debounced search) and the DataTable adapters */
 export { createDataController, dataSourceToRows, rowsToDataSource } from '@wirecore/wirelayer-recipes';
+
+// Types of the recipes in the pivot props above
+export type { PivotValue } from '@wirecore/wirelayer-recipes';
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index f589922..b4a6804 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -445,3 +445,59 @@ export {
     type UploadState,
 } from '@wirecore/wirelayer-recipes';
 export * from './composables/index.js';
+
+// Types of the recipes that appear in the props above – apps use them without depending on the recipes package
+export type {
+    AlertStatus,
+    AlertVariant,
+    AvatarColor,
+    AvatarShape,
+    AvatarSize,
+    AvatarVariant,
+    BadgeVariant,
+    BannerPosition,
+    BannerVariant,
+    ButtonColor,
+    ButtonShape,
+    ButtonSize,
+    ButtonVariant,
+    CarouselBreakpoint,
+    ChipSize,
+    DataQuery,
+    DataSource,
+    DateInput,
+    DateLike,
+    DialogPosition,
+    DialogStatus,
+    DividerOrientation,
+    DrawerPlacement,
+    DurationValueType,
+    HighlightColor,
+    HotkeyRegistry,
+    IconButtonVariant,
+    ItemValueOf,
+    LayoutGap,
+    MaskTokens,
+    MegaMenuCollapse,
+    MeterColor,
+    OverlaySize,
+    PasswordRequirement,
+    RadioGroupOrientation,
+    RecipeClasses,
+    RecipeConfig,
+    RecurrenceScope,
+    ResponsiveColumns,
+    ResultStatus,
+    SankeyLinkInput,
+    SankeyNodeInput,
+    SchedulerDropReason,
+    SegmentedControlSize,
+    Size,
+    SkeletonShape,
+    SpeedDialDirection,
+    SpeedDialLayout,
+    StatusDotStatus,
+    StepStatus,
+    TreeCheckedStrategy,
+    VisualTone,
+} from '@wirecore/wirelayer-recipes';
diff --git a/packages/vue/src/virtual/index.ts b/packages/vue/src/virtual/index.ts
index 6310325..8f15ed6 100644
--- a/packages/vue/src/virtual/index.ts
+++ b/packages/vue/src/virtual/index.ts
@@ -2,3 +2,6 @@
 export { default as VirtualSelect, type VirtualSelectProps } from './VirtualSelect.vue';
 export { default as VirtualList, type VirtualListProps } from './VirtualList.vue';
 export { default as VirtualTree, type VirtualTreeProps } from './VirtualTree.vue';
+
+// Type of the recipes in the props above (item accessors: a key or a function)
+export type { ItemAccessor } from '@wirecore/wirelayer-recipes';

From 1ccb5ce3f4d752fff4dfd6fcd0132418f4cbe899 Mon Sep 17 00:00:00 2001
From: Florian Laabs <florian.laabs@wirecore.net>
Date: Fri, 23 Oct 2026 19:39:47 +0200
Subject: [PATCH 3/5] feat(tokens): follow the system color scheme without
 data-mode

Without data-mode the dark colors, the dark variant and the dark overrides of the themes apply when the system is dark; data-mode=light|dark forces a mode. Charts recolor when the system setting changes.

Signed-off-by: Florian Laabs <florian.laabs@wirecore.net>
---
 .changeset/dark-mode-follows-system.md   | 16 +++++++++++++++
 apps/storybook/src/Themes.mdx            |  5 +++--
 packages/react/src/chart/Chart.tsx       |  4 ++++
 packages/react/src/chart/ChartCanvas.tsx |  4 ++++
 packages/react/src/chart/Sparkline.tsx   | 10 ++++++---
 packages/tokens/scripts/build-theme.ts   | 21 ++++++++++++++++++-
 packages/tokens/src/css.ts               |  8 ++++++++
 packages/tokens/src/tokens.ts            |  2 +-
 packages/tokens/test/theme.test.ts       | 26 ++++++++++++++++++++++++
 packages/vue/src/chart/Chart.vue         |  5 +++++
 packages/vue/src/chart/ChartCanvas.vue   |  5 +++++
 packages/vue/src/chart/Sparkline.vue     |  5 +++++
 12 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/dark-mode-follows-system.md

diff --git a/.changeset/dark-mode-follows-system.md b/.changeset/dark-mode-follows-system.md
new file mode 100644
index 0000000..249057d
--- /dev/null
+++ b/.changeset/dark-mode-follows-system.md
@@ -0,0 +1,16 @@
+---
+'@wirecore/wirelayer-tokens': minor
+'@wirecore/wirelayer-css': minor
+'@wirecore/wirelayer-vue': patch
+'@wirecore/wirelayer-react': patch
+---
+
+**Behavior change:** without `data-mode` the page now follows the system setting (`prefers-color-scheme`) instead
+of always being light. `data-mode="light"` or `data-mode="dark"` forces a mode as before, also for a part of the page
+(a forced light part stays light on a dark system).
+
+- The `dark:` variant follows the same rules, and so do the dark colors of the built-in themes and of custom themes
+  generated with `themeToCss`.
+- Charts (Chart, ChartCanvas, Sparkline) recolor when the system setting changes.
+- Apps that relied on "no attribute = light" and want to keep it: set `data-mode="light"` on `<html>`. Apps that set
+  `data-mode` from `prefers-color-scheme` with JavaScript can drop that.
diff --git a/apps/storybook/src/Themes.mdx b/apps/storybook/src/Themes.mdx
index 209fc84..5343a64 100644
--- a/apps/storybook/src/Themes.mdx
+++ b/apps/storybook/src/Themes.mdx
@@ -13,8 +13,9 @@ Light/dark is independent of it and combines with every theme.
 <html data-theme="ocean" data-mode="dark"></html>
 ```
 
-Both attributes also work on parts of the page. Without attributes, the theme
-“WireLayer” (`data-theme="wirecore"`) applies in light mode.
+Both attributes also work on parts of the page. Without `data-mode` the page follows the system setting (light or
+dark), `data-mode="light"` or `"dark"` forces a mode. Without `data-theme` the theme “WireLayer”
+(`data-theme="wirecore"`) applies. Custom themes from `themeToCss` follow the system setting the same way.
 
 <ThemeTable />
 
diff --git a/packages/react/src/chart/Chart.tsx b/packages/react/src/chart/Chart.tsx
index 708c7c2..58c645f 100644
--- a/packages/react/src/chart/Chart.tsx
+++ b/packages/react/src/chart/Chart.tsx
@@ -57,6 +57,8 @@ export function Chart<TType extends ChartType>({
     // (Re)create the chart when the type changes; recolour on theme/mode/motion changes
     useEffect(() => {
         const motion = matchMedia('(prefers-reduced-motion: reduce)');
+        // Without data-mode the page follows the system – recolour when it switches
+        const scheme = matchMedia('(prefers-color-scheme: dark)');
         const config = () => {
             const theme = readChartTheme(canvas.current!);
             return {
@@ -83,9 +85,11 @@ export function Chart<TType extends ChartType>({
         const observer = new MutationObserver(update);
         observer.observe(document.documentElement, { attributes: true });
         motion.addEventListener('change', update);
+        scheme.addEventListener('change', update);
         return () => {
             observer.disconnect();
             motion.removeEventListener('change', update);
+            scheme.removeEventListener('change', update);
             instance?.destroy();
         };
     }, [type, locale]);
diff --git a/packages/react/src/chart/ChartCanvas.tsx b/packages/react/src/chart/ChartCanvas.tsx
index 7359273..15a14aa 100644
--- a/packages/react/src/chart/ChartCanvas.tsx
+++ b/packages/react/src/chart/ChartCanvas.tsx
@@ -27,6 +27,8 @@ export function ChartCanvas({
 
     useEffect(() => {
         const motion = matchMedia('(prefers-reduced-motion: reduce)');
+        // Without data-mode the page follows the system – recolour when it switches
+        const scheme = matchMedia('(prefers-color-scheme: dark)');
         const config = () =>
             latest.current(readChartTheme(canvas.current!), motion.matches) as unknown as ChartConfiguration;
         let instance: ChartJs | undefined;
@@ -50,9 +52,11 @@ export function ChartCanvas({
         const observer = new MutationObserver(update);
         observer.observe(document.documentElement, { attributes: true });
         motion.addEventListener('change', update);
+        scheme.addEventListener('change', update);
         return () => {
             observer.disconnect();
             motion.removeEventListener('change', update);
+            scheme.removeEventListener('change', update);
             instance?.destroy();
         };
     }, []);
diff --git a/packages/react/src/chart/Sparkline.tsx b/packages/react/src/chart/Sparkline.tsx
index 02b4d2e..848d330 100644
--- a/packages/react/src/chart/Sparkline.tsx
+++ b/packages/react/src/chart/Sparkline.tsx
@@ -79,14 +79,18 @@ export function Sparkline({
             };
         };
         const instance = new ChartJs(context, { type: 'line', ...config() } as ChartConfiguration<'line'>);
-        // Theme and mode live on <html>
-        const observer = new MutationObserver(() => {
+        const recolor = () => {
             Object.assign(instance, config());
             instance.update();
-        });
+        };
+        // Theme and mode live on <html>; without data-mode the page follows the system
+        const observer = new MutationObserver(recolor);
         observer.observe(document.documentElement, { attributes: true });
+        const scheme = matchMedia('(prefers-color-scheme: dark)');
+        scheme.addEventListener('change', recolor);
         return () => {
             observer.disconnect();
+            scheme.removeEventListener('change', recolor);
             instance.destroy();
         };
     }, [key, fill, locale]);
diff --git a/packages/tokens/scripts/build-theme.ts b/packages/tokens/scripts/build-theme.ts
index eba4cde..686defa 100644
--- a/packages/tokens/scripts/build-theme.ts
+++ b/packages/tokens/scripts/build-theme.ts
@@ -20,8 +20,19 @@ const themeRules = themes
     .map(themeToCss)
     .join('\n\n');
 
+// Without data-mode on <html> the page follows the system setting; data-mode="light"|"dark" forces a mode, also for a
+// part of the page (a forced light part stays light on a dark system)
 const css = `/* Generated by @wirecore/wirelayer-tokens – do not edit */
-@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *));
+@custom-variant dark {
+    &:where([data-mode=dark], [data-mode=dark] *) {
+        @slot;
+    }
+    @media (prefers-color-scheme: dark) {
+        &:where(:root:not([data-mode]), :root:not([data-mode]) *):not(:where([data-mode=light], [data-mode=light] *)) {
+            @slot;
+        }
+    }
+}
 
 :root,
 [data-mode=light] {
@@ -29,6 +40,14 @@ const css = `/* Generated by @wirecore/wirelayer-tokens – do not edit */
 ${colorDeclarations(colors.light)}
 }
 
+@media (prefers-color-scheme: dark) {
+    /* Same specificity as [data-mode=dark], so the light overrides of a theme behave the same in both ways */
+    :root:where(:not([data-mode])) {
+        color-scheme: dark;
+${colorDeclarations(colors.dark).replace(/^/gm, '    ')}
+    }
+}
+
 [data-mode=dark] {
     color-scheme: dark;
 ${colorDeclarations(colors.dark)}
diff --git a/packages/tokens/src/css.ts b/packages/tokens/src/css.ts
index 8a1bc01..ed702c8 100644
--- a/packages/tokens/src/css.ts
+++ b/packages/tokens/src/css.ts
@@ -9,6 +9,7 @@ export const colorDeclarations = (set: Partial<ColorSet>) =>
 /**
  * CSS for a theme: its overrides apply with `data-theme="<name>"`, combined with `data-mode` on the same
  * element or nested in either direction. Dark rules are more specific, so they win over the light ones.
+ * Without `data-mode` on the root the system setting decides, like for the base colours.
  * Use it to generate CSS for a custom theme, e.g. in a build script.
  */
 export function themeToCss(theme: Theme): string {
@@ -22,5 +23,12 @@ ${t}[data-mode=dark],
 ${t} [data-mode=dark],
 [data-mode=dark] ${t} {
 ${colorDeclarations(theme.colors.dark)}
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-mode])${t},
+    :root:not([data-mode]) ${t}:not([data-mode], [data-mode=light] *) {
+${colorDeclarations(theme.colors.dark).replace(/^/gm, '    ')}
+    }
 }`;
 }
diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts
index e42869f..cc5931d 100644
--- a/packages/tokens/src/tokens.ts
+++ b/packages/tokens/src/tokens.ts
@@ -1,4 +1,4 @@
-/** Colour schemes, switched with `data-mode` (`:root` = light). */
+/** Colour schemes, switched with `data-mode` – without it the system setting (`prefers-color-scheme`) decides. */
 export const modes = ['light', 'dark'] as const;
 export type Mode = (typeof modes)[number];
 
diff --git a/packages/tokens/test/theme.test.ts b/packages/tokens/test/theme.test.ts
index b556487..a2aea89 100644
--- a/packages/tokens/test/theme.test.ts
+++ b/packages/tokens/test/theme.test.ts
@@ -1,5 +1,6 @@
 import { readFileSync } from 'node:fs';
 import { describe, expect, it } from 'vitest';
+import { themes, themeToCss } from '../src/index.js';
 
 const css = readFileSync(new URL('../dist/theme.css', import.meta.url), 'utf8');
 
@@ -30,3 +31,28 @@ describe('animation theme variables', () => {
         for (const { inline, rule } of dynamic) expect(inline, rule).toBe(true);
     });
 });
+
+describe('light and dark', () => {
+    // Without data-mode the page follows the system; data-mode="light"|"dark" forces a mode (checked in the browser
+    // as well – this keeps the generated rules from getting lost)
+    it('uses the dark colours for a page without data-mode when the system is dark', () => {
+        expect(css).toMatch(
+            /@media \(prefers-color-scheme: dark\) \{\s*\/\*[^*]*\*\/\s*:root:where\(:not\(\[data-mode\]\)\) \{\s*color-scheme: dark;/
+        );
+    });
+
+    it('also applies the dark variant to a page without data-mode, except in a forced light part', () => {
+        expect(css).toContain('&:where([data-mode=dark], [data-mode=dark] *)');
+        expect(css).toContain(
+            '&:where(:root:not([data-mode]), :root:not([data-mode]) *):not(:where([data-mode=light], [data-mode=light] *))'
+        );
+    });
+
+    it('gives every theme with dark colours the system case, too', () => {
+        for (const theme of themes.filter((theme) => Object.keys(theme.colors.dark).length)) {
+            const rules = themeToCss(theme);
+            expect(rules, theme.name).toContain(`:root:not([data-mode])[data-theme=${theme.name}]`);
+            expect(css, theme.name).toContain(rules);
+        }
+    });
+});
diff --git a/packages/vue/src/chart/Chart.vue b/packages/vue/src/chart/Chart.vue
index 3af42e4..c247000 100644
--- a/packages/vue/src/chart/Chart.vue
+++ b/packages/vue/src/chart/Chart.vue
@@ -60,6 +60,8 @@ const rows = computed(() => chartTable(props.data, format.value, translations.ch
 let instance: Chart<TType> | undefined;
 let observer: MutationObserver | undefined;
 let motion: MediaQueryList | undefined;
+// Without data-mode the page follows the system – recolour when it switches
+let scheme: MediaQueryList | undefined;
 
 function config() {
     const theme = readChartTheme(canvas.value!);
@@ -99,10 +101,13 @@ onMounted(() => {
     observer = new MutationObserver(update);
     observer.observe(document.documentElement, { attributes: true });
     motion.addEventListener('change', update);
+    scheme = matchMedia('(prefers-color-scheme: dark)');
+    scheme.addEventListener('change', update);
 });
 onBeforeUnmount(() => {
     observer?.disconnect();
     motion?.removeEventListener('change', update);
+    scheme?.removeEventListener('change', update);
     instance?.destroy();
 });
 watch(() => props.type, create);
diff --git a/packages/vue/src/chart/ChartCanvas.vue b/packages/vue/src/chart/ChartCanvas.vue
index ab3f58a..b17bdc0 100644
--- a/packages/vue/src/chart/ChartCanvas.vue
+++ b/packages/vue/src/chart/ChartCanvas.vue
@@ -23,6 +23,8 @@ const canvas = useTemplateRef<HTMLCanvasElement>('canvas');
 let instance: Chart | undefined;
 let observer: MutationObserver | undefined;
 let motion: MediaQueryList | undefined;
+// Without data-mode the page follows the system – recolour when it switches
+let scheme: MediaQueryList | undefined;
 
 const config = () => props.build(readChartTheme(canvas.value!), !!motion?.matches) as unknown as ChartConfiguration;
 function create() {
@@ -46,10 +48,13 @@ onMounted(() => {
     observer = new MutationObserver(update);
     observer.observe(document.documentElement, { attributes: true });
     motion.addEventListener('change', update);
+    scheme = matchMedia('(prefers-color-scheme: dark)');
+    scheme.addEventListener('change', update);
 });
 onBeforeUnmount(() => {
     observer?.disconnect();
     motion?.removeEventListener('change', update);
+    scheme?.removeEventListener('change', update);
     instance?.destroy();
 });
 watch(() => props.build, update);
diff --git a/packages/vue/src/chart/Sparkline.vue b/packages/vue/src/chart/Sparkline.vue
index abd30ed..5693657 100644
--- a/packages/vue/src/chart/Sparkline.vue
+++ b/packages/vue/src/chart/Sparkline.vue
@@ -42,6 +42,8 @@ const format = computed(
 const summary = computed(() => sparklineSummary(props.label, props.data, format.value, translations.chart));
 let instance: Chart<'line'> | undefined;
 let observer: MutationObserver | undefined;
+// Without data-mode the page follows the system – recolour when it switches
+let scheme: MediaQueryList | undefined;
 
 function config() {
     const theme = readChartTheme(canvas.value!);
@@ -87,9 +89,12 @@ onMounted(() => {
     if (context) instance = new Chart(context, { type: 'line', ...config() } as never);
     observer = new MutationObserver(update);
     observer.observe(document.documentElement, { attributes: true });
+    scheme = matchMedia('(prefers-color-scheme: dark)');
+    scheme.addEventListener('change', update);
 });
 onBeforeUnmount(() => {
     observer?.disconnect();
+    scheme?.removeEventListener('change', update);
     instance?.destroy();
 });
 watch(() => [...props.data], update);

From 54609a3b863fbd4f894baf2615e964498d6c147e Mon Sep 17 00:00:00 2001
From: Florian Laabs <florian.laabs@wirecore.net>
Date: Fri, 23 Oct 2026 19:39:47 +0200
Subject: [PATCH 4/5] feat: German as a language module and a CSV separator per
 locale

German moves to locales/de like the other languages; only English is built in. The DataTable gets csvSeparator, by default from the locale. The docs no longer claim German as the default.

Signed-off-by: Florian Laabs <florian.laabs@wirecore.net>
---
 .changeset/datatable-csv-separator.md         |   11 +
 .changeset/docs-english-default.md            |   10 +
 .changeset/german-language-module.md          |   21 +
 README.md                                     |    8 +-
 apps/next/app/shell.tsx                       |    5 +
 apps/nuxt/app/plugins/locale.ts               |    8 +
 apps/storybook/shared/locale.ts               |    2 +-
 apps/storybook/src/Accessibility.mdx          |    2 +-
 apps/storybook/src/Introduction.mdx           |   20 +-
 docs/architecture.md                          |    4 +-
 docs/roadmap.md                               |   10 +-
 packages/mcp/data/components.json             |   24 +-
 packages/mcp/scripts/collect.ts               |    4 +-
 packages/native/.storybook/preview.tsx        |    3 +-
 .../EmojiPicker/EmojiPicker.stories.tsx       |    2 +-
 .../components/EmojiPicker/EmojiPicker.tsx    |    4 +-
 packages/native/src/data-table/DataTable.tsx  |   10 +-
 packages/native/src/data-table/types.ts       |    2 +-
 packages/native/src/locale.tsx                |    2 +-
 packages/native/src/locales/de.ts             |    2 +
 packages/parity/e2e/data-tools.spec.ts        |    8 +-
 packages/parity/src/apps-logic.test.ts        |    6 +-
 packages/parity/src/data-table.test.ts        |   39 +-
 packages/parity/src/locale.test.ts            |   10 +-
 packages/parity/src/number.test.ts            |   10 +-
 packages/parity/src/patterns-logic.test.ts    |    5 +-
 packages/parity/src/scheduler-logic.test.ts   |    7 +-
 packages/parity/src/setup.ts                  |    5 +
 packages/parity/src/widgets-logic.test.ts     |   31 +-
 packages/react/.storybook/preview.tsx         |    3 +-
 .../EmojiPicker/EmojiPicker.stories.tsx       |    2 +-
 .../components/EmojiPicker/EmojiPicker.tsx    |   11 +-
 .../LocaleProvider/LocaleProvider.tsx         |    2 +-
 packages/react/src/data-table/DataTable.tsx   |   11 +-
 packages/react/src/data-table/types.ts        |    2 +-
 packages/react/src/locales/de.ts              |    2 +
 packages/recipes/src/blocks.ts                |    2 +-
 packages/recipes/src/emoji.ts                 |  577 +-----
 packages/recipes/src/i18n.ts                  | 1321 +-----------
 packages/recipes/src/index.ts                 |    1 +
 packages/recipes/src/locales/de.ts            | 1815 +++++++++++++++++
 packages/recipes/src/native/index.ts          |    1 +
 packages/recipes/src/table-view.ts            |    2 +-
 packages/vue/.storybook/preview.ts            |    3 +-
 .../EmojiPicker/EmojiPicker.stories.ts        |    2 +-
 .../components/EmojiPicker/EmojiPicker.vue    |    9 +-
 packages/vue/src/data-table/DataTable.vue     |    8 +-
 packages/vue/src/data-table/types.ts          |    2 +-
 packages/vue/src/locale.ts                    |    2 +-
 packages/vue/src/locales/de.ts                |    2 +
 50 files changed, 2099 insertions(+), 1956 deletions(-)
 create mode 100644 .changeset/datatable-csv-separator.md
 create mode 100644 .changeset/docs-english-default.md
 create mode 100644 .changeset/german-language-module.md
 create mode 100644 apps/nuxt/app/plugins/locale.ts
 create mode 100644 packages/native/src/locales/de.ts
 create mode 100644 packages/react/src/locales/de.ts
 create mode 100644 packages/recipes/src/locales/de.ts
 create mode 100644 packages/vue/src/locales/de.ts

diff --git a/.changeset/datatable-csv-separator.md b/.changeset/datatable-csv-separator.md
new file mode 100644
index 0000000..8211290
--- /dev/null
+++ b/.changeset/datatable-csv-separator.md
@@ -0,0 +1,11 @@
+---
+'@wirecore/wirelayer-recipes': minor
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+'@wirecore/wirelayer-native': minor
+---
+
+DataTable: new prop `csvSeparator` for the CSV export, also for the built-in export button. By default the separator
+now follows the locale like a spreadsheet does (`csvSeparator(locale)` from the recipes): `;` where numbers have a
+decimal comma (de-DE, fr-FR …), `,` otherwise (en-US …). Before, it was always `;`. `exportCsv({ separator })` still
+wins over both.
diff --git a/.changeset/docs-english-default.md b/.changeset/docs-english-default.md
new file mode 100644
index 0000000..736de27
--- /dev/null
+++ b/.changeset/docs-english-default.md
@@ -0,0 +1,10 @@
+---
+'@wirecore/wirelayer-mcp': patch
+'@wirecore/wirelayer-vue': patch
+'@wirecore/wirelayer-react': patch
+'@wirecore/wirelayer-native': patch
+'@wirecore/wirelayer-recipes': patch
+---
+
+Documentation says English is the default language, as it is in the code: `useLocale` and the MCP server/`llms.txt`
+no longer claim German without a `LocaleProvider`.
diff --git a/.changeset/german-language-module.md b/.changeset/german-language-module.md
new file mode 100644
index 0000000..d6263d0
--- /dev/null
+++ b/.changeset/german-language-module.md
@@ -0,0 +1,21 @@
+---
+'@wirecore/wirelayer-recipes': minor
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+'@wirecore/wirelayer-native': minor
+---
+
+**Breaking:** German is a language module like French or Spanish and no longer part of the default bundle (about half
+of the built-in texts). Only English is built in. Apps that use German register it once at startup, before the first
+render:
+
+```ts
+import { registerLocale } from '@wirecore/wirelayer-vue'; // or -react, -native
+import { de } from '@wirecore/wirelayer-vue/locales/de';
+
+registerLocale('de', de);
+```
+
+`messages` only contains `en` now; the German texts are `de` from `…/locales/de`. The German names and search words of
+the EmojiPicker moved there as well (`emojiPicker.emojis`); the built-in emojis are English. `localeEmojis(texts)` no
+longer takes a locale – pass the lines of the language module (`localeEmojis(de.emojiPicker.emojis)`).
diff --git a/README.md b/README.md
index 6438113..ba2d20d 100644
--- a/README.md
+++ b/README.md
@@ -87,22 +87,24 @@ needs the respective peer dependency:
 
 ## Languages
 
-English (default) and German are built in. More languages are available as separate modules and only end up in the
-bundle when an app imports them: `fr`, `es`, `it`, `pt` (Portugal), `pt-BR`, `nl`, `pl`, `cs`, `hu`, `lv`, `ar` and
+English (default) is built in. More languages are available as separate modules and only end up in the bundle when an
+app imports them: `de`, `fr`, `es`, `it`, `pt` (Portugal), `pt-BR`, `nl`, `pl`, `cs`, `hu`, `lv`, `ar` and
 `tr` – each under `@wirecore/wirelayer-vue/locales/<code>`, `@wirecore/wirelayer-react/locales/<code>`,
 `@wirecore/wirelayer-native/locales/<code>` (or `@wirecore/wirelayer-recipes/locales/<code>`).
 
 ```ts
 import { registerLocale } from '@wirecore/wirelayer-vue'; // or @wirecore/wirelayer-react, @wirecore/wirelayer-native
+import { de } from '@wirecore/wirelayer-vue/locales/de';
 import { fr } from '@wirecore/wirelayer-vue/locales/fr';
 import { ptBR } from '@wirecore/wirelayer-vue/locales/pt-BR';
 
 // Once at startup, before the first render
+registerLocale('de', de); // applies to de-DE, de-AT, de-CH …
 registerLocale('fr', fr); // applies to fr-FR, fr-CA, fr-CH …
 registerLocale('pt-BR', ptBR); // a region takes precedence over its language
 ```
 
-After that, `<LocaleProvider locale="fr-CA">` is enough (`<LocaleProvider locale="de-DE">` for the built-in German).
+After that, `<LocaleProvider locale="de-DE">` or `<LocaleProvider locale="fr-CA">` is enough.
 Alternatively, `LocaleProvider` receives the texts directly (`translations={fr}`). Unregistered languages fall back to
 English; the writing direction (`ar`, `he`, `fa`, `ur` → right to left) follows from the locale. Custom languages are a
 complete `Translations` object – the TypeScript type reports missing texts. The bundled translations should be reviewed
diff --git a/apps/next/app/shell.tsx b/apps/next/app/shell.tsx
index 432cbf5..72cd814 100644
--- a/apps/next/app/shell.tsx
+++ b/apps/next/app/shell.tsx
@@ -5,17 +5,22 @@ import {
     AppShell,
     ConfirmDialog,
     LocaleProvider,
+    registerLocale,
     SegmentedControl,
     SegmentedControlItem,
     SidebarNav,
     Toaster,
 } from '@wirecore/wirelayer-react';
+import { de } from '@wirecore/wirelayer-react/locales/de';
 import { Gauge, Send } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { createContext, useContext, useState, type ReactNode } from 'react';
 import { isDemoLocale, texts, type DemoLocale } from './texts';
 
+// German is a separate language module – registered once, before the first render (server and browser)
+registerLocale('de', de);
+
 const TextsContext = createContext(texts['en-US']);
 
 /** Texts of the page in the chosen language */
diff --git a/apps/nuxt/app/plugins/locale.ts b/apps/nuxt/app/plugins/locale.ts
new file mode 100644
index 0000000..e26ef00
--- /dev/null
+++ b/apps/nuxt/app/plugins/locale.ts
@@ -0,0 +1,8 @@
+import { registerLocale } from '@wirecore/wirelayer-vue';
+import { de } from '@wirecore/wirelayer-vue/locales/de';
+import { defineNuxtPlugin } from '#imports';
+
+// German is a separate language module – registered once, before the first render (server and browser)
+export default defineNuxtPlugin(() => {
+    registerLocale('de', de);
+});
diff --git a/apps/storybook/shared/locale.ts b/apps/storybook/shared/locale.ts
index e088cc4..304e7b4 100644
--- a/apps/storybook/shared/locale.ts
+++ b/apps/storybook/shared/locale.ts
@@ -10,8 +10,8 @@ export const localeGlobalTypes = {
             icon: 'globe',
             items: [
                 { value: 'en-US', title: 'English' },
-                { value: 'de-DE', title: 'Deutsch' },
                 // Not built in – each preview registers them (registerLocale) from its package's locales/<code>
+                { value: 'de-DE', title: 'Deutsch' },
                 { value: 'fr-FR', title: 'Français' },
                 { value: 'es-ES', title: 'Español' },
                 { value: 'it-IT', title: 'Italiano' },
diff --git a/apps/storybook/src/Accessibility.mdx b/apps/storybook/src/Accessibility.mdx
index 6958d0c..5f87310 100644
--- a/apps/storybook/src/Accessibility.mdx
+++ b/apps/storybook/src/Accessibility.mdx
@@ -44,7 +44,7 @@ and all of it is checked on every test run.
 - Render clickable cards with `asChild` as `<a>` or `<button>`, never as a clickable `<div>`.
 - Add router links (RouterLink, Next.js Link) to the breadcrumb through `BreadcrumbItem` with `asChild`.
 - If a `StatusDot` changes live, give the element `role="status"` so that the change is announced.
-- Default texts (`Loading`, `Close`) come from the `LocaleProvider` (English without a provider, German with `locale="de-DE"`); single texts can be overridden through props like `label` / `dismissLabel`.
+- Default texts (`Loading`, `Close`) come from the `LocaleProvider` (English without a provider, e.g. German with `locale="de-DE"` after `registerLocale('de', de)`); single texts can be overridden through props like `label` / `dismissLabel`.
 - Set `lang` and `dir` on the `<html>` element – screen readers choose the pronunciation from it, browsers the writing direction.
 - Set the focus sensibly after an `Alert` is closed.
 
diff --git a/apps/storybook/src/Introduction.mdx b/apps/storybook/src/Introduction.mdx
index f3603b9..5427d03 100644
--- a/apps/storybook/src/Introduction.mdx
+++ b/apps/storybook/src/Introduction.mdx
@@ -111,8 +111,10 @@ Light/dark is switched by the `data-mode` attribute, the color theme by the `dat
 <html data-mode="dark" data-theme="ocean"></html>
 ```
 
-Without attributes, the light theme “WireLayer” (`data-theme="wirecore"`) applies. With Tailwind you can style
-specifically with `dark:`. More under _Foundations › Themes_.
+Without `data-mode` the page follows the system setting (`prefers-color-scheme`) – light or dark, without any
+JavaScript. `data-mode="light"` or `data-mode="dark"` forces a mode, also for a part of the page. Without `data-theme`
+the theme “WireLayer” (`data-theme="wirecore"`) applies. With Tailwind you can style specifically with `dark:` – it
+follows the same rules. More under _Foundations › Themes_.
 
 ## Customizing: defaults and classes per part
 
@@ -216,11 +218,11 @@ up to date.
 ## Language and writing direction
 
 By default the components speak English (`en-US`). `LocaleProvider` switches texts, number and date formats and the
-writing direction for everything below it – English and German are built in; other languages fall back to English,
-are registered (see below) or get their texts through `translations`:
+writing direction for everything below it – English is built in; other languages are registered once (see below),
+get their texts through `translations` or fall back to English:
 
 ```vue
-<LocaleProvider locale="de-DE">
+<LocaleProvider locale="de-DE"><!-- after registerLocale('de', de) -->
     <App />
 </LocaleProvider>
 ```
@@ -236,20 +238,22 @@ import { messages } from '@wirecore/wirelayer-recipes';
 The app sets `lang` and `dir` on the `<html>` element itself. For languages like Arabic or Hebrew (`dir="rtl"`),
 spacing, borders, directional icons and the arrow keys are mirrored. Your own components read the texts with
 `useTranslations()` and the locale and direction with `useLocale()`. In Storybook the **Language** toolbar item
-switches between all built-in and registered languages (Arabic also shows the right-to-left layout).
+switches between English and the registered languages (Arabic also shows the right-to-left layout).
 
 ### Registering languages
 
-French, Spanish, Italian, Portuguese (Portugal and Brazil), Dutch, Polish, Czech, Hungarian, Latvian, Arabic and
-Turkish ship as separate modules – they cost nothing as long as an app does not import them. Registered once at
+German, French, Spanish, Italian, Portuguese (Portugal and Brazil), Dutch, Polish, Czech, Hungarian, Latvian, Arabic
+and Turkish ship as separate modules – they cost nothing as long as an app does not import them. Registered once at
 startup, they apply to every region of the language (`fr` also for `fr-CA`):
 
 ```ts
 import { registerLocale } from '@wirecore/wirelayer-vue'; // likewise @wirecore/wirelayer-react and @wirecore/wirelayer-native
 import { ar } from '@wirecore/wirelayer-vue/locales/ar';
+import { de } from '@wirecore/wirelayer-vue/locales/de';
 import { fr } from '@wirecore/wirelayer-vue/locales/fr';
 import { ptBR } from '@wirecore/wirelayer-vue/locales/pt-BR';
 
+registerLocale('de', de); // de-DE, de-AT, de-CH …
 registerLocale('fr', fr);
 registerLocale('ar', ar); // ar-EG, ar-MA … – right to left
 registerLocale('pt-BR', ptBR); // a region takes precedence over its language (pt)
diff --git a/docs/architecture.md b/docs/architecture.md
index 249d170..1f7a041 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -32,7 +32,7 @@
 | Docs and tests        | Storybook                                                                                                                                                                                                                                                                                                                                                  |
 | Dev environment       | Docker Compose (Node 26, LTS from the end of October 2026 · pnpm 12)                                                                                                                                                                                                                                                                                       |
 | Styling rule          | Tailwind classes only in `@wirecore/wirelayer-recipes` – components contain no classes of their own                                                                                                                                                                                                                                                        |
-| Themes                | Color presets as in PrimeVue: `data-theme` (WireLayer = `wirecore`, Ocean, Violet, Teal) × `data-mode` (light/dark); `primary` drives primary buttons and selected states; custom themes with `defineTheme`/`themeToCss`/`checkTheme`                                                                                                                      |
+| Themes                | Color presets as in PrimeVue: `data-theme` (WireLayer = `wirecore`, Ocean, Violet, Teal) × `data-mode` (light/dark, without it the system setting); `primary` drives primary buttons and selected states; custom themes with `defineTheme`/`themeToCss`/`checkTheme`                                                                                       |
 | Animations            | Opening/closing of overlays (Dialog, Menu, Select, Tooltip, Toast), only with `motion-safe`                                                                                                                                                                                                                                                                |
 | Parity                | `packages/parity` renders every component in Vue **and** React, compares the DOM and tests the behavior in both                                                                                                                                                                                                                                            |
 | React Native          | `@wirecore/wirelayer-native` with Uniwind (Tailwind v4); RN recipes under `@wirecore/wirelayer-recipes/native`; Expo SDK 58                                                                                                                                                                                                                                |
@@ -42,7 +42,7 @@
 | AI tooling            | `@wirecore/wirelayer-mcp` and `llms.txt` live in this repository and are published with the packages. The MCP server is called `wirelayer`, the command `wirelayer-mcp` (alias `wirecore-mcp`)                                                                                                                                                             |
 | Code languages        | `/code` loads only `shiki/core` and a fixed list of grammars with an MIT/TextMate license (`codeLanguages`); C++ is missing (it embeds the unlicensed GLSL grammar). More languages via `languages` – their license is then up to the user; without them, C++ or Ruby for example appear uncolored                                                         |
 | Markdown              | Own small renderer (`markdownElements`) returns element descriptions that Vue/React render as VNodes/elements – never `v-html`/`dangerouslySetInnerHTML`; only http(s)/mailto/tel/relative links, images become links                                                                                                                                      |
-| UI languages          | English (default) and German built in; fr, es, it, pt, pt-BR, nl, pl, cs, hu, lv, ar, tr as separate modules (`…/locales/<code>`), via `registerLocale` or `translations` – not in the default bundle. The texts are machine-translated; review by native speakers is open                                                                                 |
+| UI languages          | English (default) built in; de, fr, es, it, pt, pt-BR, nl, pl, cs, hu, lv, ar, tr as separate modules (`…/locales/<code>`), via `registerLocale` or `translations` – not in the default bundle. The texts are machine-translated; review by native speakers is open                                                                                        |
 | PDF                   | `/pdf`: own viewer on `pdfjs-dist` (Apache-2.0, legacy build, optional peer dependency); EmbedPDF was rejected (no text layer for screen readers, WASM from a CDN); React Native on react-native-pdf (development build)                                                                                                                                   |
 | Numbers in texts      | `LocaleProvider` passes the texts through `localizeTexts`: digits of the locale (Arabic-Indic in `ar-EG`), grouping from 10,000; Latin tokens (Q1, F6), date parts and texts passed in stay as they are                                                                                                                                                    |
 | Server data           | Two ways with the same names: manual (`loadMore`, `filterChange`, `loading`, `hasMore` …) or `dataSource`; older names that differ remain as deprecated aliases (overview under [Server data and loading more](#server-data-and-loading-more))                                                                                                             |
diff --git a/docs/roadmap.md b/docs/roadmap.md
index edb7f31..7517f3f 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -6,9 +6,9 @@ Not released yet (as of October 2026).
 
 - **Vue and React:** around 180 components (235 exports including parts such as `TabsList`) with an identical API and
   identical DOM, plus DataTable (feature set on par with PrimeVue and beyond), forms, charts, editor, CodeHighlight,
-  PdfViewer, Scheduler and Gantt, visualizations, around 40 hooks/composables, `LocaleProvider` (English and German
-  built in, eleven more languages plus pt-BR to register, RTL) and `RecipesProvider` for customization; subpaths `/form`,
-  `/data-table`, `/virtual`, `/chart`, `/editor`, `/code`, `/pdf`, `/locales/<code>`
+  PdfViewer, Scheduler and Gantt, visualizations, around 40 hooks/composables, `LocaleProvider` (English built in,
+  German and eleven more languages plus pt-BR to register, RTL) and `RecipesProvider` for customization; subpaths
+  `/form`, `/data-table`, `/virtual`, `/chart`, `/editor`, `/code`, `/pdf`, `/locales/<code>`
 - **React Native:** around 145 components (174 exports) – forms and inputs with the prop names of the web (lists of
   arbitrary values, groups, search and loading more in bottom sheets, date/time, color, file and code inputs), TanStack
   Form via `@wirecore/wirelayer-native/form`; display (Statistic, Timeline, rings, Gauge, Carousel, Gallery with pinch
@@ -106,8 +106,8 @@ Not released yet (as of October 2026).
       packages
 - [ ] Markdown: deliberately without images (they become links), HTML, reference links (`[a][1]`), Setext headings and
       indented code blocks
-- [ ] EmojiPicker: no skin tones; names and search terms in English and German, the language modules have none of their
-      own yet (`emojiPicker.emojis` is empty – English)
+- [ ] EmojiPicker: no skin tones; names and search terms in English (built in) and German (`locales/de`) – the other
+      language modules have none of their own yet (`emojiPicker.emojis` is empty – English)
 - [ ] PhoneInput checks the length per country, not a complete numbering plan (that would need libphonenumber-js as an
       optional subpath); with +1 the selected country (US/CA) stays
 - [ ] LogViewer renders lines with a fixed height (no wrapping, horizontal scrolling); `rowHeight` must match custom
diff --git a/packages/mcp/data/components.json b/packages/mcp/data/components.json
index 2f02743..89946f2 100644
--- a/packages/mcp/data/components.json
+++ b/packages/mcp/data/components.json
@@ -4782,6 +4782,12 @@
                     "optional": true,
                     "description": "Shows an export button; the CSV has the filtered and sorted rows of all pages (or the selection)"
                 },
+                {
+                    "name": "csvSeparator",
+                    "type": "string",
+                    "optional": true,
+                    "description": "Separator of the CSV export, also of the export button – default: from the locale (\";\" where numbers have a decimal comma, e.g. de-DE, as a spreadsheet there expects it; \",\" otherwise)"
+                },
                 {
                     "name": "exportFormats",
                     "type": "('csv' | 'xlsx')[]",
@@ -6483,7 +6489,7 @@
         {
             "name": "EmojiPicker",
             "subpath": "",
-            "description": "Emoji picker: search (German words), categories, a grid (arrow keys, Home/End, Ctrl+Home/End; Enter or Space chooses); the name of the focused emoji is shown below. Recently used emojis come first.",
+            "description": "Emoji picker: search (English words and those of a language module), categories, a grid (arrow keys, Home/End, Ctrl+Home/End; Enter or Space chooses); the name of the focused emoji is shown below. Recently used emojis come first.",
             "category": "Forms",
             "story": "forms-emojipicker--playground",
             "extends": "Omit<ComponentProps<'div'>, 'onSelect' | 'children'>",
@@ -18832,7 +18838,7 @@
         {
             "name": "useLocale",
             "subpath": "",
-            "description": "Locale, writing direction and texts of the nearest LocaleProvider – German without one"
+            "description": "Locale, writing direction and texts of the nearest LocaleProvider – English (en-US) without one"
         },
         {
             "name": "useLocalStorage",
@@ -18934,7 +18940,7 @@
         {
             "id": "accessibility-what-stays-with-the-project",
             "title": "What stays with the project",
-            "text": "- Every input needs a name: `Field` with `label` – or `aria-label` on the `Input`.\n- Render clickable cards with `asChild` as `<a>` or `<button>`, never as a clickable `<div>`.\n- Add router links (RouterLink, Next.js Link) to the breadcrumb through `BreadcrumbItem` with `asChild`.\n- If a `StatusDot` changes live, give the element `role=\"status\"` so that the change is announced.\n- Default texts (`Loading`, `Close`) come from the `LocaleProvider` (English without a provider, German with `locale=\"de-DE\"`); single texts can be overridden through props like `label` / `dismissLabel`.\n- Set `lang` and `dir` on the `<html>` element – screen readers choose the pronunciation from it, browsers the writing direction.\n- Set the focus sensibly after an `Alert` is closed."
+            "text": "- Every input needs a name: `Field` with `label` – or `aria-label` on the `Input`.\n- Render clickable cards with `asChild` as `<a>` or `<button>`, never as a clickable `<div>`.\n- Add router links (RouterLink, Next.js Link) to the breadcrumb through `BreadcrumbItem` with `asChild`.\n- If a `StatusDot` changes live, give the element `role=\"status\"` so that the change is announced.\n- Default texts (`Loading`, `Close`) come from the `LocaleProvider` (English without a provider, e.g. German with `locale=\"de-DE\"` after `registerLocale('de', de)`); single texts can be overridden through props like `label` / `dismissLabel`.\n- Set `lang` and `dir` on the `<html>` element – screen readers choose the pronunciation from it, browsers the writing direction.\n- Set the focus sensibly after an `Alert` is closed."
         },
         {
             "id": "accessibility-automated-checks",
@@ -18969,7 +18975,7 @@
         {
             "id": "introduction-light-dark-and-themes",
             "title": "Light, dark and themes",
-            "text": "Light/dark is switched by the `data-mode` attribute, the color theme by the `data-theme` attribute – e.g. on the\n`<html>` element:\n\n```html\n<html data-mode=\"dark\" data-theme=\"ocean\"></html>\n```\n\nWithout attributes, the light theme “WireLayer” (`data-theme=\"wirecore\"`) applies. With Tailwind you can style\nspecifically with `dark:`. More under _Foundations › Themes_."
+            "text": "Light/dark is switched by the `data-mode` attribute, the color theme by the `data-theme` attribute – e.g. on the\n`<html>` element:\n\n```html\n<html data-mode=\"dark\" data-theme=\"ocean\"></html>\n```\n\nWithout `data-mode` the page follows the system setting (`prefers-color-scheme`) – light or dark, without any\nJavaScript. `data-mode=\"light\"` or `data-mode=\"dark\"` forces a mode, also for a part of the page. Without `data-theme`\nthe theme “WireLayer” (`data-theme=\"wirecore\"`) applies. With Tailwind you can style specifically with `dark:` – it\nfollows the same rules. More under _Foundations › Themes_."
         },
         {
             "id": "introduction-customizing-defaults-and-classes-per-part",
@@ -18994,7 +19000,7 @@
         {
             "id": "introduction-language-and-writing-direction",
             "title": "Language and writing direction",
-            "text": "By default the components speak English (`en-US`). `LocaleProvider` switches texts, number and date formats and the\nwriting direction for everything below it – English and German are built in; other languages fall back to English,\nare registered (see below) or get their texts through `translations`:\n\n```vue\n<LocaleProvider locale=\"de-DE\">\n    <App />\n</LocaleProvider>\n```\n\n```tsx\nimport { messages } from '@wirecore/wirelayer-recipes';\n\n<LocaleProvider locale=\"fr-FR\" translations={{ ...messages.en, common: { ...messages.en.common, close: 'Fermer' } }}>\n    <App />\n</LocaleProvider>;\n```\n\nThe app sets `lang` and `dir` on the `<html>` element itself. For languages like Arabic or Hebrew (`dir=\"rtl\"`),\nspacing, borders, directional icons and the arrow keys are mirrored. Your own components read the texts with\n`useTranslations()` and the locale and direction with `useLocale()`. In Storybook the **Language** toolbar item\nswitches between all built-in and registered languages (Arabic also shows the right-to-left layout).\n\n### Registering languages\n\nFrench, Spanish, Italian, Portuguese (Portugal and Brazil), Dutch, Polish, Czech, Hungarian, Latvian, Arabic and\nTurkish ship as separate modules – they cost nothing as long as an app does not import them. Registered once at\nstartup, they apply to every region of the language (`fr` also for `fr-CA`):\n\n```ts\nimport { registerLocale } from '@wirecore/wirelayer-vue'; // likewise @wirecore/wirelayer-react and @wirecore/wirelayer-native\nimport { ar } from '@wirecore/wirelayer-vue/locales/ar';\nimport { fr } from '@wirecore/wirelayer-vue/locales/fr';\nimport { ptBR } from '@wirecore/wirelayer-vue/locales/pt-BR';\n\nregisterLocale('fr', fr);\nregisterLocale('ar', ar); // ar-EG, ar-MA … – right to left\nregisterLocale('pt-BR', ptBR); // a region takes precedence over its language (pt)\n```\n\nInstead of registering, a module can also be passed directly: `<LocaleProvider locale=\"fr-FR\" :translations=\"fr\">`.\nPlurals follow the rules of the language (`Intl.PluralRules`, e.g. the six forms of Arabic), numbers in the texts\nfollow the locale (`ar-EG` writes Arabic-Indic digits, `de-DE` only groups from 10.000 on). The texts should be proofread by\nnative speakers before use."
+            "text": "By default the components speak English (`en-US`). `LocaleProvider` switches texts, number and date formats and the\nwriting direction for everything below it – English is built in; other languages are registered once (see below),\nget their texts through `translations` or fall back to English:\n\n```vue\n<LocaleProvider locale=\"de-DE\"><!-- after registerLocale('de', de) -->\n    <App />\n</LocaleProvider>\n```\n\n```tsx\nimport { messages } from '@wirecore/wirelayer-recipes';\n\n<LocaleProvider locale=\"fr-FR\" translations={{ ...messages.en, common: { ...messages.en.common, close: 'Fermer' } }}>\n    <App />\n</LocaleProvider>;\n```\n\nThe app sets `lang` and `dir` on the `<html>` element itself. For languages like Arabic or Hebrew (`dir=\"rtl\"`),\nspacing, borders, directional icons and the arrow keys are mirrored. Your own components read the texts with\n`useTranslations()` and the locale and direction with `useLocale()`. In Storybook the **Language** toolbar item\nswitches between English and the registered languages (Arabic also shows the right-to-left layout).\n\n### Registering languages\n\nGerman, French, Spanish, Italian, Portuguese (Portugal and Brazil), Dutch, Polish, Czech, Hungarian, Latvian, Arabic\nand Turkish ship as separate modules – they cost nothing as long as an app does not import them. Registered once at\nstartup, they apply to every region of the language (`fr` also for `fr-CA`):\n\n```ts\nimport { registerLocale } from '@wirecore/wirelayer-vue'; // likewise @wirecore/wirelayer-react and @wirecore/wirelayer-native\nimport { ar } from '@wirecore/wirelayer-vue/locales/ar';\nimport { de } from '@wirecore/wirelayer-vue/locales/de';\nimport { fr } from '@wirecore/wirelayer-vue/locales/fr';\nimport { ptBR } from '@wirecore/wirelayer-vue/locales/pt-BR';\n\nregisterLocale('de', de); // de-DE, de-AT, de-CH …\nregisterLocale('fr', fr);\nregisterLocale('ar', ar); // ar-EG, ar-MA … – right to left\nregisterLocale('pt-BR', ptBR); // a region takes precedence over its language (pt)\n```\n\nInstead of registering, a module can also be passed directly: `<LocaleProvider locale=\"fr-FR\" :translations=\"fr\">`.\nPlurals follow the rules of the language (`Intl.PluralRules`, e.g. the six forms of Arabic), numbers in the texts\nfollow the locale (`ar-EG` writes Arabic-Indic digits, `de-DE` only groups from 10.000 on). The texts should be proofread by\nnative speakers before use."
         },
         {
             "id": "introduction-server-data-and-loading-more",
@@ -22597,6 +22603,12 @@
                         "optional": true,
                         "description": "Name of the exported file without extension (default \"export\")"
                     },
+                    {
+                        "name": "csvSeparator",
+                        "type": "string",
+                        "optional": true,
+                        "description": "Separator of the CSV export, also of the export button – default: from the locale (\";\" where numbers have a decimal comma, e.g. de-DE, as a spreadsheet there expects it; \",\" otherwise)"
+                    },
                     {
                         "name": "exportFormats",
                         "type": "('csv' | 'xlsx')[]",
@@ -32748,7 +32760,7 @@
             {
                 "name": "useLocale",
                 "subpath": "",
-                "description": "Locale and texts of the nearest LocaleProvider – German without one"
+                "description": "Locale and texts of the nearest LocaleProvider – English (en-US) without one"
             },
             {
                 "name": "useReducedMotion",
diff --git a/packages/mcp/scripts/collect.ts b/packages/mcp/scripts/collect.ts
index 82ca702..0d8f358 100644
--- a/packages/mcp/scripts/collect.ts
+++ b/packages/mcp/scripts/collect.ts
@@ -449,14 +449,14 @@ const nativeIntro =
     'React Native (Expo) components with Uniwind: same prop names and values as the React components where they fit on a phone – pickers open as bottom sheets, touch targets are at least 44 pt, no hover, gestures always with accessibility actions. Forms with TanStack Form via `@wirecore/wirelayer-native/form`; DataTable (no TanStack; table or cards per row) via `@wirecore/wirelayer-native/data-table`; charts drawn with react-native-svg (no Chart.js) via `@wirecore/wirelayer-native/chart`; PdfViewer on react-native-pdf (development build, not Expo Go) via `@wirecore/wirelayer-native/pdf`; CodeHighlight with Shiki via `@wirecore/wirelayer-native/code`; file pickers via `@wirecore/wirelayer-native/expo-document-picker` and `@wirecore/wirelayer-native/expo-image-picker`, `useClipboard` via `@wirecore/wirelayer-native/expo-clipboard`, `shareFile`/`shareUri` (DataTable export, PDFs) via `@wirecore/wirelayer-native/expo-sharing` (optional peer dependencies). Overlays: Dialog, Drawer (from every edge), Menu and ContextMenu as sheets, Popover next to its trigger; `toast()`, `confirm()`, `prompt()` and `openDialog()` need `<Toaster />`, `<ConfirmDialog />` and `<DialogHost />` once at the root.';
 
 const intro =
-    'WireLayer: a component library for Vue 3 (@wirecore/wirelayer-vue), React (@wirecore/wirelayer-react), React Native (@wirecore/wirelayer-native) and plain HTML (@wirecore/wirelayer-css). Vue and React share the same API and DOM; Tailwind CSS v4 recipes in @wirecore/wirelayer-recipes; WCAG 2.2 AA; German UI texts by default, English via LocaleProvider.';
+    'WireLayer: a component library for Vue 3 (@wirecore/wirelayer-vue), React (@wirecore/wirelayer-react), React Native (@wirecore/wirelayer-native) and plain HTML (@wirecore/wirelayer-css). Vue and React share the same API and DOM; Tailwind CSS v4 recipes in @wirecore/wirelayer-recipes; WCAG 2.2 AA; English UI texts by default, German and other languages via LocaleProvider.';
 const conventions = [
     '## Conventions',
     '',
     '- React props in camelCase; Vue takes the same props in kebab-case. Controlled values: React `value` + `onValueChange`, Vue `v-model`; other `onXChange` pairs are `v-model:x` in Vue, other callbacks `@x` events.',
     '- `className` (React) is `class` (Vue). Every component takes `classes` (extra Tailwind classes per part) and reads defaults from `RecipesProvider`.',
     '- Content: React props of type ReactNode/render functions are named slots in Vue (e.g. DataTable `cell` → `#cell-<id>`, `expansion` → `#expansion`).',
-    '- Texts come from `LocaleProvider` (de-DE default, en-US built in; fr, es, it, pt, pt-BR, nl, pl, cs, hu, lv, ar, tr via `registerLocale(\'fr\', fr)` with `fr` from `@wirecore/wirelayer-vue/locales/fr` or `@wirecore/wirelayer-react/locales/fr`); dates are ISO strings ("2026-10-20", "2026-10-20T10:00").',
+    '- Texts come from `LocaleProvider` (en-US built in; de, fr, es, it, pt, pt-BR, nl, pl, cs, hu, lv, ar, tr via `registerLocale(\'fr\', fr)` with `fr` from `@wirecore/wirelayer-vue/locales/fr` or `@wirecore/wirelayer-react/locales/fr`); dates are ISO strings ("2026-10-20", "2026-10-20T10:00").',
 ].join('\n');
 
 export function llmsIndex(data: Collected, storybook = '') {
diff --git a/packages/native/.storybook/preview.tsx b/packages/native/.storybook/preview.tsx
index e87d941..1db5473 100644
--- a/packages/native/.storybook/preview.tsx
+++ b/packages/native/.storybook/preview.tsx
@@ -12,6 +12,7 @@ import { registerLocale } from '@wirecore/wirelayer-recipes/native';
 import { LocaleProvider } from '../src/locale.js';
 import { ar } from '../src/locales/ar.js';
 import { cs } from '../src/locales/cs.js';
+import { de } from '../src/locales/de.js';
 import { es } from '../src/locales/es.js';
 import { fr } from '../src/locales/fr.js';
 import { hu } from '../src/locales/hu.js';
@@ -27,7 +28,7 @@ import './global.css';
 import './preview.css';
 
 // The toolbar languages that are not built in – an app registers the ones it needs the same way
-const locales = { fr, es, it, pt, 'pt-BR': ptBR, nl, pl, cs, hu, lv, tr, ar };
+const locales = { de, fr, es, it, pt, 'pt-BR': ptBR, nl, pl, cs, hu, lv, tr, ar };
 for (const [code, texts] of Object.entries(locales)) registerLocale(code, texts);
 
 // In an Expo app useFonts() loads them; here the browser does
diff --git a/packages/native/src/components/EmojiPicker/EmojiPicker.stories.tsx b/packages/native/src/components/EmojiPicker/EmojiPicker.stories.tsx
index 842567f..89e3fe7 100644
--- a/packages/native/src/components/EmojiPicker/EmojiPicker.stories.tsx
+++ b/packages/native/src/components/EmojiPicker/EmojiPicker.stories.tsx
@@ -29,7 +29,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Inline: search (English words, German too in a German locale), categories as tabs, recent emojis first */
+/** Inline: search (English words, with a language module like German also its words), categories as tabs, recent emojis first */
 export const Playground: Story = {};
 
 function SheetDemo() {
diff --git a/packages/native/src/components/EmojiPicker/EmojiPicker.tsx b/packages/native/src/components/EmojiPicker/EmojiPicker.tsx
index 1caa412..7ecfce6 100644
--- a/packages/native/src/components/EmojiPicker/EmojiPicker.tsx
+++ b/packages/native/src/components/EmojiPicker/EmojiPicker.tsx
@@ -73,12 +73,12 @@ export function EmojiPicker({
     className,
     ...props
 }: EmojiPickerProps) {
-    const { locale, translations } = useLocale();
+    const { translations } = useLocale();
     const t = translations.emojiPicker;
     const inSheet = open !== undefined || onOpenChange !== undefined;
     const styles = emojiPicker({ inSheet });
     const { announce, region } = useAnnouncer();
-    const all = useMemo(() => emojis ?? localeEmojis(locale, t.emojis), [emojis, locale, t]);
+    const all = useMemo(() => emojis ?? localeEmojis(t.emojis), [emojis, t]);
     const [stored, setStored] = useControllable(recentEmojis, NO_RECENT, onRecentChange);
     const recentEntries = useMemo(
         () =>
diff --git a/packages/native/src/data-table/DataTable.tsx b/packages/native/src/data-table/DataTable.tsx
index 7e0c808..3c71150 100644
--- a/packages/native/src/data-table/DataTable.tsx
+++ b/packages/native/src/data-table/DataTable.tsx
@@ -3,6 +3,7 @@ import {
     cellValue,
     createDataController,
     createXlsx,
+    csvSeparator,
     dataAnnouncement,
     dataTable,
     filterTableRows,
@@ -153,6 +154,9 @@ export interface DataTableProps<TData> {
     onRowClick?: (click: DataTableRowClick<TData>) => void;
     /** Name of the exported file without extension (default "export") */
     exportFilename?: string;
+    /** Separator of the CSV export, also of the export button – default: from the locale (";" where numbers have a
+     * decimal comma, e.g. de-DE, as a spreadsheet there expects it; "," otherwise) */
+    csvSeparator?: string;
     /** Formats of the export: CSV (default), Excel (.xlsx) or both */
     exportFormats?: ('csv' | 'xlsx')[];
     /**
@@ -242,6 +246,7 @@ export function DataTable<TData extends object>({
     onRowAction,
     onRowClick,
     exportFilename,
+    csvSeparator: csvSeparatorProp,
     exportFormats,
     onExport,
     hasMore,
@@ -446,7 +451,10 @@ export function DataTable<TData extends object>({
         });
     };
     const generateCsv = (options: DataTableCsvOptions = {}) =>
-        tableCsv(exportRows(options.selectionOnly), columns, { separator: options.separator, bom: options.bom });
+        tableCsv(exportRows(options.selectionOnly), columns, {
+            separator: options.separator ?? csvSeparatorProp ?? csvSeparator(locale),
+            bom: options.bom,
+        });
     const generateXlsx = (options: DataTableXlsxOptions = {}) =>
         createXlsx(
             tableXlsxSheet(exportRows(options.selectionOnly), columns, {
diff --git a/packages/native/src/data-table/types.ts b/packages/native/src/data-table/types.ts
index fd8c67e..d4eb254 100644
--- a/packages/native/src/data-table/types.ts
+++ b/packages/native/src/data-table/types.ts
@@ -80,7 +80,7 @@ export interface DataTableColumn<TData> {
 export interface DataTableCsvOptions {
     /** Only the selected rows (default: the filtered and sorted rows of all pages) */
     selectionOnly?: boolean;
-    /** Separator, default ";" (opens in a German Excel) */
+    /** Separator – default: `csvSeparator` of the table, else from the locale (";" with a decimal comma, "," otherwise) */
     separator?: string;
     /** Byte order mark at the start, so Excel reads UTF-8 – default true */
     bom?: boolean;
diff --git a/packages/native/src/locale.tsx b/packages/native/src/locale.tsx
index 8fd3455..1d10a0f 100644
--- a/packages/native/src/locale.tsx
+++ b/packages/native/src/locale.tsx
@@ -23,7 +23,7 @@ export function LocaleProvider({ locale = defaultLocale, translations, children
     return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>;
 }
 
-/** Locale and texts of the nearest LocaleProvider – German without one */
+/** Locale and texts of the nearest LocaleProvider – English (en-US) without one */
 export function useLocale(): ResolvedLocale {
     return useContext(LocaleContext);
 }
diff --git a/packages/native/src/locales/de.ts b/packages/native/src/locales/de.ts
new file mode 100644
index 0000000..c127a38
--- /dev/null
+++ b/packages/native/src/locales/de.ts
@@ -0,0 +1,2 @@
+// German texts: registerLocale('de', de) at app start, or pass them to LocaleProvider (translations)
+export { de, de as default } from '@wirecore/wirelayer-recipes/locales/de';
diff --git a/packages/parity/e2e/data-tools.spec.ts b/packages/parity/e2e/data-tools.spec.ts
index 56d53ce..77f4ba7 100644
--- a/packages/parity/e2e/data-tools.spec.ts
+++ b/packages/parity/e2e/data-tools.spec.ts
@@ -39,10 +39,10 @@ test.describe('DataTable tools', () => {
         expect(download.suggestedFilename()).toBe('server.csv');
         const csv = await readFile((await download.path())!, 'utf8');
         expect(csv.split('\r\n')).toEqual([
-            'Name;Location;Operating system;Owner;Load',
-            'k8s-node-3;Nuremberg;Talos 1.12;Platform;18',
-            'backup-02;Nuremberg;Debian 12;Platform;96',
-            'cache-01;Nuremberg;Alpine 3.22;Team Web;55',
+            'Name,Location,Operating system,Owner,Load',
+            'k8s-node-3,Nuremberg,Talos 1.12,Platform,18',
+            'backup-02,Nuremberg,Debian 12,Platform,96',
+            'cache-01,Nuremberg,Alpine 3.22,Team Web,55',
         ]);
     });
 
diff --git a/packages/parity/src/apps-logic.test.ts b/packages/parity/src/apps-logic.test.ts
index 1f98ab9..d6f677e 100644
--- a/packages/parity/src/apps-logic.test.ts
+++ b/packages/parity/src/apps-logic.test.ts
@@ -16,7 +16,6 @@ import {
     languageFromFileName,
     markdownElements,
     markdownToText,
-    messages,
     parseInline,
     parseMarkdown,
     pieLegend,
@@ -39,6 +38,7 @@ import {
     type MarkdownElement,
 } from '@wirecore/wirelayer-recipes';
 import { describe, expect, it, vi } from 'vitest';
+import { de as german } from '@wirecore/wirelayer-recipes/locales/de';
 
 // Logic of the app patterns, chat, Markdown, charts, editor and code blocks (framework-neutral, @wirecore/wirelayer-recipes)
 
@@ -257,7 +257,7 @@ describe('Kanban, session timeout, auth', () => {
         expect(validateAuth('reset', { ...empty, email: 'a@b.de' }, { validators: { email: ownDomain } })).toEqual({
             email: 'Company addresses only',
         });
-        expect(validateAuth('signIn', empty, { texts: messages.de.validation }).email).toBe('Pflichtfeld');
+        expect(validateAuth('signIn', empty, { texts: german.validation }).email).toBe('Pflichtfeld');
     });
 });
 
@@ -378,7 +378,7 @@ describe('ready-made charts', () => {
             ],
             theme,
             format,
-            messages.de.chart
+            german.chart
         );
         expect(config.data.datasets[0]!.backgroundColor).toEqual([theme.palette[2], theme.palette[4]]);
         const label = (config.options.plugins.tooltip.callbacks.label as (context: { dataIndex: number }) => string)({
diff --git a/packages/parity/src/data-table.test.ts b/packages/parity/src/data-table.test.ts
index c9c7ef8..1e4b34f 100644
--- a/packages/parity/src/data-table.test.ts
+++ b/packages/parity/src/data-table.test.ts
@@ -48,6 +48,7 @@ import {
 } from '@wirecore/wirelayer-recipes';
 import { describe, expect, it, vi } from 'vitest';
 import { el, frameworks, render, toReact, type El } from './harness.js';
+import { de as german } from '@wirecore/wirelayer-recipes/locales/de';
 
 // The extended DataTable (PrimeVue feature set): sorting by several columns, filter menus, column menu, details,
 // row order, selection modes, editing, totals and the saved state – in Vue and React alike
@@ -592,13 +593,11 @@ describe('Data source controller', () => {
         expect(controller.current).toMatchObject({ status: 'error', items: [1] });
         expect(states).toContain('loading');
         expect(queryKey({ page: 1, search: undefined })).toBe(queryKey({ page: 1 }));
-        expect(dataAnnouncement(controller.current, messages.de, 'de-DE')).toBe(
-            'Die Daten konnten nicht geladen werden.'
-        );
-        expect(dataAnnouncement({ status: 'success', items: [1], totalCount: 1 }, messages.de, 'de-DE')).toBe(
+        expect(dataAnnouncement(controller.current, german, 'de-DE')).toBe('Die Daten konnten nicht geladen werden.');
+        expect(dataAnnouncement({ status: 'success', items: [1], totalCount: 1 }, german, 'de-DE')).toBe(
             '1 Eintrag geladen'
         );
-        expect(dataAnnouncement({ status: 'success', items: [], totalCount: 1234 }, messages.de, 'de-DE')).toBe(
+        expect(dataAnnouncement({ status: 'success', items: [], totalCount: 1234 }, german, 'de-DE')).toBe(
             '1.234 Einträge geladen'
         );
         expect(dataAnnouncement({ status: 'success', items: [], totalCount: 1 }, messages.en, 'en-US')).toBe(
@@ -1137,15 +1136,33 @@ describe.each(frameworks)('%s DataTable', (framework) => {
                 ],
             })
         );
+        // en-US: "," – a spreadsheet there expects it
         expect(handle!.generateCsv({ bom: false }).split('\r\n')).toEqual([
-            'Hostname;Load',
-            'web-01;0.42',
-            'db-primary;0.71',
-            'k8s-node-3;0.18',
+            'Hostname,Load',
+            'web-01,0.42',
+            'db-primary,0.71',
+            'k8s-node-3,0.18',
         ]);
-        expect(handle!.generateCsv({ selectionOnly: true, separator: ',' })).toBe(
-            '\uFEFFHostname,Load\r\ndb-primary,0.71'
+        expect(handle!.generateCsv({ selectionOnly: true, separator: ';' })).toBe(
+            '\uFEFFHostname;Load\r\ndb-primary;0.71'
+        );
+    });
+
+    it('csvSeparator sets the separator of the export, the option of a single export still wins', async () => {
+        let handle: { generateCsv: (options?: object) => string } | undefined;
+        await render(
+            framework,
+            table({
+                ref: (value: typeof handle | null) => (handle = value ?? handle),
+                csvSeparator: '\t',
+                columns: [
+                    { id: 'name', header: 'Name' },
+                    { id: 'location', header: 'Location' },
+                ],
+            })
         );
+        expect(handle!.generateCsv({ bom: false }).split('\r\n')[0]).toBe('Name\tLocation');
+        expect(handle!.generateCsv({ bom: false, separator: '|' }).split('\r\n')[0]).toBe('Name|Location');
     });
 
     it('edits with a select of values, an own editor and a check that answers later', async () => {
diff --git a/packages/parity/src/locale.test.ts b/packages/parity/src/locale.test.ts
index d47cfce..4088e4a 100644
--- a/packages/parity/src/locale.test.ts
+++ b/packages/parity/src/locale.test.ts
@@ -31,6 +31,7 @@ import { createElement } from 'react';
 import { beforeAll, describe, expect, expectTypeOf, it } from 'vitest';
 import { h, nextTick, ref, type Component } from 'vue';
 import { el, frameworks, normalize, render, renderSettled } from './harness.js';
+import { de as german } from '@wirecore/wirelayer-recipes/locales/de';
 
 const items = [
     { value: 'web', label: 'Software & Web' },
@@ -139,6 +140,7 @@ describe('switching the language at runtime', () => {
 
 // The languages that are not built in, by the locale tag whose plural rules they follow
 const locales: Record<string, [code: string, texts: Translations]> = {
+    'de-DE': ['de', german],
     'fr-FR': ['fr', fr],
     'es-ES': ['es', es],
     'it-IT': ['it', italian],
@@ -156,7 +158,7 @@ const languages = Object.entries(locales).map(([tag, [code, texts]]) => [tag, co
 
 describe('language modules', () => {
     it('are not built in: unregistered languages fall back to English', () => {
-        expect(Object.keys(messages)).toEqual(['de', 'en']);
+        expect(Object.keys(messages)).toEqual(['en']);
         expect(resolveLocale('fr-CA').translations).toBe(messages.en);
         expect(resolveLocale('ar-EG').translations).toBe(messages.en);
     });
@@ -193,7 +195,7 @@ describe('language modules', () => {
             : [];
 
     it.each(languages)('%s has exactly the keys of German', (_tag, _code, texts) => {
-        expect(shape(texts)).toEqual(shape(messages.de));
+        expect(shape(texts)).toEqual(shape(german));
     });
 
     it.each(languages)('%s has a plural form for every category of whole numbers', (tag, _code, texts) => {
@@ -295,7 +297,7 @@ describe('registered languages', () => {
         expect(resolveLocale('pt-BR').translations).toBe(ptBR);
         expect(resolveLocale('pt-PT').translations).toBe(pt);
         expect(resolveLocale('pt-AO').translations).toBe(pt);
-        expect(resolveLocale('de-AT').translations).toBe(messages.de);
+        expect(resolveLocale('de-AT').translations).toBe(german);
         expect(resolveLocale('sv-SE').translations).toBe(messages.en);
         // Texts passed to LocaleProvider win
         expect(resolveLocale('fr-FR', messages.en).translations).toBe(messages.en);
@@ -374,7 +376,7 @@ describe('numbers in texts', () => {
         expect(localizeTexts(ar, 'ar-MA').dataTable.rowCount(25)).toMatch(/25/);
         // Names stay as they are
         expect(texts.chip.remove('web-01')).toContain('web-01');
-        expect(localizeTexts(messages.de, 'de-DE').dataTable.rowCount(12345)).toBe('12.345 Zeilen');
+        expect(localizeTexts(german, 'de-DE').dataTable.rowCount(12345)).toBe('12.345 Zeilen');
     });
 
     it.each(frameworks)('%s LocaleProvider passes the localized texts on', async (framework) => {
diff --git a/packages/parity/src/number.test.ts b/packages/parity/src/number.test.ts
index 66bdb9c..2acac9d 100644
--- a/packages/parity/src/number.test.ts
+++ b/packages/parity/src/number.test.ts
@@ -1,4 +1,4 @@
-import { numberInputKey, numberSeparators, parseLocaleNumber } from '@wirecore/wirelayer-recipes';
+import { csvSeparator, numberInputKey, numberSeparators, parseLocaleNumber } from '@wirecore/wirelayer-recipes';
 import { describe, expect, it } from 'vitest';
 
 describe('number input helpers', () => {
@@ -7,6 +7,14 @@ describe('number input helpers', () => {
         expect(numberSeparators('en-US')).toEqual({ decimal: '.', group: ',' });
     });
 
+    it('picks the CSV separator a spreadsheet in the locale opens', () => {
+        // A decimal comma would split the numbers – those locales use ";"
+        expect(csvSeparator('de-DE')).toBe(';');
+        expect(csvSeparator('fr-FR')).toBe(';');
+        expect(csvSeparator('en-US')).toBe(',');
+        expect(csvSeparator('en-GB')).toBe(',');
+    });
+
     it('reads comma and dot as decimal separator in every locale', () => {
         for (const locale of ['de-DE', 'en-US']) {
             expect(parseLocaleNumber('1234,5', locale)).toBe(1234.5);
diff --git a/packages/parity/src/patterns-logic.test.ts b/packages/parity/src/patterns-logic.test.ts
index 64445ce..9ced45e 100644
--- a/packages/parity/src/patterns-logic.test.ts
+++ b/packages/parity/src/patterns-logic.test.ts
@@ -53,6 +53,7 @@ import {
     type ConditionGroup,
 } from '@wirecore/wirelayer-recipes';
 import { describe, expect, it, vi } from 'vitest';
+import { de as german } from '@wirecore/wirelayer-recipes/locales/de';
 
 const key = (key: string, mods: Partial<Record<'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey', boolean>> = {}) => ({
     key,
@@ -115,7 +116,7 @@ describe('hotkeys', () => {
     });
 
     it('formats per platform and language', () => {
-        const de = messages.de.hotkeys.keys;
+        const de = german.hotkeys.keys;
         expect(formatHotkey('mod+shift+k', de)).toEqual([['Strg', 'Umschalt', 'K']]);
         expect(formatHotkey('mod+shift+k', de, true)).toEqual([['⌘', '⇧', 'K']]);
         expect(formatHotkey('g i', de)).toEqual([['G'], ['I']]);
@@ -298,7 +299,7 @@ describe('validators', () => {
         const result = isEmail()['~standard'].validate('x');
         expect(result.issues?.[0]?.message).toBe('Please enter a valid email address');
         expect(isEmail()['~standard'].validate('a@b.de')).toEqual({ value: 'a@b.de' });
-        const de = createValidators(messages.de.validation, 'de-DE');
+        const de = createValidators(german.validation, 'de-DE');
         expect(de.isRequired()('')).toBe('Pflichtfeld');
         expect(de.isInRange({ max: 1000 })(2000)).toBe('Höchstens 1.000');
     });
diff --git a/packages/parity/src/scheduler-logic.test.ts b/packages/parity/src/scheduler-logic.test.ts
index 7dd697a..b9db630 100644
--- a/packages/parity/src/scheduler-logic.test.ts
+++ b/packages/parity/src/scheduler-logic.test.ts
@@ -32,6 +32,7 @@ import {
     type SchedulerEvent,
 } from '@wirecore/wirelayer-recipes';
 import { describe, expect, it } from 'vitest';
+import { de as german } from '@wirecore/wirelayer-recipes/locales/de';
 
 // Scheduler, series, iCalendar and Gantt logic of @wirecore/wirelayer-recipes – framework-neutral, shared by Vue and React
 
@@ -160,7 +161,7 @@ describe('recurrence rules', () => {
     });
 
     it('describes rules in German and English', () => {
-        const de = (rule: string, start?: string) => describeRecurrence(rule, messages.de, 'de-DE', start);
+        const de = (rule: string, start?: string) => describeRecurrence(rule, german, 'de-DE', start);
         expect(de('FREQ=MONTHLY;BYDAY=2MO')).toBe('Jeden 2. Montag im Monat');
         expect(de('FREQ=MONTHLY;BYDAY=-1FR')).toBe('Jeden letzten Freitag im Monat');
         expect(de('FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE')).toBe('Alle 2 Wochen am Montag und Mittwoch');
@@ -507,11 +508,11 @@ describe('Gantt logic', () => {
     });
 
     it('scale per zoom, bars moved and resized, arrow paths', () => {
-        const scale = ganttScale(tasks, 'week', 'de-DE', messages.de);
+        const scale = ganttScale(tasks, 'week', 'de-DE', german);
         expect(scale.start).toBe('2026-10-19');
         expect(scale.bottom.map((unit) => unit.label)).toEqual(['KW 43', 'KW 44', 'KW 45']);
         expect(scale.top.map((unit) => unit.label)).toEqual(['Oktober 2026', 'November 2026']);
-        expect(ganttScale(tasks, 'quarter', 'de-DE', messages.de).bottom[0]).toEqual({
+        expect(ganttScale(tasks, 'quarter', 'de-DE', german).bottom[0]).toEqual({
             start: '2026-10-01',
             days: 92,
             label: 'Q4',
diff --git a/packages/parity/src/setup.ts b/packages/parity/src/setup.ts
index 5390d4c..817e7e0 100644
--- a/packages/parity/src/setup.ts
+++ b/packages/parity/src/setup.ts
@@ -2,6 +2,11 @@ import '@testing-library/jest-dom/vitest';
 import { cleanup as cleanupReact } from '@testing-library/react';
 import { cleanup as cleanupVue } from '@testing-library/vue';
 import { afterEach, vi } from 'vitest';
+import { registerLocale } from '@wirecore/wirelayer-recipes';
+import { de } from '@wirecore/wirelayer-recipes/locales/de';
+
+// German is a language module like the others – registered once, as an app that uses it does
+registerLocale('de', de);
 
 // jsdom has no layout APIs; Ark's positioning (Select, Menu, Tooltip …) needs these to exist.
 // (Not in the SSR test, which runs without a DOM.)
diff --git a/packages/parity/src/widgets-logic.test.ts b/packages/parity/src/widgets-logic.test.ts
index 6873064..e9179fe 100644
--- a/packages/parity/src/widgets-logic.test.ts
+++ b/packages/parity/src/widgets-logic.test.ts
@@ -55,6 +55,7 @@ import {
     type UploadState,
 } from '@wirecore/wirelayer-recipes';
 import { afterEach, describe, expect, it, vi } from 'vitest';
+import { de } from '@wirecore/wirelayer-recipes/locales/de';
 
 // Logic of the building blocks and special inputs: colours (OKLCH), phone numbers, emojis, sortable moves, mentions,
 // JSON, logs, uploads, watermark, ring parts and the floating panel's keys
@@ -158,33 +159,33 @@ describe('phone numbers', () => {
 });
 
 describe('emojis', () => {
-    it('finds emojis by German words, ignoring case and accents; names first', () => {
+    it('finds emojis by English words, ignoring case and accents; names first', () => {
         const all = defaultEmojis();
         expect(all.length).toBeGreaterThan(300);
-        expect(searchEmojis(all, 'Glück').map((entry) => entry.emoji)).toContain('🍀');
-        expect(searchEmojis(all, 'gluck').map((entry) => entry.emoji)).toContain('🍀');
-        expect(searchEmojis(all, 'daumen hoch')[0]!.emoji).toBe('👍');
+        expect(all.find((entry) => entry.emoji === '🍀')!.name).toBe('Four leaf clover');
+        expect(searchEmojis(all, 'Luck').map((entry) => entry.emoji)).toContain('🍀');
+        expect(searchEmojis(all, 'thumbs up')[0]!.emoji).toBe('👍');
+        expect(searchEmojis(all, 'glück')).toEqual([]);
         expect(searchEmojis(all, 'xyzxyz')).toEqual([]);
         expect(searchEmojis(all, '  ')).toHaveLength(all.length);
     });
 
-    it('localeEmojis: German or English names; English words always find; language modules add their own', () => {
-        const german = localeEmojis('de-DE');
+    it('localeEmojis: names and words of a language module; English words always find', () => {
+        expect(localeEmojis()).toEqual(defaultEmojis());
+        const german = localeEmojis(de.emojiPicker.emojis);
+        expect(german).toHaveLength(defaultEmojis().length);
         expect(german.find((entry) => entry.emoji === '🍀')!.name).toBe('Kleeblatt');
+        expect(german.find((entry) => entry.emoji === '👍')!.name).toBe('Daumen hoch');
+        // Accents ignored: "gluck" finds "glück"
+        expect(searchEmojis(german, 'gluck').map((entry) => entry.emoji)).toContain('🍀');
+        expect(searchEmojis(german, 'daumen hoch')[0]!.emoji).toBe('👍');
         expect(searchEmojis(german, 'clover')[0]!.emoji).toBe('🍀');
-        expect(searchEmojis(german, 'glück').map((entry) => entry.emoji)).toContain('🍀');
-        const english = localeEmojis('en-US');
-        expect(english).toHaveLength(german.length);
-        expect(english.every((entry) => !!entry.name)).toBe(true);
-        expect(english.find((entry) => entry.emoji === '👍')!.name).toBe('Thumbs up');
-        expect(searchEmojis(english, 'thumbs up')[0]!.emoji).toBe('👍');
-        expect(searchEmojis(english, 'glück')).toEqual([]);
-        const french = localeEmojis('fr-FR', '🍀 Trèfle à quatre feuilles|chance');
+        const french = localeEmojis('🍀 Trèfle à quatre feuilles|chance');
         expect(french.find((entry) => entry.emoji === '🍀')!.name).toBe('Trèfle à quatre feuilles');
         expect(searchEmojis(french, 'chance')[0]!.emoji).toBe('🍀');
         expect(searchEmojis(french, 'luck').map((entry) => entry.emoji)).toContain('🍀');
         expect(french.find((entry) => entry.emoji === '👍')!.name).toBe('Thumbs up');
-        expect(localeEmojis('fr-FR', '🍀 Trèfle à quatre feuilles|chance')).toBe(french);
+        expect(localeEmojis('🍀 Trèfle à quatre feuilles|chance')).toBe(french);
     });
 
     it('moves through a grid with arrows, Home/End and Ctrl+Home/End', () => {
diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx
index 0c9774e..8027b10 100644
--- a/packages/react/.storybook/preview.tsx
+++ b/packages/react/.storybook/preview.tsx
@@ -9,6 +9,7 @@ import { localeDirection } from '@wirecore/wirelayer-recipes';
 import { LocaleProvider, registerLocale } from '../src/index.js';
 import { ar } from '../src/locales/ar.js';
 import { cs } from '../src/locales/cs.js';
+import { de } from '../src/locales/de.js';
 import { es } from '../src/locales/es.js';
 import { fr } from '../src/locales/fr.js';
 import { hu } from '../src/locales/hu.js';
@@ -22,7 +23,7 @@ import { tr } from '../src/locales/tr.js';
 import './preview.css';
 
 // The toolbar languages that are not built in – an app registers the ones it needs the same way
-const locales = { fr, es, it, pt, 'pt-BR': ptBR, nl, pl, cs, hu, lv, tr, ar };
+const locales = { de, fr, es, it, pt, 'pt-BR': ptBR, nl, pl, cs, hu, lv, tr, ar };
 for (const [code, texts] of Object.entries(locales)) registerLocale(code, texts);
 
 // The story inside LocaleProvider; lang and dir on <html> like an app would set them
diff --git a/packages/react/src/components/EmojiPicker/EmojiPicker.stories.tsx b/packages/react/src/components/EmojiPicker/EmojiPicker.stories.tsx
index fc40462..12907b0 100644
--- a/packages/react/src/components/EmojiPicker/EmojiPicker.stories.tsx
+++ b/packages/react/src/components/EmojiPicker/EmojiPicker.stories.tsx
@@ -22,7 +22,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Search (English names, German too in a German locale), categories, a grid with arrow keys; recent ones first */
+/** Search (English names, with a language module like German also its names), categories, a grid with arrow keys; recent ones first */
 export const Playground: Story = {};
 
 /** Own emojis (e.g. reactions) */
diff --git a/packages/react/src/components/EmojiPicker/EmojiPicker.tsx b/packages/react/src/components/EmojiPicker/EmojiPicker.tsx
index fd92545..1759707 100644
--- a/packages/react/src/components/EmojiPicker/EmojiPicker.tsx
+++ b/packages/react/src/components/EmojiPicker/EmojiPicker.tsx
@@ -60,8 +60,8 @@ const icons: Record<EmojiCategory, string> = {
 const noRecent: string[] = [];
 
 /**
- * Emoji picker: search (German words), categories, a grid (arrow keys, Home/End, Ctrl+Home/End; Enter or Space
- * chooses); the name of the focused emoji is shown below. Recently used emojis come first.
+ * Emoji picker: search (English words and those of a language module), categories, a grid (arrow keys, Home/End,
+ * Ctrl+Home/End; Enter or Space chooses); the name of the focused emoji is shown below. Recently used emojis come first.
  */
 export function EmojiPicker({
     classes,
@@ -78,15 +78,12 @@ export function EmojiPicker({
 }: EmojiPickerProps) {
     const emojiPicker = useRecipe('emojiPicker', emojiPickerRecipe, classes);
     const styles = emojiPicker();
-    const { locale, translations } = useLocale();
+    const { translations } = useLocale();
     const t = translations.emojiPicker;
     const headingId = `${useId()}heading`;
     const grid = useRef<HTMLDivElement>(null);
     const focusRequest = useRef<number | null>(null);
-    const all = useMemo(
-        () => emojis ?? localeEmojis(locale, translations.emojiPicker.emojis),
-        [emojis, locale, translations]
-    );
+    const all = useMemo(() => emojis ?? localeEmojis(translations.emojiPicker.emojis), [emojis, translations]);
     const [stored, setStored] = useLocalStorage<string[]>(recentKey, noRecent);
     const recentEntries = useMemo(
         () =>
diff --git a/packages/react/src/components/LocaleProvider/LocaleProvider.tsx b/packages/react/src/components/LocaleProvider/LocaleProvider.tsx
index 4cc7c29..996e8f3 100644
--- a/packages/react/src/components/LocaleProvider/LocaleProvider.tsx
+++ b/packages/react/src/components/LocaleProvider/LocaleProvider.tsx
@@ -28,7 +28,7 @@ export function LocaleProvider({ locale = defaultLocale, translations, children
     );
 }
 
-/** Locale, writing direction and texts of the nearest LocaleProvider – German without one */
+/** Locale, writing direction and texts of the nearest LocaleProvider – English (en-US) without one */
 export function useLocale(): ResolvedLocale {
     return useContext(LocaleContext);
 }
diff --git a/packages/react/src/data-table/DataTable.tsx b/packages/react/src/data-table/DataTable.tsx
index 81ea1b8..9bcc772 100644
--- a/packages/react/src/data-table/DataTable.tsx
+++ b/packages/react/src/data-table/DataTable.tsx
@@ -24,6 +24,7 @@ import {
     changesByRow,
     autoRowSpans,
     conditionFieldsFromColumns,
+    csvSeparator,
     emptyConditionGroup,
     isActiveCondition,
     matchesCondition,
@@ -344,6 +345,9 @@ export interface DataTableProps<TData> extends Omit<
     onPinnedColumnsChange?: (pinned: { start: string[]; end: string[] }) => void;
     /** Shows an export button; the CSV has the filtered and sorted rows of all pages (or the selection) */
     exportFilename?: string;
+    /** Separator of the CSV export, also of the export button – default: from the locale (";" where numbers have a
+     * decimal comma, e.g. de-DE, as a spreadsheet there expects it; "," otherwise) */
+    csvSeparator?: string;
     /** Formats of the export button: CSV (default), Excel (.xlsx) or both */
     exportFormats?: ('csv' | 'xlsx')[];
     /** Groups the rows by the values of these columns (expandable group rows) */
@@ -567,6 +571,7 @@ export function DataTable<TData extends object>({
     pinnedColumns,
     onPinnedColumnsChange,
     exportFilename,
+    csvSeparator: csvSeparatorProp,
     exportFormats,
     groupBy,
     onGroupByChange,
@@ -2365,10 +2370,8 @@ export function DataTable<TData extends object>({
                     : display(column, row.getValue(column.id), row.original)
             )
         );
-        const csv = toCsv(
-            [visible.map((column) => column.exportHeader ?? column.header), ...records],
-            options.separator
-        );
+        const separator = options.separator ?? csvSeparatorProp ?? csvSeparator(locale);
+        const csv = toCsv([visible.map((column) => column.exportHeader ?? column.header), ...records], separator);
         return options.bom === false ? csv.slice(1) : csv;
     };
     const exportCsv = (options: boolean | DataTableCsvOptions = false) => {
diff --git a/packages/react/src/data-table/types.ts b/packages/react/src/data-table/types.ts
index 38d68a0..8e226c9 100644
--- a/packages/react/src/data-table/types.ts
+++ b/packages/react/src/data-table/types.ts
@@ -166,7 +166,7 @@ export interface DataTableAllSelection {
 export interface DataTableCsvOptions {
     /** Only the selected rows (default: the filtered and sorted rows of all pages) */
     selectionOnly?: boolean;
-    /** Separator, default ";" (opens in a German Excel) */
+    /** Separator – default: `csvSeparator` of the table, else from the locale (";" with a decimal comma, "," otherwise) */
     separator?: string;
     /** Byte order mark at the start, so Excel reads UTF-8 – default true */
     bom?: boolean;
diff --git a/packages/react/src/locales/de.ts b/packages/react/src/locales/de.ts
new file mode 100644
index 0000000..c127a38
--- /dev/null
+++ b/packages/react/src/locales/de.ts
@@ -0,0 +1,2 @@
+// German texts: registerLocale('de', de) at app start, or pass them to LocaleProvider (translations)
+export { de, de as default } from '@wirecore/wirelayer-recipes/locales/de';
diff --git a/packages/recipes/src/blocks.ts b/packages/recipes/src/blocks.ts
index f34925a..f9778be 100644
--- a/packages/recipes/src/blocks.ts
+++ b/packages/recipes/src/blocks.ts
@@ -112,7 +112,7 @@ export function authFields(mode: AuthMode): AuthField[] {
 }
 
 export interface AuthValidationOptions {
-    /** Messages of another language (default German) */
+    /** Messages of another language (default English) */
     texts?: ValidationTexts;
     /** Minimum length of a new password (sign up, default 8) */
     passwordMinLength?: number;
diff --git a/packages/recipes/src/emoji.ts b/packages/recipes/src/emoji.ts
index 651358b..0d94fb1 100644
--- a/packages/recipes/src/emoji.ts
+++ b/packages/recipes/src/emoji.ts
@@ -1,9 +1,8 @@
-import { defaultLocale } from './i18n.js';
 import { foldText } from './tree-data.js';
 
-// Emoji data for EmojiPicker: a selection of about 500 common emojis with German and English names and search words,
-// grouped by category. Skin tones are left out (the default yellow). Own data replaces or extends it (EmojiPicker
-// `emojis`); language modules add names and search words of further languages (`emojiPicker.emojis`).
+// Emoji data for EmojiPicker: a selection of about 500 common emojis with English names and search words, grouped by
+// category. Skin tones are left out (the default yellow). Own data replaces or extends it (EmojiPicker `emojis`);
+// language modules add names and search words of their language (`emojiPicker.emojis`, e.g. German in locales/de).
 
 export type EmojiCategory =
     'recent' | 'smileys' | 'people' | 'nature' | 'food' | 'travel' | 'activities' | 'objects' | 'symbols';
@@ -17,517 +16,9 @@ export interface EmojiData {
     category: Exclude<EmojiCategory, 'recent'>;
 }
 
-// "emoji Name|Suchwörter" per line – compact to keep the bundle small
+// "emoji Name|search words" per line – compact to keep the bundle small
 const raw: Record<Exclude<EmojiCategory, 'recent'>, string> = {
-    smileys: `😀 Grinsendes Gesicht|lachen freude fröhlich
-😃 Grinsen mit großen Augen|lachen freude
-😄 Lachendes Gesicht|lachen freude glücklich
-😁 Strahlendes Gesicht|grinsen zähne
-😆 Lachen mit zugekniffenen Augen|lachen lustig
-😅 Lachen mit Schweißtropfen|erleichtert puh
-🤣 Vor Lachen auf dem Boden|lachen lol lustig
-😂 Tränen vor Lachen|lachen lustig weinen
-🙂 Leicht lächelndes Gesicht|lächeln
-🙃 Umgekehrtes Gesicht|ironie albern
-😉 Zwinkerndes Gesicht|zwinkern scherz
-😊 Lächeln mit lachenden Augen|freundlich erröten
-😇 Lächeln mit Heiligenschein|engel unschuldig
-🥰 Lächeln mit Herzen|verliebt liebe
-😍 Herzaugen|verliebt liebe toll
-🤩 Sternaugen|begeistert wow
-😘 Kuss zuwerfen|kuss liebe
-😋 Lecker|genießen essen zunge
-😛 Zunge herausstrecken|frech
-😜 Zwinkern mit Zunge|albern frech
-🤪 Verrücktes Gesicht|albern verrückt
-🤑 Geldgesicht|geld reich
-🤗 Umarmung|umarmen danke
-🤭 Hand vor dem Mund|kichern hoppla
-🤫 Pst|leise geheim ruhe
-🤔 Nachdenkliches Gesicht|denken überlegen hmm
-🤐 Reißverschlussmund|schweigen geheim
-🤨 Hochgezogene Augenbraue|skeptisch zweifel
-😐 Neutrales Gesicht|neutral egal
-😑 Ausdrucksloses Gesicht|genervt egal
-😶 Gesicht ohne Mund|sprachlos
-😏 Süffisantes Lächeln|grinsen schelmisch
-😒 Gelangweiltes Gesicht|unzufrieden genervt
-🙄 Augenrollen|genervt
-😬 Grimasse|peinlich angespannt
-😌 Erleichtertes Gesicht|zufrieden ruhig
-😔 Nachdenklich traurig|traurig
-😪 Müdes Gesicht|schläfrig
-😴 Schlafendes Gesicht|schlafen müde zzz
-😷 Gesicht mit Maske|krank maske
-🤒 Gesicht mit Thermometer|krank fieber
-🤢 Übelkeit|krank übel
-🤧 Niesendes Gesicht|schnupfen erkältung
-🥵 Heißes Gesicht|hitze schwitzen
-🥶 Kaltes Gesicht|kalt frieren
-😵 Benommenes Gesicht|schwindelig
-🤯 Explodierender Kopf|überwältigt wow
-🤠 Cowboy|hut
-🥳 Partygesicht|feiern party geburtstag
-😎 Sonnenbrille|cool lässig
-🤓 Strebergesicht|nerd brille
-🧐 Gesicht mit Monokel|prüfen genau
-😕 Verwirrtes Gesicht|unsicher
-😟 Besorgtes Gesicht|sorge
-🙁 Leicht trauriges Gesicht|traurig
-😮 Offener Mund|überrascht staunen
-😲 Erstauntes Gesicht|überrascht schock
-😳 Errötetes Gesicht|peinlich verlegen
-🥺 Flehendes Gesicht|bitte bettelnd
-😨 Ängstliches Gesicht|angst
-😰 Besorgt mit Schweiß|angst stress
-😢 Weinendes Gesicht|traurig träne
-😭 Laut weinend|traurig weinen
-😱 Schreiendes Gesicht|angst schock horror
-😖 Verwirrtes Gesicht|frustriert
-😞 Enttäuschtes Gesicht|enttäuscht traurig
-😓 Niedergeschlagen mit Schweiß|stress
-😩 Erschöpftes Gesicht|müde fertig
-😫 Müde|erschöpft
-🥱 Gähnendes Gesicht|gähnen müde langweilig
-😤 Triumphierendes Gesicht|schnauben stolz
-😡 Wütendes Gesicht|wut ärger
-😠 Verärgertes Gesicht|ärger böse
-🤬 Fluchendes Gesicht|schimpfen wut
-😈 Lachender Teufel|teufel frech
-💀 Totenkopf|tot schädel
-💩 Kothaufen|lustig
-🤡 Clown|clownsgesicht
-👻 Gespenst|geist halloween
-👽 Außerirdischer|alien ufo
-🤖 Roboter|bot maschine ki
-😺 Lachende Katze|katze
-😻 Katze mit Herzaugen|katze verliebt
-🙈 Nichts sehen|affe peinlich
-🙉 Nichts hören|affe
-🙊 Nichts sagen|affe geheim`,
-    people: `👋 Winkende Hand|hallo tschüss winken
-🤚 Erhobene Hand|stopp melden
-✋ Hand|stopp halt fünf
-🖖 Vulkanischer Gruß|spock
-👌 OK-Zeichen|ok gut perfekt
-🤌 Zusammengelegte Finger|italienisch was
-✌️ Victory-Zeichen|sieg frieden
-🤞 Gekreuzte Finger|glück daumen drücken
-🤟 Ich liebe dich|liebe geste
-🤘 Teufelsgruß|rock metal
-🤙 Ruf mich an|telefon
-👈 Zeigefinger links|links zeigen
-👉 Zeigefinger rechts|rechts zeigen
-👆 Zeigefinger nach oben|oben
-👇 Zeigefinger nach unten|unten
-☝️ Zeigefinger|eins hinweis
-👍 Daumen hoch|gut ja zustimmung like
-👎 Daumen runter|schlecht nein ablehnung
-✊ Erhobene Faust|faust solidarität
-👊 Faust|faustschlag
-👏 Klatschende Hände|applaus bravo klatschen
-🙌 Erhobene Hände|feiern hurra
-👐 Offene Hände|umarmung
-🤲 Handflächen nach oben|bitten
-🤝 Handschlag|vereinbarung deal partner
-🙏 Gefaltete Hände|bitte danke beten
-✍️ Schreibende Hand|schreiben notiz
-💪 Bizeps|stark kraft muskel
-🧠 Gehirn|denken klug
-👀 Augen|schauen sehen
-👁️ Auge|sehen
-👄 Mund|lippen
-👶 Baby|kind säugling
-🧒 Kind|kind
-👦 Junge|kind
-👧 Mädchen|kind
-🧑 Person|mensch
-👨 Mann|mensch
-👩 Frau|mensch
-🧓 Ältere Person|alt senior
-👮 Polizist|polizei
-🕵️ Detektiv|spion ermittler
-👷 Bauarbeiter|baustelle helm
-🧑‍💻 Person am Computer|programmieren entwickler technik
-🧑‍🏫 Lehrkraft|lehrer schule
-🧑‍⚕️ Ärztin oder Arzt|medizin gesundheit
-🧑‍🍳 Koch|kochen küche
-🦸 Superheld|held
-🙋 Person mit erhobener Hand|melden frage hallo
-🤷 Schulterzucken|egal weiß nicht
-🤦 Hand vor die Stirn|facepalm oh nein
-🙇 Verbeugung|entschuldigung danke
-💁 Infoschalter-Person|info hilfe
-🏃 Laufende Person|laufen rennen sport
-🚶 Gehende Person|gehen spazieren
-💃 Tanzende Frau|tanzen party
-🕺 Tanzender Mann|tanzen party
-👨‍👩‍👧 Familie|eltern kind
-👥 Silhouetten|gruppe team leute
-🗣️ Sprechender Kopf|sprechen reden`,
-    nature: `🐶 Hundegesicht|hund haustier
-🐱 Katzengesicht|katze haustier
-🐭 Mausgesicht|maus
-🐹 Hamster|haustier
-🐰 Hasengesicht|hase kaninchen ostern
-🦊 Fuchs|fuchs
-🐻 Bär|bär
-🐼 Panda|bär
-🐨 Koala|bär
-🐯 Tigergesicht|tiger
-🦁 Löwe|löwe
-🐮 Kuhgesicht|kuh
-🐷 Schweinegesicht|schwein
-🐸 Frosch|frosch
-🐵 Affengesicht|affe
-🐔 Huhn|huhn vogel
-🐧 Pinguin|vogel
-🐦 Vogel|vogel
-🦆 Ente|vogel
-🦅 Adler|vogel
-🦉 Eule|vogel nacht
-🐝 Biene|honig insekt
-🐛 Raupe|insekt
-🦋 Schmetterling|insekt
-🐌 Schnecke|langsam
-🐞 Marienkäfer|glück insekt
-🐢 Schildkröte|langsam
-🐍 Schlange|reptil
-🐙 Oktopus|krake meer
-🐠 Tropischer Fisch|fisch meer
-🐬 Delfin|meer
-🐳 Wal|meer
-🦈 Hai|meer
-🐊 Krokodil|reptil
-🦒 Giraffe|tier
-🐘 Elefant|tier
-🐴 Pferdegesicht|pferd
-🦄 Einhorn|fantasie
-🐾 Pfotenabdrücke|tier spuren
-💐 Blumenstrauß|blumen geschenk
-🌸 Kirschblüte|blume frühling
-🌹 Rose|blume liebe
-🌻 Sonnenblume|blume sommer
-🌷 Tulpe|blume frühling
-🌱 Keimling|pflanze wachsen
-🌲 Nadelbaum|baum wald
-🌳 Laubbaum|baum
-🌴 Palme|urlaub strand
-🌵 Kaktus|wüste pflanze
-🍀 Kleeblatt|glück
-🍁 Ahornblatt|herbst
-🍂 Herbstlaub|herbst blätter
-🌍 Weltkugel Europa und Afrika|erde welt global
-🌙 Mondsichel|mond nacht
-⭐ Stern|stern
-🌟 Leuchtender Stern|stern glanz
-⚡ Blitz|strom energie schnell
-🔥 Feuer|heiß flamme trend
-🌈 Regenbogen|farben
-☀️ Sonne|sonnig wetter
-⛅ Sonne hinter Wolke|wetter wolkig
-☁️ Wolke|wetter
-🌧️ Regenwolke|regen wetter
-❄️ Schneeflocke|schnee winter kalt
-💧 Tropfen|wasser
-🌊 Welle|meer wasser`,
-    food: `🍏 Grüner Apfel|obst
-🍎 Roter Apfel|obst
-🍐 Birne|obst
-🍊 Mandarine|obst orange
-🍋 Zitrone|obst sauer
-🍌 Banane|obst
-🍉 Wassermelone|obst sommer
-🍇 Trauben|obst wein
-🍓 Erdbeere|obst
-🍒 Kirschen|obst
-🍑 Pfirsich|obst
-🥭 Mango|obst
-🍍 Ananas|obst
-🥥 Kokosnuss|obst
-🥝 Kiwi|obst
-🍅 Tomate|gemüse
-🥑 Avocado|gemüse
-🥦 Brokkoli|gemüse
-🥕 Karotte|möhre gemüse
-🌽 Maiskolben|mais gemüse
-🌶️ Peperoni|scharf
-🥔 Kartoffel|gemüse
-🍄 Pilz|pilz
-🥜 Erdnüsse|nüsse
-🍞 Brot|bäckerei
-🥐 Croissant|frühstück
-🥨 Brezel|bayern
-🧀 Käse|käse
-🥚 Ei|frühstück
-🍳 Spiegelei|frühstück braten
-🥞 Pfannkuchen|frühstück
-🥓 Speck|frühstück
-🍔 Hamburger|burger fastfood
-🍟 Pommes|fastfood
-🍕 Pizza|italienisch
-🌭 Hotdog|würstchen
-🥪 Sandwich|brot
-🌮 Taco|mexikanisch
-🥗 Salat|gesund
-🍝 Spaghetti|nudeln pasta
-🍜 Nudelsuppe|ramen
-🍣 Sushi|japanisch fisch
-🍦 Softeis|eis dessert
-🍩 Donut|süß
-🍪 Keks|süß
-🎂 Geburtstagskuchen|geburtstag torte feiern
-🍰 Kuchenstück|kuchen torte
-🧁 Cupcake|kuchen süß
-🍫 Schokolade|süß
-🍬 Bonbon|süß
-🍯 Honigtopf|honig
-☕ Heißgetränk|kaffee tee pause
-🍵 Tee|tee
-🥤 Becher mit Strohhalm|getränk
-🍺 Bier|getränk prost
-🍻 Anstoßende Biergläser|prost feiern
-🍷 Weinglas|wein getränk
-🥂 Sektgläser|anstoßen feiern prost
-🍾 Sektflasche|feiern
-🍽️ Teller mit Besteck|essen mahlzeit`,
-    travel: `🚗 Auto|fahrzeug
-🚕 Taxi|fahrzeug
-🚌 Bus|fahrzeug verkehr
-🚑 Krankenwagen|notfall
-🚒 Feuerwehrauto|feuerwehr
-🚓 Polizeiauto|polizei
-🚚 Lieferwagen|lieferung lkw versand
-🚜 Traktor|landwirtschaft
-🚲 Fahrrad|rad
-🛴 Tretroller|roller
-🏍️ Motorrad|fahrzeug
-🚂 Lokomotive|zug bahn
-🚆 Zug|bahn reise
-🚇 U-Bahn|bahn
-✈️ Flugzeug|fliegen reise urlaub
-🛫 Abflug|fliegen reise
-🛬 Landung|fliegen ankunft
-🚀 Rakete|start launch schnell
-🛸 Ufo|außerirdisch
-🚁 Hubschrauber|fliegen
-⛵ Segelboot|boot segeln
-🚢 Schiff|boot reise
-⚓ Anker|schiff
-⛽ Zapfsäule|tanken benzin
-🚦 Ampel|verkehr
-🚧 Baustelle|arbeit sperrung
-🗺️ Weltkarte|karte reise
-🧭 Kompass|richtung navigation
-🏔️ Schneebedeckter Berg|berg
-🏖️ Strand mit Sonnenschirm|urlaub strand
-🏝️ Insel|urlaub
-🏠 Haus|zuhause heim
-🏡 Haus mit Garten|zuhause
-🏢 Bürogebäude|büro firma arbeit
-🏥 Krankenhaus|klinik
-🏦 Bank|geld
-🏨 Hotel|reise übernachtung
-🏫 Schule|bildung
-🏭 Fabrik|industrie
-🏰 Schloss|burg
-⛪ Kirche|religion
-🗼 Turm|tokio
-🗽 Freiheitsstatue|new york
-🎡 Riesenrad|kirmes
-🌃 Nacht mit Sternen|stadt nacht
-🌅 Sonnenaufgang|morgen
-⏰ Wecker|zeit wecker morgen
-⌛ Sanduhr|zeit warten
-⏱️ Stoppuhr|zeit messen
-🕐 Ein Uhr|uhr zeit`,
-    activities: `⚽ Fußball|sport ball
-🏀 Basketball|sport ball
-🏈 Football|sport ball
-⚾ Baseball|sport ball
-🎾 Tennis|sport ball
-🏐 Volleyball|sport ball
-🏓 Tischtennis|sport
-🏸 Badminton|sport
-🥅 Tor|sport
-⛳ Golffahne|golf sport
-🎣 Angel|angeln fisch
-🎿 Ski|wintersport
-🏂 Snowboarder|wintersport
-🏊 Schwimmer|schwimmen sport
-🚴 Radfahrer|fahrrad sport
-🏆 Pokal|sieg gewinner preis
-🥇 Goldmedaille|erster sieg gewinner
-🥈 Silbermedaille|zweiter
-🥉 Bronzemedaille|dritter
-🏅 Sportmedaille|medaille preis
-🎖️ Orden|auszeichnung
-🎫 Eintrittskarte|ticket
-🎟️ Ticket|eintritt
-🎭 Theatermasken|theater kultur
-🎨 Farbpalette|kunst malen design
-🎬 Filmklappe|film kino
-🎤 Mikrofon|singen karaoke
-🎧 Kopfhörer|musik hören
-🎵 Musiknote|musik
-🎶 Musiknoten|musik
-🎹 Klaviatur|klavier musik
-🎸 Gitarre|musik
-🎮 Videospiel|spielen gaming controller
-🕹️ Joystick|spielen gaming
-🎲 Würfel|spiel glück
-🧩 Puzzleteil|puzzle lösung
-♟️ Schachfigur|schach strategie
-🎯 Volltreffer|ziel treffer
-🎳 Bowling|spiel
-🎉 Konfettibombe|feiern party glückwunsch
-🎊 Konfettiball|feiern party
-🎈 Luftballon|party geburtstag
-🎁 Geschenk|geburtstag überraschung
-🎄 Weihnachtsbaum|weihnachten
-🎃 Kürbislaterne|halloween
-✨ Funkeln|glanz neu magie`,
-    objects: `⌚ Armbanduhr|uhr zeit
-📱 Mobiltelefon|handy smartphone
-💻 Laptop|computer rechner arbeit
-⌨️ Tastatur|computer tippen
-🖥️ Bildschirm|computer monitor
-🖨️ Drucker|drucken
-🖱️ Computermaus|maus klicken
-💾 Diskette|speichern
-💿 CD|daten musik
-📷 Kamera|foto
-📹 Videokamera|video
-📞 Telefonhörer|telefon anrufen
-☎️ Telefon|anrufen
-📺 Fernseher|tv
-📻 Radio|musik
-🔋 Batterie|akku energie
-🔌 Stecker|strom
-💡 Glühbirne|idee licht tipp
-🔦 Taschenlampe|licht
-🕯️ Kerze|licht
-🗑️ Papierkorb|löschen müll
-💰 Geldsack|geld reich
-💳 Kreditkarte|bezahlen geld
-💶 Euroschein|geld euro
-🧾 Beleg|quittung rechnung
-✉️ Briefumschlag|brief post mail
-📧 E-Mail|mail nachricht
-📨 Eingehender Umschlag|mail empfangen
-📦 Paket|versand lieferung
-📮 Briefkasten|post
-📝 Notiz|schreiben memo
-✏️ Bleistift|schreiben bearbeiten
-🖊️ Kugelschreiber|schreiben
-📁 Ordner|datei ablage
-📂 Geöffneter Ordner|datei
-📄 Dokument|datei seite
-📊 Balkendiagramm|statistik daten chart
-📈 Steigender Trend|wachstum statistik
-📉 Fallender Trend|rückgang statistik
-📅 Kalender|datum termin
-📆 Abreißkalender|datum termin
-📌 Pinnnadel|merken wichtig
-📍 Stecknadel|ort standort
-📎 Büroklammer|anhang
-📏 Lineal|messen
-✂️ Schere|schneiden
-🔒 Geschlossenes Schloss|sicher gesperrt privat
-🔓 Offenes Schloss|entsperrt
-🔑 Schlüssel|passwort zugang
-🔨 Hammer|werkzeug bauen
-🛠️ Werkzeuge|reparieren einstellungen
-⚙️ Zahnrad|einstellungen technik
-🧰 Werkzeugkasten|werkzeug
-🧲 Magnet|anziehen
-🧪 Reagenzglas|labor test chemie
-🔬 Mikroskop|wissenschaft forschung
-🔭 Teleskop|astronomie
-💊 Tablette|medizin
-🩺 Stethoskop|arzt medizin
-🛒 Einkaufswagen|einkaufen shop
-🎒 Rucksack|schule
-👓 Brille|lesen
-📚 Bücher|lesen lernen bibliothek
-📖 Offenes Buch|lesen
-🔍 Lupe|suchen suche
-🔔 Glocke|benachrichtigung
-📣 Megafon|ankündigung
-🏷️ Etikett|tag label preis
-🔗 Link|verknüpfung kette`,
-    symbols: `❤️ Rotes Herz|liebe herz
-🧡 Oranges Herz|herz
-💛 Gelbes Herz|herz
-💚 Grünes Herz|herz
-💙 Blaues Herz|herz
-💜 Lila Herz|herz
-🖤 Schwarzes Herz|herz
-🤍 Weißes Herz|herz
-💔 Gebrochenes Herz|trauer liebe
-💕 Zwei Herzen|liebe
-💯 Hundert Punkte|perfekt voll
-💢 Ärger-Symbol|wut
-💥 Zusammenstoß|knall boom
-💫 Schwindelig|sterne
-💬 Sprechblase|nachricht kommentar chat
-💭 Gedankenblase|denken
-💤 Schlafen|zzz müde
-✅ Weißes Häkchen auf Grün|erledigt ja fertig ok
-☑️ Abgehaktes Kästchen|erledigt
-✔️ Häkchen|ok richtig
-❌ Kreuz|nein falsch fehler löschen
-❎ Kreuz-Schaltfläche|nein
-➕ Plus|hinzufügen mehr
-➖ Minus|weniger entfernen
-❓ Fragezeichen|frage hilfe
-❗ Ausrufezeichen|wichtig achtung
-⚠️ Warnung|achtung vorsicht
-⛔ Zutritt verboten|stopp verbot
-🚫 Verboten|nein verbot
-♻️ Recycling|umwelt
-✳️ Achtzackiger Stern|stern
-🆕 Neu|neu
-🆗 OK|ok
-🆘 SOS|hilfe notfall
-🔴 Roter Kreis|rot punkt
-🟠 Oranger Kreis|orange punkt
-🟡 Gelber Kreis|gelb punkt
-🟢 Grüner Kreis|grün punkt
-🔵 Blauer Kreis|blau punkt
-🟣 Lila Kreis|lila punkt
-⚫ Schwarzer Kreis|schwarz punkt
-⚪ Weißer Kreis|weiß punkt
-🔺 Rotes Dreieck|nach oben
-🔻 Rotes Dreieck nach unten|nach unten
-⬆️ Pfeil nach oben|oben hoch
-⬇️ Pfeil nach unten|unten runter
-⬅️ Pfeil nach links|links zurück
-➡️ Pfeil nach rechts|rechts weiter
-🔄 Pfeile gegen den Uhrzeigersinn|aktualisieren neu laden
-🔁 Wiederholen|schleife
-▶️ Wiedergabe|abspielen play
-⏸️ Pause|pause
-⏹️ Stopp|stopp
-🔇 Stumm|ton aus
-🔊 Lautsprecher laut|ton an
-©️ Copyright|recht
-®️ Eingetragene Marke|marke
-™️ Markenzeichen|marke
-#️⃣ Raute|hashtag nummer
-🔢 Zahlen|nummer
-ℹ️ Information|info hinweis
-🏁 Zielflagge|ziel rennen fertig
-🚩 Dreiecksflagge|markierung warnung
-🏳️ Weiße Flagge|aufgeben
-🇩🇪 Flagge Deutschland|deutschland
-🇦🇹 Flagge Österreich|österreich
-🇨🇭 Flagge Schweiz|schweiz
-🇪🇺 Flagge Europäische Union|eu europa`,
-};
-
-// The same emojis in English ("emoji Name|search words" per line)
-const rawEnglish = `😀 Grinning face|smile happy joy
+    smileys: `😀 Grinning face|smile happy joy
 😃 Grinning face with big eyes|smile happy
 😄 Grinning face with smiling eyes|laugh happy
 😁 Beaming face|grin teeth
@@ -612,8 +103,8 @@ const rawEnglish = `😀 Grinning face|smile happy joy
 😻 Cat with heart eyes|cat love
 🙈 See-no-evil monkey|monkey
 🙉 Hear-no-evil monkey|monkey
-🙊 Speak-no-evil monkey|monkey
-👋 Waving hand|wave hello bye
+🙊 Speak-no-evil monkey|monkey`,
+    people: `👋 Waving hand|wave hello bye
 🤚 Raised back of hand|hand
 ✋ Raised hand|hand stop high five
 🖖 Vulcan salute|spock
@@ -672,8 +163,8 @@ const rawEnglish = `😀 Grinning face|smile happy joy
 🕺 Man dancing|dance
 👨‍👩‍👧 Family|parents child
 👥 Busts in silhouette|people users team
-🗣️ Speaking head|speak talk
-🐶 Dog face|dog puppy
+🗣️ Speaking head|speak talk`,
+    nature: `🐶 Dog face|dog puppy
 🐱 Cat face|cat kitten
 🐭 Mouse face|mouse
 🐹 Hamster|pet
@@ -738,8 +229,8 @@ const rawEnglish = `😀 Grinning face|smile happy joy
 🌧️ Cloud with rain|rain weather
 ❄️ Snowflake|snow cold winter
 💧 Droplet|water drop
-🌊 Water wave|wave sea ocean
-🍏 Green apple|fruit
+🌊 Water wave|wave sea ocean`,
+    food: `🍏 Green apple|fruit
 🍎 Red apple|fruit
 🍐 Pear|fruit
 🍊 Tangerine|orange fruit
@@ -798,8 +289,8 @@ const rawEnglish = `😀 Grinning face|smile happy joy
 🍷 Wine glass|wine
 🥂 Clinking glasses|cheers champagne toast
 🍾 Bottle with popping cork|champagne celebrate
-🍽️ Fork and knife with plate|dinner meal
-🚗 Automobile|car
+🍽️ Fork and knife with plate|dinner meal`,
+    travel: `🚗 Automobile|car
 🚕 Taxi|cab
 🚌 Bus|public transport
 🚑 Ambulance|emergency
@@ -848,8 +339,8 @@ const rawEnglish = `😀 Grinning face|smile happy joy
 ⏰ Alarm clock|alarm time
 ⌛ Hourglass done|time wait
 ⏱️ Stopwatch|timer time
-🕐 One o’clock|time clock
-⚽ Soccer ball|football sport
+🕐 One o’clock|time clock`,
+    activities: `⚽ Soccer ball|football sport
 🏀 Basketball|sport
 🏈 American football|sport
 ⚾ Baseball|sport
@@ -894,8 +385,8 @@ const rawEnglish = `😀 Grinning face|smile happy joy
 🎁 Wrapped gift|present gift
 🎄 Christmas tree|christmas
 🎃 Jack-o-lantern|halloween pumpkin
-✨ Sparkles|shine magic new
-⌚ Watch|time
+✨ Sparkles|shine magic new`,
+    objects: `⌚ Watch|time
 📱 Mobile phone|smartphone
 💻 Laptop|computer
 ⌨️ Keyboard|computer type
@@ -963,8 +454,8 @@ const rawEnglish = `😀 Grinning face|smile happy joy
 🔔 Bell|notification
 📣 Megaphone|announcement
 🏷️ Label|tag
-🔗 Link|chain url
-❤️ Red heart|love
+🔗 Link|chain url`,
+    symbols: `❤️ Red heart|love
 🧡 Orange heart|love
 💛 Yellow heart|love
 💚 Green heart|love
@@ -1031,7 +522,8 @@ const rawEnglish = `😀 Grinning face|smile happy joy
 🇩🇪 Flag Germany|germany
 🇦🇹 Flag Austria|austria
 🇨🇭 Flag Switzerland|switzerland
-🇪🇺 Flag European Union|eu europe`;
+🇪🇺 Flag European Union|eu europe`,
+};
 
 /** Order of the categories (recently used first) */
 export const emojiCategories: EmojiCategory[] = [
@@ -1048,7 +540,7 @@ export const emojiCategories: EmojiCategory[] = [
 
 let parsed: EmojiData[] | undefined;
 
-/** The built-in emojis (parsed once) */
+/** The built-in emojis with their English names (parsed once) */
 export function defaultEmojis(): EmojiData[] {
     parsed ??= (Object.entries(raw) as [EmojiData['category'], string][]).flatMap(([category, lines]) =>
         lines.split('\n').map((line) => {
@@ -1072,29 +564,24 @@ function parseEmojiTexts(lines: string) {
     return texts;
 }
 
-let english: Map<string, { name: string; keywords: string[] }> | undefined;
-const byLocale = new Map<string, EmojiData[]>();
+const byTexts = new Map<string, EmojiData[]>();
 
 /**
- * The built-in emojis for a locale: German names in German, English ones otherwise. `texts` – lines "😀 Name|search
- * words", e.g. `emojiPicker.emojis` of a language module – give names and search words of another language. The
- * English name and words always find an emoji as well (and in German the German ones).
+ * The built-in emojis in a language: `texts` – lines "😀 Name|search words", e.g. `emojiPicker.emojis` of a language
+ * module – give names and search words; emojis without a line keep their English name. The English name and words
+ * always find an emoji as well.
  */
-export function localeEmojis(locale = defaultLocale, texts = ''): EmojiData[] {
-    const german = locale.split('-')[0]!.toLowerCase() === 'de';
-    const key = `${german ? 'de' : 'other'}\n${texts}`;
-    let result = byLocale.get(key);
+export function localeEmojis(texts = ''): EmojiData[] {
+    let result = byTexts.get(texts);
     if (result) return result;
-    english ??= parseEmojiTexts(rawEnglish);
     const own = parseEmojiTexts(texts);
     result = defaultEmojis().map((entry) => {
-        const en = english!.get(entry.emoji);
-        const local = own.get(entry.emoji) ?? (german ? { name: entry.name, keywords: entry.keywords ?? [] } : en);
+        const local = own.get(entry.emoji);
         if (!local) return entry;
-        const extra = local === en || !en ? [] : [...en.name.toLowerCase().split(' '), ...en.keywords];
-        return { ...entry, name: local.name, keywords: [...new Set([...local.keywords, ...extra])] };
+        const english = [...entry.name.toLowerCase().split(' '), ...(entry.keywords ?? [])];
+        return { ...entry, name: local.name, keywords: [...new Set([...local.keywords, ...english])] };
     });
-    byLocale.set(key, result);
+    byTexts.set(texts, result);
     return result;
 }
 
diff --git a/packages/recipes/src/i18n.ts b/packages/recipes/src/i18n.ts
index 6c20ced..20cf0ac 100644
--- a/packages/recipes/src/i18n.ts
+++ b/packages/recipes/src/i18n.ts
@@ -1,1312 +1,12 @@
 // UI texts of the components – shared by @wirecore/wirelayer-vue and @wirecore/wirelayer-react so both read the same to assistive
-// tech. German is the default; LocaleProvider switches the language (see resolveLocale). German and English are built
-// in; further languages are separate modules (./locales/<code>.ts, `@wirecore/wirelayer-recipes/locales/<code>`) that an app
+// tech. English is the default and built in; LocaleProvider switches the language (see resolveLocale). German and the
+// further languages are separate modules (./locales/<code>.ts, `@wirecore/wirelayer-recipes/locales/<code>`) that an app
 // registers with registerLocale, so they do not add to the default bundle.
 
-type CalendarView = 'day' | 'month' | 'year';
-
-const next: Record<CalendarView, string> = {
-    day: 'Nächster Monat',
-    month: 'Nächstes Jahr',
-    year: 'Nächstes Jahrzehnt',
-};
-const previous: Record<CalendarView, string> = {
-    day: 'Vorheriger Monat',
-    month: 'Vorheriges Jahr',
-    year: 'Vorheriges Jahrzehnt',
-};
-const viewNames: Record<CalendarView, string> = { day: 'Tage', month: 'Monate', year: 'Jahre' };
+// The German texts define the shape of every language (type only – they are not part of this bundle)
+import type { de } from './locales/de.js';
 
-const de = {
-    common: {
-        close: 'Schließen',
-        cancel: 'Abbrechen',
-        confirm: 'Bestätigen',
-        placeholder: 'Bitte wählen',
-        loading: 'Wird geladen',
-        empty: 'Keine Einträge',
-        noResults: 'Keine Treffer',
-        selectedCount: (count: number) => `${count} ausgewählt`,
-    },
-    toast: { label: 'Benachrichtigungen' },
-    menu: { title: 'Aktionen', search: 'Menü durchsuchen' },
-    menubar: { menu: 'Menü' },
-    dialog: { maximize: 'Maximieren', restore: 'Verkleinern' },
-    /** confirm() and prompt() */
-    confirm: {
-        typeToConfirm: (text: string) => `Zur Bestätigung „${text}“ eingeben`,
-        mismatch: 'Die Eingabe stimmt nicht überein',
-    },
-    breadcrumb: { label: 'Pfad', more: 'Ausgeblendete Ebenen' },
-    siteHeader: { navigation: 'Hauptnavigation', menu: 'Menü' },
-    modeToggle: { light: 'Helles Design aktivieren', dark: 'Dunkles Design aktivieren' },
-    pagination: {
-        rootLabel: 'Seitennavigation',
-        prevTriggerLabel: 'Vorherige Seite',
-        nextTriggerLabel: 'Nächste Seite',
-        itemLabel: (details: { page: number; totalPages: number }) => `Seite ${details.page} von ${details.totalPages}`,
-        summary: (range: { start: number; end: number; count: number }) =>
-            `${range.start}–${range.end} von ${range.count}`,
-        firstTriggerLabel: 'Erste Seite',
-        lastTriggerLabel: 'Letzte Seite',
-        /** Compact variant: the current page between the arrows */
-        compact: (page: number, totalPages: number) => `Seite ${page} von ${totalPages}`,
-        pageSize: 'Pro Seite',
-        jumper: 'Gehe zu Seite',
-    },
-    saveStatus: {
-        idle: '',
-        saving: 'Wird gespeichert …',
-        saved: 'Gespeichert',
-        error: 'Speichern fehlgeschlagen',
-    },
-    slider: { thumbs: ['Minimum', 'Maximum'] },
-    numberInput: { incrementLabel: 'Erhöhen', decrementLabel: 'Verringern' },
-    passwordInput: {
-        visibilityTrigger: (visible: boolean): string => (visible ? 'Passwort verbergen' : 'Passwort anzeigen'),
-    },
-    combobox: { triggerLabel: 'Vorschläge anzeigen', clearTriggerLabel: 'Eingabe löschen', search: 'Suchen …' },
-    datePicker: {
-        dayCell: (state: { valueText: string; selected: boolean; unavailable: boolean }) =>
-            state.unavailable
-                ? `Nicht verfügbar: ${state.valueText}`
-                : state.selected
-                  ? `Ausgewählt: ${state.valueText}`
-                  : state.valueText,
-        nextTrigger: (view: CalendarView) => next[view],
-        prevTrigger: (view: CalendarView) => previous[view],
-        viewTrigger: (_view: CalendarView, nextView: CalendarView | undefined) =>
-            nextView ? `${viewNames[nextView]} anzeigen` : 'Ansicht wechseln',
-        monthSelect: 'Monat wählen',
-        yearSelect: 'Jahr wählen',
-        clearTrigger: 'Datum löschen',
-        trigger: (open: boolean): string => (open ? 'Kalender schließen' : 'Kalender öffnen'),
-        content: 'Kalender',
-        placeholder: () => ({ year: 'JJJJ', month: 'MM', day: 'TT' }),
-        /** Name of the week column (its visible header is weekColumnShort) */
-        weekColumnHeader: 'Kalenderwoche',
-        weekColumnShort: 'KW',
-        weekNumberCell: (week: number) => `Kalenderwoche ${week}`,
-        presetTrigger: (value: string[]) => value.join(' – '),
-    },
-    /** Calendar extras: button bar, several chosen days, time zone */
-    calendar: {
-        today: 'Heute',
-        clear: 'Löschen',
-        /** Field of a DatePicker with selectionMode multiple */
-        noDates: 'Kein Datum gewählt',
-        datesSelected: { one: '{count} Tag ausgewählt', other: '{count} Tage ausgewählt' } as PluralForms,
-        timeZone: (name: string) => `Zeitzone: ${name}`,
-    },
-    quarterPicker: {
-        /** Text of a quarter in the field and on its button */
-        quarter: (quarter: number, year: number) => `Q${quarter} ${year}`,
-        /** Name of a quarter button: its text and the months */
-        quarterButton: (quarter: number, year: number, months: string) => `Q${quarter} ${year}, ${months}`,
-        trigger: 'Quartal wählen',
-        content: 'Quartale',
-        prevYear: 'Vorheriges Jahr',
-        nextYear: 'Nächstes Jahr',
-        clearTrigger: 'Quartal löschen',
-        placeholder: 'Q1 2026',
-    },
-    durationInput: {
-        clearTrigger: 'Dauer löschen',
-        days: 'Tage',
-        hours: 'Stunden',
-        minutes: 'Minuten',
-        seconds: 'Sekunden',
-    },
-    timeGrid: {
-        label: 'Freie Termine',
-        empty: 'Keine freien Termine',
-        loading: 'Termine werden geladen',
-        available: { one: '{count} freier Termin', other: '{count} freie Termine' } as PluralForms,
-    },
-    miniCalendar: {
-        label: 'Tage',
-        previous: 'Vorherige Tage',
-        next: 'Nächste Tage',
-    },
-    /** DateInput: placeholders of the parts and names of their spin buttons */
-    dateInput: {
-        placeholder: () => ({
-            day: 'TT',
-            month: 'MM',
-            year: 'JJJJ',
-            hour: 'hh',
-            minute: 'mm',
-            second: 'ss',
-            dayPeriod: '--',
-            era: '--',
-        }),
-    },
-    splitButton: { more: 'Weitere Aktionen' },
-    confirmPopup: { confirm: 'Ja', cancel: 'Abbrechen' },
-    passwordStrength: {
-        levels: ['Zu kurz', 'Schwach', 'Mittel', 'Gut', 'Stark'],
-        label: (level: string) => `Passwortstärke: ${level}`,
-    },
-    /** Field and text controls (Input, Textarea, PasswordInput, NumberInput …) */
-    field: { optional: 'optional', clear: 'Eingabe löschen' },
-    textarea: {
-        /** Visible counter */
-        counter: (length: number, max: number) => `${length} / ${max}`,
-        /** Announced after typing pauses */
-        remaining: (remaining: number, max: number) =>
-            remaining <= 0 ? `Höchstlänge von ${max} Zeichen erreicht` : `Noch ${remaining} von ${max} Zeichen`,
-    },
-    formErrorSummary: {
-        title: (count: number) =>
-            count === 1 ? 'Bitte korrigieren Sie 1 Angabe' : `Bitte korrigieren Sie ${count} Angaben`,
-    },
-    passwordRequirements: { label: 'Anforderungen an das Passwort', met: 'erfüllt', unmet: 'nicht erfüllt' },
-    dataView: {
-        layout: 'Ansicht',
-        list: 'Liste',
-        grid: 'Raster',
-        loadMore: 'Mehr laden',
-        /** Names the list of loading placeholders */
-        loading: 'Einträge werden geladen',
-        shown: (count: number, total: number) => `${count} von ${total} angezeigt`,
-    },
-    orderList: {
-        top: 'Ganz nach oben',
-        up: 'Nach oben',
-        down: 'Nach unten',
-        bottom: 'Ganz nach unten',
-        moved: (label: string, position: number, count: number) => `${label}: Position ${position} von ${count}`,
-    },
-    pickList: {
-        source: 'Verfügbar',
-        target: 'Ausgewählt',
-        add: 'Ausgewählte hinzufügen',
-        addAll: 'Alle hinzufügen',
-        remove: 'Ausgewählte entfernen',
-        removeAll: 'Alle entfernen',
-        moved: (count: number, target: string) =>
-            `${count === 1 ? '1 Eintrag' : `${count} Einträge`} nach „${target}“ verschoben`,
-        /** Search field of one list */
-        filter: (list: string) => `${list} durchsuchen`,
-        /** Drag and drop: where the dragged items go */
-        dropHint: (list: string) => `Hierher ziehen: ${list}`,
-    },
-    appShell: {
-        skipLink: 'Zum Inhalt springen',
-        openNavigation: 'Navigation öffnen',
-        navigation: 'Navigation',
-        collapseNavigation: 'Navigation einklappen',
-        expandNavigation: 'Navigation ausklappen',
-        resizeNavigation: 'Breite der Navigation ändern',
-        resizeAside: 'Breite der Seitenleiste ändern',
-    },
-    commandPalette: {
-        label: 'Befehle',
-        placeholder: 'Suchen oder Befehl eingeben …',
-        empty: 'Nichts gefunden',
-        navigate: 'auswählen',
-        run: 'ausführen',
-        close: 'schließen',
-    },
-    /** Option lists: Select, MultiSelect, Combobox, Listbox, TagsInput suggestions */
-    select: {
-        clear: 'Auswahl löschen',
-        filter: 'Optionen filtern',
-        selectAll: 'Alle auswählen',
-        removeItem: (label: string) => `${label} entfernen`,
-        removed: (label: string) => `${label} entfernt`,
-        maxReached: (max: number) => `Höchstens ${max} auswählbar`,
-        suggestions: 'Vorschläge',
-    },
-    /** Standalone Chip: name of the remove button */
-    chip: { remove: (label?: string): string => (label ? `${label} entfernen` : 'Entfernen') },
-    tagsInput: {
-        clearTriggerLabel: 'Alle entfernen',
-        deleteTagTriggerLabel: (value: string) => `${value} entfernen`,
-        tagAdded: (value: string) => `${value} hinzugefügt`,
-        tagsPasted: (values: string[]) => `${values.length} Einträge eingefügt`,
-        tagEdited: (value: string) => `${value} wird bearbeitet`,
-        tagUpdated: (value: string) => `${value} geändert`,
-        tagDeleted: (value: string) => `${value} entfernt`,
-        tagSelected: (value: string) => `${value} ausgewählt, Rücktaste zum Entfernen`,
-    },
-    navigationMenu: { rootLabel: 'Hauptnavigation' },
-    megaMenu: {
-        rootLabel: 'Hauptnavigation',
-        /** Menu button and drawer title on small screens */
-        menu: 'Menü',
-        /** Chevron button next to an entry that is a link itself */
-        submenu: (label: string) => `${label}: Untermenü`,
-        showAll: 'Alle anzeigen',
-        showAllOf: (title: string) => `Alle anzeigen: ${title}`,
-        /** Link of the featured area */
-        featuredLink: 'Mehr erfahren',
-        /** In the drawer: link to the page of an entry that also has a panel */
-        overview: (label: string) => `${label} – Übersicht`,
-    },
-    pageHeader: { back: 'Zurück' },
-    bottomNavigation: { label: 'Navigation' },
-    banner: { dismiss: 'Hinweis schließen' },
-    notificationCenter: {
-        label: 'Benachrichtigungen',
-        markAllRead: 'Alle als gelesen markieren',
-        markRead: 'Als gelesen markieren',
-        unread: 'Ungelesen',
-        unreadCount: (count: number | string) => `${count} ungelesen`,
-        empty: 'Keine Benachrichtigungen',
-        loadMore: 'Mehr laden',
-        older: 'Älter',
-        /** Polite announcement of new notifications */
-        announce: (count: number, title: string) =>
-            count === 1 ? `Neue Benachrichtigung: ${title}` : `${count} neue Benachrichtigungen`,
-    },
-    result: {
-        success: 'Erledigt',
-        info: 'Hinweis',
-        warn: 'Achtung',
-        error: 'Etwas ist schiefgelaufen',
-        '403': 'Kein Zugriff',
-        '404': 'Seite nicht gefunden',
-        '500': 'Serverfehler',
-        description403: 'Sie haben keine Berechtigung, diese Seite zu sehen.',
-        description404: 'Die Seite existiert nicht oder wurde verschoben.',
-        description500: 'Auf dem Server ist ein Fehler aufgetreten. Bitte versuchen Sie es später noch einmal.',
-    },
-    tour: {
-        nextStep: 'Weiter',
-        prevStep: 'Zurück',
-        close: 'Tour beenden',
-        skip: 'Überspringen',
-        done: 'Fertig',
-        progressText: (details: { current: number; total: number }) => `${details.current + 1} von ${details.total}`,
-    },
-    tableOfContents: { title: 'Auf dieser Seite' },
-    spoiler: { show: 'Mehr anzeigen', hide: 'Weniger anzeigen' },
-    navigationProgress: { label: 'Seite wird geladen' },
-    copyButton: { label: 'Kopieren', copied: 'In die Zwischenablage kopiert' },
-    actionBar: { label: 'Aktionen für die Auswahl', clear: 'Auswahl aufheben' },
-    heatmap: { less: 'Weniger', more: 'Mehr', empty: 'kein Wert' },
-    scheduler: {
-        /** React Native: accessibility actions that move an event (±slot, ±day) */
-        shift: (minutes: number, days: number) =>
-            days
-                ? `${Math.abs(days) === 1 ? '1 Tag' : `${Math.abs(days)} Tage`} ${days > 0 ? 'später' : 'früher'}`
-                : `${Math.abs(minutes)} Minuten ${minutes > 0 ? 'später' : 'früher'}`,
-        label: 'Kalender',
-        today: 'Heute',
-        previous: 'Zurück',
-        next: 'Weiter',
-        view: 'Ansicht',
-        views: {
-            day: 'Tag',
-            week: 'Woche',
-            month: 'Monat',
-            agenda: 'Liste',
-            timeline: 'Zeitachse',
-            year: 'Jahr',
-        } as Record<string, string>,
-        allDay: 'Ganztägig',
-        more: (count: number) => `+${count} weitere`,
-        newEvent: (date: string) => `Neuer Termin am ${date}`,
-        empty: 'Keine Termine',
-        changed: (title: string, when: string) => `${title}: ${when}`,
-        /** Resources */
-        resource: 'Ressource',
-        allResources: 'Alle Ressourcen',
-        previousResources: 'Vorherige Ressourcen',
-        nextResources: 'Nächste Ressourcen',
-        resourceRange: (from: number, to: number, count: number) => `Ressourcen ${from}–${to} von ${count}`,
-        resourceFilter: 'Ressource',
-        newEventFor: (resource: string, date: string) => `Neuer Termin für ${resource} am ${date}`,
-        /** Timeline */
-        range: 'Zeitraum',
-        ranges: { day: 'Tag', week: 'Woche', month: 'Monat' } as Record<string, string>,
-        zoomIn: 'Vergrößern',
-        zoomOut: 'Verkleinern',
-        /** Series */
-        series: 'Serientermin',
-        seriesTitle: 'Serientermin ändern',
-        seriesQuestion: (title: string) => `„${title}“ gehört zu einer Serie. Was soll sich ändern?`,
-        onlyThis: 'Nur dieser Termin',
-        allInSeries: 'Alle Termine der Serie',
-        /** Rules for dropping */
-        rejected: (title: string, reason: string) => `${title} lässt sich hier nicht ablegen: ${reason}`,
-        notAllowed: 'nicht erlaubt',
-        overlaps: (title: string) => `überschneidet sich mit ${title}`,
-        /** Year view and "+N more" */
-        eventCount: { one: '{count} Termin', other: '{count} Termine' } as PluralForms,
-        closed: 'Außerhalb der Geschäftszeiten',
-        loading: 'Termine werden geladen',
-        loaded: { one: '{count} Termin geladen', other: '{count} Termine geladen' } as PluralForms,
-        error: 'Die Termine konnten nicht geladen werden.',
-        retry: 'Erneut versuchen',
-    },
-    recurrence: {
-        DAILY: { one: 'Täglich', other: 'Alle {count} Tage' } as PluralForms,
-        WEEKLY: { one: 'Wöchentlich', other: 'Alle {count} Wochen' } as PluralForms,
-        MONTHLY: { one: 'Monatlich', other: 'Alle {count} Monate' } as PluralForms,
-        YEARLY: { one: 'Jährlich', other: 'Alle {count} Jahre' } as PluralForms,
-        on: (what: string) => `am ${what}`,
-        /** "2. Montag", "letzten Freitag" */
-        nthWeekday: (nth: number, weekday: string) =>
-            nth === -1 ? `letzten ${weekday}` : nth < 0 ? `${-nth}.-letzten ${weekday}` : `${nth}. ${weekday}`,
-        /** Monthly by position: "Jeden 2. Montag im Monat" */
-        monthlyNth: (what: string) => `Jeden ${what} im Monat`,
-        /** Day of the month: "15.", "letzten Tag" */
-        monthDay: (day: number) => (day === -1 ? 'letzten Tag' : day < 0 ? `${-day}.-letzten Tag` : `${day}.`),
-        /** Yearly: "2. Montag im Mai", "24. Dezember" */
-        inMonth: (what: string, month: string) => `${what} im ${month}`,
-        dayOfMonth: (day: string, month: string) => `${day} ${month}`,
-        times: { one: 'einmal', other: '{count} Mal' } as PluralForms,
-        until: (date: string) => `bis ${date}`,
-    },
-    gantt: {
-        label: 'Projektplan',
-        task: 'Aufgabe',
-        start: 'Start',
-        end: 'Ende',
-        duration: 'Dauer',
-        days: { one: '{count} Tag', other: '{count} Tage' } as PluralForms,
-        milestone: 'Meilenstein',
-        group: 'Gruppe',
-        progress: (percent: number) => `${percent} % erledigt`,
-        dependsOn: (names: string) => `hängt ab von ${names}`,
-        critical: 'kritischer Pfad',
-        zoom: 'Zoom',
-        zooms: { day: 'Tag', week: 'Woche', month: 'Monat', quarter: 'Quartal' } as Record<string, string>,
-        today: 'Heute',
-        week: (week: number) => `KW ${week}`,
-        quarter: (quarter: number) => `Q${quarter}`,
-        changed: (name: string, when: string) => `${name}: ${when}`,
-        progressChanged: (name: string, percent: number) => `${name}: ${percent} % erledigt`,
-        linked: (from: string, to: string) => `${to} hängt jetzt von ${from} ab`,
-        addDependency: 'Abhängigkeit hinzufügen…',
-        dependencyTitle: (name: string) => `Vorgänger von „${name}“`,
-        predecessor: 'Vorgänger',
-        noPredecessor: 'Keine Aufgabe möglich',
-        addDependencyConfirm: 'Hinzufügen',
-        empty: 'Keine Aufgaben',
-    },
-    codeHighlight: {
-        copy: 'Code kopieren',
-        showMore: 'Gesamten Code anzeigen',
-        showLess: 'Code einklappen',
-        wrap: 'Zeilen umbrechen',
-        files: 'Dateien',
-        added: 'hinzugefügt',
-        removed: 'entfernt',
-    },
-    pdfViewer: {
-        label: 'PDF-Dokument',
-        toolbar: 'PDF-Werkzeuge',
-        pages: 'Seiten des Dokuments',
-        sidebar: 'Seitenleiste',
-        thumbnails: 'Seiten',
-        outline: 'Inhalt',
-        noOutline: 'Kein Inhaltsverzeichnis',
-        pageLabel: (page: number) => `Seite ${page}`,
-        page: 'Seite',
-        ofPages: (count: number) => `von ${count}`,
-        pageStatus: (page: number, count: number) => `Seite ${page} von ${count}`,
-        previousPage: 'Vorherige Seite',
-        nextPage: 'Nächste Seite',
-        zoom: 'Zoom',
-        zoomIn: 'Vergrößern',
-        zoomOut: 'Verkleinern',
-        pageWidth: 'Seitenbreite',
-        pageFit: 'Ganze Seite',
-        rotate: 'Im Uhrzeigersinn drehen',
-        search: 'Suchen',
-        searchField: 'Im Dokument suchen',
-        matchCase: 'Groß-/Kleinschreibung beachten',
-        previousMatch: 'Vorheriger Treffer',
-        nextMatch: 'Nächster Treffer',
-        closeSearch: 'Suche schließen',
-        matches: (current: number, total: number) => `Treffer ${current} von ${total}`,
-        noMatches: 'Keine Treffer',
-        searching: 'Wird gesucht …',
-        wrappedTop: 'weiter am Ende',
-        wrappedBottom: 'weiter am Anfang',
-        download: 'Herunterladen',
-        print: 'Drucken',
-        printing: (page: number, count: number) => `Druck wird vorbereitet: Seite ${page} von ${count}`,
-        fullscreen: 'Vollbild',
-        loading: 'PDF wird geladen',
-        loaded: (count: number) => (count === 1 ? 'PDF geladen, 1 Seite' : `PDF geladen, ${count} Seiten`),
-        error: 'Das PDF konnte nicht geladen werden.',
-        invalid: 'Die Datei ist kein gültiges PDF oder beschädigt.',
-        missing: 'Das PDF wurde nicht gefunden.',
-        passwordTitle: 'Geschütztes PDF',
-        passwordDescription: 'Geben Sie das Passwort ein, um das Dokument zu öffnen.',
-        passwordLabel: 'Passwort',
-        passwordWrong: 'Das Passwort ist falsch. Bitte erneut versuchen.',
-        passwordSubmit: 'Öffnen',
-        passwordRequired: 'Ohne Passwort lässt sich das PDF nicht öffnen.',
-        fileName: 'dokument.pdf',
-        /** React Native: share or open the file; the web has no viewer for react-native-pdf */
-        share: 'Teilen',
-        unsupported: 'Die PDF-Ansicht gibt es nur in der App (iOS und Android).',
-    },
-    compare: {
-        label: 'Vorher-Nachher-Vergleich',
-        before: 'Vorher',
-        after: 'Nachher',
-        valueText: (percent: number) => `${percent} % vorher, ${100 - percent} % nachher`,
-    },
-    sankey: { source: 'Von', target: 'Nach', value: 'Wert' },
-    treemap: { share: (value: string, percent: string) => `${value} · ${percent}` },
-    countdown: {
-        days: (count: number): string => (count === 1 ? 'Tag' : 'Tage'),
-        hours: (count: number): string => (count === 1 ? 'Stunde' : 'Stunden'),
-        minutes: (count: number): string => (count === 1 ? 'Minute' : 'Minuten'),
-        seconds: (count: number): string => (count === 1 ? 'Sekunde' : 'Sekunden'),
-    },
-    rangePresets: {
-        thisWeek: 'Diese Woche',
-        lastWeek: 'Letzte Woche',
-        thisMonth: 'Dieser Monat',
-        lastMonth: 'Letzter Monat',
-        thisQuarter: 'Dieses Quartal',
-        lastQuarter: 'Letztes Quartal',
-        thisYear: 'Dieses Jahr',
-        lastYear: 'Letztes Jahr',
-        last3Days: 'Letzte 3 Tage',
-        last7Days: 'Letzte 7 Tage',
-        last14Days: 'Letzte 14 Tage',
-        last30Days: 'Letzte 30 Tage',
-        last90Days: 'Letzte 90 Tage',
-        last3Months: 'Letzte 3 Monate',
-        last6Months: 'Letzte 6 Monate',
-        last12Months: 'Letzte 12 Monate',
-        last4Quarters: 'Letzte 4 Quartale',
-        last3Years: 'Letzte 3 Jahre',
-        last5Years: 'Letzte 5 Jahre',
-    } as Record<string, string>,
-    splitter: { resize: (panel: string) => `Größe von „${panel}“ ändern` },
-    image: {
-        preview: (alt: string) => `Vergrößert anzeigen: ${alt}`,
-        zoomIn: 'Vergrößern',
-        zoomOut: 'Verkleinern',
-        rotate: 'Drehen',
-        close: 'Schließen',
-    },
-    inplace: { edit: 'bearbeiten' },
-    scrollTop: { label: 'Nach oben' },
-    blockUi: { label: 'Wird geladen' },
-    speedDial: { label: 'Aktionen' },
-    stepper: {
-        prev: 'Zurück',
-        next: 'Weiter',
-        finish: 'Abschließen',
-        /** React Native: status of a step and the progress */
-        status: { done: 'abgeschlossen', active: 'aktueller Schritt', todo: 'offen' } as Record<string, string>,
-        progress: (step: number, count: number) => `Schritt ${step} von ${count}`,
-    },
-    dataTable: {
-        row: (index: number) => `Zeile ${index + 1}`,
-        selectAll: 'Alle Zeilen dieser Seite auswählen',
-        selectRow: (row: string) => `${row} auswählen`,
-        subRows: (row: string) => `Unterzeilen von ${row}`,
-        search: (caption: string) => `${caption} durchsuchen`,
-        searchPlaceholder: 'Suchen …',
-        filter: (header: string) => `${header} filtern`,
-        filterAll: 'Alle',
-        columns: 'Spalten',
-        export: 'Exportieren (CSV)',
-        resize: (header: string) => `Breite von ${header}`,
-        edit: (header: string, value: string) => `${value || 'leer'}, ${header} bearbeiten`,
-        results: (count: number) => (count === 1 ? '1 Eintrag' : `${count} Einträge`),
-        group: (header: string, value: string, count: number) => `${header}: ${value}, ${count} Einträge`,
-        matchModes: {
-            startsWith: 'Beginnt mit',
-            contains: 'Enthält',
-            notContains: 'Enthält nicht',
-            endsWith: 'Endet mit',
-            equals: 'Ist gleich',
-            notEquals: 'Ist nicht gleich',
-            lt: 'Kleiner als',
-            lte: 'Kleiner oder gleich',
-            gt: 'Größer als',
-            gte: 'Größer oder gleich',
-            between: 'Zwischen',
-            in: 'Ist eins von',
-            dateIs: 'Am',
-            dateIsNot: 'Nicht am',
-            dateBefore: 'Vor',
-            dateAfter: 'Nach',
-        } as Record<string, string>,
-        operator: 'Verknüpfung',
-        matchAll: 'Alle Bedingungen erfüllt',
-        matchAny: 'Eine Bedingung erfüllt',
-        matchMode: (index: number) => `Bedingung ${index + 1}`,
-        value: (index: number) => `Wert ${index + 1}`,
-        from: 'Von',
-        to: 'Bis',
-        addRule: 'Bedingung hinzufügen',
-        removeRule: (index: number) => `Bedingung ${index + 1} entfernen`,
-        apply: 'Anwenden',
-        clear: 'Zurücksetzen',
-        filterMenu: (header: string, active: boolean) =>
-            active ? `Filter für ${header}, aktiv` : `Filter für ${header}`,
-        yes: 'Ja',
-        no: 'Nein',
-        columnMenu: (header: string) => `Optionen für ${header}`,
-        sortAscending: 'Aufsteigend sortieren',
-        sortDescending: 'Absteigend sortieren',
-        clearSort: 'Sortierung entfernen',
-        /** React Native: sheets for sorting and the column filters */
-        sortBy: 'Sortieren',
-        filters: 'Filter',
-        sortPriority: (position: number, desc: boolean) =>
-            `${position}. Sortierung, ${desc ? 'absteigend' : 'aufsteigend'}`,
-        pinStart: 'Am Anfang fixieren',
-        pinEnd: 'Am Ende fixieren',
-        unpin: 'Nicht mehr fixieren',
-        moveEarlier: 'Eine Spalte nach vorne',
-        moveLater: 'Eine Spalte nach hinten',
-        hideColumn: 'Ausblenden',
-        groupBy: 'Nach dieser Spalte gruppieren',
-        ungroup: 'Gruppierung aufheben',
-        columnMoved: (header: string, position: number, count: number) =>
-            `${header} ist jetzt Spalte ${position} von ${count}`,
-        density: 'Zeilenhöhe',
-        densities: { sm: 'Kompakt', md: 'Normal', lg: 'Großzügig' },
-        fullscreen: 'Vollbild',
-        exitFullscreen: 'Vollbild beenden',
-        rowNumber: 'Nr.',
-        expandAll: 'Alle Zeilen aufklappen',
-        collapseAll: 'Alle Zeilen zuklappen',
-        details: (row: string) => `Details zu ${row}`,
-        actions: 'Aktionen',
-        rowActions: (row: string) => `Aktionen für ${row}`,
-        moveRow: (row: string) => `${row} verschieben`,
-        rowMoved: (row: string, position: number, count: number) =>
-            `${row} ist jetzt an Position ${position} von ${count}`,
-        editRow: (row: string) => `${row} bearbeiten`,
-        saveRow: (row: string) => `${row} speichern`,
-        cancelEdit: (row: string) => `Bearbeiten von ${row} abbrechen`,
-        rowsPerPage: 'Zeilen pro Seite',
-        exportAll: 'Alle Zeilen',
-        exportSelection: 'Ausgewählte Zeilen',
-        filterToggle: 'Filter anzeigen',
-        rowCount: (count: number) => (count === 1 ? '1 Zeile' : `${count} Zeilen`),
-        filteredCount: (count: number) => `${count} gefiltert`,
-        copy: (header: string, value: string) => `${value}, ${header} kopieren`,
-        selectAllRows: 'Alle Zeilen auswählen',
-        select: 'Auswahl',
-        reorder: 'Reihenfolge',
-        footer: 'Summenzeile',
-        aggregates: {
-            sum: (value: string) => `Summe ${value}`,
-            avg: (value: string) => `Ø ${value}`,
-            min: (value: string) => `Min. ${value}`,
-            max: (value: string) => `Max. ${value}`,
-            count: (value: string) => `Anzahl ${value}`,
-        } as Record<string, (value: string) => string>,
-        exportMenu: 'Exportieren',
-        exportXlsx: 'Exportieren (Excel)',
-        exportAs: (format: 'csv' | 'xlsx', selection: boolean) =>
-            `${selection ? 'Ausgewählte Zeilen' : 'Alle Zeilen'} als ${format === 'xlsx' ? 'Excel' : 'CSV'}`,
-        cellsCopied: (count: number) => (count === 1 ? '1 Zelle kopiert' : `${count} Zellen kopiert`),
-        cellsPasted: (count: number, invalid: number) =>
-            `${count === 1 ? '1 Zelle' : `${count} Zellen`} eingefügt${invalid ? `, ${invalid} ungültig` : ''}`,
-        pasteErrors: {
-            number: 'Keine Zahl',
-            date: 'Kein Datum',
-            option: 'Keine der Auswahlmöglichkeiten',
-            boolean: 'Weder Ja noch Nein',
-            readonly: 'Nicht bearbeitbar',
-        } as Record<string, string>,
-        changes: (count: number) => (count === 1 ? '1 Änderung' : `${count} Änderungen`),
-        changed: 'geändert',
-        saveChanges: 'Speichern',
-        discardChanges: 'Verwerfen',
-        changesSaved: (count: number) => (count === 1 ? '1 Änderung gespeichert' : `${count} Änderungen gespeichert`),
-        changesDiscarded: 'Änderungen verworfen',
-        undo: 'Rückgängig',
-        redo: 'Wiederholen',
-        undone: (count: number) => (count === 1 ? '1 Zelle zurückgesetzt' : `${count} Zellen zurückgesetzt`),
-        redone: (count: number) => (count === 1 ? '1 Zelle wiederhergestellt' : `${count} Zellen wiederhergestellt`),
-        rowMovedToGroup: (row: string, group: string, position: number, count: number) =>
-            `${row} ist jetzt in ${group}, Position ${position} von ${count}`,
-        rowMovedInTree: (row: string, parent: string | null, position: number, count: number) =>
-            `${row} verschoben${parent ? ` nach ${parent}` : ''}, Position ${position} von ${count}`,
-        find: 'In Tabelle suchen',
-        findMatches: (current: number, total: number) => (total ? `Treffer ${current} von ${total}` : 'Keine Treffer'),
-        findNext: 'Nächster Treffer',
-        findPrevious: 'Vorheriger Treffer',
-        findClose: 'Suche schließen',
-        total: 'Gesamt',
-        columnGroupEarlier: (header: string) => `${header} nach vorne`,
-        columnGroupLater: (header: string) => `${header} nach hinten`,
-    },
-    dataSource: {
-        loading: 'Wird geladen',
-        loaded: { one: '{count} Eintrag geladen', other: '{count} Einträge geladen' } as PluralForms,
-        empty: 'Keine Einträge gefunden',
-        error: 'Die Daten konnten nicht geladen werden.',
-        retry: 'Erneut versuchen',
-        minSearch: (count: number) => `Bitte mindestens ${count} Zeichen eingeben`,
-        /** Button at the end of a growing list */
-        loadMore: 'Mehr laden',
-        loadingMore: 'Weitere Einträge werden geladen',
-    },
-    dateRange: {
-        start: 'Beginn',
-        end: 'Ende',
-        clearTrigger: 'Zeitraum löschen',
-    },
-    timePicker: {
-        trigger: 'Uhrzeit wählen',
-        clearTrigger: 'Uhrzeit löschen',
-        /** TimeRangePicker */
-        clearRange: 'Uhrzeiten löschen',
-    },
-    dateSegments: {
-        day: 'Tag',
-        month: 'Monat',
-        year: 'Jahr',
-        hour: 'Stunde',
-        minute: 'Minute',
-        second: 'Sekunde',
-        dayPeriod: 'Tageszeit',
-    } as Record<string, string>,
-    pinInput: { inputLabel: (index: number, length: number) => `Stelle ${index + 1} von ${length}` },
-    rating: { ratingValueText: (index: number) => (index === 1 ? '1 Stern' : `${index} Sterne`) },
-    carousel: {
-        nextTrigger: 'Nächstes Bild',
-        prevTrigger: 'Vorheriges Bild',
-        indicator: (index: number) => `Bild ${index + 1} zeigen`,
-        item: (index: number, count: number) => `Bild ${index + 1} von ${count}`,
-        autoplayStart: 'Automatisch abspielen',
-        autoplayStop: 'Abspielen anhalten',
-        progressText: (details: { page: number; totalPages: number }) => `${details.page + 1} / ${details.totalPages}`,
-    },
-    chart: {
-        showTable: 'Daten als Tabelle',
-        /** Header of the label column */
-        category: 'Kategorie',
-        sparkline: (label: string, first: string, last: string, min: string, max: string) =>
-            `${label}: von ${first} auf ${last}, Tiefstwert ${min}, Höchstwert ${max}`,
-        /** Column of a dataset without label */
-        series: (index: number) => `Reihe ${index + 1}`,
-        /** Waterfall: a step and the running sum */
-        change: 'Veränderung',
-        total: 'Summe',
-        /** Brush: the shown range */
-        brush: 'Ausschnitt',
-        brushThumbs: ['Beginn', 'Ende'],
-        legend: 'Legende',
-        share: 'Anteil',
-        value: 'Wert',
-        references: 'Referenzwerte',
-        /** Funnel: stage and conversion */
-        stage: 'Schritt',
-        conversion: 'Umwandlung',
-        fromPrevious: (percent: string) => `${percent} vom vorherigen Schritt`,
-        /** Bullet chart: value, maximum and target */
-        target: 'Ziel',
-        bulletValue: (value: string, max: string, target?: string) =>
-            target ? `${value} von ${max}, Ziel ${target}` : `${value} von ${max}`,
-    },
-    editor: {
-        toolbar: 'Formatierung',
-        bold: 'Fett',
-        italic: 'Kursiv',
-        underline: 'Unterstrichen',
-        strike: 'Durchgestrichen',
-        heading2: 'Überschrift',
-        heading3: 'Zwischenüberschrift',
-        bulletList: 'Aufzählung',
-        orderedList: 'Nummerierte Liste',
-        blockquote: 'Zitat',
-        code: 'Code',
-        link: 'Link',
-        undo: 'Rückgängig',
-        redo: 'Wiederholen',
-        linkUrl: 'Linkadresse',
-        linkApply: 'Übernehmen',
-        linkRemove: 'Link entfernen',
-        linkCancel: 'Abbrechen',
-        taskList: 'Aufgabenliste',
-        codeBlock: 'Codeblock',
-        horizontalRule: 'Trennlinie',
-        image: 'Bild',
-        imageUrl: 'Bildadresse',
-        imageAlt: 'Alternativtext',
-        imageDecorative: 'Nur Schmuck (ohne Alternativtext)',
-        imageUpload: 'Datei wählen',
-        imageInsert: 'Einfügen',
-        imageUpdate: 'Übernehmen',
-        table: 'Tabelle',
-        tableBar: 'Tabelle bearbeiten',
-        tableActions: {
-            insertTable: 'Tabelle einfügen',
-            addRowBefore: 'Zeile darüber',
-            addRowAfter: 'Zeile darunter',
-            addColumnBefore: 'Spalte davor',
-            addColumnAfter: 'Spalte danach',
-            deleteRow: 'Zeile löschen',
-            deleteColumn: 'Spalte löschen',
-            toggleHeaderRow: 'Kopfzeile ein/aus',
-            mergeOrSplit: 'Zellen verbinden/teilen',
-            deleteTable: 'Tabelle löschen',
-        } as Record<string, string>,
-        taskItem: (text: string, checked: boolean) => `${text || 'Leere Aufgabe'}, ${checked ? 'erledigt' : 'offen'}`,
-        shortcut: (letter: string, shift: boolean) => `Strg+${shift ? 'Umschalt+' : ''}${letter}`,
-        alignLeft: 'Linksbündig',
-        alignCenter: 'Zentriert',
-        alignRight: 'Rechtsbündig',
-        alignJustify: 'Blocksatz',
-        textColor: 'Textfarbe',
-        backgroundColor: 'Hintergrundfarbe',
-        colorDefault: 'Standard',
-        colors: {
-            primary: 'Akzent',
-            info: 'Info',
-            success: 'Erfolg',
-            warn: 'Warnung',
-            danger: 'Fehler',
-            muted: 'Gedämpft',
-        } as Record<string, string>,
-        subscript: 'Tiefgestellt',
-        superscript: 'Hochgestellt',
-        source: 'HTML-Quelltext',
-        sourceField: 'HTML-Quelltext bearbeiten',
-        details: 'Aufklappbarer Abschnitt',
-        detailsToggle: (open: boolean): string => (open ? 'Abschnitt zuklappen' : 'Abschnitt aufklappen'),
-        invisibleCharacters: 'Unsichtbare Zeichen',
-        tableOfContents: 'Inhaltsverzeichnis',
-        characters: (count: number, limit?: number) =>
-            limit === undefined ? `${count} Zeichen` : `${count} von ${limit} Zeichen`,
-        words: (count: number) => (count === 1 ? '1 Wort' : `${count} Wörter`),
-        limitReached: 'Höchstlänge erreicht',
-        imageUploading: 'Bild wird hochgeladen …',
-        imageUploaded: 'Bild eingefügt',
-        imageFailed: 'Das Bild konnte nicht hochgeladen werden',
-        bubbleMenu: 'Auswahl formatieren',
-        floatingMenu: 'Block einfügen',
-        menuHint: 'Alt+F10: Menü',
-        suggestions: 'Vorschläge',
-        noSuggestions: 'Keine Treffer',
-        suggestionCount: (count: number) => (count === 1 ? '1 Vorschlag' : `${count} Vorschläge`),
-        mentioned: (label: string) => `${label} erwähnt`,
-    },
-    gallery: {
-        fullscreen: 'Vollbild',
-        close: 'Vollbild schließen',
-        thumbnails: 'Vorschaubilder',
-        thumbnail: (index: number, count: number) => `Bild ${index + 1} von ${count} zeigen`,
-        /** Lightbox toolbar (fullscreen view) */
-        toolbar: 'Bildwerkzeuge',
-        zoomIn: 'Vergrößern',
-        zoomOut: 'Verkleinern',
-        resetZoom: 'Originalgröße',
-        rotate: 'Drehen',
-        download: 'Herunterladen',
-        screen: 'Bildschirmfüllend',
-        exitScreen: 'Bildschirmfüllend beenden',
-        zoom: (percent: number) => `Zoom ${percent} %`,
-        /** Keyboard help of the lightbox */
-        shortcuts: 'Pfeiltasten: Bild wechseln · + und −: Zoom · 0: Originalgröße · R: Drehen · F: Bildschirmfüllend',
-        video: 'Video',
-    },
-    /** Ark names the colour picker parts in English and has no translations for them */
-    colorPicker: {
-        trigger: (color: string) => `Farbe wählen, aktuell ${color}`,
-        /** Name of the trigger without a Field or aria-label */
-        name: 'Farbe',
-        area: 'Sättigung und Helligkeit',
-        hue: 'Farbton',
-        alpha: 'Deckkraft',
-        hex: 'Hex-Wert',
-        swatch: (color: string) => `${color} wählen`,
-        /** ColorInput: the swatch button that opens the picker */
-        open: 'Farbwähler öffnen',
-        eyeDropper: 'Farbe vom Bildschirm aufnehmen',
-        format: 'Format',
-        formats: { rgb: 'RGB', hsl: 'HSL', hsb: 'HSB', oklch: 'OKLCH' } as Record<string, string>,
-        /** Names of the channel fields per format */
-        channels: {
-            rgb: ['Rot', 'Grün', 'Blau'],
-            hsl: ['Farbton', 'Sättigung', 'Helligkeit'],
-            hsb: ['Farbton', 'Sättigung', 'Hellwert'],
-            oklch: ['Helligkeit', 'Buntheit', 'Farbton'],
-        } as Record<string, string[]>,
-        palette: 'Farben',
-    },
-    tree: {
-        treeLabel: 'Baum',
-        moved: (label: string, parent: string | null, position: number, count: number) =>
-            `${label} verschoben${parent ? ` nach ${parent}` : ''}, Position ${position} von ${count}`,
-        /** Row below a branch while its children load */
-        loadingRow: 'Wird geladen …',
-        loadingNode: (label: string) => `${label}: Wird geladen`,
-        loadedNode: {
-            one: '{label}: {count} Eintrag geladen',
-            other: '{label}: {count} Einträge geladen',
-        } as PluralForms,
-        loadError: (label: string) => `${label} konnte nicht geladen werden`,
-        /** Row below a branch whose children failed to load; activating it loads again */
-        retry: 'Laden fehlgeschlagen – erneut versuchen',
-        filter: 'Baum durchsuchen',
-        matches: { one: '{count} Treffer', other: '{count} Treffer' } as PluralForms,
-        noMatches: 'Keine Treffer',
-        expandAll: 'Alle aufklappen',
-        collapseAll: 'Alle zuklappen',
-        cut: (label: string) => `${label} ausgeschnitten – mit Strg+V an einem anderen Knoten einfügen`,
-        cutCancelled: 'Ausschneiden abgebrochen',
-        dropDenied: 'Hier nicht möglich',
-    },
-    treeSelect: {
-        search: 'Suchen',
-        /** Chip for the selected nodes beyond `maxShown` */
-        more: (count: number) => `+${count}`,
-        moreLabel: (count: number) => `${count} weitere ausgewählt`,
-    },
-    cascadeSelect: {
-        search: 'Suchen',
-        /** Button next to the search field that opens the levels */
-        showLevels: 'Ebenen anzeigen',
-        /** First entry of a level with `changeOnSelect`: chooses the level itself */
-        choose: (label: string) => `${label} wählen`,
-        /** A hit of the search: the whole path */
-        path: (labels: string[]) => labels.join(' › '),
-    },
-    timeline: {
-        loadMore: 'Ältere Einträge laden',
-        loading: 'Ältere Einträge werden geladen',
-    },
-    orgChart: {
-        expand: (label: string) => `Team von ${label} anzeigen`,
-        collapse: (label: string) => `Team von ${label} ausblenden`,
-        loading: (label: string) => `${label}: Wird geladen`,
-        retry: (label: string) => `${label}: Laden fehlgeschlagen – erneut versuchen`,
-    },
-    fileUpload: {
-        dropzone: 'Dateien ablegen',
-        itemPreview: (file: File) => `Vorschau von ${file.name}`,
-        deleteFile: (file: File) => `${file.name} entfernen`,
-        dropzoneText: (multiple: boolean): string =>
-            multiple ? 'Dateien hierher ziehen oder' : 'Datei hierher ziehen oder',
-        trigger: (multiple: boolean): string => (multiple ? 'Dateien auswählen' : 'Datei auswählen'),
-        /** Messages for rejected files (Ark FileUpload error codes) */
-        errors: {
-            TOO_MANY_FILES: 'Zu viele Dateien',
-            FILE_INVALID_TYPE: 'Dateityp nicht erlaubt',
-            FILE_TOO_LARGE: 'Datei ist zu groß',
-            FILE_TOO_SMALL: 'Datei ist zu klein',
-            FILE_INVALID: 'Datei ist ungültig',
-            FILE_EXISTS: 'Datei ist schon ausgewählt',
-        } as Record<string, string>,
-        upload: 'Hochladen',
-        uploadAll: 'Alle hochladen',
-        cancel: (file: File) => `Hochladen von ${file.name} abbrechen`,
-        retry: (file: File) => `${file.name} erneut hochladen`,
-        progress: (file: File) => `Fortschritt von ${file.name}`,
-        status: {
-            pending: 'Bereit zum Hochladen',
-            uploading: (percent: number) => `Wird hochgeladen … ${percent} %`,
-            done: 'Hochgeladen',
-            error: 'Hochladen fehlgeschlagen',
-            cancelled: 'Abgebrochen',
-        },
-        /** Announced when an upload ends */
-        uploaded: (file: File) => `${file.name} hochgeladen`,
-        failed: (file: File) => `${file.name} konnte nicht hochgeladen werden`,
-        dropAccept: (multiple: boolean): string =>
-            multiple ? 'Loslassen, um die Dateien hinzuzufügen' : 'Loslassen, um die Datei hinzuzufügen',
-        dropReject: 'Diese Dateien sind hier nicht erlaubt',
-        fullscreen: 'Dateien irgendwo ablegen',
-        /** React Native: where FileUpload takes files from (the pickers of the app) */
-        sources: { documents: 'Dokument wählen', photos: 'Aus Fotos wählen', camera: 'Foto aufnehmen' },
-        pasted: (count: number) => (count === 1 ? '1 Datei eingefügt' : `${count} Dateien eingefügt`),
-    },
-    statistic: { loading: 'Wird geladen' },
-    truncate: { more: 'Mehr anzeigen', less: 'Weniger anzeigen' },
-    overflowList: {
-        /** Hidden part of the "+N" button's name (after the visible "+N") */
-        more: 'weitere',
-        title: 'Weitere Einträge',
-    },
-    toggletip: {
-        label: 'Weitere Informationen',
-        labelFor: (label: string) => `Weitere Informationen zu ${label}`,
-    },
-    checkboxGroup: { maxReached: (max: number) => `Höchstens ${max} auswählbar` },
-    skipLinks: { label: 'Sprunglinks' },
-    hotkeys: {
-        /** Key names for the display (Kbd `hotkey`, HotkeysDialog); Apple devices show symbols */
-        keys: {
-            ctrl: 'Strg',
-            alt: 'Alt',
-            shift: 'Umschalt',
-            meta: 'Win',
-            space: 'Leertaste',
-            enter: 'Eingabe',
-            escape: 'Esc',
-            backspace: 'Rücktaste',
-            delete: 'Entf',
-            tab: 'Tab',
-        },
-        /** Between the steps of a sequence ("G dann I") */
-        then: 'dann',
-        title: 'Tastenkürzel',
-        description: 'Alle Tastenkürzel dieser Seite',
-        empty: 'Keine Tastenkürzel',
-        /** Description of the "?" shortcut */
-        open: 'Tastenkürzel anzeigen',
-        /** Group of shortcuts without their own */
-        general: 'Allgemein',
-        /** Description of the CommandPalette's shortcut */
-        commandPalette: 'Befehle öffnen',
-    },
-    persona: {
-        presence: { online: 'Online', away: 'Abwesend', busy: 'Beschäftigt', offline: 'Offline' } as Record<
-            string,
-            string
-        >,
-    },
-    inlineEdit: {
-        edit: 'bearbeiten',
-        save: 'Speichern',
-        cancel: 'Abbrechen',
-        empty: 'Leer',
-        saving: 'Wird gespeichert …',
-        /** Title of the popover */
-        title: (label: string) => `${label} bearbeiten`,
-    },
-    searchField: { label: 'Suche', placeholder: 'Suchen …', clear: 'Suche löschen', scope: 'Suchbereich' },
-    filterPanel: {
-        label: 'Filter',
-        toggle: 'Filter',
-        /** Hidden part of the toggle's name after the visible count */
-        active: 'aktiv',
-        status: (count: number) =>
-            count === 0 ? 'Keine Filter aktiv' : count === 1 ? '1 Filter aktiv' : `${count} Filter aktiv`,
-    },
-    filterChips: {
-        label: 'Aktive Filter',
-        remove: (label: string) => `Filter ${label} entfernen`,
-        reset: 'Alle zurücksetzen',
-    },
-    conditionBuilder: {
-        label: 'Bedingungen',
-        combinator: 'Verknüpfung',
-        and: 'Und',
-        or: 'Oder',
-        all: 'Alle Bedingungen erfüllt',
-        any: 'Eine Bedingung erfüllt',
-        not: 'Nicht',
-        group: (path: string) => `Gruppe ${path}`,
-        rule: (path: string) => `Bedingung ${path}`,
-        addRule: 'Bedingung hinzufügen',
-        addGroup: 'Gruppe hinzufügen',
-        removeRule: (path: string) => `Bedingung ${path} entfernen`,
-        removeGroup: (path: string) => `Gruppe ${path} entfernen`,
-        field: 'Feld',
-        operator: 'Operator',
-        value: 'Wert',
-        from: 'Von',
-        to: 'Bis',
-        yes: 'Ja',
-        no: 'Nein',
-        empty: 'Keine Bedingungen – alle Einträge passen',
-        /** Operators beyond the DataTable match modes */
-        operators: { empty: 'Ist leer', notEmpty: 'Ist nicht leer', in: 'Ist eins von' } as Record<string, string>,
-        added: 'Bedingung hinzugefügt',
-        groupAdded: 'Gruppe hinzugefügt',
-        removed: 'Bedingung entfernt',
-        groupRemoved: 'Gruppe entfernt',
-        /** The DataTable's toggle */
-        advanced: 'Erweiterter Filter',
-    },
-    formList: {
-        add: 'Eintrag hinzufügen',
-        item: (position: number) => `Eintrag ${position}`,
-        remove: (item: string) => `${item} entfernen`,
-        moveUp: (item: string) => `${item} nach oben`,
-        moveDown: (item: string) => `${item} nach unten`,
-        added: (item: string) => `${item} hinzugefügt`,
-        removed: (item: string) => `${item} entfernt`,
-        moved: (item: string, position: number) => `${item} an Position ${position} verschoben`,
-        max: (max: number) => `Höchstens ${max} Einträge`,
-        min: (min: number) => `Mindestens ${min} Einträge`,
-    },
-    keyValueEditor: {
-        key: 'Schlüssel',
-        value: 'Wert',
-        add: 'Zeile hinzufügen',
-        item: (position: number) => `Zeile ${position}`,
-        duplicate: 'Schlüssel kommt mehrfach vor',
-    },
-    wizard: {
-        summary: 'Zusammenfassung',
-        validating: 'Wird geprüft …',
-        invalid: 'Bitte die Angaben in diesem Schritt prüfen',
-    },
-    aiLabel: {
-        label: 'KI-generiert',
-        explanation:
-            'Dieser Inhalt wurde mit künstlicher Intelligenz erstellt. Bitte prüfen Sie ihn vor der Verwendung.',
-        help: 'Was bedeutet KI-generiert?',
-    },
-    qrCode: {
-        label: (value: string) => `QR-Code: ${value}`,
-        downloadPng: 'Als PNG herunterladen',
-        downloadSvg: 'Als SVG herunterladen',
-    },
-    signaturePad: {
-        label: 'Unterschrift',
-        roleDescription: 'Unterschriftsfeld',
-        control: 'Unterschriftsfeld – mit Maus, Stift oder Finger unterschreiben',
-        placeholder: 'Hier unterschreiben',
-        clear: 'Löschen',
-        undo: 'Rückgängig',
-        type: 'Unterschrift eintippen',
-        draw: 'Unterschrift zeichnen',
-        typedLabel: 'Name als Unterschrift',
-        cleared: 'Unterschrift gelöscht',
-    },
-    imageCropper: {
-        label: 'Bild zuschneiden',
-        roleDescription: 'Bildzuschnitt',
-        loading: 'Bild wird geladen',
-        description: (zoom: number | null, rotation: number | null) =>
-            `Zoom ${Math.round((zoom ?? 1) * 100)} %, gedreht um ${Math.round(rotation ?? 0)} Grad`,
-        selection: (circle: boolean): string => (circle ? 'Kreisförmiger Ausschnitt' : 'Ausschnitt'),
-        selectionRoleDescription: 'verschiebbarer Ausschnitt',
-        instructions:
-            'Pfeiltasten verschieben den Ausschnitt, Alt und Pfeiltasten ändern seine Größe, Plus und Minus zoomen.',
-        selectionValue: (width: number, height: number, x: number, y: number) =>
-            `${width} × ${height} Pixel, Position ${x}, ${y}`,
-        zoomIn: 'Vergrößern',
-        zoomOut: 'Verkleinern',
-        rotateLeft: 'Nach links drehen',
-        rotateRight: 'Nach rechts drehen',
-        flip: 'Horizontal spiegeln',
-        reset: 'Zurücksetzen',
-        toolbar: 'Bild bearbeiten',
-    },
-    floatingPanel: {
-        minimize: 'Minimieren',
-        maximize: 'Maximieren',
-        restore: 'Wiederherstellen',
-        close: 'Schließen',
-        hint: 'Alt und Pfeiltasten verschieben das Fenster, Alt, Umschalt und Pfeiltasten ändern seine Größe.',
-    },
-    jsonViewer: {
-        label: 'JSON-Daten',
-        search: 'Durchsuchen',
-        copy: (path: string) => `${path} kopieren`,
-        copied: (path: string) => `${path} kopiert`,
-        items: (count: number) => (count === 1 ? '1 Eintrag' : `${count} Einträge`),
-        keys: (count: number) => (count === 1 ? '1 Schlüssel' : `${count} Schlüssel`),
-        matches: (count: number) => (count === 0 ? 'Keine Treffer' : count === 1 ? '1 Treffer' : `${count} Treffer`),
-        types: {
-            object: 'Objekt',
-            array: 'Liste',
-            string: 'Text',
-            number: 'Zahl',
-            boolean: 'Wahrheitswert',
-            null: 'leer',
-            undefined: 'undefiniert',
-        } as Record<string, string>,
-    },
-    jsonInput: {
-        format: 'Formatieren',
-        valid: 'Gültiges JSON',
-        invalid: 'Ungültiges JSON',
-        invalidAt: (line: number, column: number) => `Ungültiges JSON in Zeile ${line}, Spalte ${column}`,
-    },
-    downloadTrigger: { label: 'Herunterladen' },
-    marquee: { label: 'Laufband', pause: 'Laufband anhalten', play: 'Laufband fortsetzen' },
-    angleSlider: { label: 'Winkel', value: (degrees: number) => `${degrees} Grad` },
-    mentions: {
-        label: 'Nachricht',
-        suggestions: 'Vorschläge',
-        /** Announced when the suggestions open or change */
-        count: (count: number) =>
-            count === 0 ? 'Keine Vorschläge' : count === 1 ? '1 Vorschlag' : `${count} Vorschläge`,
-        hint: (triggers: string) => `${triggers} öffnet Vorschläge, Pfeiltasten wählen, Eingabe übernimmt`,
-    },
-    phoneInput: {
-        country: 'Land',
-        number: 'Telefonnummer',
-        search: 'Land suchen',
-    },
-    colorSwatchPicker: { label: 'Farbe' },
-    emojiPicker: {
-        /**
-         * Names and search words of the emojis in this language, one per line: "😀 Name|search words" – empty uses the
-         * built-in German (de) or English names; the English words always find, too
-         */
-        emojis: '',
-        label: 'Emojis',
-        search: 'Emoji suchen',
-        categoryNav: 'Kategorien',
-        categories: {
-            recent: 'Zuletzt verwendet',
-            smileys: 'Smileys & Gefühle',
-            people: 'Menschen & Gesten',
-            nature: 'Tiere & Natur',
-            food: 'Essen & Trinken',
-            travel: 'Reisen & Orte',
-            activities: 'Aktivitäten',
-            objects: 'Objekte',
-            symbols: 'Symbole',
-        } as Record<string, string>,
-        results: 'Suchergebnisse',
-        empty: 'Keine Emojis gefunden',
-        count: (count: number) => (count === 0 ? 'Keine Emojis' : count === 1 ? '1 Emoji' : `${count} Emojis`),
-    },
-    ringProgress: { label: 'Fortschritt' },
-    sortable: {
-        instructions:
-            'Leertaste oder Eingabetaste nimmt auf. Dann mit den Pfeiltasten verschieben, mit Leertaste ablegen oder mit Escape abbrechen. Mit der Maus: ziehen, oder klicken und an der Zielstelle erneut klicken.',
-        handle: (item: string) => `${item} verschieben`,
-        empty: 'Keine Einträge – hierher verschieben',
-        picked: (item: string, position: number, count: number) =>
-            `${item} aufgenommen, Position ${position} von ${count}.`,
-        moved: (item: string, position: number, count: number) => `${item}: Position ${position} von ${count}.`,
-        movedTo: (item: string, container: string, position: number, count: number) =>
-            `${item} in ${container}, Position ${position} von ${count}.`,
-        dropped: (item: string, position: number, count: number) =>
-            `${item} abgelegt, Position ${position} von ${count}.`,
-        cancelled: (item: string, position: number, count: number) =>
-            `Verschieben abgebrochen. ${item} wieder an Position ${position} von ${count}.`,
-    },
-    logViewer: {
-        label: 'Protokoll',
-        search: 'Protokoll durchsuchen',
-        levels: { debug: 'Debug', info: 'Info', warn: 'Warnung', error: 'Fehler' } as Record<string, string>,
-        levelFilter: 'Ebenen',
-        autoScroll: 'Mitlaufen',
-        loadMore: 'Ältere Einträge laden',
-        jumpToEnd: 'Zum Ende',
-        lines: (shown: number, total: number) => (shown === total ? `${total} Zeilen` : `${shown} von ${total} Zeilen`),
-        empty: 'Keine Einträge',
-        paused: 'Mitlaufen angehalten',
-    },
-    kanban: {
-        /** React Native: action that moves a card to another column */
-        moveTo: (column: string) => `Nach „${column}“ verschieben`,
-        label: 'Board',
-        count: (count: number, limit?: number) => (limit ? `${count}/${limit}` : String(count)),
-        cards: (count: number, limit?: number) =>
-            `${count === 1 ? '1 Karte' : `${count} Karten`}${limit ? `, Limit ${limit}` : ''}`,
-        limitReached: 'WIP-Limit erreicht',
-        limitExceeded: (count: number, limit: number) => `WIP-Limit überschritten: ${count} von ${limit}`,
-        collapse: (column: string) => `${column} einklappen`,
-        expand: (column: string) => `${column} ausklappen`,
-        loadMore: 'Weitere laden',
-        empty: 'Keine Karten – hierher verschieben',
-    },
-    chatMessages: {
-        label: 'Nachrichten',
-        empty: 'Noch keine Nachrichten',
-        jump: 'Zu neuen Nachrichten',
-        newCount: (count: number) => (count === 1 ? '1 neue Nachricht' : `${count} neue Nachrichten`),
-        announce: (author: string, text: string) => `${author}: ${text}`,
-        today: 'Heute',
-        yesterday: 'Gestern',
-        loadMore: 'Ältere Nachrichten laden',
-    },
-    chatMessage: {
-        status: { sending: 'Wird gesendet', sent: 'Gesendet', read: 'Gelesen', error: 'Nicht gesendet' } as Record<
-            string,
-            string
-        >,
-        writing: 'Antwort wird erstellt',
-        attachments: 'Anhänge',
-        you: 'Sie',
-        assistant: 'Assistent',
-    },
-    chatPrompt: {
-        label: 'Nachricht',
-        placeholder: 'Nachricht schreiben …',
-        send: 'Senden',
-        stop: 'Antwort stoppen',
-        attach: 'Datei anhängen',
-        removeFile: (name: string) => `${name} entfernen`,
-        hint: 'Enter sendet, Umschalt+Enter für eine neue Zeile',
-        hintModEnter: 'Strg+Enter sendet',
-    },
-    chatSources: { title: (count: number) => (count === 1 ? '1 Quelle' : `${count} Quellen`) },
-    chatToolCall: {
-        title: (name: string) => `Werkzeug: ${name}`,
-        status: { running: 'Läuft …', done: 'Fertig', error: 'Fehler' } as Record<string, string>,
-        input: 'Eingabe',
-        output: 'Ergebnis',
-    },
-    chatThinking: {
-        active: 'Denkt nach …',
-        done: 'Gedankengang',
-        duration: (seconds: number) => `${seconds} s nachgedacht`,
-    },
-    authForm: {
-        titles: {
-            signIn: 'Anmelden',
-            signUp: 'Konto erstellen',
-            reset: 'Passwort zurücksetzen',
-            code: 'Code eingeben',
-        } as Record<string, string>,
-        descriptions: {
-            signIn: 'Mit E-Mail-Adresse und Passwort',
-            signUp: 'In wenigen Schritten zum eigenen Konto',
-            reset: 'Wir schicken Ihnen einen Link zum Zurücksetzen.',
-            code: 'Den Code aus der E-Mail oder der Authentifizierungs-App eingeben',
-        } as Record<string, string>,
-        submit: { signIn: 'Anmelden', signUp: 'Registrieren', reset: 'Link senden', code: 'Bestätigen' } as Record<
-            string,
-            string
-        >,
-        name: 'Name',
-        email: 'E-Mail-Adresse',
-        password: 'Passwort',
-        passwordHint: (min: number) => `Mindestens ${min} Zeichen`,
-        code: 'Einmalcode',
-        remember: 'Angemeldet bleiben',
-        forgot: 'Passwort vergessen?',
-        or: 'oder',
-        providers: 'Anmelden mit',
-        noAccount: 'Noch kein Konto?',
-        signUpLink: 'Registrieren',
-        hasAccount: 'Schon ein Konto?',
-        signInLink: 'Anmelden',
-        back: 'Zurück zur Anmeldung',
-        resetSent: 'Falls ein Konto zu dieser Adresse existiert, ist ein Link unterwegs.',
-        sending: 'Wird gesendet …',
-    },
-    sessionTimeout: {
-        title: 'Sitzung läuft bald ab',
-        description: 'Aus Sicherheitsgründen werden Sie bei Inaktivität abgemeldet. Möchten Sie angemeldet bleiben?',
-        remaining: 'Verbleibende Zeit',
-        extend: 'Angemeldet bleiben',
-        signOut: 'Abmelden',
-        expiredTitle: 'Sitzung abgelaufen',
-        expired: 'Sie wurden aus Sicherheitsgründen abgemeldet.',
-        close: 'Schließen',
-    },
-    /** Messages of the validators (isRequired, isEmail …) */
-    validation: {
-        required: 'Pflichtfeld',
-        email: 'Bitte eine gültige E-Mail-Adresse eingeben',
-        url: 'Bitte eine gültige Adresse eingeben (https://…)',
-        minLength: (min: number) => `Mindestens ${min} Zeichen`,
-        maxLength: (max: number) => `Höchstens ${max} Zeichen`,
-        length: (min: number, max: number) => `${min} bis ${max} Zeichen`,
-        min: (min: string) => `Mindestens ${min}`,
-        max: (max: string) => `Höchstens ${max}`,
-        range: (min: string, max: string) => `Zwischen ${min} und ${max}`,
-        number: 'Bitte eine Zahl eingeben',
-        integer: 'Bitte eine ganze Zahl eingeben',
-        pattern: 'Das Format stimmt nicht',
-        matches: 'Die Eingaben stimmen nicht überein',
-        iban: 'Bitte eine gültige IBAN eingeben',
-        phone: 'Bitte eine gültige Telefonnummer eingeben',
-    },
-};
+type CalendarView = 'day' | 'month' | 'year';
 
 /** All texts of one language; a custom language passes a complete set to LocaleProvider */
 export type Translations = typeof de;
@@ -2492,7 +1192,8 @@ const en: Translations = {
 };
 
 /** Built-in languages; others fall back to English unless registered (registerLocale) or passed to LocaleProvider */
-export const messages: Record<'de' | 'en', Translations> = { de, en };
+/** The built-in language – German and the others are registered (registerLocale) */
+export const messages: Record<'en', Translations> = { en };
 
 const registered = new Map<string, Translations>();
 
@@ -2685,6 +1386,14 @@ export function numberSeparators(locale = defaultLocale): { decimal: string; gro
     };
 }
 
+/**
+ * CSV separator a spreadsheet in the locale opens: ";" where numbers have a decimal comma ("de-DE": 1,5 – the comma
+ * would split the number), "," otherwise
+ */
+export function csvSeparator(locale = defaultLocale): string {
+    return numberSeparators(locale).decimal === ',' ? ';' : ',';
+}
+
 /**
  * Reads a number typed or pasted in either notation – "1.234,5", "1,234.5", "1234,5" and "1234.5" all give 1234.5.
  * With both separators the last one is the decimal separator; a single separator before exactly three digits is a
diff --git a/packages/recipes/src/index.ts b/packages/recipes/src/index.ts
index 7b64e68..8eed1a5 100644
--- a/packages/recipes/src/index.ts
+++ b/packages/recipes/src/index.ts
@@ -412,6 +412,7 @@ export {
     localizeTexts,
     messages,
     numberInputKey,
+    csvSeparator,
     numberSeparators,
     parseLocaleNumber,
     pluralText,
diff --git a/packages/recipes/src/locales/de.ts b/packages/recipes/src/locales/de.ts
new file mode 100644
index 0000000..40415fa
--- /dev/null
+++ b/packages/recipes/src/locales/de.ts
@@ -0,0 +1,1815 @@
+// German texts of the components – they define the shape of every language (Translations in ../i18n.ts). Not built
+// in, so they cost nothing until imported: registerLocale('de', de) at app start, or
+// <LocaleProvider locale="de-DE" :translations="de">.
+import type { PluralForms } from '../i18n.js';
+
+type CalendarView = 'day' | 'month' | 'year';
+
+const next: Record<CalendarView, string> = {
+    day: 'Nächster Monat',
+    month: 'Nächstes Jahr',
+    year: 'Nächstes Jahrzehnt',
+};
+const previous: Record<CalendarView, string> = {
+    day: 'Vorheriger Monat',
+    month: 'Vorheriges Jahr',
+    year: 'Vorheriges Jahrzehnt',
+};
+const viewNames: Record<CalendarView, string> = { day: 'Tage', month: 'Monate', year: 'Jahre' };
+
+export const de = {
+    common: {
+        close: 'Schließen',
+        cancel: 'Abbrechen',
+        confirm: 'Bestätigen',
+        placeholder: 'Bitte wählen',
+        loading: 'Wird geladen',
+        empty: 'Keine Einträge',
+        noResults: 'Keine Treffer',
+        selectedCount: (count: number) => `${count} ausgewählt`,
+    },
+    toast: { label: 'Benachrichtigungen' },
+    menu: { title: 'Aktionen', search: 'Menü durchsuchen' },
+    menubar: { menu: 'Menü' },
+    dialog: { maximize: 'Maximieren', restore: 'Verkleinern' },
+    /** confirm() and prompt() */
+    confirm: {
+        typeToConfirm: (text: string) => `Zur Bestätigung „${text}“ eingeben`,
+        mismatch: 'Die Eingabe stimmt nicht überein',
+    },
+    breadcrumb: { label: 'Pfad', more: 'Ausgeblendete Ebenen' },
+    siteHeader: { navigation: 'Hauptnavigation', menu: 'Menü' },
+    modeToggle: { light: 'Helles Design aktivieren', dark: 'Dunkles Design aktivieren' },
+    pagination: {
+        rootLabel: 'Seitennavigation',
+        prevTriggerLabel: 'Vorherige Seite',
+        nextTriggerLabel: 'Nächste Seite',
+        itemLabel: (details: { page: number; totalPages: number }) => `Seite ${details.page} von ${details.totalPages}`,
+        summary: (range: { start: number; end: number; count: number }) =>
+            `${range.start}–${range.end} von ${range.count}`,
+        firstTriggerLabel: 'Erste Seite',
+        lastTriggerLabel: 'Letzte Seite',
+        /** Compact variant: the current page between the arrows */
+        compact: (page: number, totalPages: number) => `Seite ${page} von ${totalPages}`,
+        pageSize: 'Pro Seite',
+        jumper: 'Gehe zu Seite',
+    },
+    saveStatus: {
+        idle: '',
+        saving: 'Wird gespeichert …',
+        saved: 'Gespeichert',
+        error: 'Speichern fehlgeschlagen',
+    },
+    slider: { thumbs: ['Minimum', 'Maximum'] },
+    numberInput: { incrementLabel: 'Erhöhen', decrementLabel: 'Verringern' },
+    passwordInput: {
+        visibilityTrigger: (visible: boolean): string => (visible ? 'Passwort verbergen' : 'Passwort anzeigen'),
+    },
+    combobox: { triggerLabel: 'Vorschläge anzeigen', clearTriggerLabel: 'Eingabe löschen', search: 'Suchen …' },
+    datePicker: {
+        dayCell: (state: { valueText: string; selected: boolean; unavailable: boolean }) =>
+            state.unavailable
+                ? `Nicht verfügbar: ${state.valueText}`
+                : state.selected
+                  ? `Ausgewählt: ${state.valueText}`
+                  : state.valueText,
+        nextTrigger: (view: CalendarView) => next[view],
+        prevTrigger: (view: CalendarView) => previous[view],
+        viewTrigger: (_view: CalendarView, nextView: CalendarView | undefined) =>
+            nextView ? `${viewNames[nextView]} anzeigen` : 'Ansicht wechseln',
+        monthSelect: 'Monat wählen',
+        yearSelect: 'Jahr wählen',
+        clearTrigger: 'Datum löschen',
+        trigger: (open: boolean): string => (open ? 'Kalender schließen' : 'Kalender öffnen'),
+        content: 'Kalender',
+        placeholder: () => ({ year: 'JJJJ', month: 'MM', day: 'TT' }),
+        /** Name of the week column (its visible header is weekColumnShort) */
+        weekColumnHeader: 'Kalenderwoche',
+        weekColumnShort: 'KW',
+        weekNumberCell: (week: number) => `Kalenderwoche ${week}`,
+        presetTrigger: (value: string[]) => value.join(' – '),
+    },
+    /** Calendar extras: button bar, several chosen days, time zone */
+    calendar: {
+        today: 'Heute',
+        clear: 'Löschen',
+        /** Field of a DatePicker with selectionMode multiple */
+        noDates: 'Kein Datum gewählt',
+        datesSelected: { one: '{count} Tag ausgewählt', other: '{count} Tage ausgewählt' } as PluralForms,
+        timeZone: (name: string) => `Zeitzone: ${name}`,
+    },
+    quarterPicker: {
+        /** Text of a quarter in the field and on its button */
+        quarter: (quarter: number, year: number) => `Q${quarter} ${year}`,
+        /** Name of a quarter button: its text and the months */
+        quarterButton: (quarter: number, year: number, months: string) => `Q${quarter} ${year}, ${months}`,
+        trigger: 'Quartal wählen',
+        content: 'Quartale',
+        prevYear: 'Vorheriges Jahr',
+        nextYear: 'Nächstes Jahr',
+        clearTrigger: 'Quartal löschen',
+        placeholder: 'Q1 2026',
+    },
+    durationInput: {
+        clearTrigger: 'Dauer löschen',
+        days: 'Tage',
+        hours: 'Stunden',
+        minutes: 'Minuten',
+        seconds: 'Sekunden',
+    },
+    timeGrid: {
+        label: 'Freie Termine',
+        empty: 'Keine freien Termine',
+        loading: 'Termine werden geladen',
+        available: { one: '{count} freier Termin', other: '{count} freie Termine' } as PluralForms,
+    },
+    miniCalendar: {
+        label: 'Tage',
+        previous: 'Vorherige Tage',
+        next: 'Nächste Tage',
+    },
+    /** DateInput: placeholders of the parts and names of their spin buttons */
+    dateInput: {
+        placeholder: () => ({
+            day: 'TT',
+            month: 'MM',
+            year: 'JJJJ',
+            hour: 'hh',
+            minute: 'mm',
+            second: 'ss',
+            dayPeriod: '--',
+            era: '--',
+        }),
+    },
+    splitButton: { more: 'Weitere Aktionen' },
+    confirmPopup: { confirm: 'Ja', cancel: 'Abbrechen' },
+    passwordStrength: {
+        levels: ['Zu kurz', 'Schwach', 'Mittel', 'Gut', 'Stark'],
+        label: (level: string) => `Passwortstärke: ${level}`,
+    },
+    /** Field and text controls (Input, Textarea, PasswordInput, NumberInput …) */
+    field: { optional: 'optional', clear: 'Eingabe löschen' },
+    textarea: {
+        /** Visible counter */
+        counter: (length: number, max: number) => `${length} / ${max}`,
+        /** Announced after typing pauses */
+        remaining: (remaining: number, max: number) =>
+            remaining <= 0 ? `Höchstlänge von ${max} Zeichen erreicht` : `Noch ${remaining} von ${max} Zeichen`,
+    },
+    formErrorSummary: {
+        title: (count: number) =>
+            count === 1 ? 'Bitte korrigieren Sie 1 Angabe' : `Bitte korrigieren Sie ${count} Angaben`,
+    },
+    passwordRequirements: { label: 'Anforderungen an das Passwort', met: 'erfüllt', unmet: 'nicht erfüllt' },
+    dataView: {
+        layout: 'Ansicht',
+        list: 'Liste',
+        grid: 'Raster',
+        loadMore: 'Mehr laden',
+        /** Names the list of loading placeholders */
+        loading: 'Einträge werden geladen',
+        shown: (count: number, total: number) => `${count} von ${total} angezeigt`,
+    },
+    orderList: {
+        top: 'Ganz nach oben',
+        up: 'Nach oben',
+        down: 'Nach unten',
+        bottom: 'Ganz nach unten',
+        moved: (label: string, position: number, count: number) => `${label}: Position ${position} von ${count}`,
+    },
+    pickList: {
+        source: 'Verfügbar',
+        target: 'Ausgewählt',
+        add: 'Ausgewählte hinzufügen',
+        addAll: 'Alle hinzufügen',
+        remove: 'Ausgewählte entfernen',
+        removeAll: 'Alle entfernen',
+        moved: (count: number, target: string) =>
+            `${count === 1 ? '1 Eintrag' : `${count} Einträge`} nach „${target}“ verschoben`,
+        /** Search field of one list */
+        filter: (list: string) => `${list} durchsuchen`,
+        /** Drag and drop: where the dragged items go */
+        dropHint: (list: string) => `Hierher ziehen: ${list}`,
+    },
+    appShell: {
+        skipLink: 'Zum Inhalt springen',
+        openNavigation: 'Navigation öffnen',
+        navigation: 'Navigation',
+        collapseNavigation: 'Navigation einklappen',
+        expandNavigation: 'Navigation ausklappen',
+        resizeNavigation: 'Breite der Navigation ändern',
+        resizeAside: 'Breite der Seitenleiste ändern',
+    },
+    commandPalette: {
+        label: 'Befehle',
+        placeholder: 'Suchen oder Befehl eingeben …',
+        empty: 'Nichts gefunden',
+        navigate: 'auswählen',
+        run: 'ausführen',
+        close: 'schließen',
+    },
+    /** Option lists: Select, MultiSelect, Combobox, Listbox, TagsInput suggestions */
+    select: {
+        clear: 'Auswahl löschen',
+        filter: 'Optionen filtern',
+        selectAll: 'Alle auswählen',
+        removeItem: (label: string) => `${label} entfernen`,
+        removed: (label: string) => `${label} entfernt`,
+        maxReached: (max: number) => `Höchstens ${max} auswählbar`,
+        suggestions: 'Vorschläge',
+    },
+    /** Standalone Chip: name of the remove button */
+    chip: { remove: (label?: string): string => (label ? `${label} entfernen` : 'Entfernen') },
+    tagsInput: {
+        clearTriggerLabel: 'Alle entfernen',
+        deleteTagTriggerLabel: (value: string) => `${value} entfernen`,
+        tagAdded: (value: string) => `${value} hinzugefügt`,
+        tagsPasted: (values: string[]) => `${values.length} Einträge eingefügt`,
+        tagEdited: (value: string) => `${value} wird bearbeitet`,
+        tagUpdated: (value: string) => `${value} geändert`,
+        tagDeleted: (value: string) => `${value} entfernt`,
+        tagSelected: (value: string) => `${value} ausgewählt, Rücktaste zum Entfernen`,
+    },
+    navigationMenu: { rootLabel: 'Hauptnavigation' },
+    megaMenu: {
+        rootLabel: 'Hauptnavigation',
+        /** Menu button and drawer title on small screens */
+        menu: 'Menü',
+        /** Chevron button next to an entry that is a link itself */
+        submenu: (label: string) => `${label}: Untermenü`,
+        showAll: 'Alle anzeigen',
+        showAllOf: (title: string) => `Alle anzeigen: ${title}`,
+        /** Link of the featured area */
+        featuredLink: 'Mehr erfahren',
+        /** In the drawer: link to the page of an entry that also has a panel */
+        overview: (label: string) => `${label} – Übersicht`,
+    },
+    pageHeader: { back: 'Zurück' },
+    bottomNavigation: { label: 'Navigation' },
+    banner: { dismiss: 'Hinweis schließen' },
+    notificationCenter: {
+        label: 'Benachrichtigungen',
+        markAllRead: 'Alle als gelesen markieren',
+        markRead: 'Als gelesen markieren',
+        unread: 'Ungelesen',
+        unreadCount: (count: number | string) => `${count} ungelesen`,
+        empty: 'Keine Benachrichtigungen',
+        loadMore: 'Mehr laden',
+        older: 'Älter',
+        /** Polite announcement of new notifications */
+        announce: (count: number, title: string) =>
+            count === 1 ? `Neue Benachrichtigung: ${title}` : `${count} neue Benachrichtigungen`,
+    },
+    result: {
+        success: 'Erledigt',
+        info: 'Hinweis',
+        warn: 'Achtung',
+        error: 'Etwas ist schiefgelaufen',
+        '403': 'Kein Zugriff',
+        '404': 'Seite nicht gefunden',
+        '500': 'Serverfehler',
+        description403: 'Sie haben keine Berechtigung, diese Seite zu sehen.',
+        description404: 'Die Seite existiert nicht oder wurde verschoben.',
+        description500: 'Auf dem Server ist ein Fehler aufgetreten. Bitte versuchen Sie es später noch einmal.',
+    },
+    tour: {
+        nextStep: 'Weiter',
+        prevStep: 'Zurück',
+        close: 'Tour beenden',
+        skip: 'Überspringen',
+        done: 'Fertig',
+        progressText: (details: { current: number; total: number }) => `${details.current + 1} von ${details.total}`,
+    },
+    tableOfContents: { title: 'Auf dieser Seite' },
+    spoiler: { show: 'Mehr anzeigen', hide: 'Weniger anzeigen' },
+    navigationProgress: { label: 'Seite wird geladen' },
+    copyButton: { label: 'Kopieren', copied: 'In die Zwischenablage kopiert' },
+    actionBar: { label: 'Aktionen für die Auswahl', clear: 'Auswahl aufheben' },
+    heatmap: { less: 'Weniger', more: 'Mehr', empty: 'kein Wert' },
+    scheduler: {
+        /** React Native: accessibility actions that move an event (±slot, ±day) */
+        shift: (minutes: number, days: number) =>
+            days
+                ? `${Math.abs(days) === 1 ? '1 Tag' : `${Math.abs(days)} Tage`} ${days > 0 ? 'später' : 'früher'}`
+                : `${Math.abs(minutes)} Minuten ${minutes > 0 ? 'später' : 'früher'}`,
+        label: 'Kalender',
+        today: 'Heute',
+        previous: 'Zurück',
+        next: 'Weiter',
+        view: 'Ansicht',
+        views: {
+            day: 'Tag',
+            week: 'Woche',
+            month: 'Monat',
+            agenda: 'Liste',
+            timeline: 'Zeitachse',
+            year: 'Jahr',
+        } as Record<string, string>,
+        allDay: 'Ganztägig',
+        more: (count: number) => `+${count} weitere`,
+        newEvent: (date: string) => `Neuer Termin am ${date}`,
+        empty: 'Keine Termine',
+        changed: (title: string, when: string) => `${title}: ${when}`,
+        /** Resources */
+        resource: 'Ressource',
+        allResources: 'Alle Ressourcen',
+        previousResources: 'Vorherige Ressourcen',
+        nextResources: 'Nächste Ressourcen',
+        resourceRange: (from: number, to: number, count: number) => `Ressourcen ${from}–${to} von ${count}`,
+        resourceFilter: 'Ressource',
+        newEventFor: (resource: string, date: string) => `Neuer Termin für ${resource} am ${date}`,
+        /** Timeline */
+        range: 'Zeitraum',
+        ranges: { day: 'Tag', week: 'Woche', month: 'Monat' } as Record<string, string>,
+        zoomIn: 'Vergrößern',
+        zoomOut: 'Verkleinern',
+        /** Series */
+        series: 'Serientermin',
+        seriesTitle: 'Serientermin ändern',
+        seriesQuestion: (title: string) => `„${title}“ gehört zu einer Serie. Was soll sich ändern?`,
+        onlyThis: 'Nur dieser Termin',
+        allInSeries: 'Alle Termine der Serie',
+        /** Rules for dropping */
+        rejected: (title: string, reason: string) => `${title} lässt sich hier nicht ablegen: ${reason}`,
+        notAllowed: 'nicht erlaubt',
+        overlaps: (title: string) => `überschneidet sich mit ${title}`,
+        /** Year view and "+N more" */
+        eventCount: { one: '{count} Termin', other: '{count} Termine' } as PluralForms,
+        closed: 'Außerhalb der Geschäftszeiten',
+        loading: 'Termine werden geladen',
+        loaded: { one: '{count} Termin geladen', other: '{count} Termine geladen' } as PluralForms,
+        error: 'Die Termine konnten nicht geladen werden.',
+        retry: 'Erneut versuchen',
+    },
+    recurrence: {
+        DAILY: { one: 'Täglich', other: 'Alle {count} Tage' } as PluralForms,
+        WEEKLY: { one: 'Wöchentlich', other: 'Alle {count} Wochen' } as PluralForms,
+        MONTHLY: { one: 'Monatlich', other: 'Alle {count} Monate' } as PluralForms,
+        YEARLY: { one: 'Jährlich', other: 'Alle {count} Jahre' } as PluralForms,
+        on: (what: string) => `am ${what}`,
+        /** "2. Montag", "letzten Freitag" */
+        nthWeekday: (nth: number, weekday: string) =>
+            nth === -1 ? `letzten ${weekday}` : nth < 0 ? `${-nth}.-letzten ${weekday}` : `${nth}. ${weekday}`,
+        /** Monthly by position: "Jeden 2. Montag im Monat" */
+        monthlyNth: (what: string) => `Jeden ${what} im Monat`,
+        /** Day of the month: "15.", "letzten Tag" */
+        monthDay: (day: number) => (day === -1 ? 'letzten Tag' : day < 0 ? `${-day}.-letzten Tag` : `${day}.`),
+        /** Yearly: "2. Montag im Mai", "24. Dezember" */
+        inMonth: (what: string, month: string) => `${what} im ${month}`,
+        dayOfMonth: (day: string, month: string) => `${day} ${month}`,
+        times: { one: 'einmal', other: '{count} Mal' } as PluralForms,
+        until: (date: string) => `bis ${date}`,
+    },
+    gantt: {
+        label: 'Projektplan',
+        task: 'Aufgabe',
+        start: 'Start',
+        end: 'Ende',
+        duration: 'Dauer',
+        days: { one: '{count} Tag', other: '{count} Tage' } as PluralForms,
+        milestone: 'Meilenstein',
+        group: 'Gruppe',
+        progress: (percent: number) => `${percent} % erledigt`,
+        dependsOn: (names: string) => `hängt ab von ${names}`,
+        critical: 'kritischer Pfad',
+        zoom: 'Zoom',
+        zooms: { day: 'Tag', week: 'Woche', month: 'Monat', quarter: 'Quartal' } as Record<string, string>,
+        today: 'Heute',
+        week: (week: number) => `KW ${week}`,
+        quarter: (quarter: number) => `Q${quarter}`,
+        changed: (name: string, when: string) => `${name}: ${when}`,
+        progressChanged: (name: string, percent: number) => `${name}: ${percent} % erledigt`,
+        linked: (from: string, to: string) => `${to} hängt jetzt von ${from} ab`,
+        addDependency: 'Abhängigkeit hinzufügen…',
+        dependencyTitle: (name: string) => `Vorgänger von „${name}“`,
+        predecessor: 'Vorgänger',
+        noPredecessor: 'Keine Aufgabe möglich',
+        addDependencyConfirm: 'Hinzufügen',
+        empty: 'Keine Aufgaben',
+    },
+    codeHighlight: {
+        copy: 'Code kopieren',
+        showMore: 'Gesamten Code anzeigen',
+        showLess: 'Code einklappen',
+        wrap: 'Zeilen umbrechen',
+        files: 'Dateien',
+        added: 'hinzugefügt',
+        removed: 'entfernt',
+    },
+    pdfViewer: {
+        label: 'PDF-Dokument',
+        toolbar: 'PDF-Werkzeuge',
+        pages: 'Seiten des Dokuments',
+        sidebar: 'Seitenleiste',
+        thumbnails: 'Seiten',
+        outline: 'Inhalt',
+        noOutline: 'Kein Inhaltsverzeichnis',
+        pageLabel: (page: number) => `Seite ${page}`,
+        page: 'Seite',
+        ofPages: (count: number) => `von ${count}`,
+        pageStatus: (page: number, count: number) => `Seite ${page} von ${count}`,
+        previousPage: 'Vorherige Seite',
+        nextPage: 'Nächste Seite',
+        zoom: 'Zoom',
+        zoomIn: 'Vergrößern',
+        zoomOut: 'Verkleinern',
+        pageWidth: 'Seitenbreite',
+        pageFit: 'Ganze Seite',
+        rotate: 'Im Uhrzeigersinn drehen',
+        search: 'Suchen',
+        searchField: 'Im Dokument suchen',
+        matchCase: 'Groß-/Kleinschreibung beachten',
+        previousMatch: 'Vorheriger Treffer',
+        nextMatch: 'Nächster Treffer',
+        closeSearch: 'Suche schließen',
+        matches: (current: number, total: number) => `Treffer ${current} von ${total}`,
+        noMatches: 'Keine Treffer',
+        searching: 'Wird gesucht …',
+        wrappedTop: 'weiter am Ende',
+        wrappedBottom: 'weiter am Anfang',
+        download: 'Herunterladen',
+        print: 'Drucken',
+        printing: (page: number, count: number) => `Druck wird vorbereitet: Seite ${page} von ${count}`,
+        fullscreen: 'Vollbild',
+        loading: 'PDF wird geladen',
+        loaded: (count: number) => (count === 1 ? 'PDF geladen, 1 Seite' : `PDF geladen, ${count} Seiten`),
+        error: 'Das PDF konnte nicht geladen werden.',
+        invalid: 'Die Datei ist kein gültiges PDF oder beschädigt.',
+        missing: 'Das PDF wurde nicht gefunden.',
+        passwordTitle: 'Geschütztes PDF',
+        passwordDescription: 'Geben Sie das Passwort ein, um das Dokument zu öffnen.',
+        passwordLabel: 'Passwort',
+        passwordWrong: 'Das Passwort ist falsch. Bitte erneut versuchen.',
+        passwordSubmit: 'Öffnen',
+        passwordRequired: 'Ohne Passwort lässt sich das PDF nicht öffnen.',
+        fileName: 'dokument.pdf',
+        /** React Native: share or open the file; the web has no viewer for react-native-pdf */
+        share: 'Teilen',
+        unsupported: 'Die PDF-Ansicht gibt es nur in der App (iOS und Android).',
+    },
+    compare: {
+        label: 'Vorher-Nachher-Vergleich',
+        before: 'Vorher',
+        after: 'Nachher',
+        valueText: (percent: number) => `${percent} % vorher, ${100 - percent} % nachher`,
+    },
+    sankey: { source: 'Von', target: 'Nach', value: 'Wert' },
+    treemap: { share: (value: string, percent: string) => `${value} · ${percent}` },
+    countdown: {
+        days: (count: number): string => (count === 1 ? 'Tag' : 'Tage'),
+        hours: (count: number): string => (count === 1 ? 'Stunde' : 'Stunden'),
+        minutes: (count: number): string => (count === 1 ? 'Minute' : 'Minuten'),
+        seconds: (count: number): string => (count === 1 ? 'Sekunde' : 'Sekunden'),
+    },
+    rangePresets: {
+        thisWeek: 'Diese Woche',
+        lastWeek: 'Letzte Woche',
+        thisMonth: 'Dieser Monat',
+        lastMonth: 'Letzter Monat',
+        thisQuarter: 'Dieses Quartal',
+        lastQuarter: 'Letztes Quartal',
+        thisYear: 'Dieses Jahr',
+        lastYear: 'Letztes Jahr',
+        last3Days: 'Letzte 3 Tage',
+        last7Days: 'Letzte 7 Tage',
+        last14Days: 'Letzte 14 Tage',
+        last30Days: 'Letzte 30 Tage',
+        last90Days: 'Letzte 90 Tage',
+        last3Months: 'Letzte 3 Monate',
+        last6Months: 'Letzte 6 Monate',
+        last12Months: 'Letzte 12 Monate',
+        last4Quarters: 'Letzte 4 Quartale',
+        last3Years: 'Letzte 3 Jahre',
+        last5Years: 'Letzte 5 Jahre',
+    } as Record<string, string>,
+    splitter: { resize: (panel: string) => `Größe von „${panel}“ ändern` },
+    image: {
+        preview: (alt: string) => `Vergrößert anzeigen: ${alt}`,
+        zoomIn: 'Vergrößern',
+        zoomOut: 'Verkleinern',
+        rotate: 'Drehen',
+        close: 'Schließen',
+    },
+    inplace: { edit: 'bearbeiten' },
+    scrollTop: { label: 'Nach oben' },
+    blockUi: { label: 'Wird geladen' },
+    speedDial: { label: 'Aktionen' },
+    stepper: {
+        prev: 'Zurück',
+        next: 'Weiter',
+        finish: 'Abschließen',
+        /** React Native: status of a step and the progress */
+        status: { done: 'abgeschlossen', active: 'aktueller Schritt', todo: 'offen' } as Record<string, string>,
+        progress: (step: number, count: number) => `Schritt ${step} von ${count}`,
+    },
+    dataTable: {
+        row: (index: number) => `Zeile ${index + 1}`,
+        selectAll: 'Alle Zeilen dieser Seite auswählen',
+        selectRow: (row: string) => `${row} auswählen`,
+        subRows: (row: string) => `Unterzeilen von ${row}`,
+        search: (caption: string) => `${caption} durchsuchen`,
+        searchPlaceholder: 'Suchen …',
+        filter: (header: string) => `${header} filtern`,
+        filterAll: 'Alle',
+        columns: 'Spalten',
+        export: 'Exportieren (CSV)',
+        resize: (header: string) => `Breite von ${header}`,
+        edit: (header: string, value: string) => `${value || 'leer'}, ${header} bearbeiten`,
+        results: (count: number) => (count === 1 ? '1 Eintrag' : `${count} Einträge`),
+        group: (header: string, value: string, count: number) => `${header}: ${value}, ${count} Einträge`,
+        matchModes: {
+            startsWith: 'Beginnt mit',
+            contains: 'Enthält',
+            notContains: 'Enthält nicht',
+            endsWith: 'Endet mit',
+            equals: 'Ist gleich',
+            notEquals: 'Ist nicht gleich',
+            lt: 'Kleiner als',
+            lte: 'Kleiner oder gleich',
+            gt: 'Größer als',
+            gte: 'Größer oder gleich',
+            between: 'Zwischen',
+            in: 'Ist eins von',
+            dateIs: 'Am',
+            dateIsNot: 'Nicht am',
+            dateBefore: 'Vor',
+            dateAfter: 'Nach',
+        } as Record<string, string>,
+        operator: 'Verknüpfung',
+        matchAll: 'Alle Bedingungen erfüllt',
+        matchAny: 'Eine Bedingung erfüllt',
+        matchMode: (index: number) => `Bedingung ${index + 1}`,
+        value: (index: number) => `Wert ${index + 1}`,
+        from: 'Von',
+        to: 'Bis',
+        addRule: 'Bedingung hinzufügen',
+        removeRule: (index: number) => `Bedingung ${index + 1} entfernen`,
+        apply: 'Anwenden',
+        clear: 'Zurücksetzen',
+        filterMenu: (header: string, active: boolean) =>
+            active ? `Filter für ${header}, aktiv` : `Filter für ${header}`,
+        yes: 'Ja',
+        no: 'Nein',
+        columnMenu: (header: string) => `Optionen für ${header}`,
+        sortAscending: 'Aufsteigend sortieren',
+        sortDescending: 'Absteigend sortieren',
+        clearSort: 'Sortierung entfernen',
+        /** React Native: sheets for sorting and the column filters */
+        sortBy: 'Sortieren',
+        filters: 'Filter',
+        sortPriority: (position: number, desc: boolean) =>
+            `${position}. Sortierung, ${desc ? 'absteigend' : 'aufsteigend'}`,
+        pinStart: 'Am Anfang fixieren',
+        pinEnd: 'Am Ende fixieren',
+        unpin: 'Nicht mehr fixieren',
+        moveEarlier: 'Eine Spalte nach vorne',
+        moveLater: 'Eine Spalte nach hinten',
+        hideColumn: 'Ausblenden',
+        groupBy: 'Nach dieser Spalte gruppieren',
+        ungroup: 'Gruppierung aufheben',
+        columnMoved: (header: string, position: number, count: number) =>
+            `${header} ist jetzt Spalte ${position} von ${count}`,
+        density: 'Zeilenhöhe',
+        densities: { sm: 'Kompakt', md: 'Normal', lg: 'Großzügig' },
+        fullscreen: 'Vollbild',
+        exitFullscreen: 'Vollbild beenden',
+        rowNumber: 'Nr.',
+        expandAll: 'Alle Zeilen aufklappen',
+        collapseAll: 'Alle Zeilen zuklappen',
+        details: (row: string) => `Details zu ${row}`,
+        actions: 'Aktionen',
+        rowActions: (row: string) => `Aktionen für ${row}`,
+        moveRow: (row: string) => `${row} verschieben`,
+        rowMoved: (row: string, position: number, count: number) =>
+            `${row} ist jetzt an Position ${position} von ${count}`,
+        editRow: (row: string) => `${row} bearbeiten`,
+        saveRow: (row: string) => `${row} speichern`,
+        cancelEdit: (row: string) => `Bearbeiten von ${row} abbrechen`,
+        rowsPerPage: 'Zeilen pro Seite',
+        exportAll: 'Alle Zeilen',
+        exportSelection: 'Ausgewählte Zeilen',
+        filterToggle: 'Filter anzeigen',
+        rowCount: (count: number) => (count === 1 ? '1 Zeile' : `${count} Zeilen`),
+        filteredCount: (count: number) => `${count} gefiltert`,
+        copy: (header: string, value: string) => `${value}, ${header} kopieren`,
+        selectAllRows: 'Alle Zeilen auswählen',
+        select: 'Auswahl',
+        reorder: 'Reihenfolge',
+        footer: 'Summenzeile',
+        aggregates: {
+            sum: (value: string) => `Summe ${value}`,
+            avg: (value: string) => `Ø ${value}`,
+            min: (value: string) => `Min. ${value}`,
+            max: (value: string) => `Max. ${value}`,
+            count: (value: string) => `Anzahl ${value}`,
+        } as Record<string, (value: string) => string>,
+        exportMenu: 'Exportieren',
+        exportXlsx: 'Exportieren (Excel)',
+        exportAs: (format: 'csv' | 'xlsx', selection: boolean) =>
+            `${selection ? 'Ausgewählte Zeilen' : 'Alle Zeilen'} als ${format === 'xlsx' ? 'Excel' : 'CSV'}`,
+        cellsCopied: (count: number) => (count === 1 ? '1 Zelle kopiert' : `${count} Zellen kopiert`),
+        cellsPasted: (count: number, invalid: number) =>
+            `${count === 1 ? '1 Zelle' : `${count} Zellen`} eingefügt${invalid ? `, ${invalid} ungültig` : ''}`,
+        pasteErrors: {
+            number: 'Keine Zahl',
+            date: 'Kein Datum',
+            option: 'Keine der Auswahlmöglichkeiten',
+            boolean: 'Weder Ja noch Nein',
+            readonly: 'Nicht bearbeitbar',
+        } as Record<string, string>,
+        changes: (count: number) => (count === 1 ? '1 Änderung' : `${count} Änderungen`),
+        changed: 'geändert',
+        saveChanges: 'Speichern',
+        discardChanges: 'Verwerfen',
+        changesSaved: (count: number) => (count === 1 ? '1 Änderung gespeichert' : `${count} Änderungen gespeichert`),
+        changesDiscarded: 'Änderungen verworfen',
+        undo: 'Rückgängig',
+        redo: 'Wiederholen',
+        undone: (count: number) => (count === 1 ? '1 Zelle zurückgesetzt' : `${count} Zellen zurückgesetzt`),
+        redone: (count: number) => (count === 1 ? '1 Zelle wiederhergestellt' : `${count} Zellen wiederhergestellt`),
+        rowMovedToGroup: (row: string, group: string, position: number, count: number) =>
+            `${row} ist jetzt in ${group}, Position ${position} von ${count}`,
+        rowMovedInTree: (row: string, parent: string | null, position: number, count: number) =>
+            `${row} verschoben${parent ? ` nach ${parent}` : ''}, Position ${position} von ${count}`,
+        find: 'In Tabelle suchen',
+        findMatches: (current: number, total: number) => (total ? `Treffer ${current} von ${total}` : 'Keine Treffer'),
+        findNext: 'Nächster Treffer',
+        findPrevious: 'Vorheriger Treffer',
+        findClose: 'Suche schließen',
+        total: 'Gesamt',
+        columnGroupEarlier: (header: string) => `${header} nach vorne`,
+        columnGroupLater: (header: string) => `${header} nach hinten`,
+    },
+    dataSource: {
+        loading: 'Wird geladen',
+        loaded: { one: '{count} Eintrag geladen', other: '{count} Einträge geladen' } as PluralForms,
+        empty: 'Keine Einträge gefunden',
+        error: 'Die Daten konnten nicht geladen werden.',
+        retry: 'Erneut versuchen',
+        minSearch: (count: number) => `Bitte mindestens ${count} Zeichen eingeben`,
+        /** Button at the end of a growing list */
+        loadMore: 'Mehr laden',
+        loadingMore: 'Weitere Einträge werden geladen',
+    },
+    dateRange: {
+        start: 'Beginn',
+        end: 'Ende',
+        clearTrigger: 'Zeitraum löschen',
+    },
+    timePicker: {
+        trigger: 'Uhrzeit wählen',
+        clearTrigger: 'Uhrzeit löschen',
+        /** TimeRangePicker */
+        clearRange: 'Uhrzeiten löschen',
+    },
+    dateSegments: {
+        day: 'Tag',
+        month: 'Monat',
+        year: 'Jahr',
+        hour: 'Stunde',
+        minute: 'Minute',
+        second: 'Sekunde',
+        dayPeriod: 'Tageszeit',
+    } as Record<string, string>,
+    pinInput: { inputLabel: (index: number, length: number) => `Stelle ${index + 1} von ${length}` },
+    rating: { ratingValueText: (index: number) => (index === 1 ? '1 Stern' : `${index} Sterne`) },
+    carousel: {
+        nextTrigger: 'Nächstes Bild',
+        prevTrigger: 'Vorheriges Bild',
+        indicator: (index: number) => `Bild ${index + 1} zeigen`,
+        item: (index: number, count: number) => `Bild ${index + 1} von ${count}`,
+        autoplayStart: 'Automatisch abspielen',
+        autoplayStop: 'Abspielen anhalten',
+        progressText: (details: { page: number; totalPages: number }) => `${details.page + 1} / ${details.totalPages}`,
+    },
+    chart: {
+        showTable: 'Daten als Tabelle',
+        /** Header of the label column */
+        category: 'Kategorie',
+        sparkline: (label: string, first: string, last: string, min: string, max: string) =>
+            `${label}: von ${first} auf ${last}, Tiefstwert ${min}, Höchstwert ${max}`,
+        /** Column of a dataset without label */
+        series: (index: number) => `Reihe ${index + 1}`,
+        /** Waterfall: a step and the running sum */
+        change: 'Veränderung',
+        total: 'Summe',
+        /** Brush: the shown range */
+        brush: 'Ausschnitt',
+        brushThumbs: ['Beginn', 'Ende'],
+        legend: 'Legende',
+        share: 'Anteil',
+        value: 'Wert',
+        references: 'Referenzwerte',
+        /** Funnel: stage and conversion */
+        stage: 'Schritt',
+        conversion: 'Umwandlung',
+        fromPrevious: (percent: string) => `${percent} vom vorherigen Schritt`,
+        /** Bullet chart: value, maximum and target */
+        target: 'Ziel',
+        bulletValue: (value: string, max: string, target?: string) =>
+            target ? `${value} von ${max}, Ziel ${target}` : `${value} von ${max}`,
+    },
+    editor: {
+        toolbar: 'Formatierung',
+        bold: 'Fett',
+        italic: 'Kursiv',
+        underline: 'Unterstrichen',
+        strike: 'Durchgestrichen',
+        heading2: 'Überschrift',
+        heading3: 'Zwischenüberschrift',
+        bulletList: 'Aufzählung',
+        orderedList: 'Nummerierte Liste',
+        blockquote: 'Zitat',
+        code: 'Code',
+        link: 'Link',
+        undo: 'Rückgängig',
+        redo: 'Wiederholen',
+        linkUrl: 'Linkadresse',
+        linkApply: 'Übernehmen',
+        linkRemove: 'Link entfernen',
+        linkCancel: 'Abbrechen',
+        taskList: 'Aufgabenliste',
+        codeBlock: 'Codeblock',
+        horizontalRule: 'Trennlinie',
+        image: 'Bild',
+        imageUrl: 'Bildadresse',
+        imageAlt: 'Alternativtext',
+        imageDecorative: 'Nur Schmuck (ohne Alternativtext)',
+        imageUpload: 'Datei wählen',
+        imageInsert: 'Einfügen',
+        imageUpdate: 'Übernehmen',
+        table: 'Tabelle',
+        tableBar: 'Tabelle bearbeiten',
+        tableActions: {
+            insertTable: 'Tabelle einfügen',
+            addRowBefore: 'Zeile darüber',
+            addRowAfter: 'Zeile darunter',
+            addColumnBefore: 'Spalte davor',
+            addColumnAfter: 'Spalte danach',
+            deleteRow: 'Zeile löschen',
+            deleteColumn: 'Spalte löschen',
+            toggleHeaderRow: 'Kopfzeile ein/aus',
+            mergeOrSplit: 'Zellen verbinden/teilen',
+            deleteTable: 'Tabelle löschen',
+        } as Record<string, string>,
+        taskItem: (text: string, checked: boolean) => `${text || 'Leere Aufgabe'}, ${checked ? 'erledigt' : 'offen'}`,
+        shortcut: (letter: string, shift: boolean) => `Strg+${shift ? 'Umschalt+' : ''}${letter}`,
+        alignLeft: 'Linksbündig',
+        alignCenter: 'Zentriert',
+        alignRight: 'Rechtsbündig',
+        alignJustify: 'Blocksatz',
+        textColor: 'Textfarbe',
+        backgroundColor: 'Hintergrundfarbe',
+        colorDefault: 'Standard',
+        colors: {
+            primary: 'Akzent',
+            info: 'Info',
+            success: 'Erfolg',
+            warn: 'Warnung',
+            danger: 'Fehler',
+            muted: 'Gedämpft',
+        } as Record<string, string>,
+        subscript: 'Tiefgestellt',
+        superscript: 'Hochgestellt',
+        source: 'HTML-Quelltext',
+        sourceField: 'HTML-Quelltext bearbeiten',
+        details: 'Aufklappbarer Abschnitt',
+        detailsToggle: (open: boolean): string => (open ? 'Abschnitt zuklappen' : 'Abschnitt aufklappen'),
+        invisibleCharacters: 'Unsichtbare Zeichen',
+        tableOfContents: 'Inhaltsverzeichnis',
+        characters: (count: number, limit?: number) =>
+            limit === undefined ? `${count} Zeichen` : `${count} von ${limit} Zeichen`,
+        words: (count: number) => (count === 1 ? '1 Wort' : `${count} Wörter`),
+        limitReached: 'Höchstlänge erreicht',
+        imageUploading: 'Bild wird hochgeladen …',
+        imageUploaded: 'Bild eingefügt',
+        imageFailed: 'Das Bild konnte nicht hochgeladen werden',
+        bubbleMenu: 'Auswahl formatieren',
+        floatingMenu: 'Block einfügen',
+        menuHint: 'Alt+F10: Menü',
+        suggestions: 'Vorschläge',
+        noSuggestions: 'Keine Treffer',
+        suggestionCount: (count: number) => (count === 1 ? '1 Vorschlag' : `${count} Vorschläge`),
+        mentioned: (label: string) => `${label} erwähnt`,
+    },
+    gallery: {
+        fullscreen: 'Vollbild',
+        close: 'Vollbild schließen',
+        thumbnails: 'Vorschaubilder',
+        thumbnail: (index: number, count: number) => `Bild ${index + 1} von ${count} zeigen`,
+        /** Lightbox toolbar (fullscreen view) */
+        toolbar: 'Bildwerkzeuge',
+        zoomIn: 'Vergrößern',
+        zoomOut: 'Verkleinern',
+        resetZoom: 'Originalgröße',
+        rotate: 'Drehen',
+        download: 'Herunterladen',
+        screen: 'Bildschirmfüllend',
+        exitScreen: 'Bildschirmfüllend beenden',
+        zoom: (percent: number) => `Zoom ${percent} %`,
+        /** Keyboard help of the lightbox */
+        shortcuts: 'Pfeiltasten: Bild wechseln · + und −: Zoom · 0: Originalgröße · R: Drehen · F: Bildschirmfüllend',
+        video: 'Video',
+    },
+    /** Ark names the colour picker parts in English and has no translations for them */
+    colorPicker: {
+        trigger: (color: string) => `Farbe wählen, aktuell ${color}`,
+        /** Name of the trigger without a Field or aria-label */
+        name: 'Farbe',
+        area: 'Sättigung und Helligkeit',
+        hue: 'Farbton',
+        alpha: 'Deckkraft',
+        hex: 'Hex-Wert',
+        swatch: (color: string) => `${color} wählen`,
+        /** ColorInput: the swatch button that opens the picker */
+        open: 'Farbwähler öffnen',
+        eyeDropper: 'Farbe vom Bildschirm aufnehmen',
+        format: 'Format',
+        formats: { rgb: 'RGB', hsl: 'HSL', hsb: 'HSB', oklch: 'OKLCH' } as Record<string, string>,
+        /** Names of the channel fields per format */
+        channels: {
+            rgb: ['Rot', 'Grün', 'Blau'],
+            hsl: ['Farbton', 'Sättigung', 'Helligkeit'],
+            hsb: ['Farbton', 'Sättigung', 'Hellwert'],
+            oklch: ['Helligkeit', 'Buntheit', 'Farbton'],
+        } as Record<string, string[]>,
+        palette: 'Farben',
+    },
+    tree: {
+        treeLabel: 'Baum',
+        moved: (label: string, parent: string | null, position: number, count: number) =>
+            `${label} verschoben${parent ? ` nach ${parent}` : ''}, Position ${position} von ${count}`,
+        /** Row below a branch while its children load */
+        loadingRow: 'Wird geladen …',
+        loadingNode: (label: string) => `${label}: Wird geladen`,
+        loadedNode: {
+            one: '{label}: {count} Eintrag geladen',
+            other: '{label}: {count} Einträge geladen',
+        } as PluralForms,
+        loadError: (label: string) => `${label} konnte nicht geladen werden`,
+        /** Row below a branch whose children failed to load; activating it loads again */
+        retry: 'Laden fehlgeschlagen – erneut versuchen',
+        filter: 'Baum durchsuchen',
+        matches: { one: '{count} Treffer', other: '{count} Treffer' } as PluralForms,
+        noMatches: 'Keine Treffer',
+        expandAll: 'Alle aufklappen',
+        collapseAll: 'Alle zuklappen',
+        cut: (label: string) => `${label} ausgeschnitten – mit Strg+V an einem anderen Knoten einfügen`,
+        cutCancelled: 'Ausschneiden abgebrochen',
+        dropDenied: 'Hier nicht möglich',
+    },
+    treeSelect: {
+        search: 'Suchen',
+        /** Chip for the selected nodes beyond `maxShown` */
+        more: (count: number) => `+${count}`,
+        moreLabel: (count: number) => `${count} weitere ausgewählt`,
+    },
+    cascadeSelect: {
+        search: 'Suchen',
+        /** Button next to the search field that opens the levels */
+        showLevels: 'Ebenen anzeigen',
+        /** First entry of a level with `changeOnSelect`: chooses the level itself */
+        choose: (label: string) => `${label} wählen`,
+        /** A hit of the search: the whole path */
+        path: (labels: string[]) => labels.join(' › '),
+    },
+    timeline: {
+        loadMore: 'Ältere Einträge laden',
+        loading: 'Ältere Einträge werden geladen',
+    },
+    orgChart: {
+        expand: (label: string) => `Team von ${label} anzeigen`,
+        collapse: (label: string) => `Team von ${label} ausblenden`,
+        loading: (label: string) => `${label}: Wird geladen`,
+        retry: (label: string) => `${label}: Laden fehlgeschlagen – erneut versuchen`,
+    },
+    fileUpload: {
+        dropzone: 'Dateien ablegen',
+        itemPreview: (file: File) => `Vorschau von ${file.name}`,
+        deleteFile: (file: File) => `${file.name} entfernen`,
+        dropzoneText: (multiple: boolean): string =>
+            multiple ? 'Dateien hierher ziehen oder' : 'Datei hierher ziehen oder',
+        trigger: (multiple: boolean): string => (multiple ? 'Dateien auswählen' : 'Datei auswählen'),
+        /** Messages for rejected files (Ark FileUpload error codes) */
+        errors: {
+            TOO_MANY_FILES: 'Zu viele Dateien',
+            FILE_INVALID_TYPE: 'Dateityp nicht erlaubt',
+            FILE_TOO_LARGE: 'Datei ist zu groß',
+            FILE_TOO_SMALL: 'Datei ist zu klein',
+            FILE_INVALID: 'Datei ist ungültig',
+            FILE_EXISTS: 'Datei ist schon ausgewählt',
+        } as Record<string, string>,
+        upload: 'Hochladen',
+        uploadAll: 'Alle hochladen',
+        cancel: (file: File) => `Hochladen von ${file.name} abbrechen`,
+        retry: (file: File) => `${file.name} erneut hochladen`,
+        progress: (file: File) => `Fortschritt von ${file.name}`,
+        status: {
+            pending: 'Bereit zum Hochladen',
+            uploading: (percent: number) => `Wird hochgeladen … ${percent} %`,
+            done: 'Hochgeladen',
+            error: 'Hochladen fehlgeschlagen',
+            cancelled: 'Abgebrochen',
+        },
+        /** Announced when an upload ends */
+        uploaded: (file: File) => `${file.name} hochgeladen`,
+        failed: (file: File) => `${file.name} konnte nicht hochgeladen werden`,
+        dropAccept: (multiple: boolean): string =>
+            multiple ? 'Loslassen, um die Dateien hinzuzufügen' : 'Loslassen, um die Datei hinzuzufügen',
+        dropReject: 'Diese Dateien sind hier nicht erlaubt',
+        fullscreen: 'Dateien irgendwo ablegen',
+        /** React Native: where FileUpload takes files from (the pickers of the app) */
+        sources: { documents: 'Dokument wählen', photos: 'Aus Fotos wählen', camera: 'Foto aufnehmen' },
+        pasted: (count: number) => (count === 1 ? '1 Datei eingefügt' : `${count} Dateien eingefügt`),
+    },
+    statistic: { loading: 'Wird geladen' },
+    truncate: { more: 'Mehr anzeigen', less: 'Weniger anzeigen' },
+    overflowList: {
+        /** Hidden part of the "+N" button's name (after the visible "+N") */
+        more: 'weitere',
+        title: 'Weitere Einträge',
+    },
+    toggletip: {
+        label: 'Weitere Informationen',
+        labelFor: (label: string) => `Weitere Informationen zu ${label}`,
+    },
+    checkboxGroup: { maxReached: (max: number) => `Höchstens ${max} auswählbar` },
+    skipLinks: { label: 'Sprunglinks' },
+    hotkeys: {
+        /** Key names for the display (Kbd `hotkey`, HotkeysDialog); Apple devices show symbols */
+        keys: {
+            ctrl: 'Strg',
+            alt: 'Alt',
+            shift: 'Umschalt',
+            meta: 'Win',
+            space: 'Leertaste',
+            enter: 'Eingabe',
+            escape: 'Esc',
+            backspace: 'Rücktaste',
+            delete: 'Entf',
+            tab: 'Tab',
+        },
+        /** Between the steps of a sequence ("G dann I") */
+        then: 'dann',
+        title: 'Tastenkürzel',
+        description: 'Alle Tastenkürzel dieser Seite',
+        empty: 'Keine Tastenkürzel',
+        /** Description of the "?" shortcut */
+        open: 'Tastenkürzel anzeigen',
+        /** Group of shortcuts without their own */
+        general: 'Allgemein',
+        /** Description of the CommandPalette's shortcut */
+        commandPalette: 'Befehle öffnen',
+    },
+    persona: {
+        presence: { online: 'Online', away: 'Abwesend', busy: 'Beschäftigt', offline: 'Offline' } as Record<
+            string,
+            string
+        >,
+    },
+    inlineEdit: {
+        edit: 'bearbeiten',
+        save: 'Speichern',
+        cancel: 'Abbrechen',
+        empty: 'Leer',
+        saving: 'Wird gespeichert …',
+        /** Title of the popover */
+        title: (label: string) => `${label} bearbeiten`,
+    },
+    searchField: { label: 'Suche', placeholder: 'Suchen …', clear: 'Suche löschen', scope: 'Suchbereich' },
+    filterPanel: {
+        label: 'Filter',
+        toggle: 'Filter',
+        /** Hidden part of the toggle's name after the visible count */
+        active: 'aktiv',
+        status: (count: number) =>
+            count === 0 ? 'Keine Filter aktiv' : count === 1 ? '1 Filter aktiv' : `${count} Filter aktiv`,
+    },
+    filterChips: {
+        label: 'Aktive Filter',
+        remove: (label: string) => `Filter ${label} entfernen`,
+        reset: 'Alle zurücksetzen',
+    },
+    conditionBuilder: {
+        label: 'Bedingungen',
+        combinator: 'Verknüpfung',
+        and: 'Und',
+        or: 'Oder',
+        all: 'Alle Bedingungen erfüllt',
+        any: 'Eine Bedingung erfüllt',
+        not: 'Nicht',
+        group: (path: string) => `Gruppe ${path}`,
+        rule: (path: string) => `Bedingung ${path}`,
+        addRule: 'Bedingung hinzufügen',
+        addGroup: 'Gruppe hinzufügen',
+        removeRule: (path: string) => `Bedingung ${path} entfernen`,
+        removeGroup: (path: string) => `Gruppe ${path} entfernen`,
+        field: 'Feld',
+        operator: 'Operator',
+        value: 'Wert',
+        from: 'Von',
+        to: 'Bis',
+        yes: 'Ja',
+        no: 'Nein',
+        empty: 'Keine Bedingungen – alle Einträge passen',
+        /** Operators beyond the DataTable match modes */
+        operators: { empty: 'Ist leer', notEmpty: 'Ist nicht leer', in: 'Ist eins von' } as Record<string, string>,
+        added: 'Bedingung hinzugefügt',
+        groupAdded: 'Gruppe hinzugefügt',
+        removed: 'Bedingung entfernt',
+        groupRemoved: 'Gruppe entfernt',
+        /** The DataTable's toggle */
+        advanced: 'Erweiterter Filter',
+    },
+    formList: {
+        add: 'Eintrag hinzufügen',
+        item: (position: number) => `Eintrag ${position}`,
+        remove: (item: string) => `${item} entfernen`,
+        moveUp: (item: string) => `${item} nach oben`,
+        moveDown: (item: string) => `${item} nach unten`,
+        added: (item: string) => `${item} hinzugefügt`,
+        removed: (item: string) => `${item} entfernt`,
+        moved: (item: string, position: number) => `${item} an Position ${position} verschoben`,
+        max: (max: number) => `Höchstens ${max} Einträge`,
+        min: (min: number) => `Mindestens ${min} Einträge`,
+    },
+    keyValueEditor: {
+        key: 'Schlüssel',
+        value: 'Wert',
+        add: 'Zeile hinzufügen',
+        item: (position: number) => `Zeile ${position}`,
+        duplicate: 'Schlüssel kommt mehrfach vor',
+    },
+    wizard: {
+        summary: 'Zusammenfassung',
+        validating: 'Wird geprüft …',
+        invalid: 'Bitte die Angaben in diesem Schritt prüfen',
+    },
+    aiLabel: {
+        label: 'KI-generiert',
+        explanation:
+            'Dieser Inhalt wurde mit künstlicher Intelligenz erstellt. Bitte prüfen Sie ihn vor der Verwendung.',
+        help: 'Was bedeutet KI-generiert?',
+    },
+    qrCode: {
+        label: (value: string) => `QR-Code: ${value}`,
+        downloadPng: 'Als PNG herunterladen',
+        downloadSvg: 'Als SVG herunterladen',
+    },
+    signaturePad: {
+        label: 'Unterschrift',
+        roleDescription: 'Unterschriftsfeld',
+        control: 'Unterschriftsfeld – mit Maus, Stift oder Finger unterschreiben',
+        placeholder: 'Hier unterschreiben',
+        clear: 'Löschen',
+        undo: 'Rückgängig',
+        type: 'Unterschrift eintippen',
+        draw: 'Unterschrift zeichnen',
+        typedLabel: 'Name als Unterschrift',
+        cleared: 'Unterschrift gelöscht',
+    },
+    imageCropper: {
+        label: 'Bild zuschneiden',
+        roleDescription: 'Bildzuschnitt',
+        loading: 'Bild wird geladen',
+        description: (zoom: number | null, rotation: number | null) =>
+            `Zoom ${Math.round((zoom ?? 1) * 100)} %, gedreht um ${Math.round(rotation ?? 0)} Grad`,
+        selection: (circle: boolean): string => (circle ? 'Kreisförmiger Ausschnitt' : 'Ausschnitt'),
+        selectionRoleDescription: 'verschiebbarer Ausschnitt',
+        instructions:
+            'Pfeiltasten verschieben den Ausschnitt, Alt und Pfeiltasten ändern seine Größe, Plus und Minus zoomen.',
+        selectionValue: (width: number, height: number, x: number, y: number) =>
+            `${width} × ${height} Pixel, Position ${x}, ${y}`,
+        zoomIn: 'Vergrößern',
+        zoomOut: 'Verkleinern',
+        rotateLeft: 'Nach links drehen',
+        rotateRight: 'Nach rechts drehen',
+        flip: 'Horizontal spiegeln',
+        reset: 'Zurücksetzen',
+        toolbar: 'Bild bearbeiten',
+    },
+    floatingPanel: {
+        minimize: 'Minimieren',
+        maximize: 'Maximieren',
+        restore: 'Wiederherstellen',
+        close: 'Schließen',
+        hint: 'Alt und Pfeiltasten verschieben das Fenster, Alt, Umschalt und Pfeiltasten ändern seine Größe.',
+    },
+    jsonViewer: {
+        label: 'JSON-Daten',
+        search: 'Durchsuchen',
+        copy: (path: string) => `${path} kopieren`,
+        copied: (path: string) => `${path} kopiert`,
+        items: (count: number) => (count === 1 ? '1 Eintrag' : `${count} Einträge`),
+        keys: (count: number) => (count === 1 ? '1 Schlüssel' : `${count} Schlüssel`),
+        matches: (count: number) => (count === 0 ? 'Keine Treffer' : count === 1 ? '1 Treffer' : `${count} Treffer`),
+        types: {
+            object: 'Objekt',
+            array: 'Liste',
+            string: 'Text',
+            number: 'Zahl',
+            boolean: 'Wahrheitswert',
+            null: 'leer',
+            undefined: 'undefiniert',
+        } as Record<string, string>,
+    },
+    jsonInput: {
+        format: 'Formatieren',
+        valid: 'Gültiges JSON',
+        invalid: 'Ungültiges JSON',
+        invalidAt: (line: number, column: number) => `Ungültiges JSON in Zeile ${line}, Spalte ${column}`,
+    },
+    downloadTrigger: { label: 'Herunterladen' },
+    marquee: { label: 'Laufband', pause: 'Laufband anhalten', play: 'Laufband fortsetzen' },
+    angleSlider: { label: 'Winkel', value: (degrees: number) => `${degrees} Grad` },
+    mentions: {
+        label: 'Nachricht',
+        suggestions: 'Vorschläge',
+        /** Announced when the suggestions open or change */
+        count: (count: number) =>
+            count === 0 ? 'Keine Vorschläge' : count === 1 ? '1 Vorschlag' : `${count} Vorschläge`,
+        hint: (triggers: string) => `${triggers} öffnet Vorschläge, Pfeiltasten wählen, Eingabe übernimmt`,
+    },
+    phoneInput: {
+        country: 'Land',
+        number: 'Telefonnummer',
+        search: 'Land suchen',
+    },
+    colorSwatchPicker: { label: 'Farbe' },
+    emojiPicker: {
+        /**
+         * Names and search words of the emojis in this language, one per line: "😀 Name|search words" – empty keeps the
+         * English names; the English words always find, too
+         */
+        emojis: `😀 Grinsendes Gesicht|lachen freude fröhlich
+😃 Grinsen mit großen Augen|lachen freude
+😄 Lachendes Gesicht|lachen freude glücklich
+😁 Strahlendes Gesicht|grinsen zähne
+😆 Lachen mit zugekniffenen Augen|lachen lustig
+😅 Lachen mit Schweißtropfen|erleichtert puh
+🤣 Vor Lachen auf dem Boden|lachen lol lustig
+😂 Tränen vor Lachen|lachen lustig weinen
+🙂 Leicht lächelndes Gesicht|lächeln
+🙃 Umgekehrtes Gesicht|ironie albern
+😉 Zwinkerndes Gesicht|zwinkern scherz
+😊 Lächeln mit lachenden Augen|freundlich erröten
+😇 Lächeln mit Heiligenschein|engel unschuldig
+🥰 Lächeln mit Herzen|verliebt liebe
+😍 Herzaugen|verliebt liebe toll
+🤩 Sternaugen|begeistert wow
+😘 Kuss zuwerfen|kuss liebe
+😋 Lecker|genießen essen zunge
+😛 Zunge herausstrecken|frech
+😜 Zwinkern mit Zunge|albern frech
+🤪 Verrücktes Gesicht|albern verrückt
+🤑 Geldgesicht|geld reich
+🤗 Umarmung|umarmen danke
+🤭 Hand vor dem Mund|kichern hoppla
+🤫 Pst|leise geheim ruhe
+🤔 Nachdenkliches Gesicht|denken überlegen hmm
+🤐 Reißverschlussmund|schweigen geheim
+🤨 Hochgezogene Augenbraue|skeptisch zweifel
+😐 Neutrales Gesicht|neutral egal
+😑 Ausdrucksloses Gesicht|genervt egal
+😶 Gesicht ohne Mund|sprachlos
+😏 Süffisantes Lächeln|grinsen schelmisch
+😒 Gelangweiltes Gesicht|unzufrieden genervt
+🙄 Augenrollen|genervt
+😬 Grimasse|peinlich angespannt
+😌 Erleichtertes Gesicht|zufrieden ruhig
+😔 Nachdenklich traurig|traurig
+😪 Müdes Gesicht|schläfrig
+😴 Schlafendes Gesicht|schlafen müde zzz
+😷 Gesicht mit Maske|krank maske
+🤒 Gesicht mit Thermometer|krank fieber
+🤢 Übelkeit|krank übel
+🤧 Niesendes Gesicht|schnupfen erkältung
+🥵 Heißes Gesicht|hitze schwitzen
+🥶 Kaltes Gesicht|kalt frieren
+😵 Benommenes Gesicht|schwindelig
+🤯 Explodierender Kopf|überwältigt wow
+🤠 Cowboy|hut
+🥳 Partygesicht|feiern party geburtstag
+😎 Sonnenbrille|cool lässig
+🤓 Strebergesicht|nerd brille
+🧐 Gesicht mit Monokel|prüfen genau
+😕 Verwirrtes Gesicht|unsicher
+😟 Besorgtes Gesicht|sorge
+🙁 Leicht trauriges Gesicht|traurig
+😮 Offener Mund|überrascht staunen
+😲 Erstauntes Gesicht|überrascht schock
+😳 Errötetes Gesicht|peinlich verlegen
+🥺 Flehendes Gesicht|bitte bettelnd
+😨 Ängstliches Gesicht|angst
+😰 Besorgt mit Schweiß|angst stress
+😢 Weinendes Gesicht|traurig träne
+😭 Laut weinend|traurig weinen
+😱 Schreiendes Gesicht|angst schock horror
+😖 Verwirrtes Gesicht|frustriert
+😞 Enttäuschtes Gesicht|enttäuscht traurig
+😓 Niedergeschlagen mit Schweiß|stress
+😩 Erschöpftes Gesicht|müde fertig
+😫 Müde|erschöpft
+🥱 Gähnendes Gesicht|gähnen müde langweilig
+😤 Triumphierendes Gesicht|schnauben stolz
+😡 Wütendes Gesicht|wut ärger
+😠 Verärgertes Gesicht|ärger böse
+🤬 Fluchendes Gesicht|schimpfen wut
+😈 Lachender Teufel|teufel frech
+💀 Totenkopf|tot schädel
+💩 Kothaufen|lustig
+🤡 Clown|clownsgesicht
+👻 Gespenst|geist halloween
+👽 Außerirdischer|alien ufo
+🤖 Roboter|bot maschine ki
+😺 Lachende Katze|katze
+😻 Katze mit Herzaugen|katze verliebt
+🙈 Nichts sehen|affe peinlich
+🙉 Nichts hören|affe
+🙊 Nichts sagen|affe geheim
+👋 Winkende Hand|hallo tschüss winken
+🤚 Erhobene Hand|stopp melden
+✋ Hand|stopp halt fünf
+🖖 Vulkanischer Gruß|spock
+👌 OK-Zeichen|ok gut perfekt
+🤌 Zusammengelegte Finger|italienisch was
+✌️ Victory-Zeichen|sieg frieden
+🤞 Gekreuzte Finger|glück daumen drücken
+🤟 Ich liebe dich|liebe geste
+🤘 Teufelsgruß|rock metal
+🤙 Ruf mich an|telefon
+👈 Zeigefinger links|links zeigen
+👉 Zeigefinger rechts|rechts zeigen
+👆 Zeigefinger nach oben|oben
+👇 Zeigefinger nach unten|unten
+☝️ Zeigefinger|eins hinweis
+👍 Daumen hoch|gut ja zustimmung like
+👎 Daumen runter|schlecht nein ablehnung
+✊ Erhobene Faust|faust solidarität
+👊 Faust|faustschlag
+👏 Klatschende Hände|applaus bravo klatschen
+🙌 Erhobene Hände|feiern hurra
+👐 Offene Hände|umarmung
+🤲 Handflächen nach oben|bitten
+🤝 Handschlag|vereinbarung deal partner
+🙏 Gefaltete Hände|bitte danke beten
+✍️ Schreibende Hand|schreiben notiz
+💪 Bizeps|stark kraft muskel
+🧠 Gehirn|denken klug
+👀 Augen|schauen sehen
+👁️ Auge|sehen
+👄 Mund|lippen
+👶 Baby|kind säugling
+🧒 Kind|kind
+👦 Junge|kind
+👧 Mädchen|kind
+🧑 Person|mensch
+👨 Mann|mensch
+👩 Frau|mensch
+🧓 Ältere Person|alt senior
+👮 Polizist|polizei
+🕵️ Detektiv|spion ermittler
+👷 Bauarbeiter|baustelle helm
+🧑‍💻 Person am Computer|programmieren entwickler technik
+🧑‍🏫 Lehrkraft|lehrer schule
+🧑‍⚕️ Ärztin oder Arzt|medizin gesundheit
+🧑‍🍳 Koch|kochen küche
+🦸 Superheld|held
+🙋 Person mit erhobener Hand|melden frage hallo
+🤷 Schulterzucken|egal weiß nicht
+🤦 Hand vor die Stirn|facepalm oh nein
+🙇 Verbeugung|entschuldigung danke
+💁 Infoschalter-Person|info hilfe
+🏃 Laufende Person|laufen rennen sport
+🚶 Gehende Person|gehen spazieren
+💃 Tanzende Frau|tanzen party
+🕺 Tanzender Mann|tanzen party
+👨‍👩‍👧 Familie|eltern kind
+👥 Silhouetten|gruppe team leute
+🗣️ Sprechender Kopf|sprechen reden
+🐶 Hundegesicht|hund haustier
+🐱 Katzengesicht|katze haustier
+🐭 Mausgesicht|maus
+🐹 Hamster|haustier
+🐰 Hasengesicht|hase kaninchen ostern
+🦊 Fuchs|fuchs
+🐻 Bär|bär
+🐼 Panda|bär
+🐨 Koala|bär
+🐯 Tigergesicht|tiger
+🦁 Löwe|löwe
+🐮 Kuhgesicht|kuh
+🐷 Schweinegesicht|schwein
+🐸 Frosch|frosch
+🐵 Affengesicht|affe
+🐔 Huhn|huhn vogel
+🐧 Pinguin|vogel
+🐦 Vogel|vogel
+🦆 Ente|vogel
+🦅 Adler|vogel
+🦉 Eule|vogel nacht
+🐝 Biene|honig insekt
+🐛 Raupe|insekt
+🦋 Schmetterling|insekt
+🐌 Schnecke|langsam
+🐞 Marienkäfer|glück insekt
+🐢 Schildkröte|langsam
+🐍 Schlange|reptil
+🐙 Oktopus|krake meer
+🐠 Tropischer Fisch|fisch meer
+🐬 Delfin|meer
+🐳 Wal|meer
+🦈 Hai|meer
+🐊 Krokodil|reptil
+🦒 Giraffe|tier
+🐘 Elefant|tier
+🐴 Pferdegesicht|pferd
+🦄 Einhorn|fantasie
+🐾 Pfotenabdrücke|tier spuren
+💐 Blumenstrauß|blumen geschenk
+🌸 Kirschblüte|blume frühling
+🌹 Rose|blume liebe
+🌻 Sonnenblume|blume sommer
+🌷 Tulpe|blume frühling
+🌱 Keimling|pflanze wachsen
+🌲 Nadelbaum|baum wald
+🌳 Laubbaum|baum
+🌴 Palme|urlaub strand
+🌵 Kaktus|wüste pflanze
+🍀 Kleeblatt|glück
+🍁 Ahornblatt|herbst
+🍂 Herbstlaub|herbst blätter
+🌍 Weltkugel Europa und Afrika|erde welt global
+🌙 Mondsichel|mond nacht
+⭐ Stern|stern
+🌟 Leuchtender Stern|stern glanz
+⚡ Blitz|strom energie schnell
+🔥 Feuer|heiß flamme trend
+🌈 Regenbogen|farben
+☀️ Sonne|sonnig wetter
+⛅ Sonne hinter Wolke|wetter wolkig
+☁️ Wolke|wetter
+🌧️ Regenwolke|regen wetter
+❄️ Schneeflocke|schnee winter kalt
+💧 Tropfen|wasser
+🌊 Welle|meer wasser
+🍏 Grüner Apfel|obst
+🍎 Roter Apfel|obst
+🍐 Birne|obst
+🍊 Mandarine|obst orange
+🍋 Zitrone|obst sauer
+🍌 Banane|obst
+🍉 Wassermelone|obst sommer
+🍇 Trauben|obst wein
+🍓 Erdbeere|obst
+🍒 Kirschen|obst
+🍑 Pfirsich|obst
+🥭 Mango|obst
+🍍 Ananas|obst
+🥥 Kokosnuss|obst
+🥝 Kiwi|obst
+🍅 Tomate|gemüse
+🥑 Avocado|gemüse
+🥦 Brokkoli|gemüse
+🥕 Karotte|möhre gemüse
+🌽 Maiskolben|mais gemüse
+🌶️ Peperoni|scharf
+🥔 Kartoffel|gemüse
+🍄 Pilz|pilz
+🥜 Erdnüsse|nüsse
+🍞 Brot|bäckerei
+🥐 Croissant|frühstück
+🥨 Brezel|bayern
+🧀 Käse|käse
+🥚 Ei|frühstück
+🍳 Spiegelei|frühstück braten
+🥞 Pfannkuchen|frühstück
+🥓 Speck|frühstück
+🍔 Hamburger|burger fastfood
+🍟 Pommes|fastfood
+🍕 Pizza|italienisch
+🌭 Hotdog|würstchen
+🥪 Sandwich|brot
+🌮 Taco|mexikanisch
+🥗 Salat|gesund
+🍝 Spaghetti|nudeln pasta
+🍜 Nudelsuppe|ramen
+🍣 Sushi|japanisch fisch
+🍦 Softeis|eis dessert
+🍩 Donut|süß
+🍪 Keks|süß
+🎂 Geburtstagskuchen|geburtstag torte feiern
+🍰 Kuchenstück|kuchen torte
+🧁 Cupcake|kuchen süß
+🍫 Schokolade|süß
+🍬 Bonbon|süß
+🍯 Honigtopf|honig
+☕ Heißgetränk|kaffee tee pause
+🍵 Tee|tee
+🥤 Becher mit Strohhalm|getränk
+🍺 Bier|getränk prost
+🍻 Anstoßende Biergläser|prost feiern
+🍷 Weinglas|wein getränk
+🥂 Sektgläser|anstoßen feiern prost
+🍾 Sektflasche|feiern
+🍽️ Teller mit Besteck|essen mahlzeit
+🚗 Auto|fahrzeug
+🚕 Taxi|fahrzeug
+🚌 Bus|fahrzeug verkehr
+🚑 Krankenwagen|notfall
+🚒 Feuerwehrauto|feuerwehr
+🚓 Polizeiauto|polizei
+🚚 Lieferwagen|lieferung lkw versand
+🚜 Traktor|landwirtschaft
+🚲 Fahrrad|rad
+🛴 Tretroller|roller
+🏍️ Motorrad|fahrzeug
+🚂 Lokomotive|zug bahn
+🚆 Zug|bahn reise
+🚇 U-Bahn|bahn
+✈️ Flugzeug|fliegen reise urlaub
+🛫 Abflug|fliegen reise
+🛬 Landung|fliegen ankunft
+🚀 Rakete|start launch schnell
+🛸 Ufo|außerirdisch
+🚁 Hubschrauber|fliegen
+⛵ Segelboot|boot segeln
+🚢 Schiff|boot reise
+⚓ Anker|schiff
+⛽ Zapfsäule|tanken benzin
+🚦 Ampel|verkehr
+🚧 Baustelle|arbeit sperrung
+🗺️ Weltkarte|karte reise
+🧭 Kompass|richtung navigation
+🏔️ Schneebedeckter Berg|berg
+🏖️ Strand mit Sonnenschirm|urlaub strand
+🏝️ Insel|urlaub
+🏠 Haus|zuhause heim
+🏡 Haus mit Garten|zuhause
+🏢 Bürogebäude|büro firma arbeit
+🏥 Krankenhaus|klinik
+🏦 Bank|geld
+🏨 Hotel|reise übernachtung
+🏫 Schule|bildung
+🏭 Fabrik|industrie
+🏰 Schloss|burg
+⛪ Kirche|religion
+🗼 Turm|tokio
+🗽 Freiheitsstatue|new york
+🎡 Riesenrad|kirmes
+🌃 Nacht mit Sternen|stadt nacht
+🌅 Sonnenaufgang|morgen
+⏰ Wecker|zeit wecker morgen
+⌛ Sanduhr|zeit warten
+⏱️ Stoppuhr|zeit messen
+🕐 Ein Uhr|uhr zeit
+⚽ Fußball|sport ball
+🏀 Basketball|sport ball
+🏈 Football|sport ball
+⚾ Baseball|sport ball
+🎾 Tennis|sport ball
+🏐 Volleyball|sport ball
+🏓 Tischtennis|sport
+🏸 Badminton|sport
+🥅 Tor|sport
+⛳ Golffahne|golf sport
+🎣 Angel|angeln fisch
+🎿 Ski|wintersport
+🏂 Snowboarder|wintersport
+🏊 Schwimmer|schwimmen sport
+🚴 Radfahrer|fahrrad sport
+🏆 Pokal|sieg gewinner preis
+🥇 Goldmedaille|erster sieg gewinner
+🥈 Silbermedaille|zweiter
+🥉 Bronzemedaille|dritter
+🏅 Sportmedaille|medaille preis
+🎖️ Orden|auszeichnung
+🎫 Eintrittskarte|ticket
+🎟️ Ticket|eintritt
+🎭 Theatermasken|theater kultur
+🎨 Farbpalette|kunst malen design
+🎬 Filmklappe|film kino
+🎤 Mikrofon|singen karaoke
+🎧 Kopfhörer|musik hören
+🎵 Musiknote|musik
+🎶 Musiknoten|musik
+🎹 Klaviatur|klavier musik
+🎸 Gitarre|musik
+🎮 Videospiel|spielen gaming controller
+🕹️ Joystick|spielen gaming
+🎲 Würfel|spiel glück
+🧩 Puzzleteil|puzzle lösung
+♟️ Schachfigur|schach strategie
+🎯 Volltreffer|ziel treffer
+🎳 Bowling|spiel
+🎉 Konfettibombe|feiern party glückwunsch
+🎊 Konfettiball|feiern party
+🎈 Luftballon|party geburtstag
+🎁 Geschenk|geburtstag überraschung
+🎄 Weihnachtsbaum|weihnachten
+🎃 Kürbislaterne|halloween
+✨ Funkeln|glanz neu magie
+⌚ Armbanduhr|uhr zeit
+📱 Mobiltelefon|handy smartphone
+💻 Laptop|computer rechner arbeit
+⌨️ Tastatur|computer tippen
+🖥️ Bildschirm|computer monitor
+🖨️ Drucker|drucken
+🖱️ Computermaus|maus klicken
+💾 Diskette|speichern
+💿 CD|daten musik
+📷 Kamera|foto
+📹 Videokamera|video
+📞 Telefonhörer|telefon anrufen
+☎️ Telefon|anrufen
+📺 Fernseher|tv
+📻 Radio|musik
+🔋 Batterie|akku energie
+🔌 Stecker|strom
+💡 Glühbirne|idee licht tipp
+🔦 Taschenlampe|licht
+🕯️ Kerze|licht
+🗑️ Papierkorb|löschen müll
+💰 Geldsack|geld reich
+💳 Kreditkarte|bezahlen geld
+💶 Euroschein|geld euro
+🧾 Beleg|quittung rechnung
+✉️ Briefumschlag|brief post mail
+📧 E-Mail|mail nachricht
+📨 Eingehender Umschlag|mail empfangen
+📦 Paket|versand lieferung
+📮 Briefkasten|post
+📝 Notiz|schreiben memo
+✏️ Bleistift|schreiben bearbeiten
+🖊️ Kugelschreiber|schreiben
+📁 Ordner|datei ablage
+📂 Geöffneter Ordner|datei
+📄 Dokument|datei seite
+📊 Balkendiagramm|statistik daten chart
+📈 Steigender Trend|wachstum statistik
+📉 Fallender Trend|rückgang statistik
+📅 Kalender|datum termin
+📆 Abreißkalender|datum termin
+📌 Pinnnadel|merken wichtig
+📍 Stecknadel|ort standort
+📎 Büroklammer|anhang
+📏 Lineal|messen
+✂️ Schere|schneiden
+🔒 Geschlossenes Schloss|sicher gesperrt privat
+🔓 Offenes Schloss|entsperrt
+🔑 Schlüssel|passwort zugang
+🔨 Hammer|werkzeug bauen
+🛠️ Werkzeuge|reparieren einstellungen
+⚙️ Zahnrad|einstellungen technik
+🧰 Werkzeugkasten|werkzeug
+🧲 Magnet|anziehen
+🧪 Reagenzglas|labor test chemie
+🔬 Mikroskop|wissenschaft forschung
+🔭 Teleskop|astronomie
+💊 Tablette|medizin
+🩺 Stethoskop|arzt medizin
+🛒 Einkaufswagen|einkaufen shop
+🎒 Rucksack|schule
+👓 Brille|lesen
+📚 Bücher|lesen lernen bibliothek
+📖 Offenes Buch|lesen
+🔍 Lupe|suchen suche
+🔔 Glocke|benachrichtigung
+📣 Megafon|ankündigung
+🏷️ Etikett|tag label preis
+🔗 Link|verknüpfung kette
+❤️ Rotes Herz|liebe herz
+🧡 Oranges Herz|herz
+💛 Gelbes Herz|herz
+💚 Grünes Herz|herz
+💙 Blaues Herz|herz
+💜 Lila Herz|herz
+🖤 Schwarzes Herz|herz
+🤍 Weißes Herz|herz
+💔 Gebrochenes Herz|trauer liebe
+💕 Zwei Herzen|liebe
+💯 Hundert Punkte|perfekt voll
+💢 Ärger-Symbol|wut
+💥 Zusammenstoß|knall boom
+💫 Schwindelig|sterne
+💬 Sprechblase|nachricht kommentar chat
+💭 Gedankenblase|denken
+💤 Schlafen|zzz müde
+✅ Weißes Häkchen auf Grün|erledigt ja fertig ok
+☑️ Abgehaktes Kästchen|erledigt
+✔️ Häkchen|ok richtig
+❌ Kreuz|nein falsch fehler löschen
+❎ Kreuz-Schaltfläche|nein
+➕ Plus|hinzufügen mehr
+➖ Minus|weniger entfernen
+❓ Fragezeichen|frage hilfe
+❗ Ausrufezeichen|wichtig achtung
+⚠️ Warnung|achtung vorsicht
+⛔ Zutritt verboten|stopp verbot
+🚫 Verboten|nein verbot
+♻️ Recycling|umwelt
+✳️ Achtzackiger Stern|stern
+🆕 Neu|neu
+🆗 OK|ok
+🆘 SOS|hilfe notfall
+🔴 Roter Kreis|rot punkt
+🟠 Oranger Kreis|orange punkt
+🟡 Gelber Kreis|gelb punkt
+🟢 Grüner Kreis|grün punkt
+🔵 Blauer Kreis|blau punkt
+🟣 Lila Kreis|lila punkt
+⚫ Schwarzer Kreis|schwarz punkt
+⚪ Weißer Kreis|weiß punkt
+🔺 Rotes Dreieck|nach oben
+🔻 Rotes Dreieck nach unten|nach unten
+⬆️ Pfeil nach oben|oben hoch
+⬇️ Pfeil nach unten|unten runter
+⬅️ Pfeil nach links|links zurück
+➡️ Pfeil nach rechts|rechts weiter
+🔄 Pfeile gegen den Uhrzeigersinn|aktualisieren neu laden
+🔁 Wiederholen|schleife
+▶️ Wiedergabe|abspielen play
+⏸️ Pause|pause
+⏹️ Stopp|stopp
+🔇 Stumm|ton aus
+🔊 Lautsprecher laut|ton an
+©️ Copyright|recht
+®️ Eingetragene Marke|marke
+™️ Markenzeichen|marke
+#️⃣ Raute|hashtag nummer
+🔢 Zahlen|nummer
+ℹ️ Information|info hinweis
+🏁 Zielflagge|ziel rennen fertig
+🚩 Dreiecksflagge|markierung warnung
+🏳️ Weiße Flagge|aufgeben
+🇩🇪 Flagge Deutschland|deutschland
+🇦🇹 Flagge Österreich|österreich
+🇨🇭 Flagge Schweiz|schweiz
+🇪🇺 Flagge Europäische Union|eu europa`,
+        label: 'Emojis',
+        search: 'Emoji suchen',
+        categoryNav: 'Kategorien',
+        categories: {
+            recent: 'Zuletzt verwendet',
+            smileys: 'Smileys & Gefühle',
+            people: 'Menschen & Gesten',
+            nature: 'Tiere & Natur',
+            food: 'Essen & Trinken',
+            travel: 'Reisen & Orte',
+            activities: 'Aktivitäten',
+            objects: 'Objekte',
+            symbols: 'Symbole',
+        } as Record<string, string>,
+        results: 'Suchergebnisse',
+        empty: 'Keine Emojis gefunden',
+        count: (count: number) => (count === 0 ? 'Keine Emojis' : count === 1 ? '1 Emoji' : `${count} Emojis`),
+    },
+    ringProgress: { label: 'Fortschritt' },
+    sortable: {
+        instructions:
+            'Leertaste oder Eingabetaste nimmt auf. Dann mit den Pfeiltasten verschieben, mit Leertaste ablegen oder mit Escape abbrechen. Mit der Maus: ziehen, oder klicken und an der Zielstelle erneut klicken.',
+        handle: (item: string) => `${item} verschieben`,
+        empty: 'Keine Einträge – hierher verschieben',
+        picked: (item: string, position: number, count: number) =>
+            `${item} aufgenommen, Position ${position} von ${count}.`,
+        moved: (item: string, position: number, count: number) => `${item}: Position ${position} von ${count}.`,
+        movedTo: (item: string, container: string, position: number, count: number) =>
+            `${item} in ${container}, Position ${position} von ${count}.`,
+        dropped: (item: string, position: number, count: number) =>
+            `${item} abgelegt, Position ${position} von ${count}.`,
+        cancelled: (item: string, position: number, count: number) =>
+            `Verschieben abgebrochen. ${item} wieder an Position ${position} von ${count}.`,
+    },
+    logViewer: {
+        label: 'Protokoll',
+        search: 'Protokoll durchsuchen',
+        levels: { debug: 'Debug', info: 'Info', warn: 'Warnung', error: 'Fehler' } as Record<string, string>,
+        levelFilter: 'Ebenen',
+        autoScroll: 'Mitlaufen',
+        loadMore: 'Ältere Einträge laden',
+        jumpToEnd: 'Zum Ende',
+        lines: (shown: number, total: number) => (shown === total ? `${total} Zeilen` : `${shown} von ${total} Zeilen`),
+        empty: 'Keine Einträge',
+        paused: 'Mitlaufen angehalten',
+    },
+    kanban: {
+        /** React Native: action that moves a card to another column */
+        moveTo: (column: string) => `Nach „${column}“ verschieben`,
+        label: 'Board',
+        count: (count: number, limit?: number) => (limit ? `${count}/${limit}` : String(count)),
+        cards: (count: number, limit?: number) =>
+            `${count === 1 ? '1 Karte' : `${count} Karten`}${limit ? `, Limit ${limit}` : ''}`,
+        limitReached: 'WIP-Limit erreicht',
+        limitExceeded: (count: number, limit: number) => `WIP-Limit überschritten: ${count} von ${limit}`,
+        collapse: (column: string) => `${column} einklappen`,
+        expand: (column: string) => `${column} ausklappen`,
+        loadMore: 'Weitere laden',
+        empty: 'Keine Karten – hierher verschieben',
+    },
+    chatMessages: {
+        label: 'Nachrichten',
+        empty: 'Noch keine Nachrichten',
+        jump: 'Zu neuen Nachrichten',
+        newCount: (count: number) => (count === 1 ? '1 neue Nachricht' : `${count} neue Nachrichten`),
+        announce: (author: string, text: string) => `${author}: ${text}`,
+        today: 'Heute',
+        yesterday: 'Gestern',
+        loadMore: 'Ältere Nachrichten laden',
+    },
+    chatMessage: {
+        status: { sending: 'Wird gesendet', sent: 'Gesendet', read: 'Gelesen', error: 'Nicht gesendet' } as Record<
+            string,
+            string
+        >,
+        writing: 'Antwort wird erstellt',
+        attachments: 'Anhänge',
+        you: 'Sie',
+        assistant: 'Assistent',
+    },
+    chatPrompt: {
+        label: 'Nachricht',
+        placeholder: 'Nachricht schreiben …',
+        send: 'Senden',
+        stop: 'Antwort stoppen',
+        attach: 'Datei anhängen',
+        removeFile: (name: string) => `${name} entfernen`,
+        hint: 'Enter sendet, Umschalt+Enter für eine neue Zeile',
+        hintModEnter: 'Strg+Enter sendet',
+    },
+    chatSources: { title: (count: number) => (count === 1 ? '1 Quelle' : `${count} Quellen`) },
+    chatToolCall: {
+        title: (name: string) => `Werkzeug: ${name}`,
+        status: { running: 'Läuft …', done: 'Fertig', error: 'Fehler' } as Record<string, string>,
+        input: 'Eingabe',
+        output: 'Ergebnis',
+    },
+    chatThinking: {
+        active: 'Denkt nach …',
+        done: 'Gedankengang',
+        duration: (seconds: number) => `${seconds} s nachgedacht`,
+    },
+    authForm: {
+        titles: {
+            signIn: 'Anmelden',
+            signUp: 'Konto erstellen',
+            reset: 'Passwort zurücksetzen',
+            code: 'Code eingeben',
+        } as Record<string, string>,
+        descriptions: {
+            signIn: 'Mit E-Mail-Adresse und Passwort',
+            signUp: 'In wenigen Schritten zum eigenen Konto',
+            reset: 'Wir schicken Ihnen einen Link zum Zurücksetzen.',
+            code: 'Den Code aus der E-Mail oder der Authentifizierungs-App eingeben',
+        } as Record<string, string>,
+        submit: { signIn: 'Anmelden', signUp: 'Registrieren', reset: 'Link senden', code: 'Bestätigen' } as Record<
+            string,
+            string
+        >,
+        name: 'Name',
+        email: 'E-Mail-Adresse',
+        password: 'Passwort',
+        passwordHint: (min: number) => `Mindestens ${min} Zeichen`,
+        code: 'Einmalcode',
+        remember: 'Angemeldet bleiben',
+        forgot: 'Passwort vergessen?',
+        or: 'oder',
+        providers: 'Anmelden mit',
+        noAccount: 'Noch kein Konto?',
+        signUpLink: 'Registrieren',
+        hasAccount: 'Schon ein Konto?',
+        signInLink: 'Anmelden',
+        back: 'Zurück zur Anmeldung',
+        resetSent: 'Falls ein Konto zu dieser Adresse existiert, ist ein Link unterwegs.',
+        sending: 'Wird gesendet …',
+    },
+    sessionTimeout: {
+        title: 'Sitzung läuft bald ab',
+        description: 'Aus Sicherheitsgründen werden Sie bei Inaktivität abgemeldet. Möchten Sie angemeldet bleiben?',
+        remaining: 'Verbleibende Zeit',
+        extend: 'Angemeldet bleiben',
+        signOut: 'Abmelden',
+        expiredTitle: 'Sitzung abgelaufen',
+        expired: 'Sie wurden aus Sicherheitsgründen abgemeldet.',
+        close: 'Schließen',
+    },
+    /** Messages of the validators (isRequired, isEmail …) */
+    validation: {
+        required: 'Pflichtfeld',
+        email: 'Bitte eine gültige E-Mail-Adresse eingeben',
+        url: 'Bitte eine gültige Adresse eingeben (https://…)',
+        minLength: (min: number) => `Mindestens ${min} Zeichen`,
+        maxLength: (max: number) => `Höchstens ${max} Zeichen`,
+        length: (min: number, max: number) => `${min} bis ${max} Zeichen`,
+        min: (min: string) => `Mindestens ${min}`,
+        max: (max: string) => `Höchstens ${max}`,
+        range: (min: string, max: string) => `Zwischen ${min} und ${max}`,
+        number: 'Bitte eine Zahl eingeben',
+        integer: 'Bitte eine ganze Zahl eingeben',
+        pattern: 'Das Format stimmt nicht',
+        matches: 'Die Eingaben stimmen nicht überein',
+        iban: 'Bitte eine gültige IBAN eingeben',
+        phone: 'Bitte eine gültige Telefonnummer eingeben',
+    },
+};
+
+export default de;
diff --git a/packages/recipes/src/native/index.ts b/packages/recipes/src/native/index.ts
index 4455484..51a2d97 100644
--- a/packages/recipes/src/native/index.ts
+++ b/packages/recipes/src/native/index.ts
@@ -35,6 +35,7 @@ export {
     defaultLocale,
     formatFileSize,
     messages,
+    csvSeparator,
     numberSeparators,
     parseLocaleNumber,
     pluralText,
diff --git a/packages/recipes/src/table-view.ts b/packages/recipes/src/table-view.ts
index 7a13951..a8820b2 100644
--- a/packages/recipes/src/table-view.ts
+++ b/packages/recipes/src/table-view.ts
@@ -226,7 +226,7 @@ export const exportColumns = <T>(columns: readonly TableViewColumn<T>[]) =>
 
 /** Options of the CSV of a table */
 export interface TableCsvOptions {
-    /** Separator, default ";" (opens in a German Excel) */
+    /** Separator (default ";"; the DataTable passes its `csvSeparator`, by default from the locale) */
     separator?: string;
     /** Byte order mark at the start, so Excel reads UTF-8 – default true */
     bom?: boolean;
diff --git a/packages/vue/.storybook/preview.ts b/packages/vue/.storybook/preview.ts
index 12d8e27..01810c6 100644
--- a/packages/vue/.storybook/preview.ts
+++ b/packages/vue/.storybook/preview.ts
@@ -10,6 +10,7 @@ import { h } from 'vue';
 import { LocaleProvider, registerLocale } from '../src/index.js';
 import { ar } from '../src/locales/ar.js';
 import { cs } from '../src/locales/cs.js';
+import { de } from '../src/locales/de.js';
 import { es } from '../src/locales/es.js';
 import { fr } from '../src/locales/fr.js';
 import { hu } from '../src/locales/hu.js';
@@ -23,7 +24,7 @@ import { tr } from '../src/locales/tr.js';
 import './preview.css';
 
 // The toolbar languages that are not built in – an app registers the ones it needs the same way
-const locales = { fr, es, it, pt, 'pt-BR': ptBR, nl, pl, cs, hu, lv, tr, ar };
+const locales = { de, fr, es, it, pt, 'pt-BR': ptBR, nl, pl, cs, hu, lv, tr, ar };
 for (const [code, texts] of Object.entries(locales)) registerLocale(code, texts);
 
 // The story inside LocaleProvider; lang and dir on <html> like an app would set them
diff --git a/packages/vue/src/components/EmojiPicker/EmojiPicker.stories.ts b/packages/vue/src/components/EmojiPicker/EmojiPicker.stories.ts
index 0165130..5bfc27b 100644
--- a/packages/vue/src/components/EmojiPicker/EmojiPicker.stories.ts
+++ b/packages/vue/src/components/EmojiPicker/EmojiPicker.stories.ts
@@ -20,7 +20,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Search (English names, German too in a German locale), categories, a grid with arrow keys; recent ones first */
+/** Search (English names, with a language module like German also its names), categories, a grid with arrow keys; recent ones first */
 export const Playground: Story = {};
 
 /** Own emojis (e.g. reactions) */
diff --git a/packages/vue/src/components/EmojiPicker/EmojiPicker.vue b/packages/vue/src/components/EmojiPicker/EmojiPicker.vue
index b2f06f9..dcc9524 100644
--- a/packages/vue/src/components/EmojiPicker/EmojiPicker.vue
+++ b/packages/vue/src/components/EmojiPicker/EmojiPicker.vue
@@ -67,9 +67,7 @@ const icons: Record<EmojiCategory, string> = {
     symbols: '❤️',
 };
 
-const all = computed(
-    () => props.emojis ?? localeEmojis(locale.value.locale, locale.value.translations.emojiPicker.emojis)
-);
+const all = computed(() => props.emojis ?? localeEmojis(t.value.emojis));
 const stored = useLocalStorage<string[]>(props.recentKey, []);
 const recentEntries = computed(() =>
     props.recent
@@ -135,8 +133,9 @@ function onSearchKeydown(event: KeyboardEvent) {
 
 <template>
     <!--
-        Emoji picker: search (German words), categories, a grid (arrow keys, Home/End, Ctrl+Home/End; Enter or
-        Space chooses); the name of the focused emoji is shown below. Recently used emojis come first.
+        Emoji picker: search (English words and those of a language module), categories, a grid (arrow keys, Home/End,
+        Ctrl+Home/End; Enter or Space chooses); the name of the focused emoji is shown below. Recently used emojis come
+        first.
     -->
     <div
         v-bind="{ ...attrs, class: styles.base({ class: normalizeClass(attrs.class) }) }"
diff --git a/packages/vue/src/data-table/DataTable.vue b/packages/vue/src/data-table/DataTable.vue
index 4c3f136..b544d8b 100644
--- a/packages/vue/src/data-table/DataTable.vue
+++ b/packages/vue/src/data-table/DataTable.vue
@@ -49,6 +49,7 @@ import {
     applyPending,
     changesByRow,
     conditionFieldsFromColumns,
+    csvSeparator,
     emptyConditionGroup,
     isActiveCondition,
     matchesCondition,
@@ -294,6 +295,9 @@ export interface DataTableProps<T> {
     pinnedColumns?: { start: string[]; end: string[] };
     /** Shows an export button; the CSV has the filtered and sorted rows of all pages (or the selection) */
     exportFilename?: string;
+    /** Separator of the CSV export, also of the export button – default: from the locale (";" where numbers have a
+     * decimal comma, e.g. de-DE, as a spreadsheet there expects it; "," otherwise) */
+    csvSeparator?: string;
     /** Formats of the export button: CSV (default), Excel (.xlsx) or both */
     exportFormats?: ('csv' | 'xlsx')[];
     /** Groups the rows by the values of these columns (expandable group rows) – v-model:group-by */
@@ -390,6 +394,7 @@ const props = withDefaults(defineProps<DataTableProps<TData>>(), {
     columnOrder: undefined,
     pinnedColumns: undefined,
     exportFilename: undefined,
+    csvSeparator: undefined,
     groupBy: undefined,
     frozenRows: undefined,
     rowActions: undefined,
@@ -2371,7 +2376,8 @@ function generateCsv(options: DataTableCsvOptions = {}) {
                 : display(column, row.getValue(column.id), row.original)
         )
     );
-    const csv = toCsv([visible.map((column) => column.exportHeader ?? column.header), ...records], options.separator);
+    const separator = options.separator ?? props.csvSeparator ?? localeCsvSeparator(localeContext.value.locale);
+    const csv = toCsv([visible.map((column) => column.exportHeader ?? column.header), ...records], separator);
     return options.bom === false ? csv.slice(1) : csv;
 }
 /** Downloads the CSV – `true` (or `{ selectionOnly: true }`) only the selected rows */
diff --git a/packages/vue/src/data-table/types.ts b/packages/vue/src/data-table/types.ts
index d671c45..3599b92 100644
--- a/packages/vue/src/data-table/types.ts
+++ b/packages/vue/src/data-table/types.ts
@@ -159,7 +159,7 @@ export interface DataTableAllSelection {
 export interface DataTableCsvOptions {
     /** Only the selected rows (default: the filtered and sorted rows of all pages) */
     selectionOnly?: boolean;
-    /** Separator, default ";" (opens in a German Excel) */
+    /** Separator – default: `csvSeparator` of the table, else from the locale (";" with a decimal comma, "," otherwise) */
     separator?: string;
     /** Byte order mark at the start, so Excel reads UTF-8 – default true */
     bom?: boolean;
diff --git a/packages/vue/src/locale.ts b/packages/vue/src/locale.ts
index 37fba57..35a07ba 100644
--- a/packages/vue/src/locale.ts
+++ b/packages/vue/src/locale.ts
@@ -8,7 +8,7 @@ export function provideLocale(locale: ComputedRef<ResolvedLocale>) {
     provide(key, locale);
 }
 
-/** Locale, writing direction and texts of the nearest LocaleProvider – German without one */
+/** Locale, writing direction and texts of the nearest LocaleProvider – English (en-US) without one */
 export function useLocale(): ComputedRef<ResolvedLocale> {
     return inject(key, fallback);
 }
diff --git a/packages/vue/src/locales/de.ts b/packages/vue/src/locales/de.ts
new file mode 100644
index 0000000..c127a38
--- /dev/null
+++ b/packages/vue/src/locales/de.ts
@@ -0,0 +1,2 @@
+// German texts: registerLocale('de', de) at app start, or pass them to LocaleProvider (translations)
+export { de, de as default } from '@wirecore/wirelayer-recipes/locales/de';

From b7530a81b67ca2c593a302842800545f2dadbd20 Mon Sep 17 00:00:00 2001
From: Florian Laabs <florian.laabs@wirecore.net>
Date: Fri, 23 Oct 2026 20:34:15 +0200
Subject: [PATCH 5/5] feat: DataTable feature modules for virtual rows, date
 and number inputs

Parts of the DataTable that bring a lot of code along are imported on their own and passed in `features`: virtualRows (from /virtual, the only import of TanStack Virtual), dateInput and numberInput. Without them date and number filters and editors use the browser's inputs and `virtual` renders all rows with a hint in development. A minimal table is about a fifth smaller (gzip).

Signed-off-by: Florian Laabs <florian.laabs@wirecore.net>
---
 .changeset/datatable-feature-modules.md       | 22 ++++++
 README.md                                     | 22 +++---
 apps/storybook/src/Introduction.mdx           | 27 +++++++
 docs/architecture.md                          |  6 +-
 .../ConditionBuilder.stories.tsx              |  3 +-
 .../ConditionBuilder.stories.ts               |  4 +-
 packages/mcp/data/components.json             | 28 +++++++-
 packages/mcp/scripts/collect.ts               |  1 +
 packages/parity/src/cases.ts                  | 13 +++-
 packages/parity/src/data-table.test.ts        | 50 ++++++++++++-
 packages/parity/src/harness.ts                |  7 +-
 .../src/data-table/DataTable.stories.tsx      | 35 +++++++++-
 packages/react/src/data-table/DataTable.tsx   | 58 +++++++++++----
 packages/react/src/data-table/ValueInput.tsx  | 35 ++++++++--
 packages/react/src/data-table/features.ts     |  5 ++
 packages/react/src/data-table/index.ts        |  9 ++-
 packages/react/src/data-table/inputs.ts       |  8 +++
 packages/react/src/data-table/types.ts        | 35 +++++++++-
 packages/react/src/virtual/index.ts           |  2 +
 packages/react/src/virtual/virtual-rows.ts    |  5 ++
 .../vue/src/data-table/DataTable.stories.ts   | 70 ++++++++++++++++++-
 packages/vue/src/data-table/DataTable.vue     | 45 ++++++++----
 packages/vue/src/data-table/ValueInput.vue    | 37 ++++++++--
 packages/vue/src/data-table/features.ts       |  5 ++
 packages/vue/src/data-table/index.ts          |  9 ++-
 packages/vue/src/data-table/inputs.ts         |  8 +++
 packages/vue/src/data-table/types.ts          | 32 +++++++++
 packages/vue/src/virtual/index.ts             |  2 +
 packages/vue/src/virtual/virtual-rows.ts      |  5 ++
 29 files changed, 519 insertions(+), 69 deletions(-)
 create mode 100644 .changeset/datatable-feature-modules.md
 create mode 100644 packages/react/src/data-table/inputs.ts
 create mode 100644 packages/react/src/virtual/virtual-rows.ts
 create mode 100644 packages/vue/src/data-table/inputs.ts
 create mode 100644 packages/vue/src/virtual/virtual-rows.ts

diff --git a/.changeset/datatable-feature-modules.md b/.changeset/datatable-feature-modules.md
new file mode 100644
index 0000000..9faa76c
--- /dev/null
+++ b/.changeset/datatable-feature-modules.md
@@ -0,0 +1,22 @@
+---
+'@wirecore/wirelayer-vue': minor
+'@wirecore/wirelayer-react': minor
+---
+
+**Breaking:** DataTable feature modules. Parts of the DataTable that bring a lot of code along are imported on their own
+and passed in `features` – a minimal table is about a fifth smaller (gzip), and `@tanstack/vue-virtual` or
+`@tanstack/react-virtual` is only needed for virtual rows.
+
+- `virtual` needs the feature `virtualRows` from `/virtual`; without it all rows are rendered (with a hint in
+  development).
+- Date and number filters and editors use the browser's inputs; the DatePicker and NumberInput come with the features
+  `dateInput` and `numberInput` from `/data-table`.
+
+```tsx
+import { DataTable, dateInput, numberInput } from '@wirecore/wirelayer-react/data-table'; // or -vue
+import { virtualRows } from '@wirecore/wirelayer-react/virtual';
+
+const features = [virtualRows, dateInput, numberInput];
+
+<DataTable data={rows} columns={columns} features={features} scrollHeight="480px" virtual />;
+```
diff --git a/README.md b/README.md
index ba2d20d..0a23cff 100644
--- a/README.md
+++ b/README.md
@@ -73,17 +73,17 @@ All components and props: Storybook and `llms.txt`, or the MCP server `@wirecore
 What a large library needs lives in its own subpaths – it only ends up in the bundle when the app imports it, and then
 needs the respective peer dependency:
 
-| Subpath           | Vue / React                             | React Native (`@wirecore/wirelayer-native/…`)        |
-| ----------------- | --------------------------------------- | ---------------------------------------------------- |
-| `/form`           | TanStack Form, validators, FormList     | TanStack Form                                        |
-| `/data-table`     | DataTable (TanStack Table + Virtual)    | DataTable without TanStack (table or cards)          |
-| `/virtual`        | VirtualSelect, VirtualList, VirtualTree | –                                                    |
-| `/chart`          | Charts on Chart.js                      | Charts on react-native-svg                           |
-| `/editor`         | Rich text editor on Tiptap              | –                                                    |
-| `/code`           | CodeHighlight on Shiki (`shiki/core`)   | CodeHighlight on Shiki (JavaScript RegExp engine)    |
-| `/pdf`            | PdfViewer on pdf.js (`pdfjs-dist`)      | PdfViewer on react-native-pdf (development build)    |
-| `/locales/<code>` | Language modules (see below)            | Language modules                                     |
-| `/expo-*`         | –                                       | `expo-sharing`, `expo-clipboard`, file/image pickers |
+| Subpath           | Vue / React                                                        | React Native (`@wirecore/wirelayer-native/…`)        |
+| ----------------- | ------------------------------------------------------------------ | ---------------------------------------------------- |
+| `/form`           | TanStack Form, validators, FormList                                | TanStack Form                                        |
+| `/data-table`     | DataTable (TanStack Table)                                         | DataTable without TanStack (table or cards)          |
+| `/virtual`        | VirtualSelect, VirtualList, VirtualTree, `virtualRows` (DataTable) | –                                                    |
+| `/chart`          | Charts on Chart.js                                                 | Charts on react-native-svg                           |
+| `/editor`         | Rich text editor on Tiptap                                         | –                                                    |
+| `/code`           | CodeHighlight on Shiki (`shiki/core`)                              | CodeHighlight on Shiki (JavaScript RegExp engine)    |
+| `/pdf`            | PdfViewer on pdf.js (`pdfjs-dist`)                                 | PdfViewer on react-native-pdf (development build)    |
+| `/locales/<code>` | Language modules (see below)                                       | Language modules                                     |
+| `/expo-*`         | –                                                                  | `expo-sharing`, `expo-clipboard`, file/image pickers |
 
 ## Languages
 
diff --git a/apps/storybook/src/Introduction.mdx b/apps/storybook/src/Introduction.mdx
index 5427d03..c82dc00 100644
--- a/apps/storybook/src/Introduction.mdx
+++ b/apps/storybook/src/Introduction.mdx
@@ -197,6 +197,33 @@ import { DataTable } from '@wirecore/wirelayer-react/data-table';
 </DataTable>
 ```
 
+## DataTable feature modules
+
+Parts of the DataTable that bring a lot of code along are imported on their own – an app only bundles the ones it passes
+in `features` (fixed for the life of a table). The DatePicker alone is about 40 KB (gzip).
+
+| Feature       | Import                                                                 | Adds                                                 | Without it                                   |
+| ------------- | ---------------------------------------------------------------------- | ---------------------------------------------------- | -------------------------------------------- |
+| `virtualRows` | `@wirecore/wirelayer-react/virtual` (peer dependency TanStack Virtual) | only the visible rows are rendered with `virtual`    | all rows are rendered, a hint in development |
+| `dateInput`   | `@wirecore/wirelayer-react/data-table`                                 | DatePicker for `date` and `datetime` filters/editors | the browser's date input                     |
+| `numberInput` | `@wirecore/wirelayer-react/data-table`                                 | NumberInput for `number` filters and editors         | the browser's number input                   |
+
+```tsx
+import { DataTable, dateInput, numberInput } from '@wirecore/wirelayer-react/data-table';
+import { virtualRows } from '@wirecore/wirelayer-react/virtual';
+
+// Once for all tables of the app
+const features = [virtualRows, dateInput, numberInput];
+
+<DataTable data={rows} columns={columns} features={features} scrollHeight="480px" virtual />;
+```
+
+```vue
+<DataTable :data="rows" :columns="columns" :features="features" scroll-height="480px" virtual />
+```
+
+Vue: the same imports from `@wirecore/wirelayer-vue/data-table` and `@wirecore/wirelayer-vue/virtual`.
+
 ## AI assistants (MCP, llms.txt)
 
 So that Claude, Cursor and others use the components correctly, the API is available as text and as an MCP server:
diff --git a/docs/architecture.md b/docs/architecture.md
index 1f7a041..c638c5e 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -25,7 +25,7 @@
 | Variants              | [tailwind-variants](https://www.tailwind-variants.org) – framework-neutral, also usable in React Native                                                                                                                                                                                                                                                    |
 | Vue and React         | Developed side by side, API parity from day one                                                                                                                                                                                                                                                                                                            |
 | CSS classes (`.wc-*`) | **Generated** from the recipes, never maintained by hand                                                                                                                                                                                                                                                                                                   |
-| TanStack              | Form bindings and DataTable as subpaths with an optional peer dependency (`@wirecore/wirelayer-vue/form`, `@wirecore/wirelayer-react/data-table` …) · Virtual for long lists                                                                                                                                                                               |
+| TanStack              | Form bindings and DataTable as subpaths with an optional peer dependency (`@wirecore/wirelayer-vue/form`, `@wirecore/wirelayer-react/data-table` …) · Virtual for long lists · DataTable feature modules (`features`): `virtualRows` from `/virtual`, `dateInput`/`numberInput` – only what a table gets ends up in the bundle                             |
 | Third-party libraries | Only as optional peer dependencies behind their own subpaths (`/chart`, `/editor`, `/code`, `/pdf` …); MIT-compatible license, no pro/commercial packages (`@tiptap-pro/*`, `uniwind-pro`)                                                                                                                                                                 |
 | Icons                 | Lucide: `@lucide/vue` (successor of `lucide-vue-next`), `lucide-react`, `lucide-react-native`                                                                                                                                                                                                                                                              |
 | Fonts                 | Local via `@fontsource-variable/*` – no Google Fonts CDN (GDPR)                                                                                                                                                                                                                                                                                            |
@@ -85,8 +85,8 @@ stable technical API that matches the scope `@wirecore`, or infrastructure:
    ├─► @wirecore/wirelayer-css     generated .wc-* classes for HTML & server templates (+ fonts with OFL.txt)
    ├─► @wirecore/wirelayer-vue     Ark UI Vue    + recipes + Lucide
    │      ├─ /form         TanStack Form, validators    (optional)
-   │      ├─ /data-table   TanStack Table + Virtual     (optional)
-   │      ├─ /virtual      TanStack Virtual             (optional)
+   │      ├─ /data-table   TanStack Table               (optional)
+   │      ├─ /virtual      TanStack Virtual, virtualRows (optional)
    │      ├─ /chart        Chart.js                     (optional)
    │      ├─ /editor       Tiptap                       (optional)
    │      ├─ /code         Shiki (shiki/core + language allowlist, optional)
diff --git a/packages/blocks-react/src/ConditionBuilder/ConditionBuilder.stories.tsx b/packages/blocks-react/src/ConditionBuilder/ConditionBuilder.stories.tsx
index 7d5503f..1640a69 100644
--- a/packages/blocks-react/src/ConditionBuilder/ConditionBuilder.stories.tsx
+++ b/packages/blocks-react/src/ConditionBuilder/ConditionBuilder.stories.tsx
@@ -5,7 +5,7 @@ import {
     type ConditionField,
     type ConditionGroup,
 } from '@wirecore/wirelayer-recipes';
-import { DataTable, type DataTableColumn } from '@wirecore/wirelayer-react/data-table';
+import { DataTable, dateInput, numberInput, type DataTableColumn } from '@wirecore/wirelayer-react/data-table';
 import { useState } from 'react';
 import { ConditionBuilder, type ConditionBuilderProps } from './ConditionBuilder.js';
 
@@ -135,6 +135,7 @@ function TableWithBuilder() {
         <DataTable
             data={machines}
             columns={machineColumns}
+            features={[dateInput, numberInput]}
             caption="Machines"
             getRowId={(row) => row.id}
             rowLabel={(row) => row.id}
diff --git a/packages/blocks-vue/src/ConditionBuilder/ConditionBuilder.stories.ts b/packages/blocks-vue/src/ConditionBuilder/ConditionBuilder.stories.ts
index 6c9822a..bb6bd36 100644
--- a/packages/blocks-vue/src/ConditionBuilder/ConditionBuilder.stories.ts
+++ b/packages/blocks-vue/src/ConditionBuilder/ConditionBuilder.stories.ts
@@ -5,7 +5,7 @@ import {
     type ConditionField,
     type ConditionGroup,
 } from '@wirecore/wirelayer-recipes';
-import { DataTable, type DataTableColumn } from '@wirecore/wirelayer-vue/data-table';
+import { DataTable, dateInput, numberInput, type DataTableColumn } from '@wirecore/wirelayer-vue/data-table';
 import { computed, ref, type ConcreteComponent } from 'vue';
 import ConditionBuilder from './ConditionBuilder.vue';
 
@@ -133,6 +133,7 @@ export const InDataTable: Story = {
         setup: () => ({
             rows: machines,
             columns: machineColumns,
+            features: [dateInput, numberInput],
             getRowId: (row: Machine) => row.id,
             tree: ref<ConditionGroup>({
                 type: 'group',
@@ -146,6 +147,7 @@ export const InDataTable: Story = {
                 v-model:advanced-filter-value="tree"
                 :data="rows"
                 :columns="columns"
+                :features="features"
                 caption="Machines"
                 :get-row-id="getRowId"
                 :row-label="getRowId"
diff --git a/packages/mcp/data/components.json b/packages/mcp/data/components.json
index 89946f2..323bff1 100644
--- a/packages/mcp/data/components.json
+++ b/packages/mcp/data/components.json
@@ -4980,11 +4980,17 @@
                     "optional": true,
                     "description": "Fixed height (CSS length): the table scrolls inside, header and footer stay visible"
                 },
+                {
+                    "name": "features",
+                    "type": "DataTableFeature[]",
+                    "optional": true,
+                    "description": "Feature modules, imported on their own so apps only bundle what they use (fixed for the life of the table): `virtualRows` from `/virtual` for `virtual`, `dateInput` and `numberInput` for date and number filters and editors (without them the browser's inputs)"
+                },
                 {
                     "name": "virtual",
                     "type": "boolean",
                     "optional": true,
-                    "description": "Only the visible rows are rendered (requires `scrollHeight`)"
+                    "description": "Only the visible rows are rendered (requires `scrollHeight` and the feature `virtualRows`)"
                 },
                 {
                     "name": "rowHeight",
@@ -18500,6 +18506,11 @@
             "subpath": "/data-table",
             "description": ""
         },
+        {
+            "name": "dateInput",
+            "subpath": "/data-table",
+            "description": "DataTable feature: the DatePicker for `date` and `datetime` filters and editors (without: the browser's date input)"
+        },
         {
             "name": "defaultBubbleTools",
             "subpath": "/editor",
@@ -18645,6 +18656,11 @@
             "subpath": "",
             "description": "Controls the app-wide <NavigationProgress />, e.g. from router events"
         },
+        {
+            "name": "numberInput",
+            "subpath": "/data-table",
+            "description": "DataTable feature: the NumberInput for `number` filters and editors (without: the browser's number input)"
+        },
         {
             "name": "openDialog",
             "subpath": "",
@@ -18929,6 +18945,11 @@
             "name": "validateFields",
             "subpath": "/form",
             "description": "Validates some fields of a TanStack form (e.g. one Wizard step) and marks them touched, so their errors show. Resolves with true when none has an error."
+        },
+        {
+            "name": "virtualRows",
+            "subpath": "/virtual",
+            "description": "DataTable feature: only the visible rows are rendered with `virtual` – `<DataTable features={[virtualRows]} virtual>`"
         }
     ],
     "guides": [
@@ -18992,6 +19013,11 @@
             "title": "Blocks and ConditionBuilder",
             "text": "`@wirecore/wirelayer-blocks-vue` and `@wirecore/wirelayer-blocks-react` build on `@wirecore/wirelayer-vue` and `@wirecore/wirelayer-react`\n(peer dependency) and bring larger building blocks: SiteHeader, CtaSection, ModeToggle, AuthForm, AuthLayout and the\nConditionBuilder (nested AND/OR rules). Examples: _Blocks_ in the Vue and React Storybooks.\n\n```sh\npnpm add @wirecore/wirelayer-blocks-vue    # or @wirecore/wirelayer-blocks-react\n```\n\nThe ConditionBuilder is also the editor for the advanced filter of the DataTable. The table filters by itself (or passes\nthe tree to the server as `condition`); it gets the editor from outside – without it, it shows no button and points this\nout on the console during development:\n\n```tsx\nimport { ConditionBuilder } from '@wirecore/wirelayer-blocks-react';\nimport { DataTable } from '@wirecore/wirelayer-react/data-table';\n\n<DataTable\n    data={rows}\n    columns={columns}\n    advancedFilter\n    renderAdvancedFilter={(props) => <ConditionBuilder {...props} />}\n/>;\n```\n\n```vue\n<DataTable :data=\"rows\" :columns=\"columns\" advanced-filter>\n    <template #advancedFilter=\"{ fields, value, setValue, label }\">\n        <ConditionBuilder :fields=\"fields\" :model-value=\"value\" :label=\"label\" @update:model-value=\"setValue\" />\n    </template>\n</DataTable>\n```"
         },
+        {
+            "id": "introduction-datatable-feature-modules",
+            "title": "DataTable feature modules",
+            "text": "Parts of the DataTable that bring a lot of code along are imported on their own – an app only bundles the ones it passes\nin `features` (fixed for the life of a table). The DatePicker alone is about 40 KB (gzip).\n\n| Feature       | Import                                                                 | Adds                                                 | Without it                                   |\n| ------------- | ---------------------------------------------------------------------- | ---------------------------------------------------- | -------------------------------------------- |\n| `virtualRows` | `@wirecore/wirelayer-react/virtual` (peer dependency TanStack Virtual) | only the visible rows are rendered with `virtual`    | all rows are rendered, a hint in development |\n| `dateInput`   | `@wirecore/wirelayer-react/data-table`                                 | DatePicker for `date` and `datetime` filters/editors | the browser's date input                     |\n| `numberInput` | `@wirecore/wirelayer-react/data-table`                                 | NumberInput for `number` filters and editors         | the browser's number input                   |\n\n```tsx\nimport { DataTable, dateInput, numberInput } from '@wirecore/wirelayer-react/data-table';\nimport { virtualRows } from '@wirecore/wirelayer-react/virtual';\n\n// Once for all tables of the app\nconst features = [virtualRows, dateInput, numberInput];\n\n<DataTable data={rows} columns={columns} features={features} scrollHeight=\"480px\" virtual />;\n```\n\n```vue\n<DataTable :data=\"rows\" :columns=\"columns\" :features=\"features\" scroll-height=\"480px\" virtual />\n```\n\nVue: the same imports from `@wirecore/wirelayer-vue/data-table` and `@wirecore/wirelayer-vue/virtual`."
+        },
         {
             "id": "introduction-ai-assistants-mcp-llms-txt",
             "title": "AI assistants (MCP, llms.txt)",
diff --git a/packages/mcp/scripts/collect.ts b/packages/mcp/scripts/collect.ts
index 0d8f358..59a420c 100644
--- a/packages/mcp/scripts/collect.ts
+++ b/packages/mcp/scripts/collect.ts
@@ -456,6 +456,7 @@ const conventions = [
     '- React props in camelCase; Vue takes the same props in kebab-case. Controlled values: React `value` + `onValueChange`, Vue `v-model`; other `onXChange` pairs are `v-model:x` in Vue, other callbacks `@x` events.',
     '- `className` (React) is `class` (Vue). Every component takes `classes` (extra Tailwind classes per part) and reads defaults from `RecipesProvider`.',
     '- Content: React props of type ReactNode/render functions are named slots in Vue (e.g. DataTable `cell` → `#cell-<id>`, `expansion` → `#expansion`).',
+    "- DataTable feature modules in `features` (only these end up in the bundle): `virtualRows` from `@wirecore/wirelayer-react/virtual` for `virtual`; `dateInput` and `numberInput` from `@wirecore/wirelayer-react/data-table` for DatePicker/NumberInput in date and number filters and editors (without them: the browser's inputs). Vue: the same from `@wirecore/wirelayer-vue/…`.",
     '- Texts come from `LocaleProvider` (en-US built in; de, fr, es, it, pt, pt-BR, nl, pl, cs, hu, lv, ar, tr via `registerLocale(\'fr\', fr)` with `fr` from `@wirecore/wirelayer-vue/locales/fr` or `@wirecore/wirelayer-react/locales/fr`); dates are ISO strings ("2026-10-20", "2026-10-20T10:00").',
 ].join('\n');
 
diff --git a/packages/parity/src/cases.ts b/packages/parity/src/cases.ts
index 2a8cff5..05ee0a5 100644
--- a/packages/parity/src/cases.ts
+++ b/packages/parity/src/cases.ts
@@ -1,4 +1,4 @@
-import { advancedFilterEditor, el, icon, type El } from './harness.js';
+import { advancedFilterEditor, el, feature, icon, type El } from './harness.js';
 
 // Every component in its variants and states – rendered by the parity, axe and SSR tests
 const buttonVariants = ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'outline', 'text', 'soft', 'link'];
@@ -2392,6 +2392,17 @@ export const cases: [string, El][] = [
     ['ModeToggle', el('ModeToggle', {})],
 
     ['DataTable', el('DataTable', { data: servers, columns: serverColumns, caption: 'Server', getRowId })],
+    [
+        // The filter row with DatePicker and NumberInput instead of the browser's inputs
+        'DataTable features dateInput, numberInput',
+        el('DataTable', {
+            data: servers,
+            columns: serverColumns,
+            caption: 'Server',
+            getRowId,
+            features: [feature('dateInput'), feature('numberInput')],
+        }),
+    ],
     [
         'DataTable paginated selectable',
         el('DataTable', {
diff --git a/packages/parity/src/data-table.test.ts b/packages/parity/src/data-table.test.ts
index 1e4b34f..d2381d2 100644
--- a/packages/parity/src/data-table.test.ts
+++ b/packages/parity/src/data-table.test.ts
@@ -47,7 +47,7 @@ import {
     zipStore,
 } from '@wirecore/wirelayer-recipes';
 import { describe, expect, it, vi } from 'vitest';
-import { el, frameworks, render, toReact, type El } from './harness.js';
+import { el, feature, frameworks, render, toReact, type El } from './harness.js';
 import { de as german } from '@wirecore/wirelayer-recipes/locales/de';
 
 // The extended DataTable (PrimeVue feature set): sorting by several columns, filter menus, column menu, details,
@@ -712,6 +712,54 @@ describe.each(frameworks)('%s DataTable', (framework) => {
         expect(screen.getAllByRole('status')[0]).toHaveTextContent('1 entry');
     });
 
+    it("date and number filters: the browser's inputs without features", async () => {
+        await render(framework, table({ columns: [...columns, { id: 'since', header: 'Since', filter: 'date' }] }));
+        expect(screen.getByRole('spinbutton', { name: 'Filter Load' })).toHaveAttribute('type', 'number');
+        const since = screen.getByLabelText('Filter Since');
+        expect(since).toHaveAttribute('type', 'date');
+        fireEvent.input(since, { target: { value: '2024-03-01' } });
+        await waitFor(() => expect(names()).toEqual(['web-01']));
+    });
+
+    it('date and number filters: DatePicker and NumberInput with the features dateInput and numberInput', async () => {
+        const container = await render(
+            framework,
+            table({
+                columns: [...columns, { id: 'since', header: 'Since', filter: 'date' }],
+                features: [feature('dateInput'), feature('numberInput')],
+            })
+        );
+        const load = screen.getByRole('spinbutton', { name: 'Filter Load' });
+        expect(load).not.toHaveAttribute('type', 'number');
+        expect(load.closest('[data-scope="number-input"]')).not.toBeNull();
+        expect(container.querySelector('[data-scope="date-picker"]')).not.toBeNull();
+    });
+
+    const many = Array.from({ length: 200 }, (_, index) => ({
+        ...fleet[0]!,
+        id: `web-${index}`,
+        name: `web-${index}`,
+    }));
+
+    it('virtual without the feature virtualRows: all rows and a warning', async () => {
+        const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+        await render(framework, table({ data: many, scrollHeight: '400px', virtual: true }));
+        expect(names()).toHaveLength(200);
+        expect(screen.getByRole('table')).not.toHaveAttribute('aria-rowcount');
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining('`virtual` needs the feature virtualRows'));
+        warn.mockRestore();
+    });
+
+    it('virtual with the feature virtualRows: only the visible rows', async () => {
+        await render(
+            framework,
+            table({ data: many, scrollHeight: '400px', virtual: true, features: [feature('virtualRows')] })
+        );
+        // jsdom has no layout: the virtualizer renders no rows, the table announces all of them
+        expect(names().length).toBeLessThan(200);
+        expect(screen.getByRole('table')).toHaveAttribute('aria-rowcount', '201');
+    });
+
     it('column menu: hide, move and pin columns', async () => {
         const onHidden = vi.fn();
         const onPinned = vi.fn();
diff --git a/packages/parity/src/harness.ts b/packages/parity/src/harness.ts
index 2363b60..4100973 100644
--- a/packages/parity/src/harness.ts
+++ b/packages/parity/src/harness.ts
@@ -89,10 +89,15 @@ export const el = (type: El['type'], props: Record<string, unknown> = {}, ...chi
 
 const isComponent = (type: El['type']): type is ComponentName => /^[A-Z]/.test(type);
 
-/** Replaces icon placeholders – also inside arrays and plain objects, e.g. `items: [{ icon }]`. */
+/** Placeholder for a DataTable feature module – resolved to the export of the rendering framework. */
+export const feature = (name: 'virtualRows' | 'dateInput' | 'numberInput') => ({ $feature: name });
+
+/** Replaces icon and feature placeholders – also inside arrays and plain objects, e.g. `items: [{ icon }]`. */
 function resolveIcons(value: unknown, framework: Framework): unknown {
     const iconName = (value as { $icon?: keyof typeof icons } | null)?.$icon;
     if (iconName) return icons[iconName][framework];
+    const featureName = (value as { $feature?: ReturnType<typeof feature>['$feature'] } | null)?.$feature;
+    if (featureName) return (framework === 'vue' ? VueLib : ReactLib)[featureName];
     if (Array.isArray(value)) return value.map((item) => resolveIcons(item, framework));
     if (value && Object.getPrototypeOf(value) === Object.prototype) {
         return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, resolveIcons(item, framework)]));
diff --git a/packages/react/src/data-table/DataTable.stories.tsx b/packages/react/src/data-table/DataTable.stories.tsx
index dfaa788..f7a6a61 100644
--- a/packages/react/src/data-table/DataTable.stories.tsx
+++ b/packages/react/src/data-table/DataTable.stories.tsx
@@ -11,10 +11,14 @@ import { Progress } from '../components/Progress/Progress.js';
 import { Select } from '../components/Select/Select.js';
 import { Switch } from '../components/Switch/Switch.js';
 import { DataTable, type DataTableHandle, type DataTableProps } from './DataTable.js';
-import { defineMatchMode, moveItem, moveTreeRow } from './index.js';
+import { dateInput, defineMatchMode, moveItem, moveTreeRow, numberInput } from './index.js';
+import { virtualRows } from '../virtual/index.js';
 import type { DataTableColumn, DataTablePivot, RowsRequest } from './types.js';
 import type { ConditionGroup } from '@wirecore/wirelayer-recipes';
 
+// The feature modules of the tables below, each imported on its own: virtual rows, DatePicker and NumberInput
+const features = [virtualRows, dateInput, numberInput];
+
 interface ServerRow {
     id: string;
     name: string;
@@ -122,6 +126,7 @@ function ServerTable(props: Partial<DataTableProps<ServerRow>>) {
     return (
         <div className="flex max-w-[900px] flex-col gap-2">
             <DataTable<ServerRow>
+                features={features}
                 data={servers}
                 columns={columns}
                 caption="Servers"
@@ -191,6 +196,7 @@ function FileTable() {
     const [expanded, setExpanded] = useState(['projects']);
     return (
         <DataTable<FileRow>
+            features={features}
             data={fileRows}
             columns={fileColumns}
             caption="Files"
@@ -240,6 +246,7 @@ function HostTable() {
     return (
         <div className="flex max-w-[720px] flex-col gap-2">
             <DataTable<HostRow>
+                features={features}
                 data={rows}
                 columns={hostColumns}
                 caption="Servers"
@@ -268,6 +275,7 @@ export const Tools: Story = { render: () => <HostTable /> };
 export const Grouped: Story = {
     render: () => (
         <DataTable<HostRow>
+            features={features}
             data={hosts}
             columns={[
                 { id: 'name', header: 'Name', sortable: true },
@@ -346,6 +354,7 @@ function FilterMenuTable() {
     const [sorting, setSorting] = useState<DataTableProps<MachineRow>['sorting']>([{ id: 'location', desc: false }]);
     return (
         <DataTable<MachineRow>
+            features={features}
             data={machines(40)}
             columns={machineColumns}
             caption="Machines"
@@ -389,6 +398,7 @@ function RowsTable() {
     return (
         <div className="flex max-w-[900px] flex-col gap-2">
             <DataTable<MachineRow>
+                features={features}
                 data={rows}
                 columns={rowColumns}
                 caption="Machines"
@@ -455,6 +465,7 @@ function RowEditingTable() {
     const [rows, setRows] = useState(() => machines(5));
     return (
         <DataTable<MachineRow>
+            features={features}
             data={rows}
             columns={editColumns}
             caption="Machines"
@@ -476,6 +487,7 @@ export const RowEditing: Story = { render: () => <RowEditingTable /> };
 export const Totals: Story = {
     render: () => (
         <DataTable<MachineRow>
+            features={features}
             data={machines(12)}
             columns={[
                 { id: 'name', header: 'Name', footer: 'Total' },
@@ -510,6 +522,7 @@ function LargeTable() {
     return (
         <div className="flex max-w-[900px] flex-col gap-2">
             <DataTable<MachineRow>
+                features={features}
                 data={rows}
                 columns={machineColumns.slice(0, 5)}
                 caption="All machines"
@@ -557,6 +570,7 @@ export const VirtualWidth: Story = {
     name: 'Virtual: fit width',
     render: () => (
         <DataTable<MachineRow>
+            features={features}
             data={widthRows}
             columns={machineColumns.slice(0, 3).map((column) => ({ ...column, filter: undefined, copyable: false }))}
             caption="Machines"
@@ -658,6 +672,7 @@ export const OwnFilters: Story = {
     name: 'Custom filters',
     render: () => (
         <DataTable<ServiceRow>
+            features={features}
             data={services}
             columns={serviceColumns}
             caption="Services"
@@ -684,6 +699,7 @@ function KeyboardTable() {
     const [rows, setRows] = useState(() => machines(2000));
     return (
         <DataTable<MachineRow>
+            features={features}
             data={rows}
             columns={keyboardColumns}
             caption="Machines"
@@ -715,6 +731,7 @@ export const KeyboardGrouped: Story = {
     name: 'Keyboard with groups',
     render: () => (
         <DataTable<MachineRow>
+            features={features}
             data={machines(12)}
             columns={machineColumns.slice(0, 5).map((column) => ({ ...column, filter: undefined }))}
             caption="Machines by location"
@@ -735,6 +752,7 @@ function StatusBarTable() {
     return (
         <div className="flex max-w-[760px] flex-col gap-3">
             <DataTable<MachineRow>
+                features={features}
                 ref={table}
                 data={machines(12)}
                 columns={[
@@ -785,6 +803,7 @@ function RowLinksTable() {
     return (
         <div className="flex max-w-[900px] flex-col gap-2">
             <DataTable<MachineRow>
+                features={features}
                 data={machines(6)}
                 columns={rowColumns.map((column) => ({ ...column, copyable: undefined }))}
                 caption="Machines"
@@ -814,6 +833,7 @@ function SkeletonTable() {
                 Loading
             </Switch>
             <DataTable<MachineRow>
+                features={features}
                 data={machines(8)}
                 columns={rowColumns}
                 caption="Machines"
@@ -916,6 +936,7 @@ function EditorsTable() {
     const [rows, setRows] = useState(() => plans.map((plan) => ({ ...plan })));
     return (
         <DataTable<PlanRow>
+            features={features}
             data={rows}
             columns={planColumns}
             caption="Maintenance schedule"
@@ -954,6 +975,7 @@ export const ExcelExport: Story = {
     name: 'Excel export',
     render: () => (
         <DataTable<MachineRow>
+            features={features}
             data={machines(12)}
             columns={excelColumns}
             caption="Machines"
@@ -991,6 +1013,7 @@ function SpreadsheetTable() {
     return (
         <div className="flex max-w-[900px] flex-col gap-3">
             <DataTable<MachineRow>
+                features={features}
                 data={rows}
                 columns={sheetColumns}
                 caption="Machines"
@@ -1043,6 +1066,7 @@ function BatchTable() {
     return (
         <div className="flex max-w-[900px] flex-col gap-3">
             <DataTable<MachineRow>
+                features={features}
                 data={rows}
                 columns={sheetColumns}
                 caption="Machines"
@@ -1112,6 +1136,7 @@ function ServerSourceTable() {
     return (
         <div className="flex max-w-[900px] flex-col gap-3">
             <DataTable<MachineRow>
+                features={features}
                 ref={table}
                 columns={[
                     { id: 'name', header: 'Name', width: 150, sortable: true },
@@ -1219,6 +1244,7 @@ function PivotTable() {
                 />
             </div>
             <DataTable<MachineRow>
+                features={features}
                 data={machines(40)}
                 columns={pivotColumns}
                 caption="Cores by location and system"
@@ -1250,6 +1276,7 @@ export const MergedCells: Story = {
     name: 'Merged cells',
     render: () => (
         <DataTable<MachineRow>
+            features={features}
             data={mergedRows}
             columns={[
                 { id: 'location', header: 'Location', rowSpan: 'auto' },
@@ -1282,6 +1309,7 @@ export const Find: Story = {
     name: 'Find',
     render: () => (
         <DataTable<MachineRow>
+            features={features}
             data={machines(2000)}
             columns={keyboardColumns.map((column) => ({ ...column, editable: false }))}
             caption="Machines"
@@ -1299,6 +1327,7 @@ function PrintTable() {
     const table = useRef<DataTableHandle>(null);
     return (
         <DataTable<MachineRow>
+            features={features}
             ref={table}
             data={machines(60)}
             columns={excelColumns}
@@ -1329,6 +1358,7 @@ function MoveRowsTables() {
     return (
         <div className="flex max-w-[800px] flex-col gap-6">
             <DataTable<MachineRow>
+                features={features}
                 data={rows}
                 columns={machineColumns.slice(0, 4).map((column) => ({ ...column, filter: undefined }))}
                 caption="Machines by location"
@@ -1346,6 +1376,7 @@ function MoveRowsTables() {
                 }
             />
             <DataTable<FileRow>
+                features={features}
                 data={files}
                 columns={fileColumns}
                 caption="Files"
@@ -1377,6 +1408,7 @@ export const ColumnGroups: Story = {
     name: 'Managing column groups',
     render: () => (
         <DataTable<MachineRow>
+            features={features}
             data={machines(6)}
             columns={[
                 {
@@ -1431,6 +1463,7 @@ function AdvancedFilterTable() {
     const [tree, setTree] = useState(() => loadOver(50));
     return (
         <DataTable
+            features={features}
             data={rows}
             columns={machineColumns}
             caption="Machines"
diff --git a/packages/react/src/data-table/DataTable.tsx b/packages/react/src/data-table/DataTable.tsx
index 9bcc772..752c944 100644
--- a/packages/react/src/data-table/DataTable.tsx
+++ b/packages/react/src/data-table/DataTable.tsx
@@ -1,3 +1,6 @@
+/* eslint-disable react-hooks/refs, react-hooks/immutability, react-hooks/set-state-in-effect --
+   Not for the React Compiler (it skips the component): TanStack Table and Virtual keep their state in mutable objects.
+   Until the virtualizer moved into the feature virtualRows, its import made the compiler skip the component as well */
 import { Menu as ArkMenu } from '@ark-ui/react/menu';
 import { Portal } from '@ark-ui/react/portal';
 import {
@@ -17,7 +20,6 @@ import {
     type SortingState,
     type Updater,
 } from '@tanstack/react-table';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import {
     aggregateValues,
     applyPending,
@@ -156,7 +158,7 @@ import { Select } from '../components/Select/Select.js';
 import { Skeleton } from '../components/Skeleton/Skeleton.js';
 import { Spinner } from '../components/Spinner/Spinner.js';
 import { useLocale, useTranslations } from '../components/LocaleProvider/LocaleProvider.js';
-import { features } from './features.js';
+import { FeatureContext, features as tableFeatures } from './features.js';
 import { FilterMenu } from './FilterMenu.js';
 import type {
     DataTableAdvancedFilterProps,
@@ -170,12 +172,15 @@ import type {
     DataTableCsvOptions,
     DataTableDataSource,
     DataTableEditorProps,
+    DataTableFeature,
     DataTablePivot,
     DataTablePrintOptions,
     DataTableRowAction,
     DataTableRowClick,
     DataTableRowEdit,
     DataTableRowReorder,
+    DataTableVirtualizer,
+    DataTableVirtualOptions,
     DataTableXlsxOptions,
 } from './types.js';
 import { ValueInput } from './ValueInput.js';
@@ -421,7 +426,13 @@ export interface DataTableProps<TData> extends Omit<
     fullscreenToggle?: boolean;
     /** Fixed height (CSS length): the table scrolls inside, header and footer stay visible */
     scrollHeight?: string;
-    /** Only the visible rows are rendered (requires `scrollHeight`) */
+    /**
+     * Feature modules, imported on their own so apps only bundle what they use (fixed for the life of the table):
+     * `virtualRows` from `/virtual` for `virtual`, `dateInput` and `numberInput` for date and number filters and
+     * editors (without them the browser's inputs)
+     */
+    features?: DataTableFeature[];
+    /** Only the visible rows are rendered (requires `scrollHeight` and the feature `virtualRows`) */
     virtual?: boolean;
     /** Estimated row height in px for `virtual` */
     rowHeight?: number;
@@ -449,7 +460,7 @@ export interface DataTableProps<TData> extends Omit<
     classes?: RecipeClasses<typeof dataTableRecipe>;
 }
 
-type Features = typeof features;
+type Features = typeof tableFeatures;
 
 const resolve = <T,>(updater: Updater<T>, current: T) =>
     typeof updater === 'function' ? (updater as (old: T) => T)(current) : updater;
@@ -495,6 +506,8 @@ const TEXT_CONTROLS = 'input, textarea, select, [contenteditable=""], [contented
 /** Widths of the utility columns when columns have fixed widths */
 const UTILITY_WIDTH = { drag: 40, select: 48, expand: 40, number: 56, actions: 88 } as const;
 type Utility = keyof typeof UTILITY_WIDTH;
+/** Without the feature virtualRows: no virtualizer, all rows are rendered */
+const noVirtualizer = () => undefined;
 
 /** Data table on TanStack Table: sorting (also by several columns), search, filter row or filter menus with match modes, pagination, selection, column menu (pin, move, hide, group), resizing, column groups, totals, row details, row actions, row reordering, editing (cell or row), virtual scrolling, full screen, CSV export and saved state */
 export function DataTable<TData extends object>({
@@ -604,6 +617,7 @@ export function DataTable<TData extends object>({
     striped = false,
     fullscreenToggle = false,
     scrollHeight,
+    features,
     virtual = false,
     rowHeight = 41,
     onLoadMore,
@@ -630,6 +644,8 @@ export function DataTable<TData extends object>({
     const t = translations.dataTable;
     const id = useId();
     const root = useRef<HTMLDivElement>(null);
+    // Read once: the virtualizer of `virtualRows` is a hook of this component
+    const [feature] = useState<DataTableFeature>(() => Object.assign({}, ...(features ?? [])));
     const labelFor = (row: TData, index: number) => rowLabelProp?.(row, index) ?? t.row(index);
     const expandLabelFor = (row: TData, index: number) =>
         expandLabelProp?.(row, index) ?? t.subRows(labelFor(row, index));
@@ -916,7 +932,7 @@ export function DataTable<TData extends object>({
     }, [columnDefs, locale]);
 
     const table = useTable({
-        features,
+        features: tableFeatures,
         columns,
         data,
         getRowId: (row: TData, index: number) =>
@@ -1000,7 +1016,7 @@ export function DataTable<TData extends object>({
     const grid = navigation === 'grid';
     // A tree table with grid keys is a treegrid: rows with level and open state, left/right close and open them
     const treeGrid = grid && !!getSubRows;
-    const virtualOn = virtual && !!scrollHeight;
+    const virtualOn = virtual && !!scrollHeight && !!feature.useVirtualizer;
     const paged = !!pageSize;
     const styles = dataTable({ ...look, fullscreen, grid });
     const styleFor = (columnId: string) => {
@@ -2090,7 +2106,7 @@ export function DataTable<TData extends object>({
             return true;
         };
         if (!reveal() && virtualOn) {
-            virtualizer.scrollToIndex(
+            virtualizer?.scrollToIndex(
                 items.findIndex((item) => item.kind === 'row' && item.row.id === next.focus.rowId)
             );
             requestAnimationFrame(() => requestAnimationFrame(() => void reveal()));
@@ -2283,7 +2299,7 @@ export function DataTable<TData extends object>({
             });
         const index = items.findIndex((item) => item.kind === 'row' && item.row.id === currentMatch.rowId);
         if (virtualOn && index >= 0) {
-            virtualizer.scrollToIndex(index, { align: 'center' });
+            virtualizer?.scrollToIndex(index, { align: 'center' });
             requestAnimationFrame(() => requestAnimationFrame(show));
         } else show();
     });
@@ -2556,8 +2572,9 @@ export function DataTable<TData extends object>({
 
     // Scrolling: virtual rows and the end of the list
     const scrollElement = useRef<HTMLDivElement>(null);
-    // eslint-disable-next-line react-hooks/incompatible-library
-    const virtualizer = useVirtualizer({
+    const useRows: (options: DataTableVirtualOptions) => DataTableVirtualizer | undefined =
+        feature.useVirtualizer ?? noVirtualizer;
+    const virtualizer = useRows({
         count: virtualOn ? items.length : 0,
         getScrollElement: () => scrollElement.current,
         estimateSize: () => rowHeight,
@@ -2566,14 +2583,21 @@ export function DataTable<TData extends object>({
         // Rows of the first screen before the table is measured (no empty flash, SSR)
         initialRect: { width: 0, height: Number.parseInt(scrollHeight ?? '', 10) || 400 },
     });
-    const virtualItems = virtualOn ? virtualizer.getVirtualItems() : [];
+    useEffect(() => {
+        if (virtual && !feature.useVirtualizer)
+            warnInDevelopment(
+                'DataTable: `virtual` needs the feature virtualRows, so all rows are rendered – pass ' +
+                    '`features={[virtualRows]}` with virtualRows from @wirecore/wirelayer-react/virtual'
+            );
+    }, [virtual, feature]);
+    const virtualItems = virtualOn ? (virtualizer?.getVirtualItems() ?? []) : [];
     const shownItems = virtualOn
         ? virtualItems.map((item) => ({ ...items[item.index]!, index: item.index }))
         : items.map((item, index) => ({ ...item, index }));
     const paddingTop = virtualOn ? (virtualItems[0]?.start ?? 0) : 0;
-    const paddingBottom = virtualOn ? virtualizer.getTotalSize() - (virtualItems.at(-1)?.end ?? 0) : 0;
+    const paddingBottom = virtualOn ? (virtualizer?.getTotalSize() ?? 0) - (virtualItems.at(-1)?.end ?? 0) : 0;
     const measure = (element: HTMLTableRowElement | null) => {
-        if (virtualOn && element) virtualizer.measureElement(element);
+        if (virtualOn && element) virtualizer?.measureElement(element);
     };
     const endReported = useRef(false);
     useEffect(() => {
@@ -2630,7 +2654,7 @@ export function DataTable<TData extends object>({
         if (treeGrid && onTreeGridKey(event)) return;
         gridKeydown(event.nativeEvent, tableElement.current, {
             itemCount: items.length,
-            scrollToItem: virtualOn ? (index) => virtualizer.scrollToIndex(index) : undefined,
+            scrollToItem: virtualOn ? (index) => virtualizer?.scrollToIndex(index) : undefined,
             pageRows:
                 scrollElement.current && scrollHeight
                     ? Math.max(1, Math.floor(scrollElement.current.clientHeight / rowHeight) - 1)
@@ -4016,5 +4040,9 @@ export function DataTable<TData extends object>({
         </div>
     );
 
-    return fullscreen ? createPortal(content, document.body) : <Fragment>{content}</Fragment>;
+    return (
+        <FeatureContext.Provider value={feature}>
+            {fullscreen ? createPortal(content, document.body) : <Fragment>{content}</Fragment>}
+        </FeatureContext.Provider>
+    );
 }
diff --git a/packages/react/src/data-table/ValueInput.tsx b/packages/react/src/data-table/ValueInput.tsx
index fd25e6f..ad0a5c0 100644
--- a/packages/react/src/data-table/ValueInput.tsx
+++ b/packages/react/src/data-table/ValueInput.tsx
@@ -1,11 +1,11 @@
+import { useContext } from 'react';
 import { Checkbox } from '../components/Checkbox/Checkbox.js';
-import { DatePicker } from '../components/DatePicker/DatePicker.js';
 import { Input } from '../components/Input/Input.js';
 import { MultiSelect } from '../components/MultiSelect/MultiSelect.js';
-import { NumberInput } from '../components/NumberInput/NumberInput.js';
 import { Select } from '../components/Select/Select.js';
 import { Textarea } from '../components/Textarea/Textarea.js';
 import { useTranslations } from '../components/LocaleProvider/LocaleProvider.js';
+import { FeatureContext } from './features.js';
 
 export interface ValueInputProps {
     type: 'text' | 'textarea' | 'number' | 'select' | 'multiSelect' | 'date' | 'datetime' | 'boolean' | 'checkbox';
@@ -23,6 +23,8 @@ export interface ValueInputProps {
 export function ValueInput({ type, value, onChange, label, options, any = false, invalid }: ValueInputProps) {
     const translations = useTranslations();
     const t = translations.dataTable;
+    // DatePicker and NumberInput come from the features dateInput and numberInput – without them the browser's inputs
+    const { dateInput: DatePicker, numberInput: NumberInput } = useContext(FeatureContext);
     // Choices with values of their own keep them (objects, numbers); text choices stay text as before
     const byValue = (options ?? []).some((option) => typeof option !== 'string');
     const items: unknown[] = [
@@ -59,7 +61,7 @@ export function ValueInput({ type, value, onChange, label, options, any = false,
                 onChange={(event) => onChange(event.target.value)}
             />
         );
-    if (type === 'number')
+    if (type === 'number' && NumberInput)
         return (
             <NumberInput
                 size="sm"
@@ -69,7 +71,21 @@ export function ValueInput({ type, value, onChange, label, options, any = false,
                 onValueChange={onChange}
             />
         );
-    if (type === 'date' || type === 'datetime')
+    if (type === 'number')
+        return (
+            <Input
+                type="number"
+                size="sm"
+                aria-label={label}
+                invalid={invalid}
+                value={typeof value === 'number' ? String(value) : ''}
+                // The browser's number input: an empty or invalid entry is no number
+                onChange={({ target }) =>
+                    onChange(target.value && Number.isFinite(Number(target.value)) ? Number(target.value) : null)
+                }
+            />
+        );
+    if ((type === 'date' || type === 'datetime') && DatePicker)
         return (
             <DatePicker
                 aria-label={label}
@@ -79,6 +95,17 @@ export function ValueInput({ type, value, onChange, label, options, any = false,
                 onValueChange={onChange}
             />
         );
+    if (type === 'date' || type === 'datetime')
+        return (
+            <Input
+                type={type === 'date' ? 'date' : 'datetime-local'}
+                size="sm"
+                aria-label={label}
+                invalid={invalid}
+                value={text.slice(0, type === 'date' ? 10 : 16)}
+                onChange={({ target }) => onChange(target.value || null)}
+            />
+        );
     if (type === 'multiSelect')
         return (
             <MultiSelect
diff --git a/packages/react/src/data-table/features.ts b/packages/react/src/data-table/features.ts
index 8cf9566..2f9614c 100644
--- a/packages/react/src/data-table/features.ts
+++ b/packages/react/src/data-table/features.ts
@@ -22,6 +22,8 @@ import {
     sortFn_alphanumeric,
     tableFeatures,
 } from '@tanstack/react-table';
+import { createContext } from 'react';
+import type { DataTableFeature } from './types.js';
 
 /** Registered TanStack Table v9 features – stable at module scope */
 export const features = tableFeatures({
@@ -49,3 +51,6 @@ export const features = tableFeatures({
     columnSizingFeature,
     columnResizingFeature,
 });
+
+/** The feature modules of a table (`features`) for its value inputs in filter menus and editors */
+export const FeatureContext = createContext<DataTableFeature>({});
diff --git a/packages/react/src/data-table/index.ts b/packages/react/src/data-table/index.ts
index 9b24a52..98c611d 100644
--- a/packages/react/src/data-table/index.ts
+++ b/packages/react/src/data-table/index.ts
@@ -1,5 +1,5 @@
-// DataTable on TanStack Table – requires @tanstack/react-table (and @tanstack/react-virtual for `virtual`) as optional
-// peer dependencies
+// DataTable on TanStack Table – requires @tanstack/react-table as an optional peer dependency (virtual rows: the feature
+// virtualRows from /virtual with @tanstack/react-virtual)
 export { DataTable, type DataTableHandle, type DataTableProps } from './DataTable.js';
 export type {
     DataTableAdvancedFilterProps,
@@ -15,6 +15,7 @@ export type {
     DataTableDataSource,
     DataTableEditor,
     DataTableEditorProps,
+    DataTableFeature,
     DataTableFilterConstraint,
     DataTableFilterInputProps,
     DataTableFilterRule,
@@ -30,6 +31,8 @@ export type {
     DataTableRowEdit,
     DataTableRowReorder,
     DataTableSort,
+    DataTableVirtualizer,
+    DataTableVirtualOptions,
     DataTableXlsxOptions,
     DataQuery,
     DataRequest,
@@ -38,6 +41,8 @@ export type {
     RowsRequest,
     RowsResult,
 } from './types.js';
+/** Feature modules for `features`: the DatePicker and NumberInput of date and number filters and editors */
+export { dateInput, numberInput } from './inputs.js';
 /** Registers an own match mode for the filter menus of all tables (label, value input, test) */
 export { defineMatchMode } from '@wirecore/wirelayer-recipes';
 /** Moves a row in your data after a row-reorder event: `data = moveItem(data, from, to)` */
diff --git a/packages/react/src/data-table/inputs.ts b/packages/react/src/data-table/inputs.ts
new file mode 100644
index 0000000..6718652
--- /dev/null
+++ b/packages/react/src/data-table/inputs.ts
@@ -0,0 +1,8 @@
+import { DatePicker } from '../components/DatePicker/DatePicker.js';
+import { NumberInput } from '../components/NumberInput/NumberInput.js';
+import type { DataTableFeature } from './types.js';
+
+/** DataTable feature: the DatePicker for `date` and `datetime` filters and editors (without: the browser's date input) */
+export const dateInput: DataTableFeature = { dateInput: DatePicker };
+/** DataTable feature: the NumberInput for `number` filters and editors (without: the browser's number input) */
+export const numberInput: DataTableFeature = { numberInput: NumberInput };
diff --git a/packages/react/src/data-table/types.ts b/packages/react/src/data-table/types.ts
index 8e226c9..3c772a8 100644
--- a/packages/react/src/data-table/types.ts
+++ b/packages/react/src/data-table/types.ts
@@ -1,4 +1,6 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
+import type { DatePickerProps } from '../components/DatePicker/DatePicker.js';
+import type { NumberInputProps } from '../components/NumberInput/NumberInput.js';
 export type {
     DataTableAggregate,
     DataTableFilterConstraint,
@@ -287,3 +289,34 @@ export interface DataTableRowAction<TData> {
     row: TData;
     rowId: string;
 }
+
+/** What the table gives the virtualizer of `virtualRows` */
+export interface DataTableVirtualOptions {
+    count: number;
+    getScrollElement: () => HTMLElement | null;
+    estimateSize: (index: number) => number;
+    overscan: number;
+    getItemKey: (index: number) => string | number;
+    initialRect: { width: number; height: number };
+}
+
+/** The virtualizer of `virtualRows`: which rows to render and where they are */
+export interface DataTableVirtualizer {
+    getVirtualItems(): { index: number; start: number; end: number }[];
+    getTotalSize(): number;
+    measureElement(element: Element): void;
+    scrollToIndex(index: number, options?: { align?: 'start' | 'center' | 'end' | 'auto' }): void;
+}
+
+/**
+ * A feature module for `features`, imported on its own so apps only bundle what they use: `virtualRows` (from
+ * `@wirecore/wirelayer-react/data-table/virtual`, needs @tanstack/react-virtual), `dateInput` and `numberInput`
+ */
+export interface DataTableFeature {
+    /** Renders only the visible rows with `virtual` */
+    useVirtualizer?: (options: DataTableVirtualOptions) => DataTableVirtualizer;
+    /** Input of `date` and `datetime` filters and editors – without it the browser's date input */
+    dateInput?: ComponentType<DatePickerProps>;
+    /** Input of `number` filters and editors – without it the browser's number input */
+    numberInput?: ComponentType<NumberInputProps>;
+}
diff --git a/packages/react/src/virtual/index.ts b/packages/react/src/virtual/index.ts
index 5437ead..8c50082 100644
--- a/packages/react/src/virtual/index.ts
+++ b/packages/react/src/virtual/index.ts
@@ -2,6 +2,8 @@
 export { VirtualSelect, type VirtualSelectProps } from './VirtualSelect.js';
 export { VirtualList, type VirtualListHandle, type VirtualListProps } from './VirtualList.js';
 export { VirtualTree, type VirtualTreeProps } from './VirtualTree.js';
+/** DataTable feature: virtual rows for `virtual` */
+export { virtualRows } from './virtual-rows.js';
 
 // Type of the recipes in the props above (item accessors: a key or a function)
 export type { ItemAccessor } from '@wirecore/wirelayer-recipes';
diff --git a/packages/react/src/virtual/virtual-rows.ts b/packages/react/src/virtual/virtual-rows.ts
new file mode 100644
index 0000000..ad44621
--- /dev/null
+++ b/packages/react/src/virtual/virtual-rows.ts
@@ -0,0 +1,5 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { DataTableFeature } from '../data-table/types.js';
+
+/** DataTable feature: only the visible rows are rendered with `virtual` – `<DataTable features={[virtualRows]} virtual>` */
+export const virtualRows: DataTableFeature = { useVirtualizer };
diff --git a/packages/vue/src/data-table/DataTable.stories.ts b/packages/vue/src/data-table/DataTable.stories.ts
index a2cd303..97d961d 100644
--- a/packages/vue/src/data-table/DataTable.stories.ts
+++ b/packages/vue/src/data-table/DataTable.stories.ts
@@ -2,7 +2,8 @@ import { Container, Database, EllipsisVertical, HardDrive, Pencil, Server } from
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import type { ConditionGroup } from '@wirecore/wirelayer-recipes';
 import { computed, ref, type ConcreteComponent } from 'vue';
-import { defineMatchMode, moveItem, moveTreeRow, type RowsRequest } from './index.js';
+import { dateInput, defineMatchMode, moveItem, moveTreeRow, numberInput, type RowsRequest } from './index.js';
+import { virtualRows } from '../virtual/index.js';
 import Badge from '../components/Badge/Badge.vue';
 import Button from '../components/Button/Button.vue';
 import Checkbox from '../components/Checkbox/Checkbox.vue';
@@ -14,6 +15,9 @@ import Select from '../components/Select/Select.vue';
 import Switch from '../components/Switch/Switch.vue';
 import DataTable from './DataTable.vue';
 
+// The feature modules of the tables below, each imported on its own: virtual rows, DatePicker and NumberInput
+const features = [virtualRows, dateInput, numberInput];
+
 interface ServerRow {
     id: string;
     name: string;
@@ -85,6 +89,7 @@ const meta = {
     render: (args) => ({
         components: { Badge, DataTable: DataTable as ConcreteComponent, IconButton, Progress },
         setup: () => ({
+            features,
             args,
             selection: ref<string[]>([]),
             statusVariant,
@@ -96,6 +101,7 @@ const meta = {
         template: `
             <div class="flex max-w-[900px] flex-col gap-2">
                 <DataTable
+                    :features="features"
                     v-bind="args"
                     v-model:selection="selection"
                     :get-row-id="getRowId"
@@ -175,6 +181,7 @@ export const Tree: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: fileRows,
             columns: [
                 { id: 'name', header: 'Name' },
@@ -188,6 +195,7 @@ export const Tree: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 v-model:expanded="expanded"
                 :data="rows"
                 :columns="columns"
@@ -243,6 +251,7 @@ export const Tools: Story = {
             const rows = ref(hosts.map((host) => ({ ...host })));
             const lastEdit = ref('–');
             return {
+                features,
                 rows,
                 lastEdit,
                 columns: hostColumns,
@@ -257,6 +266,7 @@ export const Tools: Story = {
         template: `
             <div class="flex max-w-[720px] flex-col gap-2">
                 <DataTable
+                    :features="features"
                     :data="rows"
                     :columns="columns"
                     caption="Servers"
@@ -280,6 +290,7 @@ export const Grouped: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: hosts,
             columns: [
                 { id: 'name', header: 'Name', sortable: true },
@@ -291,6 +302,7 @@ export const Grouped: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Servers by location"
@@ -375,6 +387,7 @@ export const FilterMenu: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: machines(40),
             columns: machineColumns,
             card,
@@ -384,6 +397,7 @@ export const FilterMenu: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 v-model:sorting="sorting"
                 :data="rows"
                 :columns="columns"
@@ -414,6 +428,7 @@ export const Rows: Story = {
             const rows = ref(machines(6));
             const last = ref('–');
             return {
+                features,
                 rows,
                 last,
                 card,
@@ -435,6 +450,7 @@ export const Rows: Story = {
         template: `
             <div class="flex max-w-[900px] flex-col gap-2">
                 <DataTable
+                    :features="features"
                     v-model:selection="selection"
                     :data="rows"
                     :columns="columns"
@@ -471,6 +487,7 @@ export const RowEditing: Story = {
         setup: () => {
             const rows = ref(machines(5));
             return {
+                features,
                 rows,
                 card,
                 getRowId: machineId,
@@ -506,6 +523,7 @@ export const RowEditing: Story = {
         },
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Machines"
@@ -524,6 +542,7 @@ export const Totals: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: machines(12),
             card,
             getRowId: machineId,
@@ -548,6 +567,7 @@ export const Totals: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Resources by location"
@@ -574,6 +594,7 @@ export const VirtualWidth: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: widthRows,
             card,
             columns: machineColumns.slice(0, 3).map((column) => ({ ...column, filter: undefined, copyable: false })),
@@ -581,6 +602,7 @@ export const VirtualWidth: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Machines"
@@ -604,6 +626,7 @@ export const Large: Story = {
             const rows = ref(machines(2000));
             const loading = ref(false);
             return {
+                features,
                 rows,
                 loading,
                 card,
@@ -623,6 +646,7 @@ export const Large: Story = {
         template: `
             <div class="flex max-w-[900px] flex-col gap-2">
                 <DataTable
+                    :features="features"
                     :data="rows"
                     :columns="columns"
                     caption="All machines"
@@ -729,9 +753,16 @@ export const OwnFilters: Story = {
     name: 'Custom filters',
     render: () => ({
         components: { Badge, Checkbox, DataTable: DataTable as ConcreteComponent },
-        setup: () => ({ rows: services, columns: serviceColumns, card, getRowId: (row: ServiceRow) => row.id }),
+        setup: () => ({
+            features,
+            rows: services,
+            columns: serviceColumns,
+            card,
+            getRowId: (row: ServiceRow) => row.id,
+        }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Services"
@@ -780,6 +811,7 @@ export const Keyboard: Story = {
         setup: () => {
             const rows = ref(machines(2000));
             return {
+                features,
                 rows,
                 card,
                 columns: keyboardColumns,
@@ -791,6 +823,7 @@ export const Keyboard: Story = {
         },
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Machines"
@@ -815,6 +848,7 @@ export const KeyboardGrouped: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: machines(12),
             card,
             columns: machineColumns.slice(0, 5).map((column) => ({ ...column, filter: undefined })),
@@ -823,6 +857,7 @@ export const KeyboardGrouped: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Machines by location"
@@ -849,6 +884,7 @@ export const StatusBar: Story = {
             const table = ref<{ generateCsv: (options?: object) => string } | null>(null);
             const csv = ref('');
             return {
+                features,
                 table,
                 csv,
                 rows: machines(12),
@@ -874,6 +910,7 @@ export const StatusBar: Story = {
         template: `
             <div class="flex max-w-[760px] flex-col gap-3">
                 <DataTable
+                    :features="features"
                     ref="table"
                     v-model:selection="selection"
                     :data="rows"
@@ -905,6 +942,7 @@ export const RowLinks: Story = {
         setup: () => {
             const last = ref('–');
             return {
+                features,
                 last,
                 card,
                 rows: machines(6),
@@ -917,6 +955,7 @@ export const RowLinks: Story = {
         template: `
             <div class="flex max-w-[900px] flex-col gap-2">
                 <DataTable
+                    :features="features"
                     :data="rows"
                     :columns="columns"
                     caption="Machines"
@@ -936,6 +975,7 @@ export const SkeletonLoading: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent, Switch },
         setup: () => ({
+            features,
             loading: ref(true),
             rows: machines(8),
             card,
@@ -946,6 +986,7 @@ export const SkeletonLoading: Story = {
             <div class="flex max-w-[900px] flex-col gap-3">
                 <Switch v-model:checked="loading">Loading</Switch>
                 <DataTable
+                    :features="features"
                     :data="rows"
                     :columns="columns"
                     caption="Machines"
@@ -1031,6 +1072,7 @@ export const Editors: Story = {
         setup: () => {
             const rows = ref(plans.map((plan) => ({ ...plan })));
             return {
+                features,
                 rows,
                 card,
                 columns: planColumns,
@@ -1042,6 +1084,7 @@ export const Editors: Story = {
         },
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Maintenance schedule"
@@ -1091,6 +1134,7 @@ export const ExcelExport: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: machines(12),
             columns: excelColumns,
             card,
@@ -1099,6 +1143,7 @@ export const ExcelExport: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Machines"
@@ -1152,6 +1197,7 @@ export const Spreadsheet: Story = {
             const marked = ref('–');
             const problems = ref<string[]>([]);
             return {
+                features,
                 rows,
                 marked,
                 problems,
@@ -1174,6 +1220,7 @@ export const Spreadsheet: Story = {
         template: `
             <div class="flex max-w-[900px] flex-col gap-3">
                 <DataTable
+                    :features="features"
                     :data="rows"
                     :columns="columns"
                     caption="Machines"
@@ -1206,6 +1253,7 @@ export const Batch: Story = {
             const rows = ref(machines(8));
             const saved = ref('');
             return {
+                features,
                 rows,
                 saved,
                 card,
@@ -1224,6 +1272,7 @@ export const Batch: Story = {
         template: `
             <div class="flex max-w-[900px] flex-col gap-3">
                 <DataTable
+                    :features="features"
                     :data="rows"
                     :columns="columns"
                     caption="Machines"
@@ -1284,6 +1333,7 @@ export const ServerSource: Story = {
             const table = ref<{ refresh: () => Promise<void> } | null>(null);
             const fail = ref(false);
             return {
+                features,
                 table,
                 fail,
                 card,
@@ -1313,6 +1363,7 @@ export const ServerSource: Story = {
         template: `
             <div class="flex max-w-[900px] flex-col gap-3">
                 <DataTable
+                    :features="features"
                     ref="table"
                     :columns="columns"
                     caption="Machines"
@@ -1367,6 +1418,7 @@ export const Pivot: Story = {
             const columnsBy = ref('os');
             const aggregate = ref<'sum' | 'avg' | 'count'>('sum');
             return {
+                features,
                 rowsBy,
                 columnsBy,
                 aggregate,
@@ -1393,6 +1445,7 @@ export const Pivot: Story = {
                     <Select v-model="aggregate" aria-label="Values" class="w-56" :items="aggregates" />
                 </div>
                 <DataTable
+                    :features="features"
                     :data="rows"
                     :columns="columns"
                     caption="Cores by location and system"
@@ -1418,6 +1471,7 @@ export const MergedCells: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: mergedRows,
             card,
             getRowId: machineId,
@@ -1443,6 +1497,7 @@ export const MergedCells: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Machines by location and system"
@@ -1465,6 +1520,7 @@ export const Find: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: machines(2000),
             columns: keyboardColumns.map((column) => ({ ...column, editable: false })),
             card,
@@ -1473,6 +1529,7 @@ export const Find: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Machines"
@@ -1496,6 +1553,7 @@ export const Print: Story = {
     render: () => ({
         components: { Button, DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             table: ref<{ print: (options?: object) => void } | null>(null),
             rows: machines(60),
             columns: excelColumns,
@@ -1505,6 +1563,7 @@ export const Print: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 ref="table"
                 :data="rows"
                 :columns="columns"
@@ -1537,6 +1596,7 @@ export const MoveRows: Story = {
             const rows = ref(machines(8));
             const files = ref(fileRows);
             return {
+                features,
                 rows,
                 files,
                 card,
@@ -1563,6 +1623,7 @@ export const MoveRows: Story = {
         template: `
             <div class="flex max-w-[800px] flex-col gap-6">
                 <DataTable
+                    :features="features"
                     :data="rows"
                     :columns="machineColumns"
                     caption="Machines by location"
@@ -1574,6 +1635,7 @@ export const MoveRows: Story = {
                     @row-reorder="onMove"
                 />
                 <DataTable
+                    :features="features"
                     :data="files"
                     :columns="fileColumns"
                     caption="Files"
@@ -1598,6 +1660,7 @@ export const ColumnGroups: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent },
         setup: () => ({
+            features,
             rows: machines(6),
             card,
             getRowId: machineId,
@@ -1631,6 +1694,7 @@ export const ColumnGroups: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 :data="rows"
                 :columns="columns"
                 caption="Machines"
@@ -1666,6 +1730,7 @@ export const AdvancedFilter: Story = {
     render: () => ({
         components: { DataTable: DataTable as ConcreteComponent, Field, NumberInput },
         setup: () => ({
+            features,
             rows: machines(40),
             columns: machineColumns,
             card,
@@ -1677,6 +1742,7 @@ export const AdvancedFilter: Story = {
         }),
         template: `
             <DataTable
+                :features="features"
                 v-model:advanced-filter-value="tree"
                 :data="rows"
                 :columns="columns"
diff --git a/packages/vue/src/data-table/DataTable.vue b/packages/vue/src/data-table/DataTable.vue
index b544d8b..3f3b615 100644
--- a/packages/vue/src/data-table/DataTable.vue
+++ b/packages/vue/src/data-table/DataTable.vue
@@ -43,13 +43,12 @@ import {
     type SortingState,
     type Updater,
 } from '@tanstack/vue-table';
-import { useVirtualizer } from '@tanstack/vue-virtual';
 import {
     aggregateValues,
     applyPending,
     changesByRow,
     conditionFieldsFromColumns,
-    csvSeparator,
+    csvSeparator as localeCsvSeparator,
     emptyConditionGroup,
     isActiveCondition,
     matchesCondition,
@@ -132,6 +131,7 @@ import {
     onBeforeUnmount,
     onMounted,
     onUpdated,
+    provide,
     ref,
     shallowRef,
     useAttrs,
@@ -155,7 +155,7 @@ import Select from '../components/Select/Select.vue';
 import Skeleton from '../components/Skeleton/Skeleton.vue';
 import Spinner from '../components/Spinner/Spinner.vue';
 import { useLocale, useTranslations } from '../locale.js';
-import { features } from './features.js';
+import { featureKey, features as tableFeatures } from './features.js';
 import FilterMenu from './FilterMenu.vue';
 import type {
     DataTableAdvancedFilterProps,
@@ -169,6 +169,7 @@ import type {
     DataTableCsvOptions,
     DataTableDataSource,
     DataTableEditorProps,
+    DataTableFeature,
     DataTableFilterInputProps,
     DataTablePivot,
     DataTablePrintOptions,
@@ -355,7 +356,13 @@ export interface DataTableProps<T> {
     fullscreenToggle?: boolean;
     /** Fixed height (CSS length): the table scrolls inside, header and footer stay visible */
     scrollHeight?: string;
-    /** Only the visible rows are rendered (requires `scrollHeight`) */
+    /**
+     * Feature modules, imported on their own so apps only bundle what they use (fixed for the life of the table):
+     * `virtualRows` from `/virtual` for `virtual`, `dateInput` and `numberInput` for date and number filters and
+     * editors (without them the browser's inputs)
+     */
+    features?: DataTableFeature[];
+    /** Only the visible rows are rendered (requires `scrollHeight` and the feature `virtualRows`) */
     virtual?: boolean;
     /** Estimated row height in px for `virtual` */
     rowHeight?: number;
@@ -486,8 +493,11 @@ const attrs = useAttrs();
 const slots = useSlots();
 const id = useId();
 const t = translations.dataTable;
+// Read once: the virtualizer of `virtualRows` is a composable of this setup
+const feature: DataTableFeature = Object.assign({}, ...(props.features ?? []));
+provide(featureKey, feature);
 
-type Features = typeof features;
+type Features = typeof tableFeatures;
 type TableRow = Row<Features, TData>;
 type TableColumn = Column<Features, TData, unknown>;
 type Density = 'sm' | 'md' | 'lg';
@@ -783,7 +793,7 @@ function toDef(column: DataTableColumn<TData>): ColumnDef<Features, TData> {
 const tableColumns = computed(() => columnDefs.value.map(toDef));
 
 const table = useTable({
-    features,
+    features: tableFeatures,
     columns: tableColumns,
     data: tableData,
     getRowId: (row: TData, index: number) =>
@@ -2043,7 +2053,7 @@ function extendRangeByKey(event: KeyboardEvent) {
     };
     void nextTick(() => {
         if (reveal() || !virtualOn.value) return;
-        virtualizer.value.scrollToIndex(
+        virtualizer?.value.scrollToIndex(
             items.value.findIndex((item) => item.kind === 'row' && item.row.id === next.focus.rowId)
         );
         requestAnimationFrame(() => requestAnimationFrame(() => void reveal()));
@@ -2236,7 +2246,7 @@ async function revealMatch() {
         cellElement(match.rowId, match.columnId)?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
     const index = items.value.findIndex((item) => item.kind === 'row' && item.row.id === match.rowId);
     if (virtualOn.value && index >= 0) {
-        virtualizer.value.scrollToIndex(index, { align: 'center' });
+        virtualizer?.value.scrollToIndex(index, { align: 'center' });
         requestAnimationFrame(() => requestAnimationFrame(show));
     } else show();
 }
@@ -2635,10 +2645,9 @@ onBeforeUnmount(() => restoreInert.splice(0).forEach((element) => (element.inert
 
 // Scrolling: virtual rows and the end of the list
 const scrollElement = useTemplateRef<HTMLDivElement>('scroll');
-const virtualOn = computed(() => !!props.virtual && !!props.scrollHeight);
-const virtualizer = useVirtualizer(
+const virtualizer = feature.useVirtualizer?.(
     computed(() => ({
-        count: virtualOn.value ? items.value.length : 0,
+        count: props.virtual && props.scrollHeight ? items.value.length : 0,
         getScrollElement: () => scrollElement.value,
         estimateSize: () => props.rowHeight,
         overscan: 8,
@@ -2647,7 +2656,13 @@ const virtualizer = useVirtualizer(
         initialRect: { width: 0, height: Number.parseInt(props.scrollHeight ?? '', 10) || 400 },
     }))
 );
-const virtualItems = computed(() => (virtualOn.value ? virtualizer.value.getVirtualItems() : []));
+if (props.virtual && !virtualizer) {
+    warnInDevelopment(
+        'DataTable: `virtual` needs the feature virtualRows from @wirecore/wirelayer-vue/virtual (`:features="[virtualRows]"`) – all rows are rendered'
+    );
+}
+const virtualOn = computed(() => !!props.virtual && !!props.scrollHeight && !!virtualizer);
+const virtualItems = computed(() => (virtualOn.value ? (virtualizer?.value.getVirtualItems() ?? []) : []));
 const shownItems = computed(() =>
     virtualOn.value
         ? virtualItems.value.map((virtual) => ({ ...items.value[virtual.index]!, index: virtual.index }))
@@ -2655,10 +2670,10 @@ const shownItems = computed(() =>
 );
 const paddingTop = computed(() => (virtualOn.value ? (virtualItems.value[0]?.start ?? 0) : 0));
 const paddingBottom = computed(() =>
-    virtualOn.value ? virtualizer.value.getTotalSize() - (virtualItems.value.at(-1)?.end ?? 0) : 0
+    virtualOn.value ? (virtualizer?.value.getTotalSize() ?? 0) - (virtualItems.value.at(-1)?.end ?? 0) : 0
 );
 const measure = (element: unknown) => {
-    if (virtualOn.value && element instanceof Element) virtualizer.value.measureElement(element);
+    if (virtualOn.value && element instanceof Element) virtualizer?.value.measureElement(element);
 };
 let endReported = false;
 watch(
@@ -2717,7 +2732,7 @@ function onGridKey(event: KeyboardEvent) {
     if (treeGrid.value && onTreeGridKey(event)) return;
     gridKeydown(event, tableElement.value, {
         itemCount: items.value.length,
-        scrollToItem: virtualOn.value ? (index) => virtualizer.value.scrollToIndex(index) : undefined,
+        scrollToItem: virtualOn.value ? (index) => virtualizer?.value.scrollToIndex(index) : undefined,
         pageRows:
             scrollElement.value && props.scrollHeight
                 ? Math.max(1, Math.floor(scrollElement.value.clientHeight / props.rowHeight) - 1)
diff --git a/packages/vue/src/data-table/ValueInput.vue b/packages/vue/src/data-table/ValueInput.vue
index d528987..de00ec3 100644
--- a/packages/vue/src/data-table/ValueInput.vue
+++ b/packages/vue/src/data-table/ValueInput.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 import Checkbox from '../components/Checkbox/Checkbox.vue';
-import DatePicker from '../components/DatePicker/DatePicker.vue';
 import Input from '../components/Input/Input.vue';
 import MultiSelect from '../components/MultiSelect/MultiSelect.vue';
-import NumberInput from '../components/NumberInput/NumberInput.vue';
 import Select from '../components/Select/Select.vue';
 import Textarea from '../components/Textarea/Textarea.vue';
 import { useTranslations } from '../locale.js';
+import { featureKey } from './features.js';
 
 // One value of a filter condition or an edited cell – the matching input for the type
 
@@ -24,6 +23,8 @@ const props = defineProps<{
 const emit = defineEmits<{ 'update:modelValue': [value: unknown] }>();
 const t = useTranslations().dataTable;
 const translations = useTranslations();
+// DatePicker and NumberInput come from the features dateInput and numberInput – without them the browser's inputs
+const feature = inject(featureKey, {});
 
 // Choices with values of their own keep them (objects, numbers); text choices stay text as before
 const byValue = computed(() => (props.options ?? []).some((option) => typeof option !== 'string'));
@@ -41,6 +42,8 @@ const items = computed(() => [
 const text = computed(() =>
     props.modelValue === null || props.modelValue === undefined ? '' : String(props.modelValue)
 );
+/** The browser's number input: an empty or invalid entry is no number */
+const toNumber = (value: string | undefined) => (value && Number.isFinite(Number(value)) ? Number(value) : null);
 const selected = computed(() => (byValue.value ? (props.modelValue ?? (props.any ? '' : null)) : text.value));
 </script>
 
@@ -62,22 +65,42 @@ const selected = computed(() => (byValue.value ? (props.modelValue ?? (props.any
         :model-value="text"
         @update:model-value="emit('update:modelValue', $event ?? '')"
     />
-    <NumberInput
-        v-else-if="type === 'number'"
+    <component
+        :is="feature.numberInput"
+        v-else-if="type === 'number' && feature.numberInput"
         size="sm"
         :aria-label="label"
         :invalid="invalid"
         :model-value="typeof modelValue === 'number' ? modelValue : null"
         @update:model-value="emit('update:modelValue', $event)"
     />
-    <DatePicker
-        v-else-if="type === 'date' || type === 'datetime'"
+    <Input
+        v-else-if="type === 'number'"
+        type="number"
+        size="sm"
+        :aria-label="label"
+        :invalid="invalid"
+        :model-value="typeof modelValue === 'number' ? String(modelValue) : ''"
+        @update:model-value="emit('update:modelValue', toNumber($event))"
+    />
+    <component
+        :is="feature.dateInput"
+        v-else-if="(type === 'date' || type === 'datetime') && feature.dateInput"
         :aria-label="label"
         :invalid="invalid"
         :with-time="type === 'datetime'"
         :model-value="text || null"
         @update:model-value="emit('update:modelValue', $event)"
     />
+    <Input
+        v-else-if="type === 'date' || type === 'datetime'"
+        :type="type === 'date' ? 'date' : 'datetime-local'"
+        size="sm"
+        :aria-label="label"
+        :invalid="invalid"
+        :model-value="text.slice(0, type === 'date' ? 10 : 16)"
+        @update:model-value="emit('update:modelValue', $event || null)"
+    />
     <MultiSelect
         v-else-if="type === 'multiSelect'"
         :aria-label="label"
diff --git a/packages/vue/src/data-table/features.ts b/packages/vue/src/data-table/features.ts
index 7c61865..4acd976 100644
--- a/packages/vue/src/data-table/features.ts
+++ b/packages/vue/src/data-table/features.ts
@@ -22,6 +22,8 @@ import {
     sortFn_alphanumeric,
     tableFeatures,
 } from '@tanstack/vue-table';
+import type { InjectionKey } from 'vue';
+import type { DataTableFeature } from './types.js';
 
 /** Registered TanStack Table v9 features – stable at module scope */
 export const features = tableFeatures({
@@ -49,3 +51,6 @@ export const features = tableFeatures({
     columnSizingFeature,
     columnResizingFeature,
 });
+
+/** The feature modules of a table (`features`) for its value inputs in filter menus and editors */
+export const featureKey: InjectionKey<DataTableFeature> = Symbol('wirecore-data-table-features');
diff --git a/packages/vue/src/data-table/index.ts b/packages/vue/src/data-table/index.ts
index 3fa04ff..b034d84 100644
--- a/packages/vue/src/data-table/index.ts
+++ b/packages/vue/src/data-table/index.ts
@@ -1,5 +1,5 @@
-// DataTable on TanStack Table – requires @tanstack/vue-table (and @tanstack/vue-virtual for `virtual`) as optional
-// peer dependencies
+// DataTable on TanStack Table – requires @tanstack/vue-table as an optional peer dependency (virtual rows: the feature
+// virtualRows from /virtual with @tanstack/vue-virtual)
 export { default as DataTable, type DataTableProps } from './DataTable.vue';
 export type {
     DataTableAdvancedFilterProps,
@@ -15,6 +15,7 @@ export type {
     DataTableDataSource,
     DataTableEditor,
     DataTableEditorProps,
+    DataTableFeature,
     DataTableFilterConstraint,
     DataTableFilterInputProps,
     DataTableFilterRule,
@@ -30,6 +31,8 @@ export type {
     DataTableRowEdit,
     DataTableRowReorder,
     DataTableSort,
+    DataTableVirtualizer,
+    DataTableVirtualOptions,
     DataTableXlsxOptions,
     DataQuery,
     DataRequest,
@@ -38,6 +41,8 @@ export type {
     RowsRequest,
     RowsResult,
 } from './types.js';
+/** Feature modules for `features`: the DatePicker and NumberInput of date and number filters and editors */
+export { dateInput, numberInput } from './inputs.js';
 /** Registers an own match mode for the filter menus of all tables (label, value input, test) */
 export { defineMatchMode } from '@wirecore/wirelayer-recipes';
 /** Moves a row in your data after a row-reorder event: `data = moveItem(data, from, to)` */
diff --git a/packages/vue/src/data-table/inputs.ts b/packages/vue/src/data-table/inputs.ts
new file mode 100644
index 0000000..482f1cb
--- /dev/null
+++ b/packages/vue/src/data-table/inputs.ts
@@ -0,0 +1,8 @@
+import DatePicker from '../components/DatePicker/DatePicker.vue';
+import NumberInput from '../components/NumberInput/NumberInput.vue';
+import type { DataTableFeature } from './types.js';
+
+/** DataTable feature: the DatePicker for `date` and `datetime` filters and editors (without: the browser's date input) */
+export const dateInput: DataTableFeature = { dateInput: DatePicker };
+/** DataTable feature: the NumberInput for `number` filters and editors (without: the browser's number input) */
+export const numberInput: DataTableFeature = { numberInput: NumberInput };
diff --git a/packages/vue/src/data-table/types.ts b/packages/vue/src/data-table/types.ts
index 3599b92..e555ab3 100644
--- a/packages/vue/src/data-table/types.ts
+++ b/packages/vue/src/data-table/types.ts
@@ -16,6 +16,7 @@ export type {
     RowsRequest,
     RowsResult,
 } from '@wirecore/wirelayer-recipes';
+import type { Component, Ref } from 'vue';
 import type {
     ConditionField,
     ConditionGroup,
@@ -280,3 +281,34 @@ export interface DataTableRowAction<TData> {
     row: TData;
     rowId: string;
 }
+
+/** What the table gives the virtualizer of `virtualRows` */
+export interface DataTableVirtualOptions {
+    count: number;
+    getScrollElement: () => HTMLElement | null;
+    estimateSize: (index: number) => number;
+    overscan: number;
+    getItemKey: (index: number) => string | number;
+    initialRect: { width: number; height: number };
+}
+
+/** The virtualizer of `virtualRows`: which rows to render and where they are */
+export interface DataTableVirtualizer {
+    getVirtualItems(): { index: number; start: number; end: number }[];
+    getTotalSize(): number;
+    measureElement(element: Element): void;
+    scrollToIndex(index: number, options?: { align?: 'start' | 'center' | 'end' | 'auto' }): void;
+}
+
+/**
+ * A feature module for `features`, imported on its own so apps only bundle what they use: `virtualRows` (from
+ * `@wirecore/wirelayer-vue/data-table/virtual`, needs @tanstack/vue-virtual), `dateInput` and `numberInput`
+ */
+export interface DataTableFeature {
+    /** Renders only the visible rows with `virtual` */
+    useVirtualizer?: (options: Readonly<Ref<DataTableVirtualOptions>>) => Readonly<Ref<DataTableVirtualizer>>;
+    /** Input of `date` and `datetime` filters and editors – without it the browser's date input */
+    dateInput?: Component;
+    /** Input of `number` filters and editors – without it the browser's number input */
+    numberInput?: Component;
+}
diff --git a/packages/vue/src/virtual/index.ts b/packages/vue/src/virtual/index.ts
index 8f15ed6..d88a24d 100644
--- a/packages/vue/src/virtual/index.ts
+++ b/packages/vue/src/virtual/index.ts
@@ -2,6 +2,8 @@
 export { default as VirtualSelect, type VirtualSelectProps } from './VirtualSelect.vue';
 export { default as VirtualList, type VirtualListProps } from './VirtualList.vue';
 export { default as VirtualTree, type VirtualTreeProps } from './VirtualTree.vue';
+/** DataTable feature: virtual rows for `virtual` */
+export { virtualRows } from './virtual-rows.js';
 
 // Type of the recipes in the props above (item accessors: a key or a function)
 export type { ItemAccessor } from '@wirecore/wirelayer-recipes';
diff --git a/packages/vue/src/virtual/virtual-rows.ts b/packages/vue/src/virtual/virtual-rows.ts
new file mode 100644
index 0000000..8adbf22
--- /dev/null
+++ b/packages/vue/src/virtual/virtual-rows.ts
@@ -0,0 +1,5 @@
+import { useVirtualizer } from '@tanstack/vue-virtual';
+import type { DataTableFeature } from '../data-table/types.js';
+
+/** DataTable feature: only the visible rows are rendered with `virtual` – `<DataTable :features="[virtualRows]" virtual>` */
+export const virtualRows: DataTableFeature = { useVirtualizer };