@cosmicdrift/kumiko-renderer-web 0.206.0 → 0.208.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.206.0",
+  "version": "0.208.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.206.0",
-    "@cosmicdrift/kumiko-headless": "0.206.0",
-    "@cosmicdrift/kumiko-renderer": "0.206.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.208.0",
+    "@cosmicdrift/kumiko-headless": "0.208.0",
+    "@cosmicdrift/kumiko-renderer": "0.208.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -63,7 +63,8 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
-    "tailwindcss": "^4.3.0"
+    "tailwindcss": "^4.3.0",
+    "@cosmicdrift/kumiko-locale-de": "0.208.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/field-validation-i18n.test.tsx

@@ -59,11 +59,10 @@ describe("DefaultField / errors.validation.* i18n", () => {
       "invalid_option",
       "failed",
     ];
-    for (const locale of ["de", "en"] as const) {
-      const bundle = kumikoDefaultTranslations[locale];
-      for (const code of codes) {
-        expect(bundle?.[`errors.validation.${code}`]).toBeString();
-      }
+    const { localeDeBundle } = await import("@cosmicdrift/kumiko-locale-de");
+    for (const code of codes) {
+      expect(kumikoDefaultTranslations["en"]?.[`errors.validation.${code}`]).toBeString();
+      expect(localeDeBundle[`errors.validation.${code}`]).toBeString();
     }
   });
 });

package/src/__tests__/language-switcher.test.tsx

@@ -1,15 +1,20 @@
 import { describe, expect, mock, test } from "bun:test";
 import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
-import { createStaticLocaleResolver, LocaleProvider } from "@cosmicdrift/kumiko-renderer";
+import { localeDeBundle } from "@cosmicdrift/kumiko-locale-de";
+import {
+  createStaticLocaleResolver,
+  kumikoDefaultTranslations,
+  LocaleProvider,
+} from "@cosmicdrift/kumiko-renderer";
 import { render as _render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { LanguageSwitcher } from "../layout/language-switcher";
 
-// Tests greifen den LanguageSwitcher mit einem stateful Stub-Resolver
-// (setLocale + subscribe) UND einem stateless Resolver, um die zwei
-// Verzweigungen abzudecken: Switcher rendert nur wenn setLocale da ist.
-// Radix-DropdownMenu öffnet auf pointerdown, daher userEvent statt
+// Tests exercise the LanguageSwitcher with both a stateful stub resolver
+// (setLocale + subscribe) and a stateless resolver, covering the two
+// branches: the switcher only renders when setLocale is present.
+// Radix DropdownMenu opens on pointerdown, so userEvent is used instead of
 // fireEvent.click.
 
 function makeStatefulResolver(initial: string): LocaleResolver {
@@ -33,7 +38,14 @@ function makeStatefulResolver(initial: string): LocaleResolver {
 }
 
 function renderWithResolver(resolver: LocaleResolver, ui: ReactNode) {
-  return _render(<LocaleProvider resolver={resolver}>{ui}</LocaleProvider>);
+  return _render(
+    <LocaleProvider
+      resolver={resolver}
+      fallbackBundles={[{ de: localeDeBundle }, kumikoDefaultTranslations]}
+    >
+      {ui}
+    </LocaleProvider>,
+  );
 }
 
 const locales = [
@@ -54,9 +66,9 @@ describe("LanguageSwitcher", () => {
   test("active locale shown via shorthand", () => {
     const resolver = makeStatefulResolver("de");
     renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
-    // Trigger zeigt den Locale-Code im DOM (Tailwind uppercased ihn nur
-    // visuell via CSS — der Text-Knoten bleibt lowercase). Das passt:
-    // getByText sieht den DOM-Text.
+    // The trigger shows the locale code in the DOM. Tailwind only
+    // uppercases it visually via CSS, the text node stays lowercase.
+    // That is fine, getByText sees the DOM text.
     expect(screen.getByText("de")).toBeTruthy();
   });
 
@@ -78,18 +90,23 @@ describe("LanguageSwitcher", () => {
     expect(resolver.setLocale).toHaveBeenCalledWith("en");
   });
 
+  test("trigger accessible name follows the active locale (en → Language)", () => {
+    const resolver = makeStatefulResolver("en");
+    renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
+    expect(screen.getByRole("button", { name: "Language" })).toBeTruthy();
+  });
+
   test("matches active locale via language-root (de-AT → de)", async () => {
     const user = userEvent.setup();
     const resolver = makeStatefulResolver("de-AT");
     renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
-    // Trigger zeigt "DE" (aus de-AT abgeleitet) — der active marker im
-    // Dropdown muss bei "Deutsch" sitzen, nicht bei "English".
+    // The trigger shows "DE", derived from de-AT. The active marker in the
+    // dropdown must sit on "Deutsch", not "English".
     await user.click(screen.getByRole("button", { name: "Sprache" }));
     await waitFor(() => {
-      // Radix-CheckboxItem markiert active via aria-checked="true". Der
-      // Check-Icon (lucide) sitzt im ItemIndicator und ist nur sichtbar
-      // wenn checked — die ARIA-Variante ist robust gegen Rendering-
-      // Tricks.
+      // Radix CheckboxItem marks active via aria-checked="true". The check
+      // icon (lucide) lives in the ItemIndicator and is only visible when
+      // checked, so the ARIA variant is robust against rendering quirks.
       const deItem = screen.getByText("Deutsch").closest('[role="menuitemcheckbox"]');
       expect(deItem?.getAttribute("aria-checked")).toBe("true");
       const enItem = screen.getByText("English").closest('[role="menuitemcheckbox"]');

package/src/__tests__/primitives.test.tsx

@@ -511,10 +511,11 @@ describe("DataTable", () => {
     test("de-Locale: Status-Text + aria-Labels kommen aus i18n statt hartcodiertem Englisch (issue #2007)", async () => {
       const { LocaleProvider, createStaticLocaleResolver, kumikoDefaultTranslations } =
         await import("@cosmicdrift/kumiko-renderer");
+      const { localeDeBundle } = await import("@cosmicdrift/kumiko-locale-de");
       render(
         <LocaleProvider
           resolver={createStaticLocaleResolver({ locale: "de" })}
-          fallbackBundles={[kumikoDefaultTranslations]}
+          fallbackBundles={[{ de: localeDeBundle }, kumikoDefaultTranslations]}
         >
           <DataTable
             columns={cols}
@@ -655,10 +656,11 @@ describe("DataTable", () => {
     test("hasMore=false + de-Locale: Marker kommt aus i18n statt hartcodiert", async () => {
       const { LocaleProvider, createStaticLocaleResolver, kumikoDefaultTranslations } =
         await import("@cosmicdrift/kumiko-renderer");
+      const { localeDeBundle } = await import("@cosmicdrift/kumiko-locale-de");
       render(
         <LocaleProvider
           resolver={createStaticLocaleResolver({ locale: "de" })}
-          fallbackBundles={[kumikoDefaultTranslations]}
+          fallbackBundles={[{ de: localeDeBundle }, kumikoDefaultTranslations]}
         >
           <DataTable
             columns={cols}

package/src/__tests__/render-list-debounce.test.tsx

@@ -38,7 +38,7 @@ function renderRL(props: {
   readonly onSearchChange?: (next: string) => void;
 }) {
   return render(
-    <LocaleProvider resolver={createStaticLocaleResolver({ locale: "de" })}>
+    <LocaleProvider resolver={createStaticLocaleResolver({ locale: "en" })}>
       <PrimitivesProvider value={defaultPrimitives}>
         <RenderList
           screen={screenDef}
@@ -96,7 +96,7 @@ describe("RenderList — Search-Debounce", () => {
     // Externe Quelle (Browser-Back, Cross-Component-Reset) ändert
     // searchValue → RenderList soll den Input-Wert spiegeln.
     rerender(
-      <LocaleProvider resolver={createStaticLocaleResolver({ locale: "de" })}>
+      <LocaleProvider resolver={createStaticLocaleResolver({ locale: "en" })}>
         <PrimitivesProvider value={defaultPrimitives}>
           <RenderList
             screen={screenDef}

package/src/layout/language-switcher.tsx

@@ -1,17 +1,17 @@
-// LanguageSwitcher — Dropdown der die App-Locale via
-// LocaleResolver.setLocale umschaltet. Auf Radix-DropdownMenu, gleicher
-// Stack wie UserMenu/TenantSwitcher.
+// LanguageSwitcher — dropdown that switches the app locale via
+// LocaleResolver.setLocale. Built on Radix DropdownMenu, same stack
+// as UserMenu/TenantSwitcher.
 //
-// Rendert gar nix wenn der Resolver keine setLocale-Methode anbietet
-// (statischer Resolver) — App-Dev sieht dann sofort dass er einen
-// stateful Resolver verdrahten muss, bevor der Switcher UI-sichtbar
-// wird.
+// Renders nothing if the resolver doesn't offer a setLocale method
+// (static resolver) — the app dev then immediately sees they need to
+// wire up a stateful resolver before the switcher becomes visible in
+// the UI.
 //
-// Icon-Slot optional: das Framework zieht lucide-react nicht selbst
-// rein; eine App die keinen Icon-Import will, kriegt den Globe-
-// Unicode-Glyph (🌐) als Default.
+// Icon slot is optional: the framework doesn't pull in lucide-react
+// itself; an app that doesn't want an icon import gets the globe
+// unicode glyph (🌐) as default.
 
-import { useLocale } from "@cosmicdrift/kumiko-renderer";
+import { useLocale, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useMemo } from "react";
 import { cn } from "../lib/cn";
 import {
@@ -22,19 +22,19 @@ import {
 } from "../primitives/dropdown-menu";
 
 export type LocaleOption = {
-  /** BCP-47-Code, z.B. "de", "en-US", "fr-CA". Wird 1:1 an
-   *  resolver.setLocale() weitergereicht. */
+  /** BCP-47 code, e.g. "de", "en-US", "fr-CA". Passed through 1:1 to
+   *  resolver.setLocale(). */
   readonly code: string;
-  /** Menschenlesbare Anzeige im Dropdown. */
+  /** Human-readable label shown in the dropdown. */
   readonly label: string;
 };
 
 export type LanguageSwitcherProps = {
-  /** Auswählbare Locales. Reihenfolge = Anzeige-Reihenfolge im Menü. */
+  /** Selectable locales. Order = display order in the menu. */
   readonly locales: readonly LocaleOption[];
-  /** Icon-Slot links neben dem Button-Label. Default: 🌐. */
+  /** Icon slot left of the button label. Default: 🌐. */
   readonly icon?: ReactNode;
-  /** aria-label + title des Triggers. Default: "Sprache". */
+  /** aria-label + title of the trigger. Default: translated "kumiko.nav.language". */
   readonly label?: string;
   readonly testId?: string;
 };
@@ -42,15 +42,17 @@ export type LanguageSwitcherProps = {
 export function LanguageSwitcher({
   locales,
   icon = "🌐",
-  label = "Sprache",
+  label,
   testId,
 }: LanguageSwitcherProps): ReactNode {
   const resolver = useLocale();
+  const t = useTranslation();
+  const resolvedLabel = label ?? t("kumiko.nav.language");
 
   const activeLocale = resolver.locale();
-  // Match entweder exact ("de-DE") oder Language-Root ("de") gegen die
-  // verfügbaren Optionen. So zeigt der Switcher "Deutsch" aktiv wenn
-  // der Browser "de-AT" liefert und die Option nur "de" heißt.
+  // Matches either exact ("de-DE") or the language root ("de") against
+  // the available options. So the switcher shows "German" active when
+  // the browser reports "de-AT" but the option is just "de".
   const activeOption = useMemo(() => {
     const exact = locales.find((o) => o.code === activeLocale);
     if (exact) return exact;
@@ -59,7 +61,7 @@ export function LanguageSwitcher({
   }, [locales, activeLocale]);
 
   if (resolver.setLocale === undefined) {
-    // Stateless-Resolver → kein Wechsel möglich. Kein Noise im Topbar.
+    // Stateless resolver → no switching possible. No noise in the topbar.
     return null;
   }
 
@@ -70,8 +72,8 @@ export function LanguageSwitcher({
       <DropdownMenuTrigger asChild>
         <button
           type="button"
-          aria-label={label}
-          title={label}
+          aria-label={resolvedLabel}
+          title={resolvedLabel}
           data-testid={testId}
           className={cn(
             "inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2 text-sm",
@@ -85,7 +87,7 @@ export function LanguageSwitcher({
           </span>
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-[10rem]" aria-label={label}>
+      <DropdownMenuContent align="end" className="min-w-[10rem]" aria-label={resolvedLabel}>
         {locales.map((opt) => (
           <DropdownMenuCheckboxItem
             key={opt.code}

package/src/primitives/__tests__/date-field.test.tsx

@@ -5,6 +5,7 @@
 // green there).
 
 import { describe, expect, test } from "bun:test";
+import { localeDeBundle } from "@cosmicdrift/kumiko-locale-de";
 import {
   createStaticLocaleResolver,
   kumikoDefaultTranslations,
@@ -17,7 +18,11 @@ function renderWithLocale(locale: string) {
   return render(
     <LocaleProvider
       resolver={createStaticLocaleResolver({ locale })}
-      fallbackBundles={[kumikoDefaultTranslations]}
+      fallbackBundles={
+        locale.split("-")[0] === "de"
+          ? [{ de: localeDeBundle }, kumikoDefaultTranslations]
+          : [kumikoDefaultTranslations]
+      }
     >
       <DateField id="date" name="date" value="" onChange={() => {}} locale={locale} />
     </LocaleProvider>,

package/src/primitives/__tests__/date-parse.test.ts

@@ -5,6 +5,7 @@
 // rejection.
 
 import { describe, expect, test } from "bun:test";
+import { localeDeBundle } from "@cosmicdrift/kumiko-locale-de";
 import { kumikoDefaultTranslations } from "@cosmicdrift/kumiko-renderer";
 import { Temporal } from "temporal-polyfill";
 import {
@@ -18,7 +19,7 @@ import {
 // Derived from kumikoDefaultTranslations instead of hardcoded so a drift in
 // the i18n defaults (e.g. renaming "T" → "D") fails this test too.
 function placeholderLetters(locale: "de" | "en"): { year: string; month: string; day: string } {
-  const bundle = kumikoDefaultTranslations[locale];
+  const bundle = locale === "de" ? localeDeBundle : kumikoDefaultTranslations[locale];
   return {
     year: bundle?.["kumiko.field.dateField.placeholderYear"] ?? "",
     month: bundle?.["kumiko.field.dateField.placeholderMonth"] ?? "",