feat(design): adopt CIBG component patterns (header, forms, wizards, dashboard)

Re-skins the app's layout on top of the CIBG Huisstijl theme (previous commit) so it
matches designsystem.cibg.nl, not just its colour tokens — magenta ("robijn") header,
horizontal nav, and the CIBG component markup for forms/wizards/dashboard.

- Header: logo block + robijn titlebar (breadcrumb + user menu) + grey horizontal nav
  (4 links) replacing the dashboard side-nav; breadcrumb restyled for the titlebar
  (no background of its own — CIBG's global `header nav` rule otherwise bleeds a grey
  fill into it, fixed by scoping an override inside BreadcrumbComponent).
- Forms: form-field/radio-group/checkbox rebuilt on CIBG's horizontal `form-group row`
  / `form-check.styled` markup (label col-md-4, control col-md-8); same input() APIs.
- Wizards: stepper rebuilt as the CIBG "stappenindicator" (numbered circles, visited
  steps clickable for back-nav, title merged in); wizard-shell adopts the CIBG
  procesnavigatie button row. Back-navigation wired into all three wizard machines
  (registratie-wizard already had it; added `GaNaarStap` to intake/herregistratie
  machines, pure + spec'd).
- New shared/ui molecules: confirmation (animated bevestiging checkmark, replaces
  plain alerts on submit), review-section (controlestap sections with "Wijzigen"),
  application-list/application-link (CIBG "aanvragen" rows, replace the dashboard's
  card grid and aanvraag-block).
- Cleanup: delete side-nav and now-unused styles.scss utilities (.app-overview,
  .app-form-panel, .app-card-grid); correct design-tokens.mdx (it referenced tokens
  that no longer exist) and document the CIBG-value token bridge.

Verified: build/lint/check:tokens green, 178 tests pass (4 new GaNaarStap cases), and
manually driven end-to-end (dashboard, a full herregistratie submission through to the
confirmation screen, mobile width, keyboard focus).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/app/shared/ui/application-link/application-link.component.ts

@@ -0,0 +1,52 @@
+import { Component, input, output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+/** Molecule: one row in a CIBG Huisstijl "aanvragen" list — `<li><a class="application">`
+    with a title, optional subtitle/status/cta (see application-list.component.ts).
+    Renders a plain (non-interactive) row when there's nothing to navigate to — the
+    chevron/hover styling only applies to the `<a>`. A `[applicationActions]` slot
+    projects a sibling action (e.g. "Annuleren") after the anchor — a button can't
+    nest inside the anchor itself. */
+@Component({
+  selector: 'app-application-link',
+  imports: [RouterLink, NgTemplateOutlet],
+  // display:contents so the <li> becomes a real DOM/accessibility-tree child of the
+  // parent <ul> — a wrapper host between them can break list semantics for AT.
+  styles: [`:host{display:contents}`],
+  template: `
+    <li>
+      @if (to()) {
+        <a class="application" [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
+      } @else if (clickable()) {
+        <a href="#" class="application" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
+      } @else {
+        <div><ng-container [ngTemplateOutlet]="body" /></div>
+      }
+      <ng-content select="[applicationActions]" />
+    </li>
+    <ng-template #body>
+      <h3 class="application-title">{{ heading() }}</h3>
+      @if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
+      @if (status()) { <div class="status">{{ status() }}</div> }
+      @if (cta()) { <div class="cta">{{ cta() }}</div> }
+    </ng-template>
+  `,
+})
+export class ApplicationLinkComponent {
+  heading = input.required<string>();
+  subtitle = input('');
+  status = input('');
+  cta = input('');
+  /** Set for a plain routerLink navigation (e.g. the "Wat wilt u doen?" actions). */
+  to = input('');
+  /** Set when the row navigates imperatively (e.g. resume with query params) — the
+      row still renders as a clickable `<a>`, but `activate` decides what happens. */
+  clickable = input(false);
+  activate = output<void>();
+
+  protected onActivate(ev: Event) {
+    ev.preventDefault(); // fragment href resolves against <base href>, not the route
+    this.activate.emit();
+  }
+}

src/app/shared/ui/application-link/application-link.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideRouter } from '@angular/router';
+import { ApplicationLinkComponent } from './application-link.component';
+
+const meta: Meta<ApplicationLinkComponent> = {
+  title: 'Molecules/Application Link',
+  component: ApplicationLinkComponent,
+  decorators: [applicationConfig({ providers: [provideRouter([])] })],
+  render: (args) => ({
+    props: args,
+    // Rows are <li>s — a real list gives them their normal layout in the story.
+    template: `<ul class="list-unstyled"><app-application-link [heading]="heading" [subtitle]="subtitle" [status]="status" [cta]="cta" [to]="to" [clickable]="clickable" /></ul>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<ApplicationLinkComponent>;
+
+export const Navigatie: Story = {
+  args: { heading: 'Inschrijven', subtitle: 'Schrijf u in in het BIG-register.', to: '/registreren' },
+};
+export const Actie: Story = {
+  args: { heading: 'Inschrijving', status: 'Stap 2 van 3', cta: 'Verder gaan', clickable: true },
+};
+export const NietInteractief: Story = {
+  args: { heading: 'Herregistratie', status: 'Referentie 2024-00123 · ingediend op 12 mei 2024' },
+};

src/app/shared/ui/application-list/application-list.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+/** Molecule: wraps `<app-application-link>` rows in the CIBG Huisstijl "aanvragen"
+    dashboard block (`.dashboard-block.applications`) — see
+    designsystem.cibg.nl/componenten/aanvragen. Used for both the "Mijn aanvragen"
+    list and the "Wat wilt u doen?" action list on the dashboard. */
+@Component({
+  selector: 'app-application-list',
+  template: `
+    <div class="dashboard-block applications">
+      <ul class="list-unstyled">
+        <ng-content />
+      </ul>
+    </div>
+  `,
+})
+export class ApplicationListComponent {}

src/app/shared/ui/application-list/application-list.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+import { provideRouter } from '@angular/router';
+import { ApplicationListComponent } from './application-list.component';
+import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
+
+const meta: Meta<ApplicationListComponent> = {
+  title: 'Molecules/Application List',
+  component: ApplicationListComponent,
+  decorators: [
+    applicationConfig({ providers: [provideRouter([])] }),
+    moduleMetadata({ imports: [ApplicationLinkComponent] }),
+  ],
+  render: () => ({
+    template: `
+      <app-application-list>
+        <app-application-link heading="Inschrijving" status="Stap 2 van 3" cta="Verder gaan" clickable="true" />
+        <app-application-link heading="Herregistratie" status="Referentie 2024-00123 · ingediend op 12 mei 2024" />
+        <app-application-link heading="Inschrijven" subtitle="Schrijf u in in het BIG-register." to="/registreren" />
+      </app-application-list>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<ApplicationListComponent>;
+
+export const Default: Story = {};

src/app/shared/ui/checkbox/checkbox.component.ts

@@ -1,22 +1,17 @@
 import { Component, forwardRef, input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-/** Atom: a labelled checkbox wired as a form control (ngModel/reactive). Native
-    input for full keyboard + screen-reader support; the label is the click target. */
+/** Atom: a labelled checkbox wired as a form control (ngModel/reactive). Thin
+    wrapper over the CIBG Huisstijl `.form-check.styled` checkbox CSS; native
+    input for full keyboard + screen-reader support. */
 @Component({
   selector: 'app-checkbox',
-  styles: [`
-    :host{display:block}
-    label{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md);cursor:pointer}
-    /* form-check-input floats/margins for the .form-check layout; here it's flex-aligned. */
-    .form-check-input{margin:0;float:none;inline-size:1.1rem;block-size:1.1rem}
-  `],
   template: `
-    <label class="form-check-label">
+    <div class="form-check styled">
       <input class="form-check-input" type="checkbox" [id]="checkboxId()" [checked]="value" [disabled]="disabled"
         (change)="onToggle($event)" (blur)="onTouched()" />
-      <span>{{ label() }}</span>
-    </label>
+      <label class="form-check-label" [for]="checkboxId()">{{ label() }}</label>
+    </div>
   `,
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }],
 })

src/app/shared/ui/confirmation/confirmation.component.ts

@@ -0,0 +1,25 @@
+import { Component, input } from '@angular/core';
+
+/** Molecule: the CIBG Huisstijl "bevestiging" (confirmation) — an animated green
+    checkmark banner shown at the end of an aanvraagproces, ONLY when the user has
+    nothing left to do (see designsystem.cibg.nl/componenten/bevestiging). Follow-up
+    content (a reference number, a restart button) is projected below the banner. */
+@Component({
+  selector: 'app-confirmation',
+  template: `
+    <div class="confirmation">
+      <svg class="confirmation__checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" height="52" width="52">
+        <circle class="confirmation__checkmark-circle" cx="26" cy="26" r="18" fill="none" />
+        <path class="confirmation__checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+      </svg>
+      <div class="confirmation__title">
+        <span class="visually-hidden">{{ successPrefix() }}</span>{{ title() }}
+      </div>
+    </div>
+    <ng-content />
+  `,
+})
+export class ConfirmationComponent {
+  title = input.required<string>();
+  successPrefix = input($localize`:@@confirmation.succes:Succes:`);
+}

src/app/shared/ui/confirmation/confirmation.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { ConfirmationComponent } from './confirmation.component';
+
+const meta: Meta<ConfirmationComponent> = {
+  title: 'Molecules/Confirmation',
+  component: ConfirmationComponent,
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-confirmation [title]="title">
+        <p class="app-section">Uw referentienummer is 2024-00123. Bewaar dit nummer voor uw administratie.</p>
+      </app-confirmation>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<ConfirmationComponent>;
+
+export const Default: Story = { args: { title: 'Uw aanvraag is verstuurd' } };

src/app/shared/ui/data-row/data-row.component.ts

@@ -1,28 +1,15 @@
 import { Component, input } from '@angular/core';
 
-/** Molecule: one key/value row in a data summary. Hand-rolled from tokens
-    (CIBG has no data-summary component). Wrap several in a <dl> (see registration-summary). */
+/** Molecule: one key/value row in a CIBG Huisstijl "controlestap" data summary
+    (`dt.col-md-4` / `dd.col-md-8`). `display:contents` so the dt/dd become direct
+    flex children of the parent `<dl class="row">` — the Bootstrap grid classes
+    need that to lay out correctly. Wrap several in a `<dl class="row mb-0">`. */
 @Component({
   selector: 'app-data-row',
-  styles: [`
-    .item{
-      display:grid;
-      grid-template-columns:minmax(8rem, 14rem) 1fr;
-      gap:var(--rhc-space-max-md);
-      padding-block:var(--rhc-space-max-md);
-      border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);
-      margin:0;
-    }
-    /* drop the divider on the last row so the list ends cleanly */
-    :host:last-child .item{border-block-end-style:none}
-    .item-key{font-weight:var(--rhc-text-font-weight-semi-bold);margin:0}
-    .item-value{margin:0}
-  `],
+  styles: [`:host{display:contents}`],
   template: `
-    <div class="item">
-      <dt class="item-key">{{ key() }}</dt>
-      <dd class="item-value"><ng-content>{{ value() }}</ng-content></dd>
-    </div>
+    <dt class="col-md-4">{{ key() }}</dt>
+    <dd class="col-md-8"><ng-content>{{ value() }}</ng-content></dd>
   `,
 })
 export class DataRowComponent {

src/app/shared/ui/data-row/data-row.stories.ts

@@ -6,8 +6,8 @@ const meta: Meta<DataRowComponent> = {
   component: DataRowComponent,
   render: (args) => ({
     props: args,
-    // Rows live inside an RHC data-summary list (dt/dd); wrap so it renders in context.
-    template: `<dl class="rhc-data-summary"><app-data-row [key]="key" [value]="value" /></dl>`,
+    // Rows are dt.col-md-4/dd.col-md-8 flex children of a Bootstrap .row dl (CIBG controlestap).
+    template: `<dl class="row mb-0"><app-data-row [key]="key" [value]="value" /></dl>`,
   }),
   args: { key: 'BIG-nummer', value: '19012345601' },
 };

src/app/shared/ui/form-field/form-field.component.ts

@@ -1,28 +1,24 @@
 import { Component, booleanAttribute, input } from '@angular/core';
 
-/** Molecule: form field = label + projected control + optional error/description.
-    Reused by both the login form and the change-request form. */
+/** Molecule: form field = label + projected control + optional error/description,
+    in the CIBG Huisstijl horizontal `form-group row` layout (label `col-md-4`,
+    control `col-md-8`). The required asterisk comes from
+    `.form-group.required>.col-form-label::after` — no separate "(verplicht)" text.
+    Reused by the login form, the change-request form, and every wizard step. */
 @Component({
   selector: 'app-form-field',
-  styles: [`
-    :host{display:block}
-    .label{display:block;font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-end:var(--rhc-space-max-sm)}
-    .req{font-weight:var(--rhc-text-font-weight-regular);color:var(--rhc-color-foreground-subtle)}
-    .desc{color:var(--rhc-color-foreground-subtle);font-size:var(--rhc-text-font-size-sm);margin-block-end:var(--rhc-space-max-sm)}
-    .error{color:var(--rhc-color-foreground-default);font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-start:var(--rhc-space-max-sm);border-inline-start:var(--rhc-border-width-md) solid var(--rhc-color-rood-500);padding-inline-start:var(--rhc-space-max-md)}
-  `],
   template: `
-    <div class="form-field">
-      <label class="form-label label" [id]="fieldId() + '-label'" [for]="fieldId()">
-        {{ label() }}@if (required()) { <span class="req" i18n="@@formField.verplicht">(verplicht)</span> }
-      </label>
-      @if (description()) {
-        <div class="form-text desc" [id]="fieldId() + '-desc'">{{ description() }}</div>
-      }
-      <ng-content />
-      @if (error()) {
-        <div class="error" [id]="fieldId() + '-error'" role="alert">{{ error() }}</div>
-      }
+    <div class="form-group row" [class.required]="required()">
+      <label class="col-md-4 col-form-label" [id]="fieldId() + '-label'" [for]="fieldId()">{{ label() }}</label>
+      <div class="col-md-8 col-control">
+        @if (description()) {
+          <div class="form-text" [id]="fieldId() + '-desc'">{{ description() }}</div>
+        }
+        <ng-content />
+        @if (error()) {
+          <div [id]="fieldId() + '-error'" role="alert"><span class="errortext">{{ error() }}</span></div>
+        }
+      </div>
     </div>
   `,
 })

src/app/shared/ui/form-field/form-field.stories.ts

@@ -9,18 +9,21 @@ const meta: Meta<FormFieldComponent> = {
   decorators: [moduleMetadata({ imports: [TextInputComponent] })],
   render: (args) => ({
     props: args,
+    // form-horizontal + .row context, same as every real caller (wizard-shell, login-form, …).
     template: `
-      <app-form-field [label]="label" [fieldId]="fieldId" [description]="description" [error]="error">
-        <app-text-input [inputId]="fieldId" [invalid]="!!error" placeholder="Vul in" />
-      </app-form-field>`,
+      <form class="form-horizontal">
+        <app-form-field [label]="label" [fieldId]="fieldId" [description]="description" [error]="error" [required]="required">
+          <app-text-input [inputId]="fieldId" [invalid]="!!error" placeholder="Vul in" />
+        </app-form-field>
+      </form>`,
   }),
 };
 export default meta;
 type Story = StoryObj<FormFieldComponent>;
 
 export const Default: Story = {
-  args: { label: 'BSN', fieldId: 'bsn', description: '9 cijfers' },
+  args: { label: 'BSN', fieldId: 'bsn', description: '9 cijfers', required: true },
 };
 export const WithError: Story = {
-  args: { label: 'Straat en huisnummer', fieldId: 'street', error: 'Dit veld is verplicht.' },
+  args: { label: 'Straat en huisnummer', fieldId: 'street', error: 'Dit veld is verplicht.', required: true },
 };

src/app/shared/ui/radio-group/radio-group.component.ts

@@ -13,21 +13,11 @@ export const JA_NEE: RadioOption[] = [
   { value: 'nee', label: $localize`:@@common.nee:Nee` },
 ];
 
-/** Atom: a radio group. Thin wrapper over the Utrecht/RHC radio CSS, wired as a
-    form control so it works with ngModel just like the text-input atom. */
+/** Atom: a radio group. Thin wrapper over the CIBG Huisstijl `.form-check.styled`
+    radio CSS, wired as a form control so it works with ngModel just like the
+    text-input atom. */
 @Component({
   selector: 'app-radio-group',
-  styles: [`
-    .radio-option {
-      display: flex;
-      align-items: center;
-      gap: var(--rhc-space-max-md);
-      padding-block: var(--rhc-space-max-sm);
-      margin: 0;
-    }
-    /* form-check-input floats/margins for the .form-check layout; here it's flex-aligned. */
-    .radio-option .form-check-input { margin: 0; float: none; }
-  `],
   template: `
     <div
       role="radiogroup"
@@ -35,19 +25,20 @@ export const JA_NEE: RadioOption[] = [
       [attr.aria-invalid]="invalid() ? 'true' : null"
       [attr.aria-describedby]="invalid() ? name() + '-error' : null">
       @for (opt of options(); track opt.value) {
-        <label class="form-check-label radio-option">
+        <div class="form-check styled">
           <input
             class="form-check-input"
             [class.is-invalid]="invalid()"
             type="radio"
+            [id]="name() + '-' + opt.value"
             [name]="name()"
             [value]="opt.value"
             [checked]="value === opt.value"
             [disabled]="disabled"
             (change)="select(opt.value)"
             (blur)="onTouched()" />
-          {{ opt.label }}
-        </label>
+          <label class="form-check-label" [for]="name() + '-' + opt.value">{{ opt.label }}</label>
+        </div>
       }
     </div>
   `,

src/app/shared/ui/review-section/review-section.component.ts

@@ -0,0 +1,39 @@
+import { Component, input, output } from '@angular/core';
+
+/** Molecule: one section of a CIBG Huisstijl "controlestap" (wizard review step) —
+    a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a
+    `.data-block > .block-wrapper > dl.row`. Domain-free; the caller supplies the
+    heading and decides what "Wijzigen" does (typically jump back to a step). */
+@Component({
+  selector: 'app-review-section',
+  template: `
+    <div class="d-flex">
+      <h2>{{ heading() }}</h2>
+      @if (showEdit()) {
+        <div class="ms-auto">
+          <a href="#" [attr.aria-label]="editAriaLabel() || editLabel()" (click)="onEdit($event)">{{ editLabel() }}</a>
+        </div>
+      }
+    </div>
+    <div class="data-block">
+      <div class="block-wrapper">
+        <dl class="row mb-0">
+          <ng-content />
+        </dl>
+      </div>
+    </div>
+  `,
+})
+export class ReviewSectionComponent {
+  heading = input.required<string>();
+  editLabel = input($localize`:@@reviewSection.wijzigen:Wijzigen`);
+  editAriaLabel = input('');
+  showEdit = input(true);
+
+  edit = output<void>();
+
+  protected onEdit(ev: Event) {
+    ev.preventDefault(); // fragment href resolves against <base href>, not the route
+    this.edit.emit();
+  }
+}

src/app/shared/ui/review-section/review-section.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ReviewSectionComponent } from './review-section.component';
+import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
+
+const meta: Meta<ReviewSectionComponent> = {
+  title: 'Molecules/Review Section',
+  component: ReviewSectionComponent,
+  decorators: [moduleMetadata({ imports: [DataRowComponent] })],
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-review-section [heading]="heading" [editLabel]="editLabel" [editAriaLabel]="editAriaLabel" [showEdit]="showEdit">
+        <app-data-row key="Straat en huisnummer" value="Dorpsstraat 1" />
+        <app-data-row key="Postcode" value="1234 AB" />
+        <app-data-row key="Woonplaats" value="Utrecht" />
+      </app-review-section>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<ReviewSectionComponent>;
+
+export const Default: Story = {
+  args: { heading: 'Adres en correspondentie', editAriaLabel: 'Wijzigen adresgegevens' },
+};
+export const ZonderWijzigen: Story = {
+  args: { heading: 'Adres en correspondentie', showEdit: false },
+};

src/app/shared/ui/stepper/stepper.component.ts

@@ -1,61 +1,71 @@
-import { Component, input } from '@angular/core';
+import { Component, ElementRef, input, output, viewChild } from '@angular/core';
 
-/** Molecule: a horizontal step indicator for a multi-step flow. Visual progress
-    plus accessible semantics — an ordered list with `aria-current="step"` on the
-    active step and a visually-hidden "Stap X van Y" summary. Domain-free. */
+/** Molecule: the CIBG Huisstijl "stappenindicator" — numbered circles (`.step-list`),
+    visited steps clickable for back-only navigation, and the step title merged into
+    the same block (process name + "Stap X van Y: Titel", per the aanvraagproces
+    pattern). Domain-free; forward navigation only via the wizard's own buttons. */
 @Component({
   selector: 'app-stepper',
-  styles: [`
-    :host{display:block}
-    .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
-    .steps{display:flex;list-style:none;margin:0;padding:0}
-    .step{
-      flex:1 1 0;min-inline-size:0;position:relative;
-      display:flex;flex-direction:column;align-items:center;gap:var(--rhc-space-max-sm);
-      text-align:center;color:var(--rhc-color-foreground-subtle);
-    }
-    /* connector line to the previous step, drawn behind the circles */
-    .step::before{
-      content:'';position:absolute;z-index:0;
-      inset-block-start:calc(var(--rhc-space-max-4xl) / 2);
-      inset-inline-start:-50%;inline-size:100%;block-size:var(--rhc-border-width-md);
-      background:var(--rhc-color-cool-grey-300);
-    }
-    .step:first-child::before{display:none}
-    .step--done::before,.step--current::before{background:var(--rhc-color-lintblauw-500)}
-    .num{
-      position:relative;z-index:1;display:grid;place-items:center;
-      inline-size:var(--rhc-space-max-4xl);block-size:var(--rhc-space-max-4xl);
-      border-radius:var(--rhc-border-radius-round);
-      border:var(--rhc-border-width-md) solid var(--rhc-color-cool-grey-300);
-      background:var(--rhc-color-wit);
-      font-weight:var(--rhc-text-font-weight-bold);
-    }
-    .label{font-size:var(--rhc-text-font-size-sm);padding-inline:var(--rhc-space-max-sm)}
-    .step--done .num{background:var(--rhc-color-lintblauw-500);border-color:var(--rhc-color-lintblauw-500);color:var(--rhc-color-foreground-on-primary)}
-    .step--current{color:var(--rhc-color-foreground-default)}
-    .step--current .num{background:var(--rhc-color-lintblauw-700);border-color:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary)}
-    .step--current .label{font-weight:var(--rhc-text-font-weight-semi-bold)}
-  `],
   template: `
-    <nav i18n-aria-label="@@stepper.aria" aria-label="Voortgang">
-      <p class="sr-only" i18n="@@stepper.stapVan">Stap {{ current() + 1 }} van {{ steps().length }}: {{ steps()[current()] }}</p>
-      <ol class="steps">
+    <div class="stepper">
+      <ol class="step-list order-1">
         @for (label of steps(); track label; let i = $index) {
-          <li
-            class="step"
-            [class.step--current]="i === current()"
-            [class.step--done]="i < current()"
-            [attr.aria-current]="i === current() ? 'step' : null">
-            <span class="num" aria-hidden="true">{{ i + 1 }}</span>
-            <span class="label">{{ label }}</span>
+          <li>
+            @if (i < current()) {
+              <a href="#" class="step visited" (click)="select($event, i)" [attr.aria-label]="terugNaar(i, label)">
+                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
+                <span class="visually-hidden" i18n="@@stepper.voltooid">Voltooid</span>
+              </a>
+            } @else if (i === current()) {
+              <span class="step active" aria-current="step" [attr.aria-label]="huidigeStap(i, label)">
+                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
+                <span class="visually-hidden" i18n="@@stepper.huidig">Huidige stap</span>
+              </span>
+            } @else {
+              <span class="step" [attr.aria-label]="stap(i, label)">
+                <span class="visually-hidden" i18n="@@stepper.stap">Stap</span> {{ i + 1 }}
+              </span>
+            }
           </li>
         }
       </ol>
-    </nav>
+      <h2 #title tabindex="-1" class="h1 order-0">
+        @if (processName()) { <span class="process-name">{{ processName() }}</span> }
+        <ng-container i18n="@@stepper.stapVan">Stap {{ current() + 1 }}<span class="visually-hidden"> van {{ steps().length }}</span>: {{ stepTitle() || steps()[current()] }}</ng-container>
+      </h2>
+    </div>
   `,
 })
 export class StepperComponent {
   steps = input.required<string[]>();
   current = input.required<number>();
+  /** Name of the overall process, shown above the step title (e.g. "Herregistratie aanvragen"). */
+  processName = input('');
+  /** Overrides the step label as the title; falls back to `steps()[current()]`. */
+  stepTitle = input('');
+
+  /** Emitted when a visited (earlier) step is clicked — back-navigation only. */
+  stepSelected = output<number>();
+
+  private titleEl = viewChild<ElementRef<HTMLElement>>('title');
+
+  /** wizard-shell calls this after a step change so the new title is announced. */
+  focusTitle(): void {
+    this.titleEl()?.nativeElement.focus();
+  }
+
+  protected select(ev: Event, i: number) {
+    ev.preventDefault(); // fragment href resolves against <base href>, not the route
+    this.stepSelected.emit(i);
+  }
+
+  protected stap(i: number, label: string) {
+    return $localize`:@@stepper.naarStap:Stap ${i + 1}:nummer: ${label}:label:`;
+  }
+  protected huidigeStap(i: number, label: string) {
+    return $localize`:@@stepper.huidigeStapLabel:Huidige stap, stap ${i + 1}:nummer: ${label}:label:`;
+  }
+  protected terugNaar(i: number, label: string) {
+    return $localize`:@@stepper.terugNaarStap:Terug naar stap ${i + 1}:nummer: ${label}:label:`;
+  }
 }

src/app/shared/ui/stepper/stepper.stories.ts

@@ -6,14 +6,15 @@ const meta: Meta<StepperComponent> = {
   component: StepperComponent,
   render: (args) => ({
     props: args,
-    template: `<app-stepper [steps]="steps" [current]="current" />`,
+    template: `<app-stepper [steps]="steps" [current]="current" [processName]="processName" [stepTitle]="stepTitle" (stepSelected)="stepSelected($event)" />`,
   }),
 };
 export default meta;
 type Story = StoryObj<StepperComponent>;
 
 const steps = ['Adres', 'Beroep', 'Controle'];
+const base = { steps, processName: 'Inschrijven in het BIG-register', stepTitle: '', stepSelected: () => {} };
 
-export const Eerste: Story = { args: { steps, current: 0 } };
-export const Midden: Story = { args: { steps, current: 1 } };
-export const Laatste: Story = { args: { steps, current: 2 } };
+export const Eerste: Story = { args: { ...base, current: 0 } };
+export const Midden: Story = { args: { ...base, current: 1, stepTitle: 'Beroep op basis van uw diploma' } };
+export const Laatste: Story = { args: { ...base, current: 2 } };