feat(i18n): CIBG "Taal instellen" language switcher

Add a language switcher matching the CIBG Taal-instellen pattern: a <nav> region
(sr-only heading + aria-label) with an endonym link per locale (lang/hreflang, the
active one aria-current + non-link), mounted right after the skip link in the shell.
Compile-time $localize means each locale is its own bundle under /<locale>/, so the
switch is a full navigation to the sibling bundle — active locale read from the baked
base href. Pure localeLinks() (+spec) builds path-preserving targets. Since `ng serve`
serves nl-only at /, add `npm run serve:i18n` (localized build + a tiny static server
with per-locale SPA fallback) so the switch is demoable. +story.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/shared/layout/language-switcher/language-switcher.component.ts

@@ -0,0 +1,82 @@
+import { Component, computed, input } from '@angular/core';
+import { Locale, localeLinks } from './locale-links';
+
+// CIBG-GAP EXTENSION: "Taal instellen" (designsystem.cibg.nl/componenten/taal-instellen) — no
+// vendored Huisstijl class ships for it, so this is a small hand-rolled surface built from the
+// token bridge. See cibg-gaps.mdx.
+/**
+ * Organism: CIBG "Taal instellen" language switcher. A `<nav>` region (screenreader heading +
+ * aria-label) with one link per locale — the endonym, tagged with its `lang`/`hreflang`, the
+ * active one marked `aria-current` and rendered as text (not a link).
+ *
+ * Compile-time $localize means each locale is a separate bundle under `/<locale>/`, so switching
+ * is a plain full-page navigation to the sibling bundle (not a runtime toggle). The active locale
+ * is read from the baked `<base href>` (`/en/` → en, else nl) — the deployment truth, independent
+ * of the app-config `LOCALE_ID`. Only functional where both locale bundles are served (the
+ * localized build, e.g. `npm run serve:i18n`), not under plain `ng serve` (nl-only at `/`).
+ */
+@Component({
+  selector: 'app-language-switcher',
+  styles: [
+    `
+      nav {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--rhc-space-max-md);
+        padding: var(--rhc-space-max-sm) var(--rhc-space-max-2xl);
+        font-size: var(--rhc-text-font-size-sm);
+      }
+      a {
+        color: var(--rhc-color-hemelblauw-700);
+      }
+      [aria-current] {
+        font-weight: var(--rhc-text-font-weight-semi-bold);
+      }
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+        border: 0;
+      }
+    `,
+  ],
+  template: `
+    <nav [attr.aria-label]="navLabel">
+      <h2 class="sr-only">{{ heading }}</h2>
+      @for (l of links(); track l.locale) {
+        @if (l.active) {
+          <span [attr.lang]="l.locale" aria-current="true">{{ l.label }}</span>
+        } @else {
+          <a [attr.lang]="l.locale" [attr.hreflang]="l.locale" [href]="l.href">{{ l.label }}</a>
+        }
+      }
+    </nav>
+  `,
+})
+export class LanguageSwitcherComponent {
+  /** Override the detected locale (stories/tests); the app detects it from the base href. */
+  activeLocale = input<Locale | undefined>(undefined);
+
+  private readonly detected: Locale = /\/en\//.test(document.baseURI) ? 'en' : 'nl';
+  private readonly loc =
+    typeof location !== 'undefined'
+      ? location
+      : ({ pathname: '/', search: '', hash: '' } as Location);
+
+  protected links = computed(() =>
+    localeLinks(
+      this.loc.pathname,
+      this.activeLocale() ?? this.detected,
+      this.loc.search,
+      this.loc.hash,
+    ),
+  );
+
+  protected navLabel = $localize`:@@lang.navLabel:Taal / Language`;
+  protected heading = $localize`:@@lang.heading:Kies een taal`;
+}

src/app/shared/layout/language-switcher/language-switcher.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { LanguageSwitcherComponent } from './language-switcher.component';
+
+const meta: Meta<LanguageSwitcherComponent> = {
+  title: 'Design System/Organisms/Language Switcher',
+  component: LanguageSwitcherComponent,
+};
+export default meta;
+type Story = StoryObj<LanguageSwitcherComponent>;
+
+/** Dutch active (the source locale). */
+export const NederlandsActive: Story = { args: { activeLocale: 'nl' } };
+
+/** English active. */
+export const EnglishActive: Story = { args: { activeLocale: 'en' } };

src/app/shared/layout/language-switcher/locale-links.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { localeLinks } from './locale-links';
+
+describe('localeLinks', () => {
+  it('preserves the route when already under a locale prefix, marks the active one', () => {
+    const links = localeLinks('/nl/dashboard', 'nl');
+    expect(links.map((l) => [l.locale, l.href, l.active])).toEqual([
+      ['nl', '/nl/dashboard', true],
+      ['en', '/en/dashboard', false],
+    ]);
+  });
+
+  it('swaps the prefix and keeps a deep path (en active)', () => {
+    const links = localeLinks('/en/beheer/audit', 'en');
+    expect(links.find((l) => l.locale === 'nl')!.href).toBe('/nl/beheer/audit');
+    expect(links.find((l) => l.locale === 'en')!.active).toBe(true);
+  });
+
+  it('handles an unprefixed dev path (served at /), keeps query + hash', () => {
+    const links = localeLinks('/registreren', 'nl', '?scenario=slow', '#top');
+    expect(links.find((l) => l.locale === 'en')!.href).toBe('/en/registreren?scenario=slow#top');
+  });
+
+  it('a bare locale root maps to the sibling root', () => {
+    expect(localeLinks('/nl', 'nl').find((l) => l.locale === 'en')!.href).toBe('/en/');
+  });
+});

src/app/shared/layout/language-switcher/locale-links.ts

@@ -0,0 +1,37 @@
+/** The app's two locales (Angular $localize: source `nl` + translation `en`). */
+export type Locale = 'nl' | 'en';
+
+export interface LocaleLink {
+  readonly locale: Locale;
+  /** Endonym — each language named in its own language (CIBG "Taal instellen"), not a code. */
+  readonly label: string;
+  /** Absolute path into the other locale's bundle, preserving the current route. */
+  readonly href: string;
+  readonly active: boolean;
+}
+
+const LOCALES: readonly { locale: Locale; label: string }[] = [
+  { locale: 'nl', label: 'Nederlands' },
+  { locale: 'en', label: 'English' },
+];
+
+/**
+ * Build the two language links for the switcher. Compile-time i18n serves each locale as its
+ * own bundle under `/<locale>/`, so switching is a full navigation to the sibling bundle at the
+ * same route. Strips any leading `/nl` or `/en` from the current path and re-prefixes the target
+ * locale, keeping query + hash. Pure — no DOM (the component passes `location.*` in).
+ */
+export function localeLinks(
+  pathname: string,
+  active: Locale,
+  search = '',
+  hash = '',
+): LocaleLink[] {
+  const rest = pathname.replace(/^\/(nl|en)(?=\/|$)/, '') || '/';
+  return LOCALES.map(({ locale, label }) => ({
+    locale,
+    label,
+    href: `/${locale}${rest}${search}${hash}`,
+    active: locale === active,
+  }));
+}

src/app/shared/layout/shell/shell.component.ts

@@ -3,12 +3,19 @@ import { RouterOutlet } from '@angular/router';
 import { SiteHeaderComponent } from '@shared/layout/site-header/site-header.component';
 import { SiteFooterComponent } from '@shared/layout/site-footer/site-footer.component';
 import { DebugStateComponent } from '@shared/ui/debug-state/debug-state.component';
+import { LanguageSwitcherComponent } from '@shared/layout/language-switcher/language-switcher.component';
 
 /** Template: persistent app chrome. Header + footer mount once; only the routed
     content inside <router-outlet> changes (and cross-fades — see styles.scss). */
 @Component({
   selector: 'app-shell',
-  imports: [RouterOutlet, SiteHeaderComponent, SiteFooterComponent, DebugStateComponent],
+  imports: [
+    RouterOutlet,
+    SiteHeaderComponent,
+    SiteFooterComponent,
+    DebugStateComponent,
+    LanguageSwitcherComponent,
+  ],
   styles: [
     `
       :host {
@@ -46,6 +53,7 @@ import { DebugStateComponent } from '@shared/ui/debug-state/debug-state.componen
   ],
   template: `
     <a href="#main" class="skip" i18n="@@shell.skipLink">Naar de inhoud</a>
+    <app-language-switcher />
     <div class="layout">
       <app-site-header />
       <main id="main" class="main">